Membuat search engin pada navbar blog

Tiap pagi selama libur, kalau bukan edit blog pasty posting. yeah itulah makanan sehari - hariku. ok kali ini saya ingin share kepada sahabat - sahabat  tentang Membuat search engine pada navbar blog.

Langkah pertama:

• Log in dulu ke blogger
• klik Tata letak
• Edit HTML
• jangan lupa download dulu tamplate asli anda untuk mencegah hal-hal tak diinginkan
• cari kode ]]></b:skin>
• letak kan kode dibawah ini di atas kode ]]></b:skin>

---

---

 

/* search
===================== */
#search{width:210px;font-size:11px;float:right;margin:0;padding:0}
#searchform{overflow:hidden;display:inline;margin:0;padding:0}
#searchbox{background:#ddd;margin:0;padding:0}
#search input{background:transparent;color:#fff;float:left;font-size:12px;width:158px;border:1px solid #fff;font:normal 10px arial, verdana, Times New Roman;margin:7px 0 0 10px;padding:3px 7px}
#search .btn{width:auto;border:0;margin:7px 0 0;padding:0}

 

---

---

Kalau sudah ketemu kamu coba cari kode yang mirip seperti ini:

<div id='NavbarMenu'>

atau kalau gak ketemu juga kamu coba kode yang ini:

<div id='navigation'>

kalau sudah ketemu maka kode yang berwarna merah tersebut akan diakhiri dengan kode </div> letakkan kode dibawah ini tepat dibawah kode </div> tersebut:

---

---

 

<div id='search'>
<form action='http://infonetmu.blogspot.com/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='160' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' type='text' value='Search...'/>
<input class='btn' name='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq_6ViAZAZNRtva48HDUsiFPpyqTcHdDCp_3HbyOMKK17FeUPnXje3GqszHa0QrgMJ_nIUyTj45UV2oIRYFpNQFFGFM8qDGhW7RvmVMPvJh3V5rE7mUpXNJhlfKD4L39e4EQ5VXiJVlc-e/s1600/1zehw2f_th.jpg.png' type='image' value='Go'/>
</form>
</div>

 

---

---

lihat hasilnya,akan ada search engin pada navbar anda, selamat mencoba aja ya...

Cara Edit Template Blog

salam..tuk kali ini saya ingin share tata cara mengedit blog kepada sobat - sobat yang tetap semangat berkarya,,,,edit blog pasty biasa kita mendpatkan kesulitan yeah. biasanya kita temukan error atau gimana.. yeah tuk mengatasi hal semacam itu, saya ingin menuliskan sedikit tata cara ngedit blog. saya dapat cara ini dari blog misther-junett.blogspot.com. ok langsung saja saya tuliskan tata caranya ,,,,

