Mei 2014

Html Dan Css Editor Online Untuk Blog

Untuk membuat tampilan blog yang menarik dan beda dengan blog lainnya, biasanya blogger mengganti, mengedit atau merubah kode - kode html dan css dalam template blog yang telah ada.

Namun hal tersebut akan sangat melelahkan bila tiap kali mencoba mengedit atau merubah html dan css blog harus login ke template blogger, lalu menyimpannya dan terus preview untuk melihat tampilannya. Bila tampilan yang diinginkan tidak sesuai maka harus mengulang lagi dari awal. Untuk menghindari semua itu, agar lebih cepat dan efektif sebaiknya gunakanlah html dan css editor online.

Dengan html dan css editor online, setiap kali mengganti atau merubah html dan css blog akan langsung kelihatan. Tidak perlu login ke blogger dan menyimpannya sebelum tampilan yang dikehendaki benar - benar final.

Silahkan coba mengganti atau merubah kode css untuk contoh tampilan berikut:

Contoh Border

Contoh Border dengan style Dashed - Double - Solid dan Dotted dengan memakai background warna.

Contoh Text Shadow

Contoh Css Text Shadow

Contoh Link

Contoh Css Untuk Link Klik Disini

Copy kode Css dibawah ini kemudian klik tombol "Coba" yang berada di pojok kanan bawah text area, lalu paste ke "editor area".

Kode Css Contoh Border

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size:14px;font-family:arial;color:#222;
margin-left:25px;margin:25px 25px;}

div
{
padding:10px 20px; 
background:#F5F5DC;
width:400px;
border-top: 5px dashed #0000FF;
border-bottom: 5px double #006400;
border-left: 5px solid #DC143C;
border-right: 5px dotted #9400D3; 
}

</style>
</head>
<body>

<div>
Contoh Border dengan style Dashed - Double -
 Solid dan Dotted dengan memakai background warna.</div>
<br>
<p>
<b>Catatan: </b>Silahkan edit css di editor area untuk
memperoleh berbagai tampilan yang diinginkan.</p>
</body>
</html>

Kode Css Contoh Text Shadow

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size:14px;font-family:arial;color:#222;
margin:20px 5px 20px 25px;
}

div {
font-family:harlow solid italic; 
font-size:40px;
font-weight:700;
color:#116cb3;
text-shadow:5px 5px 5px #5a819f;
font-weight:700;
}

</style>
</head>
<body>

<div>
Contoh Text Shadow</div>
<p>
<b>Catatan: </b>Silahkan edit css di editor area untuk
memperoleh berbagai tampilan yang diinginkan.</p>
</body>
</html>

Kode Css Contoh Link

<!DOCTYPE html>
<html>
<head>

<style>
body {
font-size:14px;font-family:arial;color:#222;
margin:20px 5px 20px 25px;
}

.dm_link a:link {color:#00CCFF;text-decoration:underline;}
.dm_link a:visited {color:#CC0033;text-decoration:none;}
.dm_link a:hover {color:#3399FF;text-decoration:underline;
font-style:italic;font-size:20px;font-family:lucida grande;}
.dm_link a:active {color:#0000FF;text-decoration:underline;}
.dm_link {border-radius:7px;text-align:center;padding:10px 20px;
width:400px;border:2px solid #0000FF; -webkit-border-radius: 7px;
 -moz-border-radius: 7px;}

</style>
</head>
<body>

<div class="dm_link">
Contoh Css Untuk Link 
<a href="http://menggantitemplates.blogspot.com/search/label/Link" 
target="_blank">Klik Disini</a></div>
<br/>
<div style="font-size:13px;color:#000;">
<b>Catatan: </b>Silahkan 
Edit Css style link sesuai dengan yang diinginkan.</div>
</body>
</html>

Selamat mencoba, semoga membawa manfaat.

Baca Selengkapnya »

Cara Memindahkan Letak Navbar Blog - Terbaru

Ada beberapa cara memindahkan letak navbar dalam posisi default ke tempat atau posisi yang kita inginkan. Secara default, navbar blogger terletak di atas header .

Cara yang pertama adalah dengan memindahkan kode html navbar yang berada dalam body. Sedangkan yang kedua adalah dengan merubah kode "locked" navbar dari nilai "true" menjadi "false", kemudian memindahkan Gadget Navbar yang ada di edit tata letak ke posisi yang diinginkan.

Pada artikel kali ini yang jadi pokok bahasan adalah cara yang pertama. Sebab selain lebih mudah, navbar juga bisa dipindah - pindah lebih leluasa sesuai keinginan dan dengan ditambah berbagai variasi.

Detail Cara terbaru memindahkan navbar blog dari posisi default ke posisi header bagian bawah, untuk template standar blogger sebagai berikut:

Poin 1:
Login ke blogger.com --> Template --> Edit Html

Poin 2:
Dengan menggunakan Ctrl+F cari kode:
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>

Poin 3:
Klik angka di samping kode tersebut sampai muncul tanda segitiga hitam (tanda kode tersembunyi) , sehingga kode menjadi:

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>...</b:section>

Blok kode diatas dengan mengklik sebelum kode <b:section --> tekan dan tahan Shift --> Klik setelah kode </b:section> agar kode tidak terbuka.
Selanjutnya copylah kode tersebut.

Poin 4:
Cari Kode :
</div>
</header>
Letakkan kode yang telah di copy pada poin 3 tepat di atasnya , sehingga menjadi:

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>...</b:section>

</div>

</header>

Poin 5:
Simpan Template dan lihat hasilnya seperti nampak pada . Selesai

Agar nampak lebih menarik navbar bisa ditambah dengan background dan border , caranya:
Carilah kode ]]></b:skin>, kemudian letakkan kode dibawah ini tepat diatasnya

#navbar-iframe {

height:40px;/*tinggi background*/

background:#ee5f00;/*warna background*/

border-bottom:2px solid #000;/*border atas*/

border-top:2px solid #000;/*border bawah*/

}

