Posting ini saya buat untuk menjawab pertanyaan dari sobat Sharing TKJ Lovers. Tentang efek hover yang ada di blog saya pada sekitar kotak posting dan kotak kolom di sidebar, jika kamu arahkan kursor di sekitar area itu, di tepi area itu akan muncul warna biru atau ungu.
Untuk membuat efek ini mungkin setiap template blogger akan sedikit berbeda, namun sebenarnya sama. Caranya kita memberi kode untuk menambah efek hover bersinar di template blogger dari editor HTML kita, jika dashboard kamu tampilanya sudah berganti dengan yang baru kamu tidak akan menemukan editor HTML, jadi saya sarankan kamu ganti ke draft.blogger.com yang lama caranya cukup ketikkan url draft blogger yang lama di address bar kamu.
http://draft.blogger.com/html?blogID=(ganti dengan ID blogger kamu)
Saya akan memberi tahu bagaimana saya membuat di template blogger saya.
Pertama untuk memberi efek tersebut di tepian kotak posting saya letakkan kode di area yang di tandai dengan tulisan /* Main Content*/ ,di dalamnya ada kode untuk .entry ini adalah tampilan untuk setiap posting dari mulai background, jenis huruf, dll
Untuk menambahkan efek hover bayangan di sekitar tepi posting kamu cukup tambahkan kode
.entry:hover{-moz-box-shadow:0 0 70px #0004FF;-webkit-box-shadow:0 0 70px #0004FF;box-shadow:0 0 40px #0004FF}di sesudah kode /* Main Content*/ atau bisa juga di letakkan sebelum atau di atas kode ]]></b:skin>.
Untuk efek di bagian sidebar kita saya menambahkan kodenya di dalam kode yang bertuliskan /* The Sidebar1 */ di dalamnya terdapat kode bertuliskan .sidebar1 yang fungsinya untuk mengatur tampilan sidebar1 seperti background, jenis huruf, dll.
Sekarang kita tambahkan lagi kode untuk efek hovernya
.sidebar1:hover{-moz-box-shadow:0 0 40px #C107DC;-webkit-box-shadow:0 0 40px #C107DC;box-shadow:0 0 40px #C107DC}
kamu bisa meletakkan kode tersebut sesudah kode /* The Sidebar1 */ atau di atas (sebelum) kode ]]></b:skin>.
Dan seperti terus itu setelahnya, mudah kan ? :)
Mungkin template blogger sobat ada yang sedikit berbeda tapi sebenarnya hanya berbeda tulisanya saja serperti misalnya di template saya tulisanya .entry tapi di template sobat tulisanya .post itu bisa saja, selebihnya silakan berimprovisasi sendiri.
Silakan sedot, selamat mencoba, semoga berhasil :D
0 komentar:
Posting Komentar