Cara Memasang Kotak Catatan Terbaru di Postingan Blogger

Bisa Oi - Catatan di dalam sebuah postingan blog, biasanya berisikan akan hal penting yang diutarakan pada sebuah kotak diantara paragraf postingan tersebut. Catatan tersebut bersifat penting karena fungsinya sebagai penjelas artikel yang diulas dalam postingan blog tersebut.

Cara Memasang Kotak Catatan Terbaru di Postingan Blogger

Tentunya saat membuat sebuah catatan di postingan blog harus adanya perbedaan dengan paragraf atau teks lain. Sehingga pengunjung dapat lebih mudah melihat atau mengetahuinya.

Banyak sekali desain catatan blog saat ini mulai dari ada yang sangat mencolok terlihat di blog ataupun hanya sekilas saja. Nah kali ini saya akan membagikan sebuah desain baru untuk membuat sebuah catatan di postingan blog dengan tampilan yang menarik.

Pada desain ini memiliki banyak variasi yang dapat kalian pilih untuk di pasang pada salah satu postingan blog. Selain itu, pada catatan ini disertai juga dengan icon yang mempercantik tampilan. Dengan begitu pengunjung akan semakin betah di dalam blog kalian.

Untuk itu ikuti langkah-langkah memasang kotak catatan terbaru di postingan blog kalian pada ulasan berikut ini.

Cara Pasang Kotak Catatan Blogger Terbaru

1. Masuk ke akun Blogger kalian. Setelah itu pilih menu Tema, kemudian klik pada menu Edit HTML.
2. Setelah kalian masuk pada menu edit template blog kalian. Pastikan template blog sudah terdapat kode seperti di bawah ini. Jika belum tersedia, maka letakkan kode tersebut tepat diatas kode </head>.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
atau seperti ini 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
3. Selanjutnya, letakkan kode CSS di bawah ini tepat diatas/sebelum kode </style> atau ]]></b:skin>.

/* MTBOX */ .mtbox{position:relative;border-radius:4px;display:block;font-size:14px;margin:16px 0;padding:12px 24px 12px 60px} .mtbox:before{float:left;font-size:32px; font-family:FontAwesome;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;word-wrap:normal;margin-left:-46px;margin-top:12px} /* MTBOX 1 */ .mtbox1:before{color:#039be5;content:'\f005';} .mtbox1{background:#e1f5fe;color:#0288d1} /* MTBOX 2 */ .mtbox2:before{color:#536dfe;content:'\f0eb';} .mtbox2{background:#e8eaf6;color:#3f51b5} /* MTBOX 3 */ .mtbox3:before{color:#78909c;content:'\f1b0'} .mtbox3{background:#eceff1;color:#546e7a} /* MTBOX 4 */ .mtbox4:before{color:#0f9d58;content:'\f087'} /* MTBOX 5 */ .mtbox5:before{color:#0f9d58;content:'\f00c'} /* MTBOX 6 */ .mtbox6:before{color:#00bfa5;content:'\f19d'} .mtbox6{background:#e0f2f1;color:#00897b} /* MTBOX 7 */ .mtbox7{background:#f3e5f5;color:#9c27b0} .mtbox7:before{color:#d500f9;content:'\f031'} /* MTBOX 8 */ .mtbox8:before{color:#ff6e40;content:'\f06a'} .mtbox8{background:#fff3e0;color:#dd2c00} /* MTBOX 9 */ .mtbox9:before{color:#dd2c00;content:'\f088'} /* MTBOX 10 */ .mtbox10:before{color:#dd2c00;content:'\f05e'} /* Close Button */ .tutup{position:absolute;top:5px;right:5px;width:17px;height:17px;line-height:20px;text-align:center;font-size:24px;font-weight:500;opacity:.3;cursor:pointer} .tutup b,.tutup a{font-weight:500;} .tutup:hover{opacity:1} .tutup:focus,.tutup:active{outline:0} /* Note Icon Animation on Hover */ .mtbox1:hover:before,.mtbox2:hover:before,.mtbox3:hover:before,.mtbox4:hover:before,.mtbox5:hover:before,.mtbox6:hover:before,.mtbox7:hover:before,.mtbox8:hover:before,.mtbox9:hover:before,.mtbox10:hover:before{-webkit-animation:flash 1s linear 1s infinite normal;animation:flash 1s linear 1s infinite normal}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}
4. Simpan template kalian.

Cara Menerapkan di Postingan Blogger

Setelah kalian memasang pada template blog kalian, maka selanjutnya ialah menerapkannya pada postingan blog yang sudah kalian buat. Untuk penerapannya pada postingan di tambahkan kode di bawah ini pada tab HTML bukan Compose.

<div class="mtbox mtbox#">

...letakan teks sobat disini...

</div>
Jika kalian ingin menerapkan tombol close juga maka kalian gunakan kode di bawah ini.

<div class="mtbox mtbox#">
...teks disini...
<div aria-label='Close Note' class='tutup'
onclick='this.parentElement.style.display=&quot;none&quot;'
role='button' tabindex='0'>&times;</div>
</div>
Perhatian :
Ganti kode # dengan angka 1-10 sesuai dengan desain tampilan yang dapat kalian lihat pada gambar di bawah ini.

Cara Memasang Kotak Catatan Terbaru di Postingan Blogger


Demikian cara memasang kotak catatan terbaru di postingan Blogger. Ikuti langkah-langkah tersebut dengan baik, agar kalian dapat memperoleh hasil yang terbaik. Terima kasih, semoaga bermanfaat bagi kalian semua.

Post a Comment

0 Comments