Mengganti Dan Merubah Template

Cara Mengganti Background Blog Dengan Mudah

2014-07-02T00:00:00.000+07:00

Pada template standar blogger sebenarnya sudah tersedia fasilitas untuk mengganti background, baik mengganti warna background saja atau mengganti background dengan gambar - image. Namun warna dan gambar untuk background yang tersedia pada blogger tersebut sangat terbatas.

Agar lebih leluasa dalam mengganti background baik berupa warna maupun gambar, maka yang perlu dilakukan adalah merubah property dan value dari kode css terkait body.

"Cara mengganti bakground blog dengan mudah adalah dengan merubah kode css selector body. Background dapat diganti dengan warna lain atau diganti dengan gambar"

Klik gambar untuk memperbesar tampilan

Berikut adalah cara mengganti background blog dengan warna lain dan cara mengganti background blog dengan gambar:

1. Mengganti Background blog dengan warna lain
Langkah 1:
Login ke blogger.com ---> Template ---> Edit Html ---> dengan Ctrl+F cari kode ]]></b:skin>

Langkah 2:
Letakkan kode css di bawah ini tepat di atas kode ]]></b:skin>

body {
background: #c61;
padding: 0px;
}

.body-fauxcolumn-outer .fauxcolumn-inner, .body-fauxcolumn-outer .cap-top, .body-fauxcolumn-outer .cap-top .cap-left {
background: none;
}

Langkah 3:
Simpan Template, dan selesai

Keterangan:
padding: 0px dimaksudkan agar tidak ada jarak antara background dengan batas tepi layar komputer, sebab biasanya secara default blogger memakai padding-left atau kiri pada body nya.

#c61 adalah kode warna background secara singkat. Secara default kode warna biasanya adalah #+6digit kode, misalnya #052d52.

.body-fauxcolumn-outer dan seterusnya value nya diisi dengan "none", hal ini untuk menon aktifkan segala efek background yang biasanya secara default sudah ditentukan pada template standar blogger.

Ilustrasi penggantian warna background blog dapat dilihat pada:

Gambar Background Blog Sebelum Ganti Warna
Gambar Background Blog Setelah Ganti Warna

2. Mengganti Background Blog Dengan Gambar
Langkah 1:
Siapkan gambar yang akan dijadikan background, dalam contoh ini saya gunakan gambar burung dengan ukuran 100px X 75px. Simpan gambar tersebut di hosting image online untuk mendapatkan alamat atau url gambar (contoh: http://.....gambar.png).

Sebaiknya memakai hosting image picasaweb.google.com agar lebih praktis dan patent. Bagi yang belum tahu cara mendapatkan url gambar silahkan baca artikel Cara Mendapatkan Alamat Url Gambar atau foto.

Langkah 2:
Login ke blogger.com ---> Template ---> Edit Html ---> dengan Ctrl+F cari kode ]]></b:skin>

Langkah 3:
Letakkan kode css di bawah ini tepat di atas kode ]]></b:skin>

body {

background: url('https://lh3.googleusercontent.com/-aq2Tukgpf08/Uxz9XrGsYQI/AAAAAAAAAjY/kR5Byv991_8/s100/robin2.png') repeat scroll left top transparent;

padding: 0px;

}

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

background: none;

}

Langkah 3:
Simpan Template, dan selesai

Keterangan:
Pada background terdapat kode repeat scroll left top transparent, maksudnya adalah:
repeat: Gambar mengalami duplikasi pengulangan ke kiri, ke kanan, ke atas dan ke bawah. Alternatif lainnya no-repeat: Gambar tidak terduplikasi, repeat-x: gambar akan di duplikasi hanya ke kiri atau ke kanan, repeat-y: gambar akan diduplikasi hanya ke atas dan ke bawah.

scroll: Background gambar akan ikut bergerak saat halaman di scroll. Bila menginginkan gambar tidak bergerak atau tetap maka ganti dengan fixed.

left top: menunjukkan posisi gambar berawal yaitu dari kiri atas. Alternatif lainnya adalah center, bottom dan right.

transparent: menunjukkan warna background yang dikehendaki bila tidak tertutup gambar. Hal ini hanya berlaku bila duplikasi atau pengulangan gambarnya menggunakan nilai repeat-x atau repeat-y. Transparent bisa diganti dengan kode warna, misal #f6f6f6.

Ilustrasi penggantian background blog dengan gambar dapat dilihat pada:

Gambar Background Blog Sebelum Diganti
Gambar Background Blog Setelah Diganti Dengan Gambar.

Lantas bagimana jika menginginkan background blog hanya dengan satu gambar dengan tampilan full atau penuh tapi tanpa penceng, tanpa peang dan secara otomatis gambarnya selalu menyesuaikan dengan resolusi layar komputer pembaca blog? Tunggu artikel yang akan saya tulis selanjutnya.

Selamat mencoba dan moga sukses.

Cara Backup Dan Restore Template Blog

2014-06-01T12:47:00.000+07:00

Langkah paling aman jika akan merubah kode html atau css template blog adalah membuat backup template atau mencadangkan terlebih dahulu. Hal ini dimaksudkan agar bila terjadi kesalahan, template dapat di restore atau dikembalikan seperti semula.

Cara backup template blog dengan aman dapat dilakukan dengan dua cara. Yaitu mem backup dengan cara melalui download atau unduhan yang ada di blogger dan mem backup dengan cara copy paste pada Notepad. Pada kali ini kita mencoba bahas cara backup template blog melalui unduhan blogger.

Cara backup template blog melalui unduhan blogger dengan menggunakan browser mozilla firefox:

Poin 1:
Login ke blogger.com --> template

