Hay friends, Dengerin lagu yuks
Hehehehe ..
Andyrra

Male, 45 years

Batam, Indonesia

If you're doing your best, you won't have any time to worry about failure and The past can't see you, but the future is listening.

andyrra.com

Translate

Java Filipino Czech English iran Romania Thailand Bangladesh India India French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

poto

Mounting created Bloggif

23 Mei 2013

Membuat Popular Post Warna Warni di Blog


Cara Mudah Membuat Widget Popular Post Warna WarniCara Membuat Popular Post Warna Warni di Blog - Mungkin bagi anda yang menyukai bidang teknologi dan merupakan seorang pencinta gadget, tentunya anda pernah mengunjungi situs Engadget, salah satu portal berita tentang teknologi terkemuka di Dunia. Jika anda memperhatikan semua unsur pada saat anda berkunjung ke Engadget, pasti anda pernah melihat widget plugin most commented yang terpasang di sidebar seperti ini, berbentuk vertikal ke bawah dan berpenampilan warna-warni, namun sayangnya plugin ini hanya tersedia untuk blog berplatform wordpress. Namun jangan khawatir, karena sekarang saya akan memberikan solusinya bagi para blogger yang menggunakan platform blogspot, yaitu dengan menggunakan widget popular post default dari blogger dan menambahkan kode script yang bisa merubah penampilan popular post tersebut, meskipun mungkin akan sedikit berbeda tampilanya dengan yang tertera di situs Engadget.
Bisa diliihat pada gambar yang tertera diatas, seperti yang saya kemukakan tadi bahwa widget ini akan bisa menampilkan popular post hingga 10 artikel, dan disebelah judul artikelnya akan ditampilkan nomor urut dari 1 sampai 10 yang menandakan ke-populeran artikel tersebut. Selain itu, warna-warna yang ditampilakan pada widget ini juga bisa di modifikasi dan diubah-ubah sesuai minat dan interesting rekan-rekan blogger. Well, bagi anda yang berminat, silahkan disimak yang berikut ini.

1. Login ke Blogger.

2. Pilih Tata Letak.

3. Pilih Add Gadget.

4. Pilih Entri Populer.

5. Lalu anda setting widget 'Entri Populer' seperti di bawah ini.
  • Hilangkan centang pada Thumbnail Gambar dan Cuplikan.
  • Pilih berapa entri atau artikel yang ingin ditampilkan (tergantung minat dan kebutuhan anda).
6. Klik 'simpan'.

7. Masih di Tata Letak, pilih Add Gadget.

8. Pilih HTML/JavaScript.

9. Lalu letakkan kode di bawah ini ke dalam box 'konten'.


<style type='text/css'>
/*----- popular post warna warni by farhanshare.blogspot.com-----*/
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}</style>

10. Klik 'simpan', dan selesai 

Bagaimana? mudah bukan membuat widget popular post ber-warna warni seperti pada situs Engadget. Demikian Cara Membuat Popular Post Warna Warni di Blog, semoga bermanfaat dan selamat mencoba.





Get free daily email updates!

Follow us!



Share to Facebook Share this post on twitter Bookmark Delicious Digg This Stumbleupon Reddit Yahoo Bookmark Furl-Diigo Google Bookmark Technorati Newsvine Tips Triks Blogger, Tutorial SEO, Info

0   komentar

Cancel Reply

Led


copas gif

loading

SOCIAL NETWORK

email  
   
 
google plusGoogle+
 
  youtube 
 
andyrra.com

VISITOR FROM

andyrra.com

RECENT POST



>

Enter your email address:



what is my ip address?