Membuat Read More Variatif Dengan Code CSS

Banyak blogger yang menggunakan fungsi Read More/Baca Selanjutnya, semua inspirasi sobat blogger yang pernah saya kunjungi sangatlah membuat saya terkagum-kagum dengan berbagai desain dan tampilan blog yang variatif.
Buat sobat yang baru berkecimpung didunia blogger alias blogger NewBie seperti saya ini, pernahkah sobat berkeinginan atau kepikiran untuk merubah style Read More diblog sobat? Apalagi setelah blog walking keblog-blog para mastah blogger.
Sama seperti saya waktu pertama kali berkunjung ke salah satu blog, WAHHH tampilan dan designnya memukau banget, saat itu juga kepikiran dikepala saya "bagaimana caranya ya membuat tampilan blog seperti ini?" saya coba googling kesana kemari dan akhirnya ketemu, saya coba terapkan dan hasilnya bagus banget buat saya yang NewBie ini.
Yupp sudah dulu basa-basinya nanti sobat pada bosan baca tulisan saya ini, gara-gara kebanyakan basa-basi tapi tutorialnya tak kunjung nongol.
Langsung saja yuk simak.

Pertama-tama

Login dulu ke blogger sobat
Setelah masuk ke dasboard blog
Selanjutnya klik template dan edit HTML

Kedua

Tambahkan kode CSS dibawah ini

a.readmore{
        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.readmore: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);  
}

Tutorial ini khusus sobat yang sudah memasang Read More di template. Untuk Hasilnya sobat bisa lihat di blog ini.

Selamat mencoba..!

Nyus Blog

Membuat Read More Variatif Dengan Code CSS

0 Response to "Membuat Read More Variatif Dengan Code CSS"

Post a Comment