Poin 2:
Klik Cadangkan / Pulihkan . Kemudian klik Unduh Template Lengkap dan teruskan klik Save File kemudian klik Ok . Tunggu beberapa saat sampai proses unduh / download selesai.

Poin 3:
Klik unduhan / download yang ada di kanan atas browser. File xml yang paling atas itulah template yang baru didownload . Arahkan pointer ke nama file tersebut, klik kanan dilanjutkan dengan klik Open Containing folder .

Poin 4:
Nampak letak file template dengan extensi xml dalam folder . Harap di ingat nama folder tempat template tersebut, atau pindahkan ketempat folder lain yang gampang diingat untuk mengembalikan / restore template bila suatu saat nanti dibutuhkan. Gantilah nama template . Nama sebaiknya yang mudah diingat sekaligus disertai keterangan, Misalnya: 1-template-asli , atau 2-template-stl rbbackground (artinya: template ke 2 setelah merubah background blog) atau dengan nama - nama lain yang mudah diingat.

Poin5:
Selesai.

Cara restore template blog - mengembalikan template:

Poin 1:
Login ke blogger.com --> template --> Cadangkan / Pulihkan

Poin 2:
Kemudian klik Browse .

Poin 3:
klik file template yang telah disimpan pada komputer, terukan klik open .

Poin 4:
Klik Unggah dan tunggu beberapa saat untuk proses. Setelah proses selesai lanjutkan dengan klik tutup .

Poin 5:
Selesai.

Terkait template baca juga cara mengganti template blogger. Demikian cara backup template blog dan sekaligus cara restore template blog. Semoga manfaat.

Html Dan Css Editor Online Untuk Blog

2014-05-30T13:50:00.005+07:00

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.

Cara Memindahkan Letak Navbar Blog - Terbaru

2014-05-28T16:17:00.000+07:00

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.

Cara Menghilangkan Navbar Blog Terbaru

2014-05-27T15:25:00.002+07:00

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.

Cara mengganti background blog standar asli blogger blogspot

2014-05-01T10:43:00.000+07:00

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

Cara terbaru mencari kode skin head dan body pada blog

2014-04-26T20:02:00.001+07:00

Dalam merubah template blog seringkali kita harus mencari kode css ]]></b:skin>, </head> dan </body> untuk meletakkan kode css atau html yang dikehendaki.

Misalnya, untuk merubah background header blog dan mengatur jarak antara header dengan postingan maka kita harus meletakkan kode css background dan kode margin maupun padding di atas ]]></b:skin>. Hal tersebut akan sangat merepotkan bila kita harus selalu mengetik kode - kode tersebut pada kotak pencarian edit html.

Agar tidak repot setiap kali mencari kode ]]></b:skin>, </head> dan </body> berikut adalah cara terbaru dan tercepat dalam mencari kode - kode tersebut:

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

Poin 2:
Dengan Ctrl+F carilah kode ]]></b:skin>. Letakkan kode text berikut di atasnya sehingga menjadi:

/*7*/

]]></b:skin>

Poin 3:
Dengan Ctrl+F carilah kode </head>. Letakkan kode text berikut di atasnya sehingga menjadi:


</head>

Poin 4:
Dengan Ctrl+F carilah kode </body>. Letakkan kode text berikut di atasnya sehingga menjadi:


</body>

Poin 5:
Simpan template. selesai.

Selanjutnya bila akan mencari kode - kode ]]></b:skin>, </head> dan </body> tidak perlu mengetikkan kode tersebut, yang diperlukan hanya mengetikkan *7 untuk mencari kode ]]></b:skin>, ketikkan *8 untuk mencari kode </head> dan *9 untuk kode </body> pada kotak pencarian dengan menggunakan Ctrl+F tentunya.

Penulisan kode - kode tersebut contohnya dapat dilihat pada:

Gambar Penulisan kode text untuk mencari kode css skin head dan body pada blog.

Kode - kode tambahan tersebut sebenarnya adalah jenis text untuk memudahkan pencarian saja. Dan kode tersebut tidak akan muncul pada tampilan blog.

Selamat mencoba, semoga sukses.

Cara Mengganti Dan Merubah Warna Link Di Blog

2014-04-23T12:46:00.000+07:00

Dapatkah warna link di blog diganti atau dirubah sesuai dengan keinginan kita ? Jawabannya "ya, bisa". Caranya yaitu dengan merubah kode css terkait dengan kode link.

Cara Mengganti Dan Merubah Warna Link Di Blog dalam artikel ini berarti mengubah warna link secara total, baik link yang ada di bagian posting, sidebar, widget, footer dan attribution.

Cara Mengganti Dan Merubah Warna Link Di Blog dapat dilakukan dengan langkah sebagai berikut:

Poin 1:
Login ke blogger.com ---> Template ---> Edit Html. Kemudian Cari kode ]]></b:skin> dengan menggunakan Ctrl + F

Poin 2:
Copy kode css berikut dan letakkan di atas ]]></b:skin>:

