Membuat Kotak Baca juga Pada Blog



Hai sahabat blogger! hari ini saya akan memberikan sedikit tutorial  buat temen2 tentang bagaimana membuat kotak Baca juga. Perlu diingat Bahwasanya Kotak baca juga berfungsi untuk menampilkan artikel menarik tentang blog  anda yang nantinya akan meningkatkan pengunjung pada blog anda. Penasaran kan bagaimana membuatnya ? Berikut contoh dari kotak tersebut Dan langkah-langkah membuatnya.



1. Masuk ke blog anda lalu pilih TEMPLATE dan EDIT TEMPLATE
2 Cari tag </body> untuk memudahkan silahkan anda tekan CTRL dan F secara bersamaan.
3. Jika sudah Ketemu Copy script Dibawah Ini



/* 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: "Tahukah Kamu?"; /* 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*/

4. Setelah anda copy Script diatas silahkan masukan tepat diatas </body>
5. Simpan template. Kemudian untuk memanggil kotak script Anda Bisa menggunakan Script dibawah ini


<div class="kotaklink">
<ul>
<li><a href="https://www.banyuwangikreatif.com/2019/01/penyebab-penyimpanan-hampir-habis-dan.html">PENYEBAB PENYIMPANAN HAMPIR PENUH J2 PRIME</a></li>
<li><a href="https://www.banyuwangikreatif.com/2019/01/mengatasi-masalah-penyimpanan-hampir.html">MENGATASI PENYIMPANAN HAMPIR PENUH</a></li>
<li><a href="https://www.banyuwangikreatif.com/2019/01/whatsapp-eror-mengatasi-masalah.html">MENGATASI WA  JAM & TANGGAL TIDAK AKURAT</a></li>
</ul>
</div>

6. Setelah anda copy script diatas silahkan masukan pada postingan dengan mode HTML.Silahkan ganti Teks berwarna merah dengan link artikel sobat dan tulisan berwarna biru  sesuai judul postingan anda.
7. untuk penempatan bisa sesuai keinginan anda. berikut contoh dari hasil kotak baca juga.


0 Response to "Membuat Kotak Baca juga Pada Blog"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel