Membuat Related Post Blogspot – Membuat “Baca juga ini”. Hallo sobat usstream, semoga sehat selalu. Mengapa saya membuat post berjudul Cara membuat Baca Juga di tengah postingan blog – blockquote, karena ada cerita dibalik postingan ini ya sobat.
Jadi awal mula saya membuat blog, sebagai bloger pemula, saya selalu mengamati blog orang lain kok sangat rapi tidak seperti blog saya yang acak-acakan alias amburadul, saking seringnya saya mengamati blog orang-orang, saya menemukan link yang berisi tulisan (Baca juga : bla bla bla)
Itu merupakan link atau Anchor Text yaitu suatu link yang mengarah kepada postingan lain, bisa mengarah ke postingan kita atau ke blog milik orang lain, tapi pada beberapa blog saya melihat sesuatu yang berbeda,
Tampilan Achor Text atau tulisan (Baca Juga : bla bla bla) nya itu berbeda, sedikit di modifikasi dengan CSS, namun setelah saya coba cari-cari di google, saya sulit sekali menemukan tutorial tersebut karena saya sendiri tidak tahu nama tulisan seperti itu atau kata kunci untuk pembahasan ini, setelah sekian lama mencari, akhirnya saya menemukan salasatu blog yang membahas artikel ini namun kata kunci nya yaitu Blokquotes,
Ternyata setelah saya cari tahu, blogger atau blogspot menyediakan fitur bloquote yang bisa di modifikasi dengan css, seperti gambar di atas yang saya tandai merah, kalian tinggal block text yang mau kalian buat menjadi blockquote lalu kalian klik tanda petik sperti di atas, maka hasilnya akan menampilan blockquote, wah tanpa pikir panjang saya langsung mencoba nya dan seperti inilah hasilnya
Nah sobat semua sudah lihat sendiri kan hasilnya.
Gimana sih cara buat link (Baca Juga : di tengah postingan wordpress atau blogspot).
Oke kita akan bahas sekarang ya sobat
di sini saya akan menyediakan beberapa pilihan model tampilan blockquote yang akan saya bagikan kepada sobat semua.
Blockquotes css 1
https://1.bp.blogspot.com/–3zIpcEwKoU/V78W65RPt-I/AAAAAAAAAUw/euTCQonbDEsnNaYFc3NPIPkTpubNICJzgCLcB/s1600/CSS%2BBlockquote%2BKeren%2BUntuk%2BBlog.png
maka tampilan nya akan seperti di bawah ini :
sumber gambar : https://veryhandika11.blogspot.com/
Blockquotes css 2
.post blockquote{margin:10px;padding:7px;border:1px solid #19ABEA;border-left:10px solid #19ABEA;border-right:10px solid #19ABEA}
maka tampilan nya akan seperti di bawah ini :
sumber gambar : https://veryhandika11.blogspot.com/
Blockquotes css 3
.post blockquote {margin: 0 20px;padding: 10px 20px 25px 20px;border-left: 10px dotted white;background-color: #f6ebc1;}
maka tampilan nya akan seperti di bawah ini :
sumber gambar : https://veryhandika11.blogspot.com/
Nah gimana bagus kan hasilnya sobat.
Apakah kalian tertarik untuk mencobanya ?
silahkan langsung gunakan saja, jika ada kesempatan, nanti saya akan buatkan lebih banyak desain blockquote nya.
semoga bermanfaat