Trik Mudah Meng-edit Tampilan Template Blogger Super Mudah pake Inspect Elemen

Kasian blog ini gak keurus karena si admin fokus ke blog lain, kasian ya blog ini ga update posting... gw tau lu gapeduli.. iyakan? oke gapapa slow. Karena lagi ada angin baik jadi mau update posting blog deh, sayang sayang blog nya udah dikenal mbah Google

Kali ini gw mau update tentang tutorial Edit template blogger super mudah, bahkan buat newbie sekalipun.

ohiyaa sebelum ngebaca lebih dalam.. jangan serius serius yakk

sedikit curhat pertama kali kenal blogging

kalo dulu pertama kali ngeblog 2011 masih ababil gonta ganti template, liat template bagus langsung ganti, liat template keren langsung ganti, liat template warna-warni langsung ganti...Eh tapi template awal lebih bagus langsung ganti template awal. eh template itu kayaknya lebih keren dehh, ganti lagi... Hadehhh gini aja terus sampe Google plus ngalahin Facebook...

ngaku aja dulu lu juga gt kan..? iyakan? udah ngaku aja

oh sekarang masih gt...?ckckc tobatlahh nak...

Disini mungkin ente belum tau kalo kita bisa edit template blogger sesuka hati gacuman ganti template, kita bisa edit tampilan template blogger dengan gaya apapun lahh..pokoknya suka suka

Tapi kan gw gangerti kode kode template blogger gimana dong?

Slow disini bakal gw ajarin ilmu gw selama nyolong kode template orang lain hehehe *ups* tapi gw bukan orang yang suka kloning kokk sloww, cuman ngambil kode yang menurut gw bagus, trs gw terapin deh di blog (sama aja-_-)

oke sudah cukup curhatnya,  mari kita mulai belajar edit template super mudah ala ala gw.

Pertama yang perlu diketauhi mengenai template blogger

1. Blogger mengizinkan kita buat edit template sesuka hati, beda sama sodaranya yang itu tuhh...

2. Template blogger itu berbentuk ekstensi .xml yang didalemnya berisi dari kode HTML, CSS, JAVASCRIPT/JQUERY

• HTML itu kerangka luar (masih belum berbentuk)
• CSS itu sebagai perangkai yang buat design HTML lebih berbentuk dan rapih
• JAVASCRIPT/JQUERY itu buat fungsi fungsi kompleks dari si HTML dan CSS

Nah buat ngedit tampilan blog kita cuman perlu belajar yang  HTML dan CSS, kecuali untuk tampilan yang lebih kompleks kita perlu JS (baca:Javascript)

Karena design tampilan blogger intinya cuman HTML yang diperindah dengan CSS, bisa dibilang si HTML ini Pacarnya si CSS lahh...kalo Javascript siapanya HTML? anggap aja kekasih gelap...

kenapa gw bilang si HTML ini pacarnya CSS karena dua kode ini selalu berduaan mulu..kalah gw T_T

Kalo ada HTML pasti ada si CSS...gitu

HTML tanpa CSS tampilanya ancurr...

CSS tanpa HTML kurang sreg...

Karena emang dasarnya si HTML ini dilengkapin sama CSS biar jadi rapih

lu pasti sering liat kode HTML yang ada div div nya kan? nah si kode div ini tempat si css ngebungkus HTML

contoh: 

berikut ini kode css

.breadcrumbs {
border:1px solid #eee;
padding:3px 5px 5px 10px;
margin:10px auto;
font-size:11px;
color:#595959;
width:96.5%;
background:#fff;
}

dan kode ini HTML tanpa CSS

<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187;
<span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187;
<span>Posts filed under <data:blog.pageName/></span>
</b:if>

Dan ini HTML yang udah dibungkus CSS

<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187;
<span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187;
<span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>

Nah si HTML ini dibungkus pake judul CSSnya aja contoh .breadcrumbs kodenya jadi <div class='breadcrumbs'>

Ohiya perlu diperhatiin tanda didepan CSS ada titik (.) tanda titik ini disebut class jadi <div class='breadcrumbs'>

nah Tanda didepan css juga ada yang hashtag (#) tanda ini disebut ID jadinya <div id='breadcrumbs'>

pokoknya pasangan titik (.) itu class
pasangan hashtag (#) itu id

udah ngerti kan...? udah aja ya...

kalo masih belum ngerti berguru aja di w3schools

Lanjut cara edit template blogger super mudah pake inspect elemen

kata siapa sih edit template itu susah? kata nubie lah.. ohiya bener juga

tapi sebenrnya edit template blogger itu mudah lohh, gak kaya theme wordpress hahay

untuk edit template hanya untuk tampilan design luar (antarmuka blog) itu sebenernya cuman perlu mengerti dasar dasar dari HTML sama css, sampa disini mungkin lu udah gw anggap ngerti lah ya CSS dikit dikit.

buat ngerubah tampilan template adsense it sebenernya gampang kok, gaperlu lagi harus gani kode trus save, trus liat. NO..

Mari kita edit template secara real, realnya adalah begitu kita ganti css, si template bakal berubah.

cara ini dinamakan Inspect Elemen? apatuh inspect elemen? coba buka blog lu trus klik kanan, bakal muncul tampilan trus pilih dah yang Inspect elemen

berikut nih gw ajarin

pertama tama klik kana trus klik inspect elemen

nah disitu bakal tampil isi dari blog lu, kalo yang kiri itu HTML yang kanan CSS

nahh trus coba klik icon find tuh, trus arahin deh ke bagian bagian blog yang mau dirubah tampilahnya, seperti gambar dibawah

Klik gambar untuk memperbesar

nah kalo lu liat disitu udah keluar HTML dan CSSnya, tuh dipojok kanan bawah si CSS, coba deh lu ubah ubah CSSnya entah itu warna atau angkanya..

pasti bankalan berubah langsung..

ohiya kalo udah dirasa pas dengan yang diinginkan, jangan lupa buat kopi kode yang di CSS itu ke template blogger, apus kode yang sebelumnya

Kesimpulan dari edit template ala ala inspect elemen

Ohiya sedikit saran aja, kalau mau edit template atau redesign template blogger..Buat templatenya sesederhana mungkin...dampak template yang sederhana selain jadi loadingnya cepet juga enak pas dibaca.. Karena simple is kill1ng.

Hindarin edit template yang mencolok, atau rame yang kek pasar malem... Dampak template yang terlalu mencolok dan rame itu mirip kek lu lagi tidur malem lampunya dimatiin, pas lu bangun lampunya terang, apa yang lu rasain? OMG my eyes pedess

nah gitu..

jadi edit template sesederhana mungkin, dengan warna yang enak diliat mata...pake warna yang itu ajatuh yang lagi ngetren... Flat color