Cara Membuat Blok Catatan di Blog Seperti KompiAjaib

Cara Membuat Blok Catatan di Blog Seperti KompiAjaib - Kalau masalah desain KompiAjaib memang keren. Dan oleh sebab itu saya merasa iri dengan widget yang satu ini. Nah bagi kalian yang ingin menggunakannya ikuti tutorial di bawah ini;

DEMO

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue. (Pendek)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue. (Panjang)

Cara Membuat Blok Catatan Seperti KompiAjaib:

Karena blok catatan ini menggunakan Font Awesome maka pasang dulu CSS di bawah ini, tepat di atas kode </head> di Template.

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

Jika CSS di atas sudah dipasang jangan di pasang lagi.
Nah saatnya untuk praktek.
1. Kunjungi blogger.com
2. Klik Template > Edit Template, kemudian letakan kode di bawah ini tepat di atas kode ]]></b:skin> atau </style>.

 .media_info{font-size:16px;font-family:'Open Sans',sans-serif;line-height:1.5em;margin:20px 0;padding:10px 10px 10px 50px;color:#666;background-color:#FED980;border:3px dashed #222;position:relative;
}
.media_info2{font-size:16px;font-family:'Open Sans',sans-serif;line-height:1.5em;margin:20px 30px 20px 60px;padding:10px 10px 10px 50px;color:#666;background-color:#FED980;border:3px dashed #222;position:relative;
}
.media_info:before,.media_info2:before{content:"\f05a";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;color:#666;font-size:40px;padding-right:.5em;position:absolute;top:50%;margin-top:-13px;left:10px;
}
.media_info a,.media_info2 a{color:#000;font-weight:600;position:relative;padding-right:20px;display:inline-block;
}
.media_info a:before,.media_info2 a:before{content:"\f08e";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;color:#666;position:absolute;bottom:0;right:0;
}
.media_info a:hover,.media_info2 a:hover{color:#666;
}

2. Simpan Template
3. Selanjutnya jika Anda ingin memasangnya di postingan atau halaman. Silakan paste kode di bawah ini di Mode HTML.
Jika ingin yang pendek seperti DEMO pertama, copy yang ini:

<div class="media_info2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue. (Pendek)</div>

Jika ingin yang lebih panjang seperti DEMO kedua copy yang ini:

<div class="media_info2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue. (Panjang)</div>

Ganti kode yang berwarna biru dengan teks yang akan Anda isi di Blok Peringatan
4. Simpan
Anda juga bisa memasang Blok Peringatan ini di Widget HTML/JavaScript dengan cara tinggal copy kode nomor 3.
Demikian postingan kali ini semoga bermanfaat.