Wednesday, March 12, 2014

Membuat Widget Blogspot Transparan

Sambil dengerin kompilasi lagu trance yang keren keren nan yahud semacam Lange & Cate Kanell - Fireflies dan juga lagunya Dash Berlin ft. Sarah Howells - Go It Alone (Andrew Rayel Remix), saya akan memberikan update postingan lagi, kali ini postingan saya akan menyinggung perubahan desain blog saya, yaitu bagian widget dan tombol like facebook, oke langsung saja saya catatkan disini.
Pertama saya bahas tentang membuat widget blogspot transparant, yah seperti biasalah saya cari di google, lu kira gw bikin sendiri huh? karena banyak guru-guru di dunia jagad maya yang bisa kita manfaatkan tulisannya, hanya saja kadang ditulisnya itu pake bahasa Inggris, saya cari cara membuat transparant dalam bahasa indonesia susahnya minta ampun, jangan jangan malah belum ada yang nulis, dan kadang pula saya cari artikel dalam bahasa Indonesia kadang hasilnya kurang memuaskan,

Okay Back to topic akhirnya saya cari yang kata kuncinya bahasa Inggris semisal “make blogspot transparent” lalu nyari juga pake kata kunci “make blog transparent” ya kayak gitu lah saya belajar, jadi bukan murni dari ide saya sendiri buat ngedit HTML yang rumit.
Pertama buka menu Template
Masuk Edit HTML

Sebelumnya saya jelasin apa yang saya ketahui bagaimana struktur sebuah halaman website itu, kalau kalian lihat kode HTML yang terlihat njilmet itu sebenarnya terdiri dari bagian besar yaitu bagian head yang diawali <head> kemudian ditutup dengan penutup </head>
Yang kedua bagian body yang diawali dengan kode ditutup dengan kode

</body>
Nah biar widget transparant itu yang kita edit adalah di bagian Body, lebih spesifik lagi berada diantara kode

<b:skin> dan </b:skin>


Sekarang kamu enak tuh, oleh blogspotnya kode HTMLnya udah dibuat sedemikain rupa sehingga kita enak liatnya, seperti penambahan nomor baris, penambahan spasi agar terlihat ini grup apa itu grup mana, penambahan Menu Jump to Widget buat milih widget, dsb, jaman dulu saya pake myspacenote.blogspot 2009 2010 an buat ngedit HTML tampilannya ga serapi sekarang.

Oke lanjut gan, setelah kamu masuk menu HTML, cari kata yang nyangkut nyangkut sama widget dan ketemulah kata di HTML yang namanya Sidebar, pokoknya saya tambahin / ubah properties backgroundnya menjadi background:transparent
Contohnya salah satu yang saya ubah
#sidebarbottom-wrap2 {
no-repeat $startSide bottom;
padding:0 0 13px;
background:transparent;
}

Keterangan #sidebarbottom-wrap2
Saya awalnya juga ga tau ini apa, setelah dicari-cari ternyata awalan # itu mengambil id yang didefinisikan pada bagian body, sidebarbottom-wrap itu kalo dibahasa Indonesiakan kurang lebih bungkus sidebar, kemudia dibuka dengan { yang artinya memulai properties, nah disitulah saya ubah. Biar jadi transparent.
Yang saya ubah juga lain antara lain
.sidebar .widget {

#sidebartop-wrap {

#footer-wrap2 {

Silahkan di trial and eror sendiri, saya juga demikian, soalnya saya juga ga tau persis sidebar mana yang pas, soalnya saya tau kalau sidebar h itu merujuk pada Head sidebar alias judul sidebar,
#sidebartop a:hover { itu merujuk pada tulisan pada sidebar pada saat mouse hoover / lewat di atas tulisan
#sidebartop a:visited { itu merujuk pada link yang setelah diklik itu namanya visited.
Dan lain sebagainya
Semoga berguna

No comments:

Post a Comment

mohon koreksinya apabila salah (CMIIW), silahkan berkomentar dengan baik, penulis tidak bertanggung jawab atas apa yang anda sampaikan, jadi silahkan anda bertanggung jawab dengan apa yang anda sampaikan, terima kasih telah berkunjung, semoga bermanfaat [ baca disclaimer]