Almuqorrobin Bahsyar Darmalian: 11/20/13

Rabu, 20 November 2013

Cara Membuat Like Box Facebook Page di samping Blog

Banyak cara yang dilakukan untuk membuat tampilan Facebook Fan Page jadi lebih menarik, salah satunya dengan menampilkan Fan Page tersembunyi pada samping blog Anda. Jika Anda sudah memiliki Facebook Page, langsung saja ikuti langkah berikutnya cara membuat like box facebook page di samping blog berikut ini :

1. Login akun blogger Anda.
2. Pilih Template > Edit HTML > letakkan kursor pada area kode HTML.
3. Cari kode </head> dengan menggunakan Ctrl + F.
4. Letakkan kode berikut diatas kode </head>

5. Simpan template.

NB: Jika kode tersebut sudah ada pada template Anda, lanjutkan langkah selanjutnya.

Kemudian kita lanjutkan ke langkah selanjutnya yaitu memasang facebook page pada samping blog :
1. Pilih Tata Letak ---> Tambah Gadget ---> HTML/JavaScript.
2. Copy kode berikut ini pada HTML/JavaScript.

//<!--

$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});

//-->

</script>

.w2bslikebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}

.w2bslikebox div{border:none;position:relative;display:block;}

.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}

.w2bslikebox span a{color: #808080;text-decoration:none;}

.w2bslikebox span a:hover{text-decoration:underline;}

</style><div class="w2bslikebox" style=""><div>

3. Simpan.

Keterangan :
Ganti tulisan yang berwarna biru dengan URL Facebook Page Anda.

Nahh! udah taukan sekarang bagaimana caranya membuat like box facebook page di samping blog? dengan adanya facebook page tersembunyi disamping blog, tampilan widget blog Anda jadi lebih bervariasi . SEMOGA BERMANFAAT~

Cara Membuat Menubar atau Submenu di Blog

Membuat submenu bukanlah hal yang mudah tetapi dengan postingan ini saya rasa hal ini akan terasa mudah dan tidak menjadi hal sulit. Bagaimana cara membuatnya? Langsung saja anda ikuti langkah-langkah berikut :

1. Login pada blogger anda

2. masuk ke halaman Template

3. Edit HTML lalu Lanjutkan

4. Klik centang pada Expand Template Widget

5. Cari kode ]]></b:skin> (gunakan ctrl+f)

6. Pasang kode di bawah ini di atas kode ]]></b:skin>

#navbarmenu{width:930px; float:left; font-size:12px; color:#FFF; font-weight:bold; margin:0 auto; padding:0 auto} #nav{margin:0; padding:0} #nav ul{float:left; list-style:none; margin:0; padding:0} #nav li{list-style:none; margin:0; padding:0; background:none} #nav li a, #nav li a:link, #nav li a:visited{color:#992211; display:block; font-weight:normal; text-transform:normal; margin:0; padding:5px 15px 5px} #nav li a:hover{background:#4a4d4c; color:#FFF; margin:0; -moz-border-radius:8px; padding:5px 15px 5px; text-decoration:none} #nav li li a, #nav li li a:link, #nav li li a:visited{background:#FFF; -moz-border-radius:8px; width:150px; color:#992211; font-weight:normal; text-transform:normal; float:none; margin:0; padding:5px 10px 5px 15px; border-bottom:1px solid #4a4d4c; border-left:1px solid #4a4d4c; border-right:1px solid #4a4d4c} #nav li li a:hover{background: #4a4d4c; color:#FFF; padding:5px 10px 5px 15px} #nav li{float:left; padding:0} #nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0} #nav li ul a{width:140px} #nav li ul ul{margin:-25px 0 0 171px} #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em} #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto} #nav li:hover, #nav li.sfhover{position:static}

7. Selanjutnya cari kode <div id="content-wrapper">

8. Pasang kode di bawah ini di Atas kode yang bercetak tebal pada no 7

<div id='menu'>
<div id='menu-wrap'>
<div id='navbarmenu'>
<ul id='nav'>
<li><a href="http://purwogondofc.blogspot.com/">Home</a></li>
<li><a href="http://purwogondofc.blogspot.com/">Artikel</a>
<ul>
<li><a href="http://purwogondofc.blogspot.com/">Tips Karir</a></li>
<li><a href="http://purwogondofc.blogspot.com/">Kesehatan</a></li>
</ul>
</li>
<li><a href="http://purwogondofc.blogspot.com/">Tutorial Blog</a></li>
</ul>
</div>

9. Simpan Template dan lihat hasilnya

Catatan !!

Ganti tulisan yang berwarna Merah dengan url link menubar yang diinginkan, misal: link postingan, link kategori, link halaman statis atau lainnya
Ganti tulisan berwarna Biru dengan tulisan judul menubar tersebut, seperti: Home, Artikel, Tutorial atau lainnya

SELAMAT MENCOBA~

Baca selengkapnya »