Site Info


Template

Membuat Blockquote Info, Tips, dan Larangan Pada Blogger

Posted by Unknown on 4/15/2014 No comments

Membuat Blockquote Info, Tips, dan Larangan Pada Blogger
Membuat Blockquote Info, Tips, Dan Larangan Pada Blogger- Pada postingan pertama saya tentang blocqkuote, kita membuat blockquote yang tampil polos, hanya kata-kata saja. Bagaimana jika sekarang kita membuat blockquote yang dilengkapi dengan simbol info, tips, dan larangan untuk blogger? Tentu ini akan menjadi pemandangan yang menarik bagi blog Anda dan kita semua.

Manfaat dan keuntungan membuat blockquote ini adalah, kita jadi dapat memberitahukan kepada pengunjung blog secara lebih fokus pada hal yang kita anggap sangat penting, seperti misalnya penggunaan blockquote larangan, " Jangan gunakan banyak keyword dalam meta description..!" dan seterusnya. Sehingga kita dapat membuat fokus pengunjung beralih kepada blockquote yang akan kita buat. Untuk demo-nya, lihat blockquote info, tips dan larangan pada blogger dibawah ini:

Contoh blockuote info pada blogger
Contoh blockuote tips pada blogger
Contoh blockuote larangan pada blogger


Bagaimana? Dengan blockuote tersebut, pengunjung akan lebih terfokus kepada tulisan yang kita anggap penting, bukan? Nah, untuk membuatnya sebenarnya mudah, Anda cukup ikuti langkah-langkah berikut:

1. Pada dasbor, pindah ke Template.

2. Pilih Edit HTML.

3. Cari kode]]></b:skin>. Untuk mempermudah tekan Ctrl+F.

4. Letakkan kode berikut tepat diatas kode ]]></b:skin>.
.info, .tips, .warning {
 line-height: 22px;
 min-height: 38px;
 padding: 10px 12px 12px 68px;
 margin: 5px 0;
}
.info {
 background: #e0e5eb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGW4LUYCgIxqind-TJ8a7UZpMnO7j-MsUP_Ipn85JZyz1y0okzWDuyGCnJ8_REuuDky-7t5l0yI7WRlrFKcff8ZdortY-YnXfzt-dLoCaNWOtdK4xfuWOAUr-fcTb1VOMZEKmnWbM3hg/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifweDKc7soay2xKy-Rwbe1GY48i_rGYV0iilu7-Gfmt5bo2F0DfUiDOzGhspGefKoHDGzRWacaH-htkA0dMLIMjgIDher_bPw8b4dmCpKKkd6ZWNXRy-7xwlG1FoVlNothcjmnitZpVg/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvEjZjwaqGSGZzBXbY_0XeApT7P6awglOmpAoxjonMwPrnl6hW3toaInQqZOrPs9Pj0QDKxdUaFH8snjuLbksCrKzU9yckVsvdCQHzG-RGJA9ECl6u0wHC2K1YthmXSSqP5D5HtFX4-Q/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
}
5. Simpan Template.

Untuk memasang blockquote pada postingan blogger, buat postingan baru atau edit postingan yang lama, kemudian copy kode berikut pada mode HTML.

Untuk blockquote info:
<div class='info'>
Contoh blockuote info pada blogger
</div>
Untuk blockquote tips:
<div class='tips'>
Contoh blockuote tips pada blogger
</div>
Terakhir, untuk blockquote larangan:
<div class='warning'>
Contoh blockuote larangan pada blogger
</div>
Setelah itu, publikasikan artikel yang telah Anda tambahkan dengan kode blockquote.
Anda juga dapat menggunakan kode tag p untuk membuat blockquote ini. Contoh: <p class='tips'>
Contoh blockuote info pada blogger
</p>

Tags

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis nulla at odio vestibulum, ut accumsan mauris venenatis. Fusce metus nisl, lacinia at elit eget,
Facebook
Google+
Linkedin
Pinterest
Delicious

0 komentar

Silakan berkomentar dengan bahasa yang baik dan benar. Komentar yang mengandung bahasa kasar, SPAM, dan SARA tidak akan dibalas dan akan ditaruh dalam folder SPAM. Blog ini menerapkan fitur moderasi komentar. Dilarang menyertakan link hidup atau mati serta bentuk promosi lainnya. Terima kasih.