بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
Efek Sinar Lampu Neon pada Judul Postingan Blog adalah membuat judul Postingan ketika kita sentuh dengan mouse maka akan berubah berkilau seperti mengeluarkan cahaya terang. Sungguh membuat terang judul Blog bukan?
Dengan teknik Text Shadow atau bayangan pada kata, trik ini mengandalkan CSS3 sebagai dasar utama pembentukan teks bergaya neon. Saya sebut demikian karena teks nantinya akan menyala terang.
Baca Juga : Seberapa Pentingnya Tag H1, H2, H3, H4 dan H5 di Search Engine
Pada dasarnya sebuah template akan tertera bagian perbagian yang merupakan dasar template. Ada header, outer wrapper, main wrapper, sidebar, post title, post, footer dan comment. Nah disini yang ditekankan pada Post Title.
Judul postingan dengan format .post-title {} akan kita rombak sedikit untuk memberikan efek bergaya neon ini. Jadi ketika kita memberikan judul pada postingan blog, maka efek ini akan muncul dengan sendirinya pada halaman display blog.
Baca Juga : Cara Membuat Background Posting Menjadi Berwarna-warni
Langsung saja kita buat ya efeknya.
Efek Sinar Lampu Neon di Judul Post dengan CSS3
Pertama masuk ke Blogger. Dan kemudian masuk saja ke Tema setelah itu klik Sesuaikan : Edit HTML. Sekarang kita sudah masuk ke template. Cari kode :
.post h3 {
background:transparent;
margin:10px 0 0 10px;
padding:10px 0 5px 10px;
font-size:100%;
font-weight:bold;
font-style:uppercase;
line-height:3.5em;
color:#fff;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
font-size:110%;
text-decoration:none;
font-style:uppercase;
color:#fff;
font-weight:bold;
}
.post h3 strong, .post h3 a:hover {
color:#77b842;
text-decoration:none;
}Setelah ketemu sisipkan kode dibawah ini dibawah kode text-decoration:none;. Catatan : itu sudah saya block satu paketnya. jangan keliru cara menaruhnya ya?
Jadinya nanti akan seperti ini :
.post h3 {
background:transparent;
margin:10px 0 0 10px;
padding:10px 0 5px 10px;
font-size:100%;
font-weight:bold;
font-style:uppercase;
line-height:3.5em;
color:#fff;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
font-size:110%;
text-decoration:none;
font-style:uppercase;
color:#fff;
font-weight:bold;
}
.post h3 a:hover {
color:#77b842;
text-decoration:none;
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #ff00de,
0 0 70px #ff00de,
0 0 80px #ff00de,
0 0 100px #ff00de,
0 0 150px #ff00de;
}Nah setelah semua sudah dilakukan tinggal save dan publikasikan. Pasti sudah jadi itu Judul postingan yang menyala seperti lampu neon berpijar.
Catatan :
untuk .post h3 adalah property judul postingan ya, mungkin setiap template akan berbeda-beda, jadi sebaiknya kamu back up template kamu dulu dan bila ada kesalahan, maka template kamu akan bisa dikembalikan seperti semula.
Terima kasih ya yang sudah mampir disini dan berusaha mempraktekkan cara ini. Semoga blog kamu menjadi semakin kece dan judul postingan juga menjadi menyala. Setelah artikel Efek Sinar Lampu Neon di Judul Post dengan CSS3. Saya akan mencoba dengan trik-trik yang lainnya. Sampai jumpa dan jangan pernah bosan untuk belajar. Karena belajar adalah proses hidup kita untuk menjadi yang terbaik. Best of The Best lah kata orang luar negeri sana. :D. Terima kasih sekali lagi dan Salam.
Label Postingan :
CSS
Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Efek Sinar Lampu Neon di Judul Post dengan CSS3 . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.