a:link {color:#ffffff}
a:hover {color:#f26b2f;text-decoration:underline;}
a:visited {color:#0E9E3E}

Keterangan:
a:link adalah kode css Tampilan Link Sebelum dikunjungi
a:hover adalah kode css Tampilan Link saat dikunjungi
a:visited adalah kode css Tampilan Link setelah dikunjungi
underline adalah garis bawah link pada saat dikunjungi
#6digit adalah kode warna

Bila menginginkan warna yang sama untuk warna link sebelum dikunjungi, saat dikunjungi dan setelah dikunjungi kode css nya adalah:

a:link,a:hover,a:visited {color:#0E9E3E}

Silahkan ganti kode warna link #0E9E3E sesuai dengan yang dikehendaki.

Poin 3:
Dan yang terakhir adalah Simpan Template.

Ilustrasi Cara Mengganti Dan Merubah Warna Link Di Blog dapat dilihat pada:

Gambar Warna Link Di Blog sebelum diganti
Gambar Warna Link Di Blog setelah diganti

Jika menginginkan mengganti warna link khusus hanya pada bagian sidebar penjelasannya ada pada artikel Cara mengganti warna link blog pada widget sidebar.

Terimakasih atas kunjungannya dan selamat mencoba.

Cara Mengganti Background Tulisan "Diposkan Oleh Posted By"

2014-04-23T07:17:00.000+07:00

Cara mengganti background tulisan "Diposkan oleh atau Posted By" yang berada dibagian bawah postingan blog atau biasa disebut dengan Post Footer dapat dilakukan dengan cara mengganti kode css Post Footer.

Mengganti kode css untuk mengganti background tulisan "Diposkan oleh atau Posted By" dapat ditempuh dengan 2 (dua) cara, yaitu dengan me non aktifkan post footer atau menjadikan background post footer menjadi transparent sehingga backgroundnya sama dengan warna background postingan blog.

Cara mengganti background tulisan "Diposkan oleh atau Posted By" langkah demi langkah sebagai berikut:

Poin 1:
Login ke blogger.com ---> Template ---> Edit Html. Kemudian Cari kode ]]></b:skin> dengan menggunakan Ctrl + F

Poin 2:
Pilih salah satu kode css berikut dan letakkan di atas ]]></b:skin>:

.post-footer {background: none;border-bottom:none;}

Atau

.post-footer {background: transparent;border-bottom:transparent;}

Bila tidak menginginkan border-bottom (garis bawah) post footer maka hilangkan kode css:
border-bottom:none; atau border-bottom:transparent; yang ada dalam kode css di atas.

Poin 3:
Jangan lupa Simpan Template dan selesai.

Ilustrasi Cara Mengganti Background Tulisan "Diposkan oleh atau Posted By" dapat dilihat pada:

Bila ingin mengganti background postingan, silahkan kunjungi artikel cara mengganti background dan border postingan blog.

Salam blogger.

Cara Mengganti Warna Link Blog Hanya Pada Widget Sidebar

2014-04-20T00:44:00.001+07:00

Cara mengganti warna link blog yang ada pada widget / gadget sidebar biasanya dimaksudkan untuk membedakan link yang ada di sidebar dengan link yang ada pada bagian lain. Selain akan nampak lebih bervariasi juga diharapkan lebih menarik, sehingga pengunjung jadi betah lama - lama jelajahi blog.

Cara mengganti warna link blog yang ada pada widget / gadget sidebar dapat dilakukan dengan berbagai variasi warna yang sama maupun berbeda - beda. Warna Link dibagi menjadi 3 (tiga) bagian yaitu warna link asli, warna saat dikunjungi dan warna link setelah dikunjungi. Selain mengganti warna link, tampilan huruf link juga dapat dibuat dengan berbagai variasi.

Cara mengganti warna link blog yang ada pada widget / gadget sidebar dapat dilakukan dengan ilustrasi sebagai berikut:

Poin 1:
Login ke blogger.com ---> Template ---> Edit Html. Kemudian Cari kode ]]></b:skin> dengan menggunakan Ctrl + F

Poin 2:
Bila menginginkan semua warna link yang sama pada warna link saat tampil, saat dikunjungi dan setelah dikunjungi, copy kode css dibawah dan letakkan di atas ]]></b:skin>:

