Cara Memberi Garis Batas Antara Featured Post dengan Artikel Terbaru Biar Pengunjung Tidak Kesasar

Halo apa kabar sobat? Terimakasih atas kunjungannya. Semakin hari dan semakin bulan, blog ini tambah ramai. Sebuah penghargaan tersendiri. Dan sekali lagi, saya hanya mengucapkan terimakasih. Walau sebenarnya, saya kurang percaya diri, karena apa? Ya karena artikel blog ini masih menggunakan tata bahasa yang agak gimana gitu. Susah dicerna dan kemungkinan juga terlalu bertele-tele. Ya harap dimaklumi, yang namanya sebuah blog pastinya beda cara penyajian dengan portal ternama yang dikerjakan secara team.

Kalau blogger kan dari apa aja dikerjakan dan dikelola sendiri. Jadi harap wajar jika banyak kekurangan. Karena jika sudah main blog, tidak hanya menyangkut tulisan saja. Disana harus bermain ini dan itu, bagaimana caranya agar  artikel bisa punya power. Nah, kalau sudah begini, pastinya ada hal yang luput. Orang boleh jago dalam tata bahas menulisnya.  Tapi belum tentu jago dalam soal pengaturan permalink dan kode html-nya agar tata letaknya rapi. Apalagi, jika sudah menyangkut soal SEO. Wow, konstrasi bisa pecah.

Eleh mah. Saya kok jadi menggurui gitu. Ya begitulah. Aduh kebanyakan kata, ya begitulah. Kalau sudah lama menulis dan artikel sudah mencapai ribuan, kadang kehabisan kata-kata. Kurang banyak kosa kata ya begitulah. Ye begitulah lagi. Jangan ditertawakan ya, Narablog tamatan SD ya begini ini. Mau cerita saja, terlalu banyak gaya dan polah.

Dah ah, sebenarnya saya ingin berbagi ilmu. Wow, lagaknya kayak sok pintar. Aduh salah lagi. Ya sudahlah, berbagi pengalaman saja. Nah itu baru cakep. Saya pernah membuat artikel yang berjudul Membuat Judul Featured Post di Area Thumbnail agar Tampak Santuy. Bagi yang belum membacanya silahkan dikunjungi siapa tahu ada manfaatnya juga.

Nah persoalan akan timbul jika memasang widget Featured Post. Permasalahan saat blog dikunjungi lewat hape atau versi mobile. Bagi pengunjung baru pasti banyak yang kesasar atau salah klik. Akan mengira Featured Post tersebut adalah artikel terbaru. Walau solusi sudah memberikan judul di area thumbnail tetap sama masih ada yang salah mengira. Belum paham apa itu Featured Post. Nah kini ada solusinya lagi. Dengan cara memberikan garis batas.

Bagimama cara memberikan garis batas? Wow sabar, biar artikel ini tampak panjang ya harus basa-basi dulu. Kalau langsung pada persoalan, kurang seru. Caranya sangat mudah kok. Silahkan simak dibawah ini ya:

  • Tahap pertama pastinya pilih edit Tema dipengaturan blogspot. Letakan kode dibawah ini tepat dibawah kode <b:includable id='main' var='top'>.

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div class='id-djbat'><h2>Artikel Terbaru</h2></div>
</b:if>

  • Selanjutnya kita akan menambahkan kode CSS agar tampil lebih kece. Letakan kode dibawah ini diatas kode ]]></b:skin> atau </style>.

/* id-djbat */
.id-djbat h2 {
 font-weight: 500;
 position: relative;
 transition: all .5s ease-out;
 text-transform: uppercase;
 color: #80bd01;
 border-bottom: 2px solid #eff2f2;
 font-size: 16px;
 line-height: 28px;
 padding: 0px;
 text-align: center;
 margin-bottom: 25px;
}

Atau kode CSS yang ini:

.id-djbat {width:100%;margin:20px 10px;position:relative;text-align:left;line-height:24px;line-height:1rem}
.id-djbat h2{position:relative;z-index:5;display:inline-block;margin:0;padding:5px 10px;font-size:20px;font-weight:600;color:#ffffff}
.id-djbat::after{content:"";position:absolute;bottom:-1px;left:0;right:0;margin:0 20px 0 0;height:2px}
.id-djbat h2,.id-djbat::after{background:#017579;}

  • Untuk kode CSS-nya boleh diedit atau diganti sesuai dengan yang diinginkan. Jika sudah mantap klik Simpan.

Bagaimana mudah bukan? Pada intinya silakan berkreasi sendiri soal kode CSS-nya agar menemukan yang terbaik dan tercocok. Dengan harapan serasi, enak dipandang. Tapi jika tak mau pusing, paling asek tinggal memilih diantara dua kode CSS tersebut. Buat apa pening kepala ya, nanti jadi repot.

Cukup sekian ya, jika ada salah kata. Maupun salah dalam menyampaikan apa saja pokoknya. Jangan diambil hati. Niat saya hanya bercanda dan bersendau gurau, biar ada keakraban. Tidak terjadi komunikasi yang kaku. Dengan harapan pula, semoga artikel ini bermanfaat. Salam sehat selalu dan salam sukses.

Related Posts

Tidak ada komentar:

Posting Komentar

 
Back To Top