Cara membuat widget 3in1 Social Media Melayang di sisi kanan Blog

Bookmark and Share

Farhan Share - Sobat farhan punya widget social media seperti twitter, dan facebook tidak di blog sobat? ya, memang nampaknya sekarang bagi para blogger/webmaster social media menjadi widget yang wajib berada di blog/web, karena social media terkadang memberikan pengaruh yang cukup besar terhadap index search engine, dengan adanya social media search engine juga lebih mudah untuk mendeteksi keberadaaan blog kita, tapi terkadang widget social media cukup memakan space yang besar, karena itu sekarang kebanyakan para webmaster menciptakan script untuk membuat widget 3in1 social media melayang di sisi kanan blog, menurut saya widget ini sangat efisien karena tidak memakan space, dan juga tampilanya yang dinamis, nah, sobat setelah mendengar perbincangan kita di atas, pastinya sobat tertarik untuk memiliki widget 3in1 social media melayang ini kan, yap, langsung aja sobat ini dia langkah-langkahnya.

1. Login ke Blogger.

2. Masuk Dashboard.

3. Pilih "Add gadget".

4. Pilih "HTML/JavaScript".

5. Lalu sobat letakkan kode di bawah ini ke dalam box "konten".

<style type="text/css">
.barrightblogger{ background:url('http://1.bp.blogspot.com/-M5A-TLdB58E/TpOxL5GAReI/AAAAAAAAAN0/gEa0HRqhX4k/blogger.png');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}
.barrightbloggerc{ background:url('http://2.bp.blogspot.com/-gQ9PACjKc2I/TpOxMv4CyiI/AAAAAAAAAN8/FyEncEGNCbM/blogger.png');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}
.barconteblogger{margin:5px 0 0 47px}
.barrighttwitter{background:url('http://1.bp.blogspot.com/--gRMUITrjwM/TpOxLpClllI/AAAAAAAAANs/l88iteOo244/twitter.png');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}
.barrighttwitterc{background:url('http://2.bp.blogspot.com/-B97DZMK7wus/TpOxNSwRhPI/AAAAAAAAAOU/A-RjcC6WYjk/twitter.png');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}
.barcontetwitter{margin:5px 0 0 47px}
.barrightfacebook{background:url('http://1.bp.blogspot.com/-3xq-Se4UF9w/TpOxNLDMYmI/AAAAAAAAAOM/yaPj4IUjnQ0/facebook.png');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}
.barrightfacebookc{background:url('http://2.bp.blogspot.com/-Cum28YwF4d8/TpOxM_lUKMI/AAAAAAAAAOE/L4pJ91PTVz4/facebook.png');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}
.barcontefacebook{margin:5px 0 0 47px}
</style>
<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">
<div class="barconteblogger">
CONTENT BLOGGER HERE
</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
CONTENT TWITTER HERE
</div>
</div>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
CONTENT FACEBOOK HERE
</div>
</div>

Catatan : Kode yang berwarna biru sobat ganti dengan script widget social media sobat.
Catatan : Kode yang berwarna Hijau bisa sobat ganti dengan ukuran yang sobat inginkan.
6. Widget tidak usah di beri judul sobat.

7. Klik "Save" dan selesai.

Selamat mencoba, bila ada pertanyaan comment di bawah.

{ 0 komentar... Views All / Send Comment! }

Poskan Komentar