Membuat widget Guestbook & Twitter dengan efek Overlay

Pujangga Blogs

15 March 2011

Membuat widget Guestbook & Twitter dengan efek Overlay

guestbook overlay effect

Sepertinya saya tidak perlu menjelaskan apa fungsi guestbook dan twitter status kepada anda. Disini, saya hanya berusaha mencoba membantu anda untuk menciptakan kesan Waah... dan mengagumkan pada guestbook dan twitter di blog kesayangan anda semua.

Efek yang akan saya bahas kali ini adalah membuat tampilan Guestbook dan status twitter melayang dan berada ditengah - tengah halaman blog. Kita akan menyediakan menu guestbook pada sisi kiri halaman. Dan ketika menu tersebut di klik, Guestbook dan status twitter akan keluar disertai efek shadow yang menutupi halaman blog anda. Contohnya bisa anda lihat pada Guestbook blog ini atau bisa juga anda lihat disini.

Sebagai langkah awal, mari kita buat dahulu widget status twitter di twitter.com .
Silahkan Login ke akun twitter anda, lalu masuk ke menu setting » Profile. pada bagian WEB, silahkan anda klik link (You can also add Twitter to your site here)

Klik tombol PLAY

Pada halaman widget, pilih opsi My Website » Profile Widget .dibagian Setting » Username . Isi dengan Username twitter anda.

Setting semua pengaturan yang ada sesuai dengan selera anda. dan pada opsi Dimension , isi Value Width dengan nilai : 250px dan height : 350px.


Apabila semuanya sudah selesai, klik Finish & Grab code. Copy dahulu seluruh kode tersebut ke notepad, karena kode tersebut yang nantinya akan kita pakai untuk penerapan projek kita kali ini.


Langkah membuat widget status twitter selesai. Sekarang tinggal mengatur setingan tinggi dan lebar Guestbook (buku tamu) anda yang sudah ada.

Pada projek ini, saya menggunakan Shoutmix sebagai media Guestbook Untuk itu,Copy dahulu kode Shoutmix anda kedalam sebuah notepad, lalu set pengaturan width : 250 dan Height 400px.

Javascript dan kode HTML ( Efek Overlay )

Nah... sekarang kita sudah mempunyai media guestbook dan status twitter yang akan kita terapkan pada projek kali ini. Kedua media tersebut akan kita kombinasikan dengan serangkaian kode javascript dan kode HTML yang akan menciptakan efek overlay and shadow pada halaman blog anda.

Langkahnya cukup mudah, Pertama... Silahkan anda copy serangkaian kode Javascript & HTML dibawah ini ke sebuah notepad.

<script src='http://pujangga.googlecode.com/files/jquery.tools.min.js' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function(){
$("img[rel]").overlay();
});
</script>

