Wednesday, 22 January 2014

Cara Modifikasi Gadget Popular Post di Blogspot


Untuk mendapatkan gadget popular post yang colorful seperti diatas, cukup ikuti tahap - tahap dibawah ini :
  1. Pergi ke Dashboard blogger kalian.
  2. Klik Template.
  3. Kemudian klik Edit HTML.
  4. Cari kode ]]></b:skin> (gunakan CTRL+F).
  5. Kemudian letakkan kode berikut ini tepat diatas ]]></b:skin>.
    .mostpopular {
        list-style: none outside none;
        margin: 0.3em 0 !important;
        padding: 0;
    }
    .mostpopular_li {
        background-image: none !important;
        border: 0 none;
        list-style: none outside none !important;
        margin: 0 0 -7px !important;
        padding: 13px 0 8px 8px !important;
        position: relative;
        width: 100%;
    }
    .mostpopular_li.color0 {
        background-color: #EE5826 !important;
        width: 100%;
    }
    .mostpopular_li.color1 {
        background-color: #27B6E2 !important;
        width: 93%;
    }
    .mostpopular_li.color2 {
        background-color: #C5E627 !important;
        width: 89%;
    }
    .mostpopular_li.color3 {
        background-color: #FF6F51 !important;
        width: 84%;
    }
    .mostpopular_li.color4 {
        background-color: #D59B8E !important;
        width: 80%;
    }
    .mostpopular_li.color5, .mostpopular_li.color6, .mostpopular_li.color7, .mostpopular_li.color8, .mostpopular_li.color9, .mostpopular_li.color10, .mostpopular_li.color11, .mostpopular_li.color12, .mostpopular_li.color13, .mostpopular_li.color14, .mostpopular_li.color15 {
        background-color: #888888 !important;
        width: 74%;
    }
    a.barlinko {
        background: none repeat scroll 0 0 transparent;
        display: block;
        font: italic 13px georgia,serif;
        margin: 0 6px 0 0;
        padding: 0;
        text-decoration: none !important;
    }
    a.barlinko:hover {
        color: #FFFFFF;
    }
    .barco {
        display: block;
        right: 0;
    }
    .mostpopular_li img {
        margin-top: 15px;
        position: absolute;
        right: 5px;
    }
    a.thethingwithc {
        border: 0 none !important;
        color: #FFFFFF !important;
        display: block;
        font-family: arial;
        font-size: 11px;
        font-weight: bold;
        padding: 0 9px 0 0;
        text-align: right;
        text-decoration: none !important;
    }

    6. Taruh kode dibawah ini setelah  kode <b:section id='sidebar' showaddelement='yes'>.
    7. Jika kode <b:section id='sidebar' showaddelement='yes'> tidak ditemukan,
    langsung saja cari kode berikut <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>.
    8. Kemudian jika sudah ditemukan, hapus kodenya kemudian ganti dengan kode dibawah ini :

    <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
    <b:includable id='main'>                        
                                         <div id='sidebartitlewrapper'>
                                             <b:if cond='data:title'><h3><span><data:title/></span></h3></b:if>                                        
                                         </div>                                     
                                         <div class='sectioncont'> 
                                             <ul class='mostpopular'> 
                                                 <script type='text/javascript'>
                                                     //<![CDATA[                                                 
                                                     var i=0;
                                                     //]]>
                                                 </script>
                                                 <b:loop values='data:posts' var='post'>
                                                     <script type='text/javascript'>
                                                         //<![CDATA[                                                 
                                                             document.write ('<li class="mostpopular_li color'+i+'">');
                                                             var i= i +1;
                                                         //]]>
                                                     </script>
                                                      <a class='barlinko' expr:href='data:post.href'><data:post.title/><data:post.id/></a>
                                                     <span style='display: inline-block;width:100%;'>
                                                         <span style='float: left;font-size:10px;color:#f5f5f5;'> </span>                                                        
                                                         <span class='cb'/>
                                                     </span>
                                                     <script type='text/javascript'>
                                                         //<![CDATA[                                                 
                                                              document.write ('</li>');
                                                          //]]>
                                                     </script>                                            
                                                 </b:loop>
                                             </ul>
                                         </div>                                     
                                         <b:include name='quickedit'/>
                                       </b:includable>
    </b:widget>

    9. Simpan template.
    10. Pergi ke halaman Tata Letak / Layout.
    11. Klik Add / Tambahkan Gadget.
    12. Pilih Entri Populer / Popular Posts.
    13. Ubah pengaturan gadget seperti dibawah ini :


    14. Klik "Save/Simpan"
    15. Selesai.
    Load disqus comments

    0 komentar