• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

PAHOMPU.COM

Info Teknologi Blog SEO dan Bisnis Online

  • Blogging & SEO
    • Themes
    • Script
  • Teknologi
    • Komputer
    • Mobile & App
  • Internet
  • Sosial Media
  • Other
    • Bisnis Rumahan
    • Bisnis Online
    • Ulasan Bisnis
    • Motivasi
Home / Blogging Dan SEO / 5 Style CSS Blockquote Cantik Untuk Blogger dan Wordpress

30 December 2016 by pahompu Leave a Comment

5 Style CSS Blockquote Cantik Untuk Blogger dan WordPress

Style CSS Blockquote Cantik Untuk Blogger dan WordPress – Blockquotes biasanya digunakan untuk menunjukkan kutipan teks dalam konten post di blog untuk menegaskan suatu kalimat dari sumber eksternal atau menyorot kutipan seseorang, atau opini, serta hal lainnya.

Pegiat Blog atau Blogger sering menggunakannya di blog mereka untuk membuat artikel blog terlihat menonjol dan menarik perhatian pembaca.

Semua platform blogging memiliki styling default untuk blockquotes, tapi terkadang harus juga dimodifikasi untuk membuatnya terlihat sesuai dan relevan dengan tema / template.

Tutorial berikut membahas cara untuk menyesuaikan gaya blockquote di Blogger dan WordPress. Dengan 5 Style CSS Blockquote Cantik Untuk Blogger dan WordPress Anda.

Model ini menggunakan pseudo-elemen yang berbeda seperti: :before ,  :after untuk menciptakan tampilan yang unik.

BACA JUGA :
Widget Penting yang Harus Ada di Blog
Kompilasi Script WordPress Yang Sering Dipakai
4 Plugin CAPTCHA Terbaik dan Gratis
Table Of Contents show
1 Cara Mengedit Style Blockquote Dalam Blogger / Blogspot:
2 Cara Mengedit Style Blockquote Pada Tema WordPress:
3 Berikut 5 Style CSS Blockquote Cantik Untuk WordPress dan Blogger, yang bisa anda Pilih.
3.1 # Style CSS Blockquote Cantik Untuk Blog 1: Simple
3.2 # Style CSS Blockquote Cantik Untuk Blog 2: Hover Effect
3.3 # Style CSS Blockquote Cantik Untuk Blog 3: Garis Pembatas Dashed dan Gambar “
3.4 # Style CSS Blockquote Cantik Untuk Blog 4: Cool Circle
3.5 # Style CSS Blockquote Cantik Untuk Blog 5: Codepen

Cara Mengedit Style Blockquote Dalam Blogger / Blogspot:

Untuk mengedit style blockquote di blogger,  Anda masuk ke Blogger Dashboard >> Template >> Edit HTML dan Cari </head>

Sekarang pilih salah satu style di bawah ini dan salin kode CSS dan pastekan sebelum tag </head>.
Selesai! dan Save template Anda!

Sekarang setiap kali Anda ingin menambahkan blockquote dalam posting blog, Anda hanya perlu meng highlight teks yang ingin ditampilkan sebagai blockquote dan tekan ikon seperti yang ditunjukkan pada screenshot berikut :

Style CSS Blockquote Cantik Untuk Blogger

Cara Mengedit Style Blockquote Pada Tema WordPress:

Untuk menambahkan gaya blockquote di tema WordPress cukup sederhana, Anda hanya perlu menambahkan kode style yang anda pilih ke style.css atau berkas custom.css tema Anda. Anda dapat melakukannya dengan cara Masuk ke Dashboard WordPress Buka Appearance/Tampilan »Editor, .

Kemudian pilih style yang ada di bawah ini dan pastekan di posisi paling bawah dalam berkas style.css atau berkas custom.css tema Anda. Selesai! dan Save template Anda!

Sama seperti pada Blogger, Untuk menambahkan blockquote dalam posting, Anda hanya perlu meng highlight teks yang ingin ditampilkan sebagai blockquote dan tekan ikon seperti yang ditunjukkan pada screenshot berikut :

Style CSS Blockquote Cantik Untuk WordPress

Berikut 5 Style CSS Blockquote Cantik Untuk WordPress dan Blogger, yang bisa anda Pilih.

# Style CSS Blockquote Cantik Untuk Blog 1: Simple


CSS Untuk Pemakaian di WordPress

