×

Author / Admin / Editor

     Jagoan Redesign    

Blog yang membahas Tutorial Blogger, Games, Template, Tips Adsense, SEO, Web Design dan Teknologi

Iklan Bawah Posting

Cara Membuat Widget Popular Post Keren Seperti Blog Igniel di Blogger

Jagoanredesign - Kali ini saya akan membagikan sebuah tutorial Cara Membuat Widget Popular Post Keren Seperti Blog Igniel di Blogger, popular post merupakan menu yang biasanya wajib ada di blog atau website. 

cara-membuat-widget-popular-post-keren-seperti-blog-igniel-di-blogger

Tujuannya adalah untuk menampilkan artikel blog yang sering dikunjungi di blog kepada pengunjung  anda, tujuannya adalah untuk mempermudah dalam menemukan postingan populer lainnya. widget ini populer post terinspirasi dari blog Igniel, karena deisainnya yang sangat keren dan simple untuk dilihat dimata.

Cara Membuat Widget Popular Post Keren Seperti Blog Igniel di Blogger 

1. Silahkan Login ke Blogger.
2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.
3. Silahkan anda hapus kode CSS Popular Post di blog anda, lebih mudahnya silahkan cari kode .popularposts atau sejenisnya (karena setiap template biasanya berbeda kode css)
4. Kemudian cari kode berikut ini ]]></b:skin>  atau </style>dan pastekan kode css dibawah ini tepat DIATAS kode tersebut.
/* Popular Post By Jagoan Redesign*/
.popular-posts{background:#fd0000;background-image:linear-gradient(110deg,rgba(255,255,255,.1) 16%,rgba(255,255,255,.1) 17%,rgba(255,255,255,.05) 17%,rgba(255,255,255,.05) 23%,transparent 8.5%,transparent 78%,rgba(255,255,255,.05) 78%,rgba(255,255,255,.05) 84%,rgba(255,255,255,.1) 84%,rgba(255,255,255,.1));box-shadow:0 2px 2px 0 rgba(0,0,0,.04),0 3px 1px -2px rgba(0,0,0,.05),0 1px 5px 0 rgba(0,0,0,.04);transition:all .5s ease;padding:3px 15px 10px;border-radius:7px}.popular-posts ul li a:hover{text-decoration:underline}.PopularPosts h2{border-bottom:none;width:100%;color:#666;text-align:left;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 48.34 4.99' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='%23fd0000' points='27.36 0 48.34 0 45.48 4.99 24.5 4.99 27.36 0'%3E%3C/polygon%3E%3Cpolygon fill='%23657786' points='2.86 0 23.84 0 20.98 4.99 0 4.99 2.86 0'%3E%3C/polygon%3E%3C/svg%3E");height:6px;font-size:1rem;position:relative;margin-top:9px;margin-bottom:15px}.Night .PopularPosts h2 span{background:#202442}.PopularPosts h2 span{background:#ededed;padding-right:10px;top:-10.5px;position:absolute;transition:all .5s ease;cursor:default;font:400 18px 'Google Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Oxygen,Roboto,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Arial,sans-serif}.PopularPosts h2 svg{fill:#fd0000;margin-right:7px;display:inline-block;width:24px;height:24px;background-repeat:no-repeat!important;content:''}@media screen and (max-width:800px){.PopularPosts h2{margin-top:30px}}.PopularPosts .widget-content ul,.PopularPosts .widget-content ul li{margin:0 0;padding:0 0;list-style:none;border:none;outline:0}.PopularPosts .widget-content ul{margin:0;list-style:none;counter-reset:num}.PopularPosts .widget-content ul li img{display:block;width:70px;height:70px;float:left;border-radius:3px 25px}.PopularPosts .widget-content ul li{margin:0;counter-increment:num;position:relative;transition:all .5s ease;border-bottom:1px dashed rgba(255,255,255,.35)}.PopularPosts ul li:last-child{margin-bottom:0}.PopularPosts ul li .item-content::after,.PopularPosts ul li .item-thumbnail-only::after,.PopularPosts ul li>a::after{background:#efefef}.PopularPosts .item-title{line-height:1.6;margin-right:8px;min-height:40px;font-weight:500}.PopularPosts .item-thumbnail{float:left;margin-right:8px}.PopularPosts .item-snippet{line-height:1.6em;margin-top:8px;opacity:.925}.PopularPosts ul li>a{font-weight:700;font-size:14px}.PopularPosts .item-snippet,.PopularPosts .item-thumbnail,.PopularPosts .item-title{margin-left:15px;margin-bottom:9px;margin-top:5px}.PopularPosts ul li>a{display:block;min-height:0;font:400 12px Poppins,-apple-system,BlinkMacSystemFont,'Segoe UI',Oxygen-Sans,'Helvetica Neue',Arial,sans-serif;margin-left:10px}.PopularPosts h2 svg{margin-right:15px;float:left;display:inline-block;width:20px;height:20px;vertical-align:-5px;background-repeat:no-repeat!important;content:''}.PopularPosts ul li:before{content:counter(num) '.'!important;position:absolute;top:10px;left:-2px;color:#fff;z-index:1;width:20px;height:20px;font-family:arial;margin-right:12px;font-size:1.5em;font-style:italic}
5. Setelah itu anda pilih lompat widget cari widget popular post.
Lompat widget

6. Kemudian anda cari kode <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if> silahkan hapus kode tersebut dan ganti dengan kode dibawah ini
<b:if cond='data:title != &quot;&quot;'><h2><span><svg viewBox='0 0 24 24'>
<path d='M16,6L18.29,8.29L13.41,13.17L9.41,9.17L2,16.59L3.41,18L9.41,12L13.41,16L19.71,9.71L22,12V6H16Z'/>
    </svg><data:title/></span></h2></b:if>
7. Kalau sudah silahkan klik SIMPAN dan Selesai.

Contoh untuk Penerapan widget popular postnya seperti dibawah ini.
Contoh untuk Penerapan widget popular postnya

Nah, itu adalah tutorial Cara Membuat Widget Popular Post Keren Seperti Blog Igniel di Blogger semoga totorial bermanfaat bagi anda semua. Jika anda belum paham / masih ada yang error dalam penerapan kodenya, dan ingin  anda tanyakan silakan berkomentar saja di bawah.
Previous
Next Post »
avatar
Penulis Blog dan redesigner template blogger.

Related Posts

Komentar
Tutup Komentar

0

Post a Comment

  • Berkomentarlah secara bijaksana dan bertanggung jawab.
  • Tidak diperbolehkan mempromosikan barang atau berjualan.
  • Tulis komentar Anda untuk hal yang masih berhubungan dengan posting pada halaman ini.
  • Dilarang memuat Link Aktif pada kolom komentar
  • Komentar dengan link aktif akan otomatis dihapus.
  • Jika ingin menulis kode silahkan anda parse terlebih dulu (terutama Javascript dan HTML)
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel