Login ke blogger
Tutorial memasang ikon Social Bookmarks dengan javascript jQuery ini dikembangkan oleh Janko, nah disini saya mencoba menerapkan media social bookmarks ini di blogger template, yang kini lagi populer dipasang di tiap blog, kecuali di blog ini yang ngak ingin populer..heh.heh.
Tahapan Memasang Ikon Sosial Bookmarks jQuery di Blogger Template
1. Masukan script jQuery berikut sebelum
</head> (jika telah memiliki, ini diabaikan saja) :<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
2. Masukan javascript berikut dibawah script jQuery tadi:
<script type='text/javascript'>
(function($){
$.fn.sharebox = function(){
var element = this;
$(element).find("li").each(function(i){
$(this).css("z-index", 10- i);
if (i>0)
$(this).css("left", i * 24 + 100);
});
}
})(jQuery);
</script>
<script type='text/javascript'>
$(document).ready(function(){
$("#sharebox").sharebox();
});
</script>
3. Masukan kode HTML berikut sesudah
<data:post.body/> :<ul class='sharebox' id='sharebox'>
<li><img alt='Share this' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SmkuLMrwEhI/AAAAAAAABm8/SF6x9UfvEJA/s800/sharethis.png'/></li>
<li><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Digg' src='http://lh5.ggpht.com/_dfnTVAxeWMI/Smktud4qk8I/AAAAAAAABmk/z5vZVjTmD7k/s800/digg_48.png'/></a></li>
<li><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to StumbleUpon' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SmkuLCBTubI/AAAAAAAABm4/KwVHDJnT-EQ/s800/sumbleupon_48.png'/></a></li>
<li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Delicious' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SmktubnHpoI/AAAAAAAABmg/b31Po_kEbnc/s800/delicious_48.png'/></a></li>
<li><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Technorati' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SmkuK1y0_cI/AAAAAAAABm0/C8EExNM-xjE/s800/technorati_48.png'/></a></li>
<li><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Reddit' src='http://lh3.ggpht.com/_dfnTVAxeWMI/Smkturrni-I/AAAAAAAABmw/AbGticB0wAs/s800/reddit_48.png'/></a></li>
</ul>
:: ikon 'social bookmarks' ini dapat anda tambah lagi sesuai kebutuhan, bahkan image ikonnya kalo perlu diganti, biar sesuai sama selera.
4. Masukan kode CSS berikut, pastinya di dalam kode css:
/* SosialBookmark
*/
#sharebox{
height:48px;
width:400px;
margin:0;
padding:5px 0;
}
ul.sharebox { margin:0px; padding:0px; list-style:none; position:relative; display:block;}
ul.sharebox li { float:left; margin:0 0 0 0px; padding:0px; position:absolute;}
ul.sharebox li a { margin:0 0 0 -24px; display:block;}
ul.sharebox li a:hover { margin:0 0 0 -8px; }
ul.sharebox li img { border:none;}
:: kode CSS ini dapat anda modifikasi sesuai karakter template anda, atau image ikon anda.
5. Sip Selesai.
Blogger
- Kamus Nama bagus
- Efek Box Gelap Terang Menggunakan Opacity Effect dan CSS3 Transition
- Merubah Lebar Template Blog
- Cara Membuat New Recent Comment dengan Scroll Down di Blogspot
- Cara Memasang Yahoo Messenger Di Blogger
- Cara membuat browser bergetar saat klik kanan
- Cara Membuat Sitemap di Blogspot
- Membuat Widget Agar Selalu Tetep Berada Di Kiri,Kanan,Dll
- Cara Pasang Buku Tamu Facebook di Blog
- Tips Cara Pasang Status / ikon YM (yahoo messenger) di blog/web/friendster !
- Mengganti Tulisan Newer Post Older Post Dengan Gambar
- Cara Membuat Vertical Sliding Info Panel With jQuery
- Memasang Radio Online atau MP3 di Blog
- SEXY BOOKMARKS V2 FOR BLOGGER
- Show Comment Bubble at Top Right of each Blogger Posts
- Automatic Read More with Thumbnail for Blogger
- Social Bookmarking Widget for Blogger with auto scrolling function
- CARA MEMBUAT EXPLORER D-TREE...
- Cara Pasang Tag Meta Robot Blogspot
- Cara Membuat Drop Caps Otomatis di Posting Blog
- Koleksi banner blog dofollow
- Cara mengecek kecepatan Blog
- Membuat Link Terbuka Pada Halaman Baru
- Memasang Feedjit Pada Blogger
- Membuat Gradient Effect dengan CSS
Social Bookmark
JQery
- Switch Stylesheets jQuery: Trik Gonta-ganti CSS
- Scroll Background jQuery di Blogger Template
- Slide Show, jQuery Slider di Blogger Template
- Thumbnail Gallery, Heading dan Caption dengan Effect jQuery
- Drag Me Donk jQuery di Blogger Template
- Penerapan Dropdown Menu jQuery di Blogger Template
- Tabs - jQuery: Dalam Beragam Jenis
- Penerapan "Simple Tabs" di Blogger Template
- Penerapan Link Nudging di Blogger Template
- Menu Navigasi Vertikal dengan Efek jQuery
- Membuat Sliding Login/Register Form Panel di Blogspot [JQery]
0 komentar:
Posting Komentar