Cara Membuat Kotak Catatan Seo Friendly Pada Postingan Blog
Cara Membuat Kotak Catatan Seo Friendly Pada Postingan Blog - kali ini saya akan berbagi cara membuat kotak blockquote catatan pada postingan blog yang cukup keren. dimana blockquote ini berfungsi untuk memberikan membedakan tulisan biasa dengan tulisan kata dengan kotak css yang lebih menarik, sehingga pembaca pun dapat melihat info penting dalam kotak catatan yang dibuat oleh seorang blogger.
Kotak catatan atau blockqoute ini berfungsi untuk menyisipkan pesan yang akan disampaikan kepada pembaca blog, dimana dengan kotak catatan pembaca dapat melihat dengan jelas pesan yang disampaikan oleh penulis. karena kotak catatan ini menarik pembaca karena menggunakan CSS Style.
Untuk memasangan kotak blockquote ini sangat mudah sekali perlu beberapa langkah untuk memasangnya, seorang blogger pemula pun bisa melakukannya. Karena pemasangan nya tidak terlalu rumit. Langsung saja kita bahas, saya akan membahas secara detail cara membuat kotak catatan style css dengan mudah. baca juga artikel sebelumnya 2 Cara Mengecilkan dan Mengubah Ukuran File Foto Tanpa Aplikasi
Cara Membuat Kotak Catatan/Blockquote Pada Postingan Dengan CSS Style
# Langkah Pertama
Melakukan login terlebih dahulu ke "Blogger" dengan memasukan email dan password.
Kemudian pilih Tema > Edit HTML cari kode </Head> setelah ketemu kode tersebut kemudian Copy/Paste kode script dibawah ini simpan sebelum script tepat diatasnya </Head>
<style type='text/css'>
/*Blockquote Catatan*/
.post-body blockquote {
text-align: left;
background: #6591c2;
position: relative;
display: block;
padding: 55px 20px 20px;
color: #fff;
margin: 10px 0;
border-radius: 3px;
}
.post-body blockquote:before {
position: absolute;
content: 'Catatan';
background: rgba(255,255,255,1);
right: 3px;
left: 3px;
top: 3px;
padding: 5px 20px;
display: block;
font-weight: 700;
border-radius: 3px 3px 0 0;
color: #6591c2;
}
.post-body blockquote:after {
position: absolute;
content: '\f027';
right: 10px;
bottom: 5px;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
font-size: 160%;
color: rgba(255,255,255,.6);
}
</style>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
/*Blockquote Catatan*/
.post-body blockquote {
text-align: left;
background: #6591c2;
position: relative;
display: block;
padding: 55px 20px 20px;
color: #fff;
margin: 10px 0;
border-radius: 3px;
}
.post-body blockquote:before {
position: absolute;
content: 'Catatan';
background: rgba(255,255,255,1);
right: 3px;
left: 3px;
top: 3px;
padding: 5px 20px;
display: block;
font-weight: 700;
border-radius: 3px 3px 0 0;
color: #6591c2;
}
.post-body blockquote:after {
position: absolute;
content: '\f027';
right: 10px;
bottom: 5px;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
font-size: 160%;
color: rgba(255,255,255,.6);
}
</style>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
Keterangan:
#Kalian juga dapat mengganti tulisan Catatan yang diberi warna merah dengan tulisan yang anda ingikan.
#Kalian juga dapat mengganti warna background nya dengan mengganti kode berikut #6591c2 dengan warna yang diinginkan. untuk melihat kode warna anda bisa serching ke mbah google hehe.
#Kalian juga dapat mengganti warna teks "Catatan" atau kode yang diberi tanda merah berikut #6591c2 dengan warna yang diingkan. bisa dilih kode warna nya di google atau searching Generator Kode Warna
#Langkah Kedua
Setelah di Copy/Paste kemudian Simpan Tema. Proses membuat kotak blockquote dengan css style pun selesai dan cukup mudah dipahami. sekarang lihat pada postingan sobat untuk melihat perubahan nya :). Dan dibawah ini adalah catatan/blockquote dengan style CSS.
#Kalian juga dapat mengganti tulisan Catatan yang diberi warna merah dengan tulisan yang anda ingikan.
#Kalian juga dapat mengganti warna background nya dengan mengganti kode berikut #6591c2 dengan warna yang diinginkan. untuk melihat kode warna anda bisa serching ke mbah google hehe.
#Kalian juga dapat mengganti warna teks "Catatan" atau kode yang diberi tanda merah berikut #6591c2 dengan warna yang diingkan. bisa dilih kode warna nya di google atau searching Generator Kode Warna
#Langkah Kedua
Setelah di Copy/Paste kemudian Simpan Tema. Proses membuat kotak blockquote dengan css style pun selesai dan cukup mudah dipahami. sekarang lihat pada postingan sobat untuk melihat perubahan nya :). Dan dibawah ini adalah catatan/blockquote dengan style CSS.
#Langkah Ketiga
Bagaimana cara memasang kotak catatan/blockquote dalam postingan.
Caranya sangat mudah klik Postingan/Halaman kemudian pilih Entri Baru. Kemudian tulisan pesan yang akan disisipkan selanjutnya blok pesan teks tersebut kemudian pilih Quote maka secara otomatis pesan disisipkan tersebut akan berubah menjadi lebih menarik dengan kotak script CSS Style. Jika kurang paham bisa tonton video GIF dibawah ini.
Bagaimana cara memasang kotak catatan/blockquote dalam postingan.
Caranya sangat mudah klik Postingan/Halaman kemudian pilih Entri Baru. Kemudian tulisan pesan yang akan disisipkan selanjutnya blok pesan teks tersebut kemudian pilih Quote maka secara otomatis pesan disisipkan tersebut akan berubah menjadi lebih menarik dengan kotak script CSS Style. Jika kurang paham bisa tonton video GIF dibawah ini.
Sekian Cara Membuat Kotak Catatan Seo Friendly Pada Postingan Blog semoga membantu sobat sekalian, mohon maaf apabila ada kesalahan dalam pengetikan dan terimakasih telah mengunjungi. Apabila sobat ingin bertanya dapat contact saya. Pepatah bilang “Malu bertanya sesat di jalan” jadi jangan malu bertanya ya sobat!!!
Sebelum sobat menutup artikel ini, mohon saran dan komentarnya di kolom komentar apa kekurangan dan kelebihan Cara Membuat Kotak Catatan Seo Friendly Pada Postingan Blog ini ? supaya saya bisa memberikan artikel yang terbaik. Jika sobat merasa artikel ini bermanfaat mohon untuk di share artikel ini “ Ilmu tidak akan hilang apabila di tuliskan dan di amalkan “ Wassalamualaikum Wr.Wb.