√ Membuat Box Catatan atau Informasi Keren di Blogger - Aries myid Membuat Box Catatan atau Informasi Keren di Blogger

Membuat Box Catatan atau Informasi Keren di Blogger

Membuat blog kita semakin menarik merupakan sebuah hal yang dikategorikan wajib tidak wajib sih (kalo menurut saya pribadi) tetapi banyak yang berpendapat bahwa semakin menarik tampilan blog kita makan semakin membuat pengunjung betah atau penasaran. ada yang berpendapat juga bahwa tak penting juga tampilan blog yang paling terpenting adalah konten. nah entah kamu memegang pendapat mana tapi kalo saya sih dua duanya juga penting. 

Nha disini saya kan memberikan tutorial bagaimana cara membuat kotak catatan yang keren bingit pisan. sebenarnya kotak catatan ini tujuannya untuk apa sih? ternyata banyak manfaat. tapi yang paling inti fungsinya adalah memritahukan informasi (higlight) yang paling penting. untuk membuat kotak catatan yang responsive berikut saya berikan tutorial mengenai cara membuat kotak catatan yang Keren, Elegan dan Responsive dilengkapi dengan icon dan animasi. 

Box Catatan Keren

  • Silahkan buka dashboard blogger anda kemudian pilih tema dan edit HTML kemudian letakan kode Css berikut di bawah ini di atas ]]></b:skin> atau </style>

/* Box Catatan */
.notes{position:relative;border-radius:4px;display:block;font-size:14px;margin:16px 0;padding:12px 24px 12px 60px} .notes:before{float:left;font-size:30px; font-family:FontAwesome;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;word-wrap:normal;margin-left:-46px;margin-top:3px}
.good:before{color:#21a796;content:'\f087';} .good{background:#cfffe6;color:#565656}
.bad:before{color:#f95060;content:'\f088';} .bad{background:#f9bfc5;color:#565656}
.info:before{color:#2387c1;content:'\f06a';} .info{background:#c8d9e2;color:#565656}
.ceklis:before{color:#1aa687;content:'\f00c';} .ceklis{background:#6dedd0;color:#565656}
.warning:before{color:#f63a50;content:'\f00d';} .warning{background:#fb818f;color:#fff}
.quote:before{color:#f7871a;content:'\f10d';} .quote{background:#f5b474;color:#fff}
.kuning:before{color:#969696;content:'\f0c1';} .kuning{background:#f5f68e;color:#565656}
/* Anamasi Icon*/
.good:hover:before,.bad:hover:before,.info:hover:before,.ceklis:hover:before,.warning:hover:before,.quote:hover:before,.kuning:hover:before,.notes8:hover:before,.notes9:hover:before,.notes10:hover:before{-webkit-animation:ripple 0.65s linear;-moz-animation:ripple 0.65s linear;-ms-animation:ripple 0.65s linear;-o-animation:ripple 0.65s linear;animation:ripple 0.65s linear}@keyframes ripple{100%{opacity:0;transform:scale(2.5)}}
Setelah itu silahkan save template anda

  • Untuk menggunakan kotak catatan tersebut silahkan penulisannya dalam postingan anda dengan mode HTML, ingat HTML bukan mode compose, dan berikut code scripnya

<div class="notes good">Ini contoh blockquote good</div>
<div class="notes bad">Ini contoh blockquote bad its</div>
<div class="notes info">Ini contoh blockquote info</div>
<div class="notes ceklis">Ini contoh blockquote ceklis</div>
<div class="notes warning">Ini contoh blockquote warning</div>
<div class="notes quote">Ini contoh blockquote quote</div>
<div class="notes kuning">Ini contoh blockquote Warna kuning</div>

Untuk previewnya bisa dilihat dari gambar di bawah ini

 

Apabila Icon tidak muncul pastikan anda sudah menmepelakan script fontawesome di tema anda, jika belum maka hasilanya icon tidak akan terbaca. nah demikianlah cara membuat kotak catatan yang keren dan responsive semoga bermanfaat bagi anda.

Ariez MyId

Blog Pendidikan, Tips dan Tutorial about.me/ariez

1 Komentar

Lebih baru Lebih lama