Membuat Pop Up Like Facebook Twitter Dan Google Plus Di Blog - Hallo sahabat TIPS TUTORIAL ANDROID, Pada Artikel yang anda baca kali ini dengan judul Membuat Pop Up Like Facebook Twitter Dan Google Plus Di Blog, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat Pop Up Like Facebook Twitter Dan Google Plus Di Blog
link : Membuat Pop Up Like Facebook Twitter Dan Google Plus Di Blog

Membuat Pop Up Like Facebook Twitter Dan Google Plus Di Blog

Membuat Pop Up Like Facebook Twitter dan Google Plus Di Blog - Anda niscaya sering melihat pop up yang terpasang di blog-blog entah di Google Blogger maupun di blog Wordpress. Tujuannya yakni untuk mempromosikan fans page facebook dari blog tersebut supaya banyak yang mengikuti yang otomatis akan menghasilkan trafik setiap kali anda memperbaharui artikel. Dan biasanya, jenis pop up widget tersebut hanya menampilkan like box facebook. Lalu bagaimana kalau pop up tersebut di tambahi tombol twitter follow atau google plus follow?

Hey Pop Up ialah adalah widget yang mengambil desain bergaya flat, yang akan menampilkan 3 tombol media jejaring sosial yakni untuk facebook, twitter dan google plus. Widget pop up ini aku tambahkan efek atau animasi CSS3 sehingga pada dikala pengunjung blog tiba ke landing page maka pop up inipun akan muncul dari atas ke bawah. Cara kerja dari widget ini hanya akan tampil pada browser yang dibuka di desktop/PC dan tablet tetapi tidak akan ditampilkan pada pembaca blog yang memakai smartphone atau ponsel, widget pop up follow twitter, google plus dan facebook like ini akan muncul pada tiap posting. Tidak ada tombol close dalam widget ini alasannya ialah ketika pengunjung melaksanakan klik diluar pop up ini, maka akan tertutup.

Lihat Demo

Cara Membuat Pop Up Like Facebook Twitter dan Google Plus Di Blogger :
1) Masuk ke pengaturan Tata Letak Blog Anda kemudian klik Tambah Gadget
2) Pilih kemudian klik HTML/Javascript
3) Masukkan semua arahan dibawah kedalam widget tersebut kemudian 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 terbaru atau pribadi bertanya mengenai 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 bekerja untuk mempromosikan blog anda di media jejaring sosial tersebut.

Demikianlah Artikel Membuat Pop Up Like Facebook Twitter Dan Google Plus Di Blog

Sekianlah artikel Membuat Pop Up Like Facebook Twitter Dan Google Plus Di Blog kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Pop Up Like Facebook Twitter Dan Google Plus Di Blog dengan alamat link https://tipstutorial-android.blogspot.com/2020/03/membuat-pop-up-like-facebook-twitter.html

Share this post