widget naruto bertarung

halo salam blogger kali ini saya menyediakan widget naruto yang sedang bertatung

ini cara memasangnya

• login ke blog mu
• pilih tata letak
• lalu tambah gadget
• HTML/java script
• copykan code di bawah
• simpan dan selesai

Naruto Vs Sasuke

<div style="position: fixed; bottom: 0px; left: 20px;width:110px;height:80px;"><a href="http://dapur-tutorial.blogspot.com/2012/10/pasang-widget-animasi-naruto-vs-sasuke-di-blog.html"target="_blank" rel="dofollow"><img src="http://i1210.photobucket.com/albums/cc417/kusanagiblog/NarutoVSSasuke.gif"alt="gambar"title="Widget Naruto VS Sasuke"/></a></div>

Gaara vs daidara

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/GaaraDeidara.gif " title="lihat lebih banyak animasi naruto bergerak." /></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

terimakasih semoga bermanfaat

Read More ->>

Cara Menambahkan Widget Animasi Naruto Bergerak pada Blog

Hallo salam Blogger kali ini saya akan memberitahu cara untuk menambahkan widget naruto bergerak yang lucu and keren

CARA MEMASANG ANIMASI

• login ke blod anda
• pilih rancangan / tata letak
• tambah gadget
• HTML / Java Script
• copy code yang saya sediakan di bawah pilaihlah yang anda suka
• paste kan code HTML/Java script tadi
• simpan dan selesai lihat perubahannya di blog anda

Perhatiam! anda bisa menggan ti posisi animasi sesuai dengan keinginan anda.

Caranya dengan mengedit tulisan hijau yang ada di script nya

Bottom (bawah), top (atas), Right (kanan), left (kiri).

Contoh jika anda ingin memposisikannya di kiri atas anda harus merubahnya dengan top dan left

   1.Jiraiya

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src=" http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/JiraiyaSummoned.gif" title="lihat lebih banyak animasi naruto bergerak". alt="kumpulan animasi naruto bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

2. Deidara

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://i1107.photobucket.com/albums/h385/bogel4/DeidaraBird.gif " title="lihat lebih banyak animasi naruto bergerak." /></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

3. Naruto

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/692/th/69207.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">My Widget</a></center></small></div>

4.Gaara

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/539/th/53973.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">My Widget</a></center></small></div>

5.kisame

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src=" http://i446.photobucket.com/albums/qq182/kisot06/Akatsuki%20gif/KisameWater.gif" title="lihat lebih banyak animasi naruto bergerak." /></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

6. Kiba

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/KibaAkamaru.gif " title="lihat lebih banyak animasi naruto bergerak". alt="kumpulan animasi naruto bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

7.Akatsuki

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://th244.photobucket.com/albums/gg10/spider-man155/th_Akatsuki.gif " title="Kumpulan animasi Naruto bergerak gif" alt="cara memasang naruto bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

8.Sakura

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/Sakura2.gif " title="Kumpulan animasi Naruto bergerak gif" alt="cara memasang animasi naruto bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

9.Anggota akatsuki

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://pic60.picturetrail.com/VOL1698/12134860/21582353/355343009.jpg " title="Kumpulan animasi Naruto bergerak gif" alt="cara memasang animasi naruto bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

Read More ->>

Cara Membuat Popular Post Berputar

tahap pertama :

• Masuk akun Blogger - design/Rancangan - Add Gadget dan pilih Popular Post seperti gambar dibawah ini (kalau tidak ada bisa cari entri Popular) :
  

• Setiap widget default blogger akan langsung memberi nama pada widget tersebut, misalnya "Popular Posts". Kalian bisa menggantinya dengan nama lain sesuai dengan keingginan.
• Dalam menu Popular Post kalian ceklist image thumbnail, untuk snippet tidak perlu
• Jumlah popular Post yang ingin ditampilkan, kalian isi dengan yang diinginkan

• Save

  tahap kedua
  
  Tahap Kedua : Cara Membuat Animasi Popular Post dengan Gambar Berputar
  
  
  • Masuk menu Design/Rancangan - Edit HTML, dalam peng-editan ini tidak perlu men-ceklist Expand Widget Template
  • Kemudian cari kode ]]></b:skin> dan tempatkan kode CSS dibawah ini di atasnya

  .popular-posts .item-thumbnail {
  
  float:left;
  
  } 
  
  .popular-posts ul {
  
  padding-left:30px;
  
  } 
  
  .popular-posts ul li {
  
  list-style-image: none;
  
  list-style-type: none;
  
  display:inline;
  
  } 
  
  .popular-posts ul li img {
  
  padding:0px;
  
  -moz-border-radius: 5px;
  
  -webkit-border-radius: 5px;
  
  border-radius: 5px;
  
  -webkit-transition: all 0.3s ease;
  
  -moz-transition: all 0.3s ease;
  
  transition: all 0.3s ease;
  
  border: 2px solid #CCC;
  
  } 
  
  .popular-posts ul li img:hover {
  
  border:2px solid #ccc;
  
  -moz-transform: scale(1.3) rotate(-360deg);
  
  -webkit-transform: scale(1.3) rotate(-360deg);
  
  -o-transform: scale(1.3) rotate(-360deg);
  
  -ms-transform: scale(1.2) rotate(-360deg);
  
  transform: scale(1.3) rotate(-360deg);
  
  }

  • Selanjutnya cari kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
  • Dan ganti semua kode tersebut dengan kode kode dibawah ini :

  <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
  
  <b:includable id='main'>
  
  <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == &quot;false&quot;'> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='http://www.freetradeireland.ie/site/images/no-image.gif'/> </b:if> </a> </div> </div> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable>
  
  </b:widget>

  • Save template kalian
  
  

Read More ->>