• Breaking News

    Krumpuls

    Blog Pendidikan, Contoh Makalah, Contoh Naskah Drama, English Text, Contoh Resensi, Contoh Surat

    Home Trik dan Tips TIK-BLOG 7 STYLE WIDGET POPULER POST DI BLOGGER

    7 STYLE WIDGET POPULER POST DI BLOGGER

    Minggu, Januari 20, 2013

    Krumpuls - 7 STYLE WIDGET POPULER POST DI BLOGGER - Dalam posting ini saya menyajikan tujuh gaya untuk widget popular post di blogger.

    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/AVvXsEiNLc-wEqYS41jCdDJC_RVPKnKy96cZfojYqxAsomcrFwzZuebreb54-rk9TUKRbDdWhqWF61pimx7SA43SjkynC10WwH7Lk9zU5_mIse1RdC_HDHJEW_0mn7ULiUf8LglmS8G7YQ4pZ6U/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/AVvXsEhOIptWOzVbwbBEaXf9vUFTV3vTDPz3TaLA3rvLl1Vbf13VebwLOJ_2lroAB49Q8iQSDo0nwBEQNqb67sMclgRqd1J6ONSpjqcu_jHKtMC0SuXuT4UUF7bl9X3ba9XqkzDrq5VRzlGZcs0/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 semua - 7 STYLE WIDGET POPULER POST DI BLOGGER
    Read more
    Diposting oleh di
    Label:

    1 komentar:

    Silahkan berkomentar dengan sopan,tidak mengandung sara atau pun menyinggung pihak tertentu.

    Fashion

    Beauty

    Travel