<style type="text/css">
/* style untuk id photos */
#photos { text-align:center; }
#photos img { cursor:pointer; margin:0 0px; background-color:#fff; -moz-border-radius:4px; -webkit-border-radius:4px; } /* style untuk elemen didalam overlay */
.details { position:absolute; top:15px; right:10px; font-size:14px; color:#fff; width:250px;}
.details h3 { color:#aba; font-size:15px; margin:0 0 -10px 0;}
/* the overlayed element */
.simple_overlay { /* place overlay on top of other elements */ z-index:10000; /* styling */ background-color:#333; width:520px; border:1px solid #666; /* CSS3 styling for latest browsers */ -moz-box-shadow:0 0 90px 5px #000; -webkit-box-shadow: 0 0 90px #000; height: auto; display: none;}
/* close button positioned on upper right corner */
.simple_overlay .close { background-image:url(http://2.bp.blogspot.com/-1PGMTRZFR8E/TVrkC4a6w7I/AAAAAAAAAyg/0UepWw1W59k/s1600/close.png); position:absolute; right:-15px; top:-15px; cursor:pointer; height:35px; width:35px;}
/* end overlay styling */   /* get rid of those system borders being generated for A tags */
a:active { outline:none;}
:focus { -moz-outline-style:none;}
</style>

<!-- overlays -->
<div class="simple_overlay" id="mies1"><div class="close"></div>
MASUKAN SCRIPT STATUS TWITTER DISINI
<div class="details">
MASUKAN SCRIPT SHOUTMIX DISINI
Silahkan isi buku tamu disini..
</div>
</div>

<div id="photos" style="position: fixed; bottom: 50%; left: 0;" ><img src="http://pujangga-page.webs.com/guestbook.gif" alt="bukutamu" width="40" height="150" rel="#mies1"/></div>

Keterangan : anda cukup mengganti tulisan yang berwarna merah tebal dengan masing - masing media yang sebelumnya telah kita siapkan, yakni SCRIPT STATUS TWITTER dan SHOUTMIX .

Sekarang, waktunya anda meletakan keseluruhan kode javascript dan html tersebut ke dalam gadget baru pada blogspot anda. Cukup dengan login ke akun blogger » Dashboard » Design » Add a gadget . Lalu pilih HTML/JAVASCRIPT , dan letakan keseluruhan kode script tersebut didalamnya dan klik SAVE . mudah kan.. ? bersiul

Sekarang lihat hasilnya... waktunya anda blogwalking peace

Semoga bermanfaat yah..... salam.

14 comments:

jamaludin said...

terimakasih mas..sudah berhasil :36

akbar said...

thanks, its work

FALOPU Cyber on April 17, 2011 at 7:27 AM said...

pagi. ne pnya saia kug gk bsa ya gan... ap template jg mmpengaruhi. muncul gmbarnya, tp klo diklik gk bisa. mohon pencerahannya

Pujangga on April 17, 2011 at 7:48 AM said...

@ FALOPU Cyber :
BOleh liat link blog nya ?

mp3webster on April 20, 2011 at 11:59 AM said...

iya gan... aku juga ga bisa kenapa nih :23

Pujangga on April 20, 2011 at 12:28 PM said...

@mp3webster : ngga bisanya seperti apa yah ?

Depjas on May 1, 2011 at 8:05 AM said...

iya ne ga bisa juga,,,gambarnya Guestbook muncul tp di klik ga muncul apa2

Pujangga on May 1, 2011 at 12:14 PM said...

kalo gitu coba pindahin jaascriptnya di template HTML , dan letakkan di bawah <head>
<script src='http://pujangga.googlecode.com/files/jquery.tools.min.js' type='text/javascript'/>

Admin on June 5, 2011 at 8:07 PM said...

sorry mas, apakah guestbook with an overlay effect ini bisa dipasang di wordpress ? klo bisa, gimana caranya ?

Anonymous said...

What a data of un-ambiguity and preserveness of precious familiarity concerning unexpected emotions.


my website asphalt 8 airborne hack

Anonymous said...

Provide a list of individuals or organizations that are not directly affiliated to the agency which can aid you with your adoption,
along with the costs of those services. Hippie earrings are distinctive, handmade from natural
components like stones, precious gems and beads. With time changes, Vietnam being one day ahead of
the United States, it is very possible Nia was born on or around March
7th'.

Also visit my web site - adoption services

Anonymous said...

My relatives everү time say that I am wasting my time hhere at wеƄ, but I know I
am ցetting familiaritty every day by reading such goodd articles.


Feel free to νisit my blog - andsrson windows 1975
replacement glaѕs san francisco ()

Anonymous said...

Giuseppe Zanotti Sneakers Ray Ban Sunglasses Cheap UGGs Hermes Birkin
Christian Louboutin Outlet Online Babyliss Straighteners Michael Kors Outlet Online Oakley Sunglasses Babyliss Big Hair
Jimmy Choo Shoes Nike Air Max Michael Kors Outlet Online Louis Vuitton Outlet Store CHI Flat Iron Michael Kors Outlet Online mac cosmetics Wholesale Michael Kors Outlet Stores CHI Flat Iron Website The North Face Cheap UGGs Michael Kors Outlet Online Prada Handbags Lebron James Shoes Ray Ban Sunglasses Outlet Beats By Dre Michael Kors Outlet online Ray Ban Sunglasses Air Max Lululemon Outlet Kate Spade Outlet

My web site :: Nike Free

Anonymous said...

Using vibrator on clitoris while performing oral intercourse can carry her
to unknown sexual bliss.

My web site :: sex link chickens


Post a Comment

:11
smiley
:12
smiley
:13 smiley :14
smiley
:15
smiley
:16
smiley
:17
smiley
:18
smiley
:19
smiley
:20
smiley
:21
smiley
:22 smiley :23 smiley :24
smiley
:25
smiley
:26
smiley
:27
smiley
:28
smiley
:29
smiley
:30
smiley
:31
smiley
:32
smiley
:33 smiley :34
smiley
:35
smiley
:36
smiley
:34
smiley
:38
smiley
:39
smiley
:40
input code is in the right smile icon image

Silahkan tinggalkan komentar anda dan harap tidak melakukan Spam..!!

Pujangga Blogs

administratorSeandainya segala sesuatu yang telah saya berikan ini bermanfaat bagi rekan-rekan semua.Sungguh saya ucapkan banyak Doa dan terimakasih kepada Mu Allah.SWT yang telah memberikan nikmat Berbagi sesama manusia dengan niat kebaikan dan kemajuan Negeriku ini..

the existence of this blog aims to broaden the information about web design by studying the parts of the structure of the html code for the beginner. Here also you can get the latest info about the entertainment media, affiliate programs etc.

Recent post


Download Free Movie


Pujangga Blogs Head News

Mengubah ILM ads google Untuk mengganti tampilan adsense google yang menampilkan Iklan Layanan Masyarakat tersebut dengan adsense lokal. Anda harus mengupload script adsense lokal dengan extensi html kelayanan webhosting anda.
Recent comment dengan efek overlay menu Following cursorBagi anda yang mempunyai keterbatasan ruang untuk meletakan widget Recent Comments, Saya akan mencoba membantu anda untuk membuat "Widget Recent comments" dengan efek overlay.
Membuat Guestbook Overlay fading headerEfek yang akan saya bahas kali ini adalah membuat tampilan Guestbook dan status twitter melayang dan berada ditengah - tengah halaman blog. Kita akan menyediakan menu guestbook pada sisi kiri halaman.
Membuat Headline Post widget tooltipsHeadline akan menggulung ke atas dengan sentuhan fade out ,seakan konten tersebut hilang dengan perlahan dan konten yang berada di bawahnya akan naik ke atas mengganti konten sebelumnya.
Membuat Number Page Navigation jQueryUmumnya Navigasi halaman dengan angka ini sering kita jumpai pada blog berplatform Wordpress. Namun bagi anda yang menggunakan platform Blogspot tak perlu berkecil hati, karena blogspot pun bisa mengadopsi tampilan NEXT dan PREV dengan widget Page Navigation Number.
Kode adsense didalam post menu navigasiUntuk meletakan Adsense didalam postingan, anda harus meletakan kode Script ads tersebut langsung ke template HTML blogspot. Sebagai langkah awal, silahkan anda login ke blogger.com » Dasboard »Design » Edit HTML » Beri tanda ceklist pada kolom .
1 2 3 4 5 6

Enter your email address:




review www.pujangga-adhitya.blogspot.com on alexa.com

free counters
 

Followers

Live Blog Stats

Recent Comment