Cara Membuat Kotak "Artikel Lainnya" di Blogger - Mas Fadli
News Update
Loading...

Thursday, 3 October 2019

Cara Membuat Kotak "Artikel Lainnya" di Blogger

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

2. Jika sudah panggil dengan script dibawah ini


Untuk menempatannya bebas sesuai keinginan kalian sendiri. Entah itu ditengah artikel, di bawah artikel ataupun di tengah dan bawah artikel.

Share with your friends

Give us your opinion

Notification
Selamat datang di masfadli.com. Semoga apa yang saya tuliskan dapat bermanfaat untu kalian semua. Jika ada kritik dan saran kalian isikan dikolom komentar ya. Selamat membaca.
Done