Membuat Read More Variatif dan Gaya dengan Kode CSS: Panduan Blogger Spesial

Selama ini membuat read more selalu hanya itu-itu saja tanpa pernah coba dikembangkan untuk menampilkan read more  atraktif yang mampu memberikan suguhan berbeda sehingga penampilan read more juga tidak monoton dan menjadi daya tarik tersendiri yang mampu mempercantik dan memperindah penampilan blog. Belajar tentang kode html memang seharusnya disertai dengan motivasi untuk mampu mengembangkan diri sekaligus mengembangkan fungsi kode sehingga diperoleh inovasi-inovasi baru yang memberi suguhan baru pula bagi dunia perbloggeran. Memanfaatkan kode css dalam mengembangkan fungsi dan peran read more hanyalah sebagian kecil dari banyak pengembangan fungsi kode html melalui kode CSS.

Sebelum melanjutkan celoteh ringan tentang read more, mungkin sampeyan .. juga harus membaca sekelumit tips dan trik tentang read more yang mencoba mengupas sejauh mana yang harus dilakukan seorang blogger ketika mencoba menggunakan fungsi read more untuk melengkapi dan mensiasati sebuah blog. Silahkan buka

"Beberapa Tips untuk Pertimbangan Pasang Read More"

Sedikit apa yang saya sampaikan tentang read more yang link-nya tersedia telah saya sediakan di atas, semoga memberi manfaat untuk menjadi bahan pertimbangan sampeyan saat mau menggunakan read more. Untuk selanjutnya, apabila di blog sampeyan sudah menggnakan fasilitas tambahan read more, maka tinggal lanjutkan ke proses berikit yang akan saya sampaikan, sedang apa bila blog sampeyan belum memfungsikan read more, maka dengan amat terpaksa harus membuat read more terlebih dahulu. Untuk membuat read more, silahkan ikuti panduan membuat read more yang telah terpostingkan di blog ini. Ya ...., daripada harus obrak=abrik sana-sini, ... nih ...

silahkan KLIK saja di sini (langkah dan cara membuat read more)

Sebagai catatan perlu saya informasikan, bahwa Read More ini telah saya coba dan bisa berfungsi secara maksimal. Apabila telah selesai menyimpan kode html read more, silahkan halaman edit kode (edit template) , halaman posting dan halaman blog di restart terlebih dahulu supaya hasilnya terlihat.
Cara Membuat Read More Menggunakan KODE CSS :

1. Sudah Pasang Read More : Ini merupakan syarat utama, sehingga bagi yang belum pasang silahkan pasang dulu sesuai apa yang saya sampaikan di atas.
2. Fungsi Kode CSS Read More : Kode CSS ini difungsikan untuk menampilkan berbagai variasi teks read more, baik bentuk huruf, ukuran, jenis dan beberapa fungsi css lain yang mampu membuat read more tampil lebih manis.
3. Letak Kode CSS : Letakkan Kode CSS Read More di atas KODE ]]></b:skin> , sedang untuk yang template blogger baru di atas KODE ]]></b:template-skin>.
4. Tambahkan Kode : Pada Kode html Read more yang sudah digunakan, terdapat kode html :
   <a expr:href='data:post.url'>
   Rubah kode menjadi seperti di bawah ini :
   <a class='GRreadmore'expr:href='data:post.url'>
5. Amankan Template : Jangan lupa untuk selalu mengamankan template terlebih dahulu setiap melakukan perubahan desain blog. Caranya bisa dilihat dengan KLIK
   di sini (langkah dan cara membuat read more)
   .

Kode CSS Read More :

a.GRreadmore{
        margin:15px 50px;
        color:#FF0000;
        background:#666 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/blueOrangeListV36H1.gif) top repeat-x;
        text-shadow:1px 1px 1px #000;
        font-weight:bold;
        font-size:16px;
        font-family:Times New Roman;
        padding:2px 8px;
        border:2px solid #222;
        text-decoration:none;
        border-radius:5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        -o-transition:all 1s ease-out;
        -moz-transition:all 1s ease-out;
        -webkit-transition:all 1s ease-out;
        cursor:pointer;
}
a.GRreadmore:hover{
        color:#CCCC00;
        background:#888 url(https://sites.google.com/site/gubhugreyot/bgvert/bgRedGradV55H5.gif) top repeat-x;
        border:2px solid blue;
        padding-left:33px;
        padding-right:20px;
        text-decoration:blink;
        border-radius:15px;
        -moz-border-radius:15px;
        -webkit-border-radius:15px;  
        -o-transform:translate(25px, 0);
        -moz-transform:translate(25px, 0);
        -webkit-transform:translate(25px, 0);  
}

Silahkan Kode CSS tersebut anda kembangkan lagi untuk medapatkan berbagai variasi bentuk dan model read more!

Untuk mencari nama dan kode warna silahkan anda buka di alamat ini :

Tabel Nama dan Kode Warna (KLIK di sini)

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Update » Rebo LEGI, Maret, 28, 2012

» Happy Blogging - gubhugreyot «