Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogspot / Widget

Cara Menciptakan Blockquote Flat Ui Keren Di Blog

cara menciptakan Blockquote keren di Blog dengan tampilan menarik Cara Membuat Blockquote Flat UI Keren di Blog
Sebelumnya aku sudah menuliskan 10 cara menciptakan Blockquote keren di Blog dengan tampilan menarik. namun pada kesempatan kali ini, aku akan menciptakan style lain dari blockqoute yakni kita akan membuatnya lebih berwarna ibarat Flat UI. Menurut definisi Flat UI Design ialah tampilan minimalis dengan bahasa desain yang menghilangkan pengguanan imbas 3D ibarat bayangan, gradients, textures, dan sejenisnya yang akan menciptakan design menjadi tiga dimensi, jadi Flat UI design ini nantinya akan terlihat 2 dimensi dengan warna yang flat juga.  Di masa sekarang, para designer lebih tertarik terhadap design yang minimalis dan modern. Dengan menghilangkan effect 3D tersebut memungkinkan blog akan terlihat lebih fresh dan mempengaruhi peforma dari blog sehingga akan lebih cepat di akses. Sebagai tambahan Blockquote merupakan sebuah pengutamaan terhadap kata kunci yang menjadi sorotan paling penting dari sebuah postingan atau artikel dalam blog. Nah kali ini aku akan membagikan tutorial pemasangan Blockquote keren di blogger dengan  pemilihan 12 warna sesuai selera, artinya Anda sanggup menekan suatu kata dengan warna pembungkus yang berbeda. Seperti apa Blockquote nya? simak aja tutorialnya berikut

Cara Mamasang Blockquote Warna-Warni Flat UI di Blog 
1. Pertama silahkan Anda login dulu ke Blogger
2. Klik Template → Edit HTML
3. Cari kode ]]></b:skin> atau </style>
4. Kemudian Copy kode CSS dibawah ini, lalu Paste diatas atau sebelum kode ]]></b:skin> atau </style> 

/* Blockquote by pawanmall.net and lk21.news */ 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;}  /*Pumpkin Color Palette*/ blockquote.pumpkin{ border-left-color: #d35400;border-right-color: #d35400;}  /*Orange Color Palette*/ blockquote.orange{border-left-color: #f39c12;border-right-color: #f39c12;}  /*JungleGreen Color Palette*/ blockquote.junglegreen{border-left-color: #26C281;border-right-color: #26C281;}  /*Mint Color Palette*/ blockquote.mint{border-left-color: #46cfb0;border-right-color: #34bc9d;}  /*Aqua Color Palette*/ blockquote.aqua{border-left-color: #4fc2e5;border-right-color: #3bb0d6;}  /*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;}  /*Asbestos Color Palette*/ blockquote.asbestos{border-left-color: #7f8c8d;border-right-color: #7f8c8d;}  /*Silver Color Palette*/ blockquote.silver{border-left-color: #bdc3c7;border-right-color: #bdc3c7;}

6. Lalu Simpan atau Save Templatenya
7.  Selanjutnya dikala Anda ingin menciptakan  Blockquote di postingan, gunakanlah aba-aba berikut ini untuk penarapan atau memanggilnya di  Tab HTML dan bukan Compose, sesudah pemasangan selesai, silahkan Anda kembali lagi ke Tab Compose, dan silahkan Anda ganti Isi Qoutes disini... sesuai harapan Anda.

 <blockquote class="default"> Isi Quotes Disini... </blockquote>  <blockquote class="gpomagranate"> Isi Quotes Disini... </blockquote>  <blockquote class="pumpkin"> Isi Quotes Disini... </blockquote>  <blockquote class="orange"> Isi Quotes Disini... </blockquote>  <blockquote class="junglegreen"> Isi Quotes Disini... </blockquote>  <blockquote class="mint"> Isi Quotes Disini... </blockquote>  <blockquote class="aqua"> Isi Quotes Disini... </blockquote>  <blockquote class="bluejeans"> Isi Quotes Disini... </blockquote>  <blockquote class="lavander"> Isi Quotes Disini... </blockquote>  <blockquote class="pinkrose"> Isi Quotes Disini... </blockquote>  <blockquote class="silver"> Isi Quotes Disini... </blockquote>
Silahkan Anda pilih salah satu aba-aba warna diatas yang ingin Anda gunakan untuk Blockquote.
8. Terakhir Publikasikan dan silahkan Anda lihat hasilnya

[Preview##eye##]

Nah itulah langkah singkat membuat Blockquote keren dengan pemilihan warna yang menarik. Sekian dulu artikel kali ini, kalau ada yang ingin Anda tanyakan atau tidak paham silahkan komentar dibawah ini terima kasih.

Anda mungkin menyukai postingan ini :