div.TabView div.Tabs{height: 24px;overflow: hidden;}div.TabView div.Tabs a{float: left;display: block;width: 84px; text-align: center;height: 24px; padding-top: 3px;vertical-align: middle;border: 1px solid #999999; border-bottom-width: 0;text-decoration: none;font-family: "Times New Roman", Serif; font-weight: 900;color: #1E62B6; }div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active{background-color: #FFFFFF; }div.TabView div.Pages{clear: both;border: 1px solid #999999; overflow: hidden;background-color: #FFFFFF; }div.TabView div.Pages div.Page{height: 100%;padding: 0px;overflow: hidden;}div.TabView div.Pages div.Page div.Pad{padding: 3px 5px;}

Cara Membuat Post Populer Scroll

Diposting oleh namhorruhktaf nutawsu. on Selasa, 27 November 2012


- Selamat sore sobat blogger, sudah lama ni saya tidak share tutorial blog, karena akhir-akhir ini saya share Software dan Games. baiklah sobat postingan saya kali ini membahas tentang Post Popular, post popular sangat berguna sobat termasuk yang terpasang diblog saya ini, tujuannya untuk mengetahui postingan sobat yang paling banyak di buka oleh pengunjung, ok sobat tanpa perlu panjang lebar kita menuju ke TKP saja.
Cara Pemasangan:
  1. Login ke blog sobat
  2. Kemudian klik tanda panah yang berada di samping icon daftar entri
  3. Kemudian pilih Tata Letak
  4. Pilih Tambah Gadget - pilih HTML/Javascript
  5. Kemudian Paste kode dibawah ini dan terakhir Save.

<div style='height:160px; overflow:auto;'>
<script type="text/javascript">
function getYpipePP(feed) {
document.write('<div style="">');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = " (" + feed.value.items[i].commentcount + ")";
var pList = "<li>" + "<a href="+ href + '" >' + pTitle;
document.write(pList);
document.write(pComment); //to remove comment count delete this line
document.write('</a></li>');
}
document.write('</div>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://ilmu-dedy.blogspot.com
&ShowHowMany=20
&_id=390e906036f48772b2ed4b5d837af4cd
&_callback=getYpipePP
&_render=json"
type="text/javascript"></script>
</div>

Ket:
Warna merah ganti dengan URL blog sobat.
Warna biru jumlah postingan yang akan di tampilkan.
Warna kuning ganti sesuai dengan ketinggian yang sesuai keinginan sobat.

Sekian postingan saya kali ini semoga bermanfaat, jika ada pertanyaan silahkan komentar dibawah. salam bloger Baca Selengkapnya di : Cara Pasang Iklan Otomatis di Bawah Postingan | AF Sahabat Artikel http://abyfarhan7.blogspot.com/2012/03/cara-pasang-iklan-otomatis-di-bawah.html#ixzz2DG11yjzF
More about → Cara Membuat Post Populer Scroll

Cara Pasang Permalink Blog

Diposting oleh namhorruhktaf nutawsu.


Permalink Blog adalah Sebuah Coding yang berfungsi unutk membuat link atau link referensi dari isi postingan suatu blog, permalink tag juga berfungsi untuk meningkatkan seo on page, jadi jika kita pasang permalink di blog maka blog kita akan lebih di baca oleh google, terutama postingannya.



Kegunaan Permalink Tag blog ini adalah selain meningkatkan seo on page juga menghindari para pengcopas yang tidak memberikan sumber. Mungkin mereka akan sadar ketika melihat tulisan tersebut

Cara Membuat Permalink Sbb :

1. Masuk ke akun Blogger Sobat.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk berjaga-jaga kalau nanti terjadi kesalahan kita dapat dengan mudah mengembalikan template seperti semula.

4. Beri tanda centang di Expand Template Widget.

5. Cari kode ]]></b:skin>. Tekan Ctrl + F lalu isikan kode untuk mempercepat pencarian.