.main-inner .column-right-inner a:link,a:hover,a:visited {color:#fff;}

Jika menginginkan warna link yang berbeda saat tampil, saat dikunjungi dan setelah dikunjungi kode css nya adalah:

.main-inner .column-right-inner a:link {color:#fff;}
.main-inner .column-right-inner a:hover {color:#c61;}
.main-inner .column-right-inner a:visited {color:#0e9e3e;}

Untuk memberikan sentuhan huruf dan ukurant huruf yang berbeda saat link dikunjungi kode css nya adalah:

.main-inner .column-right-inner a:link {color:#fff;}
.main-inner .column-right-inner a:hover {color:#c61; font-family: 'Arizonia',cursive; font-size:16px;}
.main-inner .column-right-inner a:visited {color:#0e9e3e;}

Keterangan:
a:link adalah kode css Tampilan Link Sebenarnya
a:hover adalah kode css Tampilan Link saat dikunjungi
a:visited adalah kode css Tampilan Link setelah dikunjungi
#6digit adalah kode warna
font-family adalah jenis huruf
font-size adalah ukuran huruf.

Kode - kode terebut dapat diganti dan dirubah sesuai kreasi masing - masing.

Poin 3:
Simpan Template dan selesai.

Cara mengganti warna link blog yang ada pada widget / gadget sidebar ilustrasi gambarnya dapat di lihat di:

Gambar warna link sebelum dan setelah diganti
Gambar warna link saat dan setelah dikunjungi

Selamat mencoba dan semoga sukses.

Cara Mengatur Jarak Kotak komentar Dengan Footer Blogger

2014-04-14T09:30:00.000+07:00

Cara mengatur jarak kotak komentar dengan footer blog untuk template standar blogger dapat dilakukan dengan hanya merubah padding dari main-inner template tersebut.

Seperti kita ketahui, main-inner dari template standar blogger mempunyai 2 (dua) padding yaitu padding atas atau padding-top dan padding bawah atau padding-bottom. Padding-top adalah untuk mengatur jarak antara header dengan posting dan sidebar, sedangkan padding-bottom untuk mengatur jarak antara kotak komentar dengan footer atau mengatur jarak antara footer dengan kolom posting dan kolom sidebar.

Cara mengatur jarak kotak komentar dengan footer blog untuk template standar blogger dapat dilakukan dengan langkah - langkah berikut:

Poin 1:
Login ke blogger.com ---> Template ---> Edit Html. Kemudian dengan Ctrl+F carilah kode css ]]></b:skin>

Poin 2:
Letakkan kode di bawah ini di atas kode ]]></b:skin>:

.main-inner {
padding-bottom:0px;
}

Padding dari main inner standar blogger biasanya mempunyai nilai 30px. Agar jarak kotak komentar dengan footer menjadi rapat maka padding bagian bawah atau padding-bottom nya harus mempunyai nilai 0 (nol). Atur sesuai keinginan.

Poin 3:
Simpan template dan selesai.

Tambahan:
Setelah mengatur jarak antara kotak komentar dengan footer blog, maka selanjunya adalah mengatur judul widget yang ada di footer agar tidak terlalu renggang dengan tepi footer bagian atas dan mengatur jarak antara isi footer dengan tepi footer bagian bawah.

Caranya adalah dengan merubah padding pada footer. Letakkan kode css berikut di atas ]]></b:skin> dan kemudian simpan template:

.footer-inner {
padding-top:10px;
padding-bottom:10px;
}

Silahkan atur jaraknya sesuai keinginan dengan cara menambah atau mengurangi nilai padding nya.

Adapun ilustrasi cara mengatur jarak antara kotak komentar dengan footer blogger dapat dilihat pada gambar:

Demikian sekilas mengenai Cara mengatur jarak kotak komentar dengan footer blog. Selamat mencoba dan semoga manfaat.

Cara Mengganti Background Dan Border Footer Blog Blogger

2014-04-13T08:04:00.000+07:00

Cara mengganti background dan border footer blog tidak jauh berbeda dengan mengganti background bagian posting dan sidebar.

Kalau mengganti background dan border posting berpedoman pada kode css .main-inner .fauxcolumn-center-outer dan jika mengganti background dan border sidebar dengan kode css .main-inner .fauxcolumn-right-outer, maka kalau mengganti background dan border footer pedomannya adalah kode css .footer-outer.

Cara Mengganti Background Dan Border Footer Blog untuk template standar blogger dapat dilakukan sebagai berikut:

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

Poin2:
Dengan menggunakan Ctrl+F pada keyboard cari kode css ]]></b:skin>. Dan letakkan kode dibawah ini diatas kode tersebut:

.footer-outer {background:#0c589e;
border:2px solid #000;
}

Border tersebut adalah untuk ke empat sisi yaitu atas, kanan, bawah dan kiri. Bila menghendaki border hanya pada sisi tertentu saja tinggal mengganti kode css border dengan border-left, border-right, border-bottom atau border top.

#0c589e:kode warna background
2px: ketebalan border
solid: jenis border
#000: warna border

Silahkan dicoba dengan variasi lainnya agar mendapatkan tampilan background dan border yang lebih menarik.

Poin 3:
Simpan Template dan selesai.

Ilustrasi cara mengganti Background Dan Border Footer Blog dapat dilihat pada gambar:
Gambar Background Dan Border Footer Blog sebelum diganti
Gambar Background Dan Border Footer Blog setelah diganti

Demikian sekilas mengenai Cara Mengganti Background Dan Border Footer Blog, semoga membawa manfaat.

Cara Mengatur Jarak Header Blog Dengan Posting Dan Sidebar

2014-04-11T19:40:00.000+07:00

Cara Mengatur Jarak Header Blog Dengan Posting Dan Sidebar untuk template standar blogger dapat dilakukan dengan mudah yaitu hanya mengatur kode css bagian main inner, posting dan sidebar.

Main inner perlu juga diatur sebab letak area posting dan sidebar sebenarnya ada di dalam main inner. Main inner dalam template asli standar blogger (terkait artikel ini) adalah bidang kosong antara header dengan posting dan sidebar.

Main Inner Bagian Atas (Bidang Kosong)

Cara Mengatur Jarak Header Blog Dengan Posting Dan Sidebar yang perlu dilakukan hanyalah mengatur tata letak kolom posting dan kolom sidebar, tanpa merubah tata letak judul widget sidebar (h2) dan judul posting (h3). Sebab kalau merubah tata letak h2 maka bukan hanya h2 yang berada di sidebar saja yang berubah tapi semua h2 akan berubah, baik yang di sidebar, area posting serta h2 yang ada di footer. Demikian juga degan h3 nya, maka di homepage semua judul posting akan berubah.

Cara Mengatur Jarak Header Blog Dengan Posting Dan Sidebar dapat dilakukan dengan langkah - langkah sebagai berikut:

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

Poin 2:
Dengan Ctrl+F cari kode css .main-inner . Bila ada kode tersebut teruskanlah ke poin 3.

Poin 3:
Cari kode ]]></b:skin> dan letakkanlah kode berikut tepat di atasnya:

.main-inner {padding-top:0px}
.main-inner .column-center-inner {margin-top:10px}
.main-inner .column-right-inner {margin-top:10px}

Keterangan:
Buat main-inner dengan padding-top sebesar 0px bila ingin tidak ada jarak antara header dengan sidebar dan posting.
.main-inner .column-center-inner adalah untuk mengatur jarak posting dengan header.
.main-inner .column-right-inner adalah untuk mengatur jarak sidebar dengan header.
Silahkan atur besarnya nilai padding dan margin sesuai dengan yang diinginkan. Terkait padding dan margin lebih detai silahkan baca Pengertian Atau Arti Padding Border Dan Margin Pada Blog.

Poin 4:
Simpan Template. Dan lihat hasilnya.

Catatan:
Bila menginginkan tampilan blog tanpa tanggal / date header (Tanggal di atas judul posting), pada langkah poin 3 tambahkanlah kode css:
h2.date-header {display:none} sehingga menjadi:

