Popup Floating Share Melayang

1,025 Pembaca
  • Whatsapp

Blogzine – Onklik, kembali lagi dengan bahasan tentang editing blog. Bahasan kali ini berkaitan dengan pembuatan PopUp Floating Melayang pada laman blog yang kita bangun, untuk diketeahui PopUp Floating melayang adalah bagian dari isi sebuah laman yang posisinya selalu ONTOP (melayang), didalamnya dapat diletakan iklan, link like facebook, link follow twitter atau link google + dan lainnya.

Keuntungan dari penggunaan PopUp floating ini adalah isi didalam floating PopUp akan selalu dilihat oleh pengunjung blog ketiga Blog pertama diloading, untuk itu ada baiknya diletakan saja link follow twitter atau like facebook yang tidak terlalu memakan space halaman sehingga pengunjung tidak risih dengan hadirnya floating PopUp ini.

Kali ini Onklik akan berbagi pada anda cara membuat PopUp Floating Melayang yang isinya Widget Share (Twitter, Facebook, dan Google +1). Berikut langkah-langkah pembuatannya.

1. Penerapan pada blogspot :

  • Buka laman dasboard Blogger.
  • Klik pada menu template, kemudian pilih edit html.

edit-template-blogspot

2. Penerapan Pada WordPress

  • Langkah pertama login kedasboard Admin.
  • Setelah masuk kelaman dashboard, pilih Appearance > Editor.

editor-wordpress

Setelah sampai pada tahap editing, pilih tempat dimana script akan diletakan, pada blogspot diletakan di dalam tag Body sedangkan pada WordPress diletakan pada laman index.php. Masukan sintax code berikut ini.

<style> #floatdiv { position:fixed; bottom:15%; margin-left:-70px; z-index:10; float:left; padding-bottom:2px;}
#mbtsidebar{background:#fff; border-top:1px solid #ddd; border-left:1px solid #ddd; border-bottom:1px solid #ddd; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding-left:5px; width:60px; margin:0 0 0 5px; }
.fb_share_count_top {width:52px !important;}
.fb_share_count_top, .fb_share_count_inner{-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small{width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id="floatdiv">
<div id="mbtsidebar">
<table cellpadding="1px" cellspacing="0">
<tr> <td style="padding:5px 0px 0px 0;">
<a onClick="changeadfoc('https://twitter.com/share')" href="http://adfoc.us/serve/sitelinks/?id=146445&url=https://twitter.com/share" class="twitter-share-button" data-via="NAMA TWITTER KAMU" data-lang="en" data-related="anywhereTheJavascriptAPI" data-count="vertical">Tweet</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></td>
</tr>
<tr><td style="padding:5px 0 2px 0;"> <a name="fb_share" type="box_count" onClick="changeadfoc('http://www.facebook.com/sharer.php')" href="http://adfoc.us/serve/sitelinks/?id=146321&url=http://www.facebook.com/sharer.php">Share</a><script src="https://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></td>
</tr>
<tr><td style=" padding:5px 0px 0px 0px;">  <script src='https://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>  <g:plusone size="Tall" expr: onClick="changeadfoc('data:post.url')" href="http://adfoc.us/serve/sitelinks/?id=146445&url=data:post.url"> </g:plusone></td> </tr> <tr> <td> <p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#000;" onClick="changeadfoc('https://www.onklik.com/2013/05/popup-floating-share-melayang/')" href="https://www.onklik.com/2013/05/popup-floating-share-melayang/"><blink>Get This</blink></a></p></td>
</tr></table></div></div>

Setelah selesai dicopy, Simpan hasil editing template anda. Jika sesuai petunjuk maka ketika blog direload/refresh

akan nampak sebuah floating PopUp melayang yang berisi link Share & Like facebook blog anda. Semoga artikel ini bermanfaat, salam onklik :).

floating-popup

Related posts