Cara Mudah Membuat Kotak Catatan Efek Lipatan Mirip Di Blog Arlina design

Dalam kesempatan kali ini Riziq Design akan membahas tentang cara membuat kotak catatan dengan efek lipatan seperti di blog arlina design dengan mudah. pasti kalian semua sudah tahu kan siapah arlina design ituh? arlina design adalah seorang blogger yang sudah menciptakan berbagai template blogger di antaranya ada yang premium ada juga yang gratisan.

Beliau juga bukan hanya pencipta template saja melainkan beliau juga blogger yang sudah sukses dan terkenal hingga nama arlina sendiri sudah tidak asing lagi di kalangan blogger -blogger Indonesia. admin pribadi pun sudah lama sekali mengenal beliau karena admin sendiri pun pernah memakai template buatan mba arlina tersebut walaupun yang versi gratisannya:v

Namun kalian tidak usah remehkan template gratusan buatan mba arlina loh ! walaupun gratisan tapi fitur-fiturnya sangat lengkap sekali dan di dukung juga oleh SEO friendly, jadi template buatan mba arlina 100% bisa membuat blog kalian lebih di sayang mesin pencari Google.

Tapi di sini admin bukan untuk membahas template buatan arlina design melainkan akan memberikan cara mumbuat kotak catatannya saja, seperti halnya fungsi dari kotak catatan yaitu untuk memisahkan kata-kata yang menurut kalian sangat penting, seperti kata peringan dan lain-lain.

Oke jika kalian sudah tidak sabar ingin mengetahui caranya, baik lah kita langsung saja menuju ke tahap pembuatan kotak catatannya silahkan lihat tutorialnya di bawah ini.

• Buka Blogger.
• Pilih Tema => Edit HTML.
• Cari kode ]]></b:skin> atau bisa juga kode </style> gunakan tombol Ctrl+f untuk mempermudah pencarian.
• Jika sudah ketemu kalian copy kode di bawah ini dan pastekan tepat di atas kode tadi.

/* CSS Note by Riziq Design */ .note{position:relative;width:30%;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden} .note.orange{background:#f39c12} .note.crusta{background:#F2784B} .note.river{background:#3498db} .note:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #27ae60 #27ae60;background:#27ae60;box-shadow:0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);display:block;width:0} .note.orange:before{border-color:#fff #fff #e67e22 #e67e22;background:#e67e22} .note.crusta:before{border-color:#fff #fff #de6e45 #de6e45;background:#de6e45} .note.river:before{border-color:#fff #fff #2980b9 #2980b9;background:#2980b9}

• Simpan Template.

Untuk cara menggunakan nya cukup mudah sekali kalian hanya perlu mengcopy kode di bawah ini sesuai warna yang ingin kalian gunakna, lalu pastekan di mode HTML bukan Compose  ketika kalian menulis artikel.

Warna 1

<div class='note'>...ISI DENGAN CATATAN KALIAN...</div>

Warna 2

<div class='note orange'>...ISI DENGAN CATATAN KALIAN...</div>

Warna 3

 <div class='note river'>...ISI DENGAN CATATAN KALIAN...</div>

Warna 4

 <div class='note crusta'>...ISI DENGAN CATATAN KALIAN..</div>

Nah ituh dia cara membuat kotak catatan dengan efek lipatan di blog, gimana mudah sekali kan? Jika kalian penasaran ingin mencobanya tapi takut tampilan nya jelek kalian bisa lihat demonya terlebih dahulu, silahkan lihat di bawah ini.

Demo Click here

Gimana tampilan nya keren kan? mau nunggu apah lagi? cepet pasang di blog kalian karena bisa membuat blog lebih rapih dan enak di pandang oleh pengunjung blog kita.

Mungkin sampai di sini dulu pembahasan kali ini semoga bisa bermanfaat bagi kalian semua, jika ada pertanyaan silahkan tinggal komentar kalian di bawah atau bisa juga menghubungi admin secara langsung lewat kontak form dan admin akan membalas jika sedang online, Terimakasih atas kunjungannya.

Sumber: https://www.arlinadzgn.com/2015/10/memasang-catatan-dengan-efek-lipatan.html?m=1

Facebook Twitter Google+