blockquote {
    background:#f9f9f9;
    border-left:6px solid #ccc;
    font-family: Georgia, serif;
    margin:1.5em 10px;
    padding:.5em 10px;
    quotes:"\201C""\201D""\2018""\2019";
    }
    blockquote:before {
    color:#ccc;
    content:open-quote;
    font-family: cambria, Georgia;
    font-size:4em;
    line-height:.1em;
    margin-right:.25em;
    vertical-align:-.4em;
    }
    blockquote p {
    display:inline;
    }
    blockquote cite {
    color: #999999;
    font-size: 14px;
    display: block;
    margin-top: 10px;
    }

 
CSS Untuk Pemakaian di Blogger


 

# Style CSS Blockquote Cantik Untuk Blog 2: Hover Effect


CSS Untuk Pemakaian di WordPress

blockquote {
text-align:left;
font: 16px/24px Arial, sans-serif;
color: #555;
padding: 0.5em 10px;
margin: 1.5em 10px;
}
blockquote:before {
content: open-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: left;
position: relative;
border-radius: 25px;
margin-right: 0.5em;
vertical-align: -0.4em;
display: block;
height: 25px;
width: 25px;
}
blockquote:after {
content: close-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: right;
position: relative;
border-radius: 25px;
margin-right: 1em;
vertical-align: -0.5em;
display: block;
height: 25px;
width: 25px;
}
blockquote:hover:after, blockquote:hover:before {
background-color: #555;
transition: all 350ms;
-o-transition: all 350ms;
-moz-transition: all 350ms;
-webkit-transition: all 350ms;
}  

 
CSS Untuk Pemakaian di Blogger


 

# Style CSS Blockquote Cantik Untuk Blog 3: Garis Pembatas Dashed dan Gambar “


CSS Untuk Pemakain di WordPress

