Cara Membuat Widget Follower,Twitter dan Fan Page Facebook Melayang di Blog

Hi sobb ketemu lagi sama saya di gyshare kali ini saya akan membahas Cara Membuat Widget Follower,Twitter dan Fan Page Facebook Melayang di Blog . Widget ini merupakan widget yang sangat menarik karena widget ini bisa melayang sekaligus 3 lo ... lihat gambar di bawah ini .

 

Nah Bagi sobat yang ingin mempunyai widget tersebut, sobat tinggal ikuti step by step Berikut ini:

 

1. Login ke Blogger sobat . 

2. Pilih Rancangan > Tata Letak > Tambah Gadget 

3. HTML/JavaScript

4. Letakkan kode berikut didalamnya.

<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGPmuGOZPYaXB6BK8k7grvbVOfwhUL9AtzxQ6RvHMn070epntLzVYtQ52vYPhFoMRdXcoQ4eG5oRxCUIjsWRLrDOVy50TsrNaIM8xIlpF34L4SwVNLYeQ276IOUEp1rVO_mNd5mWcMUWYm/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}
.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWCfIM2QR7vNLWtHI3ewwX8Ikgb1uGj5xHp3xWVYv77E6zwtikOvZMJ1v6pb-dj0WsZ51BfrJ7Dk1XoicMv0mv4Q64evXFyvkRlgQYt6Av2KZrZIA5ToosW2njI6A6nONPG_6caPAfu1Qc/');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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkZdLITnptJgwJKo13yoSCIn92SUq281qVEDxswgASlrMGfEV4DG2do-WEtHzsaDbQi__TNlgi1HJ9_LJUr-PFxq2j9v3BWbjrVEN1o5Y7DFS2blWcn8tjUcgqXcuN_g97FAdcTunhhXFQ/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}
.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaVyGVbRcGUEKEFvAEEqTwVDhnV3K8PZxfWLxDOj8AR4kjILKfkqajorgCc1wwnbHba18s88_Gkr9ZVT7HKo635Y5DjsoiBnxVIciFffbQ-pSZtSytIuXlRoYuSV8l_DhQJtT6MA1pb9zb/');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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA459HF8uk5C0ce5flXkucscYT4Jv4JCk4y42yNgcyn8wJcIDBh6_LaSjJd8hy0d_WYdrd9GnMVj3-FkgTeH4kzOsK6nJNFxdn3wXPS1Qu9zvZ1OS0eVmF31mLqK4V93oCDDY3ZyK4en5R/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}
.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfZac6OvrShm_zDoWxvKr2psbHB9w778glyLUeTucvLWtZPyU82R45Yzoqn7aODkGEGb-EJCbcCvt1AM4pk7DKotc8j-SSMrIZ2rzCSIeLYIjsVy1Xk9nieSVf9wHScqaPaFo2bJBrBmfS/');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">
Disini Letakkan Kode Follower Blog
</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
Disini Letakkan Kode Twitter
</div>
</div>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
Disini Letakkan Kode Facebook
</div>
</div>

Keterangan : Ganti yang berwarna merah dengan kode Follower, Twitter, dan Facebook Fan page

5. Terakhir klik Simpan

 

Semoga bermanfaat
By: Moch Gian Destian ^_^

 

Posted in: Tutorial Blog