Cara Membuat Text Blockquote Keren di Blog

Cara Membuat Text Blockquote di Blog – Text Blockquote adalah text yang ditulis didalam kolom kusus didalam Postingan. Blockquaote biasanya saya gunakan untuk menandai kode/Script didalam postingan tutorial blog.

Cara Membuat Text Blockquote Keren di Blog

Nah mungkin anda sedang mencari tutorial cara meletakan kode script didalam kotak warna, bila ingin mencoba text blockquoate silahkan simak Tutorial membuat text blockquote di blog,

1. Masuk ke Entry baru, atau membuat postingan baru
2. Kemudian klik HTML, ada disamping menu Compose
3. Copy dan paste kode ini di postingan HTML

<blockquote style=”background-color: #808080; border-left: 5px solid #fce27c; margin: 0; margin: 1em 3em; padding: .5em 1em;”>
Masukkan Code atau Tulisan anda disini </blockquote>

4. Untuk warna merah adalah backgroundnya
5. Untuk Warna orange adalah ukuran garis kiri (yang berwarna kuning)
6. Untuk warna biru adalah warna garis kirinya
7. Untuk warna hijau adalah Tulisan yang ingin anda letakan di kolom tersebut

Bagaimana?, gampang kan?, Semoga tutorial ini bisa bermanfaat bagi anda. Selamat Mencoba

Tambahan : CSS Blockquote Styles List untuk Blogger


CSS Blockquote Style: 1

CSS Blockquote Style 1