.main-inner {padding-top:0px}
.main-inner .column-center-inner {margin-top:-10px}
.main-inner .column-right-inner {margin-top:10px}
h2.date-header {display:none;}

.main-inner .column-center-inner margin top nya sengaja bernilai minus yaitu -10px, hal tersebut untuk menyejajarkan posisi judul posting dan judul widget sidebar. Silahkan atur sesuai keinginan.

Cara Mengatur Jarak Header Blog Dengan Posting Dan Sidebar ilustrasinya dapat dilihat di:

Selamat mencoba, semoga sukses.

Cara Mengganti Background postingan dan border blog

2014-04-09T21:08:00.000+07:00

Mengganti background postingan dan mengganti border potingan blog standar blogger dapat dilakukan dengan cara merubah atau menambah kode css template blog.

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

Point: 2
None aktifkan border bawaan asli template blogger, caranya dengan menggunakan Ctrl + F cari kode css:
.fauxcolumn-left-outer .fauxcolumn-inner { dan .fauxcolumn-right-outer .fauxcolumn-inner {

Kemudian tambahkan kata none sehingga menjadi:

.fauxcolumn-left-outer .fauxcolumn-inner {
border-right: none;1px solid $(body.rule.color);
}

dan

.fauxcolumn-left-outer .fauxcolumn-inner {
border-right: none;1px solid $(body.rule.color);
}

Point 3:
Cari kode ]]></b:skin>. Dan letakkan kode css berikut di atasnya:

.main-inner .fauxcolumn-center-outer {
background:#9bc3e8;
border:2px solid #000;
}

Kode Css border tersebut adalah untuk border empat (4) sisi. Kalau menghendaki hanya border pada sisi tertentu tinggal mengganti dengan kode:
border-left: untuk sisi kiri
border-right: untuk sisi kanan
border-bottom: untuk sisi bawah
border-top: untuk sisi atas.

2px adalah ketebalan border
solid adalah jenis border
#000 adalah warna border.

Point 4:
Klik Simpan Template. Selesai

Ilustrasi perubahan background dan border postingan blog dapat dilihat pada:

Gambar Background dan border postingan sebelum di ganti.

Gambar Background dan border postingan setelah di ganti.

Selain mengganti background dan border postingan blog, pembaca juga bisa mengganti background dan border sidebar serta mengganti background header blog.

Demikian artikel singkat ini dan salam blogger.

Cara Mengganti background Dan Border Sidebar

2014-04-07T16:27:00.000+07:00

Artikel Mengganti background dan border pada sidebar blog banyak kita jumpai saat browsing di internet. Tapi kebanyakan isinya adalah menjelaskan bagaimana mengganti background dan border sidebar untuk template hasil custom, bukan template asli bawaan atau standar blogger. Dan biasanya kode css sidebar dari template hasil custom adalah #sidebar-wrapper {....}.

Dalam artikel ini saya berusaha menjelaskan bagaimana cara mudah mengganti background dan border sidebar blog untuk template asli bawaan blogger atau standar blogger.

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

Poin 2:
Dengan menggunakan CTRL-F, carilah kode css ]]></b:skin>

Poin 3:

Letakkan kode css di bawah ini tepat diatas kode ]]></b:skin>

.main-inner .fauxcolumn-right-outer {
border-left: 2px solid #c61;
border-right: 2px solid #c61;
background: #C9D0E0 ;
}

Css border diatas hanya untuk border kiri dan kanan. Untuk border atas dan border bawah kode css nya adalah border-top dan border-bottom. Jika menghendaki border pada empat sisi tinggal mengganti kode css bordernya menjadi: border: 2px solid #c61.

2px adalah ketebalan garis atau border
solid adalah jenis atau bentuk border
#c61 adalah warna border
#C9D0E0 adalah warna background.
Silahkan uji coba degan berbagai macam variasi warna dan jenis border.

Poin 4:
Simpan Template dan lihatlah hasilnya.

Gambar ilustrasi mengganti background dan border sidebar bisa dilihat di:

Gambar background dan border sidebar sebelum diganti

Gambar background dan border sidebar setelah diganti

Sebenarnya ada cara mudah dan praktis untuk menentukan kode css mana yang hendak dirubah kalau ingin merubah tampilan template blog. Penjelasan selengkapnya silahkan baca Cara Mengetahui Ukuran Dan Kode Css Pada Blog.

Salam sukses.

Cara Mengetahui ID Blog Dan ID Lainnya Di Blog

2014-04-06T04:08:00.001+07:00

ID blog, Id Widget dan Id Post serta ID lainnya pada sebuah blog dapat diketahui dengan cara yang sangat mudah dan cepat tanpa harus login ke blogger. Caranya ? hanya menggunakan fasilitas Inspect Element yang telah disediakan oleh browser Mozilla, Chrome serta IExplorer.

Mengetahui ID blog, ID widget dan ID Postingan sangatlah penting, sebab ID blog biasanya digunakan saat kita memasang widget tertentu yang diperoleh dari luar blogger. Sedangkan ID Posting, ID Widget serta ID lainnya banyak digunakan saat kita mengganti atau merubah template blog.

Berikut cara mengetahui dengan cepat dan mudah ID blog, ID widget serta ID posting beserta contoh penggunaannya:

Poin 1:
Buka blog yang ingin diketahui ID nya dengan browser Mozilla Firefox. Atau bisa juga menggunakan browser lainnya, dalam hal ini saya contohkan dengan browser Firefox.

