Home / Blogger Corner / Membuat Tombol Social Media Floating yang Unik

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 ๐Ÿ˜€

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 ๐Ÿ™‚ ,

About admin

Check Also

Membuat Background Header Berganti Otomatis

Pada kali ini aku akan sedikit berbagi trik mempercantik atau bisa juga trik untuk memodifikasi …

18 comments

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

  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 ๐Ÿ˜€

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

  4. wah keren nih gan,ijin share ya

  5. kbyakan widget berat gak gan loadx

  6. @katils: Sebernernya berat, tpi widget itu sedikit di pilah" Sob, soalnya ada yg berat n ada yg engga ๐Ÿ˜€

  7. cara untuk wordpress ada gak?

  8. @eka: Ini juga bisa di gunakan di wordpress,,, Untuk CSSnya silakan di truh d CSS, untuk HTMLnya silakan buat Widget HTML/TEXT ๐Ÿ˜€

  9. wah makasih yah
    langsung di coba ๐Ÿ™‚

  10. oh ya, ID FEED BURNER itu apa ya?

  11. @eka: ID Feedburner itu, misalkan

    feed.feedburner.com/cyberbanua … yg cyberbanua itu IDnya, untuk mendapatkannya, silakan daftar dulu ke http://www.feedburner.com ๐Ÿ˜€

  12. nha ini yang ana cari kang Nanang, biasa pemula nih ๐Ÿ˜€

  13. info yang sangat berguna dan menarik

  14. info y bagus mas…praktekin buat hal yang baru…

  15. Wah itu make CSS 3 ya gan?

    Keren!

  16. 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

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *