Popular Post

Popular Posts

Recent post

Secara default, warna judul posting atau artikel pada template sudah ditentukan oleh desainer alias sang pembuat template. Tapi jika merasa kurang puas, Sobat bisa menggantinya dengan warna lain yang jauh lebih menarik atau sesuai selera.

Tertarik untuk merubahnya? Simak langkahnya berikut ini:

1. Dalam keadaan login di blogger. klik bagian rancangan. Lanjut dengan mengklik link edit html.

2. Simpan terlebih dahulu template yang sedang digunakan, dengan mengklik download template lengkap. Lalu beri centang pada kombo disamping expand template widget.

3. Cari kode .post h1 jika tidak ketemu bisa juga seperti ini .post h2 atau .post h3 tergantung pada templatenya.

4. Lihat disekitar kode tersebut. Akan nampak deretan kode seperti ini:

.post h1{
margin:.5em 0;
font-size:15pxt;
padding:5px;
font-weight:normal;
font-style:normal;
line-height:1.3em;
color:#0000ff;
}


5. diatas adalah contoh pada template blog saya. sobat jangan heran jika deretan kodenya tidak sama persis dengan template milik sobat. Fokuskan pada color:#0000ff kode inilah yang mengatur warna judul posting. Kode #0000ff berarti judul posting berwarna biru.

6. Ganti kode #0000ff dengan kode warna html yang lain sesuai selera. Belum tahu kode warna html? Lihat disini.

7. Setelah selesai. Jangan lupa klik simpan template dan lihat hasilnya.

Selamat mencoba mengganti warna judul posting, dan semoga berhasil!
Jadi begini Sobat,untuk cara Membuat Tombol Home Next Dan Previous Di Blog tidak semua template bisa di buat tumbol tersebut,karna saya sudah mencoba beberapa kali tapi memang tidak bisa,bukan saya tidak bisa membuat nya,karna memang template nya yg tidak bisa di buat tombol tersebut,tapi mudah-mudahan template sobat bisa di buat tombol Home Next Dan Previous.



Ya udah,, kali ini langsung aja ,,

Caranya ,, Seperti biasa ,,

1. Masuk (login) ke blogger

2. Klik tata letak > edit HTML

3. Sekarang saatnya kita mencari cari sampah,, lho .. ?

4. Untuk mengganti tulisan "next page /posting baru" dengan gambar,,
    Cari dan ganti kode <data:newerpagetitle> dengan <img src="terserah" alt="Next" />

5. Untuk mengganti tulisan "previous page /posting lama" dengan gambar,,
    Cari dan ganti kode <data:olderpagetitle> dengan <img src="terserah" alt="Prev" />

6. Untuk mengganti tulisan "home" dengan gambar,,
    Cari dan ganti kode <data:homemsg> dengan <img src="terserah" alt="home" />
    #Catatan : biasanya, ada dua kode <data:homemsg> .. Pilih yang paling atas aja ,,
    #Catatan : ganti kode terserah dengan alamat gambarnya ,,

Contohnya :
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhueBVDm2esmJyJea-mTTV0C1Z-jodlMED8mbJ5xnoK3JyRP3yi9gYd27_vXA-cHMUvYpdKI7kNlYxGBRnE9cAMn22rqDU9B-qfyS8IU2wftbU5vPZBcmzZL8p2kCgCGrCrYLxYf84ejnBU/s400/ikon+ku.png" alt="home" />

Keterangan
Contoh di atas yg berwarna biru merupakan Link gambar sobat,sobat bisa meng Upload dahulu gambar nya,lalu link gambar nya sobat copy dan paste di pereti contoh di atas yang berwarna biru.
sedangkan untuk yang berwarna merah,itu merupakan Teks,sobat bisa ganti sesuai keinginan sobat.
Fungsi dari Kolom Scroll Down Untuk Banner/Foto/Widget di Blogspot adalah untuk menghemat tempat, sehingga akan tampil rapi di dalam blog. 

Cara untuk membuatnya juga cukup mudah dan bisa langsung teman-teman praktekkan. Ok, ikuti langkah-langkah di bawah ini:

1. Copy paste kode di bawah ini (bisa teman-teman taruh di kotak add a gadget (HTML/Javascript)/edit HTML/halaman postingan blog teman-teman): 

<div style="border: 0px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 60%; height: 300px; background-color: #FFFFFF;"> ISIKAN KODE SCRIPT BANNER/WIDGET dan FOTO teman-teman di sini (bisa berurutan)</div>
2. Sesuaikan ukuran lebar (width) dan tinggi (height) nya sesuai dengan templates blog  teman-teman,
3. Tulisan yang berwana merah silahkan teman-teman ganti dengan kode script banner/widget atau foto teman-teman semua,

4. Jika sudah maka tinggal di save dan lihat perubahannya.
 
pada Tutorial Blog kali ini saya akan menjelaskan tentang cara memasang google translate.
Gambar Diatas Adalah contoh Google translate yg menggunakan animasi bendera.gk usah panjang kata-kata lagi, langsung saja saya mulai Langkah langkahnya.
 
1.Login/masuk ke akun Blog anda
2.Pilih tata letak/rancangan
3.Add Gadget/tambah Gadget--> Pilih HTML Java Script
4.Masukan Kode/Script Dibawah Ini

<center><a class="google_translate" href="http://www.blogger.com/rearrange?blogID=4115306274558645194&sectionId=sidebar&action=editWidget&widgetType=HTML&referrer=directory#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" style="cursor: pointer; margin-right: 3px;" src="http://classicstudio.wordpress.com/files/2009/08/saudi1.gif" title="Arabic" align="absbottom" border="0" /></a><a class="google_translate" href="http://www.blogger.com/rearrange?blogID=4115306274558645194&sectionId=sidebar&action=editWidget&widgetType=HTML&referrer=directory#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" style="cursor: pointer; margin-right: 3px;" src="http://classicstudio.wordpress.com/files/2009/08/japan1.gif" title="Japanese" align="absbottom" border="0" /></a><a class="google_translate" href="http://www.blogger.com/rearrange?blogID=4115306274558645194&sectionId=sidebar&action=editWidget&widgetType=HTML&referrer=directory#" target="_blank" rel="nofollow" title="Chinese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" style="cursor: pointer; margin-right: 3px; width: 38px; height: 24px;" src="http://classicstudio.wordpress.com/files/2009/08/chines1.gif" title="Chinese" align="absbottom" border="0" /></a><a class="google_translate" href="http://www.blogger.com/rearrange?blogID=4115306274558645194&sectionId=sidebar&action=editWidget&widgetType=HTML&referrer=directory#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" style="cursor: pointer; margin-right: 3px;" src="http://classicstudio.wordpress.com/files/2009/08/rusia1.gif" title="Russian" align="absbottom" border="0" /></a><a class="google_translate" href="http://www.blogger.com/rearrange?blogID=4115306274558645194&sectionId=sidebar&action=editWidget&widgetType=HTML&referrer=directory#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" style="cursor: pointer; margin-right: 3px; width: 37px; height: 25px;" src="http://classicstudio.wordpress.com/files/2009/08/uk1.gif" title="English" align="absbottom" border="0" /></a><br /><a class="google_translate" href="http://www.blogger.com/rearrange?blogID=4115306274558645194&sectionId=sidebar&action=editWidget&widgetType=HTML&referrer=directory#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" style="cursor: pointer; margin-right: 3px; width: 36px; height: 23px;" src="http://classicstudio.wordpress.com/files/2009/08/franc1.gif" title="French" align="absbottom" border="0" /></a><a class="google_translate" href="http://www.blogger.com/rearrange?blogID=4115306274558645194&sectionId=sidebar&action=editWidget&widgetType=HTML&referrer=directory#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" style="cursor: pointer; margin-right: 3px;" src="http://classicstudio.wordpress.com/files/2009/08/germany1.gif" title="German" align="absbottom" border="0" /></a><a class="google_translate" href="http://www.blogger.com/rearrange?blogID=4115306274558645194&sectionId=sidebar&action=editWidget&widgetType=HTML&referrer=directory#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" style="cursor: pointer; margin-right: 3px; width: 38px; height: 27px;" src="http://classicstudio.wordpress.com/files/2009/08/spain1.gif" title="Spain" align="absbottom" border="0" /></a><a class="google_translate" href="http://www.blogger.com/rearrange?blogID=4115306274558645194&sectionId=sidebar&action=editWidget&widgetType=HTML&referrer=directory#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" style="cursor: pointer; margin-right: 3px;" src="http://classicstudio.wordpress.com/files/2009/08/italy1.gif" title="Italian" align="absbottom" border="0" /></a><a class="google_translate" href="http://www.blogger.com/rearrange?blogID=4115306274558645194&sectionId=sidebar&action=editWidget&widgetType=HTML&referrer=directory#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" style="cursor: pointer; margin-right: 0px;" src="http://classicstudio.wordpress.com/files/2009/08/netherland1.gif" title="Dutch" align="absbottom" border="0" /></a><br /><br /><center><divstyle><a href="http://classicom.blogspot.com/"><imgborder><br /></imgborder></a></divstyle></center></center>

6.Simpan
Membuat Link Bergoyan Sangatlah Mudah,..Karna Sobat Semua Hanya Menambahkan Beberapa JavaScript..
Jika Sobat Berkenan Silakan Sobat Ikuti Langkah-Langkah Berikut:


  1. Login Ke Blog Sobat
  2. Pada Dasbor Pilih >>Rancangan-->Kemudian EDIT HTML
  3. Cari Kode </head> Dan Letakan Kode Script Berikut Tepat Diatas Kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>         
