>Cara Merubah Background Blog


>ksatriaalamayaIngin memberikan background pada blog namun Anda idak mahir menggunakan program pengolahan gambar seperti Photoshop ?? Jangan sedih karena pada situs squidfingers.com telah disediakan gambar – gambar yang cukup bagus yang bisa Anda download secara gratis.

PENTING : Sebelum melakukan langkah dibawah ini ada baiknya Anda membackUp template kesayangan Anda tersebut. Caranya bisa dilihat di sini.

Caranya Adalah :

1. Kunjungi situs www.squidfingers.com. atau Anda punya referensi alamat situs penyedia gambar andalan Anda, boleh – boleh saja. caranya sama saja !!

2. Pilih salah satu gambar yang Anda sukai kemudian klik Download.

3. Jika selesai men-download, Anda tinggal mengikuti langkah No 4, tetapi apabila dalam extensi ZIP, extrak dahulu dengan cara klik kanan file dan Extrak Here.

4. Biasanya file mempunyai format dot gif ( .gif ) / dot jpg ( .jpg ), Anda Upload file tersebut ke photobucket.com

  • >>> Cara Daftar photobucket.com
  • Daftar terlebih dahulu ke photobucket.com
  • Klik ‘Join Now!’ 

  • Dan isilah form dengan benar, hingga Anda pada posisi akun Anda.
  • Klik Upload Images & Video From dari komputer Anda dimana Gambar tadi berada.

5. Apabila langkah diatas telah sukses, Anda akan dibawa pada langkah Save dan Share. Klik ‘Get Link Code’ dan Copy Kode alamat pada ‘Direct Link’.

6. Sekarang masuklah ke halaman Dashboard > Tata Letak > Edit HTML dan cari kode body { dengan cara menekan keyboard (F3) atau ‘Ctr F’. karna setiap template berbeda codenya, cari saja kode yang mirip :

Contoh :

body {
margin : 0;
padding : 0;
font : x-small Verdana, Arial;
text-align : center;
color : #333333;
font-size : small;
font-size : small;
background : #444344 ;
}

7. Di belakang kode background sebelum titik koma ( ; ), tambahkan kode yang telah Anda kopy dari ‘Direct Link’ Photobucket.com.

http://i756.photobucket.com/albums/xx203/achmadtk07/banner.jpg

dengan menambahkan kode ‘url didepannya. Contoh Menjadi :

url(http://i756.photobucket.com/albums/xx203/achmadtk07/banner.jpg) ;

8. Sehingga kode lengkapnya adalah seperti di bawah ini :

body {
margin : 0;
padding : 0;
font : x-small Verdana, Arial;
text-align : center;
color : #333333;
font-size : small;
font-size : small;
background : #444344 url(http://i756.photobucket.com/albums/xx203/achmadtk07/banner.jpg) ;
}

9. Simpan template dan lihat hasilnya.

Iklan

>Cara Otomatis kotak scrool


>ksatriaalamaya
Cara Otomatis :

Cara ini langkahnya sama seperti contoh diatas ( cara manual ) hanya kodenya saja yang berbeda dan lebih mudah juga praktis karna postingan yang baru kita buat akan otomatis masuk ke kotak scroll setelah kita menyelesaikan entri baru tanpa harus di edit, akan tetapi judul postingan juga sudah pasti mengikuti urutan isi dari entri Anda dan tidak bisa disesuaikan . copy paste, ganti kode manula dengan kode otomatis dibawah ini :

<div style=”overflow:auto;width:320px;height:250px;padding:10px;border:1px solid #eee”>

<script src=”http://anas.ku93.googlepages.com/post-terakhir.js”></script&gt;
<script>var numposts = 15; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src=”http://AlaMatBloG.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp”>
</script>

</div>

jangan lupa untuk mengganti tulisan AlaMatBloG dengan url alamat blog Anda dan untuk menginginkan banyaknya posting yang bertengger di kotak scroll  ubahlah angka/jumlah var numposts = 15, misalnya Anda menginginkan Seratus Posting maka gantilah angka/jumlah 15 dengan 100.

>Cara Membuat Kotak Scrollbar Pada Blogger ….test


>ksatriaalamayaUntuk membuat kotak ini caranya sangat mudah:

1. Buka Blogger.
2. Klik menu Layout -> Page Elements
3. Klik Add a Gadget.
4. Lalu klik tombol + pada HTML/Javascript
5. Masukkan kode yang dibawah ini:


<div style=”overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;”>Tambahkan teks atau kode script disini</div>

Jika Anda ingin menambahkan teks kedalam kotak scrollbar maka ganti tulisan yang dicetak tebal dengan teks yang ingin Anda tampilkan.

Sebagai contoh, saya memasukkan:

<div style=”overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;”>Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog</div>

Maka hasilnya akan seperti ini:

Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog

Jika Anda ingin menambahan gambar kedalam kotak scrollbar maka ganti tulisan yang dicetak tebal dengan <img src=”alamat url gambar Anda” />

Sebagai contoh saya memasukkan:

<div style=”border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 300px; height: 80px; background-color: rgb(255, 255, 255);”><img src=”http://http://www.Alamat url gambar Anda.com” /></div>

Maka hasilnya akan seperti ini:

6. Kalau sudah. Klik Save lalu klik View Blog untuk melihat hasil tampilannya

Selamat Mencoba..!!

>Membuat Menu Horizontal


>

.fullpost{display:inline;} Ada yang pingin buat menu horizontal tapi nggak tahu caranya?
Gini nih caranya, eh tapi tunggu dulu, apasih menu horizontal itu? Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping). Kayak gini ini lho:

Contohnya bisa kamu lihat disini .Nha pingin nggak? kalo pingin ikuti cara berikut ini:

pertama-tama kamu harus punya gambar kayak gini nih:

dan

kalo nggak punya gimana? kalo nggak punya pake gambar yang aku sediain ini aja deh.

blackleft.gif blackright.gif
greenleft.gif greenright.gif
redleft.gif redright.gif
unguleft.gif unguright.gif
yellowleft.gif yellowright.gif
blueleft.gif blueright.gif
whiteleft.gif whiteright.gif

Ok, bahan-bahannya sudha ada, mari kita mulai maraciknya:
1. Login ke blogger terus pilih Layout –> Edit HTML, trus beri tanda centang pada kotak “Expand Widget Templates“. jangan lupa template di backup dulu.
2. Cari script seperti ini ]]></b:skin>, kalo udah ketemu copy script dibawah ini dan taruh diatasnya