Cara pertama 
bisa dengan menggunakan tool “XAMPP” yg cara peng aktifan nya bisa lihat di Cara instal Xampp
Cara kedua : Kita hanya menggunakan tool seadanya ( Yg ada di komputer kita )
Yaitu :
1. Browser Mozilla Firefox
2. Microsoft Paint
3. Microsoft Office Picture Manager
4. Template Blog dengan CMS Blogspot/themes wordpress.org
5. Notepad/microsoft Frontpage
Nah..yg kita bahas adalah cara yg kedua ini ya
Langkah pertama :
1. Buka web/blog kita yang mau di edit tampilan Layout (Themes/template ) nya
2. Cari web lain yang menurut kita bagus, atau yg ingin kita tiru tampilannya . Atau bisa juga dengan mendownload nya
Langkah Kedua :
1. Di halaman website kita , klik Tab ” File” di browser mozilla ,
2. Klik “Save as” dan simpan dengan nama terserah anda misalnya kita simpan dengan nama “Webku-edit” . Lalu web orang lain juga disimpan (Save as) dengan nama misalnya “Webcontoh-edit” (tanpa tanda petik”)
3. Simpan di folder di hardisk kita,
Lakukan hal yg sama dengan halaman web yg akan ditiru
4. Setelah di save as , maka akan tersimpan satu file ber ekstensi HTML (file HTML) dan satu folder yang isinya adalah semua yang dibutuhkan oleh “layout bayangan” (Folder isi )web kita agar bisa dibuka di browser
5. Kemudian klik dua kali file ber ekstensi HTML agar bisa terbuka di browser . maka “layout bayangan” web kita akan tampil sama persis dengan web asli nya.
Jika kita sedang online , maka semua nya akan tampil sempurna. Tapi jika tidak online ,maka ada beberapa image yang tidak akan muncul.
Solusinya , coba kita copy image yang ada di themes kita ke dalam folder
(Folder isi ) .
6. Kemudian untuk memulai mengedit nya . Kita klik kanan “File HTML ” tadi lalu klik “edit” , atau bisa juga dengan Klik kanan + Open with : pilih dengan notepad atau dengan MS front page.
PS : jadi file HTML ini kita buka dua kali , yaitu dibuka dengan browser mozilla agar bisa terlihat tampilan aslinya , dan juga dibuka dengan Notepad /frontpage , agar bisa di edit.
Untuk merubah dan menggeser misalnya lebar sidebar ,lebar postingan , footer , header dll , maka kita buka file style.css yang ada di (Folder isi) , yg tadi ter download.
Bandingkan dengan tampilan yg ada di web yg ingin kita tiru , baik itu file HTML nya , dan juga file style.css nya.
Catatan : Jika dihalaman web kita ada iklan adsense nya , maka ubahlah dulu angka pub id nya dengan huruf xxxxxx
contoh : PUB -ID : xxxxxxxxxx
Nah… sekarang saat nya kita coba2 untuk merubah atau mengedit , plus sekalian belajar men desain web dengan cara yang sederhana.
Sacara umum , template/themes itu biasanya terbagi menjadi :
Bagian keseluruhan halaman
Bagian Header
Bagian Sidebar
Bagian Body artikel
Bagian Footer
Untuk keseluruhan halaman , pengaturannya akan ditandai dengan awalan :
body
dan didepannya biasanya ada tanda ‘#’ atau . (titik)
contoh #body atau .body
Untuk Header , pengaturannya akan ditandai dengan awalan :
header
dan didepannya biasanya ada tanda ‘#’ atau . (titik)
contoh #header atau .header
Untuk Sidebar pengaturannya akan ditandai dengan awalan :
sidebar
dan didepannya biasanya ada tanda ‘#’ atau . (titik)
contoh #sidebar atau .sidebar
Untuk Body artikel pengaturannya akan ditandai dengan awalan :
post atau kadang content
dan didepannya biasanya ada tanda ‘#’ atau . (titik)
contoh #post atau .post
Untuk Footer pengaturannya akan ditandai dengan awalan :
footer
dan didepannya biasanya ada tanda ‘#’ atau . (titik)
contoh #footer atau .footer
Untuk Tab Navigasi… ini optional , tapi kadang kita perlukan.
nah Untuk Navigasi , pengaturannya akan ditandai dengan awalan :
navigaton atau kadang menu
dan didepannya biasanya ada tanda ‘#’ atau . (titik)
contoh #navigaton atau .navigaton
Oke..itu dasar2 yg ada di themes/template kita…
Sekarang kita bahas struktur kode2 nya
Untuk Themes yg ada di wordpress.org (domain berbayar) sebenarnya lebih mudah , karena biasanya sruktur antara body, header,sidebar,post,dan footer , dan style.css semua nya dipisah
Yang agak sulit di blogspot , karena semua struktur file dijadikan satu halaman. yakni sbb :
<?xml version=”1.0″ encoding=”UTF-8″ ?>
………………………….dst..dst…
(disini tempat keterangan asal CMS)
<head>
……..disini berisi title blog dengan meta tag sllnya
<b:skin><![CDATA[/*
—————————-
Keterangan sipembuat template
______————————–
lalu dibawah nya ini terdapat STYLE.CSS
yang mengatur bagaiana tampilan halaman blog
s/d kode
</head>
nah..lalu isi dari halaman akan diberikan dengan diawali setelah tanda :
<body>
header
navigasi/menu
post
sidebar
footer
dll
dan diakhiri dengan tag
<body>
lalu ditutup halamannya dengan :
</html>
Itu gambaran sekilas struktur blogspot
Sedangkan di themes wordpress.org.
Semua nya dipisah di tiga bagian utama yaitu :
Header ,Sidebar , footer ,
dan semua nya akan di kumpulkan di page.php dan di indeks.php
sedangkan pengaturan layoutnya akan dikerjakan di style.css
Demikian cara sederhana yang dapat kita lakukan , dengan harapan jika ada yang ingin merubah tampilan dengan cepat dan mandiri bisa terlaksana dengan mudah.
PS : Saya bukan ahli di bidang ini , yg saya tuliskan diatas adalah cuma pengalaman saya saja dalam rangka mengedit tampilan web saya.
JIka ada yg ingin menambahakan atau ditanyakan silahkan di tempat ini ,
semoga bermanfaat
Update Cara Merubah Layout halaman web : 12 Agustus 2010
Atas pertanyaan dari mas wiradynamic di kolom komentar disini , maka saya perlu memberikan rincian agar bisa dijadikan studi kasus bagi saya pribadi dan juga mungkin buat pengunjung yang mengalami hal serupa.
Hal pertama yang saya lakukan pada webnya mas wiradynamic, adalah men save Page as, dan menyimpan nya di hardisk komputer saya.
Lalu saya melihat hasil simpanan file web tsb, dan membuka file html,satu saya buka dengan notepad dan satu lagi dengan mozilla firefox. Di notepad saya melihat kalau style.css nya dipanggil dengan cara @import. Artinya saya harus mendownload lagi file style.css web nya wiradynamic, dan menyimpannya di folder download.Lalu merubah url importnya yg tadinya begini :

@import “http://wm-site.com/wp-content/themes/arclite/style.css”; @import “http://wm-site.com/wp-content/themes/arclite/options/side-green.css”;

menjadi begini :

<style type=”text/css”> @import “file:///G:/DesainwebAgustus2010/wm-site_files/style.css”; @import “file:///G:/DesainwebAgustus2010/wm-site_files/side-green.css”;

Setelah perubahan dilakukan, maka tahap pengeditan siap dilakukan. Karena mas wiradynamic ingin mengedit sidebar, maka saya mencari lewat source code html ( Klik kanan halaman web dan klik View Page Source). Pada salah satu sidebarnya ada judul widget “Feature post”, nah saya telusuri widget tsb dan mendapati bahwa Feature post ada didalam pengaturan <ul id=”sidebar”> dan juga didalam pengaturan pada <div class=”box”> Maka saya perlu merubah besaran pada pengaturan kedua hal tsb.
Dan inilah yang saya rubah : (buka style.css pada dashboard wp)
di bagian css sidebar yg awalnya begini :
#sidebar, #sidebar-secondary
{ padding: 2em 1em; margin: 0; }
menjadi seperti ini :
#sidebar, #sidebar-secondary
{ padding: 2em .1em; margin: 0; }
dan dibagian css box yg awalnya begini :
.box{
background: transparent url(images/box-shadow.png) no-repeat bottom right;
padding: 8px 12px;
margin: 2em 0 1em;
}
menjadi seperti ini :
.box{
background: transparent url(images/box-shadow.png) no-repeat bottom right;
padding: 2px 2px;
margin: .5em 0 .5em;
}
dan juga mnerubah pada bagian ini :

.box .the-content{
padding: .4em 1em .6em 1em;
min-height:92px;
height:auto !important;
height:64px; /* ie 6 fix */
min-width: 64px;
}
 

menjadi seperti ini :

.box .the-content{
padding: .4em 1em .6em .4em;
min-height:92px;
height:auto !important;
height:64px;            /* ie 6 fix */
min-width: 64px;
}
 

Catatan : Perubahan yang saya lakukan saya tandai dengan huruf merah pada kode2 diatas.
Nah silahkan untuk mas wiradynamic untuk mencoba nya sendiri yah..
Kemudian, yang perlu juga mungkin dilakukan, pada saat memasukkan kode2 html di widget, sebaiknya gunakan tag center diawal dan diakhir code, agar widget image bisa tampil ditengah2 kolom sidebar. Contoh penulisannya  seperti ini :

<center> kode2 html banner atau javascript disini </center>

Semoga Tulisan ini dapat membantu sahabat - sahabat yang ingin mengedit blog.
Salam

Perbedaan Padding Dan Margin

hellow teman - teman kali ini saya ingin share mengenai perbedaan padding dengan margin, awalnya saya juga tidak tau. bahkan pertama saya edit blog, saya pun sering baca istilah padding dan margin, tapi istilah membingunkanku, tapi setelah saya baca blog misther-junett.blogspot.com. walhasil saya pun bisa.




Dari gambar di atas,  kita umpamakan tampilan sebuah blog dimana :
A = Header
B = Tempat Posting
C = Sidebar
Yang dimaksud margin adalah jarak antara 2 widget.  Misal jarak antara widget A dan B/C adalah E px.  Margin antara B dan C adalah F Px.  Px adalah satuan jarak yang banyak dipakai.  Setiap widget mempunyai 4 bagian margin,  yakni atas,  kanan,  bawah dan kiri.  Sebagai contoh untuk widget B,  maka terdiri dari :
margin-top  : E px;
margin-right : F px;
margin-bottom  : G px;
margin-left  : 0 px;

Sedangkan yang dimaksud padding adalah jarak dari sisi wiget ke dalam.  Untuk contoh lihat widget B.  Seandainya kotak putih/abu-abu diibaratkan sebagai area postingan,  maka jarak antara area tersebut ke sisi widget adalah dinamakan padding dengan besar D px;.  Sama halnya dengan margin,  padding pun mempunyai 4 bagian padding.  Untuk contoh di atas ukuran paddingnya adalah :
padding-top  :  D px;
padding-right  :  D px;
padding-bottom  :  D px;
padding-right  :  D px;

gimana ternyata hampir sama yeah,,,
moga apa yang share ini bisa membuat teman semakin semangt berkarya,,,,,,,

Cara Membuat Template dengan Notpad

hellow teman - teman kali ini saya ingin share mengenai tata cara membuat template sendiri dengan notpad. sebenarnya cukup mudah jika ingin belajar tentunya.saya dapat tata cara membuat tempalte blog ini dari salah satu jejaring sosial yaiitu blog misther-junett.blogspot.com. 

 hanya menggunakan tool sebagai berikut

- Notepad : Kita gunakan sebagai editor teks dan HTML
- MS Paint : Digunakan untuk mengedit gambar
- Microsoft Office Picture Manager : Fungsinya sama dengan MS paint, dan keduanya saling mendukung
- MS Excel : Digunakan sebagai denah rencana tampilan Layout blog .
- browser Mozilla Firefox : Untuk melihat hasil pembuatan Template blog.
  Baiklah sekarang kita mulai langkah-langkah dalam membuat template blogspot ya 


langkah Pertama
buka notepad, kemudian ketik kode - kode berikut:

<html>
<head>

<title>Template Pertamaku</title>
</head>
<body>
Belajar Membuat  Template Pertamaku

</body>
</html>

Penjelasan Tag2 html yang ada

Di awal dan di akhir ada tag pembuka <html> dan penutup </html>: (ditambahi garis miring) ini adalah tanda halaman HTML , semua template , akan terlihat seperti ini dengan beberapa perubahan sedikit.
Dan di bagian antara <head> dan </head> : ini adalah tempat menaruh titel blog ( <title>Template Pertamaku</title> ) , juga tempat untuk kode-kode pengaturan tampilan blog (yang dikenal dengan Style.css ) dan dibagian ini juga tempat utk menaruh beberapa script javascript pengatur tampilan layout.
Kemudian diantara Tag <body> ISI </body> itulah nantinya akan kita tempatkan kontent atau isi dari blog kita. DI bagian ini nantinya kita akan mengisikan Header(kepala) Postingan(konten) , sidebar dan footer.
Oke ..dilanjuuutttt…..
Setelah selesai anda ketik di notepad , lalu klik File dan kemudian klik “Save as” .
Beri nama di kotak “file name” dengan misalnya :  template-pertamaku-step1.html
Jangan ada spasi dan harus diakhiri dengan .html (titik html).
Dikotak “Save as type” pilih “All files” Lalu klik tombol Save.
O ya..kalau bisa simpan di folder khusus agar mudah mencari nantinya. (kalau saya khusus membuat folder “Belajar Template” )
Jika sudah anda simpan, buka file tersebut dengan mozilla firefox (klik kanan file, lalu Open with Mozilla” ). Jika tidak salah ketik , maka anda akan melihat sebuah halaman berwarna biru dengan tulisan di atas kiri :
Belajar Membuat Template Pertamaku.
Dan di ujung atas kiri browser akan nampak : Template Pertamaku-Mozilla Firefox
Nah…itu adalah halaman HTML pertama yang anda buat yang merupakan cikal bakal template blogspot anda…… horeeee…!
Hhhhh…istirahat dulu sejenak… kendurkan urat syaraf…. lihat seputar halaman ini..siapa tau ada link yang berguna buat anda dan blog ini ..

---

Bagaimana ? sudah rilex ? Sudah siap melanjutkan belajar bikin templatenya ?? oke deh.. mari kita teruskan…!

Langkah II

Mengembangkan Template Dengan Style.css

Buka notepad baru , file yang pertama tadi biarkan saja, untuk anda simpan sebagai bahan perbandingan dan pembelajaran.
POST Bagian 2 : Publish : 10 April malam
Ketik atau copy lagi kode-kode diatas. Lalu tambahkan tag2 ini sebelum </head>.  (boleh sebelum atau sesudah <title>namablog</title>  , tapi sebaiknya persis sebelum </head> aja , biar mudah nantinya.
Ini kodenya :

<style type="text/css">
Isi kode style
</style>

Kemudian diantara tag :
<body> isikan kode dibawah disini </body>
Ini kode-kode nya :

<div id="kotakblog">
<div id="topbar">Isi topbar</div>
<div id="header">Isi header </div>
<div id="navigasi">Isi navigasi</div>
<div id="tembok-utama">

<div id="kotak-posting">
<div id="isi-Posting">isi postingan</div>
</div>
<div id="ruang-Sidebar">
<div id="ruang-Sidebar-top-besar">Isi ruang-Sidebar-top-besar</div>
<div id="ruang-Sidebar-kanan">Isi ruang-Sidebar-kanan</div>
<div id="ruang-Sidebar-kiri">Isi ruang-Sidebar-kiri</div>
</div>
</div>
<div id="footer-kaki">Isi footer-kaki</div>
</div>

Kemudian klik save as lagi seperti diatas, dan beri nama :  template-pertamaSTEP2.html
Penjelasan atas kode-kode :
<div id="kotakblog">
<div adalah permulaan dalam mengawali kode , dan ID adalah identitas dari isi (dalam hal ini nama nya = kotakblog dan isinya adalah seluruh yang ada diantara tag ini sampai dengan dengan akhir <div>.
Agak sulit juga nih saya neranginnya, Hmm
Jadi begini contoh diatas :  <div id="kotakblog"> harus diakhiri dengan </div> , ditengah2 nya itu adalah ISI dari ID yang diberi nama kotakblog , id atau nama ini nanti fungsinya sebagai identitas dalam pengaturan layout nya (CSS nya).
Lebih Mudahnya lagi akan saya ilustrasikan dengan rumah.
Anggap saja Style.CSS = Insiyur atau arsitek rumah

1. Kemudian <div id="kotakblog"> = rumah itu sendiri , dan di kode ini lah nantinya semua akan kita           tempatkan :

Atap(header) + Kuda2 (Navigasi) + Tembok (Badan artikel) + Jendela(Sidebar) dan Pondasi (footer) dalam hal ini pagar pembatasnya adalah </div>
2. Pada Rumah , kan ada atap . kodenya <div id="header">Isi atap/kepala yang juga dibatasi dengan </div> untuk memisahkan antara atap dengan kuda2 beton penopang atap,
3. Masuk kebawah ada kuda2 beton penopang atap = <div id="navigasi">Isi navigasi yang dibatasi juga dengan </div> untuk membedakan nya dengan tembok utama
4. Tembok utama : <div id="tembok-utama"> , isinya untuk jendela,pintu ,gambar lukisan dan lain-lain.
5. Kemudian kusen pintu = posting , kodenya : <div id="kotak-posting"> = tempat akan taruh pintu , diakhiri dengan </div>
Nah Pintu nya sendiri = <div id="isi-Posting">isi postingan </div>
6. Jendela = sidebar , kodenya :
<div id="ruang-Sidebar">
<div id="ruang-Sidebar-top-besar">Isi ruang-Sidebar-top-besar</div>
<div id="ruang-Sidebar-kanan">Isi ruang-Sidebar-kanan</div>
<div id="ruang-Sidebar-kiri">Isi ruang-Sidebar-kiri</div>
</div>
7. Pondasi rumah = Footer , ini kodenya : <div id="footer-kaki">Isi footer-kaki</div>

Layout_Bikin_Template

Mudah-mudahan sudah jelas ya ?
Ya … kalau gitu tahap dua sudah kita selesaikan , dan jika kode-kode yang anda tulis benar, maka di broser anda akan muncul beberapa tulisan seperti yang ada pada kode diatas.

Langkah 3 : Mengatur Bentuk atau Layout tampilan Template (Style.css)

A.Membuat Layout Template dengan denah rencana

Nah disini kita bisa menggunakan MS Excel sebagai denah rencana awal pepmbuatan Template , bagaimana nantinya tampilan blog kita, baik itu warna, border dan gambar2 yang diperlukan. Ibaratnya ini previewnya . Contoh nya bisa anda lihat gambar di Denah Layout Pembuatan Template

B. Membuat layout dengan Kode

Buka lagi notepad baru,
Copy kode-kode yang ada di file kedua tadi (file template-pertamaSTEP2.html)
Tambahkan kode-kode ini dibawah jni pada bagian tag :
<style type="text/css">masukkan kode disini </style>
Dan ini kode2 nya :

/*------------------------------------------------
Theme Name: Template pertamaku
Theme URI: http://blogaku.com
Description: Ini Template pertama aku
created by <a href="http://blogaku.com/">blogaku</a> .
Author: Aku
Author URI: http://blogaku.com/
Date: 08 April 2010
----------------------------------------------- */

/*----Pengaturan layout blog mulai dari sini----*/

body {
background:#0ff;
font-family:Century gothic, Arial,Tahoma,sans-serif;
color:#126A9B;
font-size:13px;
text-align: center;

}

#kotakblog {
width:1000px;
border:1px solid #000;
background:#0ff;
}
#topbar {
width:920px;
height:30px;
border:1px solid #000;
background:#aaa;
}
#header {
width:920px;
height:100px;
border:1px solid #000;
background:#0f0;
}

