Cara Membuat Blockquote Terbaru Seperti di Arlina Design


Bagaimana Cara Membuat Blockquote Terbaru Seperti di Arlina Design?. Blog Arlina Design merupakan salah satu rujukan atau referensi bagi para blogger lainnya. Mulai dari pembuatan artikel sampai pada desain yang menawan.

Banyak sekali keyword atau kata kunci di google yang mencari mengenai tutorial yang dapat memberikan cara dalam pembuatan desain sperti di arlina desigan, misalnya yang palin di buat ulang tutorialnya oleh para blogger yaitu mengenai cara membuat kotak HTML/Syntax Highlighter pada postingan seperti Arlina dan cara membuat gambar postingan seperti di Arlina Design

Dan kali ini saya akan membagikan juga tutorial cara membuat blockquote terbaru seperti di Arlina Design. Mudah-mudahan artikel ini dapat memberikan Anda solusi bagi yang ingin membuat tampilan blockquote mirip dengan blog nya mba Arlina

Blocquote merupakan sebuah fitur yang sudah di sediakan oleh blogger untuk menandai atau memberikan sebuah kutipan pada kalimat tertentu, untuk lebih memberikan kesan penting pada pembaca.

Seiring dengan berkembangnya dunia bloging, tampilan blockquote yang jadul terkesan sudah ketinggalan zaman, maka banyak juga para desiner template blog yang merubah tampilan catatan atau blockquote dengan tampilan yang lebih modern dan elegan

Perbuahan untuk bentuk desain blockuote sudah banyak saya temukan di berbagai blog yang saya kunjungi, namun ketika saya sering mampir ke blognya mba Arliina sebagai referensi bloging saya, saya tertarik dengan tampilan blockquote yang terdapat pada postingannya.

Dan berikut saya berikan tutorial cara membuat blockquote mirip seperti di Arlina

alt="Cara Membuat Blockquote Terbaru Seperti di Arlina Design"

Cara membuat blockquote terbaru seperti di blog Arlina Design 

1. Buka Blogger.com > Template > Edit HTML

2. Silahkan Anda cari dulu blockquote bawaan yang terdpat pada template HTML blog Anda, biasanya di awali dengan .post-body blockquote silahkan cari kode tersebut, untuk mempermudah pencarian gunakan tombol CTR + F

Biasanya kode .post-body blockquote ini berada sebelum kode ]]></b:skin> silahkan cari disekitaran sana


3. Setelah ketemu, hapus kode bawaan blockquote tersebut dan ganti dengan kode atau script blockquote seperti Arlina di bawah ini

.post-body blockquote{background:#f8cf82;color:#000;font-size:15px;position:relative;padding:1.2em 1.5em;margin:1em auto;overflow:hidden;text-align:left;word-spacing:0}
.post-body blockquote:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #d8b471 #d8b471;background:#d8b471;display:block;width:0}
.post-body blockquote:hover:before{display:none}.post-body blockquote kbd,
.post-body blockquote a{color:#3d3320}pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0}hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:normal}h1{font-size:200%}h2{font-size:180%}h3{font-size:160%}h4{font-size:140%}h5{font-size:120%}h6{font-size:100%}

4. Save Template

5. Selesai

Silahkan Anda bisa lihat hasilnya dengan membuat atau melihat postingan Anda yang sudah diberikan fitur blockquote sebelumnya, atau bisa di lihat pada postingan artikel saya yang menggunakan fitur blockquote. Lihat disini

Untuk warna, jenis huruf dan yang lainnya silahkan bisa disesuaikan dengan kebutuhan Anda, dalam penggunaannya sama saja seperti biasa yaitu Anda tinggal block kalimat yang akan di jadikan blocquote dan pilih tanda ( " ) pada menu bar postingan blog.

Itu saja yang bisa saya berikan tutorial kali ini cara membuat blockquote terbaru seperti di Arlina Design. Silahkan bisa Anda gunakan pada blog Anda untuk memberikan nilai tambah pada posingan blog yang Anda buat.

Selamat mencoba, semoga bermanfaat, jika ada yang ditanyakan silahkan bertanya pada kolom komentar yang telah tersedia.

Terima kasih :)

Comments