Mengganti Dan Merubah Template

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.

Baca Selengkapnya »

Cara Backup Dan Restore Template Blog

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.

Baca Selengkapnya »

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 »

Cara terbaru mencari kode skin head dan body pada blog

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.

Baca Selengkapnya »

Cara Mengganti Dan Merubah Warna Link Di Blog

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.

Baca Selengkapnya »

Cara Mengganti Background Tulisan "Diposkan Oleh Posted By"

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.

Baca Selengkapnya »

Cara Mengganti Warna Link Blog Hanya Pada Widget Sidebar

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.

Baca Selengkapnya »