Poin 2:
Misalnya kita ingin merubah warna background widget sidebar yang berjudul "Arsip Blog". Untuk merubah background tersebut kita harus tahu terlebih dahulu apa ID atau identitas dari widget "Arsip Blog". Caranya, arahkan pointer atau mouse ke judul widget kemudian klik kanan dan klik inspect element. Lihat Gambar 1.

Poin 3:
Nampak tampilan terbelah menjadi dua bagian. Pada tampilan bagian bawah itulah terdapat ID dari widget "Arsip Blog" yaitu dengan nama ID "BlogArchive1". Lihat Gambar 2.

Poin 4:
Dengan diketahuinya ID widget "Arsip Blog" tersebut, kalau kita login ke blogger --> Template --> Edit Html, kemudian kita tambahkan kode css ID widget untuk mengganti background :

#BlogArchive1 {
background:#C9D0E0 ;
}

dan meletakkannya di atas kode ]]></b:skin> maka background dari widget "Arsip Blog" akan berubah. Lihat Gambar 3.

Gambar 1, 2 Dan 3. Klik Gambar untuk memperbesar tampilan

Untuk mengetahui ID Blog dan ID Posting caranya tidak jauh berbeda dengan cara mengetahui ID Widget.

Arahkan Pointer atau mouse ke salah satu judul posting ---> klik kanan ---> klik inspect element. Maka di belahan bawah layar akan nampak ID blog dan ID Posting yang dituju.

Nampak ID blog dengan nomor 1190252569424539924 dan post ID 754081553204596678 untuk artikel dengan judul "Gambar Membuat background ....."

Kalau misalnya ingin merubah background dari artikel dengan judul "Gambar Membuat background .....", maka tinggal menambahkan kode css background:

#post-body-754081553204596678 {
background:#C9D0E0 ;
}

dan meletakkannya di atas kode ]]></b:skin>. Ilustrasi selengkapnya dapat dilihat pada gambar di bawah.

Klik Gambar untuk memperbesar tampilan

Untuk penggunaan ID blog saya belum mempunyai contoh riilnya jadi visual gambarnya belum ada. Demikianlah sedikit penjelasan tentang ID Blog, ID Widget dan ID Posting semoga bermanfaat.

Ganti Template Standar Blogger

2014-03-27T21:34:00.002+07:00

Ganti template blog standar asli bawaan blogger biasanya dilakukan oleh blogger di saat membuat blog, baik itu blog yang pertama maupun yang dibuat berikutnya. Template blog bisa diperoleh dengan mendownload template hasil custom dari situs lain atau mengambil langsung dari blogger.com yang biasa disebut dengan template standar asli bawaan blogger.

Dalam artikel ini pokok bahasannya adalah mengganti template blog dengan template asli standar blogger. Cara mengganti template blogspot dengan template standar asli blogger sangat mudah, sebab fasilitas untuk mengganti dan menyesuaikan template yang sesuai keinginan sudah disediakan oleh blogger.

Nampak tampilan perbedaan template sebelum diganti dan sesudah diganti.

Klik Gambar untuk memperbesar tampilan.

Berikut langkah demi langkah cara ganti template standar blogger lengkap beserta gambar visualnya:

Langkah 1:
Login ke blogger.com ----> klik Template. Nampak tampilan template blog sebelum ganti template.

Langkah 2:
Nampak pilihan template blog. Diantaranya adalah template jenis simple atau sederhana. Arahkan pointer ke template yang dipilih. Saya coba klik pada template sederhana motif merah.

Langkah 3:
Nampak preview template yang dipilih. Untuk memakainya tinggal klik terapkan ke blog.

Langkah 4:
Nampak template yang baru diganti.

Yang saya jelaskan di atas adalah mengganti template secara global. Bila ingin merubah tampilan template tetapi masih tetap memakai template yang sama dapat menggunakan fasilitas blogger sesuaikan template.

Atau jika ingin merubah tampilan template secara lebih komplit, detail dan lebih bervariasi lagi bisa di baca di berbagai cara mengganti dan merubah template.

Semoga bermanfaat.

Cara Mendapatkan Alamat Url Foto Dengan Mudah

2014-03-26T10:26:00.001+07:00

Mendapatkan alamat url foto atau gambar sangatlah penting bagi seorang blogger. Dalam merubah bagian tertentu dari template misalnya untuk membuat background header dan background blog yang berupa gambar, maka gambar harus dibuatkan alamat url nya terlebih dahulu. Sebab gambar tidak bisa langsung di upload sebagaimana halnya upload foto saat membuat posting.

Cara membuat alamat url foto yang paling cepat, mudah dan praktis bagi seorang blogger adalah dengan memanfaatkan images hosting picasaweb dari google. Karena dengan memakai picasaweb kita tidak perlu login dua kali dan tidak perlu memiliki account images hosting lainnya. Dengan satu account email Gmail dapat kita pakai masuk dalam dashboard blogger dan picasaweb.

Berikut langkah - langkahnya untuk mendapatkan url gambar melalui picasaweb:

Langkah 1:
Siapkan foto atau gambar yang akan di upload di komputer. Kemudian Login ke picasaweb.google.com dengan account Gmail.

Langkah2:
Tampak halaman Google plus. Kemudian klik tulisan klik disini untuk kembali ke album web picasa, teruskan dengan klik Unggah. Lihat Gambar 1.

Langkah 3:
Buatlah album baru atau masukkan foto yang akan di upload ke album yang sudah ada. Lalu klik Pilih Foto Dari Komputer. Lihat Gambar 2.

Langkah 4:
Klik gambar yang hendak di upload dari komputer. contoh: saya ambil tiga gambar. Kemudian klik open. Lihat Gambar 3.

Langkah 5:
Gambar dalam proses upload. Tunggu sejenak sampai semua gambar yang diupload muncul. Lalu klik selesai teruskan dengan klik beranda. Lihat Gambar 4.

