Langsung g Usah basa basi
Blogspot adalah Blog/website/Situs berbasis XML/XHTML/HTML/(Atau Apalah yang penting ada HTML nya, gak usah dibikin ribet masalah ini, g ada pengaruhnya), disana, kita akan menemukan banyak code yang berbentuk
<code> Code blablabla </code> ... dan tentunya Kita juga menemukan Style CSS juga untuk mengedit warna template, Type Template, Font Template dll ...
Nah disini, kita akan belajar Memahami Code-code HTML pada Blogspot ... Biar Lebih nyaman buat take Action , mari kita buat Dulu sebuah Blog di Blogspot ...
First, kita harus memahami sebuah konsep HTML di blogspot, Code HTML di blogspot dasarnya adalah Sbg :
<body>blablabla<body>
<div>code</div>
<script>scriptnya disini</script>
<style>css style nya disini</style>
dll
Intinya, jika terdapat Code seperti <code> Harusnya di belakang nya di akhiri dengan Code Yang hampir mirip hanya saja di Tambahkan Sebuah code / di dalamnya ...
Ok, kita mulai Take Action, Kita harus Fokus, Dan Langsung take action, biar cepet nyantol, eitsss, kita coba dulu take action dengan bagaimana cara menambahkan sebuah Text pada Kolom Bawah Template kita, contoh text akan dibuat seperti "© Nama blog ente Design By - Ads-id And Powered By Blogger" ...
Go to BLogger
Login > Dashboard > Rancangan > Edit HTML > Cawang Expand Widget Template
oh iya, jika ada yang bertanya Apa Fungsi Dari "Expand Widget Template" Di blogger ?
Fungsinya adalah Menampilkan Code/script Lebih Details Lagi, Agar terlihat secara jelas, apa saja isi-isi dari Template Blogger kita .... Ini berguna bagi Beginner(bukan pemula) karena ini hanya dibutuhkan ketika mengedit widget template ...
Cari Code </body> ...
Di atas Code </body> Tambahkan lah sebuah Code
<div id='credit-wrapper'>
<div id='credit'>
<div class='credit_l'>© <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a> | Design by <a href='http://adsense-id.com/' title='jojoijo'>Adsense-ID</a>
</div>
<div class='credit_r'>Powered by <a href='http://www.blogger.com/' title='blogger'>Blogger</a>
</div>
</div>
</div>Note : Code yang
<div id='credit-wrapper'>
<div id='credit'>
<div class='credit_l'>
Di tambahkan bila ente2 pada buat CSS di Blog ente ... Jangan ditambahkan Jika Ente Ga mau Ribet ....
Kalo Ente mau ribet, Tambahkan saja Code Ini di atas ]=]=></b:skin>
Code:#credit-wrapper{background: #a6a6a6;height: 20px;padding: 10px 0;border-top:1px solid #828282;}
#credit {width: 960px;margin: 0 auto;color: #e2e1e1;}
#credit a,#credit a:visited{color: #fff;text-decoration:none;}
#credit a:hover{text-decoration:underline;}
.credit_l{float:left;;width:750px;}
.credit_r{float:right;width:145px;text-align:right;Tentunya code CSS di atas bisa diganti sesuka mungkin ...
Save, dan lihat template anda, Apakah Adakah Tulisan Tersebut ??? Dan ketika anda terdapat Warn Bertuliskan Merah, berarti anda Menghapus sebuah Code/Kurang Code ...
nah, jika tahap take action 1 selesai, kita Akan memulai membahas Tentang Style CSS ...
Style CSS disini Pada dasarnya Hanyalah Sebuah Style bermodalkan Text yang harus dipelajari Oleh seorang Pemula Yang Ingin Belajar Mengoprek Template, Tentunya CSS Sangat Dibutuhkan Oleh semua CMS Website/blog/situs ...
Mulai Pelajaran Tentang CSS, CSS itu seperti ini kurang lebihnya ...
Code:body{background: #F7F7F7;margin:0;color:#191919;font-family:Comic Sans MS;font-size:13px;}intinya
Style CSS Memanggil variable Kata "Body"
Style CSS Akan Berfungsi di Dalam Tanda { dan berakhiran dengan arah baliknya yaitu }
Style CSS dipisahkan Oleh tanda ";"
Style CSS Mengartikannya dengan tanda ":" .... agak sedikit susah saya Jelaskan Pengertiannya, karena disini CSS Lebih banyak Daripada HTML ... Saya disini bisa Memberi Contoh , dan langsung Take Action ...disini, kita akan Mengganti Text Pada Area Postingan Blog Blogspot Dengan Text Font Comic Sans MS
First , Login > Dashboard > Rancangan > Edit HTML
Cari Code .post {jika tidak ketemu carilah code .post-body { ... biasanya, sebuah designer template membuat/mengada2 Nama sebuah CSS, jadi agak kesusahan dalam mencari Nama Sebuah Code CSS ini ...
Lalu Carilah Variable Font-family didalam Code .post-body { ....
dan intinya Code tersebut begini
Code:.post-body {margin:0 0 .75em;line-height:1.6em;font-family:Comic Sans MS;background:#ebebea;padding:10px;border-left:1px solid #fff;border-right:1px solid #fff;}Lalu Simpanlah Template anda ... Apa Yang terjadi ???
nah , jika tahap 1 dan 2 sudah mendalami, maka kita disini akan menggabungkan HTML Dengan Style CSS ...disini, saya akan mencontohkan cara membuat Navbar Melayang Di atas Blog
First > Dashboard > Rancangan > Edit HTML > Cawang Expand Widget Template ...
Cari Code ]=]=></b:skin>
Tempatkan Code ini diatas Code ]=]=></b:skin>
Code:#float-navbar{background:#3b3b3b;border-bottom:1px solid #3b3b3b;margin:0 0 0px 0;padding:0px 0;z-index:100;top:0;left:0;width:100%;overflow:auto;position:fixed} #Ojok-Bengong a{padding:0 0 0 23px;text-decoration:none;color:#fff} #Ojok-Bengong a:hover{text-decoration:underline;color:#fff} #comments h4 { margin:0; font-weight: bold; line-height: 1.4em; text-transform:uppercase; letter-spacing:.2em; color: #000; }Lalu Cari Code
<body>Tempat kan code ini dibawah Code
<body>Code:
<div id='float-navbar'><div id='Ojok-Bengong'><span class='left'><div style='padding-left:0; float:left;'><strong><a href='hxxp://twitter.com/xxx'>Twitter</a> <a href='hxxp://facebook.com/xxx'>Facebook</a></strong></div></span></div></div> Save template ... liat hasilnya ....
lihatlah Code
<div id='float-navbar'><div id='Ojok-Bengong'>(yang Warna Biru ini Memanggil Style CSS agar bisa di combinasikan dengan HTML)<span class='left'><div style='padding-left:0; float:left;'>(yang Warna Kuning ini bisa dinamakan LiveStyle CSS With HTML, karena langsung menyertakan style)
Sampai Ketiga Tips ini, anda harusnya mengerti sedikit demi sedikit tentang pengertian HTML Dan Style CSS
Sorry kalo brantakan Tulisannya ya gan....
