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 :
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 == "item"'><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 !
Tidak ada komentar:
Posting Komentar