widget popular post

Di sini, di tutorial ini, Anda akan melihat bagaimana cara menambahkan Multi-Colored Popular Posts widget di Blogger. Patuhi prosedur langkah demi langkah hati-hati sehingga Anda tidak akan menghadapi masalah dan backup template Anda sebelum melanjutkan.

Cara Tambah Multi-Colored Popular Posts Widget Untuk Blogger?

1. Pergi ke Blogger Dashboard> Template> Edit HTML.
2. Centang Expand Widget Template kotak centang.
3. Cari (Ctrl + F) untuk kode di bawah ini dalam template Anda.
 

/* Variable definitions

   ====================
4. Copy dan paste kode di bawah ini tepat di bawah / setelah kode di atas.

<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">

<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>

<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>

<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>

<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>

<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>

</Group>

 5. Sekarang cari (Ctrl + F) untuk]]> </ b: skin> tag dan tambahkan kode berikut tepat di atasnya:

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}

#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}

#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}

#PopularPosts1 ul li:first-child:after{content:"1"}

#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}

#PopularPosts1 ul li:first-child + li:after{content:"2"}

#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}

#PopularPosts1 ul li:first-child + li + li:after{content:"3"}

#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}

#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}

#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}

#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}

#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{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}

#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}

#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}

#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

 6. Selanjutnya, cari (Ctrl + F) untuk kode berikut atau yang mirip dengan ini

<b:section-contents id='sidebar-right-1'>

  7. Paste kode berikut di bawahnya:

<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'>

    <ul>

     <b:loop values='data:posts' var='post'>

      <li>

       <b:if cond='data:showThumbnails == &quot;false&quot;'>

        <b:if cond='data:showSnippets == &quot;false&quot;'>

         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>

        <b:else/>

         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>

        </b:if>

       <b:else/>

        <b:if cond='data:showSnippets == &quot;false&quot;'>

         <b:if cond='data:post.thumbnail'>

          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>

         <b:else/>

          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimoUMeuh7C_HvCRzgtv3swM454DVjoFdH_3fkYpMusChjOJXh6B01CsfgiTSq3RfpfAIppVfm4ol5uLJZBNapTB5XTxXPYDPuAwgLvJomQ8DBaH5QlkpLtAxpyqeQQnpZWEyJovfhaIP0/s1600/default.jpg'/>

         </b:if>

         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>

         <div class='clear'/>

        <b:else/>

         <b:if cond='data:post.thumbnail'>

          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>

         <b:else/>

          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimoUMeuh7C_HvCRzgtv3swM454DVjoFdH_3fkYpMusChjOJXh6B01CsfgiTSq3RfpfAIppVfm4ol5uLJZBNapTB5XTxXPYDPuAwgLvJomQ8DBaH5QlkpLtAxpyqeQQnpZWEyJovfhaIP0/s1600/default.jpg'/>

         </b:if>

         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>

         <div class='clear'/>

        </b:if>

       </b:if>

      </li>

     </b:loop>

    </ul>

   </div>

  </b:includable>

</b:widget>

8. Simpan template Anda.  
Langkah selanjutnya tambahkan widget di blogger anda di Widget Pengaturan:
• Pergi ke Blogger Dashboard > Tata Letak >  Tambahkan gadget > pilih entri Populer
• Pilih "menampilkan hingga 5 posting".
• Simpan gadget.
  Untuk menyesesuaikan widgets langkahnya :
• Pergi ke Template> Serasikan (Template Designer)
• Tulisan Lanjutan> Populer Background
• Sekarang menyesuaikan widget sesuai keinginan dan simpan template anda.