۞ السَّــــــلاَمُ عَلَيْــــــكُمْ
وَرَحْمَــةُ اللــــهِ وَبَرَكَاتُــــــــــهُ ۞
۞ بســـــــــــــم اللّـــه
الرّحمٰن
الرّحيـــــــــــــم
۞
-----------------------------------------------------------------------
Oke, sekarang kita bahas satu per satu penerapan atas
penggunaaan teknik tersebut untuk beberapa elemen utama yang terdapat dalam
halaman sebuah blog, dalam hal ini adalah header, tab menu, dan footer. Namun
perlu diingat bahwa untuk menerapkan teknik ini, terlebih dahulu Anda harus
masuk ke editor template Blogger, dalam hal ini adalah dengan mengeklik menu
'Template’ >> ‘Edit HTML’ >> ‘Lanjutkan’ >> ‘Expand Template
Widget’.
Header
Untuk membuat warna gradasi pada background header dengan
model gradasi seperti contoh di atas, maka cari kode background:
$(header.background.color) $(header.background.gradient) repeat-x scroll 0
-400px; dan kemudian ganti kode tersebut dengan kode CSS di bawah ini.
border: 1px solid #3d85c6;
background: #073763;
background: -moz-linear-gradient( center top, white 50%,
#3d85c6 100% );
background: -webkit-gradient( linear, left top, left bottom,
color-stop(.2, white), color-stop(1, #3d85c6) );
Tab Menu
Seperti teknik di atas, untuk mengubah tab menu dengan warna
gradasi, maka cari kode background: $(tabs.background.color)
$(tabs.background.gradient) repeat-x scroll 0 -800px; dan kemudian ganti kode
tersebut dengan kode CSS di bawah ini.
border: 1px solid #3d85c6;
background: #073763;
background: -moz-linear-gradient( center top, white 30%,
#3d85c6 100% );
background: -webkit-gradient( linear, left top, left bottom,
color-stop(.2, white), color-stop(1, #3d85c6) );
Selanjutnya untuk memberikan efek hover atau efek yang
tampil ketika mouse pointer diletakkan di atas salah satu menu yang ada, maka
cari kode background-color: $(tabs.selected.background.color); dan kemudian
ganti kode tersebut dengan kode CSS di bawah ini.
background: #0b5394;
background: -moz-linear-gradient( center top, white 60%,
#3d85c6 100% );
background: -webkit-gradient( linear, left top, left bottom,
color-stop(.2, white), color-stop(1, #3d85c6) );
Footer
Sedangkan untuk membuat warna gradasi pada footer, maka cari
kode background: $(footer.background); dan kemudian ganti kode tersebut dengan
kode CSS di bawah ini.
border: 1px solid #3d85c6;
background: #073763;
background: -moz-linear-gradient( center top, white 50%,
#3d85c6 100% );
background: -webkit-gradient( linear, left top, left bottom,
color-stop(.2, white), color-stop(1, #3d85c6) );
Kemudian perlu saya tegaskan sekali lagi bahwa contoh yang
digunakan dalam pembahasan ini adalah menggunakan model background dengan warna
gradasi yang sama, sehingga apabila diterapkan pada blog yang Anda kelola, maka
tentunya Anda harus menyesuaikan kombinasi warna yang digunakan sesuai dengan
desain atau model tampilan halaman blog yang Anda kelola. Dalam hal ini adalah
dengan cara mengganti beberapa kode warna yang digunakan seperti #073763;
#3d85c6, #0b5394, dan juga white dengan kode dan atau warna lain yang sesuai.
Perlu diingat pula bahwasanya teknik tersebut hanya dapat diterapkan pada
template bawaan Blogger dan tidak berlaku untuk custom template, karena bisa
jadi template yang dimaksud memiliki desain atau struktur kode yang berbeda.
Selanjutnya untuk mepermudah Anda yang belum memahami bahasa pemrograman,
silakan buka artikel yang berjudul "Beberapa Contoh Kode CSS Dan HTML
Untuk Membuat Gradasi Warna Pada Background" untuk melihat beberapa contoh
kombinasi warna beserta kode CSS maupun kode HML-nya.
Semoga berguna dan bermanfaat.
Salam.
۞
الحمد
لله
ربّ
العٰلمين
۞
-----------------------------------------------------------------------
BERANDAKU
0 comment:
Posting Komentar