Cara mudah menyesuaikan blockquote dalam post blog

Sebenarnya, blockquote digunakan untuk menyerlahkan teks atau ayat tertentu dalam sebuah tulisan atau penekanan pada ayat tertentu dengan berbeza berbanding keseluruhan tulisan dalam post blog. Tanpa blockquote dalam sebuah tulisan ianya ibarat masakan tanpa garam. Oleh itu, kita perlu menggunakan beberapa gaya blockquote untuk menonjolkan dan menjadikannya berbeza.

Semua template blogger sudah tersedia blockquote dengan reka bentuk blockquote lalai, ika anda tidak menyukainya ianya boleh di ubah tampilan blockquote dengan gaya yang lebih menarik. Dengan menggunakan mana-mana gaya mengikut citarasa sendiri, kita boleh meningkatkan pandangan gaya blockquote blog kita. Jadi, mari kita belajar bagaimana menyesuaikan blockquote dalam post blog blogger.

Langkah 1 : Delete semua code blockquote yang sedia ada dalam template blog.

Langkah 2 : Pada mulanya, sandarkan templat anda dan log masuk ke akaun Blogger anda dan pergi ke bahagian " Tema ". Sekarang klik butang " Edit HTML ".

Langkah 3 : Cari <b:skin>…</b:skin> dan expand it.

Langkah 4 : Scroll ke bawah dan cari code ]]></b:skin> atau </style>.

Langkah 5 : Pilih gaya blockquote yang dikehendaki di bawah dan tampalkan di atas ]]> </ b: skin> tadi.

Langkah 6 : Save template dan preview , siap.

Style / gaya blockquote sepertimana yang tertera di bawah dengan menggunakan CSS .

Gaya blockquote 1 .

Style blockquote 1.

blockquote {font-family: "Merriweather", Georgia, serif; font-style: italic; padding-left: 35px; 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; height-line: 1.33; float: left; font-weight: 700; font-style: normal; font-size: 25px; color: # 111;

Gaya blockquote 2 .

Style blockquote 2 .

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);}

Gaya blockquote 3 .

Style blockquote 3 .

blockquote{padding:20px 30px;text-align:left;background: #999 no-repeat right; color: #fff;font-size: 16px;line-height: 1.4; border: 0;border-radius: 10px;margin: 0 30px 10px;display: block; box-shadow: 11px 10px 0px #555;}

Gaya blockquote 4 .

Style blockquote 4 .

blockquote {background: #fafafa;font-style: italic;margin: 1em 1em 1.5em 1em;font-size: 16px;padding: 2.1em 1.5em; border-radius: 5px;border-left: 15px solid #1ABC9C;box-shadow: 11px 10px 0px #eee;}

Gaya blockquote 5 .

Style blockquote 5 .

blockquote{text-align:left;position:relative;display:block;background-color:#FCE5AE;color:#555555;border-radius:4px;padding:10px 15px;margin:.75em 0;}blockquote a{color:#34495e;} blockquote:before{height:0;content:"";width:0;position:absolute;left:15px;bottom:100%; border:7px solid transparent;border-color:transparent transparent #FCE5AE}

Selesai tutorial ringkas untuk blogger ,cara mudah menyesuaikan blockquote dalam post blog ,moga dengan adanya blockquote ianya dapat mengubah tampilan post blog agar tulisan yang ingin ditekankan atau ditampilkan kelihatan menarik dan kemas.Selamat mencuba .
Artikel Disediakan Oleh : bloggersorigin.com | Makes Blogging Easy .

Share this post

Artikel terkini terus ke inbox email anda :

PENAFIAN ( DISCLAIMER ) : Pelbagai bentuk imej, gambar, artikel, video dan pautan yang terkandung dalam blog ini diambil dari sumber - sumber lain .Oleh yang demikian dengan itu HAK CIPTA / COPYRIGHT dimiliki sepenuhnya oleh pemilik sumber tersebut .