Ketika saya berkunjung di blog tetangga, ada sebuah widget yang menarik yang saya lihat yaitu sosial sharing dengan gaya melayang/floating di atas header. untuk kali ini, jika sobat ingin memiliki widget ini { lihat gambar dibawah ini} langsung saja kita baca trik membuatnya.
Tambahkan Plugin JQuery!
Jika blog Anda telah memiliki sebuah plugin jQuery terbaru, maka Abaikan langkah ini dan langsung mengikuti langkah kedua. Jika tidak tambahkan potongan kode di bawah ini sebelum tag </ head>
Masuk ke Akun Blogger
Pilih Template dan klik Edit HTML (Klik melanjutkan)
Cari <data:post.body/> (Temukan menggunakan ctrl + F)
Lihat bawahnya, tambahkan potongan berikut.
Cari </ body> (Temukan menggunakan ctrl + F)
Tambahkan potongan kode di bawah ini sebelum tag </ body>.
Sekarang simpan template Anda dan lihat hasilnya!
Jika Anda memiliki pertanyaan, silahkan berkomentar.
Semoga sukses dan bermanfaat.
Jika blog Anda telah memiliki sebuah plugin jQuery terbaru, maka Abaikan langkah ini dan langsung mengikuti langkah kedua. Jika tidak tambahkan potongan kode di bawah ini sebelum tag </ head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>Masuk ke Akun Blogger
Pilih Template dan klik Edit HTML (Klik melanjutkan)
Cari <data:post.body/> (Temukan menggunakan ctrl + F)
Lihat bawahnya, tambahkan potongan berikut.
<b:if cond='data:blog.pageType == "item"'>
<div id='md-active-share-comment-marker'></div>
</b:if>Cari </ body> (Temukan menggunakan ctrl + F)
Tambahkan potongan kode di bawah ini sebelum tag </ body>.
<b:if cond='data:blog.pageType == "item"'>
<script src='http://makingdifferent.github.com/blogger-widgets/Floating%20Social%20sharing%20Horizontal%20Bar.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#appId=155934781145405&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>Sekarang simpan template Anda dan lihat hasilnya!
Jika Anda memiliki pertanyaan, silahkan berkomentar.
Semoga sukses dan bermanfaat.
Tidak ada komentar :
Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>
Konversi KodeOOT