Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Friday, July 12, 2013

Cara membuat sosial media floating

sosial media floating
Siapa yang tidak kenal dengan widget sosial media untuk halaman blog khususnya ? saya pikir kita sama sama setuju bahwa kita semua mengenalnya. Semakin maraknya dan larisnya code html untuk widget yang satu ini membuat pikiran saya
membuat suatu code tag html untuk sosial media yang saya sebut dengan WIDGET SOSIAL MEDIA FLOATING yang terinspirasi dari template responsive bawaan template blogspot. Saya sendiri tertarik dengan widget ini sebab tidak memakan banyak tempat di halaman blog. Widget yang satu ini dapat dipasang pada template responsive dan yang pasti valid HTmL 5 dan CSS 3.






Fitur


  1. Join To Blog
  2. Google Plus Media sosial
  3. Facebook Media sosial
  4. Twitter Media sosial
  5. Rss Media sosial

Install Program CSS


  • Login ke dashboard anda
  • Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  • Cari code ]]></b:skin> 
  • Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

.join{width:43px;height:43px;position:fixed;right:0px;top:115px; z-index:1000;}
.join1{width:150px;height:43px;position:fixed;right:0px;top:115px; z-index:1100;}
.BD_gplus{width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}
.BD_gplus1{width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;}
.BD_twit{width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}
.BD_twit1{width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;}
.BD_fb{width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}
.BD_fb1{width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;}
.BD_rss{width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;}
.BD_rss1{width:150px;height:43px;position:fixed;right:0px;top:295px; z-index:1100;}

Install Program Tag HTML


Untuk menampilkan SOSIAL MEDIA FLOSTING tersebut kita akan memanggil nya dengan sebuah tag HTML untuk ditampilkan dihalaman blog. Cara menginstallya cukup mudah anda hanya meletakkan kode dibawah ini ke gadget layout blog anda, silahkan simak tutorial berikut :

  • Anda masih berada dihalaman dasbor lalu anda menuju "Layout Template "
  • Masuk ke "Tata Letak "
  • lalu klik "add Gadget " kemudian pilih "HTML/ JavaScript"
  • Copy code dibawah ini dan pastekan ke dalam gadget anda

<div class='join' onmouseout='this.className=&apos;join&apos;' onmouseover='this.className=&apos;join1&apos;'><div >
<a href='URL ID BLOG ANDA' target='_blank' title='Join to Blog'><img alt='Join to blog' src='http://1.bp.blogspot.com/-l6ur0RH6_yw/Ud-bRaVk1AI/AAAAAAAABgA/9Gr_Rh1N9NI/s1600/join.gif' title='Join to Blog'/></a></div>
</div><br/>
<div class='BD_gplus' onmouseout='this.className=&apos;BD_gplus&apos;' onmouseover='this.className=&apos;BD_gplus1&apos;'><div >
<a href='URL GPLUS ANDA' target='_blank' title='Invite me'><img alt='Invite me' src='http://4.bp.blogspot.com/-zsm1HZNDk9w/Ud-bPFw6m-I/AAAAAAAABfo/nBtLQjVOPlA/s1600/BD-G%252B.png' width="150" height="43" title='Invite me'/></a><br/>
</div></div><div class='BD_twit' onmouseout='this.className=&apos;BD_twit&apos;' onmouseover='this.className=&apos;BD_twit1&apos;'>
<a href='URL TWITTER ANDA' target='_blank' title='Follow me'><img alt='Follow me' src='http://3.bp.blogspot.com/-vsyr35r_xlA/Ud-bPkHs4tI/AAAAAAAABf4/a_R5yhEgi60/s1600/BD-Twit.png' width="150" height="43" title='Follow me'/></a><br/>
</div></div><div class='BD_fb' onmouseout='this.className=&apos;BD_fb&apos;' onmouseover='this.className=&apos;BD_fb1&apos;'>
<a href='URL FACEBOOK ANDA' target='_blank' title='Like me'><img alt='Like me' src='http://2.bp.blogspot.com/-d0SqZnzb_x0/Ud-bNtKH5MI/AAAAAAAABfg/8KJu-xF3HaU/s1600/BD-Fb.png' width="150" height="43" title='Like me'/></a><br/>
</div></div><div class='BD_rss' onmouseout='this.className=&apos;BD_rss&apos;' onmouseover='this.className=&apos;BD_rss1&apos;'>
<a href='URL RSS ANDA' target='_blank' title='Subscribe me'><img alt='Subscribe me on RSS' src='http://4.bp.blogspot.com/-aaGHmGQm3v4/Ud-bPcmmNQI/AAAAAAAABf0/nNVICJdk3bY/s1600/BD-Rss.png' width="150" height="43" title='Subscribe me'/></a><br/>
</div></div>

Silahkan anda ganti tulisan warna merah pada code diatas dengan URL sosial media anda sesuai dengan nama sosial medianya.

  1. Widget Sosial Media Floating ini dapat anda manfaatkan untuk mengurangi pemakaian tempat pada halaman dan sekalian mempercantik design template anda.
  2. Code CSS dan HTML dibuat menggunakan software Macromedia Dreamweaver
  3. Valid HTML 5 dan CSS 3
  4. Ringan dan Elegan , dapat digunakan untuk template Responsive

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 2:56 PM

8 comments :

  1. keren sob widgetnya,,moga sukses

    comeback

    ReplyDelete
  2. makasih atas pendapatnya sob, salam kenal dari saya..

    ReplyDelete
  3. Ijin nyedot Master. Kebetulan punya saya dari Mas Kolis(Creating Website) dah rusak/error. Coba ini ah.

    Terima kasih Master Silaban sudah berbagi cara membuat Sosial Media Floating. langsung praktek ane.

    ReplyDelete
  4. It work,!!.
    Thank a lot, master.
    Ane mo modify dikit, maklum harus rajin belajar. Mumpung gratiss, :D

    Terima kasih Atas Sosial Media Floating Widget nya.

    ReplyDelete
    Replies
    1. sama sama sob..
      kita semua harus lebih giat belajarnya agar lebih maju para bloger indonesia.

      thx atas pendapatnya sob

      Delete
  5. yang ini nih yang saya cari, sdh saya terapkan dan 100% work !. terimakasih Sob, Salam.

    ReplyDelete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog