Cara Membuat Kotak Catatan Di Postingan Blog

RudiEtnovian.Com - Mungkin teman-teman ada yang bingung dengan postingan kali ini. Kotak Catatan yang saya maksud adalah sebuah kotak yang berisi catatan atau hal lain yang dianggap penting untuk diketahui oleh pembaca blog kita.

Penempatannya pun bisa dimana saja tergantung kita mau diletakkan dimana kotak catatan tersebut.

Daripada bingung, langsung saja teman-teman semua melihat previewnya pada kotak Info Penting yang ada di akhir setiap postingan pada blog ini.

Lebih dan kurangnya seperti itulah kotak catatan yang saya maksudkan. Pada blog ini kotak catatan tersebut saya tempatkan di akhir postingan dan muncul di setiap halaman postingan saja.

Kotak catatan yang akan kita tambahkan pada template blog kali ini sangat sederhana tapi tampilannya cukup menarik.

Saya katakan sederhana karena hanya menggunakan kode CSS saja sehingga tidak memberatkan loading blog.

Satu lagi yang perlu di ingat, pastikan terlebih dahulu template yang digunakan sudah mendukung jenis font awesome.

Jika template yang digunakan belum support font awesome, silahkan tambahkan javascript ini tepat di atas kode </head> pada template teman-teman semua.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

Bagi teman-teman yang ingin membuat kotak catatan seperti yang saya maksud di atas, silahkan ikuti beberapa langkah Cara Membuat Kotak Catatan Di Postingan Blog tersebut.

1. Login ke akun blogger.

2. masuk ke menu Template/Tema, klik Edit HTML.

3. Copykan kode CSS di bawah ini tepat di atas kode </head>.

<style type='text/css'>

/*Catatan*/

.catatan {

    text-align: left;

    background: #6591c2;

    position: relative;

    display: block;

    padding: 55px 20px 20px;

    color: #fff;

    margin: 0px 20px 0px 20px;

    border-radius: 3px;

}

.catatan:before {

    position: absolute;

    content: &#39;Info Penting&#39;;

    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;



}

.catatan:after {

    position: absolute;

    content: &#39;\f027&#39;;

    right: 10px;

    bottom: 5px;

    font-family: FontAwesome;

    font-style: normal;

    font-weight: normal;

    font-size: 160%;

    color: rgba(255,255,255,.6);

}

</style> 

4. Lalu tambahkan kode di bawah ini setelah kode <div class='post-footer'>. Setiap template biasanya kodenya akan ada perbedaan, jadi silahkan cari yang semisalnya. Untuk tahap ini perlu dilakukan uji coba sampai kotak tersebut muncul, mengingat kode post footer setiap template ada beberapa perbedaan.

<div class='catatan'><a href='http://www.rudietnovian.com/2013/03/cara-dowload-software-di-revans-blog.html'>Cara Download File di RudiEtnovian.Com</a><br/>

<a href='http://www.rudietnovian.com/2017/02/cara-mengatasi-link-download-yang-nge.html'>Cara Mengatasi Link Download Nge-Blank</a></div>

4. Kalau sudah, silahkan simpan hasil editan template tersebut.

Jika teman-teman ingin merubah tulisan Catatan dengan kata-kata lain sesuai kebutuhan, silahkan cari kode conten:'Catatan'; lalu ganti teks Catatan dengan kata-kata lainnya.

Demikianlah Cara Membuat Kotak Catatan Di Postingan Blog tersebut. Semoga bisa bermanfaat, lebih dan kurang mohon dimaafkan. :)

Postingan ini telah diupdate tanggal 01 Juli 2021