Tuesday, July 31, 2012

Cara Membuat Scrolling Sticky Bar Lengkap Untuk Blogger

Buka gambar di tab baru jika tidak jelas

Scrolling Sticky Bar adalah sebuah widget yang muncul di halaman kamu. Cara kerjanya sama seperti scrolling facebook header, kamu tahu kan ? itu loh, sebuah header yang jika kita scroll ke bawah akan mengikuti arahan pointer mouse.

Widget ini juga berisi sosial sharing yang berisi share ke twitter, facebook ataupun google plus. Sehingga pengunjung yang tertarik dengan postingan kamu bisa langsung membagikannya ke teman-temannya. Secara tidak langsung akan menambah nilai plus dari blog kamu. Langsung saja deh ga usah panjang lebar lagi. Kita coba menaruhnya di blog kita :)

Untuk demo langsungnya bisa kamu lihat disini

1. login ke Blogger.com

2. Klik Template --> Edit HTML --> Cari kode <body> dan kamu salin kode di bawah ini kemudian kamu letakkan di bawah kode <body>.

<div id='SYB-Bar-Container'>
<div id='SYB-Bar-Content'>
<ul id='SYB-Bar-Left'>
<li class='Home'> <a href='MASUKKAN ALAMAT URL BLOG KAMU'>Home</a> </li>
<li class='Share'> <div id='share-top'>
<ul>
<li> <a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a> </li>
<li> <g:plusone size='medium'></g:plusone> </li>
<li> <div class='fb-like' data-font='verdana' data-layout='button_count' data-send='false' data-show-faces='false'>
</div></li></ul>
<div style='clear:both;'></div></div></li>
</ul>
<ul id='SYB-Bar-Right'>
<li class='Subscribe'> <div class='SYB-email'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=MASUKKAN USERNAME FEEDBURNER KAMU&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' style='padding:3px;text-align:center;' target='popupwindow'>
<input class='textarea' gtbfieldid='3' name='email' onblur='if (this.value == "") {this.value = "";}' onfocus='if (this.value == "") {this.value = "";}' placeholder=' Enter Your Email Address :)' type='text' value=''/> <input name='uri' type='hidden' value='MASUKKAN USERNAME FEEDBURNER KAMU'/><input name='loc' type='hidden' value='en_US'/> <input class='SYB-emailsubmit' type='submit' value='Subscribe'/> </form>
<a href="http://www.hzndi.blogspot.com.com" title="Tutorial Blog dan SEO" ><img src="http://img1.blogblog.com/img/blank.gif" /></a> </div></li>
<li class='btt'> <a href='#top' title='Back to top'>Slide to Top &#8593;</a> </li>
</ul></div></div> 

3. Sekarang kamu cari kode </body>, salin kode di bawah ini dan letakkan di atas kode </body>. Untuk mencari kode </body>, jangan lupa gunakan ctrl +f oke :)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script>
//<![CDATA[
var b = $("#SYB-Bar-Container");var c = b.css("top");$(window).scroll(function (){if ($(this).scrollTop() > 50){b.stop().animate({top: "0px"}, 0)}else{b.stop().animate({top: "-100px"}, 0)}});
//]]>
</script>
<script>
$(document).ready(function(){// fade in .btt
$(function () {$(window).scroll(function (){});// scroll body to 0px on click
$('.btt a').click(function () {$('body,html').animate({scrollTop: 0}, 350);return false;});});});
</script>  
<script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs)}(document, 'script', 'facebook-jssdk'));</script>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'></script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script> 

4. Terakhir, kamu cari kode ]]></b:skin>, salin lagi kode di bawah ini dan letakkan di atas kode ]]></b:skin>.

#SYB-Bar-Container {
background-color:#f6f6f6;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));
background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));
}

 #SYB-Bar-Container , #SYB-Bar-Left .Home a, #SYB-Bar-Right .btt a,.SYB-emailsubmit {
 box-shadow: 0 5px 5px -5px #999;
 -webkit-box-shadow: 0 5px 5px -5px #999;
 -moz-box-shadow: 0 5px 5px -5px #999;
 }

 #SYB-Bar-Container{
margin: 0px 116px;
 top:-100px;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-radius:0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
 text-align:center;
 border-bottom: 1px solid #aaa;
 z-index:999;
padding:4px;
 height:33px;
  position:fixed;
  vertical-align: baseline;
  }

#SYB-Bar-Container *{
padding:0;
}

#SYB-Bar-Container a {
text-decoration:none;
}

#SYB-Bar-Content{
width:1024px;
margin:0 auto;
}

#SYB-Bar-Content li{
list-style:none;
float:left;
}