blockquote {
@import url(https://fonts.googleapis.com/css?family=Muli);
background: 

url(https://lh5.googleusercontent.com/-fTjvw5r8Sfg/VQfAuZQI96I/AAAAAAAABBU/uGNOHt8jNR8/h120/

blockquote.png) no-repeat;
border: dashed 2px #ccc;
color: #333;
font-family: muli;
margin: 30px;
padding: 20px 30px 30px 40px;  
}  

 
CSS Untuk Pemakaian di Blogger


 

# Style CSS Blockquote Cantik Untuk Blog 4: Cool Circle


CSS Untuk Pemakaian di WordPress

blockquote{
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 16px;
border-top: solid 2px #dddddd;
border-left: solid 2px #dddddd;
border-right: solid 2px #dddddd;
border-bottom: solid 2px #dddddd;
margin: 1em 0px;
padding: 1em 1em;
font-family: Georgia, Times, "Times New Roman", serif;
font-style: italic;
font-size: 1em;
min-height: 60px;
}
blockquote:before {
display: block;
float: left;
content: "\201C";
font-size: 100px;
margin-right: 10px;
color: #fff;
background-color: #03C9A9;
padding: 15px 12px 5px 8px;
width: 50px;
height: 50px;
line-height: 90px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
blockquote cite {
position: relative;
display: block;
text-align: right;
margin-top: 5px;
color: #999;
} 

 
CSS Untuk Pemakaian di Blogger

 

 

# Style CSS Blockquote Cantik Untuk Blog 5: Codepen


CSS Untuk Pemakaian di WordPress

blockquote{
display:block;
background: #fff;
padding: 15px 20px 15px 45px;
margin: 0 0 20px;
position: relative;
font-family: Georgia, serif;
font-size: 16px;
line-height: 1.2;
color: #666;
text-align: justify; 
border-left: 15px solid #c76c0c;
border-right: 2px solid #c76c0c;
-moz-box-shadow: 2px 2px 15px #ccc;
-webkit-box-shadow: 2px 2px 15px #ccc;
box-shadow: 2px 2px 15px #ccc;
}
blockquote::before{
content: "\201C"; /*Unicode for Left Double Quotes*/
font-family: Georgia, serif;
font-size: 60px;
font-weight: bold;
color: #999; 
position: absolute;
left: 10px;
top:5px;
}
blockquote::after{
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;
} 

 
CSS Untuk Pemakaian di Blogger

   

 
Demikian ulasan tentang 5 Style CSS Blockquote Cantik Untuk Blogger dan WordPress. Semoga bermanfaat.

Jika ada pertanyaan, atau jika ada kesalahan skrip dalam artikel ini tolong diberitahukan di bagian komentar, kami akan dengan senang untuk mengoreksinya 🙂

Atau adakah style blockquote favorit anda, silahkan rekomendasikan di Comment.

Salam Pahompu !

Filed Under: Blogging Dan SEO, Script Tagged With: blogger, Style CSS Blockquote, Tips dan Trik, Tutorial Wordpress, wordpress

Related Posts

  1. Trik CSS – Membuat Kotak Sederhana Dengan CSS Bergaya Catatan Sudut Berlipat
  2. Trik WordPress: Cara Menampilkan Komentar Terbaru dengan Thumbnail di WordPress Tanpa Plugin
  3. Template WordPress Gratis – ColorMag
  4. Cara Merubah Logo Login WordPress
  5. 6 Alasan Kenapa WordPress Menjadi Pilihan Terbaik Untuk Membangun Website
  6. Shortcut WordPress Untuk Memudahkan Pekerjaan Anda
  7. Cara Untuk Membuat Embed Video Responsive Di WordPress
  8. Cara Menggabungkan Dua Situs WordPress Menjadi Satu

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

POPULAR POSTS

  • Mengapa Kita Harus Mematuhi Rambu Lalu Lintas? posted on 13 November 2017
  • Ini Dia, Cara Mengukur Suhu Ruangan Dengan iPhone ! Ini Dia, Cara Mengukur Suhu Ruangan Dengan iPhone ! posted on 11 March 2017
  • Kendala Yang Sering Dihadapi Saat Mengelola Sebuah Web Hosting Kendala Yang Sering Dihadapi Saat Mengelola Sebuah Web Hosting posted on 29 March 2020
  • Apa itu Hello Dolly WordPress Plugin, Haruskah Saya Menghapusnya? posted on 20 June 2017
  • 5 Control Panel Web Hosting Paling Top Dan Sering Di Pakai 5 Control Panel Web Hosting Paling Top Dan Sering Di Pakai posted on 11 April 2017
  • Teknologi Robot Perang Terbaru Yang Siap Menghadapi Era Perang Modern Di Masa Depan Teknologi Robot Perang Terbaru Yang Siap Menghadapi Era Perang Modern Di Ma... posted on 19 February 2017
  • Cara Menggabungkan Dua Situs WordPress Menjadi Satu Cara Menggabungkan Dua Situs WordPress Menjadi Satu posted on 17 May 2017

Recent Posts

  • 7 Reliable Email Advertising and Marketing Approaches to Produce More Sales 29 August 2021
  • 6 Elemen Penting dalam Strategi Pemasaran Digital 18 November 2020
  • 9 Halaman Penting Ini Harus Ada Pada Website Bisnis Kamu 29 October 2020
  • Lima Faktor Peringkat SEO Dasar yang Harus Anda Ketahui 21 July 2020
  • Kendala Yang Sering Dihadapi Saat Mengelola Sebuah Web Hosting 29 March 2020
  • Mending Mana? Beli Laptop atau Rakit PC? 4 February 2020
  • Cara Membuat Teks Warna Warni di Insta Story 23 January 2020

Recent Comments

  • Hartono Liem on Lima Faktor Peringkat SEO Dasar yang Harus Anda Ketahui
  • cotekno on Lima Faktor Peringkat SEO Dasar yang Harus Anda Ketahui
  • Komala maulana on 4 Langkah Mudah Cara Bisnis Online Di Internet
  • Roffif Syafruddin on Cara Menghapus Riwayat Pembelian di App Store
  • Roffif Syafruddin on Mending Mana? Beli Laptop atau Rakit PC?

Tags

android aplikasi Applikasi bisnis Bisnis Online blog blogging Custom Background Custom Colors Custom Menu Entertainment facebook Featured Images game Google Adsense internet iphone komputer Laptop Left Sidebar mobile Money Online News One Column online plugin Right Sidebar SEO smartphone Sticky Post teknologi template terbaik Theme Options Threaded Comments tips Tips dan Trik Translation Ready trik trik wordpress Tutorial Wordpress Two Columns windows Windows 10 wordpress
  • About
  • Contact Us
  • Privacy Policy
  • Disclaimer
  • Term Of Services
  • Subscribe Us

Copyright © 2022 · Gen Polos on Genesis Framework · WordPress · Log in