#navigasi {
width:920px;
height:30px;
border:1px solid #000;background:#ccc;
}

#tembok-utama {
width:920px;
border:1px solid #000;background:#ddd;
}

#kotak-posting {
width:500px;
border:1px solid #000;background:#eee;
}

#isi-Posting {
width:470px;
border:1px solid #000;background:#ff0;
}

#ruang-Sidebar {
width:350px;
border:1px solid #000;background:#abc;
}

#ruang-Sidebar-top-besar {
width:330px;
border:1px solid #000;background:#ff0fff;
}

#ruang-Sidebar-kanan {
width:150px;
border:1px solid #000;background:#bbc;
}

#ruang-Sidebar-kiri {
width:150px;
border:1px solid #000;background:#ccd;
}

#footer-kaki {
width:920px;
height:50px;
border:1px solid #000;background:#00ffff;
}
/*---akhir CSS sampai disini yaaaa---*/

Bagaimana ? Sudah ditambahkan ? ?
Kalau sudah , ayo dah di  Save as lagi , dan beri nama :
template-pertamaSTEP3.html
Lihat hasilnya dengan membuka di browser .
Jreengggg…
Sudah mulai berbentuk kan ya ??
Tapi masih nempel dan belum kelihatan mana sidebar dan kotak postingannya …
Baiklah sekarang kita atur lebih dalam lagi.

