Cara Membuat Kotak Catatan Blockquote Keren Pada Blog
Cara Membuat Kotak Catatan Blockquote Keren Pada Blog - Hay jumpa lagi dengan Blog Mas Newbie. Kali ini Mas Newbie akan kasih sedikit Tutorial tentang Cara Membuat Kotak Catatan Blockquote Keren Pada Blog. Mungkin ini tidak terlalu penting bagi Blog tetapi apa salahnya kita coba, cara ini juga sering di gunakan para master Blogger. Contohnya seperti arlina design, Mas Tamvan, dan para master Blogger lainya.
Memang sih Tutorial ini udah banyak di Google tapi karena teman saya meminta untuk di buatkan Tutorial ini. Ya mumpung saya lagi gak ada kerjaan ya saya sempatkan untuk membuat Tutorial ini. Ok baiklah langsung saja kalian ikuti step By step Tutorial ini.
Memang sih Tutorial ini udah banyak di Google tapi karena teman saya meminta untuk di buatkan Tutorial ini. Ya mumpung saya lagi gak ada kerjaan ya saya sempatkan untuk membuat Tutorial ini. Ok baiklah langsung saja kalian ikuti step By step Tutorial ini.
Cara Membuat Kotak Catatan Blockquote Keren Pada Blog
- Masuk ke akun Blogger.
- Silahkan Klik Template / Tema, Silahkan kalian backup Template terlebih dahulu untuk menghindari hal-hal yang tidak diinginkan.
- Jika sudah silahkan klik Edit HTML.
- Carilah kode </head> Kemudian letakkan kode CSS berikut diatas kode </head>
- Kemudian simpan Template.
.post-body blockquote {
text-align: left;
background: #3cc091;
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: #3cc091;
}
.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);
}
Kalian bisa mengganti kode warna yang saya tandai dengan warna Anda sendiri, Dan jika ikon tidak tampil bisa tambahkan kode berikut diatas </head>.Silahkan tes dengan membuat postingan baru. Jika belum tahu cara menerapkannya silahkan ikuti langkah-langkah berikut.<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
Cara Menerapkan Kode Blockquote
- Buat postingan baru dengan tulisan yang Anda ingin kan.
- Kemudian Block semua tulisan tersebut.
- Jika sudah di Block klik ikon kutip seperti gambar diatas.
- Ganti yang saya tandai dengan catatan Anda.
- Selesai dan publikasikan.
- Dan lihat hasilnya..
Jika ingin memasukan melalui mode HTML masukan kode berikut.<blockquote class="tr_bq">lorem ipsum</blockquote>
Wih Patut dicoba nih :D thx infonya
ReplyDeleteTrims kak html-nya, bagus biar artikel kita jadi nggak keliatan sepi yaa
ReplyDeletegk sengaja nemu artikel ini, yaudah sekalian mampir dah :D kebetulan ane lg nyari tutorialnya :v
ReplyDelete