blockquote{font-family:"Merriweather",Georgia,serif;font-style:italic;padding:17px 58px 20px 55px;font-size:16px;text-align:left;font-weight:300;color:#333;background:#F2E4A0;margin:21px 30px}
blockquote:before{content:"\201C";margin-left:-35px;line-height:1.33;float:left;font-weight:700;font-style:normal;font-size:25px;color:#111}

CSS Blockquote Style: 2

CSS Blockquote Style 3

blockquote{border-left: 15px solid #c76c0c;font-family: Georgia, serif;font-size:15px;text-align: justify;background: #fff;line-height: 1.2;
display:block;margin: 0 0 20px;padding: 15px 20px 15px 45px;position: relative; font-size: 16px;color: #666;
border-right: 2px solid #c76c0c;box-shadow: 2px 2px 15px #ccc;-webkit-box-shadow: 2px 2px 15px #ccc;-moz-box-shadow: 2px 2px 15px #ccc;}
blockquote::before{font-size: 50px;position: absolute;color: #999;left: 10px;top:5px;font-weight: bold;content: "\201C";}
blockquote a{cursor: pointer;color: #c76c0c;text-decoration: none;background: #eee;padding: 0 3px;}
blockquote a:hover{color: #555;}

CSS Blockquote Style: 3

CSS Blockquote Style 10

blockquote {
color: #8ABA9C;text-align:left;border-left:5px solid #8ABA9C;
padding: 21px;line-height: 20px;
margin: 30px 40px;float: left;}

CSS Blockquote Style: 4

CSS Blockquote Style 11

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{ font-size: 16px; text-align:left; height: auto; margin: 0px; font-family: 'Roboto Slab', serif;
padding: 20px; font-style:italic; background: #F8F8F8; overflow: hidden;}
blockquote:before {content: "\f10d"; color: #00bf8f; margin-right: 6px; font-family: fontawesome;}
blockquote:after {font-family: fontawesome; content: "\f10e"; margin-left: 6px; color: #00bf8f;}

CSS Blockquote Style: 5

CSS Blockquote Style 12

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{background:#f7f7f7;padding:25px;border:1px solid #eee;text-align:justify;position:relative;
font-weight:500;clear:both;font-style:italic;}
blockquote:before{color:#6f6a6a;position:absolute;line-height:1;font-size:25px;z-index:0;
transition:.2s ease-in;font-family:FontAwesome;left:-18px;top:-21px;font-style:normal;padding:7px;content:"\f10d";border:1px solid #ddd}
blockquote:after{content:"\f10e";border:1px solid #ddd;position:absolute;font-size:25px;color:#6f6a6a;z-index:0;
font-family:FontAwesome;line-height:1;bottom:-21px;right:-18px;font-style:normal;transition:.2s ease-in;padding:7px;}

CSS Blockquote Style: 6

CSS Blockquote Style 13

blockquote{margin:0 auto;position:relative;line-height:24px;padding:24px 20px 24px 45px;text-shadow:0 1px 1px white;
border:1px solid rgba(0,0,0,0.05);background-color:#F2F2F2;
background-image:
-webkit-radial-gradient(center,cover,rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 90%),
-webkit-repeating-linear-gradient(top,transparent 0%,
transparent 24px,rgba(139,207,173,0.7) 24px,
rgba(139,207,173,0.7) 25px);}
blockquote:before{content:'';position:absolute;top:0;bottom:0;left:20px;border:4px solid rgba(139,207,173,0.7)}
blockquote:after{background:rgba(242,246,193,0.9);z-index:-1;left:0;right:0;transform:rotate(2deg);border:1px solid rgba(170,157,134,0.7);}

CSS Blockquote Style: 7

CSS Blockquote Style 14

blockquote {
border-left:2px dashed #FACC2E;color:#FACC2E;font-size:14px;
line-height:18px;font-style:italic;
text-align:justify;margin:15px 30px;padding-left:20px;
font-family:Georgia,"Times New Roman",Times,serif;}
Guest Post

25 thoughts to “Cara Membuat Text Blockquote Keren di Blog”

  1. lagi ngeronda eh ketemu lagi ama mas daniel,lama nggak main kesini blognya tambah cakep dan tutorialnya makin lengkap aja yamas,izin menyimak aja mas

  2. oya mas sekalian izin follow blog ini agar nggak ketinggalan ama update artikel selanjutnya,kalau ada waktu mohon difollow balik yamas,makasih atas kerjasamanya

  3. wah jadi tambah keren ya mas tampilan script nya, tapi agak ribet juga edit-edit postingan nya hehe 😀
    saya lebih suka pakai quote bawaan blogger aja. Tinggal klik, beres deh. hehe 😀

  4. @Pri : contohnya seperti diatas itu,, 😀

    @Elsa : tapi harus lihat dulu mbak, apa yang mau dikasih blockquote.. paling bagus itu Script,. 😀

    @Wong : oke nanti saya follow

    @Wahyu : Quote bawaan blogger itu gmna modelnya mbak ??

  5. @Siti : oke gan.. 😀

    @Yobert : Cara pakai blockquote bawaan blog gmna gan ??

    @Elfrida : iya, biar kelihatan rapi gitu

    @Yahya : silahkan di coba

    @Rachmat Kiki : sip, biar bisa bikin template sendiri. 😀

  6. blogquote nya keren dan kliatan kalau yang pake model ini adalah blogger profesional…simpen ah mana tau kapan kapan perlu.
    makasih

  7. yang lebih varian ada gk kang ??tapi hanya di postingan saja tidak pada template 🙂

  8. Blockquote sangat berguna kalo kita lagi buat tulisan tentang widget mas soalnya kita harus menyertakan script di postingan tsb. 🙂

  9. Maaaf sob, OOT 😀 iklan sobat yg berjejer dibawah MENU itu apa ya namanya.. .. soalnya sy mau psang jga .. mksh

  10. I like your style of writing. You break it down nicely. Very informative post. Keep up the good work.

    Acer – Aspire 11.6" Laptop – 6GB Memory – 500GB Hard Drive – Silky Silver

    Acer – Aspire 15.6" Laptop – 8GB Memory – 1TB Hard Drive – Cold Steel

  11. ✔ Agen Vimax Asli
    ✔ Agen Vimax Asli
    ✔ Agen Vimax Asli
    ✔ Agen Vimax Asli
    ✔ Agen Vimax Asli
    ✔ Agen Vimax Asli
    ✔ Agen Vimax Asli
    ✔ Agen Vimax Asli
    ✔ Agen Vimax Asli
    ✔ Agen Vimax Asli
    ✔ Agen Vimax Asli
    ✔ Agen Vimax Asli
    ✔ Agen Vimax Asli
    ✔ Agen Vimax Asli
    ✔ Agen Vimax Asli
    ✔ Agen Vimax Asli
    ✔ Agen Vimax Asli
    ✔ Agen Vimax Asli
    ✔ Agen Vimax Asli
    ✔ Agen Vimax Asli
    ✔ Agen Vimax Asli
    ✔ Agen Vimax Asli
    ✔ Agen Vimax Asli
    ✔ Agen Vimax Asli
    ✔ Agen Vimax Asli
    ✔ Agen Vimax Asli
    ✔ Agen Vimax Asli

  12. Keren sob artikelnya sangat bermanfaat, terimakasih. Akan saya coba langsung di blog saya _solusikerontokanrambut.wordpress_com/

  13. kalau tutorial diatas penerapan pada blog di blogspot, nah kalau pada blog di wordpress bagaimana Gan?
    TERIMAKASIH

Leave a Reply

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

CAPTCHA, Maaf ini untuk menghindari SPAM Robot ! *