Blogspot dengan segala kemudahannya memungkinkan kita untuk mengubah tampilan blog kita selayaknya web-web mahal. Hal pertama yang biasanya dilakukan blogger untuk mengubah tampilan dengan mencari template gratis di internet. Variasinya banyak sekali, dari yang elegan sampai yang full colour.
Bosan dengan template, barulah kita bermain dengan htmlnya. Fitur dalam blogspot memungkinkan kita untuk memanipulasi tampilan web kita.
Hal pertama yang saya lakukan adalah mengganti BACKGROUND IMAGE, sebenarnya tutorial mengenai edit tampilan banyak banget di internet. Yang saya lakukan adalah merangkumnya semua hal yang saya lakukan dalam meng-edit tampilan blog saya. Nanti saya sertakan link sumbernya, untuk memudahkan kalian.
BACKGROUND IMAGE
Login account blogspot => klik dasbor => Layout => klik edit HTML (Expand Templ. Widget jangan dicentang)
Save HTML sebagai backup di Notepad.
Cari kode dibawah ini,
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: $textColor;
background : #000000;
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
}
Perhatikan teks yang berwarna merah!! tambahkan dengan kode seperti dibawah ini :
url(http://ALAMAT URL GAMBAR);
background-attachment: fixed;
Copy/Paste seperti dibawah ini:
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: $textColor;
background: #ff0000 url(http://ALAMAT URL GAMBAR);
background-attachment: fixed;
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
}
Untuk teks yang warna orange dapat diganti sesuai kebutuhan, seperti ini :
Fixed : agar letak gambar background tetap/statis
Scroll : agar gambar background ikut bergerak/bergeser saat kita men-Scroll mouse kita.
dan jangan lupa klik tombol Save/Simpan.
Sumber:
klik disiniNav Bar bagi saya sangat tidak berguna dan tentunya sangat tidak mempercantik web. Maka dari itu mari kita hapus. Caranya adalah sebagai berikut:
Klik Layout => Klik Edit HTML.
Copy script berikut ke dalam tag head
#navbar-iframe {
display: none !important;
}
contohnya sebagai berikut :
-----------------------------------------------
Blogger Template Style
Name: Son of Moto (Mean Green Blogging Machine variation)
Designer: Jeffrey Zeldman
URL: www.zeldman.com
Date: 23 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
#navbar-iframe {
display: none !important;
}
/* Variable definitions
====================
Paste script di warna merah dan klik simpan.
Sumber:
Klik disini
TITLE BLOG
Mungkin bagi beberapa orang Title Blog ini ibarat headline pada surat kabar. Tapi keberadaannya sangat tidak sesuai dengan keinginan saya. Cara menghapusnya dari web sebagai berikut.
Klik Layout => Klik Edit HTML (widget jangan dicentang)
#header h1 {
...........
...........
}
copy/paste script dibawah ini
visibility:hidden;
Atau
display:none;
sehingga hasilnya seperti ini
#header h1 {
...........
...........
visibility:hidden;
}
Klik simpan.
Sumber:
Klik disini
Langgan: Entri (Atom)
Ini sudah pasti harus dihapus karena tidak adanya fungsi yang berarti.
Cara menghapusnya :
Klik Layout => Klik Edit HTML (widget dicentang)
Cari script dibawah ini
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
Hapus script itu, simpan dan selesai. Web kita menjadi bersih.
Sumber:
Klik disini
Didukung oleh Blogger
Cara menghapus tulisan ini cukup mudah. Tekniknya hampir mirip dengan diatas
Copy kode dibawah ini :
#Attribution1 {
height:0px;
visibility:hidden;
display:none
}
Cari kode
]]></b:skin>
Letakkan kode tepat diatas kode ]]></b:skin>
#Attribution1 {
height:0px;
visibility:hidden;
display:none
}
]]></b:skin>
Klik simpan.
Sumber:
Klik disini
BERANDA
Klik Layout => Klik Edit HTML (widget dicentang)
Cari kode di bawah ini
<data:homeMsg/>
Hapus dan simpan.
sumber:
Klik disini
