Cara Membuat Tombol Social Media Open Hide Popup di Blog - Penjelasan: Guna Tombol Social Media Open Hide Popup untuk membantu Blogger Anda Terkenal ( Jika Anda Berusaha :) )
Dengan cara Mengshare Artikel-Artikel yang anda buat.
oleh karna itu saya akan memberi Langkah-Langkahnya.
Berikut Langkah-Langkahnya :D ( Semoga Berhasil )
Membuat Tombol Social Media Open Hide Popup di Blog1. Login ke Blogger.
2. Pilih Tata Letak / Layout.
3. Klik Add gadget / Tambahkan gadget.
4. Pilih HTML/JavaScript.
5. Letakkan kode berikut ini kedalamnya.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script><style type="text/css">#tuliskancom-circle-mod{bottom: 0 !important;left: 5px;position: fixed;}#tuliskancom-container-circle{position:relative;height:100px;width:100px}#tuliskancom-base-button{background:-moz-linear-gradient(center top,#A90329 0,#8F0222 44%,#6D0019 100%) repeat scroll 0 0 #6D0019;background:-webkit-linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);background:-o-linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);background:-ms-linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);background:linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);border:4px solid #fff;text-decoration: none;z-index:9999;cursor:pointer;border-radius:50px 50px 50px 50px;box-shadow:0 1px 3px rgba(0,0,0,0.5);color:#fff;font:68px Arial;height:80px;left:0;padding:0;position:absolute;text-align:center;top:0;width:80px}.tuliskancom-btn{position:absolute;height:50px;width:50px;border-radius:25px;top:15px;left:15px;-webkit-transition:all 250ms;-moz-transition:all 250ms;-o-transition:all 250ms;-ms-transition:all 250ms;transition:all 250ms;box-shadow:0 1px 3px rgba(0,0,0,.5)}#tuliskancom-fb.open{top:-125px;left:25px}#tuliskancom-fb.open.clicked{top:-135px;left:15px}#tuliskancom-tw.open{top:-105px;left:80px}#tuliskancom-gplus.open{top:-75px;left:125px}#tuliskancom-rss.open{top:-30px;left:160px}#tuliskancom-mail.open{left:175px;top:25px}.plus{-moz-user-select: none;-moz-transition:all 200ms ease-in 0s;-webkit-transition:all 200ms ease-in;-o-transition:all 200ms ease-in}.rot{-moz-transform:rotate(137deg);-o-transform:rotate(137deg);-webkit-transform:rotate(137deg);transform:rotate(137deg)}</style><script type="text/javascript">var delay=40,delayTime;$(function(){btns=$(".tuliskancom-btn");$("#tuliskancom-base-button").toggle(function(){$("span.plus").addClass("rot");btns.each(function(a){var b=$(this);delayTime=a*delay;window.setTimeout(function(){b.addClass("open")},delayTime)})},function(){$("span.plus").removeClass("rot");$($(btns).get().reverse()).each(function(a){var b=$(this);delayTime=a*delay;window.setTimeout(function(){b.removeClass("open")},delayTime)})})});</script><a href="http://gj37765.blogspot.com" style="position:absolute;z-index:-11"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOLFLkD_0xTlpgbhhyphenhyphenrqD55pwdxNw7FuFOEGoT-QwxA3v8y_m0HZDXREqViqUfZypIMz8P2kd1Jpvkg8eKYZ6wbxSsoprvLlL1hwt_xHUevjsFYVOH8r3ktmMPE6YAsNipuAbbHUjxlEY/s1600/1x1juice.png" /></a><div id="tuliskancom-circle-mod"><div id="tuliskancom-container-circle"><a id="tuliskancom-fb" class="tuliskancom-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYlV84_-YhDwE53Cw-kYA3FzzFhQ2EBjLp-QfHPUoRgkMFa1OU3PV8SQAam5fMBpZ5o4LMzlO6s-zd3q4wY-FKABsnefixckOMH1wpVg-lltFTqI9IaT4xYWFoUICvjNO8FX0HG2oonwcy/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -1px 0" href="https://www.facebook.com/tuliskancom" rel="nofollow" target="_blank"></a><a id="tuliskancom-tw" class="tuliskancom-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYlV84_-YhDwE53Cw-kYA3FzzFhQ2EBjLp-QfHPUoRgkMFa1OU3PV8SQAam5fMBpZ5o4LMzlO6s-zd3q4wY-FKABsnefixckOMH1wpVg-lltFTqI9IaT4xYWFoUICvjNO8FX0HG2oonwcy/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -52px 0" href="http://twitter.com/tuliskancom" rel="nofollow" target="_blank"></a><a id="tuliskancom-gplus" class="tuliskancom-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYlV84_-YhDwE53Cw-kYA3FzzFhQ2EBjLp-QfHPUoRgkMFa1OU3PV8SQAam5fMBpZ5o4LMzlO6s-zd3q4wY-FKABsnefixckOMH1wpVg-lltFTqI9IaT4xYWFoUICvjNO8FX0HG2oonwcy/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -157px 0" href="https://plus.google.com/1082849384938323232" rel="nofollow" target="_blank"></a><a id="tuliskancom-rss" class="tuliskancom-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYlV84_-YhDwE53Cw-kYA3FzzFhQ2EBjLp-QfHPUoRgkMFa1OU3PV8SQAam5fMBpZ5o4LMzlO6s-zd3q4wY-FKABsnefixckOMH1wpVg-lltFTqI9IaT4xYWFoUICvjNO8FX0HG2oonwcy/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -105px 0" href="http://feeds.feedburner.com/tuliskancom" rel="nofollow" target="_blank"></a><a id="tuliskancom-mail" class="tuliskancom-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYlV84_-YhDwE53Cw-kYA3FzzFhQ2EBjLp-QfHPUoRgkMFa1OU3PV8SQAam5fMBpZ5o4LMzlO6s-zd3q4wY-FKABsnefixckOMH1wpVg-lltFTqI9IaT4xYWFoUICvjNO8FX0HG2oonwcy/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -210px 0" href="http://feedburner.google.com/fb/a/mailverify?uri=tuliskancom&loc=en_US" rel="nofollow" target="_blank"></a><a id="tuliskancom-base-button"><span class="plus">+</span></a></div></div><a href="http://www.tuliskan.com"></a>
Keterangan:
- Jika pada template anda sudah ada kode jQuery seperti kode yang berwarna ungu diatas (versi berapapun), maka kode yang berwarna ungu diatas dihapus saja
- Ganti kode yang berwarna oranye dengan ID Feedburner blog anda
- Ganti kode yang berwarna merah dengan ID Google+ anda
- Ganti kode yang berwarna biru tua dengan ID / Nama Fan Page Facebook anda
- Ganti kode yang berwarna biru muda dengan Username Twitter anda