Ada berbagai keuntungan menyimpan file (hosting) di Googlepages. Selain karena pertimbangan utama yakni tak berbayar (gratis) faktor terkuat lainnya adalah kemudahan upload (unggah) file. Hal ini juga didukung dengan server googlepages yang masih milik Raksasa Google. Jadi saat kita memiliki blog di blogspot yang notabene masih menginduk ke Google, pemanggilan file di googlepages juga lebih stabil. Jarang sekali googlepages dalam keadaaan gagal akses.
Namun, beberapa saat lalu, google memang mengabarkan isu yang kini memang sudah mendekati kenyataan. Mereka akan meniadakan layanan googlepages dan menggantinya dengan layanan yang sudah ada, googlesites. Apa perbedaan yang membuat kita mesti bersiap-siap beralih (secara paksa) ke layanan baru?
- Tak mendukung hosting file berjenis JS (javascript) dan CSS (Cascading Style Sheet)
Meski hanya 2 file ini yang tak didukung, namun kabar ini justru paling vital. Tak sedikit para pembuat layout atau template blogger yang menyimpan file berjenis gambar, dan juga CSS ke googlepages. Dengan dialihkannya dukungan ini maka file kita yang ada di googlepages dengan ekstensi .js maupun .css akan hilang begitu saja saat migrasi dilakukan.
Migrasi yang dimaksud disini adalah migrasi otomatis, dimana meski kita acuhkan untuk berpindah secara manual, maka file-file kita akan dikumpulkan ke dalam direktori terpisah, minus file-file yang tidak didukung tadi (css dan js).
Jadi, segera back up dan unduh file tersebut dan pindahkan ke hosting lain.
Posting terkait :
- Upload favicon ke googlepages.
Tampilkan postingan dengan label CSS. Tampilkan semua postingan
Tampilkan postingan dengan label CSS. Tampilkan semua postingan
Googlepages Bermigrasi ke Googlesites
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
CSS : Add Border to Sidebar
Template maupun layout bawaan Blogger memang banyak yang menawarkan tampilan polos. Hanya kekayaan pilihan warna, sajian gambar di header yang berbeda, maupun latar (background) yang bergambar.
Beberapa pengguna blogger yang pada awalnya "terpaksa" untuk menggunakan pilihan yang ada, pada akhirnya banyak mencari cara untuk mengkustom tampilan agar bisa tampil beda.
Misalnya memberikan sentuhan border atau garis pemisah, agar tampilan blog yang polos bisa memiliki batas yang tegas antara bagian postingan dan sidebar.
Nah kali ini kita akan menggunakan metode CSS untuk mewujudkan keinginan ini. Setelah itu kita akan menentukan dibagian mana kode CSS tersebut hendak dipasang. Biasanya, untuk memudahkan pemberian batas ini, kita akan mencari nama class atau div sidebar. Dengan alasan hampir semua template atau layout bawaan blogger menyertakannya.
Pertama adalah mencari bagian yang menyebut Sidebar pada bagian CSS. Misalnya bagian ini dideklarasikan dengan nama #sidebar.
Di bagian ini kita terbiasa menemui bagian seperti width (untuk menyebut lebar kolom samping atau sidebar), float (untuk menyebut arah kolom sidebar pada keseluruhan tampilan), atau juga padding (baik right atau left untuk menyebut spasi pembatas).
Nah untuk menambahkan border dibagian sidebar, kita akan membutuhkan kode berikut untuk ditambahkan :
Keterangan :
- border-left-width: 1px; (untuk menyebut lebar pembatas dalam satuan pixel)
- border-left-style: solid; (solid adalah contoh tampilan pembatas, dalam hal ini solid disamakan dengan bentuk lurus tanpa potongan)
- border-left-color: #B5CF53; (kode hexa #B5CF53 untuk menyebut warna tertentu)
Jadi secara keseluruhan, bila kita memiliki kode kode CSS berikut di template/layout :
maka untuk memberi border, kita akan menuntaskannya menjadi :
Tak lupa, kode tersebut bisa kita temukan pada bagian Edit HTML. Tuju bagian CSS untuk mencari nama Sidebar ya....
Oh ya, untuk style, selain solid kita juga bisa menggunakan nilai lain seperti : dotted (berbentuk bintik-bintik berupa kotak kecil), dashed (hampir sama dengan dotted hanya saja lebih renggang dan besar ukuran dotted-nya), double (berupa dua garus solid berjajar) dan lain-lain.
Kabarkan ke teman blog ini
Free Tell-a-Friend by Bravenet.com
Beberapa pengguna blogger yang pada awalnya "terpaksa" untuk menggunakan pilihan yang ada, pada akhirnya banyak mencari cara untuk mengkustom tampilan agar bisa tampil beda.
Misalnya memberikan sentuhan border atau garis pemisah, agar tampilan blog yang polos bisa memiliki batas yang tegas antara bagian postingan dan sidebar.
Nah kali ini kita akan menggunakan metode CSS untuk mewujudkan keinginan ini. Setelah itu kita akan menentukan dibagian mana kode CSS tersebut hendak dipasang. Biasanya, untuk memudahkan pemberian batas ini, kita akan mencari nama class atau div sidebar. Dengan alasan hampir semua template atau layout bawaan blogger menyertakannya.
Pertama adalah mencari bagian yang menyebut Sidebar pada bagian CSS. Misalnya bagian ini dideklarasikan dengan nama #sidebar.
Di bagian ini kita terbiasa menemui bagian seperti width (untuk menyebut lebar kolom samping atau sidebar), float (untuk menyebut arah kolom sidebar pada keseluruhan tampilan), atau juga padding (baik right atau left untuk menyebut spasi pembatas).
Nah untuk menambahkan border dibagian sidebar, kita akan membutuhkan kode berikut untuk ditambahkan :
border-left-width: 1px;
border-left-style: solid;
border-left-color: #B5CF53;
Keterangan :
- border-left-width: 1px; (untuk menyebut lebar pembatas dalam satuan pixel)
- border-left-style: solid; (solid adalah contoh tampilan pembatas, dalam hal ini solid disamakan dengan bentuk lurus tanpa potongan)
- border-left-color: #B5CF53; (kode hexa #B5CF53 untuk menyebut warna tertentu)
Jadi secara keseluruhan, bila kita memiliki kode kode CSS berikut di template/layout :
padding-left: 5px;
padding-right: 5px;
font-size: 13px;
width:150px;
float:right;
maka untuk memberi border, kita akan menuntaskannya menjadi :
padding-left: 5px;
padding-right: 5px;
font-size: 13px;
width:150px;
float:right;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #B5CF53;
Tak lupa, kode tersebut bisa kita temukan pada bagian Edit HTML. Tuju bagian CSS untuk mencari nama Sidebar ya....
Oh ya, untuk style, selain solid kita juga bisa menggunakan nilai lain seperti : dotted (berbentuk bintik-bintik berupa kotak kecil), dashed (hampir sama dengan dotted hanya saja lebih renggang dan besar ukuran dotted-nya), double (berupa dua garus solid berjajar) dan lain-lain.
Kabarkan ke teman blog ini
Free Tell-a-Friend by Bravenet.com
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
CSS : Change Your LI Type with Background Image
Di kesempatan sebelumnya, edittag pernah menulis mengenai type UL di dalam file xml Blogger. Disitu juga tersebut adanya pembatasan tipe untuk menampilkan tampilan daftar item (list item).
Lalu bagaimana agar kita punya tampilan yang berbeda, tak mau hanya terima dengan apa yang ditawarkan pihak Blogger? Untuk urusan UL dan LI sebenarnya kita bisa melakukan perombakan tampilanya melalui CSS.
Yakni dengan penambahan background pada atribut LI. Namun penggunaan cara ini memang masih menyisakan masalah klasik bagi sebagian perambah (browser). Bukan berarti tak semuanya tak mampu mendukung CSS ul dan li, karena bila kita sempat melongok beberapa layout atau template bawaan blogger, beberapa diantaranya menyertakan CSS background untuk LI.
Biasanya di layout baku (bawaan blogger) kita seringkali melihatnya di bagian CSS yang disebut sebagai Typography : Main entry. Coba lihatlah bagian CSS berlabel komentar seperti diatas. Masuk ke dasboard, lalu klik Layout, dan tuju Edit HTML. Lalu coba turun kebawah hingga menemukan kode seperti ini :
.post li {
line-height:1.5em;
list-style:none;
background:url("http://www.blogblog.com/scribe/list_icon.gif") no-repeat 0px
Hasilnya tentu sama-sama bisa dilihat. Bila dalam suatu postingan terselipkan kode UL dan LI maka akan ada tampilan gambar bulatan (list_icon.gif) didepannya. Tentu ini berlaku bila kita tak menambahkan type dibelakang LI. Atau dalam hal ini diwakili oleh kode CSS diatas, yakni : list-style:none;.
Bila kita memiliki gambar lain sebagai pengganti ikon LI ini (lebih bagus bila ukuranya 10*10 pixel), kita bisa menunggahnya terlebih dahulu. Bisa kita mengunggahnya dengan metode seperti di profile atau di googlepages. Lalu salin alamat URL file gambar tersebut. Dan gantikan pada bagian background:url.
Hingga misalnya akan menjadi :
.post li {
line-height:1.5em;
list-style:none;
background:url("http://eninesia.googlepages.com/bullet_e.gif") no-repeat 0px
Tak lupa untuk menyimpan layoutnya bila sudah diedit.
Untuk menyimak hasilnya, bisa dilihat contoh berikut :
Kabarkan ke teman blog ini
Free Tell-a-Friend by Bravenet.com
Lalu bagaimana agar kita punya tampilan yang berbeda, tak mau hanya terima dengan apa yang ditawarkan pihak Blogger? Untuk urusan UL dan LI sebenarnya kita bisa melakukan perombakan tampilanya melalui CSS.
Yakni dengan penambahan background pada atribut LI. Namun penggunaan cara ini memang masih menyisakan masalah klasik bagi sebagian perambah (browser). Bukan berarti tak semuanya tak mampu mendukung CSS ul dan li, karena bila kita sempat melongok beberapa layout atau template bawaan blogger, beberapa diantaranya menyertakan CSS background untuk LI.
Biasanya di layout baku (bawaan blogger) kita seringkali melihatnya di bagian CSS yang disebut sebagai Typography : Main entry. Coba lihatlah bagian CSS berlabel komentar seperti diatas. Masuk ke dasboard, lalu klik Layout, dan tuju Edit HTML. Lalu coba turun kebawah hingga menemukan kode seperti ini :
.post li {
line-height:1.5em;
list-style:none;
background:url("http://www.blogblog.com/scribe/list_icon.gif") no-repeat 0px
Hasilnya tentu sama-sama bisa dilihat. Bila dalam suatu postingan terselipkan kode UL dan LI maka akan ada tampilan gambar bulatan (list_icon.gif) didepannya. Tentu ini berlaku bila kita tak menambahkan type dibelakang LI. Atau dalam hal ini diwakili oleh kode CSS diatas, yakni : list-style:none;.
Bila kita memiliki gambar lain sebagai pengganti ikon LI ini (lebih bagus bila ukuranya 10*10 pixel), kita bisa menunggahnya terlebih dahulu. Bisa kita mengunggahnya dengan metode seperti di profile atau di googlepages. Lalu salin alamat URL file gambar tersebut. Dan gantikan pada bagian background:url.
Hingga misalnya akan menjadi :
.post li {
line-height:1.5em;
list-style:none;
background:url("http://eninesia.googlepages.com/bullet_e.gif") no-repeat 0px
Tak lupa untuk menyimpan layoutnya bila sudah diedit.
Untuk menyimak hasilnya, bisa dilihat contoh berikut :
- Pertama
- Kedua
Kabarkan ke teman blog ini
Free Tell-a-Friend by Bravenet.com
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
CSS : Bottom Navbar
Bagaimana memasang navbar di bagian paling bawah blog, sekaligus memunculkanya selalu mesti halaman tergulung ke atas/bawah (<i>scroll up/down</i>)?
Navbar...tedengar akrab di telinga kan? Kita sering mendefinisikan navbar sebagai sebuah lajur horisontal setinggi 30 pixel yang terletak tepat di <i>ubun-ubun</i> blog yang beralamat di blogspot. Tentu paham kan? edittag juga sempat membahas gosip berkenaan dengan keberadaannya.
Nah bila kini muncul istilah navbar bawah, maka jangan terlanjur curiga dengan mencari-cari di bagian bawah blog, karena memang tak akan menemuinya di blog standar. Istilah ini lahir untuk memudahkan penyebutan terhadap baris yang sama seperti tampilan navbar, namun penampakanya sesuai dengan namanya, berada di bagian bawah blog.
Sangat tepat untuk memasang label karya cipta (copyright) atau sekedar penyampain kredit terima kasih untuk pendukung layanan tertentu.
Ada beberapa penyesuain kode CSS untuk menambahkan navbar ini. Kita bisa memasangnya menjadi satu di bagian #footer, atau juga menciptakan sebuah id baru untuk menyebut navbar ini. Ini juga punya kelebihan agar tak bertubrukan dengan kode CSS lainya bila misalnya kita menggabungkan dengan bagian #footer.
Salin kode CSS berikut di bagian CSS blog kita. Bisa ditempatkan di bagian mana saja selama diatas </head>. Tentu setelah kita mengklik tautan Edit HTML di blog yang akan kita tambahkan.
/* Navbar-bawah
----------------------------------------------- */
#bottom-navbar p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:150px;
line-height: 1.2;
vertical-align: bottom;
}
#bottom-navbar p.desc {
float: right;
padding-right:150px;
line-height: 1.5;
height: 100%;
vertical-align: bottom;
}
#bottom-navbar {
align: center;
position: fixed;
border-top: 1px solid #ccc;
border-bottom: 5px solid #ccc;
background-color: #fff;
width: 100%;
left: 2px;
text-align: center;
color: #000;
font-family: verdana;
font-size: 12px;
opacity: 0.9;
filter: alpha(opacity: 90);
z-index:10000;
bottom:0;
}
Setelah itu kita langsung menuju ke bagian paling bawah di Edit HTML, cari bagian paling bawah sebelum </body> Disinilah kita akan menampilan tulisan sebagai konten yang akan termuat di bagian navbar-bawah.
<div id='bottom-navbar'>
<p>
copyright : <a href='http://alamatblogku.blogspot.com'><b>Blogku</b></a></p> |
<p class='desc'>Powered by <a href='http://www.blogger.com'>Blogger</a>
<br/>
</p>
</div>
Setelah itu kita bisa mencoba mengintip hasilnya dengan menekan tombol <b>[Pratinjau]</b>. Bila puas akan hasilnya bisa langsung tekan tombol <b>[Simpan Template]</b>.
Bagi yang masih ingin mengutak atik bagian ini, kita juga bisa menambahkan gambar misalnya. Tinggal kita sesuaikan dengan penambahan CSS penyertanya.
Kabarkan ke teman blog ini
Free Tell-a-Friend by Bravenet.com
Navbar...tedengar akrab di telinga kan? Kita sering mendefinisikan navbar sebagai sebuah lajur horisontal setinggi 30 pixel yang terletak tepat di <i>ubun-ubun</i> blog yang beralamat di blogspot. Tentu paham kan? edittag juga sempat membahas gosip berkenaan dengan keberadaannya.
Nah bila kini muncul istilah navbar bawah, maka jangan terlanjur curiga dengan mencari-cari di bagian bawah blog, karena memang tak akan menemuinya di blog standar. Istilah ini lahir untuk memudahkan penyebutan terhadap baris yang sama seperti tampilan navbar, namun penampakanya sesuai dengan namanya, berada di bagian bawah blog.
Sangat tepat untuk memasang label karya cipta (copyright) atau sekedar penyampain kredit terima kasih untuk pendukung layanan tertentu.
Ada beberapa penyesuain kode CSS untuk menambahkan navbar ini. Kita bisa memasangnya menjadi satu di bagian #footer, atau juga menciptakan sebuah id baru untuk menyebut navbar ini. Ini juga punya kelebihan agar tak bertubrukan dengan kode CSS lainya bila misalnya kita menggabungkan dengan bagian #footer.
Salin kode CSS berikut di bagian CSS blog kita. Bisa ditempatkan di bagian mana saja selama diatas </head>. Tentu setelah kita mengklik tautan Edit HTML di blog yang akan kita tambahkan.
/* Navbar-bawah
----------------------------------------------- */
#bottom-navbar p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:150px;
line-height: 1.2;
vertical-align: bottom;
}
#bottom-navbar p.desc {
float: right;
padding-right:150px;
line-height: 1.5;
height: 100%;
vertical-align: bottom;
}
#bottom-navbar {
align: center;
position: fixed;
border-top: 1px solid #ccc;
border-bottom: 5px solid #ccc;
background-color: #fff;
width: 100%;
left: 2px;
text-align: center;
color: #000;
font-family: verdana;
font-size: 12px;
opacity: 0.9;
filter: alpha(opacity: 90);
z-index:10000;
bottom:0;
}
Setelah itu kita langsung menuju ke bagian paling bawah di Edit HTML, cari bagian paling bawah sebelum </body> Disinilah kita akan menampilan tulisan sebagai konten yang akan termuat di bagian navbar-bawah.
<div id='bottom-navbar'>
<p>
copyright : <a href='http://alamatblogku.blogspot.com'><b>Blogku</b></a></p> |
<p class='desc'>Powered by <a href='http://www.blogger.com'>Blogger</a>
<br/>
</p>
</div>
Setelah itu kita bisa mencoba mengintip hasilnya dengan menekan tombol <b>[Pratinjau]</b>. Bila puas akan hasilnya bisa langsung tekan tombol <b>[Simpan Template]</b>.
Bagi yang masih ingin mengutak atik bagian ini, kita juga bisa menambahkan gambar misalnya. Tinggal kita sesuaikan dengan penambahan CSS penyertanya.
Kabarkan ke teman blog ini
Free Tell-a-Friend by Bravenet.com
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
CSS : Picture Blocking by Background
Pernahkah merasa meletakkan gambar di posisi yang tepat namun gambar tak kunjung muncul? Tak perlu merasa frustasi dengan keadaan seperti ini. Ada baiknya melakukan pengecekan akan sintak HTML maupun CSS yang ada di template kita.
Salah satu atribut dalam CSS yang jamak digunakan oleh pencipta template blog adalah menyertakan nilai top ke dalam background image. Dengan tambahan nilai ini maka mau tak mau gambar yang akan dijadikan sebagai bacground akan muncul di posisi paling atas hingga mudah untuk melakukan pemasangan gambar. Namun ini bisa jadi membawa petaka bagi kita yang suka mengedit tampilan blog.
Berikut adalah salah satu tampilan blog yang menggunakan atribut top dan hasilnya bila memasang efek javascript "rain drop" yang pernah dibahas edittag.
Disini terlihat gambar logo edittag tak mampu menembus gambar yang dijadikan background. Gambar logo akan jatuh dalam posisi dibelakang background. Cukup bisa menipu mata. Padahal gambar meluncur jatuh di posisi yang sama dimana gambar background juga bercokol. Untuk "memaksa" agar gambar logo tersebut muncul di atas/depan gambar background ada baiknya edit bagian CSS yang menyebut posisi image background tersebut berada.
Berikut kode CSS-nya :
Hilangkan tulisan merah agar posisi gambar background tak lagi menutupi materi gambar di posisi yang sama. Hingga akan muncul seperti berikut :
Salah satu atribut dalam CSS yang jamak digunakan oleh pencipta template blog adalah menyertakan nilai top ke dalam background image. Dengan tambahan nilai ini maka mau tak mau gambar yang akan dijadikan sebagai bacground akan muncul di posisi paling atas hingga mudah untuk melakukan pemasangan gambar. Namun ini bisa jadi membawa petaka bagi kita yang suka mengedit tampilan blog.
Berikut adalah salah satu tampilan blog yang menggunakan atribut top dan hasilnya bila memasang efek javascript "rain drop" yang pernah dibahas edittag.
Disini terlihat gambar logo edittag tak mampu menembus gambar yang dijadikan background. Gambar logo akan jatuh dalam posisi dibelakang background. Cukup bisa menipu mata. Padahal gambar meluncur jatuh di posisi yang sama dimana gambar background juga bercokol. Untuk "memaksa" agar gambar logo tersebut muncul di atas/depan gambar background ada baiknya edit bagian CSS yang menyebut posisi image background tersebut berada.
Berikut kode CSS-nya :
background:url(gambarbackground.gif) top left repeat-x #d43402;
Hilangkan tulisan merah agar posisi gambar background tak lagi menutupi materi gambar di posisi yang sama. Hingga akan muncul seperti berikut :
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
CSS : CSS Tag on New Blogger Navbar
Ada 2 hal yang menjadikan posting kali ini canggung untuk disampaikan.
Pertama, mengenai kemampuan CSS untuk menghilangkan navbar di blogger baru.
Dan yang kedua (sayangnya, ini pula yang kontradiksinya), adalah cara untuk menghilangkan navbar.
Bila ditanya dari segi teknis, kode CSS untuk menghilangkan navbar di blogger baru (meski kita gunakan mode template klasik) adalah hal yang sangat memungkinkan. Hal yang menjadi kabur adalah digunakannya sintak dengan penamaan yang berbeda oleh Google dibanding di blogger lama. Jadi kedigdayaannya untuk menghilangkan navbar juga setangguh untuk melenyapkannya di versi sebelumnya. Sekaligus ini menjawab pertanyaan rekan yang menemukan kembali navbarnya begitu migrasi ke versi baru (mestikah kita bangga atau sedih karenanya?).
Namun sebelum melangkah lebih jauh, ada baiknya juga untuk mengingat posting sebelumnya untuk menghargai pengalokasian tempat yang berada di bagian paling atas di blog kita untuk diserahkan ke pihak pemiliknya. Dengan demikian edittag tak mau ditunjuk sebagai salah satu penyebar cara untuk menghilangkannya, namun sebatas memberitahukan perbedaan sintak ini. Setuju?
Baiklah kita lanjutkan.
Bila kita gunakan kode CSS untuk menghilangkan bagian navbar, di versi sebelumnya kita temukan sintak #b-navbar, maka di versi barunya hanya diubah menjadi #navbar-iframe.
Jadi perhatikan perbedaan keduanya, dan coba untuk menyesuaikan dengan versi barunya.
Sekali lagi, jangan anggap ini untuk mengajarkan hal yang tak perlu dilakukan ya..karena ini bukan memberitahu bagaimana menghilangkannya, namun mengabarkan penggantian nama sintak CSS saja....:D
Pertama, mengenai kemampuan CSS untuk menghilangkan navbar di blogger baru.
Dan yang kedua (sayangnya, ini pula yang kontradiksinya), adalah cara untuk menghilangkan navbar.
Bila ditanya dari segi teknis, kode CSS untuk menghilangkan navbar di blogger baru (meski kita gunakan mode template klasik) adalah hal yang sangat memungkinkan. Hal yang menjadi kabur adalah digunakannya sintak dengan penamaan yang berbeda oleh Google dibanding di blogger lama. Jadi kedigdayaannya untuk menghilangkan navbar juga setangguh untuk melenyapkannya di versi sebelumnya. Sekaligus ini menjawab pertanyaan rekan yang menemukan kembali navbarnya begitu migrasi ke versi baru (mestikah kita bangga atau sedih karenanya?).
Namun sebelum melangkah lebih jauh, ada baiknya juga untuk mengingat posting sebelumnya untuk menghargai pengalokasian tempat yang berada di bagian paling atas di blog kita untuk diserahkan ke pihak pemiliknya. Dengan demikian edittag tak mau ditunjuk sebagai salah satu penyebar cara untuk menghilangkannya, namun sebatas memberitahukan perbedaan sintak ini. Setuju?
Baiklah kita lanjutkan.
Bila kita gunakan kode CSS untuk menghilangkan bagian navbar, di versi sebelumnya kita temukan sintak #b-navbar, maka di versi barunya hanya diubah menjadi #navbar-iframe.
Jadi perhatikan perbedaan keduanya, dan coba untuk menyesuaikan dengan versi barunya.
Sekali lagi, jangan anggap ini untuk mengajarkan hal yang tak perlu dilakukan ya..karena ini bukan memberitahu bagaimana menghilangkannya, namun mengabarkan penggantian nama sintak CSS saja....:D
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
CSS : HighLight Important Text on The Box
Terinspirasi tampilan di blognya Wicky dalam salah satu postingnya yang menampilkan teks penting yang terbungkus di dalam kotak laiknya tampilan di surat kabar, kali ini edittag coba membidiknya dari sisi CSS.
Kode berikut akan memasung tek yang kita anggap penting dimunculkan dalam sebuah kotak dengan harapan teks tersebuat akan mewakili isi postingan kita dengan penataan disebalah kanan posting.
Berikut kodenya :
<div style="background-color:#00A2C6;color:#fff; width:200px;float: right;border-top: 2px solid #000; border-bottom: 2px solid #000; padding: 5px;margin-left:15px;">Isi teks yang kita anggap penting.</div>
Contoh dari penggunaan kode ini seperti terpampang di bagian atas posting ini.Dengan demikian isi dari posting kita akan lebih mudah dikenali oleh pengunjung.Tak sekedar judul posting yang bisa mewakili isi dari posting yang kita tulis, namun dengan cara ini kita bisa menyuguhkan pesan utama atau pesan yang ingin kita garis bawahi.
Catatan :
background-color akan mewakili warna bacground dalam kotak,
color mewakili warna teks dalam kotak,
width mewakili luas dari lebar kotak,
float mewakili letak penampilan (apakah di kanan atau kiri),
Sila dicoba.
Kode berikut akan memasung tek yang kita anggap penting dimunculkan dalam sebuah kotak dengan harapan teks tersebuat akan mewakili isi postingan kita dengan penataan disebalah kanan posting.
Kode berikut akan memasung tek yang kita anggap penting dimunculkan dalam sebuah kotak dengan harapan teks tersebuat akan mewakili isi postingan kita dengan penataan disebalah kanan posting.
Berikut kodenya :
<div style="background-color:#00A2C6;color:#fff; width:200px;float: right;border-top: 2px solid #000; border-bottom: 2px solid #000; padding: 5px;margin-left:15px;">Isi teks yang kita anggap penting.</div>
Contoh dari penggunaan kode ini seperti terpampang di bagian atas posting ini.Dengan demikian isi dari posting kita akan lebih mudah dikenali oleh pengunjung.Tak sekedar judul posting yang bisa mewakili isi dari posting yang kita tulis, namun dengan cara ini kita bisa menyuguhkan pesan utama atau pesan yang ingin kita garis bawahi.
Catatan :
background-color akan mewakili warna bacground dalam kotak,
color mewakili warna teks dalam kotak,
width mewakili luas dari lebar kotak,
float mewakili letak penampilan (apakah di kanan atau kiri),
Sila dicoba.
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
CSS : UL and LI for Previous Post
Blogspot mencantumkan konten Profile, Previous Post, Archives dan Links di bagian Sidebar, atau bagian sisi kanan / kiri dalam sebuah blog.Khusus untuk bagian Previous Post, Archives dan Links yang mengurut daftar isinya menjadi beberapa tautan yang aktif, maka kita bisa melihat daftar tersebut ditampilkan menjadi barisan yang disusun ke bawah.Hal ini berkat penggunaan kode HTML <ul> dan <li>.
UL merupakan singkatan dari Unordered List, sedangkan LI adalah List Item.Jadi keduanya akan dimunculkan dalam satu daftar rincian item yang sekategori.
Secara default maka bila kita menggunakan UL dan LI kita akan melihat daftar item dibawah nama kategori akan dimunculkan menjorok ke dalam.Pada beberapa pemilik blogspot, penampilan ini sering diakali untuk diurut secara lebih rapi.Yakni nama kategori dan list dibawahnya berada dalam kolom yang sejajar.Untuk itu, bila kita ingin merapikan bagian item ke dalam satu baris yang sama dengan nama kategorinya kita membutuhkan bantuan CSS.
Berikut ini gambar untuk memudahkan pemahaman di atas.
keterangan : previous post adalah nama kategori, sedangkan etika (akhlak)pemimpin dan list dibawahnya termasuk golongan list item
Gambar sebelah kiri ini dimaksud dengan tampilan list dengan format default.Sedangkan gambar pada sisi kanan adalah tampilan setelah menggunakan bantuan tag CSS.Untuk itu kita bisa menambahkan atribut margin di dalam kode CSS template.
#sidebar ul {
background:url("http://photos1.blogger.com/blogger/4452/1518/320/divider.gif") no-repeat center bottom;
margin:0 0 15px; /* ini berarti margin atas 0 kanan dan kiri 0 bawah 15px */
}
Dengan tag CSS diatas maka tampilan list item dibawah nama kategori dalam sidebar akan diberi rapat kanan dan kiri 0px, yang berarti akan ditampilkan sejajar dengan nama kategori.
Pengaruh penggunaan atribut CSS dalam UL dan LI ini akan semakin terlihat rapi terutama pada beberapa blog yang memiliki list yang mengandung teks/huruf yang panjang, seperti pada Previous Post dan Links.Dengan begitu pemenggalan tautan akan menjadi semakin kentara.
UL merupakan singkatan dari Unordered List, sedangkan LI adalah List Item.Jadi keduanya akan dimunculkan dalam satu daftar rincian item yang sekategori.
Secara default maka bila kita menggunakan UL dan LI kita akan melihat daftar item dibawah nama kategori akan dimunculkan menjorok ke dalam.Pada beberapa pemilik blogspot, penampilan ini sering diakali untuk diurut secara lebih rapi.Yakni nama kategori dan list dibawahnya berada dalam kolom yang sejajar.Untuk itu, bila kita ingin merapikan bagian item ke dalam satu baris yang sama dengan nama kategorinya kita membutuhkan bantuan CSS.
Berikut ini gambar untuk memudahkan pemahaman di atas.
keterangan : previous post adalah nama kategori, sedangkan etika (akhlak)pemimpin dan list dibawahnya termasuk golongan list item
Gambar sebelah kiri ini dimaksud dengan tampilan list dengan format default.Sedangkan gambar pada sisi kanan adalah tampilan setelah menggunakan bantuan tag CSS.Untuk itu kita bisa menambahkan atribut margin di dalam kode CSS template.
#sidebar ul {
background:url("http://photos1.blogger.com/blogger/4452/1518/320/divider.gif") no-repeat center bottom;
margin:0 0 15px; /* ini berarti margin atas 0 kanan dan kiri 0 bawah 15px */
}
Dengan tag CSS diatas maka tampilan list item dibawah nama kategori dalam sidebar akan diberi rapat kanan dan kiri 0px, yang berarti akan ditampilkan sejajar dengan nama kategori.
Pengaruh penggunaan atribut CSS dalam UL dan LI ini akan semakin terlihat rapi terutama pada beberapa blog yang memiliki list yang mengandung teks/huruf yang panjang, seperti pada Previous Post dan Links.Dengan begitu pemenggalan tautan akan menjadi semakin kentara.
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
CSS : Resize Main Section on Blogger
Ada kalanya tampilan gambar menjadi komponen yang penting dalam sebuah blog.Bahkan konsentrasinya mampu mengalahkan bagian lain dalam sebuah blog.Tak salah bila gambar dipercaya bisa berkata "lebih" dari sekedar kata-kata.
Ini pula yang menjangkiti pikiran pemilik blog yang catatannya kaya akan tampilan gambar.Sebut saja juru kamera, ibu-ibu yang ingin menampilkan poto anak dan keluarganya, atau juga penggila desain grafis atau grafiti yang kini kian marak di dunia blog.
Dan pertanyaannya sekarang manjadi "bagaimana melebarkan bagian konten, bagian template mana yang perlu diedit?"...untuk itu akan segera kita bahas.Namun ini lebih banyak ke kasuistik, tergantung penyedia template dan jenis kode yang digunakan.Untuk lebih mudahnya saya mengambil salah satu template yang sudah digunakan oleh tanty dengan nama template Minima.
Berikut yang perlu kita perhatikan.
1. Content
Biasanya ini ditandai dengan deskripsi /* Content pada bagian CSS.Untuk kasus Minima, content menggunakan lebar 660 px.Biaanya ditandai dengan #Content.Bagian ini meliputi keseluruhan lebar tampilan blog, baik di main maupun sidebar.Bila bagian gambar yang berada di postingan kita ingin memiliki space lebih luas, maka bagian ini perlu kita tambahkan lebarnya.Dalam kasus ini kita akan ganti menjadi 890px.(sekedar catatan, dengan resolusi komputer 1024 * 768 yang banyak digunakan sekarang, angka 890 masih menyisakan ruang yang cukup di bagian kanan dan kiri.
2. Main
Bagian main adalah bagian yang meliputi bagian judul postingan, isi postingan, komentar ,dan penunjuk waktu.Biasanya ditandai dengan #Main.Nah disinilah yang mesti kita berikan space lebih untuk gambar.Bila gambar digeneralisasikan punya lebar seukuran VGA (640*480) maka kita bisa memberi angka 640px dibagian ini.
3. Sidebar
Bagian ini meliputi profile, recent post, links dan tool tambahan seperti shout.Berada di bagian samping kanan (untuk kasus minima).Bagian ini bisa kita biarkan ke nilai 220px.
4. Header
Bagian ini diedit untuk menggenapkan dan merapihkan agar sesuai dengan lebar Content.Biasanya ditandai dengan /* Header.Isikan nila lebar header sesuai dengan lebar Content.Bila kita ganti content ke 890, maka bagian ini juga menggunakan nilai 890.
Setelah itu save template kita dan periksa hasilnya.Hanya saja perlu kita perhatikan bila kita total memiliki lebar 890, sedang posisi main dan sidebar total membutuhkan lebar 860, maka kita memiliki ruang selebar 30 px sebagai pembatas antara bagian Main dan Sidebar agar tidak saling menempel satu sama lainnya.
Berikut tampilan hasil pada saat belum diedit lebarnya (660px):
dan berikut hasil setelah diedit (860 px)
Ini pula yang menjangkiti pikiran pemilik blog yang catatannya kaya akan tampilan gambar.Sebut saja juru kamera, ibu-ibu yang ingin menampilkan poto anak dan keluarganya, atau juga penggila desain grafis atau grafiti yang kini kian marak di dunia blog.
Dan pertanyaannya sekarang manjadi "bagaimana melebarkan bagian konten, bagian template mana yang perlu diedit?"...untuk itu akan segera kita bahas.Namun ini lebih banyak ke kasuistik, tergantung penyedia template dan jenis kode yang digunakan.Untuk lebih mudahnya saya mengambil salah satu template yang sudah digunakan oleh tanty dengan nama template Minima.
Berikut yang perlu kita perhatikan.
1. Content
Biasanya ini ditandai dengan deskripsi /* Content pada bagian CSS.Untuk kasus Minima, content menggunakan lebar 660 px.Biaanya ditandai dengan #Content.Bagian ini meliputi keseluruhan lebar tampilan blog, baik di main maupun sidebar.Bila bagian gambar yang berada di postingan kita ingin memiliki space lebih luas, maka bagian ini perlu kita tambahkan lebarnya.Dalam kasus ini kita akan ganti menjadi 890px.(sekedar catatan, dengan resolusi komputer 1024 * 768 yang banyak digunakan sekarang, angka 890 masih menyisakan ruang yang cukup di bagian kanan dan kiri.
2. Main
Bagian main adalah bagian yang meliputi bagian judul postingan, isi postingan, komentar ,dan penunjuk waktu.Biasanya ditandai dengan #Main.Nah disinilah yang mesti kita berikan space lebih untuk gambar.Bila gambar digeneralisasikan punya lebar seukuran VGA (640*480) maka kita bisa memberi angka 640px dibagian ini.
3. Sidebar
Bagian ini meliputi profile, recent post, links dan tool tambahan seperti shout.Berada di bagian samping kanan (untuk kasus minima).Bagian ini bisa kita biarkan ke nilai 220px.
4. Header
Bagian ini diedit untuk menggenapkan dan merapihkan agar sesuai dengan lebar Content.Biasanya ditandai dengan /* Header.Isikan nila lebar header sesuai dengan lebar Content.Bila kita ganti content ke 890, maka bagian ini juga menggunakan nilai 890.
Setelah itu save template kita dan periksa hasilnya.Hanya saja perlu kita perhatikan bila kita total memiliki lebar 890, sedang posisi main dan sidebar total membutuhkan lebar 860, maka kita memiliki ruang selebar 30 px sebagai pembatas antara bagian Main dan Sidebar agar tidak saling menempel satu sama lainnya.
Berikut tampilan hasil pada saat belum diedit lebarnya (660px):
dan berikut hasil setelah diedit (860 px)
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
CSS : Re-call navbar on Blogger
Sepertinya semenjak postingan mengenai navbar ditulis disini ada beberapa pengguna blogger yang peduli untuk memasangnya kembali.Bahkan beberapa dari mereka tak menduga bila blognya selama ini minus navbar.Bisa dimengerti bila mereka mendapatkan templatenya dari weblog yang memberikan template tak berbayar.Jadi dari pihak inilah banyak yang menanyakan cara memanggil kembali navbar yang menhilang.
Dari beberapa template yang sempat diamati berikut beberapa kode yang menutup dan kode revisi untuk membuka kembali navbar.
kode asal :
kode revisi :
kode asal :
kode revisi :
Dan akan terus diupdate bila menemukan template minus navbar lainnya.
Silahkan kirim alamat blog bila mendapati navbar yang hilang (untuk pengguna blogger tak berbayar tentunya.)
Dari beberapa template yang sempat diamati berikut beberapa kode yang menutup dan kode revisi untuk membuka kembali navbar.
kode asal :
#b-navbar {height:0px;visibility:hidden;display:none}
kode revisi :
#b-navbar {height:0px;visibility:visible;display:none}
kode asal :
#b-navbar{ margin-top: -500px;}
kode revisi :
#b-navbar{ margin-top: 0px;}
Dan akan terus diupdate bila menemukan template minus navbar lainnya.
Silahkan kirim alamat blog bila mendapati navbar yang hilang (untuk pengguna blogger tak berbayar tentunya.)
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
CSS : Footer should be on Foot
Makanya aneh bila menemukan footer yang bukan pada tempatnya.Kenapa dinamakan bagian footer karena memang dia akan menjadi catatan kaki, bukan catatan samping kan?.Jadi posisinya wajib berada di bagian bawah.Beda template sekalipun pasti menempatkan bagian header dan footer di tempat yang serupa.Berada diatas dan dibawah.
Untuk itu bila menemukan bagian footer yang nempel dibagian sidebar mesti cepat-cepat dilihat bagian CSSnya.Lalu cek silang dengan menggunakan browser yang berbeda.Bisa jadi hasilnya pun berbeda.Bila ini terjadi dipastikan bagian CSSnya perlu dilakukan pembenahan, karena browser memiliki kemampuan yang berbeda dalam memberlakukan CSS yang dibacanya.
Berikut contoh tampilan footer yang nempel pada bagian Sidebar (milik Bebex) bila diakses menggunakan Mozilla Firefox :
CSS :
Sedang berikut tampilan normal yang ada di IE :
CSS :
artinya perlu penambahan tag CSS clear:both; agar turun kebawah dan memberikan space yang lebih lapang untuk bagian footernya.Dengan cara ini, baik di IE maupun Mozilla tampilan footer akan berada pada tempat yang semestinya.Sedangkan perubahan nilai pada padding hanya untuk memberikan sedikit ruang pada footer agar tidak menempel dengan bagian postingan.
Untuk itu bila menemukan bagian footer yang nempel dibagian sidebar mesti cepat-cepat dilihat bagian CSSnya.Lalu cek silang dengan menggunakan browser yang berbeda.Bisa jadi hasilnya pun berbeda.Bila ini terjadi dipastikan bagian CSSnya perlu dilakukan pembenahan, karena browser memiliki kemampuan yang berbeda dalam memberlakukan CSS yang dibacanya.
Berikut contoh tampilan footer yang nempel pada bagian Sidebar (milik Bebex) bila diakses menggunakan Mozilla Firefox :
CSS :
#footer {
margin: 0 auto;
padding: 0;
width: 780px;
text-align: center;
background: transparent;
font-size: 11px;
color: #FFFFFF;
}
Sedang berikut tampilan normal yang ada di IE :
CSS :
#footer {
clear:both;
margin: 0 auto;
padding:15px 30px 0 50px;
width: 780px;
text-align: center;
background: transparent;
font-size: 11px;
color: #FFFFFF;
}
artinya perlu penambahan tag CSS clear:both; agar turun kebawah dan memberikan space yang lebih lapang untuk bagian footernya.Dengan cara ini, baik di IE maupun Mozilla tampilan footer akan berada pada tempat yang semestinya.Sedangkan perubahan nilai pada padding hanya untuk memberikan sedikit ruang pada footer agar tidak menempel dengan bagian postingan.
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
CSS : Background Fixed
Banyak yang menggunakan image background untuk mempercantik penampilan blognya.Lebih dari sekedar meramaikan penampilan, cara ini juga dinilai ampuh untuk menampilkan karakter blog sang pemilik.Tak heran bila beberapa blog milik kaum hawa diperkaya dengan tampilan bunga, boneka,coklat and all girls stuffs.Kesan segar, ceria dan menarik pun segera menyergap.
Bagi pengguna layanan Blogger kita diberikan kesempatan untuk menampilkan image sebagai background di dalam CSS Template.Pasti tak asing dengan tag CSS berikut :
Dengan adanya tag ini maka blogger akan menyertakan image berbunga.jpg di dalam blog dalam keadaan image utuh, tanpa ada pengulangan/tiling.Sangat cocok untuk dimensi gambar berukuran besar(dengan lebar 1000-an pixel).Keuntungan dari gambar dengan dimensi besar yakni pada saat image dimunculkan pengguna dengan resolusi monitor tinggi (1024*768) maupun rendah (800*600) akan dimunculkan secara aman.Meski memiliki keunggulan, image dengan dimensi besar berdampak pada lambatnya waktu yg dibutuhkan saat loading bagi pengakses blog.Terlebih image yang disimpan /hosted di luar Blogger.Tak ingin kan pengakses kita menunggu terlalu lama?
Lalu bagaimana bila image yang akan kita tampilkan berdimensi kecil, lebarnya kurang dari 1000-an pixel.Dengan tag diatas maka gambar akan dimunculkan secara apa adanya, artinya menyisakan banyak space kosong di samping dan bawahnya.Seperti berikut :
Untuk itu CSS dilengkapi dengan atribut fixed dan repeat untuk body background.
Yakni;
artinya gambar tersebut akan menduplikasi diri seukuran monitor yang bersangkutan.Posisi gambarpun akan tetap dalam kuadran x dan y, yang berdampak bila content didalamnya penuh hingga memerlukan scroller untuk membukanya, maka saat scroll kita drag posisi gambar tidak akan terpengaruh.Dia akan diam dengan manisnya.Berikut ilustrasinya :
Lalu ada pula ;
Lalu bisa pula ;
Image akan diduplikan searah kuadran x/horizontal.Bila discroll posisi image diam.
Semua akan dikembalikan kepada keinginan sang pemilik blog untuk menampilkanya.Sedikit sentuhan yang bisa mengundang kekaguman kan?
Tag : wallpaper layout klo di scroll ga ikut gerak, background diam, background fixed.
Bagi pengguna layanan Blogger kita diberikan kesempatan untuk menampilkan image sebagai background di dalam CSS Template.Pasti tak asing dengan tag CSS berikut :
body {
background:url('http://photos1.blogger.com/blogger/1234/567/890/berbunga.jpg') no-repeat;
Dengan adanya tag ini maka blogger akan menyertakan image berbunga.jpg di dalam blog dalam keadaan image utuh, tanpa ada pengulangan/tiling.Sangat cocok untuk dimensi gambar berukuran besar(dengan lebar 1000-an pixel).Keuntungan dari gambar dengan dimensi besar yakni pada saat image dimunculkan pengguna dengan resolusi monitor tinggi (1024*768) maupun rendah (800*600) akan dimunculkan secara aman.Meski memiliki keunggulan, image dengan dimensi besar berdampak pada lambatnya waktu yg dibutuhkan saat loading bagi pengakses blog.Terlebih image yang disimpan /hosted di luar Blogger.Tak ingin kan pengakses kita menunggu terlalu lama?
Lalu bagaimana bila image yang akan kita tampilkan berdimensi kecil, lebarnya kurang dari 1000-an pixel.Dengan tag diatas maka gambar akan dimunculkan secara apa adanya, artinya menyisakan banyak space kosong di samping dan bawahnya.Seperti berikut :
Untuk itu CSS dilengkapi dengan atribut fixed dan repeat untuk body background.
Yakni;
body {
background:url('http://photos1.blogger.com/blogger/1234/567/890/berbunga.jpg') repeat fixed;
artinya gambar tersebut akan menduplikasi diri seukuran monitor yang bersangkutan.Posisi gambarpun akan tetap dalam kuadran x dan y, yang berdampak bila content didalamnya penuh hingga memerlukan scroller untuk membukanya, maka saat scroll kita drag posisi gambar tidak akan terpengaruh.Dia akan diam dengan manisnya.Berikut ilustrasinya :
Lalu ada pula ;
body {Image akan diduplikasikan searah kuadran y/vertikal.Dan bila discroll posisi image tetap diam.
background:url('http://photos1.blogger.com/blogger/1234/567/890/berbunga.jpg') repeat-y fixed;
Lalu bisa pula ;
body {
background:url('http://photos1.blogger.com/blogger/1234/567/890/berbunga.jpg') repeat-x fixed;
Image akan diduplikan searah kuadran x/horizontal.Bila discroll posisi image diam.
Semua akan dikembalikan kepada keinginan sang pemilik blog untuk menampilkanya.Sedikit sentuhan yang bisa mengundang kekaguman kan?
Tag : wallpaper layout klo di scroll ga ikut gerak, background diam, background fixed.
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
CSS : Mozilla browser can do that IE cannot
Inilah beberapa kelebihan Mozilla dibanding dengan IE.Ini juga jawaban dari bebeberapa pertanyaan mengapa weblognya lebih indah dipandang dengan menggunakan Mozilla.Hanya menampilkan point-point yang berhubungan dengan kemampuan menampilkan text,image, dan CSS.
1. Berkuasa melakukan zooming text
Hingga ukuran berapapun, meski memiliki ukuran pixel tertentu.IE hanya mendukung lima ukuran dan tidak memiliki shortcut di keyboardnya.Ini sangat menguntungkan bagi pengguna yang memiliki masalah penglihatan bila menemukan situs yang menggunakan huruf berukuran kecil.
2. Pilih text dan siap melakukan pencarian
Coba select text tertentu, dan klik kanan, hasilnya akan membawa kita ke dalam pilihan beberapa menu lalu pilih 'Search' untuk melakukan pencarian dengan text yang telah kita seleksi.
3.Menyisipkan mouse diantara text
Saat membuka Mozilla coba tekan F7 maka kursor akan muncul dalam halaman.Bisa digunakan untuk melakukan navigasi sebuah halaman dan memilih text cukup dengan keyboard.baca
4.Lihat source kode hanya bagian tertentu
Lakukan seleksi text terntu, klik kanan, lalu tekan sembarang tombol di keyboard.Muncullah source yang sedang kita seleksi.
5.Properties dialog memungkinkan kita melihat berbagai informasi mengenai beragam sintak.
Klik kanan pada tautan tertentu atau pada gambar ataupun lainnya,dan lihat infonya tentang hal itu,seperti halnya bahasa dan tautan apapun yang akan terbuka di jendela yang baru.Jendelanyapun bisa kita resize.
6.Intip scripts dan stylesheets secara langsung.
Mozilla mempu menampilkan scripts dan stylesheets langsung sebagai plain text tanpa aplikasi terpisah yang sanggat berguna bila kita ingin melihatnya secara singkat.Sedang IE hanya akan mendownloadnya tanpa menampilkannya secara langsung.
7.Beragam pilihan font.
Kita bisa mengontrol penggunaan font,termasuk penggunaan CSS fonts. Buka menu Tools, Option, Fonts & Colors.
8 Dapat menyunting ukuran font minimum
Tentu ini sangat berguna bagi situs tertentu.Perintahnya dibagian Tools,option,Fonts & Colors.
9.Memiliki beragam character Encoding
Ini tentunya berguna untuk mengunjungi situs yang memiliki perbedaan MIME.Misalnya melihat MIME dalam bahasa Jepang,dll.
10.Mendukung text blinking/berkedip
Tentunya tag didukung penuh,tapi kitapun bisa menggunakan CSS 'text-decoration: blink'.
11.CSS min/max-width/height
Kita bisa mengeset maksimum atau minimum font untuk disesuaikan dengan menggunakan tag CSS.
12.CSS position:fixed
Ini memungkinkan suatu konten berposisi tetap pada bagian tertentu di jendela.Bila pengguna melakukan scrolling,konten akan berada tetap pada posisinya.
13.Mendukung CSS3 selectors.
14.Mendukung beberapa ekstensi CSS properties
15.Mendukung 'favicons' dalam beragam format
GIF,JPEG,PNG,MNG,XBM,BMP,ICO,bahkan kita bisa membuatnya animasi bila 'butuh sangat'. IE hanya mendukung BMP dan ICO format.
Yang lain mau menambahkan?
1. Berkuasa melakukan zooming text
Hingga ukuran berapapun, meski memiliki ukuran pixel tertentu.IE hanya mendukung lima ukuran dan tidak memiliki shortcut di keyboardnya.Ini sangat menguntungkan bagi pengguna yang memiliki masalah penglihatan bila menemukan situs yang menggunakan huruf berukuran kecil.
2. Pilih text dan siap melakukan pencarian
Coba select text tertentu, dan klik kanan, hasilnya akan membawa kita ke dalam pilihan beberapa menu lalu pilih 'Search' untuk melakukan pencarian dengan text yang telah kita seleksi.
3.Menyisipkan mouse diantara text
Saat membuka Mozilla coba tekan F7 maka kursor akan muncul dalam halaman.Bisa digunakan untuk melakukan navigasi sebuah halaman dan memilih text cukup dengan keyboard.baca
4.Lihat source kode hanya bagian tertentu
Lakukan seleksi text terntu, klik kanan, lalu tekan sembarang tombol di keyboard.Muncullah source yang sedang kita seleksi.
5.Properties dialog memungkinkan kita melihat berbagai informasi mengenai beragam sintak.
Klik kanan pada tautan tertentu atau pada gambar ataupun lainnya,dan lihat infonya tentang hal itu,seperti halnya bahasa dan tautan apapun yang akan terbuka di jendela yang baru.Jendelanyapun bisa kita resize.
6.Intip scripts dan stylesheets secara langsung.
Mozilla mempu menampilkan scripts dan stylesheets langsung sebagai plain text tanpa aplikasi terpisah yang sanggat berguna bila kita ingin melihatnya secara singkat.Sedang IE hanya akan mendownloadnya tanpa menampilkannya secara langsung.
7.Beragam pilihan font.
Kita bisa mengontrol penggunaan font,termasuk penggunaan CSS fonts. Buka menu Tools, Option, Fonts & Colors.
8 Dapat menyunting ukuran font minimum
Tentu ini sangat berguna bagi situs tertentu.Perintahnya dibagian Tools,option,Fonts & Colors.
9.Memiliki beragam character Encoding
Ini tentunya berguna untuk mengunjungi situs yang memiliki perbedaan MIME.Misalnya melihat MIME dalam bahasa Jepang,dll.
10.Mendukung text blinking/berkedip
Tentunya tag didukung penuh,tapi kitapun bisa menggunakan CSS 'text-decoration: blink'.
11.CSS min/max-width/height
Kita bisa mengeset maksimum atau minimum font untuk disesuaikan dengan menggunakan tag CSS.
12.CSS position:fixed
Ini memungkinkan suatu konten berposisi tetap pada bagian tertentu di jendela.Bila pengguna melakukan scrolling,konten akan berada tetap pada posisinya.
13.Mendukung CSS3 selectors.
14.Mendukung beberapa ekstensi CSS properties
15.Mendukung 'favicons' dalam beragam format
GIF,JPEG,PNG,MNG,XBM,BMP,ICO,bahkan kita bisa membuatnya animasi bila 'butuh sangat'. IE hanya mendukung BMP dan ICO format.
Note : Perbandingan ini menggunakan parameter Mozilla browser component (version 1.2) dan IE (version 6.0).
Yang lain mau menambahkan?
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
CSS:Text Indent
Tidaklah indah dipandang melihat beberapa tautan di Sidebar menempati posisi yang berantakan terutama tautan yang berkarakter panjang.
Ini dialami saat kita menyukai judul postingan panjang dengan atau tanpa kita rencanakan sebelumnya. Beberapa artikel di internet menyarankan untuk menuliskan judul pendek untuk mengakali bagian 'Previous Post' pada Sidebar.Perhatikan saja, kadang judul panjang akan terpotong menjadi 2 baris, parahnya menyertakan beberapa space kosong pada baris dibawahnya.
Apa yang menyebabkan hal itu bisa terjadi? ini adalah salah satu kegunaan tag 'text-indent'.Bagi pengguna Word, indent biasa kita gunakan untuk memberikan tanda untuk memulai paragraph yang baru.Maka kegunaan semacam itu yang dipakai oleh tag ini.Menurut w3schools.com tag ini bisa memiliki nilai negatif.Artinya baris pertama akan di inden (ada yang tahu terjemahan Bahasa Indonesia untuk ini?) ke kiri bila nilainya negatif.
Kita langsung masuk ke template di Blogger saja.Bila menggunakan template Harbor seperti yang saya gunakan, pada baris 298 di bagian /* Sidebar Content akan ditemukan tag seperti ini :
#sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
font: 70%/160% 'bitstream vera sans', 'lucida grande', verdana, sans-serif;
}
Guna merapihkan bagian tautan yang panjang agar memiliki sisi yang sama, maka kita bisa ubah nilai text-indentnya menjadi :
#sidebar li {
margin:0;
padding:0 0 .25em 0px;
text-indent:0px;
line-height:1.5em;
font: 70%/160% 'bitstream vera sans', 'lucida grande', verdana, sans-serif;
Sengaja saya mengubah nila pada padding untuk mendapatkan hasil yang lebih baik.
Ini dialami saat kita menyukai judul postingan panjang dengan atau tanpa kita rencanakan sebelumnya. Beberapa artikel di internet menyarankan untuk menuliskan judul pendek untuk mengakali bagian 'Previous Post' pada Sidebar.Perhatikan saja, kadang judul panjang akan terpotong menjadi 2 baris, parahnya menyertakan beberapa space kosong pada baris dibawahnya.
Apa yang menyebabkan hal itu bisa terjadi? ini adalah salah satu kegunaan tag 'text-indent'.Bagi pengguna Word, indent biasa kita gunakan untuk memberikan tanda untuk memulai paragraph yang baru.Maka kegunaan semacam itu yang dipakai oleh tag ini.Menurut w3schools.com tag ini bisa memiliki nilai negatif.Artinya baris pertama akan di inden (ada yang tahu terjemahan Bahasa Indonesia untuk ini?) ke kiri bila nilainya negatif.
Kita langsung masuk ke template di Blogger saja.Bila menggunakan template Harbor seperti yang saya gunakan, pada baris 298 di bagian /* Sidebar Content akan ditemukan tag seperti ini :
#sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
font: 70%/160% 'bitstream vera sans', 'lucida grande', verdana, sans-serif;
}
Guna merapihkan bagian tautan yang panjang agar memiliki sisi yang sama, maka kita bisa ubah nilai text-indentnya menjadi :
#sidebar li {
margin:0;
padding:0 0 .25em 0px;
text-indent:0px;
line-height:1.5em;
font: 70%/160% 'bitstream vera sans', 'lucida grande', verdana, sans-serif;
Sengaja saya mengubah nila pada padding untuk mendapatkan hasil yang lebih baik.
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
CSS : word-wrap for IE
Sepastinyalah bila kata-kata word wrap terasa akrab di lingkungan aplikasi text berbasis Windows.Sebut saja Notepad, WordPad (saat kita ingin membungkus text seukuran jendela aplikasi),Word (misalnya saat kita ingin menyeting word-wrap untuk kata-kata berbahasa Inggris disaat bekerja di lingkungan text menggunakan East Asia), dan banyak lagi.
CSS di IE pun tak luput dari kata-kata ini.Lalu apa gunanya?
Masih ingat postingan yang lalu tentang bangunan template Blogger yang terdiri dari Main, Content,Sidebar? Ok, ini masih berhubungan dengan hal itu.
Anggap kita memiliki lebar Content 740 px, Main 485 px, lalu Sidebar 240 px.Terkadang tanpa kita sadari saat memasukkan tautan/link ke dalam postingan kita menuliskanya secara utuh, semisal http://www.domainku.com/admin/intern/download/gratis/aplikasi/blablabla.htm, maka dari 76 karakter tersebut kemungkinan akan menyeruak keluar menabrak bagian Sidebar.Hasilnya? saat kita buka di browser IE, sidebar turun jauh kebawah.Nah untuk itulah properti word-wrap diperlukan, cukup bubuhkan tag berikut :
word-wrap:break-word;
di bagian .post-body, sehingga akan tampil seperti ini (untuk contoh):
.post-body {
line-height: 140%;
word-wrap:break-word;
}
Maka IE akan memberlakukan word-wrap dalam bagian Main.Ingat, hanya IE.Browser diluar IE akan mengacuhkan bagian word-wrap:break-word.Hasilnya? tentu bila kita cek di IE alamat URL yang panjang tadi akan terpotong kebawah tanpa mengenai bagian Sidebar.
CSS di IE pun tak luput dari kata-kata ini.Lalu apa gunanya?
Masih ingat postingan yang lalu tentang bangunan template Blogger yang terdiri dari Main, Content,Sidebar? Ok, ini masih berhubungan dengan hal itu.
Anggap kita memiliki lebar Content 740 px, Main 485 px, lalu Sidebar 240 px.Terkadang tanpa kita sadari saat memasukkan tautan/link ke dalam postingan kita menuliskanya secara utuh, semisal http://www.domainku.com/admin/intern/download/gratis/aplikasi/blablabla.htm, maka dari 76 karakter tersebut kemungkinan akan menyeruak keluar menabrak bagian Sidebar.Hasilnya? saat kita buka di browser IE, sidebar turun jauh kebawah.Nah untuk itulah properti word-wrap diperlukan, cukup bubuhkan tag berikut :
word-wrap:break-word;
di bagian .post-body, sehingga akan tampil seperti ini (untuk contoh):
.post-body {
line-height: 140%;
word-wrap:break-word;
}
Maka IE akan memberlakukan word-wrap dalam bagian Main.Ingat, hanya IE.Browser diluar IE akan mengacuhkan bagian word-wrap:break-word.Hasilnya? tentu bila kita cek di IE alamat URL yang panjang tadi akan terpotong kebawah tanpa mengenai bagian Sidebar.
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
WEB : Hiding CSS Tag
Bila sesuatu bisa disembunyikan, maka sembunyikanlah.Namun apakah yang tersembunyi itu lebih aman? atau mungkin bukan segi keamanan yang dipertimbangkan?
CSS memang lihai untuk ditampilkan secara vulgar dalam satu halaman dengan isi, ada juga yang terpisah untuk dipanggil bila diperlukan.Atau, ada yang bisa dilakukan selain itu, yakni memilahnya menjadi beberapa halaman CSS, kemudian panggil dalam halaman CSS pula.
Ok,ini yang saya maksudkan.
Dalam halaman blog milik william, bila kita intip source codenya, tampil 'style.css' yang digunakan untuk menghias halaman webnya.Uniknya, dalam style.css bukan kode CSS berisikan tag body, font atau apa saja yang mungkin sering kita jumpai.Itu hanyalah semacam trigger untuk memanggil halaman CSS lain.Yakni 'screen.css'dan 'lightbox.css'.Berikut kode dalam 'style.css':
@import 'screen.css';
@import 'lightbox.css';
Nah dalam masing-masing halaman CSS tersebut, kode CSS untuk merapihkan halaman depan dituliskan.Artinya saat halaman index dibuka, untuk memanggil CSS saja "dia" perlu untuk mengintip halaman lain di dalamnya.Apakah ini ada gunanya?
Selain untuk menyembunyikan tag CSS agar tidak mudah untuk diambil tanpa sepengetahuan pemiliknya, dengan halaman CSS terpisah ini, pengorganisasian file berdasarkan jenis filenya juga berguna untuk memudahkan kedua pihak, baik server sebagai penyimpan data dan juga admin dalam menyortir data.Sungguh bukan hal yang mudah untuk dikelola kiranya bila halaman CSS itu kemudian diaduk dengan file jenis gambar maupun file dengan ekstensi yang beragam.Begitupun bagi server.Beberapa file dikelompokkan dalam bentuk ASCII dan non-ASCII.Dalam hal ini file berekstensi CSS berada dalam satu direktory styles.Sangat memudahkan bila kita berkeinginan mencari untuk sekedar mengedit atau melihatnya.
Ini juga perlu dilakukan bila suatu saat kita memiliki satu halaman CSS yang terbilang panjang.Terpikirkah oleh kita bahwa tidak semua class dipakai oleh halaman tertentu.Bisa pula hanya beberapa halaman yang menggunakanya, sedang halaman lainnya menggunakan class yang berbeda.Maka pemilihan class berdasarkan karakteristik halaman juga bisa mendukung suatu halaman tampil lebih ringan dan cepat.Sesuatu yang penting bagi pengguna internet dengan bandwidth yang terbatas.Paling tidak inilah cara kita menghormati pengguna yang sedang singgah di tempat kita.
CSS memang lihai untuk ditampilkan secara vulgar dalam satu halaman dengan isi, ada juga yang terpisah untuk dipanggil bila diperlukan.Atau, ada yang bisa dilakukan selain itu, yakni memilahnya menjadi beberapa halaman CSS, kemudian panggil dalam halaman CSS pula.
Ok,ini yang saya maksudkan.
Dalam halaman blog milik william, bila kita intip source codenya, tampil 'style.css' yang digunakan untuk menghias halaman webnya.Uniknya, dalam style.css bukan kode CSS berisikan tag body, font atau apa saja yang mungkin sering kita jumpai.Itu hanyalah semacam trigger untuk memanggil halaman CSS lain.Yakni 'screen.css'dan 'lightbox.css'.Berikut kode dalam 'style.css':
@import 'screen.css';
@import 'lightbox.css';
Nah dalam masing-masing halaman CSS tersebut, kode CSS untuk merapihkan halaman depan dituliskan.Artinya saat halaman index dibuka, untuk memanggil CSS saja "dia" perlu untuk mengintip halaman lain di dalamnya.Apakah ini ada gunanya?
Selain untuk menyembunyikan tag CSS agar tidak mudah untuk diambil tanpa sepengetahuan pemiliknya, dengan halaman CSS terpisah ini, pengorganisasian file berdasarkan jenis filenya juga berguna untuk memudahkan kedua pihak, baik server sebagai penyimpan data dan juga admin dalam menyortir data.Sungguh bukan hal yang mudah untuk dikelola kiranya bila halaman CSS itu kemudian diaduk dengan file jenis gambar maupun file dengan ekstensi yang beragam.Begitupun bagi server.Beberapa file dikelompokkan dalam bentuk ASCII dan non-ASCII.Dalam hal ini file berekstensi CSS berada dalam satu direktory styles.Sangat memudahkan bila kita berkeinginan mencari untuk sekedar mengedit atau melihatnya.
Ini juga perlu dilakukan bila suatu saat kita memiliki satu halaman CSS yang terbilang panjang.Terpikirkah oleh kita bahwa tidak semua class dipakai oleh halaman tertentu.Bisa pula hanya beberapa halaman yang menggunakanya, sedang halaman lainnya menggunakan class yang berbeda.Maka pemilihan class berdasarkan karakteristik halaman juga bisa mendukung suatu halaman tampil lebih ringan dan cepat.Sesuatu yang penting bagi pengguna internet dengan bandwidth yang terbatas.Paling tidak inilah cara kita menghormati pengguna yang sedang singgah di tempat kita.
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
CSS : Small Banner for Friend Links
Kutemukan satu gambar dengan ukuran, warna dan bentuk yang cocok untuk dijadikan banner di halaman blog.Perhatikan disini:
Namun sepertinya akan menjadi lebih banyak waktu yang dibutuhkan untuk meload semua banner kecil-kecil ini apabila linknya bertambah banyak (dan aku yakin ini sangat besar kemungkinan terjadi.)Jadi aku pikir kenapa tidak kotak ini aku jadikan background untuk banner saja,dan text di dalamnya saja yang berubah sesuai dengan keperluanya.
Untuk itu aku tutup aja bagian tulisan di dalamnya dengan warna putih #FFFFFF, dan hasilnya seperti berikut ini :
Ok, kita lanjutkan.Untuk itu aku perlu menyiapkan CSS style untuk itu, ini dia :
#banner {
letter-spacing:.1em;
float: left;
background: #D8DADC ;
margin:2px;
padding: 0px;
width:93px;
height:33px;
font:bold 95%/1em "Trebuchet MS",Trebuchet,Verdana,Sans-serif;
background:#ffffff url(http://photos1.blogger.com/blogger/4452/1518/1600/bgbutton.jpg) no-repeat;
}
Perhatikan Url gambar tersebut diupload di blogger pribadi agar lebih mudah dicari. (Tipsnya : kita bisa upload di satu post terpisah dalam status draft agar mudah dicari untuk di copy kode Urlnya suatu saat bila diperlukan). Lalu kita gunakan tag paragrap agar mudah mengendalikan posisi textnya ditengah, untuk itu ditambahkan dengan :
#banner p {
margin:0 15px;
color:#8c8639;
}
dan terakhir, karena sifatnya yang akan menjadi banner maka akan dipergunakan tag link.
#banner a {
text-decoration:none;
color:#8c8639;
}
ok, selanjutnya di dalam HTML akan kita tambahkan beberapa link banner.
hasilnya akan terlihat seperti banner kan?
Namun sepertinya akan menjadi lebih banyak waktu yang dibutuhkan untuk meload semua banner kecil-kecil ini apabila linknya bertambah banyak (dan aku yakin ini sangat besar kemungkinan terjadi.)Jadi aku pikir kenapa tidak kotak ini aku jadikan background untuk banner saja,dan text di dalamnya saja yang berubah sesuai dengan keperluanya.
Untuk itu aku tutup aja bagian tulisan di dalamnya dengan warna putih #FFFFFF, dan hasilnya seperti berikut ini :
Ok, kita lanjutkan.Untuk itu aku perlu menyiapkan CSS style untuk itu, ini dia :
#banner {
letter-spacing:.1em;
float: left;
background: #D8DADC ;
margin:2px;
padding: 0px;
width:93px;
height:33px;
font:bold 95%/1em "Trebuchet MS",Trebuchet,Verdana,Sans-serif;
background:#ffffff url(http://photos1.blogger.com/blogger/4452/1518/1600/bgbutton.jpg) no-repeat;
}
Perhatikan Url gambar tersebut diupload di blogger pribadi agar lebih mudah dicari. (Tipsnya : kita bisa upload di satu post terpisah dalam status draft agar mudah dicari untuk di copy kode Urlnya suatu saat bila diperlukan). Lalu kita gunakan tag paragrap agar mudah mengendalikan posisi textnya ditengah, untuk itu ditambahkan dengan :
#banner p {
margin:0 15px;
color:#8c8639;
}
dan terakhir, karena sifatnya yang akan menjadi banner maka akan dipergunakan tag link.
#banner a {
text-decoration:none;
color:#8c8639;
}
ok, selanjutnya di dalam HTML akan kita tambahkan beberapa link banner.
hasilnya akan terlihat seperti banner kan?
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
CSS : Using Wordpress Background Header to Blogger
Begitu menarik melihat template wordpress milik Andreas Viklund, sayang sekali meilhat tampilan header dan font yang tertata rapi bagaiman gambar utuh itu hanya tersedia di wordpress.
Coba perhatikan teman kita di wordpress yang blognya menggunakan template ini :
http://andress.wordpress.com/
http://backupdelicious.wordpress.com/
Saya ingin sekali mengambil template headernya untuk ditampilkan di blogger.Untuk itu saya coba view source di backupdelicios untuk mencari file CSS nya.
Ini dia :
#container {
color:#303030;
margin:0;
min-width:770px;
padding:0;
text-align:left;
width:100%;
} #sitename {
color:#ffffff;
height:92px;
margin:0 20px 10px;
text-align:left;
}
#sitename h1,#sitename h2 {
font-weight:400;
margin:0;
padding:0;
}
#sitename h1 {
font-size:2.4em;
padding-top:20px;
}
#sitename h1 a {
color: #ffffff;
text-decoration: none;
letter-spacing: 10px;
}
#sitename h2 {
font-size:1.6em;
}
ok, untuk itu saya cari CSS serupa yang ada di blogger saya ;
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;}
#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #eee;
border-width:1px 1px 0;
font-size:200%;
line-height:1.2em;
font-weight:normal;
color:#666;
text-transform:uppercase;
letter-spacing:.2em;
}
#blog-title a {
color:#666;
text-decoration:none;
}
#blog-title a:hover {
color:#c60;
}
dan hasil dari penggabungan ini yaitu :
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background:#f0f0f0 url(http://backupdelicious.wordpress.com/wp-content/themes/andreas09/images/bodybg-blue.jpg) repeat-x;
}
#blog-title {
color:#ffffff;
height:92px;
margin:0 30px 10px;
text-align:left;
}
#blog-title h1,#blog-title h2 {
font-weight:600;
margin:0;
padding:0;
}
#blog-title h1 {
font-size:2.4em;
padding-top:18px;
}
#blog-title h1 a {
color: #ffffff;
text-decoration: none;
letter-spacing: 10px;
}
#blog-title h2 {
font-size:1.2em;
color: #ffffff;
text-transform:lowercase;
}
sedang dibawah [body] saya ganti menjadi :
dan hasilnya....bisa anda lihat disini :D
Coba perhatikan teman kita di wordpress yang blognya menggunakan template ini :
http://andress.wordpress.com/
http://backupdelicious.wordpress.com/
Saya ingin sekali mengambil template headernya untuk ditampilkan di blogger.Untuk itu saya coba view source di backupdelicios untuk mencari file CSS nya.
Ini dia :
#container {
color:#303030;
margin:0;
min-width:770px;
padding:0;
text-align:left;
width:100%;
} #sitename {
color:#ffffff;
height:92px;
margin:0 20px 10px;
text-align:left;
}
#sitename h1,#sitename h2 {
font-weight:400;
margin:0;
padding:0;
}
#sitename h1 {
font-size:2.4em;
padding-top:20px;
}
#sitename h1 a {
color: #ffffff;
text-decoration: none;
letter-spacing: 10px;
}
#sitename h2 {
font-size:1.6em;
}
ok, untuk itu saya cari CSS serupa yang ada di blogger saya ;
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;}
#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #eee;
border-width:1px 1px 0;
font-size:200%;
line-height:1.2em;
font-weight:normal;
color:#666;
text-transform:uppercase;
letter-spacing:.2em;
}
#blog-title a {
color:#666;
text-decoration:none;
}
#blog-title a:hover {
color:#c60;
}
dan hasil dari penggabungan ini yaitu :
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background:#f0f0f0 url(http://backupdelicious.wordpress.com/wp-content/themes/andreas09/images/bodybg-blue.jpg) repeat-x;
}
#blog-title {
color:#ffffff;
height:92px;
margin:0 30px 10px;
text-align:left;
}
#blog-title h1,#blog-title h2 {
font-weight:600;
margin:0;
padding:0;
}
#blog-title h1 {
font-size:2.4em;
padding-top:18px;
}
#blog-title h1 a {
color: #ffffff;
text-decoration: none;
letter-spacing: 10px;
}
#blog-title h2 {
font-size:1.2em;
color: #ffffff;
text-transform:lowercase;
}
sedang dibawah [body] saya ganti menjadi :
dan hasilnya....bisa anda lihat disini :D
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
CSS : Mouse Over with Image Background
setelah disodorin dengan template layout menggunakan photoshop, tentu gampang ditebak button kali ini menggunakan gambar.disitu terpampang 4 button yang masing-masing akan disambungkan dengan halaman HTML lain.sebagai situs restauran, buttonnya juga memiliki icon dengan setiap gambar sebagai penampilnya.
sepertinya akan mudah untuk mengeditnya :)
tapi permintaan tentu harus lebih banyak dari sekedar mengubah ke HTML :D.
setiap button yang muncul mesti berubah setiap mouse melewatinya (on mouse over). masih inget kan kalo untuk memberikan background warna di button di CSS dapat menggunakan ;
a:hover{color:black;background:peach url(image url)}
tag ini hanya berlaku kepada semua button yang aktif, bagaimana bila ingin setiap button bersifat unique? artinya setiap button memiliki over button yang berbeda beda....ini ada triknya :
a img {height: 42px; width: 99px; border-width: 0; background: top left no-repeat;}
a#satu img {background-image: url(images/menu3.gif);}
a#dua img {background-image: url(images/menu2.gif);}
a#tiga img {background-image: url(images/menu1.gif);}
a#empat img {background-image: url(images/menu4.gif);}
a#satu:visited img {background-image: url(images/menu3visited.gif);}
a#dua:visited img {background-image: url(images/menu2visited.gif);}
a#tiga:visited img {background-image: url(images/menu1visited.gif);}
a#empat:visited img {background-image: url(images/menu4visited.gif);}
a#satu:hover img {background-image: url(images/menu3over.gif);}
a#dua:hover img {background-image: url(images/menu2over.gif);}
a#tiga:hover img {background-image: url(images/menu1over.gif);}
a#empat:hover img {background-image: url(images/menu4over.gif);}
a#satu:active img {background-image: url(images/menu3active.gif);}
a#dua:active img {background-image: url(images/menu2active.gif);}
a#tiga:active img {background-image: url(images/menu1active.gif);}
a#empat:active img {background-image: url(images/menu4active.gif);}
perhatikan pada a img {height: 42px; width: 99px;....ukuran width dan heightnya harus disesuaikan dengan button yang ada, untuk itu pastikan ukuran tinggi dan lebar masing2 button harus sama.
dan di HTML pada buttonya, kasih style idnya, misalnya /a href="kesana.html" id="satu"/, maka button tersebut akan tunduk pada CSS yang telah ditentukan sebelumnya.
untuk contoh bisa buka disini
sepertinya akan mudah untuk mengeditnya :)
tapi permintaan tentu harus lebih banyak dari sekedar mengubah ke HTML :D.
setiap button yang muncul mesti berubah setiap mouse melewatinya (on mouse over). masih inget kan kalo untuk memberikan background warna di button di CSS dapat menggunakan ;
a:hover{color:black;background:peach url(image url)}
tag ini hanya berlaku kepada semua button yang aktif, bagaimana bila ingin setiap button bersifat unique? artinya setiap button memiliki over button yang berbeda beda....ini ada triknya :
a img {height: 42px; width: 99px; border-width: 0; background: top left no-repeat;}
a#satu img {background-image: url(images/menu3.gif);}
a#dua img {background-image: url(images/menu2.gif);}
a#tiga img {background-image: url(images/menu1.gif);}
a#empat img {background-image: url(images/menu4.gif);}
a#satu:visited img {background-image: url(images/menu3visited.gif);}
a#dua:visited img {background-image: url(images/menu2visited.gif);}
a#tiga:visited img {background-image: url(images/menu1visited.gif);}
a#empat:visited img {background-image: url(images/menu4visited.gif);}
a#satu:hover img {background-image: url(images/menu3over.gif);}
a#dua:hover img {background-image: url(images/menu2over.gif);}
a#tiga:hover img {background-image: url(images/menu1over.gif);}
a#empat:hover img {background-image: url(images/menu4over.gif);}
a#satu:active img {background-image: url(images/menu3active.gif);}
a#dua:active img {background-image: url(images/menu2active.gif);}
a#tiga:active img {background-image: url(images/menu1active.gif);}
a#empat:active img {background-image: url(images/menu4active.gif);}
perhatikan pada a img {height: 42px; width: 99px;....ukuran width dan heightnya harus disesuaikan dengan button yang ada, untuk itu pastikan ukuran tinggi dan lebar masing2 button harus sama.
dan di HTML pada buttonya, kasih style idnya, misalnya /a href="kesana.html" id="satu"/, maka button tersebut akan tunduk pada CSS yang telah ditentukan sebelumnya.
untuk contoh bisa buka disini
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
CSS : Setting backgound image on friendster
Siapa yang tak kenal friendster?, situs komunitas yang kabarnya terbesar di dunia (bahkan pernah dengar isu yang menyebut indonesia dan filipina sebagai pengguna terbanyak?) ini memang semakin ramai penggunanya.
Salah satu yang menarik adalah adanya penyetingan background gambar yang bisa disesuaikan dengan penggunanya.teknologi yang digunakan adalah CSS.dengan kemampuan ini, penggunanya dapat mengubah font type, color, serta background. pilihan yang terahir inilah yang tentu paling banyak digunakan.
untuk melakukannya tinggal ikuti langkah berikut :
1. masuk ke edit profile
2. pilih submenu Customize
3. masuk ke bagian Advanced users: Personalize your profile with CSS
4. isi dengan tag CSS berikut ; body { background-color:#ffffff; background-image:url(http://www.domainku.com/images/gambar.gif); background-attachment:scroll; }
5. save
Setelah itu akan ada notifikasi bahwa editan kita telah berlaku dengan Success! You have successfully updated your profile. View your profile now.
Ok, selanjutnya coba perhatikan apakah ada perubahan di tampilan friendsternya, kalopun masih sama seperti sebelumnya, coba refresh beberapa kali untuk menghilangkan chache di temporarty filenya.atau bisa pula tutup browswernya lalu panggil sekali lagi.
Bagi yang belum terbiasa dengan tag CSS, ada tawaran menarik dari cubancouncil.com untuk mendapatkan pilihan warna, background, cursor dsb.fitur ini disebut dengan "Friendster Profile Editor v3.2 (Simple)",cukup mengisi form yang tersedia disini lalu tinggal copy tag CSSnya ke dalam langkah ke 4 yang telah disebutkan diatas.
Selamat mencoba.
Artikel lainnya : Set Your Friendster Profile Here
Tag : edit friendster, setting background friendster, edit layout friendster, how to edit friendster.
Salah satu yang menarik adalah adanya penyetingan background gambar yang bisa disesuaikan dengan penggunanya.teknologi yang digunakan adalah CSS.dengan kemampuan ini, penggunanya dapat mengubah font type, color, serta background. pilihan yang terahir inilah yang tentu paling banyak digunakan.
untuk melakukannya tinggal ikuti langkah berikut :
1. masuk ke edit profile
2. pilih submenu Customize
3. masuk ke bagian Advanced users: Personalize your profile with CSS
4. isi dengan tag CSS berikut ; body { background-color:#ffffff; background-image:url(http://www.domainku.com/images/gambar.gif); background-attachment:scroll; }
5. save
Setelah itu akan ada notifikasi bahwa editan kita telah berlaku dengan Success! You have successfully updated your profile. View your profile now.
Ok, selanjutnya coba perhatikan apakah ada perubahan di tampilan friendsternya, kalopun masih sama seperti sebelumnya, coba refresh beberapa kali untuk menghilangkan chache di temporarty filenya.atau bisa pula tutup browswernya lalu panggil sekali lagi.
Bagi yang belum terbiasa dengan tag CSS, ada tawaran menarik dari cubancouncil.com untuk mendapatkan pilihan warna, background, cursor dsb.fitur ini disebut dengan "Friendster Profile Editor v3.2 (Simple)",cukup mengisi form yang tersedia disini lalu tinggal copy tag CSSnya ke dalam langkah ke 4 yang telah disebutkan diatas.
Selamat mencoba.
Artikel lainnya : Set Your Friendster Profile Here
Tag : edit friendster, setting background friendster, edit layout friendster, how to edit friendster.
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
Langganan:
Postingan (Atom)
Postingan Populer
-
Nokia Indonesia merilis varian Asha terbaru. Seri untuk kelas bawah ini hadir dengan sentuhan baru. Terutama dari segi kemudahan berbagi fil... -
Setelah kita memiliki blog tentu yang perlu dilakukan selanjutnya adalah mengelola dan mempublikasinya. Mengelola berarti selalu melakukan p... -
Seakan diingatkan oleh Mbak Hanan karena di blog saya belum pernah menulis tentang bagaimana membuat link read more disetiap postingan blog...