l7

Programmer, Design Graphic and Web Developers

Full width home advertisement

Travel the world

Climb the mountains

Post Page Advertisement [Top]

Cara Membuat Widget 3 in 1 Melayang (Blogger, Twitter, Facebook)

agungby   in Blog , HTML Java Script 2 comments
widget
BANNER
widget
Asalamualaikum.Wr.Wb. - Setelah saya Update tentang Cara pasang Tv Online di Blog.Kali ini saya akan share lagi tentang Widget 3 in 1 Floating yang sangat menarik dan Efektif ini kepada kalian semua. Widget 3 in 1 floating yang menurut saya merupakan salah satu widget blogger terbaik di tahun 2012 ini. 3 buah widget melayang yang digabung dalam 1 gadget. Demo penerapan widget melayang (floating widget) ini bisa sobat lihat disamping sidebar kanan blog ini. Seperti apa Cara membuat widget CBox, status Twitter dan Facebook Like, sekarang waktunya kita bedah bersama sama Widget ini.


Cara Membuat Widget Melayang Google Friend Connect, Twitter dan Facebook Like Box :

1. Login ke dashboard blogger anda, pilih Rancangan > Elemen Laman > Add gadget (HTML/Javascript).

2.  Copy script master widget dibawah ini dan paste pada gadget.
Script Code:
<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRy4GASYs9YA4o-2IGRQHpsJ2hw8xksTpGc676Xh44t3ZoZqi2sLhKhSd9ho0H7tOJEkaCNmHbCJPGM3Y6758kC0cUOmBHW2uz_eJTxQ6KOU1vRt_HX-Ynq1be4-GdFXtiWO3RXw4Sa4a-/');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/AVvXsEh_aTRZTXP26e12oncT3xNLKX5bm4HxKujNJLmjgyWBZSih2QE3Uov6vKyT8-Ut1wqV9MDVF1DKkLQdEwucNGVhL_w6YmMWGkxCm2lCqyTIBM94jNStqPakV2GgoAz3UQ0rCy2LdqqHObjV/');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/AVvXsEgm4w_fBpGFiiXKiSly5t-mV1xpZr2o87Pl1tC_Sati0nvTKjFwLGHUELFEh42lQ6LpzE9GKl6x_CMZDSeANJKhUFIGajs5YUn9_cQkalxJG_T9BEQu4yeT5wGmjTrQiQy73UqtqvY3s9-n/');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/AVvXsEglCbZ8ketSWXU2hT4ecBSQ-K1hfn8KJsyTjL73Ots0u0ORQly4AGOKHFgoAeXjsbQfF_I3ETkv30MO3-H8LnM9EWucPkZk_hj4-iLCBjjCpL4McTfvXGPoslQK9fSyrNrzlpSqtZiqPgAQ/');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/AVvXsEg7bwELaJCxhK-TNT6pCEIGQNL95bwVWjmz9N4Pt7G1KJWZPNLlhmT7xTYsnZJPNdh31fKxu3aQdWZP6hmPIHLX1ZMzmstbO3pulS-gbE19TUZQKyPLvTA6G6o_2S16TaaFq-QApuFPdIWb/');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/AVvXsEgbAxz2t2CUcGZhq8fB6VIrbhnAWg2PvgywIoLmefkvO3pzLaF8VWkm-MJqF6e4CZQyNiLgrZkJ9DaQbVs83nF4VS8RaE9sdzf7t5_0XXDnx4wz3uf0b9eJOlfNESS17XCzOSTgKlR_bDDd/');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 CBOX 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>
3.       Kustomisasi widget :
  • Ganti tulisan CONTENT CBOX HERE dengan kode HTML CBox anda.
  • Ganti tulisan CONTENT TWITTER HERE dengan kode HTML widget status Twitter anda.
  • Ganti tulisan CONTENT FACEBOOK HERE dengan kode HTML Facebook Like Box anda.

Maka Akan jadi Seperti Ini

Script Code:
<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRy4GASYs9YA4o-2IGRQHpsJ2hw8xksTpGc676Xh44t3ZoZqi2sLhKhSd9ho0H7tOJEkaCNmHbCJPGM3Y6758kC0cUOmBHW2uz_eJTxQ6KOU1vRt_HX-Ynq1be4-GdFXtiWO3RXw4Sa4a-/');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/AVvXsEh_aTRZTXP26e12oncT3xNLKX5bm4HxKujNJLmjgyWBZSih2QE3Uov6vKyT8-Ut1wqV9MDVF1DKkLQdEwucNGVhL_w6YmMWGkxCm2lCqyTIBM94jNStqPakV2GgoAz3UQ0rCy2LdqqHObjV/');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/AVvXsEgm4w_fBpGFiiXKiSly5t-mV1xpZr2o87Pl1tC_Sati0nvTKjFwLGHUELFEh42lQ6LpzE9GKl6x_CMZDSeANJKhUFIGajs5YUn9_cQkalxJG_T9BEQu4yeT5wGmjTrQiQy73UqtqvY3s9-n/');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/AVvXsEglCbZ8ketSWXU2hT4ecBSQ-K1hfn8KJsyTjL73Ots0u0ORQly4AGOKHFgoAeXjsbQfF_I3ETkv30MO3-H8LnM9EWucPkZk_hj4-iLCBjjCpL4McTfvXGPoslQK9fSyrNrzlpSqtZiqPgAQ/');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/AVvXsEg7bwELaJCxhK-TNT6pCEIGQNL95bwVWjmz9N4Pt7G1KJWZPNLlhmT7xTYsnZJPNdh31fKxu3aQdWZP6hmPIHLX1ZMzmstbO3pulS-gbE19TUZQKyPLvTA6G6o_2S16TaaFq-QApuFPdIWb/');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/AVvXsEgbAxz2t2CUcGZhq8fB6VIrbhnAWg2PvgywIoLmefkvO3pzLaF8VWkm-MJqF6e4CZQyNiLgrZkJ9DaQbVs83nF4VS8RaE9sdzf7t5_0XXDnx4wz3uf0b9eJOlfNESS17XCzOSTgKlR_bDDd/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:230px; z-index:1100;}
.barcontefacebook{margin:5px 0 0 47px}
</style>
<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">
<div class="barconteblogger">

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www7.cbox.ws/box/?boxid=673800&amp;boxtag=pw5tjv&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-673800" style="border:#000000 1px solid;" id="cboxmain7-673800"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=673800&amp;boxtag=pw5tjv&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-673800" style="border:#000000 1px solid;border-top:0px" id="cboxform7-673800"></iframe></div>
</div>
<!-- END CBOX -->

</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">

<a class="twitter-timeline"  href="https://twitter.com/agungforc" data-widget-id="278384790602915840">Tweets by @agungforc</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

</div>
</div>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">

<iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/KumpulanKataKataGombalGoneToTheSky2012&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe>

</div>
</div>

Keterangan:

- Facebook FP Like:
Ganti Tulisan Berwana Biru dgn alamat link FanPages anda
BANNER
Tags: ,
agung

Hey there, We are Blossom Themes! We are trying to provide you the new way to look and use the blogger templates. Our designers are working hard and pushing the boundaries of possibilities to widen the horizon of the regular templates and provide high quality blogger templates to all hardworking bloggers!

2 comments:

  1. 401253_115371338588972_1330793927_n
    Ferry PGJanuary 9, 2013 at 5:41 PM

    cara cari ini dimana
    Ganti tulisan CONTENT CBOX HERE dengan kode HTML CBox anda.
    Ganti tulisan CONTENT TWITTER HERE dengan kode HTML widget status Twitter anda.
    Ganti tulisan CONTENT FACEBOOK HERE dengan kode HTML Facebook Like Box anda. ???

    ReplyDelete
  2. agung
    Agung Wisnu SaputraJanuary 11, 2013 at 5:22 PM

    -kalo content CBOX daftar dulu di www.cbox.ws

    -kalo content twitter itu di Twitter >> Setting >> Widgets >> Create New >> Silahkan edit >> buat >> Copy HTMLnya

    -Kalo Content Facebook,di situ kan ada contohnya, kamu tinggal ganti text yg warna biru dgn URL Fan Pages Kamu..

    Semoga Membantu

    ReplyDelete

Subscribe to: Post Comments (Atom)

Bottom Ad [Post Page]