Kumpulan Komponen Style Postingan Blogger
Hallo sobat, kali ini saya akan bagikan mengenai style atau gaya pada setiap postingan blogger. Saya telah merangkum beberapa atribut yang dapat sobat terapkan di postingan.
Saya telah mengunjungi beberapa postingan blogger di search engine google dan memiliki artikel yang isinya menarik, tetapi tiap paragrafnya berantakan.
Membuat artikel tentu juga harus memikirkan agar pengunjung betah membaca postinganmu. Nah, saya akan bagikan agar postinganmu menjadi lebih menarik dan enak dibaca.
Dalam platform Blogger, komponen style postingan digunakan untuk mengatur tampilan dan gaya visual dari postingan yang dibuat. Komponen ini berguna untuk menyesuaikan berbagai aspek tampilan, seperti font, ukuran teks, warna latar belakang, pengaturan paragraf, dan lainnya.
Memakai komponen gaya atau style postingan di Blogger dapat memberikan berbagai manfaat dan fungsi yang penting untuk mempercantik tampilan dan fungsionalitas blog sobat. Berikut adalah beberapa Komponen Style Postingan Blogger yang dapat kamu pakai:
1. Post Break
Cara membuat post break atau penjeda paragraf di postingan blogger. Menggunakan gaya tampilan post break untuk memberi jeda diantara dua paragraf.
Dengan menggunakan gaya atau style tampilan "post break", dapat memberikan jeda visual yang jelas antara dua paragraf. Selain itu, juga membuat postingan lebih mudah dibaca dan dipahami oleh pengunjung.
Jeda ini membantu membagi konten menjadi bagian yang lebih terstruktur, memungkinkan pembaca untuk mengikuti alur baca dengan lebih baik. Dibawah ini adalah contoh demo post break.
Nah berikut ini cara membuat komponen style post break di postingan blogger. Tempelkan kode css berikut ini di atas </style> atau ]]></b:skin>.
hr{margin-top:40px;margin-bottom:40px;border:0;height:0;position:relative;-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}
/* Style 1 */
hr::before{content:'\007E'; display:block; letter-spacing:.6em;text-indent:.6em;text-align:center; opacity:.8;clear:both}
/* Style 2 */
hr.dot::before{content:'\2027 \2027 \2027'}
/* Style 3 */
hr.line::before{content:'';border-bottom:1px solid #444}Agar dapat diterapkan di blog mu, silahkan cari dahulu kode hr di edit tema dengan cara (CTRL + F). Silahkan ganti dengan kode css diatas, agar tidak saling tumpang tindih.
Selanjutnya, untuk memunculkan style post break di postingan silahkan buat atribut seperti dibawah ini.
Style 1 : ~
<hr />
Style 2 : titik - titik
<hr class="dot" />
Style 3 : garis
<hr class="line" />
Selesai dan silahkan publikasikan.
Dengan menggunakan gaya tampilan post break antara dua paragraf, agar memudahkan pembaca untuk mengikuti dan memahami informasi, serta memberikan penampilan yang lebih menarik dan terstruktur pada postingan.
2. Hiperlinks
Membuat tautan eksternal dalam postingan blog dengan menggunakan style khusus dapat memberikan indikasi visual kepada pembaca bahwa tautan tersebut mengarah ke luar blog. Ini membantu membedakan tautan eksternal dan tautan internal.
Dengan menambahkan elemen visual atau gaya yang menarik pada tautan eksternal, sehingga dapat menarik perhatian pembaca dan mendorong mereka untuk mengklik tautan tersebut. Tautan yang terlihat menarik atau menonjol cenderung menarik minat pembaca.
Cara membuat atribut lampiran Link eksternal di artikel, ada beberapa style untuk mempercantik postingan blogmu. Ada beberapa contoh yang saya bagikan, berikut live demonya.
Menarik bukan? kamu dapat membuatnya dengan nempelkan kode css berikut ini di atas </style> atau ]]></b:skin>.
/* Hiperlinks */
.free::after{display:inline-block; content:'free'; font-weight:400;font-size:small; text-indent:5px}
.new::after{content:'new!';display:inline-block; color:#ff0000 !important; font-weight:400;font-size:small; text-indent:5px}
.panah::after{content:''; display:inline-block; width:14px;height:14px;margin-inline-start:5px; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23989b9f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='7' y1='17' x2='17' y2='7'/><polyline points='7 7 17 7 17 17'/></svg>") center / 16px no-repeat}
.link::after{content:'';display:inline-block;width:10px;height:10px;background-color:#ff0000;margin-inline-start:5px;border-radius:50%;animation:indicator 1s ease infinite;-webkit-animation:indicator 1s ease infinite;z-index:1;}
@-webkit-keyframes indicator{0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}
@keyframes indicator{0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}
Selanjutnya, untuk memunculkan style link di postingan silahkan buat atribut html seperti dibawah ini.
<a class='new' href='your_url'>link_name</a>
<a class='free' href='your_url'>link_name</a>
<a class='panah' href='your_url'>link_name</a>
<a class='link' href='your_url'>link_name</a>
Meskipun menggunakan style tautan eksternal seperti diatas tidak secara langsung mempengaruhi optimisasi mesin pencari (SEO), tautan yang menarik dan mengundang dapat mendorong lebih banyak pembaca untuk mengkliknya.
3. Kotak Catatan
Cara membuat kotak catatan di postingan blogger. Kotak catatan atau note biasanya digunakan untuk memberikan sebuah keterangan. Para blogger banyak yang menggunakan gaya style komponen postingan ini. Contoh live demo-nya sebagai berikut ini.
Berikut ini cara membuat komponen style kotak catatan di postingan blogger. Tempelkan kode css berikut ini di atas </style> atau ]]></b:skin>.
/* Note */
.notes{position:relative;padding:16px 20px 16px 50px;background:#e1f5fe;color:#3c4043;font-size:.85rem;line-height:1.6em;border-radius:10px;overflow:hidden}
.notes::before{content:'';width:60px;height:60px;background:#81b4dc;display:block;border-radius:50%;position:absolute;top:-12px;left:-12px;opacity:.1}
.notes::after{content:'\002A';position:absolute;left:18px;top:16px;font-size:20px;min-width:15px;text-align:center}
.notes.warn{background:#ffdfdf;color:#48525c}
.notes.warn::before{background:#e65151}
.notes.warn::after{content:'\0021'}
Selanjutnya, untuk memunculkan kotak catatan di postingan silahkan buat atribut html seperti dibawah ini.
Style Kotak Catatan.
<p class="notes">isi_teks_artikel</p>Style Kotak Peringatan.
<p class="notes warn">isi_teks_artikel</p>4. Blockquote
Blockquote berfungsi sebagai teks kutipan. Menggunakan blockquote memberikan tampilan yang khusus pada kutipan tersebut, seperti mengubah gaya teks atau memberikan indentasi khusus. Hal ini membantu pembaca mengenali dengan jelas bahwa teks tersebut merupakan sebuah kutipan. Contoh live demo blockquote di postingan blogger.
Berikut ini cara membuat blockquote di postingan blogger. Tempelkan kode css berikut ini di atas </style> atau ]]></b:skin>.
blockquote{position:relative;font-size:.97rem;opacity:.8;line-height:1.6em;margin-left:0;margin-right:0;padding:5px 20px;border-left:2px solid #444}
blockquote.s-1{font-size:.93rem;padding:25px 25px 25px 45px;border:1px solid #989b9f;border-left:0;border-right:0;line-height:1.7em}
blockquote.s-1::before{content:'\201D';position:absolute;top:10px;left:0;font-size:60px;line-height:normal;opacity:.5}
blockquote.s-2{font-style:italic;margin-left:0;padding:10px 15px;width: 100%;box-sizing: border-box;border:1px dashed #e4e4e4;background:#f6f6f6;border-top-left-radius:20px;border-bottom-right-radius:20px}
blockquote.s-2::before{content:'"';display:inline-block;font-family:'Font Awesome 5 Free';font-style:normal;font-weight:900;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-right:10px;}
blockquote.s-2::after{content:'"';display:inline-block;font-family:'Font Awesome 5 Free';font-style:normal;font-weight:900;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-left:10px;}
Setiap template pasti menyematkan atribut blockquote, silahkan cari blockquote dengan (ctrl+f) dan ganti dengan css diatas agar tidak saling tumpang tindih. Untuk menampilkan blockquote di postingan silahkan buat atribut html seperti dibawah ini.
<blockquote>masukkan_teks_disini</blocquote><blockquote class="s-1">masukkan_teks_disini</blocquote><blockquote class="s-2">masukkan_teks_disini</blocquote>5. Drop Cap
Drop cap atau disebut juga dengan huruf berukuran besar diawal paragraf pokok. Cara membuat drop cap di blogger cukup mudah dan dapat mempercantik tampilan artikel blog sobat.
Pada platform Blogger, tidak ada fitur bawaan yang secara khusus menyediakan drop cap. Oleh karena itu, untuk menampilkan efek drop cap di awal paragraf postingan blogger, kamu perlu menggunakan kode CSS dan editor HTML.
Contoh demo dalam menampilkan drop cap di awal paragraf.
Berikut ini cara membuat dropcap di postingan blogger. Tempelkan kode css berikut ini di atas </style> atau ]]></b:skin>.
.dropcap{float:left;margin:4px 8px 0 0; font-size:55px;line-height:45px;opacity:.8}
Setelah menempelkan di template, selanjutnya menampilkan style drop cap di postingan. Silahkan buat atribut html seperti dibawah ini.
<p><span class="dropcap">T</span>ulis_artikel_disini</p>
6. Teks Indent
Cara membuat awal paragraf dapat menjorok kedalam di postingan blogger yaitu menggunakan atribut css text-indent. Cara ini digunakan untuk membuat artikel yang lebih menarik, rapi dan enak dipandang. Contoh demonya dibawah ini.
Mungkin jarang dipakai oleh para blogger, karena tidak mempengaruhi SEO. Akan tetapi artikel yang menarik dan rapi, pengunjung betah membaca artikel yang kamu buat.
Berikut cara membuat paragraf menjorok kedalam di postingan. Silahkan, tempelkan kode css berikut ini di atas </style> atau ]]></b:skin>.
.pIndent{text-indent:2.5rem}
Setelah menempelkan di template, selanjutnya menampilkan style teks indent di postingan. Silahkan buat atribut html seperti dibawah ini.
<p class="pIndent">Tulis_artikelmu_disini</p>
7. Multi Tabs
Membuat multi tab dalam postingan blogger hanya dengan menggunakan css dan kode html, jadi cukup ringan untuk pra-loading karena tidak memakai javascript. Menggunakan multi tab berfungsi sebagai pengatur konten yang terpisah, dan menyajikan informasi yang lebih rinci sehingga menjaga tampilan postingan tetap rapi.
Apabila ingin membuat artikel yang memberikan banyak informasi pada postingan menggunakan multi tab post dapat membantu menghemat ruang. Selain itu multi tab dapat menyembunyikan dan memunculkan konten artikel, sehingga akan mudah dipahami oleh pembaca.
Nah, contoh demo-nya seperti berikut ini.
Cara membuat multi tab di postingan hanya dengan menempelkan kode css berikut di atas kode </style> atau ]]></b:skin>.
/* Multi Tabs CSS */
.tabs{border:0;margin:1.5rem 0;padding:0}
.tabs input,.tabs .content > div{display:none}
.tabs label,.tabs .content{border-style:solid;border-width:1px}
.tabs input:checked + label,.tabs .content{border-color:#ddd}
.tabs .label{display:flex;flex-wrap:nowrap;flex-direction:row;max-width:calc(100vw - 2.5rem);overflow:auto}
.tabs label{background-color:transparent;border-color:transparent;border-bottom:4px solid #4285fa;color:#666;cursor:pointer;display:inline-block;float:left;padding: .5rem .75rem;position:relative;top:1px;transition:all .3s ease}
.tabs input:checked + label{background-color:transparent;border-bottom:1px solid #fff;color:#1d1d1d;font-weight:bold}
.tabs .content{clear:both;padding:1.5rem 1.25rem}
.tabs #tab1:checked ~ .content .tab1,.tabs #tab2:checked ~ .content .tab2,.tabs #tab3:checked ~ .content .tab3,.tabs #tab4:checked ~ .content .tab4,.tabs #tab5:checked ~ .content .tab5{display:block}
Setelah menempelkan css tersebut silahkan buat postingan, dan buat kode html dibawah ini;
<fieldset class="tabs">
<input id="tab1" name="mTab" type="radio" checked="checked"/>
<label for="tab1">About</label>
<input id="tab2" name="mTab" type="radio"/>
<label for="tab2">Contact</label>
<input id="tab3" name="mTab" type="radio"/>
<label for="tab3">Information</label>
<div class="content">
<div class="tab1">
(1) ISI ARTIKEL DISINI
</div>
<div class="tab2">
(2) ISI ARTIKEL DISINI
</div>
<div class="tab3">
(3) ISI ARTIKEL DISINI
</div>
</div>
</fieldset>
Selesai dan publikasikan dan lihat postinganmu.
8. Post Referensi
Membuat konten artikel biasanya diakhir terdapat sumber referensi, nah ini berguna untuk menampilkan sumber yang menjadi patokan dalam membuat artikel. Selain itu, sebagai bentuk apresiasi dengan mencantumkan link dari sumber artikel tersebut.
Berikut adalah contoh demo-nya.
Cara membuat post referensi di akhir postingan dengan tempelkan kode css berikut di atas kode </style> atau ]]></b:skin>.
/* Post Referensi */
.referensi{display:block;font-size:14px;line-height:1.5em; opacity:.8; word-break:break-word}
.referensi ol, .referensi ul{padding-inline-start:30px}
Setelah menempelkan di template, selanjutnya menampilkan post referensi di postingan. Silahkan buat atribut html seperti dibawah ini.
<div class="referensi">
Sumber referensi :
<ol><li>Tulis_kalimat_disini.</li>
<li>Tulis_kalimat_disini.</li>
</ol>
</div>
Penutup
Demikian membuat komponen style postingan di blogger agar penampilan artikel yang telah kamu buat akan lebih menarik. Sehingga akan lebih meningkatkan pemahaman keterbacaan oleh pengunjung blog.
Dengan memperhatikan penggunaan komponen post akan lebih efektif, responsive dan mempertahankan pembaca setia serta meningkatkan visibilitas blog di mesin telusur.
Terima kasih telah berkunjung di blog ini dan semoga sukses selalu.
