Floating Share Sosial Horizontal Baru Untuk Blogger

Tidak sengaja saat jalan-jalan ke halaman orang lain nemu widget yang keren, namanya Widget Floating Share Sosial Horizontal Baru Untuk Blogger yang tentunya dengan jQuery yang baru juga. Untuk fungsinya sama seperti Floating Share yang kita ketahui tapi berbeda dari tampilannya. Untuk floating yang lama barnya vertikal nah kalo floating baru barnya horizontal. Dan di lengkapi dengan 3 media sosial seperti Facebook, Twitter dan Google Plus. Mungkin ketiga media online utama itu masih kurang karena banyak sekali media sosial yang ada, tapi kalau di perhatikan scriptnya kita bisa untuk menambah tombol media sosial yang lain.

Artikel terkait :

• Cara Membuat Tombol Share Media Sosial di Blogger

• Tombol Share Sosial Floating Bar di Blogger 

• Tombol Share Sosial Media Floating atau Melayang di Blogger 

Untuk menerapkan widget Floating Horizontal ke blogger Anda, ikuti langkah-langkah berikut ini :

• Login ke Blogger Anda - klik Template
• Pilih Edit HTML - dan cari tag </head> gunakan Ctrl+f untuk mencari
• Setelah menemukan tag di atas, tambahkan kode berikut sebelum tag </head>

<script type="text/javascript" 
src="https://widcraft.googlecode.com/svn/jquery.js"></script>

• Next, cari kode berikut gunakan Ctrl+f untuk mencari :

<data:post.body/> 

• kemudian tambahkan kode berikut tepat dibawahnya :

<b:if cond='data:blog.pageType == 
"item"'>




<div 
id='md-active-share-comment-marker'></div>






</b:if>

• Nah, langkah selanjutnya menambahkan widget share-nya, cari kode </body> kemudian tambahkan kode di bawah ini tepat sebelum tag </body> :

<b:if cond='data:blog.pageType == 
&quot;item&quot;'>





<script src='https://widcraft.googlecode.com/svn/FloatingSocialSharingWidget.js' 
type='text/javascript'/><div id='md-share-window' style='width: 100%; 
display: block; position: fixed; top: -450px; left: 0px; background-color: 
rgba(235, 88, 60, 0.8); z-index: 100; padding: 0 0 10px 0;'><div 
style='width: 800px; margin: 20px auto;'><span id='twitter' 
style='float:left; margin: 0 5px; padding: 3px 0 0 0;'><a 
class='twitter-share-button' data-count='vertical' 
href='http://twitter.com/share'>Tweet</a><script 
src='http://platform.twitter.com/widgets.js' 
type='text/javascript'/></span><span id='md-plusone' 
style='float:left; padding-top: 4px; margin: 0 5px;'><script 
src='https://apis.google.com/js/plusone.js' 
type='text/javascript'/><g:plusone 
size='tall'/></span><span id='md-fblike' style='float: left; 
margin: 0 5px; padding: 4px 0 0; width: 50px; overflow: hidden;'><div 
id='fb-root'/><script 
src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like 
font='' href='' layout='box_count' send='false' show_faces='false' 
width='50'></fb:like></span><div 
style='display:block; margin: 0 5px; padding: 5px 0px 0px; color: 
#FFFFFF'>Are you Awesome? Legend has it that Awesome people can and will 
share this post!<br/><span style='color: #FFFFFF; font-size: 
18px;'><data:blog.pageName/></span></div></div></div></b:if>

• Langkah terkahir Simpan Template - dan lihat hasilnya

Catatan :

Untuk peletakan tag <data:post.body/> yang akan di salin bila salah tata letak maka widget tidak akan tampil. jadi perhatikan <b:if cond='data:blog.pageType == "item"'>, lihat kata kuncinya "item" letakan pada baris tag tersebut.

Dan jika Anda masih tetap gagal dalam menambahkan, Anda bisa sharing dengan saya.

Nah, Anda telah mengikuti langkah-langkah Membuat Floating Share Sosial Horizontal Baru Untuk Blogger. Dan akhir kata semoga posting ini menambah cantik tampilan blogger Anda. Salam satu-delapan !