$(document).ready(function()  {          
$(&#39;a&#39;).hover(function() {  //mouse in          
$(this).animate({ marginLeft:  &#39;12px&#39; }, 400);          
}, function() { //mouse out           
$(this).animate({ marginLeft: 0 }, 400);          
});           
});</script>
 
  
4.Simpan Templatenya Dan Lihat Hasilnya

Di postingan saya kali ini saya akan membahas tentang Cara Perawatan Perinter.Printer merupakan peripheral PC yang penting. Kebanyakan printer PC memakai interface pararel atau centronics. Pada PC, interface tersebut berupa konektor betina jenis D 25 pin, interface pararel tersebut mengirim kedelapan bit data secara serempak, dimana saluran strobe memberitahukan printer bilamana terdapat karakter untuk dibaca. Untuk pembacaan interface pararel menurun, maka printer membaca byte data,
kemudian sinyal acknowledge dipakai untuk memberitahukan komputer bahwa
interface siap untuk bertaambah lagi. Sinyal lain digunakan untuk memberitahukan PC
bila interface sedang aktif atau sibuk, kesalahan telah terjadi atau kertas habis dan lain-lain.


Printer, seperti halnya saranan lainnya, akan menguntungkan jika dirawat dengan
cermat. Di sebagian besar printer, pembersihan yang dilakukan setiapmengganti pita
memang terlalu sering. Untuk membersihkan printer, matikan printer terlebih dahulu,
cabutlah steker arus listrik dari stop kontak dan kemudian lepaskan tutupnya.
Untuk printer laser, ikutilah prosedur yang telah ditetapkan pada buku petunjuk dalam
membersihkan serta mengganti cartridge.

Untuk laser jet yang memakai mesin printer jenis CANON, maka yang perlu Anda
lakukan adalah bersihkan kawat korona dengan hati-hati untuk memindahkan tandon
toner. Untuk hal tersebut Anda harus menggantikannya setiap tiga atau empat kali
penggantian cartridge. Tetapi ada baiknya, ketika printer terbuka, untuk memeriksa
mesin dan berhati-hatilah membuang kotoran, toner atau debu kertas yang menumnup di
dalamnya.

Sedangkan untuk printer jenis dot-matrix atau inkjet, maka yang perlu Anda lakukan
adalah lepaskan pita atau cartridge tinta, kemudian perhatikan cara pita bergerak
melewati 'head' cetak.

Dengan demikian Anda dapat menggantinya kemudian, langkah berikutnya adalah
hapulah dengan hati-hati debu kertas yang telah jatuh ke mesin. Kemudian periksalah
agar tidak ada potongan kertas atau label pelekat yang menghalangi jalannya kertas.
Untuk sehelai kartu tipis biasanya dipakai untuk membersihkan kotoran.

Langkah selanjut nya adalah Bersihkan 'Head' Cetak

Hal lain yang perlu Anda perhatikan, bahwa jika Anda dapat membersihkan 'head' cetak
dot-matrix atau daisywheel memakai sarana khusus, seperti yang diproduksi oleh
Prefect Data.

Sarana tersebut terdiri dari selembar pembersih yang dimasukkan melalui printer yang
seakan-akan berupa kertas dan larutan pembersih. Maka yang perlu Anda lakukan
adalah basahi lembaran tersebut dengan larutan, kemudian jalankan printer untuk
mencetak di atasnya (tanpa dengan pita) seraya untuk mengujinya. Dimana larutan tadi
untuk melarutkan sisa-sisa tinta yang kering, kemudian diserap oleh lembaran tersebut.
Atau bisa Anda lakukan cara lain dengan memakai cartridge pembersih khusus yang
disisipkan sebagai pengganti.

Di samping itu Anda juga perlu membersihkan platen (silinder karet) untuk
menghilangkan tinta yang tersisa saat kertas telah dicetak.
Perfect Data merupakan pembersih khusus dengan sikat cetakan, dimana ia berguna
untuk membersihkan platen yang terkena tinta.
Namun bantalan yang melindungi larutan juga dapat dipakai untuk membersihkan
bagian luar dari platen tersebut.

Jika ada bagian printer yang tidak mampu bergerak dengan bebas, maka pakailah
minyak pelumas mesin (dengan catatan simak buku petunjuk printer yang Anda pakai).
Kebanyakan printer memakai bantalan poros yang dirancang untuk tidak memerlukan
pelumasan.

Jika kotoran atau debu kertas telah mengotorinya, maka setitik minyak diperlukan untuk
membersihkannya. Jika Anda memerlukan pelumas, disarankan menggunakan
seminimal mungkin. Setelah Anda selesai membersihkannya maka pasanglah pita atau
cartridge tinta yang baru.

Lakukanlah pengujian printer untuk mengecek, agar mutu cetaknya memuaskan.
Kebanyakan printer mempunyai ketentuan pengendali jarak antara kepala cetak dan
platen.

Untuk meminimalkan keausan maka lakukan cara dengan mengatur sampai spasi
maksimum yang memberikan mutu cetakan yang bagus.

Dari kegiatan di atas maka bersihkan tutup printer memakai kain halus dan larutan
detergent kemudian pasanglah kembali. Letakkan kertas di baki atau masukkan kertas
dengan hati-hati (jangan lakukan pemaksaan), lalu pastikan kertas masuk secara mulus
tanpa menyangkut bagian lain.

Dari langkah-langkah di atas yang perlu digaris bawahi adalah:

1. Matikan printer, lepaskan tutup dan pita.
2. Bersihkan debu atau kotoran yang melekat pada printer.
3. Periksa dan bersihkan jalan keluar masuk kertas dan platen.
4. Bersihkan dan gantilah 'head' cetak.
5. Gantilah pita jika sudah habis.
6. Lakukan pengujian pencetakan untuk mendapatkan mutu cetakan yang memuaskan.
7. Bersihkan dan kembalikan penutup printer.
8. Lakukan pemeriksaan kertas dan yakinkan dipasang dengan tepat dan kondisi masuk dengan lancar.


Selamat Mencoba.
Wah,Komputer lebih cepat,Kira-kira Lebih cepat dari F1 atau Motor Gp Gak yah..?
mungkin saja bisa di bilang begitu,karna pada dasar nya Komputer cepat atau tidak nya tergantung pada Kita meng seting nya atau meng Upgrade hadware nya Dll.

Baca sampai tuntas yah sobat Cara Membuat Komputer Lebih Cepat
Sobat bisa Ikuti langkah-langkah seperti berikut :

1. Masuk menu run. Start -> Run
2. Ketik msconfig kemudian klik Ok

Setelah muncul tampilan berikut.






3. Pilih -> BOOT. ubah timeout menjadi 3 Second.
4. lalu pilih ->STARTUP kemudian ->Uncheck yang tidak penting.

Saya sarankan hanya Antivirus saja yang di ->Check (jika ada antivirus di komputer anda). Untuk
menjaga komputer sobat bila sewaktu-waktu ada virus yang menyerang komputer
anda (untuk lebih cepat ->Uncheck Semuanya).
Untuk membuat kompter lebih cepat lagi ikuti langkah-langkah berikut.


5. My Computer -> Properties -> Advanced -> Startup and Recovery -> Setting.
    Lalu ->Uncheck ->Time to display list operating system dan Time to display recovery Option when
    needed.

Masih belum puas. Ingin lebih cepat lagi ikuti langkah-langkah berikut.

6. My Computer -> Properties -> Advanced -> Performance -> Setting. Lalu - >Adjust for best
    performance atau Uncheck semuanya.(saya sarankan bagi anda yang suka dengan kecantikan tampilan
    komputer jangan melakukan ini, atau - >Uncheck yang menurut anda tidak penting saja). Salah satu
    kendala yang membuat komputer anda berjalan lambat adalah tampilannya. Semakin culun/jelek tampilan
    yang anda buat, semain cepat pula komputer anda.

Apa ??? Masih belum puas juga Waduh,Repot nih… kebangetan !!! yaudah ikuti cara termanjur dari saya.

7. Hapus semua Icon di Dekstop dan Start-> All Programs -> Accessories -> System Tools lakukan Disk
    Defragmenter dan Disk Cleanup secara rutin. Misalkan sebulan sekali.



Waduh masih belum puas juga ??? ane nyerah deh klo begitu emang kebangetan loe..
Saran terakhir dari saya ganti Prossesor, Motherboard, RAM dan Harddisk dengan
kapasitas yang lebih besar,Di jamin Bakal Ngebut ngalahin F1 dan Motor Gp.. Hhe

Selamat mencoba Sobat..
Cara Menambah Kecepatan Mozilla Firefox ini sangat Bermanfaat Buat koneksi yang sangat lambat, 

Mozilla Firefox merupakan aplikasi browser yang umum dan banyak digunakan karena kemudahan dan user friendly yang dilengkapi dengan plugin yang gratis.
Silahkan ikuti langkah - langkah di bawah untuk menambah kecepatan Mozilla anda dalam berselancar di dunia maya.


1.  Open your Mozilla firefox
2.  Ketikan di addres bar  "about:config" (tanpa tanda petik).
3.  Scroll mouse anda kebawah dan cari "network.http.max-connections", double klik dan masukan nilai "64".
4.  Cari "network.http.max-connections-per-server", double klik dan masukan nilai "21".
5.  Cari 'network.http.max-persistent-connections-per-server", double klik dan masukan nilai "8".
6.  Doube klik pada "network.http.pipelining " menjadi "true".
7.  Cari "network.http.pipelining.maxrequests", double klik dan masukan nilai "100".
8.  Double klik pada "network.http.proxy.pipelining" menjadi "true".
9.  Langkah terakhir, klik kanan dimana saja pilih :
"New >> integrar >> lalu tulis "nglayout.initialpaint.delay" (tanpa tanda petik". Kemudian masukan nilai "0".
Mungkin sobat sudah merasa lelah atau capek dengan Koneksi Super lambat atau Koneksi "siput",sama ane juga mengalami hal yang serupa.
Namun jangan khawatir sobat,ada alternatip lain nih buat sobat jika ingin koneksinya capet, kali ini saya akan menjelaskan Cara Menambah Kecepatan Internet.

Pada dasarnya OS windows sudah membatasi bandwidth untuk koneksi internet sebanyak 20% dari total bandwidth yang seharusnya bisa maksimal, jika netter ingin menambah bandwidth internet supaya koneksinya terasa lebih cepat dan kencang bisa dengan cara mengurangi atau mengosongkan batasan bandwidth tersebut supaya pada Windows kita bisa maksimal dalam menggunakan bandwidth yang sudah ada.



Ikuti petunjuknya seperti dibawah ini :

1. Klik Start
2. Klik Run
3. Ketik gpedit.msc
4. Kemudian klik Ok
5. Setelah masuk klik (buka) Administrative Templates
6. Kemudian klik (buka) Network
7. Setelah terbuka klik QoS Packet scheduler
8. Kemudian klik Limit Reservable Bandwidth
9. Dan setelah terbuka ubah setting menjadi Enable
10. Kemudian ubah Bandwidth Limitnya menjadi 0
11. Klik Apply, dan terus Ok
12. Kemudian keluar dan Restart komputer

Selesai.
Dan juga ada yang bertanya kepada saya,Bagai mana menaruh kolom postingan di tengah di antara di kiri dan kanan sidebar.?
Pada waktu yang lalu pernah ada sahabat saya Sesama Bloger bertanya bagai mana cara membuat Sidebar Berada Di Sebelah Kiri Dan Kanan.?



Baik,Untuk totorial saya kali ini akan menjelas kan bagai mana cara membuat sidebar berada di kiri dan kanan..

Untuk membuat kolom sidebar yang baru dibuat tidaklah terlalu sulit, sobat hanya perlu menempatkan kode float menjadi di kiri (left) serta penambahan kode padding-right agar kolom kiri tidak bertabrakan dengan kolom posting. Bingung? sengaja saya buat bingung Heee..


Bagi sobat yang berminat untuk menempatkan kolom sidebar di sebelah kiri, sebelum membaca artikel ini ada baiknya membaca Artikel Sebelum nya terlebih dahulu karena artikel ini merupakan lanjutan dari artikel tersebut, jika sobat langsung membaca artikel ini, saya khawatir sobat menjadi tambah bingung.

Sebelum memasuki kepada topik bahasan utama, saya sarankan kepada sobat yang mempraktekan teori yang akan saya tulis sebaiknya bukan pada blog utama, akan tetapi pada blog untuk percobaan. Ini untuk menghindarkan kejadian yang tidak di inginkan, sayang apabila blog yang telah di tata rapih menjadi amburadul akibat percobaan.

Baiklah, ayo kita mulai sobat, dalam hal ini saya anggap sobat sudah berhasil membuat kolom baru. Langkah pertama yang harus di ingat adalah jangan sekali-kali memberi tanda conteng pada kotak kecil di samping tulisan Expand widget Template karena apabila sobat mencontengnya akan keluar kode widget yang sangat ngejelimet. Jika pada postingan yang lalu saya menuliskan kode seperti ini :

/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 840px
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: right;
padding-left:10px; /* yg ini tambahan juga biar tampak ada jarak sela */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

#sidebarbaru-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}


Agar hasilnya berbeda dengan yang dulu yaitu kolom yang di buat bukan berada pada sebelah kanan, maka sobat perlu sedikit mengubah kode yang saya cetak merah menjadi seperti ini :


#sidebarbaru-wrapper {
width: 180px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}

