Membuat Popular Post Simple tapi Keren - Popular post merupakan widget yang cukup penting dalam blog. Popular post membantu vistor blog untuk mengetahui postingan/artikel yang paling banyak dilihat. Nah, kali ini saya akan membagikan cara membuat popular post simple tapi keren untuk pengguna cms blogger.

Widget postingan populer yang akan saya bagikan di bawah ini desainnya simple tapi keren pastinya. Gambaran popular postnya kurang lebih seperti ini, ketika tampilan biasa, popular post akan menampilkan judul dn thumbnail/gambar postingan saja. Tapi ketika dalam keadaan hover/cursor mouse berada di atas popular post, widget ini akan menampilkan snippet/potongan kalimat yang ada di dalamnya.
Keren bukan?, untuk lebih jelasnya lihat gambar berikut.

Widget popular post tampilan biasa

Tampilan biasa

 

Ketika mouse hover

Tampilan mouse hover

Oh iya, karena desainnya yang simple, widget popular post ini juga tidak memberatkan loading blog loh, sehingga blog bisa tetep keren tanpa mengganggu kenyamanan pengunjung.

Oke, sudah cukup basa-basinya langsung saja simak cara pembuatannya di bawah ini.

• Pertama-tama buat widget popular post seperti biasanya melalui tata letak yaitu, buka dashboard blogger, buka tab tata letak/layout, di bagian sidebar klik add gadget lalu buat widget postingan populer/popular post.

• Atur widget postingan populer/popular post(jumlah post yang ditampilkan, pengaturan waktu, dan lain-lain). Untuk bagian cuplikan/snippet dan thumbnail harus dicentang dua-duanya agar tampilan sesuai gambar di atas, lalu klik save/simpan.

• Selanjutnya masuk ke tab Tema/Theme, lalu klik edit HTML. Setelah masuk ke halaman editor script( yang isinya script-script aneh haha), selanjutnya klik kursor di mana saja di dalam bagian editor, lalu tekan ctrl+f untuk memudahkan mencari kode yang akan kita sisipi script CSS popular postnya.

