Selasa, 09 April 2013

CARA MEMBUAT ANIMASI PADA BlOG


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.
<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDkA4RPq3jkQJbMB8PJknOlA3LAPsIn0Y5AFsav_Ri0vq8GP_OyfGtVQiY2KS70xCd_jsk3F0WbR49U-TXOfBFQJAFR8XUqPjv1e0whiyN-07p1riOsQkrbC149bD60EaqhAODXP-9eydT/');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/AVvXsEhaoEUmMGGZ9bZgCXK8YL9HyYiin4aSYPVZhwWkq2E4Pet14Ye9Oat4d1T2qY7hmXI4WZ-AvnD4GEH2jmf4tphEbDJHA3VmQKt52FfFRkk8aVlIAT0L6YajJr_7uur-Z8wrFM8M9oEw-qvr/');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/AVvXsEix4lJB6EqzxjfzW7X2PeR719wLD_k7wYZ82w4edPZzBbyPbzeATjSLZ5zIhol3R35jfcydsE9W2xx2qmbIOIRc34J7NINJ6G_TGwqRjd-76SkjPxdNqk7FEjW_rO6jIxGcecm2x11fxw2m/');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/AVvXsEh_fAnO75Jw0k5QdYu6e_i2k3cb3f_OoIx7m6Tv8d7RTd3GdwDREhwtzOWrsZTNntXzodFbpcNg2h2TQYMugV1vnX9FjCHzf3dqjUPXW9s2ItnAHqWBf5Q47pEU4m0xp3qyn4MXzd4ak8Dk/');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/AVvXsEiQwLaRyRnuyTrdlzhomXz29jtun6zvgWCMoWlvMqivDqv_l596T7q06slo6xFFEC0PFWaUfqmtttz37LV3eMuPkJ9kfkVgAGTCHRMHcotXZvhOJvtLHIM0z-rQ2k2EGgQtEuwFpksEkQ4Q/');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/AVvXsEiDndos91T0TAujth8neLErY7bQ9FHvDg2fBGwsKocq0R3qnzgLeWiJrT9St9GCqIPjWcSYzIPEFMAD4Gem_6tX78rkx-Y04zRQX2PjvcX0klzsFMS4mKUhDMgZbAGOjWYnY9QDwfkt5FFA/');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>
3.       Kustomisasi widget :
  • Ganti tulisan CONTENT BLOGGER HERE dengan kode HTML Google Friend Connect 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.
4.      Bentuk akhir dari kode script ini ( Final Code ) akan menjadi seperti script widget milik saya dibawah ini :
<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDkA4RPq3jkQJbMB8PJknOlA3LAPsIn0Y5AFsav_Ri0vq8GP_OyfGtVQiY2KS70xCd_jsk3F0WbR49U-TXOfBFQJAFR8XUqPjv1e0whiyN-07p1riOsQkrbC149bD60EaqhAODXP-9eydT/');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/AVvXsEhaoEUmMGGZ9bZgCXK8YL9HyYiin4aSYPVZhwWkq2E4Pet14Ye9Oat4d1T2qY7hmXI4WZ-AvnD4GEH2jmf4tphEbDJHA3VmQKt52FfFRkk8aVlIAT0L6YajJr_7uur-Z8wrFM8M9oEw-qvr/');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/AVvXsEix4lJB6EqzxjfzW7X2PeR719wLD_k7wYZ82w4edPZzBbyPbzeATjSLZ5zIhol3R35jfcydsE9W2xx2qmbIOIRc34J7NINJ6G_TGwqRjd-76SkjPxdNqk7FEjW_rO6jIxGcecm2x11fxw2m/');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/AVvXsEh_fAnO75Jw0k5QdYu6e_i2k3cb3f_OoIx7m6Tv8d7RTd3GdwDREhwtzOWrsZTNntXzodFbpcNg2h2TQYMugV1vnX9FjCHzf3dqjUPXW9s2ItnAHqWBf5Q47pEU4m0xp3qyn4MXzd4ak8Dk/');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/AVvXsEiQwLaRyRnuyTrdlzhomXz29jtun6zvgWCMoWlvMqivDqv_l596T7q06slo6xFFEC0PFWaUfqmtttz37LV3eMuPkJ9kfkVgAGTCHRMHcotXZvhOJvtLHIM0z-rQ2k2EGgQtEuwFpksEkQ4Q/');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/AVvXsEiDndos91T0TAujth8neLErY7bQ9FHvDg2fBGwsKocq0R3qnzgLeWiJrT9St9GCqIPjWcSYzIPEFMAD4Gem_6tX78rkx-Y04zRQX2PjvcX0klzsFMS4mKUhDMgZbAGOjWYnY9QDwfkt5FFA/');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">
<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-3587425820990824703" style="width:250px;border:1px solid #ff0000;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#ff0000';
skin['ENDCAP_BG_COLOR'] = '#ffffff';
skin['ENDCAP_TEXT_COLOR'] = '#ff0000';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#000000';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#ffffff';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#ffffff';
skin['CONTENT_HEADLINE_COLOR'] = '#ff0000';
skin['NUMBER_ROWS'] = '5';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-3587425820990824703',
   site: '12625880981379543615' },
  skin);
</script>

</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 30000,
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
  }
}).render().setUser('KertasKecilKita').start();
</script>
</div>
</div>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">


<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FKertas-Kecil-Kita%2F252332308146760&amp;width=250&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true&amp;appId=286045748116584" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:290px;" allowtransparency="true"></iframe>

</div>
</div>
5.      Jika sudah selesai melakukan kustomisasi, Save / Simpan gadget dan lihat hasilnya.
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)