Cara Membuat Tombol Social Media Open Hide Popup di Blog

Jika sebelumnya anda sudah pernah menyimak postingan-postingan lawas di blog ini, tentunya anda juga sudah pernah bukan menemukan artikel yang bertemakan social media? Ya, saya hanya ingin kembali menekankan saja kepada sahabat-sahabat blogger semua, bahwasanya social media sebenarnya memiliki pangsa pasar atau cakupan yang cukup luas untuk menguasai sumber trafik blog, disamping search engine tentunya, karena dengan social media ini kita bukan hanya bisa sekedar ber-interaksi saja, namun kita juga bisa digunakan sebagai sarana mempromosikan blog kepada jangkauan yang lebih luas, agar blog semakin ramai akan pengunjung dan komentar tentunya.

Oleh karena itu, pada kesempatan kali ini saya akan membagikan sebuah widget yang kiranya dapat membantu anda dalam memaksimalkan atau memudahkan dalam upaya mempromosikan blog anda kepada jangkauan yang lebih luas lewat social media, widget tersebut adalah Tombol Social Media Open Hide Popup, yaitu widget yang dipergunakan untuk memasarkan atau menginformasikan keberadaan dari akun social media blog kita kepada para pengunjung, agar banyak dari mereka yang suka dan ingin menjadi fans atau follower di akun social media blog kita, selain itu, widget ini juga bersifat melayang (popup) dan dilengkapi efek open hide loh!

Berikut Cara Membuat Tombol Social Media Open Hide Popup di Blog :

1. 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/AVvXsEjR8I0bhI0saI5KTN7kQLpm1A7a5zl97OHdLCKKEzaMrq972WSzUB4UqfAs0JYuaCkJnC7KDAbdsyDsEbe3S6MkgbQ8HkXJmFTRGPGnE-R68cJc07ttYD39JAZ1Jcd4wtZOFY9TiTSzVIY/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/AVvXsEgr7gR7E8skvB4A4uRSw_KLa8w3fRA6pnbKSmnPr-Gqg9XlspJDXGTB7q7396fjoOsOxnserrVCoV-RBENAfRQTW9yg2htcnfZkksH1N-fjlyQYM_HSClS9h0IDcDUIPrDMaX0KCF61IDhv/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/AVvXsEgr7gR7E8skvB4A4uRSw_KLa8w3fRA6pnbKSmnPr-Gqg9XlspJDXGTB7q7396fjoOsOxnserrVCoV-RBENAfRQTW9yg2htcnfZkksH1N-fjlyQYM_HSClS9h0IDcDUIPrDMaX0KCF61IDhv/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/AVvXsEgr7gR7E8skvB4A4uRSw_KLa8w3fRA6pnbKSmnPr-Gqg9XlspJDXGTB7q7396fjoOsOxnserrVCoV-RBENAfRQTW9yg2htcnfZkksH1N-fjlyQYM_HSClS9h0IDcDUIPrDMaX0KCF61IDhv/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/AVvXsEgr7gR7E8skvB4A4uRSw_KLa8w3fRA6pnbKSmnPr-Gqg9XlspJDXGTB7q7396fjoOsOxnserrVCoV-RBENAfRQTW9yg2htcnfZkksH1N-fjlyQYM_HSClS9h0IDcDUIPrDMaX0KCF61IDhv/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/AVvXsEgr7gR7E8skvB4A4uRSw_KLa8w3fRA6pnbKSmnPr-Gqg9XlspJDXGTB7q7396fjoOsOxnserrVCoV-RBENAfRQTW9yg2htcnfZkksH1N-fjlyQYM_HSClS9h0IDcDUIPrDMaX0KCF61IDhv/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 Biru diatas (versi berapapun), maka kode yang berwarna Biru diatas dihapus saja
• Ganti kode yang berwarna Pink dengan ID Feedburner blog anda
• Ganti kode yang berwarna Hijau dengan ID Google+ anda
• Ganti kode yang berwarna Merah dengan ID / Nama Fan Page Facebook anda
• Ganti kode yang berwarna Ungu dengan Username Twitter anda

6. Klik "Save/Simpan" gadget, dan selesai.

Demikian informasi terbaru tentang Membuat Tombol Social Media Open Hide Popup di Blog, simak juga artikel menarik lainya seputar tutorial dan tips trik blog tentang Menampilkan Widget Di Halaman Tertentu, semoga bermanfaat, dan selamat mencoba.