Langkah 6:
Klik album dimana gambar dimasukkan. Contoh: saya klik album "Foto Proses". Lihat Gambar 5.

Langkah 7:
Pilih foto yang hendak didapatkan alamat url nya dengan cara meng klik nya. Teruskan dengan klik kanan dan pilih Copy Image Location. Lihat Gambar 6.

Langkah 8:
Bukalah Notepad dan pastekan alamat url dari foto tersebut dan simpan. contoh alamat url foto dari picasaweb:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZusXVEO7EQa6DM07POfNq6xEqTc-NASRu26VwyBNVkoylJ6_ZA2h74JqdGX4wsV_jypLc912QZGZ8MsYM38wpSKPgD_fosf8vcOoQayx17IvJ2rOjJy4mNh3wdm5dYICrAqVQVWOA8lY/s1600/c-p-b-m.png.

Langkah 9:
Bukalah tab baru di browser, kemudian pastekan alamat url foto tersebut. Bila di layar monitor muncul gambar seperti yang diharapkan berarti alamat url gambar tersebut valid dan bisa digunakan.

Demikian penjelasan saya dalam mendapatkan alamat url foto. Selamat mencoba semoga manfaat.

Penghitung Huruf Karakter Blog Seo Friendly

2014-03-24T21:15:00.000+07:00

Menghitung huruf, karakter termasuk tanda baca dan spasi adalah sangat penting agar blog tetap seo friendly sehingga tidak sungkan - sungkan lagi untuk tampil di halaman pertama search engine.

Salah satu yang harus di atur atau di hitung adalah jumlah huruf, karakter, tanda baca dan spasi dalam Judul Artikel dan Deskripsi blog. Sebab mesin pencari akan menganggap tidak efektif bila judul artikel dan deskripsi blog terlalu panjang dengan jumlah huruf yang banyak.

Sumitexpress.com adalah salah satu web terpercaya dalam menganalisa meta tag agar seo friendly. Agar blog seo friendly maka huruf, tanda baca dan spasi untuk Judul Artikel tidak boleh lebih dari 80 karakter. Silahkan cek homepage dan halaman artikel di web tersebut.

Penghitung Huruf - Karakter - Kata Online

Hitung Sekarang

Semoga membawa manfaat.

Arti Padding Border Dan Margin Pada Blog

2014-03-24T13:41:00.000+07:00

Dalam mengganti, merubah dan mengatur template sebuah blog tidak terlepas dari istilah content, padding, border dan margin.

Bagi blogger baru (seperti saya), pada awalnya istilah padding, margin dan border tersebut sungguh sangat membingungkan sebab setiap kali browsing ke blog lain yang ada hanya gambat skema saja. Tidak ada gambar untuk contoh yang riil.

Berikut saya ulas lagi pengertian Padding, Border dan margin lengkap dengan contoh riil pada bagian Title Wrapper / area judul blog yang telah saya praktekkan.

Content: Arti sebenarnya adalah isi. Karena dalam contoh praktek ini adalah area Title Wrapper, maka yang di maksud dengan content adalah " Judul Blog ". Letaknya dipusat paling dalam.

Padding: Adalah jarak antara content dengan border (Garis Batas). Biasanya dalam satuan pixel (px).

Border: Adalah Garis batas dengan ketebalan tertentu dalam satuan px misalnya 2px, yang letaknya di akhir ukuran / nilai padding.

Margin: Adalah jarak antara Border dengan garis terluar dari halaman atau yang bisa disebut dengan content outer/inner/wrapper atau bisa juga berupa perbatasan dengan content lainnya, misalnya dengan Description Wrapper atau deskripsi blog.

Secara skematik content, padding, border dan margin dapat di lihat pada gambar di bawah.

Klik Gambar Untuk Memperbesar Tampilan

Contoh Padding, Border dan Margin pada Title Wrapper / Area Judul blog dapat dilihat pada ilustrasi gambar sebagai berikut.

Klik Gambar Untuk Memperbesar Tampilan

Title Wrapper dengan:

Padding atas dan bawah sebesar 22px, Padding Kiri dan kanan sebesar 30px.

Tanpa border dan tanpa margin.

Klik Gambar Untuk Memperbesar Tampilan

Title Wrapper dengan:

Padding atas dan bawah sebesar 22px, Padding Kiri dan kanan sebesar 30px,

Border: 2px (warna biru)

Margin: Atas 20px, Bawah 10px, Kiri 20px dan Kanan 20px.

Semoga bermanfaat dan salam blogger

Cara Mengetahui Ukuran Dan Kode Css Pada Blog

2014-03-22T18:59:00.000+07:00

Mengetahui ukuran dan kode Css dari header, Main Post, Sidebar dan footer serta bagian blog lainnya sangatlah penting jika ingin merubah template blog. Sebab untuk merubah template, langkah awalnya adalah harus tahu terlebih dahulu kode - kode Css dan Html yang dipakai oleh template tersebut.

Jika kode Css dan Html dari bagian blog yang ingin dirubah sudah diketahui, dengan pedoman kode - kode tersebut tinggal menganti, mengedit atau merubahnya.

Untuk mengetahui ukuran dan kode Css serta kode Html blog, dapat memakai fasilitas Inspect Element yang disediakan oleh browser Chrome, Mozilla maupun Explorer. Dalam hal ini saya contohkan memakai browser Mozilla Firefox untuk mengetahui ukuran, kode css dan html sidebar Widget kanan.

Langkah 1:
Buka Browser Mozilla Firefox, kemudian ketikkan di addres browser alamat blog yang ingin diketahui kode css dan html nya.

