Membuat Pop Up Like Facebook Twitter dan Google Plus Di Blog - Anda tentu sering menyaksikan pop up yang terpasang di blog-blog entah di Google Blogger maupun di blog Wordpress. Tujuannya yakni untuk mengiklankan fans page facebook dari blog tersebut biar banyak yang mengikuti yang otomatis akan menciptakan trafik setiap kali anda memperbaharui artikel. Dan biasanya, jenis pop up widget tersebut cuma memperlihatkan like box facebook. Lalu bagaimana jikalau pop up tersebut di tambahi tombol twitter follow atau google plus follow?
Hey Pop Up merupakan yakni widget yang mengambil desain bergaya flat, yang hendak memperlihatkan 3 tombol media jejaring sosial yakni untuk facebook, twitter dan google plus. Widget pop up ini saya tambahkan efek atau animasi
Cara Membuat Pop Up Like Facebook Twitter dan Google Plus Di Blogger :
1) Masuk ke pengaturan Tata Letak Blog Anda lalu klik Tambah Gadget
2) Pilih lalu klik
3) Masukkan semua aba-aba dibawah kedalam widget tersebut lalu klik simpan
Sekarang coba anda buka salah satu kiriman yang ada di blog anda, maka widget pop up like facebook, follow twitter dan google Plus inipun akan siap melakukan pekerjaan untuk mengiklankan blog anda di media jejaring sosial tersebut.
Sumber https://henponterbaru.blogspot.com
Hey Pop Up merupakan yakni widget yang mengambil desain bergaya flat, yang hendak memperlihatkan 3 tombol media jejaring sosial yakni untuk facebook, twitter dan google plus. Widget pop up ini saya tambahkan efek atau animasi
CSS3 sehingga pada dikala hadirin blog datang ke landing page maka pop up inipun akan timbul dari atas ke bawah. Cara kerja dari widget ini cuma akan tampil pada browser yang dibuka di desktop/PC dan tablet tapi tidak akan ditampilkan pada pembaca blog yang memakai ponsel cerdas atau ponsel, widget pop up follow twitter, google plus dan facebook like ini akan timbul pada tiap posting. Tidak ada tombol close dalam widget ini lantaran merupakan dikala hadirin menjalankan klik diluar pop up ini, maka akan tertutup.Cara Membuat Pop Up Like Facebook Twitter dan Google Plus Di Blogger :
1) Masuk ke pengaturan Tata Letak Blog Anda lalu klik Tambah Gadget
2) Pilih lalu klik
HTML/Javascript3) Masukkan semua aba-aba dibawah kedalam widget tersebut lalu klik simpan
<style> @media screen and (max-width:600px){#HrPv1,#HrPv{display:none!important}}#HrPv1{background:#4a708b;width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;opacity:.5}#HrPv{top:0;left:0;background-color:#f5f5f6;border-radius:5%;width:340px;height:260px;border:3px solid #da244f;box-shadow:0 0 10px 0 rgba(0,0,0,0.3);z-index:99999;bottom:0;right:0;position:fixed;margin:20% auto;animation-name:HrPvDo;-webkit-animation-name:HrPvDo;animation-duration:3s;-webkit-animation-duration:3s;animation-timing-function:easeIn;-webkit-animation-timing-function:ease;visibility:visible!important}@keyframes HrPvDo{0%{transform:translateY(-100%)}50%{transform:translateY(8%)}65%{transform:translateY(-4%)}80%{transform:translateY(4%)}95%{transform:translateY(-2%)}100%{transform:translateY(0%)}}@-webkit-keyframes HrPvDo{0%{-webkit-transform:translateY(-100%)}50%{-webkit-transform:translateY(8%)}65%{-webkit-transform:translateY(-4%)}80%{-webkit-transform:translateY(4%)}95%{-webkit-transform:translateY(-2%)}100%{-webkit-transform:translateY(0%)}}#HrPv p{background:none repeat scroll 0 0 #da244f;font-size:1.3em;font-weight:bold;border-width:medium medium 3px;border-style:none none solid;border-color:-moz-use-text-color -moz-use-text-color #b5002a;-moz-border-top-colors:none;-moz-border-right-colors:none;-moz-border-bottom-colors:none;-moz-border-left-colors:none;border-image:none;padding:5px;color:#FFF;border-radius:3px;text-align:center}#HrPv .somedi{width:95%;background:#eee5de;margin:0 auto;border-radius:5px;padding:1px;line-height:24px;box-shadow:0 1px 2px #CCC inset} </style> <div id="HrPv1"></div> <div id="HrPv"> <p>Mau dapet update modern atau langsung mengajukan pertanyaan perihal Tutorial kami?</p> <div class="somedi"> <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/heyriadcom&colorscheme=light&show_faces=false&show_border=false&stream=false&header=false' style='border: none; overflow: hidden;width:200px;height:60px '></iframe> <a style='height:60px' href="https://twitter.com/TeacHowTo" class="twitter-follow-button" data-dnt="true"></a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <!-- Place this tag where you want the widget to render. --> <div class="g-follow" data-annotation="bubble" data-height="20" data-href="//plus.google.com/u/0/103761472882130515155" data-rel="publisher"></div> <!-- Place this tag after the last widget tag. --> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </div></div> <script type="text/javascript"> $(document).ready(function(){ $("#HrPv1").click(function(){ $(this).fadeOut(); $("#HrPv").fadeOut(); }); }); </script> Sekarang coba anda buka salah satu kiriman yang ada di blog anda, maka widget pop up like facebook, follow twitter dan google Plus inipun akan siap melakukan pekerjaan untuk mengiklankan blog anda di media jejaring sosial tersebut.