6. Copy kode di bawah ini lalu paste di atas kode tersebut
.permalinktag{margin-top:5px;border:1px solid #eff0f1;color:#424242;padding:5px;background:#fbfbef}.permalinktag a{background:0}img.float-right{margin:5px 0 0 10px}img.float-left{margin:5px 10px 0 0}#mn2{width:100%;height:28px;background:#1e90ff;border-top:1px solid #666;border-bottom:1px solid #666;margin-top:0;margin-left:0}
7. Cari kode <data:post.body/>. Untuk mempercepat pencarian, silakan tekan Ctrl + F lalu masukkan kode ini dibawah ini tepat dibawah <data:post.body/>

<div class='bloglano_permalink' style='border:2px dashed red;background:#FFF9B4;padding:10px 5px 5px 10px;text-align:justify'> <center><small>Anda sedang membaca artikel tentang <strong><u><data:blog.pageName/></u></strong> dan anda bisa menemukan artikel <data:blog.pageName/> ini dengan url <strong><data:post.url/></strong>,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel <strong><data:blog.pageName/></strong> ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> sumbernya.</small></center></div> 
8. biasanya kode <data:post.body/> ada dua pilih untuk memasang permalink tag  pilih yang nomor dua, kalau bellum bisa coba saja satu satu.

9. Terakhir simpan template anda dan lihat hasil Baca Selengkapnya di : Cara Pasang Iklan Otomatis di Bawah Postingan | AF Sahabat Artikel http://abyfarhan7.blogspot.com/2012/03/cara-pasang-iklan-otomatis-di-bawah.html#ixzz2DG11yjzF
More about → Cara Pasang Permalink Blog

Cara Membuat Smile Dipostingan Blog

Diposting oleh namhorruhktaf nutawsu.


langkah-langkah:
  • seperti biasa login ke blog dulu
  • selanjutnya pilih tanda panah kebawah (disamping lihat blog)
  • kemudian pilih template
  • Cari kode ]]></b:skin>, biar lebih mudah gunakan CTRL F
  • Kemudian letakkan kode dibawah ini tepat kode dibawah kode yang dicari tadi.
<script src='http://louislim2.googlepages.com/addSmiley.js' type='text/javascript'/>
  • Terakhir Save.
Berikut kode yang bisa sobat gunakan:
  •  or_:-)  :)
     or_:-D :D
     or_:-$   :$
     or_:-(   :(
     or_:-p  :p
     or_;-)  ;)
     or_:-k  :k
     or_:-@   :@
     or_:-#   :#
     or_:-x   :x
     or_:-o  :o
Sekian postingan saya kali ini















Baca Selengkapnya di : Cara Pasang Iklan Otomatis di Bawah Postingan | AF Sahabat Artikel http://abyfarhan7.blogspot.com/2012/03/cara-pasang-iklan-otomatis-di-bawah.html#ixzz2DG11yjzF
More about → Cara Membuat Smile Dipostingan Blog

Cara Pasang Menu Navigasi Horizontal Diblog

Diposting oleh namhorruhktaf nutawsu.


  • Login Ke Blogger
  • Pilih Rancangan -> Edit HTML -> Centang Expand Widget
  • Kemudian cari kode ]]></b:skin> Untuk lebih mudah gunakan CTRL+F kemudian copy kode di bawah ini dan letakan di atas kode berikut :



