Home Blogger

Cara Membuat Box Baca Juga Keren Di Postingan Blogger


Halo pada kesempatan kali ini saya akan memberikan cara membuat kotak atau box baca juga pada sebuah postingan di blogger.

Hal seperti ini sebenarnya sering kita lihat pada artikel di blog orang lain, saat di tengah tengah artikel pasti akan ada sebuah paragraph khusus untuk mempromosikan artikel lain yang terdapat pada blog tersebut. Sebenarnya tidak perlu repot repot untuk membuat hal tersebut, nyatanya kita hanya tinggal memasukan link yang di arahkan pada setiap postingan.

Tetapi jika kita melakukan cara yang biasa biasa saja, akan terlihat tidak menarik dan kurang enak dipandang. Untuk mencegah hal itu, maka kita harus lebih memperhatikan tampilan box nya, karena itu akan sangat berpengaruh untuk pembaca agar melihat postingan kita yang lainya.

Desain box yang saya bagikan ini cukup simple dan minimalis. Dengan desain yang memadai, para pembaca sudah pasti akan tertarik dengan box tersebut.

Fungsi dari kotak baca juga ini singkatnya hanya untuk mempromosikan artikel yang sudah kita buat pada postingan yang lain. Apalagi jika setiap postingan yang dimiliki mempunyai beberapa sesi atau part, dengan adanya box baca juga, maka itu akan sangat membantu bagi para pembaca untuk beralih ke sesi sebelum atau sesudahnya. Yang namanya promosi, sudah pasti kita akan melakukan segala cara agar menarik minat pembaca.

Untuk cara penggunaanya sangat mudah dan sederhana, disini saya akan membagikan 2 cara untuk menggunakan box baca juga pada sebuah postingan. Untuk lebih lanjutnya silahkan simak langkah berikut :

Pertama tama silahkan anda copy script css berikut ini :

/* Kotak Baca Juga By Idnetzen */ #idnetzen-cont{ padding:10px; position:relative; font-family:sans-serif; } .idnetzen-box-bj { border: 1px solid #000; width:auto; height:auto; border-radius: 8px; margin-top: 6px; padding:15px; padding-top:30px; } .idnetzen-head { padding: 7px 20px; border: 1px solid #000; position: absolute; left: 31px; top: 0px; border-radius: 6px; background-color: white; font-family: sans-serif; } .idnetzen-box-bj ul li a{ text-decoration:none; } .idnetzen-box-bj ul li{ line-height:25px;

Setelah di copy, silahkan anda masuk ke menu Tema, Edit Html, lalu cari kode </style>. Untuk memudahkan pencarian, gunakan CTRL+F pada keyboard. Lalu paste kode css tersebut di atas kode </style>. Untuk lebih jelasnya lihat gambar berikut.




Setelah itu, save tema.

Yang ke dua silahkan masuk ke postingan sobat, lalu ubah mode menulis menjadi mode html terlebih dahulu.

Selanjutnya copy script html di bawah ini.

<div id="idnetzen-cont"> <div class="idnetzen-head"><span>Baca Juga<span></div> <div class="idnetzen-box-bj"> <ul> <li> <a href="#">Judul Postingan </a> </li> <li> <a href="#"> Judul Postingan </a> </li> <li> <a href="#"> Judul Postingan </a> </li> </ul> </div> </div>

Paste kan script html nya di tengah tengah postingan yang anda punya. ( tersera dimana saja sesuai selera )

Keterangan Kode :

<a href="#"> Judul Postingan </a>

Ganti tanda # dengan url postingan yang ingin anda terapkan
Ganti kata “Judul Postingan ” dengan judul postingan yang anda punya
Silahkan Publikasikan postingan anda, dan Selesai.

Maka tampilanya akan seperti berikut :




BANZAI! Akhirnya blog anda bisa terlihat seperti web profesional. 
Komentar
Postingan Lebih Baru
Postingan Terbaru