Cara Membuat Tombol Read More Dengan Bingkai Efek Warna Background Gradient

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Berbicara tentang read more yang ada hubungannya dengan kegiatan blogging, tentu saja kita sudah tidak asing lagi dengan hal ini, karena read more biasa digunakan oleh seorang blogger untuk memenggal isi artikel dan hanya menampilkan beberapa paragraf atau alinea di halaman muka dari seluruh bagian konten yang ada. Dengan adanya read more, maka beberapa artikel yang telah diterbitkan dapat ditampilkan sekaligus di halaman muka atau di beranda secara lebih ringkas. Sedangkan untuk membaca keseluruhan isi atau konten dari artikel yang dimaksud, maka dapat dilakukan dengan mengeklik tautan teks yang secara default bertuliskan ‘Read more »’ atau apabila setelan pemformatan bahasa yang digunakan adalah bahasa Indonesia, maka biasanya tautan teks tersebut bertuliskan ‘Baca selengkapnya »’.

Untuk membuat read more agar konten artikel yang ditampilkan di beranda hanya sebagian paragraf saja, caranya sangatlah mudah karena Blogger telah menyediakan fasilitas yang dapat digunakan untuk keperluan tersebut, dalam hal ini adalah dengan menggunakan tombol ‘Insert Jump Break’ atau tombol dengan gambar kertas sobek di bagian tengahnya, yang terdapat pada editor Blogger. Namun demikian dengan berbagai pertimbangan dan alasan, terkadang tidak jarang pula blogger yang menggunakan pilihan auto read more (yaitu dengan cara menambahkan script atau kode tertentu ke dalam template) untuk melakukan hal tersebut. Akan tetapi perlu diingat bahwa penggunaan kedua teknik tersebut pada akhirnya akan menghasilkan bentuk read more yang sama, yaitu read more yang berbentuk dalam tautan teks.

Karena hasil yang didapatkan dari penggunaan fasilitas ‘Insert Jump Break’ maupun auto read more menghasilkan model yang sama, dalam hal ini adalah model tautan berupa teks, maka tidak jarang pula pengelola blog yang melakukan modifikasi terhadap model tautan tersebut, yaitu dengan cara mengubah tautan teks ke dalam bentuk tautan gambar sehngga desain tampilan halaman blog akan tempak semakin menarik dan terkesan lebih profesional. Namun sayangnya seperti yang telah saya uraikan dalam artikel sebelumnya yang berjudul “Cara Membuat Bingkai Atau Tombol Dengan Warna Gradasi (Gradient Colour) Pada Blog” bahwasanya penggunaan gambar untuk elemen halaman blog hanya akan mengakibatkan semakin lambatnya loading atau penayangan halaman blog yang dimaksud (apalagi jika sambungan internet yang digunakan adalah sambungan internet dengan bandwith rendah), karena browser yang digunakan oleh pengguna harus melakukan request atas konten gambar yang digunakan ke beberapa server yang berbeda, sebelum pada akhirnya menampilkannya dalam bentuk tombol atau bentuk yang lainnya. Sehingga salah satu solusi yang dapat digunakan sebagai alternatif untuk mengatasi hal tersebut adalah dengan menerapkan bingkai dengan warna latar gradient sebagai pengganti untuk gambar yang dipakai dalam pembuatan tombol read more tersebut.

Selain tidak mengurangi kesan tampilan yang tampak profesional, penggunaan bingkai dengan warna latar gradient atau warna gradasi juga dapat meningkatkan kecepatan loading atau penayangan halaman sebuah blog, karena browser yang digunakan oleh pengguna tidak perlu lagi melakukan request atas konten gambar yang digunakan ke beberapa server yang berbeda. Hal ini disebabkan karena browser yang dipakai oleh pengguna lah yang akan menanganinya secara langsung dengan cara memparse kode CSS yang terdapat di dalam halaman blog yang sedang dibuka.

Lantas bagaimana caranya membuat tombol read more dengan menggunakan bingkai efek warna gradasi? Caranya sangatlah mudah. Dan bahkan bagi seorang pemula pun, menurut saya tidak akan mengalami kesulitan untuk menerapkannya. Jadi begini, untuk membuat tombol read more dengan tombol yang memiliki efek warna gradasi, maka Anda dapat melakukannya dengan mencoba menerapkan contoh kode CSS di bawah ini ke dalam template blog yang Anda pakai. Namun seperti biasa, bahwa untuk menambahkan script atau kode tertentu ke dalam template, maka terlebih dulu Anda harus login dan kemudian masuk ke editor template Blogger, dalam hal ini adalah dengan mengeklik menu 'Template’ >> ‘Edit HTML’ >> ‘Lanjutkan’ >> ‘Expand Template Widget’. Dan selanjutnya sisipkan kode berikut ini tepat di atas kode ]]></b:skin> atau di manapun selama masih dalam area untuk kode CSS.

/* Tombol Baca Selengkapnya Gradasi Warna
------------------------------------------------------- */

.baca_selengkapnya {
padding-top: 4px;
text-align: right;
}

.baca_selengkapnya a {
display: inline-block;
margin: 0;
padding: 4px 4px;
border: 1px solid #3d85c6;
color: #992211 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #0b5394;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #9fc5e8) );
background: -moz-linear-gradient( center top, white 20%, #9fc5e8 100% );
font: 13px/18px arial;
}

.baca_selengkapnya a:hover {
text-decoration: none !important;;
background: #0b5394;;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #cfe2f3),color-stop(1, white));;
background: -moz-linear-gradient(center top,#cfe2f3 20%,white 100%);;
}

Langkah kedua, cari kode <b:if cond='data:post.hasJumpLink'> dan kemudian sisipkan kode berikut ini tepat di bawahnya.

<div style='text-align: right;'>
<div class='baca_selengkapnya'>

Langkah ketiga, sisipkan dua buah tag </div> untuk menutup kode di tersebut tepat di atas kode </b:if>, sehingga rangkaian kode akhirnya menjadi seperti kode di bawah ini.

<b:if cond='data:post.hasJumpLink'>
<div style='text-align: right;'>
<div class='baca_selengkapnya'>
<div class='jump-link'>
<b><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a></b>
</div>
</div>
</div>
</b:if>

Dan yang terakhir, simpan template Anda. tralalalaa.. tombol read more dengan warna gradasi biru muda. Akan tetapi apabila Anda menginginkan gradasi warna yang berbeda, maka Anda dapat mengganti kode warna yang digunakan dalam kode CSS pada langkah pertama dengan kode warna yang sesuai dengan desain tampilan halaman blog yang Anda kelola. Namun apabila Anda mengalami kesulitan, maka silakan buka artikel dengan  “Beberapa Contoh Kode CSS Dan HTML Untuk Membuat Gradasi Warna Pada Background” untuk mempelajari teknik penggabungan warna dalam pembuatan tombol dengan background warna gradasi.

Semoga berguna dan bermanfaat.