Untuk mengatur jarak antara navbar dengan posting dan sidebar tambahkan kode:

.main-inner {padding-top:10px}. Dan letakkan diatas kode ]]></b:skin>

Ganti nilai jarak 10px dengan jarak yang dikehendaki, lalu Simpan Template. Lebih detail dalam mengatur jarak dapat dibaca pada artikel cara mengatur jarak antara header dengan posting dan sidebar.

Selain dapat dipindah letak atau posisinya, navbar juga dapat disembunyikan bahkan dihapus. Selamat mencoba.

Baca Selengkapnya »

Cara Menghilangkan Navbar Blog Terbaru

Navbar merupakan fasilitas navigasi bawaan blogspot yang mempunyai banyak fungsi / kegunaan dengan tujuan untuk mempermudah navigasi blogger dalam blogging dan secara default terletak di atas header . Meski demikian, Navbar dengan batas tertentu dapat kita rubah dan hilangkan.

Menghilangkan navbar blog platform blogger dapat dilakukan dengan dua cara, yaitu dengan cara menyembunyikannya atau dengan cara menghilangkannya. Berikut detail cara menghilangkan Navbar Blog:

Menyembunyikan Navbar Blog

Langkah 1:

Langkah 2:

Klik Edit pada gadget navbar, kemudian klik Off lalu Simpan .

Selain dengan cara di atas untuk menyembunyikan navbar juga bisa dilakukan dengan cara:
Langkah 1:
Login ke blogger.com ---> Template ---> Edit Html
Langkah 2:
Carilah kode ]]></b:skin>, lalu letakkan kode berikut diatasnya, kemudian Simpan Template.

#navbar-iframe { visibility:hidden; display:none }

Setelah navbar disembunyikan maka akan nampak bidang kosong / celah antara content dengan tab browser.

Menghilangkan Navbar Blog

Langkah 1:

Langkah 2:

Carilah kode <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>.

Langkah 3:

Pastikan bahwa setelah kode <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'> terdapat kode <b:widget id='Navbar1' dengan tanda segi tiga hitam disampingnya. Bila tidak ada tanda segi tiga hitamnya, klik angka yang ada di sebelah kode tersebut.

Langkah 4:

Hapus kode <b:widget id='Navbar1' locked='false' title='Navbar' type='Navbar'>...</b:widget> lalu Simpan Template.

Jika segalanya benar maka tampilan blog akan nampak tanpa navbar dan tanpa bidang kosong / celah antara content dengan tab browser .

Selamat mencoba dan sukses.

Baca Selengkapnya »

Cara mengganti background blog standar asli blogger blogspot

Cara mengganti background blog standar blogger sedikit berbeda dengan mengganti background template hasil download. Sebab dalam background standar blogger backgroundnya dibagi dalam dua bagian yaitu atas dan bawah, serta warnanya memakai efek gradient (warna berpendar).

Secara umum cara mengganti background blog biasanya adalah dengan menambahkan kode warna pada kode css body {background: #.......;}, tapi untuk template standar blogger selain merubah atau menambah kode warna juga harus menghilangkan efek gradien yang ada dan merubah efek dua belahan background menjadi satu.

Jika hanya menambah atau merubah warna background saja tanpa merubah kode css lainnya maka blog akan nampak seperti gambar di bawah.

Klik Gambar untuk memperbesar tampilan.

Lantas bagaimana cara mengganti background blog agar nampak sempurna sesuai warna sebenarnya, tanpa efek gradient dan background tidak terbelah menjadi dua bagian ?

Poin 1:
Login ke blogger.com ---> Template ---> Edit Html. Dengan Ctrl+F carilah kode body {

Poin 2:
Tambahkanlah kode warna background yang diinginkan. Dalam hal ini saya contohkan kode warna hitam yaitu #000000;. Dan tambahkan nilai 0; pada padding (untuk menghilangkan padding body). Sehingga keseluruhan kode css body menjadi:

body {

font: $(body.font);

color: $(body.text.color);

background: #000000;$(body.background);

padding: 0;0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);

$(body.background.override)

}

Poin 3:
Scroll ke bawah Carilah kode .body-fauxcolumn-outer .fauxcolumn-inner { dan tambahkanlah kode none; sehinga menjadi:

.body-fauxcolumn-outer .fauxcolumn-inner {

background: none;transparent $(body.background.gradient.tile) repeat scroll top left;

_background-image: none;

}

Poin 4:
Scroll ke bawah Carilah kode .body-fauxcolumn-outer .cap-top { dan tambahkanlah kode none; sehinga menjadi:

.body-fauxcolumn-outer .cap-top {

position: absolute;

z-index: 1;

height: 400px;

width: 100%;

background: none;$(body.background);

$(body.background.override)

}

Poin 5:
Scroll ke bawah Carilah kode .body-fauxcolumn-outer .cap-top .cap-left { dan tambahkanlah kode none; sehinga menjadi:

.body-fauxcolumn-outer .cap-top .cap-left {

width: 100%;

background: none;transparent $(body.background.gradient.cap) repeat-x scroll top left;

_background-image: none;

}

Poin 6:
Jangan lupa Simpan Template dan selesai.

Bila segalanya benar dan lancar maka tampilan blog akan nampak seperti ilustrasi berikut:

Tampilan Background blog sebelum diganti
Tampilan Background blog setelah diganti

Semoga ada manfaatnya. Tq

Baca Selengkapnya »