C. Mengatur Posisi layout Template

Kita sekarang akan menambahkan dengan posisi (float) , margin dan Padding.
Kalau posisi pasti sudah tau ya, nah lalu margin dan padding itu apa sih ?
margin dan padding adalah pengatur jarak . Keduanya hampir sama , dan lebih jelasnya mari kita narasikan lagi dengan rumah.
Pagar Rumah -- Rumah -- meja
Kita fokuskan pada pengaturan jarak Rumah. Antara rumah dengan pagar (jarak keluar) diatur dengan margin , dan antara rumah dengan meja (jarak kedalam) diatur dengan padding.
Untuk lebih jelas soal padding dan margin bisa lihat gambar : perbedaan padding dan margin
Sebaiknya bikin lagi aja di notepad baru ya… copy code yang ada di template-pertamaSTEP3 , lalu save as dengan template-pertamaSTEP4.html
Mari kita tambahkan padding:3px;
Di bagian css nya , misal nya :

body {
background:#0ff;
font-family:Century gothic, Arial,Tahoma,sans-serif;
color:#126A9B;
font-size:13px;
text-align: center;
}

tambahkan padding:3px; menjadi sebagai berikut :

body {
padding:3px;
background:#0ff;
font-family:Century gothic, Arial,Tahoma,sans-serif;
color:#126A9B;
font-size:13px;
text-align: center;
}

