Membuat Widget Social Bookmark 3D yang Bisa Berputar

Setelah sempat vakum bebeapa hari di karenakan akses internet yang di blokir sepihak oleh provider, akhirnya saya bisa meng-update rumah saya yang sederhana ini. Di tutorial kali ini, saya akan membagikan widget sosial bookmark. Yup, memang di beberapa postingan sebelumnya saya memang pernaha membagikan tentang widget sosial bookamrk. Ada yang berbentuk segitiga, hati dan lain sebagainya yang bisa kamu cari di daftar menu.

Kalau widget yang saya bagikan ini, terlihat sangat cantik dan menarik. Bagaimana tidak, selain bentuknya yang imut dan 3D, widget ini apabila kamu letakkan kursor kamu ke icon-nya, maka iconnya akan berputar 360 derajat secara otomatis ! Wow sangat keren bukan ? naha kalau kamu tertarik dengan widget ini, bisa kamu coba triknya dengan mengikuti langkah-langkah di bawah ini.

1. Masuk ke Blogger.com dengan akun kamu.

2. Klik Tata letak --> Tambah Gadget --> Pilih HTML/Javascript dan kamu masukkan kode-nya di bawah ini.

    <style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> 

<!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="MASUKKAN URL FEED KAMU DISINI" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRzbliNX9GZt2y2QfBaS7m4EsgUsH2n9BmBvXjpFCT5pyL3NQhCnCr77wty5fyk8_sBHM6Cl_7zwzLJmURuTtOhDmO_ip47mtz9WiIvR_CUNdaM8d2Ksiy1BnE-4KdUrucH1ELwwcWVvmf/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsJsqkc6-ejrASJO1Hb1winInDlLG1GbV2gXVMLEaWH4QA0wpdkrKC7ONjEz2yC8T-0FDo3yERxhCEunu_0qbO4GXTZwiVfGBQv2AJf7IxpN3TCy33GXOJRn_MlgxnhD-Q6U9e5SgK0wgv/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> 

<!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="MASUKKAN URL FACEBOOK KAMU DISINI" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8PWCP6EaejBnLr_SXVuq2McfZhO-Uh5OxFkCYzN0wJjgxpoRgeBUtjxAtahq7wI5Xo7NbcTsQUHHu587oS6Tsn4innvtXPpakCazkJhMrPSfGgo_foePqdV9OEyldQnoHRZJKEe8Jrktt/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> 

<!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="MASUKKAN URL TWIITER KAMU DISINI" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigrob3UOhyphenhyphennGuEnDgNg-_hiX48fkIyp9cIwbRSMPB6OM0LZwLwTsSYxJ_MPXDmxKIuVzHiQQ-U6fw8VlCe8iM7SwVFfq3ASMCgoHIAZRWtIH3hsLrvBvoKd7w299Le4bQ_kChVi4ywDO1E/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> 

<!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="MASUKKAN URL GOOGLE PLUS KAMU DISINI" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEico2qdSIN3H1Hl-J4jGxKzD1_UfAYtIrUxRpgVjf9yxLQp_TS_K6ZSGUS3QjMUxDNjec18dhEcbuZmvN4LpgtjDVNsxJNoEJ2_d_9GUthfqqhP_zn1SeUbnLl9-f3BTFKrFSj4LGv6NF0k/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--> 

<!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="MASUKKAN URL PINTEREST KAMU DISINI" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9yqZgkpwt9XTMkkdGxLDJe81VRGVwZeZTy9ExFUkBMHERRyksGVa4Rqjh_GX5o4xBOPLevglLRO3kr1SbkoaTP8CSWhhesh_vvIBv2FvEMKU9v0dqi5Z71scyoPr6EVrgMucrAR5rLTab/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/>

 <!--Start Feed Count Button--> <a href="MASUKKAN URL FEEDBURNER KAMU DISINI" target="_blank"><img alt="spice up your blog" src="http://feeds.feedburner.com/~fc/MASUKKAN-USERNAME-FEEDBURNER-KAMU DISINI?bg=ff9933&fg=000000&anim=1" style="border:0" /></a><!--End Feed Count Button--> </center>