Terlihat pada hurup yang saya cetak biru bahwa yang di ubah hanyalah dua baris kode saja, yang lainnya tidak perlu di ubah. Jika sudah selesai mengubahnya, jangan lupa untuk menutupnya dengan menekan tombol simpan template.

Langkah selanjutnya adalah menuju ke bagian bawah template, yaitu pada bagian body, jika dulu saya menyarankan agar kode sidebaru di tempatkan seperti ini :

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>
</div>

<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>



Maka apabila sidebar baru ingin di tempatkan di sebelah kiri, maka kode sidebar baru harus di pindahkan di atas kode main (posting) sehingga kodenya kira-kira akan menjadi seperti ini :



<div id='sidebarbaru-wrapper'> <!-- perhatikan yang ini -->
<b:section class='sidebar' id='sidebarbaru' preferred='ye'/'>
</div>

<div id='main-wrapper'> <!-- perhatikan yang ini -->
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>
</div>



Apabila sudah selesai menempatkan kode sidebar baru, silahkan akhiri dengan menekan tombol Simpan Template, selesai. Silahkan lihat hasilnya !
Jika anda ingin menggunakan teknik ini, anda tentunya harus menghapus terlebih dahulu meta tag deskripsi atau meta tag keyword yang telah terpasang sebelumnya di blog anda agar tidak terjadi duplikasi.

