Hello guys ,, apa kabar ?? Semoga teman - teman semua baik - baik saja ,agar bisa terus menggali ilmu di blog saya ,hehehe ...
Ok guys langsung saja kali ini saya akan memposting tentang cara membuat widget 3 in 1 (Blogger, Twitter,FB).
Ok guys langsung saja kali ini saya akan memposting tentang cara membuat widget 3 in 1 (Blogger, Twitter,FB).
Untuk lebih jelasnya lagi saya berikan screen shotnya :
Ok guys langsung saja kita bahas turtor kali ini .
ATTENTION !
Jangan pernah lupa untuk membackup template bloggers untuk menghindari hal hal yang tidak di inginkan
1. Langsung masuk ke Blog agan masing-masing.
2. Langsung ke Tata Letak => Tambah Gatget => ADD Gatget (HTML/Javascript)
3. Lalu copy script di bawah ini :
<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZu4Odhx3nSwFMZEWQrMojU99d5XokSeIacjZKq2Hxdi1e7_OgpFOKcID1fZRXYIEgy2tl2gohxZ3TgZJ6dLZuXC8QR7sRQwRRTiVrIZjbHyN_DzsWzvr_Hh0oHM35o9hgimRQRIlNQHtD/');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/AVvXsEjQr4mGmhgFRxNuBHBTXsbWogQy15alNJO_Ljo4-h2LWD0eWiJccL1CV5DwSzQ3PABHEEgLyf3bWPmXb_AQh2UXTtIK71TNBVFT25lYS_WsBYsrYSzkpKpVDw26nLKV5oTs5TSkBLL0kKiz/');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/AVvXsEjCVgI4KYP-XSKl1gYo0eoa-8X_sItZjY8xZ3xhUZmCuHFVWuFS3UP5qU6JgE7mCgEV_JxINbckdAjRDLkNPb7DS96SAXW4XoqKXFHOUy5QNmHLni1E5KeCkArdbJdv74rPufCXWVH4hgeE/');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/AVvXsEhoSoasKOHD3EN66a4xRFhew1D_ikfggbncBtGJ1paGqLHix2i49MeDnpCi0Q3OpIldQ1iqUlAmrNn2X8tWtr_15fk6PB3Hc8AY5ouzZQnxuTHCriJtey5iTwfnKWOcsqefZ5fc3zdcZCC9/');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/AVvXsEj-dx4LeUEE2dlSQXcvvDzn-Qa3bqfwVMvmtqEsbBbBrjsWmpHrBcGP7-xVZL8eo_8E0ozzy4sBxA5uEFi2IhSVK90N1TbvuF8eOqLmLjNFJSN9FgzkkxA22Q3GmRgNDHain-KXbLhscTID/');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/AVvXsEjEUc-t5TbFXXyVTQUqx5nXZ9wyz4GtQRuq0jUGBc8Rt89q-INi7_UUaXKQ-QF3gG9rISfp5tBMCeimT6JBcPkRmmhlz0H0lxuuWEYGlCYcB-ZTSolVKClaw7m3BsCKsMGjzUggxNAsiY7p/');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>
4. Lalu masukan script-script widget yang akan kita pasang pada widget 3 IN 1 ini sesuai dengan tulisan berwarna biru di atas.
5. Berikut adalah contoh script yang saya gunakan untuk memasang widget ini.
<style type="text/css">
.barrightblogger{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZu4Odhx3nSwFMZEWQrMojU99d5XokSeIacjZKq2Hxdi1e7_OgpFOKcID1fZRXYIEgy2tl2gohxZ3TgZJ6dLZuXC8QR7sRQwRRTiVrIZjbHyN_DzsWzvr_Hh0oHM35o9hgimRQRIlNQHtD/');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/AVvXsEjQr4mGmhgFRxNuBHBTXsbWogQy15alNJO_Ljo4-h2LWD0eWiJccL1CV5DwSzQ3PABHEEgLyf3bWPmXb_AQh2UXTtIK71TNBVFT25lYS_WsBYsrYSzkpKpVDw26nLKV5oTs5TSkBLL0kKiz/');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/AVvXsEjCVgI4KYP-XSKl1gYo0eoa-8X_sItZjY8xZ3xhUZmCuHFVWuFS3UP5qU6JgE7mCgEV_JxINbckdAjRDLkNPb7DS96SAXW4XoqKXFHOUy5QNmHLni1E5KeCkArdbJdv74rPufCXWVH4hgeE/');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/AVvXsEhoSoasKOHD3EN66a4xRFhew1D_ikfggbncBtGJ1paGqLHix2i49MeDnpCi0Q3OpIldQ1iqUlAmrNn2X8tWtr_15fk6PB3Hc8AY5ouzZQnxuTHCriJtey5iTwfnKWOcsqefZ5fc3zdcZCC9/');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/AVvXsEj-dx4LeUEE2dlSQXcvvDzn-Qa3bqfwVMvmtqEsbBbBrjsWmpHrBcGP7-xVZL8eo_8E0ozzy4sBxA5uEFi2IhSVK90N1TbvuF8eOqLmLjNFJSN9FgzkkxA22Q3GmRgNDHain-KXbLhscTID/');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/AVvXsEjEUc-t5TbFXXyVTQUqx5nXZ9wyz4GtQRuq0jUGBc8Rt89q-INi7_UUaXKQ-QF3gG9rISfp5tBMCeimT6JBcPkRmmhlz0H0lxuuWEYGlCYcB-ZTSolVKClaw7m3BsCKsMGjzUggxNAsiY7p/');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">
<div id='networkedblogs_nwidget_container' style='height:300px;padding-top:10px;'><div id='networkedblogs_nwidget_above'></div><div id='networkedblogs_nwidget_widget' style="border:1px solid #D1D7DF;background-color:#F5F6F9;margin:0px auto;"><div id="networkedblogs_nwidget_logo" style="padding:1px;margin:0px;background-color:#edeff4;text-align:center;height:21px;"><a href="http://www.networkedblogs.com/" target="_blank" title="NetworkedBlogs"><img style="border: none;" src="http://static.networkedblogs.com/static/images/logo_small.png" title="NetworkedBlogs"/></a></div><div id="networkedblogs_nwidget_body" style="text-align: center;"></div><div id="networkedblogs_nwidget_follow" style="padding:5px;"><a style="display:block;line-height:100%;width:90px;margin:0px auto;padding:4px 8px;text-align:center;background-color:#3b5998;border:1pxsolid #D9DFEA;border-bottom-color:#0e1f5b;border-right-color:#0e1f5b;color:#FFFFFF;font-family:'lucida grande',tahoma,verdana,arial,sans-serif;font-size:11px;text-decoration:none;" href="http://www.networkedblogs.com/blog/nightmare-999?ahash=2de458f56333dfbccfa06e2c3cb5e2df">Follow this blog</a></div></div><div id='networkedblogs_nwidget_below'></div></div><script type="text/javascript">
if(typeof(networkedblogs)=="undefined"){networkedblogs = {};networkedblogs.blogId=1129813;networkedblogs.shortName="nightmare-999";}
</script><script src="http://nwidget.networkedblogs.com/getnetworkwidget?bid=1129813" type="text/javascript"></script>
</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 10,
interval: 30000,
width: 220,
height: 220,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#333333',
color: '#f3f5f0',
links: '#eb9f07'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('@anggaluvscreamz').start();
</script>
</div>
</div>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
<iframe allowtransparency="true" frameborder="0" scrolling="no"
src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Nightmare-999/349976001733875&width=24
0&colorscheme=light&connections=15&stream=false&header=false&height=320" style="border: none; height: 320px;
overflow: hidden; width: 240px;background: #fff;"></iframe>
</div>
</div>
6. Jika sudah jangan lupa Simpan. dan lihat hasilnya
Jika ada yang ingin di tanyakan silahkan berkomentar di bawah sini.
Postingan
0 komentar:
Posting Komentar