Cara Membuat Kotak Catatan Seo Friendly Pada Postingan Blog
Cara Membuat Kotak Catatan Seo Friendly Pada Postingan Blog - kali ini saya akan membuatkan cara menciptakan kotak blockquote catatan pada postingan blog yang cukup keren. dimana blockquote ini berfungsi untuk menawarkan membedakan goresan pena biasa dengan goresan pena kata dengan kotak css yang lebih menarik, sehingga pembaca pun sanggup melihat isu penting dalam kotak catatan yang dibentuk oleh seorang blogger.
Kotak catatan atau blockqoute ini berfungsi untuk menyisipkan pesan yang akan disampaikan kepada pembaca blog, dimana dengan kotak catatan pembaca sanggup melihat dengan terang pesan yang disampaikan oleh penulis. alasannya ialah kotak catatan ini menarik pembaca alasannya ialah memakai CSS Style.
Untuk memasangan kotak blockquote ini sangat gampang sekali perlu beberapa langkah untuk memasangnya, seorang blogger pemula pun sanggup melakukannya. Karena pemasangan nya tidak terlalu rumit. Langsung saja kita bahas, saya akan membahas secara detail cara menciptakan 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 isyarat </Head> setelah ketemu isyarat tersebut kemudian Copy/Paste isyarat script dibawah ini simpan sebelum script sempurna 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 sanggup mengganti goresan pena Catatan yang diberi warna merah dengan goresan pena yang anda ingikan.
#Kalian juga sanggup mengganti warna background nya dengan mengganti isyarat berikut #6591c2 dengan warna yang diinginkan. untuk melihat isyarat warna anda sanggup serching ke mbah google hehe.
#Kalian juga sanggup mengganti warna teks "Catatan" atau isyarat yang diberi tanda merah berikut #6591c2 dengan warna yang diingkan. sanggup dilih isyarat warna nya di google atau searching Generator Kode Warna
#Langkah Kedua
Setelah di Copy/Paste kemudian Simpan Tema. Proses menciptakan kotak blockquote dengan css style pun simpulan dan cukup gampang dipahami. kini lihat pada postingan teman untuk melihat perubahan nya :). Dan dibawah ini ialah catatan/blockquote dengan style CSS.
#Kalian juga sanggup mengganti goresan pena Catatan yang diberi warna merah dengan goresan pena yang anda ingikan.
#Kalian juga sanggup mengganti warna background nya dengan mengganti isyarat berikut #6591c2 dengan warna yang diinginkan. untuk melihat isyarat warna anda sanggup serching ke mbah google hehe.
#Kalian juga sanggup mengganti warna teks "Catatan" atau isyarat yang diberi tanda merah berikut #6591c2 dengan warna yang diingkan. sanggup dilih isyarat warna nya di google atau searching Generator Kode Warna
#Langkah Kedua
Setelah di Copy/Paste kemudian Simpan Tema. Proses menciptakan kotak blockquote dengan css style pun simpulan dan cukup gampang dipahami. kini lihat pada postingan teman untuk melihat perubahan nya :). Dan dibawah ini ialah catatan/blockquote dengan style CSS.
#Langkah Ketiga
Bagaimana cara memasang kotak catatan/blockquote dalam postingan.
Caranya sangat gampang klik Postingan/Halaman kemudian pilih Entri Baru. Kemudian goresan pena pesan yang akan disisipkan selanjutnya blok pesan teks tersebut kemudian pilih Quote maka secara otomatis pesan disisipkan tersebut akan berkembang menjadi lebih menarik dengan kotak script CSS Style. Jika kurang paham sanggup tonton video GIF dibawah ini.
Bagaimana cara memasang kotak catatan/blockquote dalam postingan.
Caranya sangat gampang klik Postingan/Halaman kemudian pilih Entri Baru. Kemudian goresan pena pesan yang akan disisipkan selanjutnya blok pesan teks tersebut kemudian pilih Quote maka secara otomatis pesan disisipkan tersebut akan berkembang menjadi lebih menarik dengan kotak script CSS Style. Jika kurang paham sanggup tonton video GIF dibawah ini.
Sekian Cara Membuat Kotak Catatan Seo Friendly Pada Postingan Blog supaya membantu teman sekalian, mohon maaf apabila ada kesalahan dalam pengetikan dan terimakasih telah mengunjungi. Apabila teman ingin bertanya s
Caranya sangat gampang klik Postingan/Halaman kemudian pilih Entri Baru. Kemudian goresan pena pesan yang akan disisipkan selanjutnya blok pesan teks tersebut kemudian pilih Quote maka secara otomatis pesan disisipkan tersebut akan berkembang menjadi lebih menarik dengan kotak script CSS Style. Jika kurang paham sanggup tonton video GIF dibawah ini.
Sumber https://www.sobathusen.com/
Sekian Cara Membuat Kotak Catatan Seo Friendly Pada Postingan Blog supaya membantu teman sekalian, mohon maaf apabila ada kesalahan dalam pengetikan dan terimakasih telah mengunjungi. Apabila teman ingin bertanya sanggup contact saya. Pepatah bilang “Malu bertanya sesat di jalan” jadi jangan aib bertanya ya sobat!!!
Sebelum teman 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 sanggup menawarkan artikel yang terbaik. Jika teman merasa artikel ini bermanfaat mohon untuk di share artikel ini “ Ilmu tidak akan hilang apabila di tuliskan dan di amalkan “ Wassalamualaikum Wr.Wb.
Sumber https://www.sobathusen.com/
