Cara Simple Memasang Pop up Kotak Share to Enter di Blog

Cara simple memasang pop up kotak share to enter di blog - Ok setelah sekian lama gak posting yang seger-seger, kali ini saya akan memosting sebuah trik lama sebenarnya, tetapi sangat manjur yaitu tips untuk mendapatkan like,share dan Google+ plus one, postingan kali ini merupakan tentang Cara simple memasang pop up kotak share to enter di blog

Banyak keuntungan yang kita bisa dapatkan dari kotak share to enter yang akan saya share berikut ini, Kotak ini merupakan kotak yang pertama kali muncul di blog anda, yang akan pertama kali muncul saat web terbuka. Kotak pop up ini memang sangat berguna bila ingin mendapatkan lalu lintas dari situs sosial karena ketika seseorang akan masuk ke blog / situs, kotak pop up ini akan muncul dan pengguna harus klik pada tombol sosial untuk mengakses situs Anda. Kotak pop up ini dibangun dengan 3 tombol situs sosial utama yaitu Tombol Like Facebook, tombol tweet dari Twitter dan tombol Google+ plus one. Jadi Intinya pengunjung harus tekan tombol share dulu agar blog kita terbuka. Memang agak memaksa, tapi anda dapat mengaturnya sesuai keinginan anda, untuk contoh dari kotak share to enter dapat anda lihat di blog So simple ini

Beberapa fitur yang bermanfaat di widget ini:

Widget ini memiliki tombol close sehingga pengunjung dapat mengacuhkannya. Tetapi anda juga dapat menghilangkan tombol close tersebut, Sehingga pengunjung tidak dapat menclosenya dan harus menekan share terlebih dahulu.
Widget ini berfungsi diberbagai macam browser dan menggunakan desain sederhana dan rapi
Ada tiga macam tombol share seperti Facebook Like, Tweet dan Google Plus one.
Orang yang sudah berbagi akan mendapatkan cookie (history) sehingga jika ia datang lain waktu dengan akun yang sama, widget ini tidak akan muncul.
Widget Ini hanya akan muncul bagi pengunjung yang tidak mengikuti Anda pada situs web sosial, tetapi jika mereka mulai mengikuti maka widget ini akan berhenti muncul kepada mereka.

Pemasangannya sangat simple, ok langsung saja:

>>Buka Blogger(open Blogger)
>> Tata Letak (Layout)
>> Tambahkan Gadget (Add a Gadget)
>>Pilih HTML/JavaScript(Choose HTML/Javascript)
>>Paste Code berikut ini kedalam kotak yang ada, biarkan judulnya >>kosong (Paste The Following Code In The Content Box and Leave The Title Empty)

<style> .blackout { display: none; position:fixed; _position:absolute; width: 100%; z-index:10000; background-color:#000; margin: 0px; padding: 0px; left:0; top:0; } .socialmodalOuter { display: none; font-family: arial; color: #575E6D; font-size: 14px; line-height: 20px; background: rgb(73, 73, 73); /* The Fallback */ background: rgba(0, 0, 0, 0.6); border-radius: 10px; left: 50%; padding: 7px; position: fixed; _position:absolute; top: 50%; z-index: 10001; } .socialmodal { background: none repeat scroll 0 0 #FFFFFF; border-radius: 3px 3px 3px 3px; width: 460px; } .socialmodal .title { border-bottom: 1px solid #E5E8EF; font-weight: bold; font-size: 19px; font-weight: bold; padding:16px 15px 10px 15px; text-align:center; } .socialmodal .subtitle { margin: 0px; background:#2e6886; color:#ffffff; padding:4px; text-align:center; font-weight: bold; font-size: 15px; } .socialmodal .warning { margin: 0px; background:#cb2026; color:#ffffff; padding:4px; text-align:center; } .socialmodal .content { padding: 0px 15px; margin-top: 10px; line-height: 17px; } .socialmodal .share { padding: 0px 15px; margin:20px 0px 15px 0px; text-align:center; height: 24px; } .socialmodal .close { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRVrzTwIgdUc-0c49QWRfai73m_yGW9-eavaGt0MCWd-r5UiPS1sSYFO833I2BmDcNCTVkJiWJztik9KSB7-VOIBersdWmPWM1I_JiNdAbduTgzCUIFI1Owm_ZDXnkxN57NpJBzjHUxWU/s1600/close.png") no-repeat; cursor: pointer; height: 12px; position: absolute; right: 15px; top: 15px; width: 12px; display: none; } .socialmodal .button { float: left; width: 115px; line-height: 24px; height: 24px; } .socialmodal .like { margin-left: 15px; } .socialmodal .twttr { margin-left: 30px; } .socialmodal .plus { width: 90px; margin-left: 50px; } /* // cusomize position of elements */ .socialmodal .footer { clear: both; background: none repeat scroll 0 0 #E8EAEF; border-radius: 0 0 3px 3px; border-top: 1px solid #DDE0E8; padding: 10px 0; color: #878D9C; text-shadow: 0 1px 0 #FFFFFF; text-align:center; font-size:13px; } </style><br /> <script src="http://code.jquery.com/jquery-latest.min.js"></script><br /> <script src="http://simplehanugra.blogspot.com"></script><br /> <script> !window.jQuery && document.write('<script src="js/jquery.js"><\/script>') </script><br /> <script src="http://apis.google.com/js/plusone.js" type="text/javascript" gapi_processed="true"></script><br /> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1" type="text/javascript"></script><br /> <script src="http://platform.twitter.com/widgets.js"></script><br /> <script src="https://sites.google.com/site/hanugramusic/list-of-song/share%20to%20enter%20box%20simplehanugra.js" type="text/javascript"></script><br /> <script src="http://mybloggerlab.com/Scripts/jquery.cookie.js" type="text/javascript"></script><br /> <script language="javascript"> $(function() { $('body').socialmodal({ subtitle: 'Like And +1 to Disable This Notification', facebook: 'http://www.facebook.com/simplehanugra', plusone: 'http://simplehanugra.blogspot.com/', count: 0, manualClose: true, }); $('body').socialmodal({ twitter: '@williamhanugra', onclick: '#download', callback: function(success) { }, }); });</script>


>>Ganti http://www.facebook.com/simplehanugra dengan Url fanspage Facebook anda.(Change the url with your fanpage url)
>>Ganti http://simplehanugra.blogspot.com/ dengan url blog anda.(Change the url with your url blog)
>>Ganti @williamhanugra dengan username twitter anda.(change @williamhanugra with your twitter username)
>>Jika anda ingin menghilangkan tombol close, maka hapus kode berikut (If you want to dissapear the close picture, erase the code bellow)
.socialmodal .close {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRVrzTwIgdUc-0c49QWRfai73m_yGW9-eavaGt0MCWd-r5UiPS1sSYFO833I2BmDcNCTVkJiWJztik9KSB7-VOIBersdWmPWM1I_JiNdAbduTgzCUIFI1Owm_ZDXnkxN57NpJBzjHUxWU/s1600/close.png") no-repeat;cursor: pointer;height: 12px;position: absolute;right: 15px;top: 15px;width: 12px;display: none;}

>>Finally Click Save and You Have Done!

>>>Thankyou<<<

Sumber

>>>Terimakasih dan semoga bermanfaat<<<