Nah…lihat hasilnya dengan membuka file template-pertamaSTEP4.html dibrowser . Sudah berubah kan ?
Seterusnya tambahkan ya di di kode-kode css yang lain. Nambahinnya diantara tanda { dan }
Sudah ditambahkan ? jika sudah.. coba di refresh browser nya dan lihat hasilnya.
Anda bisa memperkecil angka 3 menjadi 2 misalnya, atau memperbesar nya. Terserah saja. Nantinya kita bisa mengatur si padding agar bisa mengatur jarak atas-kanan-bawah-kiri.
Pada contoh kode padding diatas : padding:3px;
Dia mengatur sekaligus jarak atas-kanan-bawah-kiri , masing-masing sebesar 3px
Kita bisa menggunakan kode sebagai berikut :
padding:10px 5px ;
ini artinya jarak atas-dan -bawah = 10px . sedangkan jarak kanan-dan-kiri = 5px
padding:10px 3px 7px;
ini artinya jarak atas = 10px . jarak kanan-dan-kiri = 3px , jarak bawah = 3px
padding:10px 6px 4px 2px;
ini artinya jarak atas = 10px -kanan = 6px -bawah = 4px -kiri= 2px
Aturan ini juga berlaku untuk pengaturan margin
Oke lanjut….
Setelah di refresh, kita melihat bagian sidebar masih berada dibawah kotak posting.
Nah mari kita pergi ke tag CSS pengaturan #Sidebar dan pengaturan #kotak-posting . Tambahin kode ini :   float:left;
Sehingga hasilnya menjadi seperti ini :