#menu-bar {
  margin: 0px 0px 0px 0px;
  padding: 6px 6px 0px 6px;
  height: 34px;
  line-height: 100%;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 2px 2px 3px #666666;
  -webkit-box-shadow: 2px 2px 3px #666666;
  -moz-box-shadow: 2px 2px 3px #666666;
  background: #8B8B8B;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#A9A9A9, endColorstr=#7A7A7A);
  background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A));
  background: -moz-linear-gradient(top,  #A9A9A9,  #7A7A7A);
  border: solid 1px #6D6D6D;
}
#menu-bar li {
  margin: 0px 6px 0px 6px;
  padding: 0px 0px 6px 0px;
  float: left;
  position: relative;
  list-style: none;
}
#menu-bar a {
  font-weight: bold;
  font-family: arial;
  font-style: normal;
  font-size: 12px;
  color: #E7E5E5;
  text-decoration: none;
  display: block;
  padding: 8px 20px 8px 20px;
  margin: 0;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  text-shadow: 0px 0px 3px #000000;
}
#menu-bar .current a, #menu-bar li:hover > a {
  background: #0399D4;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#EBEBEB, endColorstr=#A1A1A1);
  background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1));
  background: -moz-linear-gradient(top,  #EBEBEB,  #A1A1A1);
  color: #444444;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  text-shadow: 0px 0px 0px #FFFFFF;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
  background: none;
  border: none;
  color: #666;
  -box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
#menu-bar ul a:hover {
  background: #0399D4 !important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#04ACEC, endColorstr=#0186BA);
  background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) !important;
  background: -moz-linear-gradient(top,  #04ACEC,  #0186BA) !important;
  color: #FFFFFF !important;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  text-shadow: 0px 0px 0px #FFFFFF;
}
#menu-bar ul {
  background: #DDDDDD;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#CFCFCF);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
  background: -moz-linear-gradient(top,  #FFFFFF,  #CFCFCF);
  display: none;
  margin: 0;
  padding: 0;
  width: 185px;
  position: absolute;
  top: 30px;
  left: 0;
  border: solid 1px #B4B4B4;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-box-shadow: 2px 2px 3px #222222;
  -moz-box-shadow: 2px 2px 3px #222222;
  box-shadow: 2px 2px 3px #222222;
}
#menu-bar li:hover > ul {
  display: block;
}
#menu-bar ul li {
  float: none;
  margin: 0;
  padding: 0;
}
#menu-bar ul a {
  padding:10px 0px 10px 15px;
  color:#424242 !important;
  font-size:12px;
  font-style:normal;
  font-family:arial;
  font-weight: normal;
  text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:first-child > a {
  border-top-left-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-right-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topright: 5px;
}
#menu-bar ul li:last-child > a {
  border-bottom-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-bottomright: 5px;
}
#menu-bar:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#menu-bar {
  display: inline-block;
}
  html[xmlns] #menu-bar {
  display: block;
}
* html #menu-bar {
  height: 1%;
}



  • Kemudian  cari kode <body> dan copy kode di bawah ini kemudian letakan di bawahnya



<ul id="menu-bar">
 <li class="current"><a href="#">Home</a></li>
 <li><a href="#">Products</a>
  <ul>
   <li><a href="#">Products Sub Menu 1</a></li>
   <li><a href="#">Products Sub Menu 2</a></li>
   <li><a href="#">Products Sub Menu 3</a></li>
   <li><a href="#">Products Sub Menu 4</a></li>
  </ul>
 </li>
 <li><a href="#">Services</a>
  <ul>
   <li><a href="#">Services Sub Menu 1</a></li>
   <li><a href="#">Services Sub Menu 2</a></li>
   <li><a href="#">Services Sub Menu 3</a></li>
   <li><a href="#">Services Sub Menu 4</a></li>
  </ul>
 </li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact Us</a></li>
</ul>

Kalau Sudah Selesai Silahkan Anda Save / Simpan dan lihat hasilnya ! Baca Selengkapnya di : Cara Pasang Iklan Otomatis di Bawah Postingan | AF Sahabat Artikel http://abyfarhan7.blogspot.com/2012/03/cara-pasang-iklan-otomatis-di-bawah.html#ixzz2DG11yjzF
More about → Cara Pasang Menu Navigasi Horizontal Diblog

Multi Level Drop-Down Menu Dengan CSS dan JQuery

Diposting oleh namhorruhktaf nutawsu. on Senin, 26 November 2012


.
Multi level drop-down menuMulti level drop-down menu
Pada postingan saya sebelumnya yang berjudul 30 tab menu navigasi horizontal, seorang pengunjung bertanya pada kolom komentar cara membut menu drop-down. Alhamdulillah setelah search digoogle, saya temukan tutorial membuat multi level drop-down menu dengan CSS dan JQuery untuk web dari Dinamic Drive. Setelah saya modifikasi tutorial ini bekerja dengan baik pula pada template blogger. Contohnya bisa lihat pada diatas atau free blogger template dalam pengembangan saya disini
Nah berikut langkah-langkah membuat multi level drop-down menu dengan JQuery pada template blogger
1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan script JQuery berikut sebelum tag </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
catatan: bagi sobat yang sudah pernah menambahkan atau pada templatenya sudah terdapat scrip Jquery maka langkah kedua abaikan saja
3. Tambahkan juga script berikut setelah script JQuery yadi
<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />
<!--[if lte IE 7]> 
<style type="text/css"> 
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/ 
</style> 
<![endif]-->
<script type="text/javascript" src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/Dropdownmenuwithjquery.js"></script>
4. Selanjutnya tambahkan kode CSS berikut diatas tag  ]]></b:skin>: 
.jqueryslidemenu{ 
font: bold 12px Verdana; 
background: #414141; 
width: 100%; 
} 