3. Tinggal kamu ganti saja kode yang berwarna biru, masukkan kedalam kotak HTML/Javascript tadi, setelah itu kamu simpan deh, mudah bukan ? untuk demo langsung widgetnya, bisa kamu lihat di bawah ini.

Postingan Terkait:

Social Bookmarking

• Cara Membuat Widget Subcription + Social Sharing + Facebook Like Box di Bawah Postingan
• Cara Membuat Widget Social Sharing Berputar di Bawah Postingan
• Cara Menambahkan Floating Social Bookmark
• Cara Membuat Scrolling Sticky Bar Lengkap Untuk Blogger
• Cara Membuat Twitter Box Untuk Blogger
• Cara Membuat Widget Sosial Bookmark Berputar
• Cara Membuat 6 Animasi Twitter Melayang Untuk Blogger
• Menambahkan WIdget Sosial Bookmark dari Shareholic
• Menambahkan Widget Sosial Bookmark + Kotak Pencarian Di Blogger
• Cara Menaruh Facebook Like Box Secara Tiba-Tiba
• Cara Memasang Widget Sosial Bookmark Melayang Versi AddThis.com
• Menaruh Kotak Fanpage Facebook di Blogger - V3
• Menaruh Widget Sosial Bookmark di Side Bar
• Menambahkan Fitur "Like" Facebook di Kotak Komentar Blogger
• Cara Menambahkan Widget Sosial Bookmark Berbentuk Segitiga
• Menambahkan Facebook Recommendations Bar kedalam Blogger
• Menambahkan Widget Icon Sprite Media Sosial di Blog
• Menaruh Widget Flipper Sharing Untuk Blogger
• Menambahkan Widget Touch Me di Blogger
• Membuat Widget Sassy Social Bookmark di Blogger
• Membuat Scroll Jquery Sosial Bookmark Untuk Blog
• Menaruh Widget Eksklusif Sosial Bookmarking
• Memasang Widget Twitter dan Facebook di Samping Postingan
• Membuat Widget Burung Twitter Terbang di Blogger

Blogger

• Cara Menghapus Komentar Spam Secara Otomatis
• Cara Membuat Blog Terindeks Google dengan Cepat
• 5 Kesalahan yang Dilakukan Oleh Blogger Pemula
• Mengembalikan Blog yang Sudah Dihapus, Bisakah ?
• Apa Itu Niche Blogging ?
• Daftar 60+ Forum Do-Follow Ber-PageRank Tinggi 2014
• Cara Menghindari Blog Dihapus Oleh Google
• Cara Memilih Nama Blog & Situs yang Ramah SEO
• Cara Mengembalikan Mood Blogging
• Mengapa Subscriber Feedburner Menjadi 0 ?
• 7 Tips SEO untuk Blogger
• 10 Tips Mantap Untuk Meningkatkan Trafik Organik
• 7 Trik Membuat Artikel Lama Menjadi Populer
• 7 Cara Mendapat Pengunjung Dengan Mudah
• Tutorial Blog dan SEO Terkena Malware ?
• Bagaimana Mengefektifkan Backlink Dalam SEO
• 8 Tips Membuat Loading Blog Lebih Cepat
• Cara Membuat Kotak Fanpage Facebook Hitam Putih
• Optimasi Gambar Untuk Dapatkan Pengunjung
• Cara Menghindari SEO yang Berlebihan
• 8 Tips Untuk Seorang Blogger Pemula
• Cara Mendapatkan Google Sitelink Dengan Cepat
• Cara Membuat dan Tips Pengaturan Meta Tag
• Cara Meningkatkan Ranking Alexa Dengan Cepat
• Cara Mengklaim Situs di Alexa

Posted in: Blogger,Social Bookmarking