 |
| Screenshot |
Widget
Popular Post Adalah Widget yang memuat artikel artikel yang sering di baca oleh
visitor blog kita. Otomatis Artikel Itu Menarik Dan Suka Di Baca Pengunjung.
Nah, Jika Pengunjung Lain Suka Artikel itu, Orang Lain Pun akan tertarik Untuk
Membaca Artikel itu dengan mengeklik Artikel Populer di Widget Popular Post.
Supaya Orang Lain Tertuju Pada Widget Popular Post Yang Kita Pasang, Kita Harus
Membuat Widget Itu Semenarik Mungkin Dengan Cara Memberi Warna Menarik Pada
Widget Tersebut. Kali ini Kita Akan Membahas Tutorialnya.
Tutorial
1.
Pasang Widget Popular Post Dengan Cara Masuk Tata Letak => Tambahkan
Widget => Artikel Populer lalu centang sesuai keinginan sobat
masing masing.
2. Kemudian Masuk ke Template => Edit HTML
Tambahkan Code CSS Berikut di atas Code ]]></b:skin> atau </style>
2. Kemudian Masuk ke Template => Edit HTML
Tambahkan Code CSS Berikut di atas Code ]]></b:skin> atau </style>
/* Popular Post Full Color */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
background:none;
outline:none;
}
.PopularPosts ul {
margin:.5em 0;
list-style:none;
font:normal normal 13px/1.4 "Arial
Narrow",Arial,Sans-Serif;
color:black;
counter-reset:num;
}
.PopularPosts ul li img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}
.PopularPosts ul li {
background-color:#eee;
margin:0 10% .4em 0;
padding:.5em 1.5em .5em .5em;
counter-increment:num;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
font-weight:bold;
font-size:120%;
color:inherit;
text-decoration:none;
}
.PopularPosts ul li:before {
content:counter(num);
display:block;
position:absolute;
background-color:black;
color:white;
width:30px;
height:30px;
line-height:30px;
text-align:center;
top:50%;
right:-10px;
margin-top:-15px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1)
{background-color:#E11E28;margin-right:2%}
.PopularPosts ul li:nth-child(2)
{background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3)
{background-color:#FECB09;margin-right:2%}
.PopularPosts ul li:nth-child(4)
{background-color:#6EBE27;margin-right:2%}
.PopularPosts ul li:nth-child(5)
{background-color:#149A48;margin-right:2%}
.PopularPosts ul li:nth-child(6)
{background-color:#5BBFF1;margin-right:2%}
.PopularPosts ul li:nth-child(7)
{background-color:#61469C;margin-right:2%}
.PopularPosts ul li:nth-child(8)
{background-color:#863E86;margin-right:2%}
.PopularPosts ul li:nth-child(9)
{background-color:#863E62;margin-right:2%}
.PopularPosts ul li:nth-child(10)
{background-color:#815540;margin-right:2%}
|
Widget
Popular Post Adalah Widget yang memuat artikel artikel yang sering di
baca oleh visitor blog kita. Otomatis Artikel Itu Menarik Dan Suka Di
Baca Pengunjung. Nah, Jika Pengunjung Lain Suka Artikel itu, Orang Lain
Pun akan tertarik Untuk Membaca Artikel itu dengan mengeklik Artikel
Populer di Widget Popular Post. Supaya Orang Lain Tertuju Pada Widget
Popular Post Yang Kita Pasang, Kita Harus Membuat Widget Itu Semenarik
Mungkin Dengan Cara Memberi Warna Menarik Pada Widget Tersebut. Kali ini
Kita Akan Membahas Tutorialnya.
2. Kemudian Masuk ke Template => Edit HTML
Tambahkan Code CSS Berikut di atas Code ]]></b:skin> atau </style> - See more at: http://j4rviz.blogspot.com/2014/05/cara-membuat-widget-popular-post-warna.html#sthash.kxD4KT22.dpuf
Tutorial
1. Pasang Widget Popular Post Dengan Cara Masuk Tata Letak => Tambahkan Widget => Artikel Populer lalu centang sesuai keinginan sobat masing masing.2. Kemudian Masuk ke Template => Edit HTML
Tambahkan Code CSS Berikut di atas Code ]]></b:skin> atau </style> - See more at: http://j4rviz.blogspot.com/2014/05/cara-membuat-widget-popular-post-warna.html#sthash.kxD4KT22.dpuf
Widget
Popular Post Adalah Widget yang memuat artikel artikel yang sering di
baca oleh visitor blog kita. Otomatis Artikel Itu Menarik Dan Suka Di
Baca Pengunjung. Nah, Jika Pengunjung Lain Suka Artikel itu, Orang Lain
Pun akan tertarik Untuk Membaca Artikel itu dengan mengeklik Artikel
Populer di Widget Popular Post. Supaya Orang Lain Tertuju Pada Widget
Popular Post Yang Kita Pasang, Kita Harus Membuat Widget Itu Semenarik
Mungkin Dengan Cara Memberi Warna Menarik Pada Widget Tersebut. Kali ini
Kita Akan Membahas Tutorialnya.
2. Kemudian Masuk ke Template => Edit HTML
Tambahkan Code CSS Berikut di atas Code ]]></b:skin> atau </style>
3. Kemudian Save Template Dan Lihat Hasilnya. Tutorial
1. Pasang Widget Popular Post Dengan Cara Masuk Tata Letak => Tambahkan Widget => Artikel Populer lalu centang sesuai keinginan sobat masing masing.2. Kemudian Masuk ke Template => Edit HTML
Tambahkan Code CSS Berikut di atas Code ]]></b:skin> atau </style>
Demikian posting singkat hari ini. Dan semoga bermanfaat untuk anda semua. Dan kalau ada salah ejaan ataupun tulisan mohon di maafkan.
SUMBER
0 Comments
1. Saya akan coba merespon komentar baru secepatnya.
2. Harap berkomentar dengan bahasa baku tanpa singkatan.
3. Komentar promosi, spam, dan komentar satu kalimat yang tidak bermutu akan saya hapus langsung.