SELAMAT DATANG DIGUBUK ANE

"TERIMAKASIH BUAT SOBAT YANG SUDAH BERKUNJUNG JANGAN LUPA YA LIKE"

Download

Minggu, 29 September 2013

Browse: Home » 7 STYLE WIDGET POPULER POST DI BLOGGER

7 STYLE WIDGET POPULER POST DI BLOGGER

Posted by Ahya Print  
Tagged as:
07.29

Berikut akan saya share langkah-langkahnya:
Pertama, Anda perlu menambahkan widget Populer post di blog. yaitu, Pergi ke Layout > Tambah Gedget, lalu pilih widget populer di Post. Kemudian hapus centang gambar thumbnail dan potongan. Jika Anda semua siap memiliki widget popular post kemudian hapus centang gambar thumbnail dan Snippet.



Selanjutnya, beberapa header saat popule post  di luar div  mana kita menerapkan gaya. Jadi, Anda perlu menempatkan header ini di bawah div itu. Untuk itu, Pergi ke Template> Edit HTML> Periksa Expand Template Widget dan Cari dengan nama yang diberikan untuk widget populer. Yang terlihat seperti 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'>     .        . .     .   </div> </b:includable> </b:widget>


<b:if cond='data:title'> <h2> <data:title/> </ h2> </ b: if> jika kode ini keluar sisi tampilan div kuning kemudian memotong dan menempelkan di dalam div itu.
Sekarang ketika Anda menerapkan Style widget maka ini akan berlaku untuk header widget juga. Selanjutnya, Cari kode di bawah ini:

 ]]></b:skin>
Dan yang terpenting yaitu salin kode css style berikut ini dan paste di atasnya kode tersebut.



Style 1

.popular-posts {
    background-color:#efefef;
    border-radious:5px;
    -webkit-box-shadow: 0px 3px 5px 1px #dadada;
    box-shadow: 0px 3px 5px 1px #dadada;
    padding:10px 10px 10px 15px;
    font-family:Georgia, "Times New Roman", Times, serif;
}
.popular-posts h2 {
    font-family:Tahoma, Geneva, sans-serif;
    height:25px;
    margin-top:0px;
    margin-left:20px;
    margin-bottom:15px;
    font-size:14px;
    color:#000;
}
.popular-posts ul li {
    list-style:disc;
    margin-bottom:5px;
}
.popular-posts ul li a {
    color:#000;
}
.popular-posts ul li a:hover {
    color:blue;
    text-decoration:underline;
}


Style 2 

.popular-posts {
    background-color:#fff;
    border-radious:5px;
    -webkit-box-shadow: 0px 3px 5px 1px #dadada;
    box-shadow: 0px 3px 5px 1px #dadada;
}
.popular-posts h2 {
    font-family:Tahoma, Geneva, sans-serif;
    margin-top:1px;
    height:25px;
    margin-bottom:10px;
    font-size:14px;
    color:#f4f4f4;
    background-color:#5a77a0;
    height:25px;
    border-bottom:#163b70 solid 1px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    padding:8px 0 0 20px;
}
.popular-posts ul {
    margin:10px 10px 15px 10px;
    font-family:Georgia, "Times New Roman", Times, serif;
}
.popular-posts ul li {
    margin-bottom:5px;
    vertical-align:middle;
    list-style:square;
}
.popular-posts ul li a {
    color:#000;
}
.popular-posts ul li a:hover {
    color:blue;
    text-decoration:underline;
}


Style 3

.popular-posts {
    background-color:#fff;
    border-radious:5px;
    -webkit-box-shadow: 0px 3px 5px 1px #dadada;
    box-shadow: 0px 3px 5px 1px #dadada;
    padding:0px;
}
.popular-posts h2 {
    font-family:Tahoma, Geneva, sans-serif;
    margin-top:1px;
    height:25px;
    margin-bottom:10px;
    font-size:14px;
    color:#f4f4f4;
    background-color:#5a77a0;
    height:25px;
    border-bottom:#163b70 solid 1px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    padding:8px 0 0 20px;
}
.popular-posts ul {
    margin:10px 0 15px 0px;
    font-family:Georgia, "Times New Roman", Times, serif;
    list-style-type: none;
}
.popular-posts ul li {
    padding-left:28px !important;
    margin-bottom:5px;
    margin-left:-15px;
}
.popular-posts ul li:nth-child(odd) {
    background-color:#f4f4f4;
}
.popular-posts ul li a {
    color:#000;
}
.popular-posts ul li a:hover {
    color:blue;
    text-decoration:underline;
}


Style 4

