Selamat pagii sahabat blogger,, bagaimana kabar kalian hari ini. Semoga selalu sehat ya sob. Berhubung aku ada waktu untuk stanby di hp dan kali ini aku ingin update artikel hari ini yaitu wacana Bikin tampilan Blockquote dengan warna yang berbeda - beda. Sebelum kita lanjut ke tahap selanjut nya. Saya akan jelaskan apa itu blockquote. Yaa kali aja sahabat blogger ada yang belum tau apa itu blockquote. Hehehe....
Blockquote yakni : Penekanan pada kata atau kalimat tertentu dalam sebuah tulisan. Ditampilkan secara mencolok dibanding keseluruhan tulisan,agar kehadirannya, menyita perhatian pembaca. Fungsinya adalah, untuk memberitahu pada pengunjung bahwa teks yang kita tampilkan berbeda tersebut yakni sebuah pesan penting. Bentuknya dapat berupa sebuah paragraf singkat, dapat berupa sebaris kata, dapat sebuah kutipan, dapat sebuah bagian puisi dan aforisma. Yang jelas, ada penitikberatan khusus dibanding tampilan batang badan goresan pena secara keseluruhan.
Bagaimana kini kalian sudah tau bukan apa itu Blockquote. Nahh kini mari kita lanjut ke tahap selanjut nya. Simak baik" tutorial yang aku berikan hari ini. Jangan lupa sediakan udut + kopi dan gorengan biar lebih enjoy sob.
12 - Tampilan Effects Blockquote Yang Keren
1. Silakan kalian copy code di bawah ini sempurna di atas code </style> Atau ]]></b:skin> blockquote{ display:block; background: #fff; padding: 15px 20px 15px 45px; margin: 0 0 20px; position: relative; /*Font*/ font-family: Georgia, serif; font-size: 14px; line-height: 1.2; color: #666; /*Box Shadow - (Optional)*/ -moz-box-shadow: 2px 2px 15px #ccc; -webkit-box-shadow: 2px 2px 15px #ccc; box-shadow: 2px 2px 15px #ccc; /*Borders - (Optional)*/ border-left-style: solid; border-left-width: 15px; border-right-style: solid; border-right-width: 2px; } blockquote::before{ content: "\201C"; /*Unicode for Left Double Quote*/ /*Font*/ font-family: Georgia, serif; font-size: 60px; font-weight: bold; color: #999; /*Positioning*/ position: absolute; left: 10px; top:5px; } blockquote::after{ /*Reset to make sure*/ content: ""; } 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; } /*Grapefruit Color Palette*/ blockquote.grapefruit{ border-left-color: #ed5565; border-right-color: #da4453; } /*Bittersweet Color Palette*/ blockquote.bittersweet{ border-left-color: #fc6d58; border-right-color: #e95546; } /*Sunflower Color Palette*/ blockquote.sunflower{ border-left-color: #ffcd69; border-right-color: #f6ba59; } /*Grass Color Palette*/ blockquote.grass{ border-left-color: #9fd477; border-right-color: #8bc163; } /*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; } /*Light Color Palette*/ blockquote.light{ border-left-color: #f5f7fa; border-right-color: #e6e9ed; } /*Gray Color Palette*/ blockquote.gray{ border-left-color: #ccd1d8; border-right-color: #aab2bc; } /* These CSS classes used just for Demo purpose */ .heading{ font-family:Montez; text-align:center; font-size:30px; } code{ color:#da4453; } span{ font-weight:bolder; } h1{ text-align:left; font-size:16px; font-family: 'Francois One', sans-serif; } span.Cdefault{ color:#434a53; } span.Cgrapefruit{ color:#da4453; } span.Cbittersweet{ color:#e95546; } span.Csunflower{ color:#f6ba59; } span.Cgrass{ color:#8bc163; } span.Cmint{ color:#34bc9d; } span.Caqua{ color:#3bb0d6; } span.Cbluejeans{ color:#4b8ad6; } span.Clavander{ color:#977bd5; } span.Cpinkrose{ color:#d870a9; } span.Clight{ color:#e6e9ed; } span.Cgray{ color:#aab2bc; } 2. Dan untuk code pemanggil nya silakan kalian dapat liat code di bawah ini.
<blockquote class="default">Some Text..</blockquote> 3. Silakan ganti yang aku tandai dengan nama blockquote yang kalian ingin kan.
4. Untuk pola nya kalian dapat liat pada gambar di atas.
Mungkin itu saja yang dapat aku bagikan pada kesempatan kali ini, semoga artikel ini dapat bermanfaat buat sahabat yang sedang mencari Tampilan Effects Blockquote Yang Keren. Selamat mencoba...