Berikut langka-langkah pemasangan Dynamic Blogger Meta tag.

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.

 3. Klik tab Edit HTML.

4. Biasakan untuk melakukan backup, klik pada tulisan Download Template Lengkap
5. Agar lebih mudah, cari kode berikut : <b:skin><![CDATA[
6. Copy paste kode berikut persis diatasnya kode yang tadi :



7. Ingat, ganti kata deskripsi dengan deskripsi blog anda sendiri, dan kata keywords dengan keyword atau
    kata kunci blog anda tentunya.
8. Klik tombol SIMPAN TEMPLATE.
9. Selesai.

Namun ingat, teknik diatas hanyalah salah satu dari sekian banyak faktor yang menunjang SEO. Jadi jangan terlalu berharap apabila memasang teknik ini, jumlah kunjungan langsung membludak.

Semoga Tutorial ini bisa membantu sahabat-sahabat semua dalam meningkatkan Blog nya..
kunjungi juga Tentang Tutorial blog.


Pada artikel kali ini saya akan memberikan tips cara mengubah ukuran template blog.pertama saya akan menjelaskan apa maksud dari gambar diatas?.gambar diatas adalah kerangka template blog,dalam gambar tsb sudah ada keterangan tentang bagian-bagiannya.
langsung aja saya mulai cara-caranya:

1. Login ke Blog Kamu
2. Klik tata Letak
3. Klik Edit HTML
4. Disarankan sebelum mengedit Kode Html kamu,silahkan kamu membackup Code HTML kamu, demi keamanan, jika terjadi sesuatu yang tidak di inginkan.

    * Untuk mengedit ukuran Halaman Blog

Cari kode di bawah ini:

     #outer-wrapper {
    width: 660px;
    margin:0 auto;
    padding:10px;
    text-align:$startSide;
    font: $bodyfont;
    }


Keterangan :
Untuk memudahkanmencari Code di Atas gunakan bantuan dengan mengeklik Ctrl + F
Untuk untuk merubah ukuran lebar halaman blog, kamu cukup merubah angka pada width sesuai dengan keinginan kamu.

    * Untuk mengedit ukuran Halaman Posting

Cari kode di bawah ini:

    #main-wrapper {
    width: 410px;
    float: $startSide;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden;/* fix for long non-text content breaking IE sidebar float */
    }


Keterangan :
Untuk memudahkanmencari Code di Atas gunakan bantuan dengan mengeklik Ctrl + F
Untuk untuk merubah ukuran lebar Halaman Posting, kamu cukup merubah angka pada width sesuai dengan keinginan kamu.

    * Untuk mengedit ukuran Sidebar Blog

Cari Code di bawah ini:

    #sidebar-wrapper {
    width: 220px;
    float: $endSide;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }



Keterangan :
Untuk memudahkanmencari Code di Atas gunakan bantuan dengan mengeklik Ctrl + F
Untuk untuk merubah ukuran lebar Side Bar Blog, kamu cukup merubah angka pada width sesuai dengan keinginan kamu.

    * Untuk mengedit ukuran Header Blog,

Cari Code di bawah ini:

    #header-wrapper {
    width:660px;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
    }


Keterangan :
Untuk memudahkanmencari Code di Atas gunakan bantuan dengan mengeklik Ctrl + F
Untuk untuk merubah ukuran lebar Header Blog, kamu cukup merubah angka pada width sesuai dengan keinginan kamu.

    * Untuk mengedit ukuran Footer Blog

Cari Code di bawah ini:

    #footer {
    width:660px;
    clear:both;
    margin:0 auto;
    padding-top:15px;
    line-height: 1.6em;
    text-transform:uppercase;
    letter-spacing:.1em;
    text-align: center;
    }


Keterangan :
Untuk memudahkanmencari Code di Atas gunakan bantuan dengan mengeklik Ctrl + F
Untuk untuk merubah ukuran lebar Footer Blog, kamu cukup merubah angka pada width sesuai dengan keinginan kamu.

