Cara Membuat Blockquote Keren Di Blog

Cara Membuat Blockquote Keren Di Blog -  Pada kesempatan kali ini, aku untuk membuat tampilan Blockquote nampak keren jika di preview di blo...

Cara Membuat Blockquote Keren Di Blog - Pada kesempatan kali ini, aku untuk membuat tampilan Blockquote nampak keren jika di preview di blog kalian. Sebelumnya, aku juga sudah membuat hal serupa tentang kotak script yang juga bisa kalian terapkan di blog tanpa harus meng-Edit HTML. Namun, menurutku cara ini lebih bagus digunakan dan diterapkan untuk blogger pemula dan profesional agar tampilan blog menjadi lebih keren. Karena, dari segi warna dan desainnya, Blockquote ini lebih menarik untuk dilihat ketimbang menggunakan script code seperti yang sudah aku kasih tahu cara memasangnya. Jika kalian belum tahu bisa langsung klik link di bawah ini.

Baca Juga : - Cara membuat Kotak Script Di Blog.                                                                  - Cara Mudah Membuat Pop - Up Like Facebook Di Blog                           - Cara Mengatur Ukuran Gambar di Blog Secara Otomatis

Beberapa kali, aku menggunakan cara di atas untuk penggunaan kotak script. Namun, seiring pengetahuan yang ku dapat, aku lebih memvariasikan script ke dalam beberapa kotak script yang menurutku akan terlihat bagus jika kita menerapkannya di blog.

Nah, pasti penasaran donk gimana cara membuat Blockquote yang keren di blog kita. Simak terus sampai akhir dan jangan pindah sebelum semuannya selesai.

Cara Memasang Blockquote Keren Di Blog.