#SYB-Bar-Left{
float:left;
width:45%;
}

#SYB-Bar-Right{
float:right;
width55%;
}

#SYB-Bar-Left li{
margin-right:1%;
margin-top:-7px;
}

#SYB-Bar-Right li{
margin-top:-7px;
}

#SYB-Bar-Left .Home a, #SYB-Bar-Right .btt a,.SYB-emailsubmit{
font-size:9pt;
font-family:cambria;
font-weight:Bold;
text-transform:uppercase;
color:#fff;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
letter-spacing: 1px;
padding:6px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

#SYB-Bar-Left .Home a:active, #SYB-Bar-Right .btt a:active,.SYB-emailsubmit:active{
position: relative;
top: 1px;
box-shadow:none;
}

#SYB-Bar-Left .Home a{
background:#143eb4;
}

#SYB-Bar-Left .Home a:hover{
background:#1556fa;
}

#SYB-Bar-Right .Subscribe{
margin-top:-14px;
}



#SYB-Bar-Right .btt a{
background:#00810b;
margin-left:3px;
}

#SYB-Bar-Right .btt a:hover{
background:#06b421;
}

.SYB-emailsubmit{
background:#ce1527;
cursor:pointer;
border:none;
height:26px;
width:90px;
}
.SYB-emailsubmit:hover{
background: #f02a37;
}
.textarea{
border:1px solid #aaaaaa;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
resize:none;
font-size:8pt;
font-family:verdana;
width:170px;
height:25px;
color:#000000;
}

#share-top{
background: #f9f9f9;
border:1px solid #dddddd;
line-height: 1;
margin: -4px 0 0 60px;
padding: 10px 0 2px 5px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}

#share-top li {
display: block;
margin-right: 0;
}

#facebook-widget,#google-widget,#twitter-widget {display:none; }
@media only screen and (min-width : 768px) and (max-width : 1050px),only screen and (min-device-width : 768px) and (max-device-width : 1024px){
#SYB-Bar-Container{
display:none;
}
}

5. Simpan template dan kamu lihat hasilnya, thanks to http://www.hackinguniversity.in/ yang sudah membuat widget ini :)

Postingan Terkait:

30 comments:

  1. asik tambah lagi pengetahuan. tapi belum saya praktekin lagi. takut bingung sayanya nanti.

    ReplyDelete
    Replies
    1. hehe gpp yang penting di coba saja terlebih dahulu :D

      Delete
  2. pertamax lagi gan . . .hehehe

    support sobb nice share ini

    ReplyDelete
  3. wahhh manteb nih sobat...
    saya mau coba dulu yah :D

    ReplyDelete
  4. Makasih sob udah di share , tp entah knapa gue slalu bingung dngan hal yg beginian...
    Gomong2 , ada dampak aneh nggak kalo kita masang ini???

    ReplyDelete
    Replies
    1. kayaknya sih engga gan, kalau masih ragu, mending agan buat blog yang khusus untuk demo, jadi kalau di blog demo agan berhasil bisa langsung di terapin di blog agan :D

      Delete
  5. Replies
    1. ikuti saja langkah2nya, kan tinggal copas doang sob :)

      Delete
  6. makasih sob, sama seperti toolbar alexa nih :)

    keep share bro :D

    ReplyDelete
  7. pertamax..
    Insya Allah akan ku coba..
    terima kasih yah sob..

    ReplyDelete
  8. Mantap tutorialnya teman. Boleh juga nih caranya. Makasih

    ReplyDelete
  9. kalau lihat di-demo-nya, widget-nya keren juga ya :)

    ReplyDelete
    Replies
    1. wah saya pernah liat nie yang beginian nei gan. ini toh caranya :D

      Delete
    2. hariyanto : hehehe iyah dong :D

      Cerita anak Kost : iyah nih ane kasih tau caranya :D

      Delete
  10. tertarik sebetulnya tapi kapan-kapan saja deh

    ReplyDelete
    Replies
    1. sip gan yang penting di bookmark dulu saja :)

      Delete
  11. wahh keren nih kalo di coba..
    tp untuk saat ini lagi ga berminat.., ^_^

    ReplyDelete
  12. sudah saya coba tapi blum berhasil..
    mohon pencerannya...
    terima kasih..

    ReplyDelete
  13. Saya baca hampir semua isi blog-nya
    Ternyata yang saya cari ada disini semua
    Thank ilmunya gan..:p

    ReplyDelete
  14. Thanks gan, tapi masih belum berhasil..

    ReplyDelete

Komentarmu menunjukan kecerdasanmu, Kalau komentar cuma buat cari link buat apa ? :)

Twitter Delicious Facebook Digg Stumbleupon Favorites More