Catatan:
Jika lebar salah satu dari kelima elemen yang telah di sebut di atas (Halaman Blog, Halaman Posting, Side Bar Blog, Header Blog, dan Footer Blog) diubah, maka akan mempengaruhi Keserasian elemen yang lain. Oleh karena itu, jika Anda ingin merubah lebar salah satu elemen, maka anda juga harus menyesuaikan dengan lebar elemen yang lain, karena jika antara satu elemen yang satu dengan yang lain tidak serasi, maka tampilan blog anda akan menjadi kacau, anda tidak mau kan. Kalau tujuan anda yang mulanya ingin mempercantik blog anda justru ujung-ujungnya malah merusak blog anda sendiri maka dari itu. Hati-hati,,,
Mungkin dengan adanya gambar ini mungkin anda tau apa yang di maksud dengan Tab View.Tab View ini sangat berguna sekali untuk memudahkan pengunjung untuk melihat isi artikel yang ada dan ini sangat penting karena selain untuk memudahkan pengunjung tetapi juga sangat menarik di lihat.
Saya yakin di setiap rata - rata mempunyai widget ini.biasanya untuk membuat Tab View ini anda harus masuk ke Edit HTML dulu sekarang ini tidak perlu ribet untuk membuat seperti ini, kalau ada yang lebih gampang napain cari yang susah. Saya mengambil artikel ini dari mas Dody Farial. Cara yang kita gunakan hanya menambah kan elemen langsung di widget.untuk tutorialnya sebagai berikut !!!
Membuat Tab View Tanpa Edit HTML


   1. Masuk Ke ID Blog anda
   2. Klik Tata Letak
   3. Pada Tab Elemen Halaman ,tambahkan Elemen, Pilih HTML/Javascript
   4. Masukian Script di bawah ini ke dalam Form HTML/Javascript

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs"> <a>Tutorial</a>
<a>Judul 2</a>
<a>Judul 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad"> <a href="http://tejahtc.blogspot.com/search/label/Tips%20Mempercantik%20Blog"><li>tutorial blog</li></a>
</div>
</div>
<div class="Page">
<div class="Pad"> Isi menu tab view 2
</div>
</div>
<div class="Page">
<div class="Pad"> Isi menu tab view 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

 1. Untuk penjelasan Teks yang berwarna hijau itu isi dari judul menu ke 1 ke 2 dan ke 3
 2. Untuk Penjelasan teks yang berwarna biru Itu adalah judul dari menu ke 1 Ke 2 dan Ke 3
Dengan CSS/Javascript Pada Blog
Pada Kesempatan Kali Ini Saya Akan Membahas Tutorial Blogspot Artikel Tentang Membuat Menu Horizontal Drop down CSS Pada Blog
Cara Membuat Menu Horizontal Drop Down Membuat menu horizontal Drop Down sebenarnya ada banyak alternatif, untuk kali ini kita akan mencoba membuat jenis menu horizontal type professional dropdown, sebagaimana namanya tentunya ini akan membuat blog/site kita menjadi lebih tampak professional.



Cara Membuat Menu Horizontal Drop Down

Kita langsung ke TKP saja biar jelas dan untuk liat demo nya lihat pada menu Blog Ini
  • Langkah Pertama
  • Login ke akun Blogger kamu.
  • Dari halaman dashboard, pilih Edit HTML.
  • Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya agar lebih mudah
  • Lalu Copy Script dibawah ini diatas kode ]]></b:skin> tersebut.

/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/pro_dropdown_3.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */

.preload1 {background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0a.gif);}
.preload2 {background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1a.gif);}

