Cara Membuat Tombol Social Bookmark Melayang
Saturday, June 30, 2012
12 Comments
Cara Membuat Tombol Social Bookmark Melayang - Kali ini saya akan membahas Cara Membuat Tombol Social Bookmark Melayang. Sekarang ini pengguna situs jejaring sosial makin banyak, dengan berkembangnya teknologi informasi yang makin canggih, banyak situs yang menawarkan layanan jejaring sosial seperti Facebook, Twitter, Friendster dan yang lainnya. Seperti yang kamu lihat, di blog ini saya juga menambahkan widget Social Bookmark melayang yang berada tepat di kanan-bawah blog ini. Untuk lebih jelasnya, liat gambar dibawah ini.
Berikut Cara Membuat Tombol Social Bookmark Melayang :
1. Login ke Blogger kalian masing - masing
2. Masuk ke Dashboard, lalu pilih Tata letak.
3. Klik Tambah Gadget
4. Copy kode dibawah ini di HTML/JavaScript
<a href="http://tutorial-blogz.blogspot.com/feeds/posts/default" rel="dofollow" title ="RSS Feed" target="_blank" style="display:scroll;position: fixed; bottom:305px;right:20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik864uOPYj0yI6tDuKVQgw5PGxZD1JH8ftpjLLjSMIbkXOpyIxI1NPJLoHYHN_corN1S84nNg-sDZmi0m7GcMJsw9BpgooeiBihgQy4MZHpYWF0HXUD3R9Kyu_lX1XUKhpm_TLWsyP/s170/RSS-Icon.png"/></a>
<a href="http://www.facebook.com/TutorialBlogz" rel="dofollow" title ="Like us on Facebook" target="_blank" style="display:scroll;position: fixed; bottom:255px;right:20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNgfKnjq656RJpY2X2URa9sJfJqtpSNX57fMKwMehTQ_5bIAspKXLrHhoGg2qqoKLf8kOxwX45CBCXIrUL4A1iE_tzTBNCgLiNJtTbdCXL762qYbWd-jHsXtQ1IM_b3cmxhpeYvh_GQ88/s1600/facebook.png"/></a>
<a href="http://twitter.com/TutorialBlogz" title ="Follow us on Twitter" rel ="dofollow" target="_blank" style="display:scroll;position: fixed; bottom:205px;right:20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCIYC8tDIolpClESHirS5HBf9vouHy79i6mIxcyv1nhR5u9nQeXQ3CUYQ4lJSS0OksxAHLl4krgu90JunGH1Aj45JdDpWb4mGEbsjNXZHCBac9zniv10CSCAbGRdPdFITFRNe7DMtWRSc/s1600/twitter.png" /></a>
<a href="https://plus.google.com/102807084759670981471" title ="View my Profile on Google+" rel ="dofollow" target="_blank" style="display:scroll;position: fixed; bottom:155px;right:20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj644-DY5YR18VysF5DeH9cRkAm6-bceFEfoW0IJ2ZHKKqd1RYq6dPvVm2nZGnupGKhiXCyr_GHnoY8RztqOXfKi7xC-qma4ea5h2wanrPXtIPTCZbxuv65VRKSQD0WVIg4PbgEiPKdjuA/s1600/gplus.png" /></a>
<a href="ymsgr:sendIM?mharishabdurrahim" title ="Chat with me on Yahoo Messenger" rel ="dofollow" target="_blank" style="display:scroll;position: fixed; bottom:105px;right:20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRLEEZameFNDC7N63hVh0pqNy7O1jRQddlMoDhP5BpGE8GL1C8tI5tM1EEAahxIF15ialY0pdIs9_yjwVIsQEvA4_-PH78eD7eBM3beuozySyPpoJYwhukYjkhmLDil9dEZQ9oR5jnbjlf/s300/images.jpg" /></a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik864uOPYj0yI6tDuKVQgw5PGxZD1JH8ftpjLLjSMIbkXOpyIxI1NPJLoHYHN_corN1S84nNg-sDZmi0m7GcMJsw9BpgooeiBihgQy4MZHpYWF0HXUD3R9Kyu_lX1XUKhpm_TLWsyP/s170/RSS-Icon.png"/></a>
<a href="http://www.facebook.com/TutorialBlogz" rel="dofollow" title ="Like us on Facebook" target="_blank" style="display:scroll;position: fixed; bottom:255px;right:20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNgfKnjq656RJpY2X2URa9sJfJqtpSNX57fMKwMehTQ_5bIAspKXLrHhoGg2qqoKLf8kOxwX45CBCXIrUL4A1iE_tzTBNCgLiNJtTbdCXL762qYbWd-jHsXtQ1IM_b3cmxhpeYvh_GQ88/s1600/facebook.png"/></a>
<a href="http://twitter.com/TutorialBlogz" title ="Follow us on Twitter" rel ="dofollow" target="_blank" style="display:scroll;position: fixed; bottom:205px;right:20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCIYC8tDIolpClESHirS5HBf9vouHy79i6mIxcyv1nhR5u9nQeXQ3CUYQ4lJSS0OksxAHLl4krgu90JunGH1Aj45JdDpWb4mGEbsjNXZHCBac9zniv10CSCAbGRdPdFITFRNe7DMtWRSc/s1600/twitter.png" /></a>
<a href="https://plus.google.com/102807084759670981471" title ="View my Profile on Google+" rel ="dofollow" target="_blank" style="display:scroll;position: fixed; bottom:155px;right:20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj644-DY5YR18VysF5DeH9cRkAm6-bceFEfoW0IJ2ZHKKqd1RYq6dPvVm2nZGnupGKhiXCyr_GHnoY8RztqOXfKi7xC-qma4ea5h2wanrPXtIPTCZbxuv65VRKSQD0WVIg4PbgEiPKdjuA/s1600/gplus.png" /></a>
<a href="ymsgr:sendIM?mharishabdurrahim" title ="Chat with me on Yahoo Messenger" rel ="dofollow" target="_blank" style="display:scroll;position: fixed; bottom:105px;right:20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRLEEZameFNDC7N63hVh0pqNy7O1jRQddlMoDhP5BpGE8GL1C8tI5tM1EEAahxIF15ialY0pdIs9_yjwVIsQEvA4_-PH78eD7eBM3beuozySyPpoJYwhukYjkhmLDil9dEZQ9oR5jnbjlf/s300/images.jpg" /></a>
Keterangan :
1. Yang berwarna merah itu adalah URL jejaring sosial, Ganti dengan URL akun jejaring kalian masing - masing
2. Yang berwarna biru adalah Judul yang ditampilkan, kamu bisa ganti dengan kata - kata kesukaan kamu.
3. Dan yang berwarna hijau adalah URL gambar yang akan ditampilkan, kamu dapat menggantinya dengan url gambar kamu sendiri.
5. Bila sudah disesuaikan kamu klik Simpan.
Mudah kan caranya?? Semoga bermanfaat :D
mantap pak ilmunya..
ReplyDeletegak berat ini pak ?
makasih @Darmawan saputra
Deletekalau menurut saya widget melayang itu tidak memberatkan blog.. justru kalau widgetnya diletakkan di sidebar malah memberatkan blog
#SemogaSehatSelalu
wah ini dua..
ReplyDeletegadu gaduh gaduh biar rame ..
nuhun kang (makasih)
ReplyDeletesama - sama ^_^ @izal
DeleteUntuk tips yg ini, saya ijin aja dulu untuk copy kodenya sob nanti aku praktekan di blog percobaan saya.... :D
ReplyDeletesippp ..
DeleteYes berhasil sob and kalau mau cek, silakan berkunjung kesini : http://agungmo.blogspot.com/2012/05/sekilas-tentang-blog-demo-widget.html
ReplyDeleteoke, sipp :D
Deleteklo gni blog jadi indah.. :)
ReplyDeletebetul bgt :D
Deletemakasih infonya, sukses terus tutorial-blogz
ReplyDeletesalam
http://jonarendra.blogspot.com/