.jqueryslidemenu ul{ 
margin: 0; 
padding: 0; 
list-style-type: none; 
} 

/*Top level list items*/ 
.jqueryslidemenu ul li{ 
position: relative; 
display: inline; 
float: left; 
} 

/*Top level menu link items style*/ 
.jqueryslidemenu ul li a{ 
display: block; 
background: #414141; /*background of tabs (default state)*/ 
color: white; 
padding: 8px 10px; 
border-right: 1px solid #778; 
color: #2d2b2b; 
text-decoration: none; 
} 

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ 
display: inline-block; 
} 

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{ 
color: white; 
} 

.jqueryslidemenu ul li a:hover{ 
background: black; /*tab link background during hover state*/ 
color: white; 
} 

/*1st sub level menu*/ 
.jqueryslidemenu ul li ul{ 
position: absolute; 
left: 0; 
display: block; 
visibility: hidden; 
} 

/*Sub level menu list items (undo style from Top level List Items)*/ 
.jqueryslidemenu ul li ul li{ 
display: list-item; 
float: none; 
} 

/*All subsequent sub menu levels vertical offset after 1st level sub menu */ 
.jqueryslidemenu ul li ul li ul{ 
top: 0; 
} 

/* Sub level menu links style */ 
.jqueryslidemenu ul li ul li a{ 
font: normal 13px Verdana; 
width: 160px; /*width of sub menus*/ 
padding: 5px; 
margin: 0; 
border-top-width: 0; 
border-bottom: 1px solid gray; 
} 

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/ 
background: #eff9ff; 
color: black; 
} 

/* ######### CSS classes applied to down and right arrow images  ######### */ 

.downarrowclass{ 
position: absolute; 
top: 12px; 
right: 7px; 
} 

.rightarrowclass{ 
position: absolute; 
top: 6px; 
right: 5px; 
}
5. Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>
<div id="myslidemenu" class="jqueryslidemenu"> 
<ul> 
<li><a href="http://amatullah83.blogspot.com/">Item 1</a></li> 
<li><a href="#">Item 2</a></li> 
<li><a href="#">Folder 1</a> 
  <ul> 
  <li><a href="#">Sub Item 1.1</a></li> 
  <li><a href="#">Sub Item 1.2</a></li> 
  <li><a href="#">Sub Item 1.3</a></li> 
  <li><a href="#">Sub Item 1.4</a></li> 
  </ul> 
</li> 
<li><a href="#">Item 3</a></li> 
<li><a href="#">Folder 2</a> 
  <ul> 
  <li><a href="#">Sub Item 2.1</a></li> 
  <li><a href="#">Folder 2.1</a> 
    <ul> 
    <li><a href="#">Sub Item 2.1.1</a></li> 
    <li><a href="#">Sub Item 2.1.2</a></li> 
    <li><a href="#">Folder 3.1.1</a> 
        <ul> 
            <li><a href="#">Sub Item 3.1.1.1</a></li> 
            <li><a href="#">Sub Item 3.1.1.2</a></li> 
            <li><a href="#">Sub Item 3.1.1.3</a></li> 
            <li><a href="#">Sub Item 3.1.1.4</a></li> 
            <li><a href="#">Sub Item 3.1.1.5</a></li> 
        </ul> 
    </li> 
    <li><a href="#">Sub Item 2.1.4</a></li> 
    </ul> 
  </li> 
  </ul> 