#nav {padding:0; margin:0; list-style:none; height:38px; background:transparent url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#FFD700; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0a.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#fff; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1a.gif) no-repeat right top; padding-bottom:3px;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{left:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #50b5d0;}
#nav li ul.sub li a.fly
{background:#50b5d0 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow.gif) 80px 6px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#3f96a9; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#3f96a9 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow_over.gif) 80px 6px no-repeat; color:#fff;}

#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}

#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}

#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#3f96a9 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;}

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#50b5d0 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow.gif) 80px 6px no-repeat; color:#000; border-color:#50b5d0;}

setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="http://lh6.ggpht.com/_wC8_9aR_6uE/S6uJI38TreI/AAAAAAAACbY/QIXMKHei1g0/up.png" style="width:24px; height:24px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:15, offsety:15}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

  • Lalu Simpan Template.
  • Kemudian Tambah Gadget HTML Javascript klik button tambah lalu
  • Copy dan paste Script dibawah ini

<span class="preload1"></span>
<span class="preload2"></span>

<ul id="nav">
<li class="top"><a href="#" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="#" id="Menu" class="top_link"><span class="down">Menu</span></a>
<ul class="sub">

<li><b>Judul1</b></li>
<li><a href="#" class="fly">Subjudul1</a>
<ul>
<li><a href="#" target="_blank">subitem1.1</a></li>
<li><a href="#" target="_blank">subitem2.1</a></li>
<li><a href="#" target="_blank">subitem3.1</a></li>
</ul>
</li>
<li><a href="#" class="fly">Subjudul2</a>
<ul>
<li><a href="#" target="_blank">subitem1.2</a></li>
<li><a href="#" target="_blank">subitem2.2</a></li>
<li><a href="#" target="_blank">subitem3.2</a></li>
</ul>
</li>
<li><a href="#" class="fly">Subjudul3</a>
<ul>
<li><a href="#" target="_blank">subitem1.3</a></li>
<li><a href="#" target="_blank">subitem2.3</a></li>
<li><a href="#" target="_blank">subitem3.3</a></li>

<li><b>Subjudul3.1</b></li>
<li><a href="#">item1.3.1</a></li>
<li><a href="#">item2.3.1</a></li>
<li><a href="#">item3.3.1</a></li>

<li><b>Subjudul3.2</b></li>
<li><a href="#">item1.3.2</a></li>
<li><a href="#">item2.3.2</a></li>
<li><a href="#">item3.3.2</a></li>
</ul>
</li>


<li><b>Judul2</b></li>
<li><a href="#" target="_blank">subitem1.2</a></li>
<li><a href="#" target="_blank">subitem2.2</a></li>
<li><a href="#" target="_blank">subitem3.2</a></li>
</ul>


</li>
<li class="top"><a href="#" id="services" class="top_link"><span class="down">menu2</span></a>
<ul class="sub">
<li><a href="#" target="_blank">submenu1.2</a></li>
<li><a href="#" target="_blank">submenu2.2</a></li>
<li><a href="#" target="_blank">submenu3.2</a></li>
</ul>
</li>

</li>
<li class="top"><a href="#" id="services" class="top_link"><span class="down">menu3</span></a>
<ul class="sub">
<li><a href="#" target="_blank">submenu1.3</a></li>
<li><a href="#" target="_blank">submenu2.3</a></li>
<li><a href="#" target="_blank">submenu3.3</a></li>
</ul>
</li>

</li>
<li class="top"><a href="#" id="services" class="top_link"><span class="down">menu4</span></a>
<ul class="sub">
<li><a href="#" target="_blank">submenu1.4</a></li>
<li><a href="#" target="_blank">submenu2.4</a></li>
<li><a href="#" target="_blank">submenu3.4</a></li>
</ul>
</li>

<li class="top"><a href="#" id="profil" class="top_link"><span>menu5</span></a></li></li></li></ul>
Lalu Simpan Dan Lihat Hasilnya...

Keterangan:
  • Tanda # untuk Tempat Url yang anda inginkan
  • Lalu Tulisan Pada Sub Menu Item yaitu Nama Nama Menu Sesuai Dengan Kebutuhan

Saran Dan Kritik Anda Sangat Membantu Saya Dalam Menulis Artikel Selanjutnya Pada Blog Ini...
  1. Login Ke akun Blogger sobat
  2. Pada Dasbor pilih RANCANGAN + EDIT HTML dan jagan lupa untuk mencentang kolom expand template widget
  3. Masuka KOde Berikut  Dibawah kode <div id='outer-wrapper'>


 <style type='text/css'>#menubar {position: fixed;top:0px;z-index: 1000;background:-moz-linear-gradient(top,#1F2326,#000);background: -webkit-gradient(linear, left top, left bottom, from(#1F2326), to(#000));box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-moz-box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-webkit-box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-moz-border-radius:5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;width:988px;margin: 0;padding: 0;height:30px;}#menu {width:988px;height:30px;position:relative}#menu ul {padding:0;margin:0;list-style:none;position:absolute;left:0;top:0;width:988px;height:30px;z-index:10}#menu ul li {float:left;padding-bottom:4px}#menu ul li#li1 {padding:0}#menu li a {display:block;text-transform:capitalize;height:20px;float:left;color:#fff;text-decoration:none;line-height:20px;padding:0 10px;font-family:kristen itc;font-size:13px;border-right:1px solid #FF0000;margin:3px 0 0;}#menu li a:hover {color:#ff0000;white-space:nowrap;}#menu li a.current {color:#ffffff;}#menu li a:hover.current {color:#ffffff;}#menu li a:hover b {display:block;width:988px;height:30px;position:absolute;left:0; top:0;z-index:-1;-moz-border-radius:5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;}#menu li#li1 a:hover b {background: #D11717 -moz-linear-gradient(top,#000,#D11717);background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#D11717));}#menu li#li2 a:hover b {background-image: -moz-repeating-linear-gradient(20deg,rgb(255,0,0),rgb(100,0,0) 50px, rgb(255,0,0) 100px);background: -o-repeating-linear-gradient(20deg,rgb(255,0,0),rgb(100,0,0) 50px, rgb(255,0,0) 100px);background: -webkit-repeating-linear-gradient(20deg,rgb(255,0,0),rgb(100,0,0) 50px, rgb(255,0,0) 100px);}#menu li#li3 a:hover b {background: -moz-linear-gradient(top,#AF0000,#6B0000);background: -webkit-gradient(linear, left top, left bottom, from(#AF0000), to(#6B0000));}#menu li#li4 a:hover b {background: #D11717 -moz-linear-gradient(top,#D11717,#000);background: -webkit-gradient(linear, left top, left bottom, from(#D11717), to(#000));}#menu li#li5 a:hover b {background:-moz-linear-gradient(top,#001C5A,#000);background: -webkit-gradient(linear, left top, left bottom, from(#001C5A), to(#000));}#menu li#li6 a:hover b {background: #244007 -moz-linear-gradient(top,#244007,#000);background: -webkit-gradient(linear, left top, left bottom, from(#244007), to(#000));}#menu li#li7 a:hover b {background: #51A104 -moz-linear-gradient(top,#51A104,#000);background: -webkit-gradient(linear, left top, left bottom, from(#51A104), to(#000));}#menu li#li9 a:hover b {background:-moz-linear-gradient(top,#029BC5,#000);background: -webkit-gradient(linear, left top, left bottom, from(#029BC5), to(#000));}#menu li#li8 a:hover b {background: #40071F -moz-linear-gradient(top,#40071F,#000);background: -webkit-gradient(linear, left top, left bottom, from(#40071F), to(#000));}</style>

<div id='menubar'>
<div id='menu'>
<ul>
<li id='li1'><a href='#'><b/>Home</a></li>
<li id='li2'><a href='#'><b/>About Me</a></li>
<li id='li3'><a href='#' ><b/>Daftar Isi</a></li>
<li id='li4'><a href='#'><b/>Masuk</a></li>
<li id='li8'><a href='#'><b/>Daftar</a></li>
<li id='li5'><a href='#'><b/>My Facebook</a></li>
<li id='li9'><a href='#'><b/>My Twitter</a></li>
<li id='li7'><a href='#'><b/>Kode Warna</a></li>
</ul>
</div>
</div>

4 . Ubah Tanda # dengan Url yg Sobat inginkan dan Ubah KOde yg Berwarna MERAH dengan Judul Yang Sobat Inginkan
5 . SIMPAN Dan Lihat Hasilnya
Cara merubah warna postingan saat diblock mungkin kedengaran sangat asing bagi anda yang masih awam...
Karena tampilannya yang tidak terlalu kelihat cuman membuat postingan lebih enak dilihat....
Sebenarnya bingung juga naro keyword untuk posting'an ini...
Cuman ya mau gimana lagi..
Posting sehari musti 3 gk boleh kurang...
Mari kita bahas saja Tutorial cara mengganti warna postingan saat diblock...

Login ke akun blogger sobat..
Masuk kebagian Rancangan...
Masuk kebagian Edit Html...
Kemudian cari script ]]></b:skin> dengan menggunakan ctrl+f...
Kemudian copy script dibawah ini kemudian pastekan tepat diatas script ]]></b:skin>...