Langkah 2:
Arahkan Mouse / pointer ke bagian blog yang ingin dituju (contoh: Bagian Sidebar). Klik kanan dan pilih Inspect Element Lihat . Layar monitor akan terbelah menjadi 2 bagian. Bagian bawah layar adalah kode Html dan Css. Lihat

Langkah 3:
Bagian blog yang dituju akan ditunjukkan dengan garis putus - putus. Bila bagian blog yang dituju belum sesuai dengan yang diinginkan, geserlah ke atas dan ke bawah pada kode - kode html yang ada, bukalah tanda segitiga hitam yang ada dengan cara meng klik nya.

Jika bagian blog yang dituju sudah ketemu, kemudian klik Rules yang ada pada belahan layar bagian kanan. Maka di bawahnya akan muncul kode - kode css terkait dengan Sidebar Widget. Dalam contoh kode css nya adalah:

.main-inner .column-right-inner {
padding: 0px 15px;
}

Artinya: Sidebar tersebut menerapkan Padding / Jarak Batas keluar sebesar 0 px untuk batas atas dan bawah dan 15 px untuk batas kiri dan kanan.

Yang paling penting dalam hal ini adalah: jika ingin merubah bagian tertentu pada sidebar widget gunakanlah kode:

.main-inner .column-right-inner {.........}

Contoh merubah kode Css Sidebar Widget (coba letakkan kode css di bawah ini diatas </b:skin> lalu lihat hasilnya):

.main-inner .column-right-inner {
    padding: 0px 10px;
    font-family: forte;
    font-size: 11px;
   background: #900;
}

Langkah 4:
Klik Computed utk melihat kode css sidebar dan kode umum dari body blog. Font untuk melihat jenis huruf yang berlaku saat ini. Box Model untuk melihat ukuran bidang yang dituju Lebar X Tinggi dalam satuan pixel. Secara berurutan (dari tengah) angka - angka tersebut menunjukkan Ukuran Bidang Tujuan - Padding dan Margin.

Lebih jelasnya silahkan lihat ilustrasi gambar berikut:

Sebelum mengganti atau merubah template sebaiknya baca juga bagaimana cara merubah template yang aman.

Mengganti Dan Merubah Template Blog Dengan Aman

2014-03-20T11:41:00.000+07:00

Mengganti atau merubah template blog berarti juga menganti atau merubah kode - kode Css dan Html dari template blog itu sendiri. Dalam mengganti Css dan Html template haruslah berhati - hati. Sebab dengan kesalahan sedikit saja bisa membuat tampilan blog jadi rusak atau berantakan.

Lantas bagaimana cara yang tidak hanya sekedar mudah tapi juga harus aman dalam mengganti dan merubah template blog ?

Langkah 1:

Dalam browsing dan posting blog saya selalu menggunakan browser Chrome. Tapi dalam urusan mengganti atau merubah template wajib hukumnya bagi saya untuk menggunakan mozilla firefox. Sebab tampilan blog bisa berbeda di chrome dan di firefox, dan saya pernah mengalaminya. Hal tersebut dikarenakan Mozilla Firefox terlalu peka terhadap tanda (.) (') (spasi). Sedangkan browsing chrome lebih familiar dalam menerjemahkan tanda - tanda itu.

Langkah 2:

Buatlah cadangan atau backup template aslinya dengan menggunakan fasilitas dari blogger cadangkan / pulihkan. Berilah nama file cadangan tersebut dengan nama yang mudah diingat dan simpanlah pada folder khusus di komputer. Misalnya dengan nama: 1-template-asli.xml.

Langkah 3:

Dalam merubah kode Css sebaiknya semua diletakkan diatas kode ]]></b:skin> dan berilah keterangan agar mudah dalam merubahnya bila nanti dibutuhkan. Kode Css biasanya di awali dengan tanda dot (.) atau string (#). Misalnya merubah warna background header:

/*merubah header start*/

.header-outer {background: #a8a8a8;}

/*merubah header finish*/

]]></b:skin>

Langkah 4:

Berilah keterangan bila merubah atau menambah kode Html. Kode Html biasanya diawali dengan tanda tag <. Contoh menambah kode untuk membuat search engine:

langkah 5:

Simpanlah setiap artikel untuk posting dan widget / gadget kedalam file tersendiri di komputer dengan menggunakan notepad.

Langkah 6:

Cadangkan / backup template setiap selesai melakukan perubahan pada bagian blog. Misalnya setelah merubah bagian header cadangkan template dengan memberi nama file:

template: 2-template-sd header.xml

Enam langkah itulah yang telah saya tempuh dalam mengganti atau merubah template blog. Tidak hanya sekedar mudah tapi juga aman dan saya sudah membuktikannya. Salam sukses.

Mengganti Background Header Blog Dengan Mudah

2014-03-15T10:01:00.000+07:00

Warna Background atau latar header blog dapat diganti atau dirubah sesuai keinginan. Perubahan yang dapat dilakukan diantaranya adalah penggantian warna background header dengan 1 (satu) warna.

Contoh mengganti warna background header dengan ilustrasi dari warna biru #052d52 menjadi merah #b02045 sebagai berikut:

Langkah 1:

Langkah 2:

Carilah kode .header-outer atau yang mirip, lebih lengkapnya :

.header-outer {

background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; _background-image: none;

}

Langkah 3:

Tambahkan kode warna pada background sehingga menjadi:

.header-outer {
background: #b02045; $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}

Langkah 4:
Simpan Template dan lihat hasilnya.

Ilustrasi perubahan background header dapat dilihat pada:

Gambar sebelum ganti background header.
Gambar setelah ganti background header.

Jika menginginkan background berupa gambar atau foto untuk header, maka langkah awalnya adalah harus tahu terlebih dahulu ukuran header nya.

Semoga artikel yang ringkas ini membawa manfaat.