Cara Membuat Kotak "Artikel Lainnya" di Blogger

Agus Nuri Fadli October 03, 2019 Blogger , Tutorial Comment

Membuat related post atau artikel lainnya dianggap sebagai cara terbaik untuk mempertahankan pengunjung agar tidak segera meninggalkan blog/website kita.

Sebenarnya ada 2 cara untuk membuat kotak artikel terkait, pertama yaitu dengan cara otomatis dan kedua dengan cara manual.

Nah diartikel ini saya akan memberikan tutorial yang manual. Maksudnya adalah kita menambahkan sendiri apa saja artikel terkait yang ingin diikut sertakan dalam postingan tersebut.

>>Langkah-langkah

1. Masuk ke blogger

2. Klik menu themes dan edit html

3. Cari ]]></b:skin> agar lebih cepat gunakan Ctrl+F

4. Masukkan kode CSS dibawah ini tepat diatas ]]></b:skin>

5. Code CSS


/* kotaklink Mulai*/
.kotaklink {background: rgb(246, 247, 249);
    border-top: 7px solid #219FDE;border-bottom: 2px solid #219FDE; /* tebal dan warna garis*/
    margin: 25px 20px 10px 20px;
    padding: 5px 15px 0px 0;
    position: relative;
    color:#383838;}
.kotaklink:before {display: block;border-radius: 5px;content: "Baca Juga"; /* bisa diganti dengan kata yang anda sukai*/
    text-align: center;
    font-size: 16px;width: 130px;
    font-weight: bold;background: #219fde;
    position: absolute;
    border: 2px solid #219fde;left: 25px;top: -20px; /* pengaturan posisi kotak atas*/
    color: #fff;}
.kotaklink cite {text-align: left;color: #999999;
    font-size: 12px;
    display: block;
    margin-top: 5px;}
.kotaklink cite:before {content: "\2014 \2009";}/* costumisasi pada badian bullet*/
.kotaklink ul {padding: 0 0 0 15px;}
.kotaklink ul li {border-bottom:1px dashed #219FDE; /* posisi bullet*/
    line-height:1.75em;
    list-style:none;
    padding: 0 0 0px;}
.kotaklink a:visited {color: #585858;} /* warna link*/
.kotaklink ul li:before{content:'\f138';font-family:fontawesome;position:absolute; /* mengatur bullet dan animasi*/
    margin:0 9px 0 -28px;
    color:#219fde;overflow:hidden;
    transition:all .3s}
.kotaklink ul li:hover:before{content:'\f138';font-family:fontawesome; 
    -webkit-animation:bounceright .3s alternate ease infinite;
    animation:bounceright .3s alternate ease infinite}/* Pengaturan huruf dalam kotak*/
/* kotaklink Selesai*/

6. Jika sudah simpan atau kalian dapat merubah tampilan terlebih dahulu di code CSS tersebut.

>>Cara Penggunaan

Tulis artikel yang kalian inginkan. Jika sudah panggil kotaklink dengan cara menggunakan div class. Perhatikan langkah dibawah ini:
1. Pindah dari Compose ke HTML