بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
BOX CATATAN berada dibawah postingan blog. Item yang sering ada di postingan blog ini dimaksudkan untuk menaruh kata-kata mutiara dari para penulis artikel di blognya. Tapi tidak cuma itu saja, tapi isi dari Box Catatan itu juga dapat diisi dengan Kutipan Pengumuman dari Admin Blog. Sehingga dengan adanya box catatan ini, maka setiap visitor yang setelah membaca artikel langsung bisa membaca kutipan box catatan yang ada dibawahnya. Penempatan dibawah postingan ini dirasa pas dengan standar penulisan kutipan, meski terkadang ada juga yang terselip diantara tengah-tengah postingan.
Sebagai penghias dari artikel tentu saja kehadiran Box Catatan ini penting tidak penting. Bagi yang memerlukan kutipan khusus, maka kehadirannya menjadi sangat penting. Begitu juga sebaliknya, bagi yang tidak memerlukannya, maka cukup dengan artikel yang diposting saja sudah cukup. Sekiranya memang membutuhkan, mereka para blogger pasti sudah menghias bentuk quote ini menjadi menarik dengan desain yang beraneka ragam dan warna warna yang menghiasi backgroundnya. Bentuk juga menyesuaikan, ada yang persegi panjang dengan sudut lancip tapi ada juga yang persegi panjang dengan sudut tumpul. Tinggal pilih yang mana?
Baca Juga :
Saya juga memakai model beginian tapi dulu waktu blog ini masih awal dibuat. Tetapi setelah agak kemari, model beginian saya hilangkan. Ya memang tidak diperlukan lagi untuk saya ya mau bagaimana lagi. Tapi bila nanti saya memerlukan pasti akan saya pasang Box Catatan ini dibawah artikel di setiap postingan. Bukan berarti saya memasang satu persatu, tapi secara otomatis terpasang dengan sendirinya. Tinggal kita bubuhkan kata-kata manis atau kata mutiara di dalamnya saja. Dan view dari ini sudah terlihat bagus dan menarik dipandang mata. Kalau kalian ingin memasangnya akan saya pandu dengan tutorial yang akan saya sampaikan dibawah ini.
Tapi seperti biasa sebelum melakukan editing pada template, karena ini nanti masuknya ke template blog maka kalian harus membackup dulu templatenya sehingga kalau ada apa-apa di tengah jalan akan bisa dikembalikan seperti semula. Jangan lupa ya membackup template. Sudah siap ya sekarang. Oke kita mulai saja tutorialnya dan akan kita praktekkan nanti. Saksikan dengan seksama.
Cara Membuat Box Catatan Kutipan Quote dibawah Postingan
1. Seperti biasa masuk ke Dashboard Blogger
2. Kemudian klik Tema
3. Lalu pilih Sesuaikan Edit HTML
4. Cari kode ]]></b:skin> dan tempelkan kode dibawah ini persis diatas kode ]]></b:skin>
/* 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}
/* Animasi 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)}}5. Kemudian setiap kali membuat artikel maka untuk kutipannya harus memenuhi kaidah seperti berikut.
<div class="notes good">Kutipan kalian tulis disini</div>
<div class="notes bad">Kutipan kalian tulis disini</div>
<div class="notes info">Kutipan kalian tulis disini</div>
<div class="notes ceklis">Kutipan kalian tulis disini</div>
<div class="notes warning">Kutipan kalian tulis disini</div>
<div class="notes quote">Kutipan kalian tulis disini</div>
<div class="notes kuning">Kutipan kalian tulis disini</div>6. Setelah semua dilakukan tinggal kalian publish artikel tersebut. Nanti akan ada Box Catatan yang akan terlihat dibawah artikel postingan yang telah kalian buat. Silakan kirim komentar bila kalian menemui kesulitan ya. Semampu saya akan bantu. Kirim komentar dibawah postingan ini. Selamat mengerjakan. Wassalam.
Sekarang yang kutipan kedua :
Caranya :
1. Seperti biasa masuk ke Dashboard Blogger
2. Kemudian klik Tema
3. Lalu pilih Sesuaikan Edit HTML
4. Cari kode ]]></b:skin> dan tempelkan kode dibawah ini persis diatas kode ]]></b:skin>
alifakutipan {
position: relative;
width: 600px;
margin: auto;
padding: 1rem;
background-color: transparent;
background-image: linear-gradient(-45deg,transparent,transparent 2%,white 2%,white 85%,transparent,85%,transparent),
linear-gradient(to bottom right, #2ad, #2ad 90%, transparent 90%);
background-position: top left, 0.2em 0.2em;
background-repeat: no-repeat;
filter: drop-shadow(0 0 15px #0005);}
alifakutipan::before,
alifakutipan::after {
position: absolute;
z-index: -1;
display: block;
width: 3rem;
height: 4rem;
content: "";
z-index: 0;
font-size: 8rem;
font-family: Georgia, Times, Garamond, serif;}
alifakutipan::before {
top: -2rem;
left: 1rem;
content: open-quote;}
alifakutipan::after {
bottom: -1rem;
right: 1rem;
content: close-quote;}
alifakutipan::before,
alifakutipan::after,
alifakutipan h2 {
text-shadow: -2px 2px #fff, -1.5px 1.5px #fff, -1px 1px #fff, -0.5px 0.5px #fff;}
h2 {margin-block-end: 1rem;}
p {margin-block-start: 1rem;text-indent: 2ch;}5. Kemudian setiap kali membuat artikel maka untuk kutipannya harus memenuhi kaidah seperti berikut.
<alifakutipan>
<h2>Tips dan Trik Ngeblog</h2>
<p>Alifacode.com hadir dengan Tutorial Ngeblog yang unik dan mudah dipahami. Kami harap dengan hadirnya blog ini dapat menambah khasanah ilmu tentang Blog. Semoga bermanfaat dan berguna bagi Blogger yang sedang membangun sebuah Blog.</p>
<h4 align="right">Alifacode.com</h4>
</alifakutipan>