• Cari tag script <style> kalau tidak ada cari script <b:skin><![CDATA[, biasanya kalau template custom(bukan bawaan blogger) ada tag <style>.

Baca Juga Cara Membuat Author Box Simple dan Responsive

• Copy dan pastekan script css popular post di bawah ini. Pastekan di bawah tag <style> , atau di atas tag </style>. Jika tidak ada tag style, pastekan di bawah <b:skin><![CDATA[ , atau di atas  ]]></b:skin>.

CSS Popular Post Simple Tapi Keren

/* Popular Post */

.PopularPosts img{
    padding-right: 0;
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.1), 0 3px 3px rgba(0,0,0, 0.12);
  }

.popular-posts ul{
    list-style: none;
    padding: 0;
    margin-bottom: 2px;
  }
.popular-posts ul li{
      border-bottom: 1px solid #eee;
      transition: border-bottom 0.8s;
  }
.popular-posts ul li:hover{
      border-bottom: 1px solid #009688;
  }
.popular-posts ul li div div.item-title a{
      color: #009688;
  }
.item-content{
    line-height: 1.3;
  }
.item-thumbnail{
      float: left;
      margin: 0 3% 0 0;
  }
.popular-posts ul li div.item-snippet{
      display : none;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(33, 37, 41, 0.75);
  }
.popular-posts ul li:hover div.item-snippet{
    display : block;
    font-size: 12px;
  }

/* Popular Post End*/

Note :

Edit ringan :

• Jika ingin mengubah warna judul, ganti script warna merah dengan kode warna.
• Jika ingin mengubah warna snippet/cuplikan teks, ganti script warna hijau dengan kode warna.
• Jika ingin mengubah warna garis border di bawah ketika mouse hover, ganti script warna biru dengan kode warna.
• Jika kalian mengerti tentang CSS, kalian boleh mengeditnya sesuka hati.

• Selanjutnya klik simpan/save theme. Taraaa.....popular post simple tapi keren sudah jadi.

Nah di atas sudah saya bagikan tentang cara membuat popular post simple tapi keren. Oke cukup sekian artikel kali ini, jika ada error atau ada yang ingin ditanyakan bisa sampaikan melalui kolom komentar di bawah, terima kasih. Semoga bermanfaat.

Author box seperti masyusuf.com

Membuat Author Box Simple dan Responsive - Author box merupakan bagian penting dari template terutama untuk blog pribadi. Author box berfungsi untuk mengenalkan kepada pengunjung tentang pemilik blog, dan untuk lebih dekat dengan pemilik blog contohnya dalam social media.

Nah, author box yang akan saya bagikan di bawah ini merupakan author box untuk template blogger yang digunakan di blog mas yusuf(masyusuf.com) dan blog ini juga. Desain author box ini berbeda dengan yang lain, karena ini merupakan desain saya sendiri.

Author box ini adalah author box untuk sidebar bukan yang di bawah postingan. Author box ini saya buat dengan desain simple dan responsive. Dalam author box ini yang saya tekankan adalah bagian responsivenya, karena responsive adalah unsur penting dalam template blog. Untuk desainnya, author box ini bisa dibilang sangat simple.

Daripada kebanyakan basa-basi nanti malah basi langsung saja kita ke bagian inti dari cara membuat author box simple dan responsive simak di bawah ini.

Cara Membuat Author Box Simple dan Responsive

1. Pertama-tama kamu masuk ke Dashboard blogger lalu pilih Tata Letak, di bagian sidebar klik Tambah Gadget lalu pilih HTML/Javascript.

2. Setelah pilih HTML/Javascript, isi bagian judul dengan  author, aboutme, atau terserah kamu. Pada bagian konten isi dengan script di bawah ini lalu klik simpan.

Script HTML

<div id="author-box">
    <div class="wrapper-author">
        <div class="label-author">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOFNKVQGWqaTjsRK87LAivJ3X7n-FNku6kFyL3DPmRB6lfBGDea4dsILmxbAstNvTFbiF5yYsXTev9Z3KCRzbB8B5if061xc6vIoJmtbIV2DLughY8CSyjRdkcm5wSZPjo8ICctgpLERo/h120/label-author.png" />
        </div>
        <div id='header-author'>
            <div class="sosmed">
                <a href="Isi dengan link profil Facebook" target="_blank" class="sosmed-fb"><i class='fab fa-facebook-square'/></i></a>
                <a href="Isi dengan link profil instagram" target="_blank" class="sosmed-ig"><i class="fab fa-instagram"/></i></a>
            </div>
            <div class="avatar">
                <img src="Isi dengan link foto author" />
            </div>   
        </div>
        <div id='body-author'>
            <div class="author-name">
                <a href="Isi dengan link social media bisa fb, instagram, dll(pilih salah satu)">Ikhfan Yusuf</a>
            </div>
            <div class="deskripsi">
                <p> <a href='Isi dengan link social media bisa fb, instagram, dll(pilih salah satu)' class='author-deskripsi'>Ikhfan Yusuf Arifin</a> , Isi dengan deskripsi</p>
            </div>
        </div>
    </div>
</div>

Untuk bagian script yang saya beri warna hijau di atas adalah script untuk gambar tulisan author seperti di bawah, jadi jika kamu ingin menghilangkannya tinggal hapus script warna hijau di atas.

Author box bagian label author

3. Oh iya, untuk icon social media di atas saya menggunakan icon fontawesome versi terbaru, jadi kemungkinan belum banyak template yang memakainya. Artinya kamu harus letakan kode di bawah ini. Copy dan pastekan script di bawah tag <head> atau di atas tag penutup </head>.

<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.0.9/css/all.css' integrity='sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1' rel='stylesheet'/> 

4. Apakah sudah?. Tentu belum script di atas baru HTML dan script untuk fontawesome saja, jadi kalau kamu lihat hasilnya pasti berantakan. Kita butuh CSS untuk merapikan dan mendesain author box sesuai keinginan.

5. Selanjutnya kamu ke dashborad blogger, bagian menu Tema lalu klik edit HTML.

6. Setelah kamu masuk bagian editor tema, letakan kursor di mana saja di dalam editor tema, lalu tekan tombol ctrl+f untuk memunculkan kotak search di pojok kanan atas. Hal ini untuk memudahkan kita mencari tag kode tempat kita letakan script cssnya.

7. Oke, sekarang cari tag script <style> kalau tidak ada cari script <b:skin><![CDATA[, biasanya kalau template custom ada tag <style>.

8. Selanjutnya copy dan pastekan script css di bawah ini. Pastekan di bawah tag <style> atau di atas tag </style>.
Jika tidak ada tag style, pastekan di bawah <b:skin><![CDATA[  atau di atas  ]]></b:skin>.

Script CSS

/*----- Author Box -----*/

  #author-box{
    border: 1px solid #eaeaea;
  }
  .label-author img{
    position: relative;
    top: -1px;
    right: -1px;
    float: right;
  }
  .wrapper-author{
    margin-bottom: 10px;
  }
  #header-author{
    background: linear-gradient(148deg, #00BFA5, #A7FFEB 77%, #64FFDA);
  }
  .avatar{
    text-align: center;
    clear: both;
    position: relative;
    top: -25px;
  }
  .avatar img{
    border-radius: 50%;
  }
    .sosmed{
        position: absolute;
        margin: 5px 6px;
  }   
    .sosmed a{
        margin-right: 4px;
  }
    .sosmed a i{
        font-size: 24px;
        color: #fff;
  }

  #body-author{
    margin: 0 10px;
  }
  .author-name{
    text-align: center;
    border-bottom: 1px solid #eaeaea;
    transition: border-bottom 0.8s;
    margin: 10px 0;
  }
  .author-deskripsi{
    color: #009688;
    text-decoration: none;
  }
  .author-name a{
    text-decoration: none;
    font-size: 18px;
    color: #26A69A;
  }
  .author-name:hover{
    border-bottom: 1px solid #009688;
  }
  .deskripsi{
    background: #fff;
    width: 70%;
    margin: 5px auto;
  }
  .deskripsi a{
    transition: color 0.8s;
  }
  .deskripsi a:hover{
    color: rgba(0, 136, 150, 0.7);
  }
  .deskripsi p{
    border-right: 1px solid #009688;
    border-left: 1px solid #009688;
    padding: 0 5px;
    font-size: 13px;
    line-height: 1.3;
    color: rgba(33, 37, 41, 0.75);
  }

9. Terakhir klik simpan template, dan author box sudah jadi.

Kalau kamu ngerti tentang css html, silahkan boleh di custom sendiri sesuka hati. Nah, sudah saya bagikan cara membuat author box simple dan responsive berarti sampai di sini artikel pertama blog bagian kode.
Silahkan bertanya di kolom komentar jika ada pertanyaan atau error, saya akan bantu sebisa saya, karena saya juga masih belajar, terima kasih semoga bermanfaat.