1. Pertama yang harus kalian lakukan adalah seperti biasa. LOGIN dulu ke Akun BLOGGER kalian. Ingat, jangan ke blogger tetangga ya.
2. Klik Template ==> Edit HTML.
3. Cari Kode ]]></b:skin> atau </style>. Jika tidak bisa menemukan kode tersebut untuk lebih cepatnya Klik Pada kotak HTML dan teka CTRL + F Nah nanti di situ bakal ada kayak kotak pencarian copas aja kode tadi. Gampang kan nggak bikin mata belo.
4.  COPAS kode CSS di bawah ini, lalu Paste di atas Kode ]]></b:skin> atau </style>. 

 
blockquote{display:block;background:#fff;padding:15px 20px 15px 45px;margin:0 0 20px;position:relative;font-family:Georgia,serif;font-size:14px;line-height:1.2;color:#666;-moz-box-shadow:2px 2px 15px #ccc;-webkit-box-shadow:2px 2px 15px #ccc;box-shadow:2px 2px 15px #ccc;border-left-style:solid;border-left-width:15px;border-right-style:solid;border-right-width:2px}blockquote::before{content:"201C";font-family:Georgia,serif;font-size:60px;font-weight:700;color:#999;position:absolute;left:10px;top:5px}blockquote::after{content:"f0a1";font-family:FontAwesome;font-size:20px;position:absolute;right:10px;bottom:5px;font-style:normal;font-weight:400;font-size:160%}blockquote a{text-decoration:none;background:#eee;cursor:pointer;padding:0 3px;color:#c76c0c}blockquote a:hover{color:#666}blockquote em{font-style:italic}

  /*Default Color Palette*/
blockquote.default{border-left-color: #656d77;border-right-color: #434a53;}

/*Pomegranate Color Palette*/
blockquote.pomegranate{border-left-color: #c0392b;border-right-color:#c0392b;}

/*Orange Color Palette*/
blockquote.orange{border-left-color: #f39c12;border-right-color: #f39c12;}

/*Pumpkin Color Palette*/
blockquote.pumpkin{ border-left-color: #d35400;border-right-color: #d35400;}

/*Aqua Color Palette*/
blockquote.aqua{border-left-color: #4fc2e5;border-right-color: #3bb0d6;}

/*Mint Color Palette*/
blockquote.mint{border-left-color: #46cfb0;border-right-color: #34bc9d;}

/*JungleGreen Color Palette*/
blockquote.junglegreen{border-left-color: #26C281;border-right-color: #26C281;}

/*Blue Jeans Color Palette*/
blockquote.bluejeans{border-left-color: #5e9de6;border-right-color: #4b8ad6;}

/*Lavander Color Palette*/
blockquote.lavander{border-left-color: #ad93e6;border-right-color: #977bd5;}

/*Pinkrose Color Palette*/
blockquote.pinkrose{border-left-color: #ed87bd;border-right-color: #d870a9;}

/*Silver Color Palette*/
blockquote.silver{border-left-color: #bdc3c7;border-right-color: #bdc3c7;}

/*Bisque Color Palette*/
blockquote.bisque{border-left-color: #FFE4C4;border-right-color:#FFE4C4;}

/*Sienna Color Palette*/
blockquote.ocean{border-left-color: #A0522D;border-right-color: #A0522D;}

/*Navy Color Palette*/
blockquote.navy{border-left-color: #000080;border-right-color: #000080;}

/*Light Steel Blue Color Palette*/
blockquote.lightsteelblue{border-left-color: #B0C4DE;border-right-color: #B0C4DE;}

/*Light Salmon Color Palette*/
blockquote.lightsalmon{border-left-color: #FFA07A;border-right-color: #FFA07A;}

/*Golden Rod Color Palette*/
blockquote.goldenrod{border-left-color: #DAA520;border-right-color: #DAA520;}

/*Olive Drab Color Palette*/
blockquote.olivedrab{border-left-color: #6B8E23;border-right-color: #6B8E23;}

/*Cadet Blue Color Palette*/
blockquote.cadetblue{border-left-color: #5F9EA0;border-right-color: #5F9EA0;}

/*Drak Slate Gray Color Palette*/
blockquote.drakslategray{border-left-color: #2F4F4F;border-right-color: #2F4F4F;}

/*Light Cyan Color Palette*/
blockquote.lightcyan{border-left-color: #E0FFFF;border-right-color: #E0FFFF;}

/*Thistle Color Palette*/
blockquote.thistle{border-left-color: #D8BFD8;border-right-color: #D8BFD8;}

/*Tomato Color Palette*/
blockquote.tomato{border-left-color: #FF6347;border-right-color: #FF6347;}


 

            5. Terakhir Save atau Simpan Templatenya.

Tugas belum berakhir sampai di situ. Jika kalian ingin membuat Blockquote di postingan blog, kalian bisa memilih salah satu kode di bawah ini untuk diterapkan di blog kalian. Caranya pun cukup mudah. Kalian tinggal mengCOPAS salah satu kode HTML di bawah ini di menu TAB HTML saat membuat postingan baru. Jadi BUKAN di Menu Compose seperti ketika kalian ngetik ya. Preview dulu jika ingin melihat Hasilnya sebelum di publikasi. KODE HTMLnya bisa kalian pilih sesuai keinginan di bawah ini.

<blockquote class="default"> Isi Quotes Disini... </blockquote>
<blockquote class="gpomagranate">Isi Quotes Disini... </blockquote>
<blockquote class="orange">Isi Quotes Disini... </blockquote>
<blockquote class="pumpkin">Isi Quotes Disini... </blockquote>
<blockquote class="aqua">Isi Quotes Disini... </blockquote>
<blockquote class="mint">Isi Quotes Disini... </blockquote>
<blockquote class="junglegreen">Isi Quotes Disini... </blockquote>
<blockquote class="bluejeans">Isi Quotes Disini... </blockquote>
<blockquote class="lavander">Isi Quotes Disini... </blockquote>
<blockquote class="silver">Isi Quotes Disini... </blockquote>
<blockquote class="pinkrose">Isi Quotes Disini... </blockquote>
<blockquote class="siennat"> Isi Quotes Disini... </blockquote>
<blockquote class="navy">Isi Quotes Disini... </blockquote>
<blockquote class="lightsteelblue">Isi Quotes Disini... </blockquote>
<blockquote class="lightsalmon">Isi Quotes Disini... </blockquote>
<blockquote class="goldenrod">Isi Quotes Disini... </blockquote>
<blockquote class="olivedrab">Isi Quotes Disini... </blockquote>
<blockquote class="drakslategray">Isi Quotes Disini... </blockquote>
<blockquote class="lightcyan">Isi Quotes Disini... </blockquote>
<blockquote class="thistle">Isi Quotes Disini... </blockquote>
<blockquote class="tomato">Isi Quotes Disini... </blockquote>
 

Jika dirasa blockquote nya sudah benar, baru deh bisa kalian publikasi. Untuk melihat hasilnya kalian bisa lihat link Preview Di bawah ini.

PREVIEW

Nah mudah sekali bukan? Coba kalian praktekan sendiri, jika tidak berhasil nanti aku bantu buat benerin. Oh ya, selain itu kalian juga bisa mengganti beberapa warna yang ada di blockquote tersebut dengan warna yang kalian suka. Tapi ingat, di HTMLnya juga harus kalian tambahkan CSS nya sesuai pilihan warna yang ingin kalian gunakan. misalnya, bisa kalian lihat di bawah ini.

/*Orange Color Palette*/
blockquote.orange{border-left-color: #f39c12;border-right-color: #f39c12;}

Jika kalian ingin menambahkan warna yang berbeda, di Template HTML silahkan tambahkan kode di atas dan ganti sesuai warna yang sudah aku kasih tanda tersebut.

<blockquote class="orange">Isi Quotes Disini... </blockquote>

Untuk di bagian Post HTML silahkan tambahkan isikan sesuai script kode di atas. Kode warna tersebut sesuai yang sudah kalian gunakan di menu Template yang kalian rubah. Jadi intinya, di template kalian hanya menambahkan warna sampingnya saja. Untuk merubah warna background dan lainnya, kalian bisa memodifnya sendiri.

Untuk Kode Warna bisa kalian lihat di sini.

Kode Warna HTML

OK, sampai di sini dulu tutorial hari ini. Jika dirasa ada yang kurang atau script kodenya nggak jalan, kalian boleh inbox aku di facebook Zhiang Zie Yie.  Atau kalian juga bisa mengirimkan email sesuai yang ada di Contact Us.

Semoga bermanfaat.