</li> 
<li><a href="http://amatullah83.blogspot.com/">Item 4</a></li> 
</ul> 
<br style="clear: left" /> 
</div>
6. Simpan template Hasilnya seperti screenshot berikut atau live demo lihat disini
 image_thumb13[1] 
Multi level drop-down menu 
Semoga bermanfaat! Thanks to Dinamic Drive
Baca Selengkapnya di : Cara Pasang Iklan Otomatis di Bawah Postingan | AF Sahabat Artikel http://abyfarhan7.blogspot.com/2012/03/cara-pasang-iklan-otomatis-di-bawah.html#ixzz2DG11yjzF
More about → Multi Level Drop-Down Menu Dengan CSS dan JQuery

Widget Popular Posts Dengan Efek Marquee

Diposting oleh namhorruhktaf nutawsu.


Baiklah tahapan pembuatannya sebagai berikut:
1. Login ke akun anda>> Pada dasbor masuk pada bagian tata letak>> Tambah gadget dan pilih popular posts seperti gambar berikut
Popular Posts Widget
Jika anda sudah menambahkan widget ini maka lewati langkah no 1
2. Masuk ke bagian template>> Edit HTML
3. Ceklist pada bagian Expan widget templates
4. Cari kode <div class=’widget-content popular-posts’> dan simpan kode marquee dibawah ini setelah kode tersebut
<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>
5. Selanjutnya cari kode </b:loop> dan tambahkan kode </marquee> dibawah kode </b:loop>
Sehingga secara keseluruhan kodenya menjadi seperti 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'>
<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>
<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'>
<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>
<div style='clear: both;'/>
<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>
</marquee>
</ul>
<b:include name='quickedit'/></div>
</div>
</b:includable>
</b:widget>
6. Simpan template 
Baca Selengkapnya di : Cara Pasang Iklan Otomatis di Bawah Postingan | AF Sahabat Artikel http://abyfarhan7.blogspot.com/2012/03/cara-pasang-iklan-otomatis-di-bawah.html#ixzz2DG11yjzF
More about → Widget Popular Posts Dengan Efek Marquee

cara menambahkan widget popular posts

Diposting oleh namhorruhktaf nutawsu.


Nah jika anda tertarik menambahkan widget popular posts dengan image circle style pada blog anda, silahkan ikuti langkah-langkah pembuatannya sebagai berikut:
1. Setelah login ke akun anda pada bagian tata letak>> Tambah gadget>> Tambahkan popular posts bawaan blogger dan konfigurasikan widget dengan mencenteng kotak kecil thumbnail dan biarkan kosong pada kotak kecil snippet. Simpan. Jika belum tahu cara menambahkan widget popular posts bawaan blogger, silahkan lihat tutorialnya disini
2. Kemudian masuk pada bagian template>> edit HTML >> Cari kode ]]></b:skin>
3. Salin dan tempelkan kode CSS berikut diatas kode ]]></b:skin>
.popular-posts ul{padding-left:0px;font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0} .popular-posts ul li {background: url(#) no-repeat scroll 5px 5px; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 5px !important;font-size:12px!important;font-weight:550; border: 1px solid #58ACFA; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .popular-posts ul li:hover { background: #CCE9FD;border:1px solid #58ACFA; } .popular-posts ul li a:hover { text-decoration:none; } .popular-posts .item-thumbnail img { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);height:70px;width:70px;}.popular-posts .item-thumbnail img:hover { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-webkit-transition: all 0.5s ease-in-out; 
-moz-transition: all 0.5s ease-in-out; 
-o-transition: all 0.5s ease-in-out; 
transition: all 0.5s ease-in-out; 
-webkit-transform:rotate(360deg); 
-moz-transform:rotate(360deg); 
-ms-transform:rotate(360deg); 
-o-transform:rotate(360deg); 
transform:rotate(360deg);}
4. Simpan template dan lihat hasilnya ddiblog anda!
Baca Selengkapnya di : Cara Pasang Iklan Otomatis di Bawah Postingan | AF Sahabat Artikel http://abyfarhan7.blogspot.com/2012/03/cara-pasang-iklan-otomatis-di-bawah.html#ixzz2DG11yjzF
More about → cara menambahkan widget popular posts