kLAfYOEsUwKWcZE5EN4T8XHN0KE0jykePDkZX1nb
Cara Membuat Kotak Baca Juga di Blogger

Cara Membuat Kotak Baca Juga di Blogger

Pada kesempatan kali ini Admin Yuu-kun sesekali mau membagikan tutorial tentang blogging nih! Di artikel ini saya akan membagikan cara membuat kotak baca juga atau yang kita kenal dengan artikel terkait di dalam postingan blog yang secara manual dangan menggunakan kode CSS.

Sebenarnya cara ini sudah banyak dibahas oleh para blogger, yaitu cara membuat kotak baca juga otomatis dengan menggunakan kode Javascript, yang dimana akan muncul link artikel didalam semua postingan blog.

Tetapi ada beberapa yang tidak telalu suka dengan cara itu termasuk saya sendiri. Cara tersebut dapat memperlambat loading blog karena menggunakan Javascript didalam template dan terkadang bisa juga link yang muncul tidak sesuai dengan topik pembahasan dalam postingan kita, dengan kata lain tidak Relevan.

Seperti yang kita tahu bahwa Robot Google lebih suka dengan artikel yang relevan atau nyambung dengan isi artikel postingan yang sedang dibahas sekarang. Nah, karena itu saya akan membagikan cara membuat artikel terkait dengan menggunakan css, supaya loading blog tidak berat dan untuk penerapannya yaitu secara manual didalam artikel. Agar sesuai dengan topik yang sedang dibahas diartikel tersebut.

Cara Membuat Artikel Terkait (Baca Juga) dengan Garis Samping

Di sini saya sudah menggunakan tampilan blogger terbaru ia, bila kamu masih menggunakan tampilan blogger lama bisa kamu sesuaikan sendiri. Langsung saja simak langkah-langkahnya dibawah ini.

Langkah Pertama - Buka HTML Blog
Untuk kangkah pertama, kamu harus membuka html template blog. Caranya buka akun Blogger, pilih menu Tema, pilih Titik 3 dibagian pojok kanan layar, lalu pilih Edit HTML.

Langkah Kedua - Menyimpan Kode CSS
Selanjutnya salin kode css yang saya bagikan dibawah ini kedalam template blog, yaitu tepatnya di atas bagian kode ]]></b:skin> atau </style>

.bluebox{padding:10px;font-size:14px;line-height:1.5;background:rgba(186,208,228,.37);border-radius:4px;border-left:4px solid;color:#000;border-color:#3b5998}

Langkah Ketiga - Simpan Perubahan
Di langkah terakhir yaitu simpan perubahan pada template untuk menyimpan kode css diatas.

Keterangan :
NamaKeterangan
rgba(186,208,228,.37)Warna Background
#000Warna tulisan (text)
#3b5998Warna Border samping

Cara Menerapakan di Dalam Postingan

Untuk penerapan ke dalam artikel sangatlah mudah yaitu dengan menyalin kode css dibawah ini kedalam artikel pada mode penulisan HTML (bukan Compose).

<div class="bluebox"><b>Baca Juga</b>: <a href="Link-Artkel" target="_blank" title="Judul-Artikel">Judul-Artikel</a></div>

Keterangan :
NamaKeterangan
Baca JugaBisa kamu ganti dengan keinginan
Link-ArtikelGanti dengan link artikel blog
Judul-ArtikelGanti dengan Judul artikel serta title tag

Hasil nya akan seperti dibawah ini:


*****
Itulah cara membuat kotak baca juga atau artikel terkait didalam postingan dengan menggunakan css. Semoga artikel ini bermanfaat dan selamat mencoba.
SHARE

Related Posts

Subscribe to get free updates

Posting Komentar

Iklan Tengah Post