Mengaplikasikan CSS3 pada Pranala Read More di Blogger

Umumnya, posting-posting di halaman depan (home page) blog—baik berbasis Blogger, Wordpress, atau mesin-mesin blog lainnya—tidak disajikan secara utuh, tetapi hanya beberapa paragraf awal. Posting selengkapnya dapat kita baca dengan terlebih dulu meng-klik judul atau "pranala read more" posting bersangkutan.

"Pranala read more" ini—sebut saja demikian— merupakan elemen yang biasa disimpan di akhir paragraf-paragraf awal posting model sajian parsial ini. Ketika kita membuka halaman posting secara utuh, "pranala read more" tersebut—diotomatiskan—tidak tampak lagi. Anda dapat melihat bagaimana tampilan "pranala read more" ini di halaman depan blog ini.

Link text pada "pranala read more" ini umumnya memang berbunyi "Read more". Namun, tidak sedikit pula yang menggunakan teks-teks berbunyi: "Baca selengkapnya", "Selengkapnya", atau "Continue reading", tergantung sepenuhnya pada preferensi masing-masing pemilik atau pembuat desain templat blog.

Para pengguna Blogger, dapat menyisipkan "pranala read more" ini pada posting-posting mereka dengan menekan ikon kecil (Insert jump link) berbentuk kertas sobek jika model Compose yang digunakan pada post editor, atau menambahkan shortcode berupa: <!--more--> jika menggunakan post editor jenis HTML.

Melalui artikel ini, kita akan mencoba mendesain tampilan "pranala read more" ini dengan mengaplikasikan beberapa properti CSS3 yang akan kita ambil dari CSS Button Generator, sebuah layanan online untuk membuat tombol-tombol—berbais—CSS.

Menarget Elemen Pranala Read More

Templat Blogger yang saya gunakan dalam eksperimen ini adalah Awesome Inc., sebuah templat bawaan Blogger yang didesain oleh Tina Chen.

Langkah pertama, sebelum kita memanfaatkan layanan gratis dari CSS Button Generator di atas, adalah mencari elemen "pranala read more" ini di halaman HTML Editor Blogger.

Berdasarkan pada apa yang saya temukan, "pranala read more" ini disimpan di dalam elemen div dengan nama class jump-link. Tag HTML <a> yang digunakan "pranala read more" itu sendiri tidak memiliki class. Perhatikan baris ketiga pada gambar berikut!

Untuk mengaplikasikan properti-properti CSS3 dari CSS Button Generator, kita perlu terlebih dulu menambahkan sebuah class baru pada elemen "pranala read more" tersebut dengan nama, misalnya, readon. Hasil penambahan class baru ini tampak pada gambar berikut.

Pengaturan Tampilan Tombol di CSS Button Generator

Membuat tombol berbasis CSS (tanpa gambar) di CSS Button Generator sangatlah mudah. Kita hanya perlu mengisi beberapa kotak isian serta menggeser-geser slider untuk memproleh tampilan tombol yang kita inginkan.

Beberapa pengaturan yang bisa kita berikan saat membuat tombol CSS di situs yang layanannya juga tersedia dalam bantuk ekstensi untuk Chrome ini adalah: pengaturan warna tombol, pengaturan ketebalan dan warna garis, serta pengaturan jenis, warna, dan ukuran teks.

Setelah Anda berhasil membuka laman CSS Button Generator, tuliskan nama class  readon yang telah kita buat sebelumnya pada kotak isian CSS Class Name yang berada di bagian kolom kanan.

Pada kotak isian Button Text, tuliskan teks yang ingin Anda tampilkan pada tombol yang akan dibuat. Sebagai contoh, saya menggunakan teks berbunyi "Lanjutkan". :)

Jika Anda memilih bahasa Inggris pada pengaturan Language di halaman dasbor Blogger, teks bawaan yang akan muncul pada "pranala read more" ini adalah: "Read more". Dan akan berubah menjadi "Baca selengkapnya" jika pengaturan Language diatur ke bahasa Indonesia.

Untuk mengubah teks bawaan ini, cukup hapus bagian <data:post.jumpText/>, sebagaimana terlihat pada gambar kesatu dan kedua di atas, kemudian ganti dengan teks yang dikehendaki.

Kembali ke laman CSS Button Generator, lanjutkan dengan memberi pengaturan-pengaturan lainnya sambil memperhatikan bagaimana tombol yang Anda buat tersebut ditampilkan pada kotak berlatar abu di kolom kiri. Setelah selesai, klik tombol tersebut kemudian salin seluruh kode yang muncul di bagian bawah kotak pratampil tombol.

Berikut adalah contoh salinan kode CSS yang saya dapatkan dari CSS Button Generator. Kode yang Anda peroleh sangat mungkin berbeda! Tergantung pada pengaturan yang diberikan.

<style type="text/css">
.readon {
   -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
   -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
   box-shadow: inset 0px 1px 0px 0px #ffffff;
   background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #adc745), color-stop(1, #518015) );
   background: -moz-linear-gradient( center top, #adc745 5%, #518015 100% );
   filter:progid: DXImageTransform.Microsoft.gradient(startColorstr='#adc745', endColorstr='#518015');
   background-color: #adc745;
   -moz-border-radius: 42px;
   -webkit-border-radius: 42px;
   border-radius: 42px;
   border: 1px solid #dcdcdc;
   display: inline-block;
   color: #2d5c08;
   font-family: arial;
   font-size: 30px;
   font-weight: bold;
   padding: 6px 35px;
   text-decoration: none;
   text-shadow: 1px 1px 0px #b1c757;
}

.readon:hover {
   background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #518015), color-stop(1, #adc745) );
   background: -moz-linear-gradient( center top, #518015 5%, #adc745 100% );
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#518015', endColorstr='#adc745');
   background-color: #518015;
}

.readon:active {
   position: relative;
   top: 1px;
}
/* This imageless css button was generated by CSSButtonGenerator.com */
</style>

Sebelum Anda menempelkan kode-kode CSS di atas, hapus bagian

<style type="text/css">

yang ada di bagian paling awal kode, dan

</style>

yang ada di bagian terakhir. Untuk bagian komentar CSS

/* This imageless css button was generated by CSSButtonGenerator.com */

sebaiknya jangan dihapus, sebagai kredit untuk layanan gratis yang kita dapatkan dari CSS Button Generator.

Menempelken Kode CSS Button Generator ke Templat Blogger

Setelah bagian-bagian dari kode CSS Button Generator dihapus, seperti yang saya sebutkan, langkah berikutnya adalah menempelkannya ke templat Blogger di halaman Edit HTML, tepat sebelum ]]></b:skin>.

Selesai!

Silakan pratinjau laman blog Anda! Bagian "pranala read more" sekarang telah berubah menyerupai tombol-tombol pada aplikasi berbasis GUI.