Tampilkan postingan dengan label blogspt. Tampilkan semua postingan
Tampilkan postingan dengan label blogspt. Tampilkan semua postingan
New Free Blogspot Templates 2011
New Free Blogspot Templates 2010 2 column, 3 column, magazine blogger templates for 2010 free downloads…
Green Revolution Blogger Template
Elegant Style & SEO Friendly
Free magazine Template R.1.5
Green Revolution Blogger Template
Membuat Top Menu Template Blogspot ( Part 8)
Cara Membuat template sederhana Blogspot Part 8 ini membahas pembuatan TOP MENU. Sebenernya membuat top menu ini bisa kamu baca pada artikel Cara Membuat Top Menu di Blogger, tapi karena ini sederhana jadi aku tulis lagi deh top menu yang paling sederhana ok? Sekali lagi jangan lupa bagi yang ketinggalan artikel baca dulu artikel di bawah ini :
Cara Membuat Template Sederhana Blogspot :
Part 1, Part 2 , Part3, Part4, Part 5, Part 6, Part 7
Ayo kita kemon.... Pada artikel sebelumnya cara membuat template Sederhana Blogspot Part 7 sudah kita masukan kode untuk menampilakan judul dan diskripsi Blog. Dan sekarang kita akan menambah kode untuk top menu di template Blogspot, ikuti langkah-langkah di bawah ini :
Cara Membuat Template Sederhana Blogspot :
Part 1, Part 2 , Part3, Part4, Part 5, Part 6, Part 7
Ayo kita kemon.... Pada artikel sebelumnya cara membuat template Sederhana Blogspot Part 7 sudah kita masukan kode untuk menampilakan judul dan diskripsi Blog. Dan sekarang kita akan menambah kode untuk top menu di template Blogspot, ikuti langkah-langkah di bawah ini :
- Masuk Ke Account Blogspot kamu.
- Pada Dasbor pilih rancangan pada blog kamu dan akan terlihat dasbor lalu klik Tata Letak>Edit HTML. jangan lupa beri tanda cek pada Expand Template Widget.Cari kode di bawah ini :
#top-menu {
...........
}
Lalu tambahkan dibawahnya Kode CSS berikut :
#top-menu a, #top-menu a:visited {
color: #000000;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
font-weight:bold;
}
#top-menu a:hover {
color: #000000;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}
#topleft {
width: 500px;
float: left;
margin: 5px 0 0 3px;
padding: 0px;
} - Langakah selanjutnya cari kode di bawah ini :
<div id='top-menu'>
Home |
About Me |
Contact Us
</div>
Tambahkan kode seperti di bawah ini :
<div id='top-menu'>
<div id='topleft'>
<a href='http://tempfor.blogspot.com/'>Home</a> |
<a href='http://tempfor.blogspot.com/'>About Me</a> |
<a href='http://tempfor.blogspot.com/'>Contact Us</a>
</div>
</div>
kemudian ganti tulisan yang berwarna merah dengan link yang kamu kehendaki.
Misal :
<a href='http://tempfor.blogspot.com/'>Home</a>ganti http://tempfor.blogspot.com dengan alamat blog kamu. - Setelah selesai klik simpan template. Uuntuk melihat hasilnya klik kanan mouse kamu pada tulisan Lihat Blog lalau pilih open new tab (kalau pake mozzila) bimsalabim jadi deh top menunya di bawah ini :
Contoh jadinya silahkan kunjungi : http://tempfor.blogspot.com/
Jika panah mouse berada pada tulisan home di top menu akan keluar garis bawah yang menandakan ada linknya :)
Tambahan : Merapikan bagian Navbar. Kenapa harus dirapikan ? ini sebabnya : kalau kamu lihat navbarnya masih ada jarak dengan browser untuk itu kita buat nempel ke browser aja... caranya ?
Ikuti langkah-langkah di bawah ini :
- Masih pada posisi Edit HTML, cari kode CSS si bawah ini :
body {
padding:3px;
background:#fff;
font-family:Century gothic, Arial,Tahoma,sans-serif;
color:#126A9B;
font-size:13px;
text-align: center;
margin:2px;
}
Ubah padding dari 3px menjadi auto dan margin dari 2px ke auto. Kemudian klik simpan template. Setelah proses selesai silahkan lihat blog ada dannnnn sudah rapi deh... :)
Ok sampai disini dulu ya... terus kunjungi blog ini ya biar tuntas bikinnya.. jangan lupa komentar ya... thanku everybody....
Part 9 - Membuat Sidebar Template Blogspot
Cara Menambah Kode Khusus Header dan Diskripsi Template Blogspot ( Part 7)
Cara Membuat template sederhana Blogspot Part 7 ini mau kasih tau bagaimana nambah kode khusus untuk menampilkan Judul dan Diskripsi pada Header Blog kita. Sekali lagi jangan lupa bagi yang ketinggalan artikel baca dulu artikel di bawah ini :Cara Membuat Template Sederhana Blogspot : Part 1, Part 2 , Part3, Part4, Part 5, Part 6
Yuks kita mulai... Pada artikel sebelumnya cara membuat template Sederhana Blogspot Part 6 sudah kita pasang template yang kita buat ke Blog kamu. Dan sekarang kita akan menambah kode-kode yang di gunakan untuk template Blogspot, kita tidak lagi menggunakan HTML Kit tapi langsung edit di blog kita. Ikuti langkah-langkah di bawah ini :
- Masuk Ke Account Blogspot kamu.
- Pada Dasbor pilih rancangan pada blog kamu dan akan terlihat dasbor lalu klik Tata Letak>Edit HTML jangan lupa beri tanda cek pada Expand Template Widget. Cari kode CSS di bawah ini :
#header {
...........
}
Lalu Tambahkan di bawahnya kode html di bawah ini :
#header h1 {
margin:5px 5px 0 0;
padding:15px 20px 5px 20px;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font-family: Georgia, Serif;
font-size:24px;
font-weight:bold;
}
#header .description {
color: #f3f2e8;
margin-left: 0px;
padding-left: 20px;
font-family:Georgia, Times New Roman;
font-size:14px;
font-style:normal;
font-weight:bold;
} - langkah berikutnya cari kode di bawah ini :
<div id='header'>
header
</div>
ganti tulisan heade yang di apit <div id='header'>... </div> ganti dengan kode dibawah ini :
<b:section class='header' id='gadgetheader' preferred='yes'/>
Kemudian klik tombol Simpan Template - Selanjutnya uncheck pada Expand Template Widget
- Klik pada tab Element halaman, dan akan terlihat struktur dari template blog kamu. Pada posisi header terdapat tulisan Tambah Gadget,
klik disana maka akan muncul jendela baru untuk memilih gadget pilih header halaman klik tanda (+)
Lalu isi judul blog maupun diskripsinya lalu klik simpan.
untuk melihat hasilnya klik kanan mouse kamu pada tulisan Lihat Blog lalau pilih open new tab (kalau pake mozzila) taraa akan muncul seperti gambar di bawah ini :
Contoh jadinya silahkan kunjungi : http://tempfor.blogspot.com/
di sana terdapat navbar, judul blog dan diskripsi blog... bagaimana serukan... ? makanya disimak terus... jangan lupa coment ya... tanya juga boleh...
ok sekian dulu ya artikel cara membuat template sederhana blogspot Part 7 tunggu tanggal mainya Part 8.. cauuuu
Part 8 - Membuat Top Menu Template Blogspot
Merubah kode HTML menjadi XML ( Part 6)
Part 6 kita akan merubah kode HTML template menjadi XML agar dapat di pasang pada blogspot, OK sudah siap lanjut? Jangan lupa bagi yang ketinggalan artikel baca dulu artikel di bawah ini :Cara Membuat Template Sederhana Blogspot : Part 1, Part 2 , Part3, Part4, Part 5
Let’s Go... Setelah semua urusan kode html dan kode css selesai kita buat, ini saatnya menambahkan kode khusus untuk Blogspot supaya dapat kita pasang template yang kita buat di Blogspot. OK.. ikuti langkah-langkah di bawah ini :
- Buka Software HTML Kit , klik di Open from recent files this : dan pilih file yang sudah kita buat diawal kemarin(desain template blogspot )trus klik ok.
- Muncul halaman yang kita buat kemarin. Cari kode :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
Yang ada di bagian paling atas, lalu ganti kode tersebut dengan kode di bawah ini :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> - Kemudian dibawah kode <head>tambahan kode di bawah ini :
<b:include data='blog' name='all-head-content'/>
Lalu pada kode :
<title>Desain Template Blog</title>
Tulisan Template Blog Sederhana ganti dengan kode dibawah ini :
<data:blog.pageTitle/>
Dan kode :
<style type="text/css">diganti dengan kode<b:skin><
Kemudian cari kode</style>untuk mempermudah pencarian silahkan tekan tombol ctrl+f dan copas kode tadi. Kalau sudah ketemu ganti kode tersebut dengan kode]]></b:skin> - Nah kalau proses ini sudah selesai coba klik file> save as beri nama template diikuti .xml lalau klik save. Nah jadi sudah file template kita dan siap di upload di blog kamu. Untuk cara upload bisa baca artikel Cara Ganti Template Blogspot. setelah di upload klik kanan pada lihat blog lalu klik “Open Link in new Tab” bagaimana sudah muncul template hasil karya kamu sendiri? Untuk sementara seperti itu ya dan tampilannya seperti gambar di bawah ini :
Kalau ada yang menemukan sidebar-kanannya masih di bawah sidebar-kiri masuk ke Edit HTML lalu cari #content. Untuk mempermudah silahkan tekan F3 pada keyboard untuk mencarinya. Kalau sudah ketemu ubah width nya menjadi 492px, lalu klik tombol Simpan Template.
Contoh jadinya silahkan kunjungi : http://tempfor.blogspot.com/
Lihat kembali blog kamu bim salabimmmm... jadi seperti gambar diatas kan?... ok berhasil... berhasil... berhasil... ada yang kurang paham? komen aja ya atau contact us nanti kami jawabnya...
Untuk berikutnya Cara Membuat Template Sederhana Blogspot akan menambahkan kode khusus Blogspot untuk menampilkan judul Blog dan Diskripsi. Baiklah kawan Permak Blogs tunggu tutorial blog selanjutnya ya... cauuuuuuu....
Part7 - Cara Menambah Kode Khusus Header dan Diskripsi Template Blogspot
Untuk berikutnya Cara Membuat Template Sederhana Blogspot akan menambahkan kode khusus Blogspot untuk menampilkan judul Blog dan Diskripsi. Baiklah kawan Permak Blogs tunggu tutorial blog selanjutnya ya... cauuuuuuu....
Part7 - Cara Menambah Kode Khusus Header dan Diskripsi Template Blogspot
Mengatur Bagian Footer ( Part 5)
Tuorial template Part 5 mengatur bagian Footer Blogspot, lanjutkan nyimaknya ya.. jangan lupa bagi yang ketinggalan baca dulu artikel di bawah ini :Cara Membuat Template Sederhana Blogspot : Part 1, Part 2 , Part3, Part4
Lansung kita mulai aja ya? Setelah kita mengatur sidebar dan kontent, kali ini kita akan bagian akhir dari suatu blog yaitu footer. Bagian footer biasanya diisi dengan copyright atau pembuat design. OK sudah siap? Jangan lupa sediakan minum dan cemilan dulu ya biar semangat heheheh.. kalau sudah ikuti langkah-langkah di bawah ini :
- Buka Software HTML Kit , klik di Open from recent files this : dan pilih file yang sudah kita buat diawal kemarin(desain template blogspot )trus klik ok.
- Nah sekarang muncul halaman yang kita buat kemarin. Blok tulisan footer lalu klik “HTML TagsWizard” pada toolbar atas, pilih DIV
Setelah muncul boks TagsWizard ketik footer pada kotak isian di samping “id” kemudaian klik ok.
Ganti tulisan footer dengan tulisan " (©) 2011 Design by nama kamu ". Jangan lupa hapus kurung buka dan tutup yang menyertai &....
- Langkah selanjutnya kita buat code CSS untuk bagian footer. scroll layar ke atas sampai terlihat #content {..... } copy paste code CSS dibawah ini untuk footer.
#footer {
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
text-align: center;
color: $footerTextColor;
font: $footerTextFont;
line-height: 1.2em;
}
Sudah dan haslinya seperti dibahah ini.. betul?
- OK sudah selesai pengaturan sidebar dan content, jangan lupa di simpan ya... crtl+s trus kalau mau lihat klik tab preview dan hasilnya seperti dibawah ini
Untuk menghilangkan efek float silahkan tambahkan kode ini
<br class="clear"/>
sebelum </div> sidebar dan <div id="footer"> seperti dibawah ini
Dan juga tambahkan kode CSS untuk clear di bawah ini di bawah kode CSS #footer{....} :.clear {
clear: both;
text-align: center;
}
kemudian tekan tombol crtl+s.
Nah selesai sudah pembuatan template tahap awal, untuk artikel berikutnya kita akan memasukan kode khusus blogspot ke template agar dapat dipasang di blog kamu. lho kok tampilannya cuma begitu kalau mau nambah gambar, background dll bagaimana? Terus simak aja ya biar lebih jelas... kalau ada yang masih bingung comment aja ya... ok ciau
Part 6 - Merubah kode HTML menjadi XML
Mengatur Sidebar dan Content ( Part 4)
Yuhuuuu Part 4 mengatur bagian Sidebar dan Content Blogspot sudah hadir... silahkan di simak ya.. jangan lupa bagi yang ketinggalan artikel baca dulu artikel di bawah ini :Cara Membuat Template Sederhana Blogspot : Part 1, Part 2 , Part3
OK kita mulai setelah kita bermain di header dan top Menu, kaliini kita akan bermain air di sidebar dan content. Sudah siap? Ambil minum dan cemilan dulu ya biar semangat heheheh.. kalau sudah ikuti langkah-langkah di bawah ini :
- Buka Software HTML Kit , klik di Open from recent files this : dan pilih file yang sudah kita buat diawal kemarin(desain template blogspot )trus klik ok.
- Nah sekarang muncul halaman yang kita buat kemarin. Blok tulisan ruang-sidebarkiri lalu klik “HTML TagsWizard” pada toolbar atas, pilih DIV
Setelah muncul boks TagsWizard ketik sidebar pada kotak isian di samping “id” kemudaian klik ok. - Lakukan langkah-langkah pada poin ke 2 untuk bagian sidebar–kanan dan kontent. Untuk id sidebar kanan tulis sidebar dan id kontent isi dengan content. Hapus tulisan ruang-sidebarkiri, kontent, dan ruang-sidebarkanan . dan hasilnya seperti di bawah ini :
- Langkah selanjutnya kita buat code CSS masing masing bagian . scroll layar ke atas sampai terlihat #top-menu {..... } copy paste code CSS dibawah ini untuk sidebar.
#sidebar {
margin:2px;
padding:3px;
width:200px;
border:1px solid #000;background:#abc;
float:left;
Overflow:hidden;
}
Dan juga copy paste kode CSS di bawah ini untuk content.
#content {
Overflow:hidden;
margin:2px;
padding:3px;
width:500px;
border:1px solid #000;
background:#eee;
float:left;text-align: left;
}
Sudah dan haslinya seperti dibahah ini.. betul?
- OK sudah selesai pengaturan sidebar dan content, jangan lupa di simpan ya... crtl+s trus kalau mau lihat klik tab preview dan hasilnya seperti dibawah ini
Pindah </div> ke bawah tulisan sidebar-kiri .
OK sekian dulu ya untuk pengaturan sidebar dan content, untuk artikel berikutnya kita akan mengatur bagian footer(Part 5). Terus simak ya biar tuntas... kalau ada yang masih bingung comenta aja ya... ok ciau
Mengatur Header dan Top Menu (Part 3)
Sudah Part 3 ya...hmmm ok kita akan melanjutkan dengan menata bagian header dan top menu, bagi yang ketinggalan kereta baca dulu artikel di bawah ini :Cara Membuat Template Sederhana Blogspot :
Part 1, Part 2
Sudah ? Mari kita mulai bermain di header dan top Menu. Di dalam header akan kita letakan Judul Blog dan Diskripsi. Dan top menu berisi menu-menu untuk memudahkan pengunjung blog menemukan artikel yang mereka cari. Ok langsung ikuti langkah-langkah di bawah ini :
- Buka Software HTML Kit , klik di Open from recent files this : dan pilih file yang sudah kita buat diawal kemarin(desain template blogspot )trus klik ok.
- Nah sekarang muncul halaman yang kita buat kemarin. Blok tulisan kotakblog lalu klik “HTML TagsWizard” pada toolbar atas, pilih DIV
Setelah muncul boks TagsWizard ketik kotakblog pada kotak isian di samping “id” kemudaian klik ok.
Makan akan muncul kode <div id="kotakblog">kotakblog</div>,pindah </div> ke posisi dibawah footer dan hapus tulisan kotakblog yang berwarna hitam.
- Setelah itu blok tulisan header, lalu ulangi langkah sebelumnya dengan mengklik “HTML TagsWizard” pada toolbar atas, pilih DIV. Dan pada kotak isian disamping id tulis header lalu klik ok.
Maka akan muncul kode header pindah ke bawah diskripsi blog lalu hapus tulisan header yang diluar <> tara... jadilah seperti dibawah ini :
- Lakukan hal yang sama dengan tulisan top-menu, blog tulisan tersebut klik “HTML TagsWizard” , tulis top-menu di kotak isian disamping id klik ok. Akan muncul tags <div id="top-menu">top-menu</div> lalu hapus tulisan top-menu dan pindah </div> kebawah Contact Us. Hasilnya seperti dibawah ini :
- Nah sudah selesai membuat tag header dan top menu, sekarang saatnya mengatur letak masing – masing content dengan CSS.
- Scroll lembar halaman sampai ketemu <style type="text/css"><!-- // --> </style> nah disini kita tulis CSS nya.
- Langkah pertama copy paste kode dibawah ini diantara <!-- // --> :
body {
padding:3px;
background:#fff;
font-family:Century gothic, Arial,Tahoma,sans-serif;
color:#126A9B;
font-size:13px;
text-align: center;
margin:2px; }
#kotakblog {
margin:2px;
padding:3px;
width:930px;
border:1px solid #000;
background:#0ff;
margin:0 auto;
}
Akan jadi seperti di bawah ini :
Kemudian copy paste kode dibawah ini di bawahnya :
#header {
margin:2px;
padding:3px;
width:920px;
height:100px;
border:1px solid #000;
background:#0f0;text-align: left;
}
#top-menu {
margin:2px;
padding:3px;
width:920px;
height:30px;
border:1px solid #000;
background:#ccc;text-align: left;
}
Akan jadi seperti di bawah ini :
- Save dengan menekan ctrl+s, nah selesai sudah tahap 3 mengaturan header dan top menu. Bila klik preview seharusnya hasilnya seperti dibawah ini :
Sekarang kita sudah membuat struktur ruangan untuk header dan top menu.Bagaimana mudah bukan? ok sampai disini dulu ya... :) di artikel berikutnya saya akan membagi ilmu lanjutan Bagaimana Mengatur bagian Sidebar dan Kontent.
Cara Membuat Template Sederhana Blogspot (Part 2 )
Halo ketemu lagi, apa kabarnya? Artikel kali ini melanjutkan artikel cara membuat template sederhana blogspot part 1, sudah pada baca belum ? yang belum baca dulu ya :Cara Membuat Template Sederhana Blogspot (Part 1 )
Kalau yang sudah bisa langsung nich ke langkah selanjutnya, yaitu penulisan kode HTML dan Kode CSS. Untuk Part 2 ini kita akan membuat kode HTML standart, penulisan bagian-bagian yang akan di tampilkan pada template. Oh ya sudah download HTML Kit belum? Kalau belum nich download di sini Download HTML Kit , jangan lupa di instal ya. Kalau sudah mari kita memulai menulis kode HTML.
LANGKAH PERTAMA
Kalau yang sudah bisa langsung nich ke langkah selanjutnya, yaitu penulisan kode HTML dan Kode CSS. Untuk Part 2 ini kita akan membuat kode HTML standart, penulisan bagian-bagian yang akan di tampilkan pada template. Oh ya sudah download HTML Kit belum? Kalau belum nich download di sini Download HTML Kit , jangan lupa di instal ya. Kalau sudah mari kita memulai menulis kode HTML.
LANGKAH PERTAMA
- Buka Software HTML Kit , klik di Create a new file lalu klik ok
- Nah sekarang muncul halaman baru dengan beberapa kode HTML, ini kode standart yang ada di web . Ganti tulisan yang diapit <title>....</title> dengan judul blog yang kamu suka.
- Setelah tag ...</title> klik enter, lalu tambahkan style. Caranya klik Action > Tools > HTML Tags Wizard > STYLE dan klik ok.
Maka pada halaman akan muncul tulisan <style type=”text/css”>....</style> , nah disinilah nanti kita akan meletakan kode CSS untuk mengatur letak komponen dari template. - Langkah selanjutnya, pindah crusor ke antara <body>.... </body>. Di posisi ini digunakan untuk menempatkan isi dari bagian-bagian template blog. Sekarang siapkan struktur yang sudah di buat di kertas pada artikel Cara Membuat Template Sederhana Blogspot (Part 1 ) dan tulis seperti gambar di bawah ini :
Keterangan :
Kotakblog – kotak dimana kita meletakan semua komponen yang akan kita tampilkan di template blog seperti header, sidebar, kontent dan footer.
Header - Tempat diletakannya judul blog dan diskripsi
Top menu - Tempat diletakannya menu-menu yang membantu pengunjung menemukan yang mereka cari dalam blog kamu
Kotak-content - kotak dimana kita meletakan sidebar kiri, konten (postingan), dan sidebar kanan.
Ruang-sidebarkiri - ruang dimana kita meletakan sidebar kiri
Kontent – ruang dimana kita meletakan judul artikel, isi artikel, metatag komentar maupun form komentar
Ruang-sidebarkanan - ruang dimana kita meletakan sidebar kanan
Footer – biasanya sich digunakan untuk meletakan tahun pembuatan blog dan identitas pembuat. - Sementara di simpan dulu ya, tekan ctrl+s dan beri nama desain template blogspot.