/*credits : http://trik-tips.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /* Garis Bawah*/
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /*Posisi Menu*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url(“http://kendhin.890m.com/menu/blackleft.gif“) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url(“http://kendhin.890m.com/menu/blackright.gif“) no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}

Tulisan yang dicetak tebal bisa kamu ganti dengan gambar-gambar (text dibawah gambar) diatas tadi. Misalnya, jika kamu pilih yang warna merah maka scriptnya menjadi seperti ini;

background: url(“http://kendhin.890m.com/menu/redleft.gif“) no-repeat left top;

background: url(“http://kendhin.890m.com/menu/redright.gif“) no-repeat right top;

Mudeng nggak loe 😀
Kalo sudah selesai mari kita lanjutkan, sampai angka berapa tadi? oh ya sampai angka ketiga ya.
3. Copy script berikut ini

<div id=”tabshori”>
<ul>
<li><a href=”http://trik-tips.blogspot.com”><span&gt;Home</span></a></li>
<li><a href=”http://trik-tips.blogspot.com”><span&gt;Trik-Tips</span></a></li>
<li><a href=”http://trik-tips.blogspot.com”><span&gt;Free Template </span></a></li>
<li><a href=”http://trik-tips.blogspot.com”><span&gt;Kamus</span></a></li>
<li><a href=”http://trik-tips.blogspot.com”><span&gt;Profile</span></a></li>
</ul>
</div >

4. Ganti http://trik-tips.blogspot.com dengan link yang kamu tuju. Link tersebut bisa berupa alamat blog lain atau link postingan km. Untuk mendapatkan link postingan caranya klik kanan pada judul postingannya trus pilih “copy link location” (untuk mozilla firefox).
Kemudian text yang dicetak tebal bisa kamu ganti dengan text yang kamu suka. Text tersebut adalah text yang muncul di tombol/menu.
5. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan, salah satu contoh memasangnya yaitu begini
cari kode berikut ini :

<div id=”content-wrapper”>

caranya nyari biar gampang, copy script diatas lalu tekan Ctrl-f kemudian paste di kotak find, nha langsung ketemu kan. Kalo udah ketemu copy script yang tadi diatasnya

6. Simpan hasil pengeditan.
7. Lihat hasilnya.
8. kalo hasilnya kurang bagus/acak-acakan coba script tadi dipindah tempatnya, misalnya pindah keatasnya yaitu diatas kode </div>. kalao nggak cocok juga tempatnya dicoba lagi yang diatasnya atau juga dibawahnya, begitu terus sampai ketemu tempat yang cocok.
9. Kalo masih belum berhasil juga coba cara ini:
– Cari kode berikut ini :

<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>

teru ganti text yang berwarna hijau sihingga menjadi seperti ini:

<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>

terus di Save

Klik tab Page Elements, kemudian di daerah header klik Add a page element lalu pilih HTML/JavaScript paste script link tadi di dalam kotak content terus simpan, nha itu kan tempatnya diatas, coba drag kebawah dikit, nha gitu, terus simpan dan lihat hasilnya.

hasilnya pasti akan berbeda-beda di setiap template.
kalo berhasil berarti kamu pinter, kalo gagal berarti kamu kurang pinter :r coba diteliti lagi langkah-langkahnya dan dipahami maksudnya, jangan cuma di plototin. OK BOZ, Good luck…..