#ruang-Sidebar {
float:left;
width:350px;
border:1px solid #000;
background:#abc;
padding:3px;
}

Yang di #kotak-posting juga ditambahin float:left; ya...
okkk
udah dul yeah ,,,mog apa yang share kali bisa bermanfaat bagi teman - teman

Cara menampilkan widget tertentu dalam bentuk bogroll/scrolball

Hellow teman - teman,,pastynya kita masih semangat mencari sesuatu yang baru bukan,,,,ok kali ini saya ingin share mengenai cara membuat / menampilkan widget tertentu dalam bentuk bogroll/scrolball,,,

langkah Pertama
 pertama kita harus mengetahu ID widgwt yang ingin diubah tampilannya

1.Login ke Blogger Anda.

2.Klik Bagian Rancangan dan klik "Edit HTML". jangan lupa conteng

3.Kemudian cari kode seperti di bawah ini:
   ID widgwt yang ingin diubah tampilannya
copykan code di bawah :

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='LinkList1' locked='false' title='General' type='LinkList'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='Label1' locked='false' title='Label' type='Label'/>
</b:section>
</div>
 kemudian simpan berubahan

Cara Membuat Menu Horizontal pada sidebar

Jika Anda ingin semua daftar link dan daftar label pada sidebar Anda yang akan ditampilkan secara horizontal, 

maka langkah awal 
Login ke Blogger Anda.

2.Klik Bagian Rancangan dan klik "Edit HTML". jangan lupa conteng

