Membuat Tombol Social Media Open Hide Popup di Blog

Oleh effendy

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.

Karena jika kita hanya memanfaatkan dan mengedepankan search engine semata tanpa mempedulikan jejaring sosial, itu adalah hal yang keliru, sederhananya begini saja, jika dibandingkan seo, tentu social media akan lebih mudah untuk dioptimalkan, karena kita hanya perlu mengumpulkan banyak fans atau follower di akun kita, sedangkan kita harus melakukan banyak trial & error jika kita ingin menemukan patron atau formula seo yang baik di mata mesin pencari, dan nampaknya hal tersebut akan memakan waktu yang tak sebentar.

Selain itu, Social Media ini adalah rangka dalam usaha "mem-backup" trafik blog, coba saja sobat fikirkan misalnya suatu saat nanti hal yang tidak diinginkan terjadi pada blog kita, khusunya di deindeks dari mesin pencari, itu artinya semua konten blog kita akan diabaikan oleh mesin telusur, jika sudah terjadi hal tersebut, apa yang akan kita lakukan? tentu melakukan pemulihan kembali terhadap reputasi blog kita di mata mesin pencari, tapi mengembalikan kepercayaan tersebut juga memakan waktu yang cukup lama, sedangkan jika kita sudah mempunyai "perbekalan" social media ditambah dengan fans atau followers yang banyak, maka tidak menutup kemungkinan bahwa trafik yang bersumber dari mesin pencari tersebut akan tertutup oleh trafik dari social media.

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 lho!

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/AVvXsEgEU9ZISF1JUQlDMMbaR7fngIERQ0gzQ1_MAH_N-5KOc9ApcZdIJwmpjSoHgYMcjX0New-1TFgEQCNhyphenhyphen2zXxTLfKOA88hYOinljOFJ34_fJi_JgE6Todo5GwXAebkZ9_O0OHxV8p7S8AhE/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/AVvXsEir7-JnFAQEGfd2dY_IVXTL5o3n1KhZO2Iiqg60n5kwl69Qi63Ozy1Qcqr5RshKwl0OjsypLPuSm5TcMbMZEdMcR_STy0MtAy_q_4UEJkeSoWterLt7QDTxffnaVuPy-HzB-sd8GbEA9WmG/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/AVvXsEir7-JnFAQEGfd2dY_IVXTL5o3n1KhZO2Iiqg60n5kwl69Qi63Ozy1Qcqr5RshKwl0OjsypLPuSm5TcMbMZEdMcR_STy0MtAy_q_4UEJkeSoWterLt7QDTxffnaVuPy-HzB-sd8GbEA9WmG/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/AVvXsEir7-JnFAQEGfd2dY_IVXTL5o3n1KhZO2Iiqg60n5kwl69Qi63Ozy1Qcqr5RshKwl0OjsypLPuSm5TcMbMZEdMcR_STy0MtAy_q_4UEJkeSoWterLt7QDTxffnaVuPy-HzB-sd8GbEA9WmG/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/AVvXsEir7-JnFAQEGfd2dY_IVXTL5o3n1KhZO2Iiqg60n5kwl69Qi63Ozy1Qcqr5RshKwl0OjsypLPuSm5TcMbMZEdMcR_STy0MtAy_q_4UEJkeSoWterLt7QDTxffnaVuPy-HzB-sd8GbEA9WmG/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/AVvXsEir7-JnFAQEGfd2dY_IVXTL5o3n1KhZO2Iiqg60n5kwl69Qi63Ozy1Qcqr5RshKwl0OjsypLPuSm5TcMbMZEdMcR_STy0MtAy_q_4UEJkeSoWterLt7QDTxffnaVuPy-HzB-sd8GbEA9WmG/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

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 Membuat Menu Navigasi Classic dengan Sub Menu di Blog, semoga bermanfaat, dan selamat mencoba. 

Read more: http://www.tuliskan.com/2013/06/membuat-tombol-social-media-open-hide-popup-melayang-di-blog.html#ixzz2Z2BnwZ6L