Code:
::-moz-selection{background:transparan; color:red}
        ::selection{background:#transparan; color:#FF0000}

Kemudian Simpan...

Note : Bagi anda yang masih ragu dengan tutor ini bisa membackup dulu template anda...
Tapi tutor yang saya berikan kali ini work ditemplate saya dan diblog lama saya juga...


Selamat Mencoba..
Kembali Ke Atas Go down
Pembahasan kali ini adalah Cara Mengganti Warna Font Pada Blog Sobat, langsung saja TKP.
1. Login ke Blogger. Klik menu Design -> Template Designer -> Advanced. Disana terdapat beberapa elemen yang dapat Sobat atur seperti:

Page Background Color: Mengganti warna background template yang diluar
Main Background Color: Mengganti warna background template yang didalam
Text Color: Mengganti warna teks postingan/ artikel
Blog Title Color : Mengganti warna judul blog
Blog Description Color : Mengganti warna deskripsi blog
Post Title Color: Mengganti warna judul postingan
Date Header Color: Mengganti warna teks tanggal
Border Color: Mengganti warna garis tepi template
Sidebar Title Color: Mengganti warna judul pada kolom sidebar misalnya teks Blog Archive, Blogroll, Labels, dan lain-lain
Link Color: Mengganti warna teks yang dipasang link
Visited Link Color: Mengganti warna teks link ketika pengunjung mengarahkan kursor pada linknya
Sidebar Link Color: Mengganti warna teks yang dipasang link pada kolom sidebar
Sidebar Visited Link Color: Mengganti warna teks link ketika pengunjung mengarahkan kursor pada link yang terletak pada kolom sidebar
Text Font: Mengganti bentuk huruf/ teks pada postingan
Sidebar Title Font: Mengganti bentuk huruf judul pada kolom sidebar
Blog Title Font: Mengganti bentuk huruf judul blog
Blog Description Font: Mengganti bentuk huruf deskripsi blog
Post Footer Font: Mengganti bentuk huruf footer pada postingan. Misalnya: Diposkan oleh, Posted by

Itulah beberapa elemen dasar yang paling sering ditemukan dalam template blogger. Setiap template memiliki elemen yang berbeda-beda. Silahkan dicoba sendiri dengan menggonta-ganti warnanya.

2. Jika sudah tinggal klik Simpan maka warna template akan berubah sesuai dengan keinginan Sobat. Lalu klik View Blog untuk melihatnya.

Anda ingin link ada menjadi berkedip warna warni ketika di sorot mouse! mari ikuti langkah berikut:


1. Login ke akun Blogger Anda
2. Klik Tata Letak/Rancangan
3. Klik Edit HTML
4. Cari Kode </head> , Untuk memudahkan cari dengan tool pecari denagn menekan ctrl F atau F3.
5. Pasang kode sript dibawah ini dibawah kode </head> atau disamping kode </head>


   <script src='http://muhammadsuteja.googlecode.com/files/rainbow.js'></script>

sehingga menghasilkan seperti ini:

   </head><script src='http://muhammadsuteja.googlecode.com/files/rainbow.js'></script>


6.Simpan dan lihat hasilnya.  
Elemen adalah tempat untuk menambahkan sebuah widget blogger, Sebuah Header bisanya hanya memiliki elemen satu dan tidak bisa diatmbahkan, tapi jika anda ingin Menambah Elemen tepat di Bawah atau di Atas Header kita hnya butuh merubah sedikit kode htmlnya, begini caranya:


  • Login ke akun Blogger teman- teman
  • Pada Dashboard pilih Tata Letak - Edit HTML
  • cari kode di bawah ini :
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  • Lalu rubah no menjadi yes ; maxwidgets = jumlah maksimal widget yang bisa kita tambahkan sehingga menjadi seperti ini
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
  • Klik Simpan Template
  • Lihat Previewnya dengan masuk ke Tata Letak - Elemen Halaman
Demikianlah Cara Menambah Elemen di Bawah atau di Atas Header, Semoga Bermanfaat.
Untuk membuat kolom baru atau yang sering di sebut Gadget ini mudah asal temen - temen sudah mengenal sedikit aja kode kode CSS dan HTML, karna kode ini yang akan di gunakan untuk membuat Elemen tersebut :

1.Klik Klik Tata Letak
2. Klik tab Edit HTML
3. backup lah template temen - temen (wajib dilakukan)
4. Cari Code  ]]></b:skin> lalu copy pastekan code di bawah ini di atas code ]]></b:skin> :

#under_header{
margin:10px 0;
padding:1%;
width:98%;
}

5. Cari kode dibawah ini (jika tidak ada cari yang hampir sama karna setiap temp berbeda - beda) :

<div id='header-wrapper'> 
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section></div>

6. Copy kode berikut lalu paste di bawah kode di atas

<div id="under_header">
<b:section class='header' id='underheader' preferred='yes'/>
</div>

7. Klik tombol SIMPAN TEMPLATE

8. Klik tab Tata Letak, maka hasilny aakan seperti dibwah ini :

Klik Untuk Memperbesar



image Cara Membuat Elemen

Selamat Mencoba Cara Membuat Elemen "Gadget" di bawah Header, sukses selalu.

- Copyright © 2013 Baso Selalu - Devil Survivor 2 - Powered by Blogger - Designed by Johanes Djogan -