3.Kemudian cari kode seperti di bawah ini:
.sidebar ul {

kemudian dibawahnya tambahkan code  berikut display:inline;

dan jadinya nanti akan seperti ini 

.sidebar ul {
display:inline;
}

.sidebar li{
display:inline; 

 Dalam beberapa template, Anda dapat menyisipkan kode di sini: -

 .sidebar ul li {
display:inline;
}

 
Preview the template. This is what you would see.

Cara Membuat Menu Horizontal dengan Tampilan Gambar

hufff,,yeah tidak bosan - bosannya share terus ,,,mog jug teman - teman ga ada bosan - bosannya berkunjung di my blog. ok kali ini saya pingin share lagi mengenai cara membuat menu Horizontal dengan tampilan Gambar,,,,


langkah Pertama

Buka Template -> Elemen Halaman -> Tambahkan sebuah Elemen Halaman dan pilih "HTML / JavaScript".  kemudian  copykan script di bawah ini

<div id='newnavbar'>
<ul>
<li><a href="URL of Home page"><img src="URL of Home image"></a></li>
<li><a href="URL of Music page"><img src="URL of Music image"></a></li>
<li><a href="URL of Books page"><img src="URL of Books image"></a></li>
<li><a href="URL of Links page"><img src="URL of Links image"></a></li>
<li><a href="URL of Profile page"><img src="URL of Profile image"></a></li>
<li><a href="mailto:EMAIL ADDRESS"><img src="URL of Email image"></a></li>
</ul></div>

Catatan
 Bagian-bagian dari kode dengan warna biru adalah alamat di mana Anda ingin pengguna untuk diarahkan ke. Bagian merah adalah di mana gambar Anda yang ingin dimunculkan

contoh tampilan menu Horizontal dengan tampilan gambar 

Add caption

 
 

Cara Menampilkan Backround setiap halaman berbeda pada Blog

Hellow teman - teman aku balik lagi mempsoting mengenai cara menampilan baground setiap halaman berbeda- beda pada blog. pasty kita inginmenampilkan blog kita tampil menarik di hadapan sipengunjung,,yeah pastynya
Sebuah CeElle pembaca bertanya bagaimana bendera Header dan gambar latar belakang Blogger dapat diputar sehingga mereka menunjukkan gambar yang berbeda setiap kali halaman di-refresh atau reloaded. Sementara kita bisa menggunakan format tampilan slide, waktu rotasi akan diperbaiki. Kami pikir kami memiliki JavaScript yang cukup sederhana yang acak panggilan untuk banner header baru atau gambar latar belakang setiap kali Blog Blog di-refresh. Ini berguna jika Anda memiliki gambar latar belakang beberapa yang cocok untuk Blog Anda dan Anda ingin menampilkan mereka semua.

Rotating Header Image

Hanya untuk memastikan, artikel ini adalah tentang secara acak menampilkan gambar header yang berbeda pada setiap refresh halaman. Jika tujuan Anda adalah untuk memiliki gambar latar belakang tetap untuk Header Anda, artikel lainnya Latar Belakang Gambar untuk Blogger Header (Baru) dan Background image untuk Header Blogger akan lebih relevan. Dalam artikel itu, Anda juga akan membaca tentang membuat gambar, dan menggunakan perangkat lunak pengedit foto gratis seperti Google Picasa untuk mengubah ukuran dan memotong gambar Anda.

Setelah membuat gambar, Anda harus upload ke server. Anda dapat membaca tentang menggunakan host gratis seperti Google Page Creator dan Google Groups. Kami juga memiliki daftar lebih komprehensif Host Gambar bebas dan Layanan File Hosting di artikel kami pada Gambar Ruang Penyimpanan Kelola Blogger. Check out situs tersebut dan memilih satu yang cepat, dapat diandalkan dan memungkinkan hotlinking ke file upload. Setelah meng-upload gambar, perhatikan URL Gambar.

Langkah Pertama
Login ke Dashboard Anda



Langkah Kedua
Buka Template -> Elemen Halaman -> Tambahkan sebuah Elemen Halaman dan pilih "HTML / JavaScript". 
 kemudian  copykan script di bawah ini

<script type="text/javascript">
var banner= new Array()
banner[0]="Image01URL"
banner[1]="Image02URL"
banner[2]="Image03URL"
banner[3]="Image04URL"
banner[4]="Image05URL"
banner[5]="Image06URL"
banner[6]="Image07URL"
banner[7]="Image08URL"
banner[8]="Image09URL"
banner[9]="Image10URL"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background:url("' + banner[random] + '") repeat center center;');
document.write(" }");
document.write("</style>");
</script>

 terakhir simpan perubahan,,,,

pastikan blog anda telah berubah,,,,,,

Selamat Mencoba

Ckript Efek Bunga Bertaburan di blog

hellow teman - teman yeah kali ini saya ingin lagi share tentang cara memberikan efek bunga bertaburan di blog, karena cap kali kita ingin mempercantik blog kita, dengan tunggu saya akan memberikan cara - caranya sebagai berikut:

1.Login ke Blogger Anda.

2.Klik Bagian Rancangan dan klik "Edit HTML". jangan lupa conteng

3.Kemudian cari kode seperti di bawah ini:
   <body> dengan cara contrl F
4. kemudian letakkkan script berikut ini di bawah kode <body> tersebut.

<script language=”Javascript” src=”http://www.geocities.com/yono_pati/bunga.js”> </script>

5. Keempat, Simpan Template
6. selesai

nah... pastikan blog anda bertaburan bungan ,,,,,,,,

 

 

Selamat Mencoba

 

Cara Mengganti bagroun dengan Gambar / Foto

Hellow teman - teman yeah seharian di depan komputer membuat badan terasa pegel,,,yeah langsung ajah bahwa kali ini saya ingin share mengenai cara mengganti baground di blog. yeah pertama kita punya url gambar yang ingin dijadikan baground. 

langkah pertama
1.Login ke Blogger Anda.

2.Klik Bagian Rancangan dan klik "Edit HTML". jangan lupa conteng

3.Kemudian cari kode seperti di bawah ini:
   body {
4. setelah ketemu tempat code di bawah ini
    background:url(almat url tempat gambar kamu di simpan)
6. dan jadinya nanti akan seperti ini
     body {background:url(almat url tempat gambar kamu di simpan)
  contoh :
body {background:#fff url(http://s690.photobucket.com/albums/vv270/alwi/alwi07bg.png);
}
7. simpan / save

 
Selamat Mencoba

Cara Mempercantik Artikel Populer

kali saya akan memposting mengenai cara mempercantik entri populer

 

Script ini sangat mudah untuk menginstal, Anda hanya  meletakkan dengan cara mengkopy script di bawah ini kemudia dengan Login Gadget baru ke Blogger Dashboard dan arahkan ke Desain - Halaman ElementsClick "Tambah Gadget" dan Pilih Popular Posts "(Jika Anda sudah memiliki gadget ini melewatkan langkah ini) Setelah Anda memiliki Gadget Popular Post "Tambah Gadget" lagi dan pilih HTML / Javascript Masukkan semua script di bawah ini . dengan itu entri populer anda  sekarang dengan animasi

<style>
@charset "utf-8";
/* CSS Document */
.lof-slidecontent{
 position:relative;
 overflow:hidden;
 border:#F4F4F4 solid 1px;
 width:892px;
 height:300px;
}
.lof-slidecontent .preload{
 height:100%;
 width:100%;
 background:#FFF;
 position:absolute;
 top:0;
 left:0;
 z-index:100000;
 color:#FFF;
 text-align:center
}
.lof-slidecontent .preload div{
 height:100%;
 width:100%;

 background:transparent url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%;
}
.lof-main-outer{
 position:relative;
 height:100%;
 width:600px;
 z-index:3px;
 overflow:hidden;
 float:right;
}

/*******************************************************/
.lof-main-item-desc{
 z-index:100px;
 position:absolute;
 top:150px;
 left:50px;
 width:400px;
 background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png);

 /* filter:0.7(opacity:60) */
}
.lof-main-item-desc p{
 color:#FFF;
 margin:0 8px;
 padding:8px 0
}
.lof-main-item-desc h3 a{
 color:#FFF  !important;
 margin:0 !important;
 font-size:140% !important;
 padding:20px 8px 2px !important;
 font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif !important;
}
.lof-main-item-desc h3 a:hover{
 color:#FF6;
 text-decoration:underline;
}

/* main flash */
ul.lof-main-wapper{
 /* margin-right:auto; */
 overflow:hidden;
 background:transparent url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%;
 padding:0px;
 margin:0  !important;
 height:300px;
 width:600px;
 position:absolute;
 overflow:hidden;
}

ul.lof-main-wapper li{
 overflow:hidden;
 padding:0px  !important;
 margin:0px;
 height:100%;
 width:600px;
 float:left;
}
.lof-opacity  li{
 position:absolute;
 top:0;
 left:0;
 float:inherit;
}
ul.lof-main-wapper li img{
 padding:0px !important;
 width:600px  !important;
 height:300px  !important;
}

.lof-main-wapper{
  margin-left:auto;
  margin-right:inherit;
  clear:both;
  height:300px;
 }

li-desc{
 z-index:100px;
 position:absolute;
 top:150px;
 left:50px;
 width:400px;
 background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png);

 /* filter:0.7(opacity:60) */
}
li-desc p{
 color:#FFF;
 margin:0 8px;
 padding:8px 0
}
li-desc h3 a{
 color:#FFF;
 margin:0;
 font-size:140%;
 padding:20px 8px 2px;
 font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
}
li-desc h3 a:hover{
 color:#FF6;
 text-decoration:underline;
}

/* item navigator */
ul.lof-navigator{
 top:0  ;
 padding:0  ;
 margin:0 ;
 position:absolute ;
 width:100% ;
 background:none !important;
 margin-top: 0 !important;
 margin-left: 0 !important;
 margin-right: 0 !important;
}
ul.lof-navigator li{
 cursor:hand ;
 cursor:pointer ;
 list-style:none ;
 width:100%  !important;
 padding:0  !important;
 margin:0 !important;
 overflow:hidden !important;
}
.lof-navigator-outer{
 position:absolute !important;
 z-index:100 !important;
 height:300px !important;
 width:310px  !important;
 overflow:hidden  !important;
 color:#FFF !important;
 left:0 !important
 top:0 !important;
 right:inherit !important;
}
.lof-navigator li.active{
 background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-bg2.gif) center right no-repeat;
 color:#FFF
}
.lof-navigator li:hover{

}

.lof-navigator li h3{
 color:#FFF;
 font-size:120%;
 padding:15px 0 0 !important;
 margin:0;

}
.lof-navigator li div{
 background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png);
 color:#FFF;
 height:100%;
 position:relative;

 padding-left:15px;
 border-top:1px solid #E1E1E1;
 margin-left:inherit;
 margin-right:18px;
}

.lof-navigator li.active div{
 background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/grad-bg2.gif);
 color:#FFF;

 margin-left:inherit;
 margin-right:18px;

}
.lof-navigator li img{
 height:60px;
 width:60px;
 margin:15px 15px 10px 0px;
 float:left;
 padding:3px;
 border:#C5C5C5 solid 1px;
}
.lof-navigator li.active img{
 border:##6C8E5C  solid 1px;
}
.lof-navigator li.active h3{
 color:#FFF;

.PopularPosts .item-title{0 !important; }
}
.PopularPosts .widget-item-control {display:none}

 ul.lof-main-wapper li {
  position:relative;
 }

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/scriptlofslider.js"></script>
<script type="text/javascript">
 $(document).ready( function(){
  $('#lofslidecontent45').lofJSidernews( { interval:2000,
             easing:'easeOutBounce',
            duration:1200,
            auto:true } );
 });

</script>