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.

Cara mudah menyesuaikan blockquote dalam post blog. Tanpa blockquote dalam sebuah tulisan ianya ibarat masakan tanpa garam.

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 dari senarai di bawah dan tampalkannya di atas  ]]> </ b: skin>  tadi.

Langkah 6 : Save template dan preview , siap.

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

Gaya 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 .

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 .

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 .

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 .

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}

Sekian dulu untuk tutorial ringkas untuk blogger iatu 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.
Artikel Disediakan Oleh : bloggersorigin.com | Makes Blogging Easy .

Share this post

Dapatkan 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 .