Membuat Tombol Social Media Floating yang Unik


Assalamuallaikum, Alhamdulillah yaah, kali ini aku akan sedikit berbagi sebuah Widget yang mungkin banyak disukai oleh para Blogger Cewek, mengapa? dikarenakan cewek kebanyakan suka blog yang lucu - lucu gitu.. hehe . Hari ini aku akan membagi sebuah Widget Follow Button yang bergaya unik dan stylish.

Social media sekarang ini memang sudah tidak asing lagi dikalangan anak muda sekarang bahkan orang tua dan anak - anak pun sudah banyak yang terjung ke dunia Jejaring social , contohnya Facebook, Twitter, Myspace, Dll sebangsanya.

Sebuah blog biasanya mempunyai sebuah Blog Social Network hal ini dikarenakan kebanyakan para blogger menggunakannya sebagai sarana promosi kepada teman - teman dan siapa saja yang sudah mengikuti Jejaring socialnya, dalam sebuah penelitian para Master Blog, Sebuah blog yang dipromosikan di social media yang mempunyai Page Rank tinggi dan rangking yang tinggi akan membuat blog itu akan mendapatkan sebuah Backlink yang berkualitas, menurut mereka.

Pada kali ini kita akan membuat sebuah Widget Follow Social Media yang unik dan sangat bagus untuk di taruh di blog sobat, Contohnya seperti Gambar sebelumnya.

Untuk Pembuatannya silakan ikuti Tutorial di bawah ini ya sob, dan caranya sangat mudah kok :D

1. Login » Blogger
2. Rancangan » Element Halaman
3. Kemudian Tambah Gadget » HTML /JavaScrift kemudian masukan Kode di bawah ini, Untuk tidak menampilkan Widget ini di Halaman dianjurkan tidak memberi Nama Widget, Kemudian Klik Save

[ HTML ]
<div class='sosial-float'>
<!-- Twitter -->
<a href='http://twitter.com/ID TWITTER SOBAT' target='blank'><img alt='Twitter' height='48' src='http://dl.dropbox.com/u/10521069/Cyberbanua.blogspot.com/Twitter.png' width='48'/></a>
<!-- Facebook -->
<a href='http://www.facebook.com/ID FACEBOOK / FANPAGE SOBAT' target='blank'><img alt='Facebook' height='48' src='http://dl.dropbox.com/u/10521069/Cyberbanua.blogspot.com/Facebook.png' width='48'/></a>
<!-- RSS -->
<a href='http://feeds.feedburner.com/ID FEEDBURNER SOBAT' target='blank'><img alt='Feed' height='48' src='http://dl.dropbox.com/u/10521069/Cyberbanua.blogspot.com/Feed.png' width='48'/></a>
</div>

Jika tahap di atas sudah selesai, kita berpindah ke Edit HTML
4. Rancangan » Edit HTML
5. Kemudian silakan Sobat cari ]]></b:skin> kemudian masukan CSS di bawah ini tepat di atas Kode CSS ]]></b:skin>

[ CSS ]
.sosial-float {
position: fixed;
right: 5px;
top: 40%;
}
.sosial-float img {
float: right;
clear: right;
margin: 5px;
-moz-transform: scale(.8) ;
-webkit-transform: scale(.8) ;
-o-transform: scale(.8) ;
-ms-transform: scale(.8) ;
transform: scale(.8) ;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.sosial-float img:hover {
-moz-transform: scale(1.1) rotate(6deg);
-webkit-transform: scale(1.1) rotate(6deg);
-o-transform: scale(1.1) rotate(6deg);
-ms-transform: scale(1.1) rotate(6deg);
transform: scale(1.1) rotate(6deg);
}

Jika tahap di atas sudah dilakukan, inilah tahap akhir,
6. Kemudian Klik SAVE TEMPLATE


Alhamdulillah, Proses pembuatan Tombol Social Media Floating yang Unik sudah selesai Sobat,

Selamat Mencobanya :) ,

18 Responses to "Membuat Tombol Social Media Floating yang Unik"

  1. lebih keren dari floating yg sebelomnya saya pasang nih gan,, keren2 kyknya,, hehhe,, thx for sharing sobat,, salam kenal and happy blogging,,

    ReplyDelete
  2. alhamdulillah yah... :)
    nice tutor nan menarik mudah dimengerti dan praktekin.
    tombolnya jadi unik dan imut-imut gto yah sob..? hehe

    salam sahabat salam blogger :D

    ReplyDelete
  3. Tutorial yang komplit sob buat social media floating.
    nice tutorial.

    ReplyDelete
  4. kbyakan widget berat gak gan loadx

    ReplyDelete
  5. @katils: Sebernernya berat, tpi widget itu sedikit di pilah" Sob, soalnya ada yg berat n ada yg engga :D

    ReplyDelete
  6. cara untuk wordpress ada gak?

    ReplyDelete
  7. @eka: Ini juga bisa di gunakan di wordpress,,, Untuk CSSnya silakan di truh d CSS, untuk HTMLnya silakan buat Widget HTML/TEXT :D

    ReplyDelete
  8. wah makasih yah
    langsung di coba :)

    ReplyDelete
  9. oh ya, ID FEED BURNER itu apa ya?

    ReplyDelete
  10. @eka: ID Feedburner itu, misalkan

    feed.feedburner.com/cyberbanua ... yg cyberbanua itu IDnya, untuk mendapatkannya, silakan daftar dulu ke www.feedburner.com :D

    ReplyDelete
  11. nha ini yang ana cari kang Nanang, biasa pemula nih :D

    ReplyDelete
  12. info yang sangat berguna dan menarik

    ReplyDelete
  13. info y bagus mas...praktekin buat hal yang baru...

    ReplyDelete
  14. mampir ya ke blog saya juga di Computer Indonesia | the largest blogger indonesian dan juga blog baru ane di kukunci support ajah :) terimakasih..... salam blogger

    ReplyDelete