Bikin Tampilan Blog kaya Web

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

Hal pertama yang harus dilakukan buat account layanan upload image. Anatara lain ImageShack, TinyPic, UploadHouse.

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 disini

NAV BAR

Nav 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