.popular-posts {
    padding:0px;
}
.popular-posts h2 {
    font-family:Tahoma, Geneva, sans-serif;
    color:#000;
    margin-top:1px;
    height:25px;
    margin-bottom:10px;
    font-size:14px;
    height:25px;
    padding-top:8px;
    text-align:center;
}
.popular-posts ul {
    margin:10px 0


15px 0px;
    font-family:Georgia, "Times New Roman", Times, serif;
    list-style-type: none;
}
.popular-posts ul li {
    padding-left:20px !important;
    margin-bottom:5px;
    margin-left:-15px;
    border:#dfdfdf solid 1px;
    border-radius:5px;
}
.popular-posts ul li:hover {
    background-color:#f4f4f4;
}
.popular-posts ul li a {
    color:#000;
    text-decoration:none;
}
.popular-posts ul li a:hover {
    text-decoration:none;
}


Style 5
.popular-posts {
    padding:0px;
}
.popular-posts h2 {
    font-family:Tahoma, Geneva, sans-serif;
    color:#000;
    margin-top:1px;
    height:25px;
    margin-bottom:10px;
    font-size:14px;
    height:25px;
    padding-top:8px;
    padding-left:28px;
}
.popular-posts ul {
    margin:10px 0 15px 0px;
    font-family:Georgia, "Times New Roman", Times, serif;
    list-style-type: none;
}
.popular-posts ul li {
    padding-left:20px !important;
    margin-bottom:10px;
    margin-left:-15px;
    border:#dfdfdf solid 1px;
    background-color:#f4f4f4;
    -webkit-box-shadow: 0px 3px 5px 1px #dadada;
    box-shadow: 0px 3px 5px 1px #dadada;
    list-style:none;
}
.popular-posts ul li:hover {
    -webkit-box-shadow: 0px 0px 0px 0px #dadada;
    box-shadow: 0px 0px 0px 0px #dadada;
}
.popular-posts ul li a {
    color:#000;
    text-decoration:none;
}
.popular-posts ul li a:hover {
    text-decoration:none;
}


Style 6

.popular-posts {
    padding:0px;
}
.popular-posts h2 {
    font-family:Tahoma, Geneva, sans-serif;
    color:#000;
    margin-top:1px;
    height:25px;
    margin-bottom:10px;
    font-size:14px;
    height:25px;
    padding-top:8px;
    padding-left:28px;
}
.popular-posts ul {
    margin:10px 0 15px 0px;
    font-family:Georgia, "Times New Roman", Times, serif;
    list-style-type: none;
}
.popular-posts ul li {
    margin-bottom:10px;
    margin-left:-15px;
    list-style:disc;
    border-bottom:#dedede solid 1px;
}
.popular-posts ul li:hover {
    list-style:circle;
}
.popular-posts ul li a {
    color:blue;
    text-decoration:none;
}
.popular-posts ul li a:hover {
    text-decoration:underline;
    color:orange;
}


Style 7

.popular-posts {
    padding:0px;
}
.popular-posts h2 {
    font-family:Tahoma, Geneva, sans-serif;
    color:#000;
    margin-top:1px;
    height:25px;
    margin-bottom:10px;
    font-size:14px;
    height:25px;
    padding-top:8px;
    padding-left:28px;
}
.popular-posts ul {
    margin:10px 0 15px 0px;
    font-family:Georgia, "Times New Roman", Times, serif;
    list-style-type: none;
}
.popular-posts ul li {
    padding-top:15px !important;
    padding-bottom:15px !important;
    padding-left:30px !important;
    margin-left:-15px;
    background: #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCOwTqXjw8PKzzrUlIsqyMhU5e-7uGzajbzdD54Iy8Xr4mlR0uGXxzuL3nbc6A65mwzHhIMWZS_9y8kg6ZiaEf7DFQn6V-pWqVmLmh5cYB2mteMULsktgXiNCG1f_TLQ2SdiLCJR4HAeI/h120/asterisk_orange.png) no-repeat 0 10px;
    border-bottom:#999 dotted 2px;
}
.popular-posts ul li:hover {
    background: #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx-ckk3fCcGT530Epmezk26j7gontg-5uKj4UsiF5RXedmnhcuTMLBz-jxj0_HJkOyZgQsIHJ7ycBTzhaXoZKLEWXwo698NWjg5WxGvRcLX3pyLASac-qf04giqYkpxj60SUnPGg5aB6Y/h120/asterisk_yellow.png) no-repeat 0 10px;
    background-color:#f9f9f9;
}
.popular-posts ul li a {
    color:#000;
    text-decoration:none;
}
.popular-posts ul li a:hover {
    text-decoration:none;
}

Demikianah tutorial blogging yang bisa saya sajikan pada kesempatan ini yaitu 7 STYLE WIDGET POPULER POST DI BLOGGER, semoga bermanfaat dan berguna untuk anda

About the Author

Write admin description here..

0 komentar:

Langganan: Posting Komentar (Atom)
Copyright © 2013 bloggerku. Blogger Template by BloggerTheme9
Proudly Powered by Blogger.
back to top