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.


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.


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 YieAtau kalian juga bisa mengirimkan email sesuai yang ada di Contact Us.

Semoga bermanfaat.


COMMENTS

Nama

ADSENSE,4,AFTER EFFECT,2,BAHASA ASING,1,Bahasa Inggris,1,BLOG,24,BNI,3,Brand Local,1,ceritaku,3,CERPEN,6,CorelDraw,1,Curhat,12,DOKTER,2,Dokter Gigi,1,Dokter Hongkong,2,DOKTER KANDUNGAN,2,Dokter Mata,1,Dokter Umum,1,EKSPEDISI,3,EMAIL,1,ENDORSE,1,FILM PENDEK,1,Flash Fiction,1,Gigi,5,GMAIL,1,Halal,1,Hongkong,14,Ilmu Komputer,3,INDONESIA,1,INFO,6,INFO BMI,20,INFO DOKTER,7,JASA PAKET,3,JP BAI,3,JPBAI,4,Kandungan,3,Kecantikan,1,KESEHATAN,1,KOSMETIK,1,KULINER,2,Kulit,3,Kursus Gratis,1,LAKON,5,Lipstik,1,liputan,1,LUAR NEGERI,4,Masakan,1,Masker,1,Microsoft Excel,1,Microsoft Word,2,MODUS,1,MURAH,1,Opini,1,PAKET,3,PENIPUAN,1,Photoshop,2,Produk Local,1,QQP,2,QQP JASA PAKET,4,QQP JASA PAKET LUAR NEGERI,4,Rambut,1,rubik,1,Seputar BMI,24,Seputar Hongkong,22,Tips & Trik,1,Tips & Trik Blog,7,TRAVELING,4,Tubuh,2,Virus,1,Wardah,1,Widget,2,youtube,1,
ltr
item
Zhiang Zie Yie: Cara Membuat Blockquote Keren Di Blog
Cara Membuat Blockquote Keren Di Blog
https://3.bp.blogspot.com/-ee3J0C6fwi0/WsiAJBAwjuI/AAAAAAAAWOY/g26wiHGAVFgfw7NV-MDVo1Z0kxIvaRlfwCLcBGAs/s640/zhiangzieyiedotcom.jpg
https://3.bp.blogspot.com/-ee3J0C6fwi0/WsiAJBAwjuI/AAAAAAAAWOY/g26wiHGAVFgfw7NV-MDVo1Z0kxIvaRlfwCLcBGAs/s72-c/zhiangzieyiedotcom.jpg
Zhiang Zie Yie
https://www.zhiangzieyie.com/2018/04/cara-membuat-blockquote-keren-di-blog.html
https://www.zhiangzieyie.com/
https://www.zhiangzieyie.com/
https://www.zhiangzieyie.com/2018/04/cara-membuat-blockquote-keren-di-blog.html
true
3263550911380837102
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy