iklan space 728x90px

Pasang Kode Tuker Link

Posted by Unknown Posted on 09.12 with No comments

BangDhika beberapa waktu yang lalu mengajukan pertanyaan melalui shoutbox mengenai bagaimana cara membuat kode untuk tukeran link, dan sekarang saya akan coba membahasnya. Mudah-mudahan informasi ini bermanfaat juga bagi sobat lainnya yang belum mengetahui mengenai hal ini.



Untuk membuat kode tukeran link, kebanyakan para blogger menggunakan banner yang
berukuran kecil atau di sebut juga dengan chiklet sebagai ciri khas dari blog masing-masing. Maka dari itu, saya akan mencoba mengulas pembahasan ini bermula dari pembuatan chiklet nya.




Untuk membuat sebuah chiklet, sobat bisa menggunakan berbagai software grafik & design semacam photoshop, corel, atau lain sebagainya. Tak hanya sebatas chiklet yang berupa gambar diam, sebuah animasi pun bisa di jadikan chiklet tukeran link, tentunya ini terserah kepada keahlian masing-masing dalam hal membuat chiklet.



Akan tetapi, bagi sobat yang belum bisa atau hanya sekedar malas untuk membuatnya karena memerlukan waktu yang cukup lama untuk berkreasi, sobat bisa menggunakan layanan berbagai situs pembuat chiklet. Salah satu situs yang menyediakan layanan ini adalah www.chicklette.net. Melalui situs ini sobat hanya perlu menentukan warna serta tulisan yang di inginkan, kemudian apabila sudah selesai, sobat tinggal save picture lalu menyimpannya dalam komputer sobat.



Itu tadi merupakan langkah pertama. langkah kedua adalah meng upload file chiklet tadi ke hosting untuk menyimpan gambar, boleh di blogger atau di hosting lain, untuk cara upload gambar sudah sering di bahas, apabila masih bingung coba baca lagi di sini ! Jika proses upload selesai, sobat tinggal mencatat atau mengcopy alamat URL gambar tersebut. Misal saya ambil contoh untuk chiklet blog ini adalah :



http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif



langkah selanjuatnya adalah membuat kode link dari alamat gambar tadi, contoh kodenya seperti ini :





<a href="http://kolom-tutorial.blogspot.com" target="_blank">
<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>





Nah itu tadi merupakan contoh link untuk membuat link ke blog ini, untuk ngelink
ke blog sobat ya tinggal sesuaikan saja.



Apabila kode link sudah ada, langkah selanjutnya adalah membuat text area untuk menampung seluruh kode agar nanti bisa di copy oleh pengunjung yang mau nge link ke blog sobat, kodenya seperti ini :





<textarea name="code" rows="6" cols="20">



<a href="http://kolom-tutorial.blogspot.com" target="_blank">

<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>



</textarea>





Beberapa langkah sudah di lewati, langkah selanjutnya adalah merangkaikan kode-kode tadi, misalkan kode tukeran link ingin di bawah gambar chicklet agar tampak lebih menarik, kodenya kira-kira seperti ini :





<h2>Tukeran link</h2>

<br/><br/>

Copy kode di bawah masukan di blog anda, saya akan segera linkback kembali

<br/><br/>


<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial ">


<br/><br/>


<textarea name="code" rows="6" cols="20">

<a href="http://kolom-tutorial.blogspot.com" target="_blank">

<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>



</textarea>







Hasilnya nanti akan seperti ini :



Tukeran link



Copy kode di bawah masukan di blog anda, saya akan segera linkback kembali




Kolom blog tutorial








Dari tulisan diatas, terlihat ada tulisan yang memanjang kekanan. Akan tetapi jangan kawatir karena tulisan tersebut akan turun secara otomatis
mengikuti lebar dari sidebar. Untuk mengatur lebar serta tinggi dari text area, sobat tinggal mengganti nilai dari rows serta cols saja.



Ada juga blogger yang suka memasang tombol LINK TO ME pada blog nya, ini di maksudkan agar ketika pengunjung yang ingin membuat link
ke blog sobat tinggal mengklik tombol tersebut. Akan tetapi ini bekerja bagi mereka (yang ingin membuat link ke blog sobat) yang memakai
template baru saja, sedangkan untuk yang template klasik tidak bisa, jadi menurut saya kurang efektif. Contoh tombolnya seperti :







The button image will displayed on your site like this



Kolom blog tutorial




Coba buktikan deh, klik saja pada tombol yang saya berikan.



Kode untuk membuatnya seperti ini :





<center>

<form action="http://beta.blogger.com/add-widget" method="POST">

<input value="FAVOURITE" name="widget.title" type="hidden"/><textarea style="display:none;" name="widget.content">

<a href="http://kolom-tutorial.blogspot.com" target="_blank" />

<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>

</textarea><input value="http://buzz.blogger.com" name="infoUrl" type="hidden"/>

<input value="http://www.blogger.com/img/icon_logo32.gif" name="logoUrl" type="hidden"/>

<input value="LINK TO ME" name="go" type="submit"/></form><p>The button image will displayed on your site like this</p><br/>

<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>
</center>






Silahkan ganti alamatnya dengan yang di miliki sobat.




bagi sobat yang menggunakan template klasik, sobat tinggal menyimpan kode di atas pada sidebar
yang sobat inginkan. Untu yang memakai template baru, sobat tinggal memilih tambah elemen, trus pilih
HTML/Javascript, kemudian masukan kode yang seperti diatas, simpan dan selesai.



Semoga mudah untuk di mengerti.



Salam buat blogger sejati semua......



Read more »
Label: , , ,

Tips Mengganti Background Blog

Posted by Unknown Posted on 08.20 with No comments

Beberapa hari yang lalu, sobat Uel menanyakan perihal bagaimana caranya untuk
mengganti background blog, dan tentunya saya akan coba membahasnya. Menurut
saya, ada dua kemungkinan mengganti background yaitu yang pertama adalah mengganti
hanya warna background (latar belakang) saja, yang kedua adalah mengganti background
blog dengan menggunakan gambar atau image.




Ada satu hal yang saya anggap penting apabila sobat berniat mengganti background (latar belakang)
yaitu gantilah background dengan warna atau image yang sekiranya tidak membuat tulisan-tulisan
kita menjadi susah untuk di baca. Jika tulisan yang tersedia berwarna gelap, maka pilihlah warna
atau image yang terang, akan tetapi sebaliknya apabila tulisan yang ada berwarna terang, maka sebaiknya
warna atau image background berwarna gelap. Tulisan yang susah untuk di baca oleh pengunjung, tentunya
akan membuat pengunjung tersebut malas untuk membaca artikel-artikel yang kita tulis, dan tentunya
percuma saja kita memposting artikel jika tidak ada yang mau untuk membacanya.OK, biar tidak menyita
halaman langsung saja pada topik utama. Karena kode template sangat bervariasi, yang akan saya jadikan
contoh adalah template asli blogger yaitu template minima.



  • Mengganti Warna Background





    • Untuk template minima klasik :




    1. Sign in



    2. Klik menu Template



    3. Klik menu Edit HTML



    4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data



    5. Rubahlah kode warna asli template dengan kode warna yang sobat sukai (yang warna merah adalah kode yang harus di rubah) :





      6. body {

      background:#fff;

      margin:0;

      padding:40px 20px;

      font:x-small Georgia,Serif;

      text-align:center;

      color:#333;

      font-size/* */:/**/small;

      font-size: /**/small;

      }



      Misalkan jika ingin menjadi warna abu-abu terang, kodenya jadi seperti ini :



      body {

      background:#E7E3E3;

      margin:0;

      padding:40px 20px;

      font:x-small Georgia,Serif;

      text-align:center;

      color:#333;

      font-size/* */:/**/small;

      font-size: /**/small;

      }




    6. Klik tombol Pratinjau untuk melihat perubahan



    7. Jika sudah OK, klik tombol Simpan Perubahan Template



    8. Selesai.





    Jika sobat kebingungan tentang kode warna, sobat bisa menggunakan bantuan
    program photoshop, kapan-kapan akan saya posting khusus tentang bagaimana
    cara mengetahui kode warna.





    Untuk template minima baru :




    1. sign in



    2. Klik menu Layout



    3. Klik menu Fon dan Warna



    4. Pada gambar teks area sebelah kiri, pilih yang Warna latar Belakang Halaman (biasanya yg pertama sih langsung ini, jadi tidak usah
      di pilih lagi)



    5. Klik warna yang sobat sukai pada gambar warna-warna yang di tampilkan, lalu lihat perubahannya pada gambar di sebelah bawah



    6. Jika merasa sudah cocok, klik tombol SIMPAN PERUBAHAN



    7. Selesai.





    Mudah bukan?




  • Mengganti Background Dengan Image




    • Hal yang pertama tentu saja sobat harus mempunyai file image. Image
    ini bisa berbentuk imaage biasa, photo, bahkan animasi pun bisa.
    hal yang kedua adalah menguploadnya ke situs untuk menyimpan gambar, saya
    anggap sobat sudah bisa melakukannya karena sudah saya bahas pada postingan
    terdahulu, atau masih bingung? kalau iya, coba baca kembali di sini !



    Untuk ukuran gambar, sobat tidak usah membuatnya dalam bentuk yang sangat besar,
    karena walaupun ukuran asli dari image (gambar) adalah kecil, nanti akan di tampilkan
    dalam jumlah yang sangat banyak hingga memenuhi layar monitor, contoh saya sudah
    menguload sebuah gambar dengan ukuran yang kecil saja, gambarnya seperti ini
    (ukuran gambar dalam ukuran aslinya) :



    alamat gambarnya adalah



    http://amen24.googlepages.com/pattern_096.gif



    gambarnya seperti ini :







    gambarnya sangat kecil bukan? tapi gambar tersebut akan tampil memenuhi layar karena akan di tampilkan
    dalam jumlah yang sangat banyak.



    Untuk cara instalasinya, silahkan ikuti langkah-langkah berikut !



    Untuk template minima klasik :




    1. Sign in



    2. Klik menu Template



    3. Klik menu Edit HTML



    4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data



    5. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :





      6. body {

      background:#fff url('http://amen24.googlepages.com/pattern_096.gif');

      margin:0;

      padding:40px 20px;

      font:x-small Georgia,Serif;

      text-align:center;

      color:#333;

      font-size/* */:/**/small;

      font-size: /**/small;

      }




    6. Klik tombol Pratinjau untuk melihat perubahan



    7. Jika sudah OK, klik tombol Simpan Perubahan Template



    8. Selesai.





    Kode warna background sengaja tidak saya hilangkan, ini di maksudkan agar
    apabila background image yang kita pakai gagal di loading oleh komputer pengunjung
    blog, maka yang bekerja duluan warna background.




    Untuk template minima baru :




    1. Sign in




    2. Klik menu Layout




    3. Klik menu Edit HTML




    4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data





    5. Klik kotak kecil di samping tulisan Expand Template Widget




    6. Tunggu beberapa saat sampai proses selesai




    7. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :





      8. body {

      background:$bgcolor url('http://amen24.googlepages.com/pattern_096.gif');

      margin:0;

      color:$textcolor;

      font:x-small Georgia Serif;

      font-size/* */:/**/small;

      font-size: /**/small;

      text-align: center;

      }




    8. Klik tombol Pratinjau untuk melihat perubahan




    9. Bila sudah OK, klik tombol SIMPAN TEMPLATE




    10. Selesai.






    Saya rasa ini sangat mudah dilakukan, karena tidak banyak kode yang harus di tambahkan, Untuk melihat
    contoh blog yang sudah saya pasang background dengan gambar yang saya contohkan di atas, silahkan sobat
    klik di sini !



    Eh lupa, bagi sobat yang malas membuat gambar, sobat bisa mendownload berbagai gambar pattren di sini.




    Selamat mencoba !




    Read more »
    Label: , ,

    Membuat Banner Bertaburan

    Posted by Unknown Posted on 05.01 with No comments
    Pernah melihat blog yang terdapat banner bertaburan di halamannya? ingin mengetahui cara membuatnya? jika tertarik silahkan baca artikel di bawah ini sampai selesai !.



    Untuk membuat banner bertaburan, yang akan saya gunakan adalah memakai perintah marquee. Tentang marquee sudah saya bahas pada postingan terdahulu dan kali ini akan saya bahas variasi lain dari perintah marquee ini.



    Agar banner yang di gunakan lebih menarik untuk di lihat, maka sebaiknya kita menggunakan banner yang berisifat animasi. Animasi ini bisa berupa putaran, terbalik atau mungkin dalam bentuk terbang. Untuk membuat animasi, sobat bisa menggunakan berbagai software pembuat animasi semisal Ulead cool 3D ataupun program yang lainnya. Sedikit kabar gembira, bagi sobat yang belum mempunyai software Ulead cool 3D sobat bisa mendowload secara gratis di blog miliknya bang iwan yaitu di http://free7.blogspot.com.



    Bagi sobat yang sudah terbiasa dengan program-program animasi, tentu tidak akan menemui masalah dalam hal membuat banner animasi, akan tetapi bagi sobat yang sama
    seperti saya ini yakni masih banyak bingungnya kalau membuat animasi maka ada jalan
    lain yakni kita bisa mencari situs-situs penyedia animasi. Bagaimana cara mencarinya?
    ini hal yang mudah, pada akhir artikel ini saya sediakan search engine dari google.
    Tugas sobat hanya mengisi kotak isian dengan keyword yang di inginkan, misal : free animation,
    animasi gratis, Free banner animation atau keyword lain yang sekiranya
    bisa memunculkan berbagai situs penyedia animasi gratis, kemudian setelah kotak isian
    di tulis silahkan klik tombol search maka nanti akan keluar ratusan atau bahkan ribuan situs penyedia animasi, silahkan sobat cari sendiri mana yang cocok.



    OK kita kembali ke.....topik bahasan tentunya. Sebagai contoh saya telah mendapatkan sebuah file banner animasi, tugas selanjutnya adalah mengupload file tersebut ke hosting penyimpan gambar. Ambil contoh, saya telah mengupload banner animasi di google pages dan mempunyai alamat seperti ini :




    http://amen24.googlepages.com/face5.gif




    Untuk membuat gambar ini bisa tampil kodenya seperti ini :




    <img src="http://amen24.googlepages.com/face5.gif">




    hasilnya seperti ini :











    Atau sobat bisa memperbesar atau memperkecil animasi ini dengan mengatur tinggi serta lebar gambar, contoh di perbesar :




    <img src="http://amen24.googlepages.com/face5.gif" width="100" height="100">




    hasilnya akan seperti ini :











    contoh di perkecil :




    <img src="http://amen24.googlepages.com/face5.gif" width="30" height="30">




    hasilnya akan seperti ini :











    Langkah selanjutnya adalah membuat variasi perintah marquee, saya berikan contoh perintahnya seperti ini :



    <marquee behavior="scroll" direction="down" style="position: absolute; right: 1100px; top: 52px; width: 100px; height: 900px;" scrollamount="14">


    <img src="http://amen24.googlepages.com/face5.gif">


    </marquee>



    Agar lebih faham, saya bahas sedikit tentang fungsi-fungsi dari atribut yang saya berikan :



    behavior="scroll" --> behavior atribut untuk mengatur perilaku gerakan. scroll
    perilaku yang di pilih yaitu teks atau image bergerak berputar/berulang-ulang.



    direction="down" --> direction atribut untuk mengatur arah gerakan teks/image. down
    arah yang di pilih adalah ke bawah, sobat bisa merubah arah ini sesuai keinginan, tinggal ganti
    dengan Up untuk keatas, Left untuk ke pinggir dan right untuk ke kanan.



    style="position: absolute; right: 1100px; top: 52px; width: 100px; height: 900px;" -->
    position: absolute; posisi yang di pilih adalah absolut atau tersendiri.
    right: 1100px; posisi terletak sebesar 1100 pixel diukur dari sebelah kanan layar.
    top: 52px; posisi juga terletak pada 52 pixel di ukur dari sebelah atas layar.
    width: 100px; lebar untuk tempat gambar sebesar 100 pixel. height: 900px;
    tinggi untuk tempat gambar sebesar 900 pixel.



    scrollamount="14" --> scrollamount atribut untuk mengatur kecepatan gerakan. 14 adalah kecepatan yang dipilih, silahkan ganti nilainya, semakin kecil nilai maka gerakan semakin lambat, semakin besar nilainya maka gerakannya semakin cepat.






    Contoh di atas merupakan hanya untuk satu gambar animasi saja, biar lebih menarik dan supaya gambarnya banyak bertebaran maka perintah yang di buat harus beberapa perintah, akan tetapi posisinya harus di bedakan agar terlihat bertebaran. Dan ada yang harus di ingat yaitu kita harus membuat posisi yang kira-kira tidak mengganggu pembaca yakni tidak menutupi artikel yang kita posting. Contoh perintahnya seperti ini :






    <marquee behavior="scroll" direction="down" style="position: absolute; right: 1100px; top: 52px; width: 100px; height: 900px;" scrollamount="14">

    <img src="http://amen24.googlepages.com/face5.gif" width="100" height="100"/>

    </marquee>



    <marquee behavior="scroll" direction="down" style="position: absolute; left: 358px; top: 2px; width: 60px; height: 450px;" scrollamount="5">

    <img src="http://amen24.googlepages.com/face5.gif" width="30" height="30" />

    </marquee>



    <marquee behavior="scroll" direction="down" style="position: absolute; right: 441px; top: 55px; width: 60px; height: 250px;" scrollamount="9">

    <img src="http://amen24.googlepages.com/face5.gif" width="30" height="30" />

    </marquee>



    <marquee behavior="scroll" direction="down" style="position: absolute; right: 498px; top: 53px; width: 60px; height: 380px;" scrollamount="6">

    <img src="http://amen24.googlepages.com/face5.gif" />

    </marquee>



    <marquee behavior="scroll" direction="down" style="position: absolute; right: 800px; top: 51px; width: 60px; height: 350px;" scrollamount="7">

    <img src="http://amen24.googlepages.com/face5.gif" />

    </marquee>



    <marquee behavior="scroll" direction="down" style="position: absolute; right: 390px; top: 55px; width: 60px; height: 450px;" scrollamount="5">

    <img src="http://amen24.googlepages.com/face5.gif" />

    </marquee>



    <marquee behavior="scroll" direction="down" style="position: absolute; right: 749px; top: 54px; width: 60px; height: 250px;" scrollamount="5">

    <img src="http://amen24.googlepages.com/face5.gif" />

    </marquee>



    <marquee behavior="scroll" direction="down" style="position: absolute; right: 325px; top: 52px; width: 60px; height: 300px;" scrollamount="10">

    <img src="http://amen24.googlepages.com/face5.gif" />

    </marquee>



    <marquee behavior="scroll" direction="down" style="position: absolute; right: 600px; top: 49px; width: 60px; height: 350px;" scrollamount="8">

    <img src="http://amen24.googlepages.com/face5.gif" />

    </marquee>



    <marquee behavior="scroll" direction="down" style="position: absolute; right: 873px; top: 52px; width: 60px; height: 400px;" scrollamount="3">

    <img src="http://amen24.googlepages.com/face5.gif" />

    </marquee>



    <marquee behavior="scroll" direction="down" style="position: absolute; right: 50px; top: 55px; width: 60px; height: 700px;" scrollamount="12">

    <img src="http://amen24.googlepages.com/face5.gif" />

    </marquee>








    Contoh gambar animasi diatas adalah memakai gambar milik saya, silahkan sobat ganti dengan gambar yang sobat sukai.





    Cara memasang kode-kode diatas, silahkan ikuti langkah berikut ini :



    Untuk template klasik :





    1. Sign in di blogger




    2. Klik menu Template




    3. Klim menu Edit HTML




    4. Copy seluruh kode HTML yang ada lalu paste pada notepad kemudian save, ini sebagai backup data apabila kita melakukan kesalahan dalam proses edtitting template




    5. Simpan kode berikut antara kode <body> ........ </body> :















    6. Klik tombol Pratinjau untuk melihat perubahan




    7. Jika sudah OK, klik tombol Simpan Perubahan Template




    8. Selesai.






    Untuk template baru :





    1. Sig in di blogger dengan id sobat





    2. Klik menu layout




    3. Klik menu Elemen Halaman




    4. Klik tulisan Tambahkan sebuah Elemen Halaman




    5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript





    6. Copy kode di bawah lalu paste pada kotak yg tersedia, jangan lupa ganti alamat gambarnya dengan yang sobat miliki

















    7. Klik tulisan Lihat Blog untuk melihat hasilnya





    8. Selesai.






    Sebagai contoh saya sudah membuat blog dengan perintah ini, silahkan klik disini untuk contoh yang arah ke bawah, dan klik di sini untuk contoh yang arah ke atas.



    Jangan lupa sobat, untuk mencari situs penyedia animasi, silahkan gunakan search engine di bawah biar saya dapet komisi dari google ya dan yang pasti sobat tidak usah repot-repot buka browser baru bukan



    Selamat mencoba !
    Read more »
    Label: , , ,

    Pasang Banner di Header Blog

    Posted by Unknown Posted on 05.57 with No comments
    Beberapa hari yang lalu, sempat ada salah seorang sobat meninggalkan pesan Offline pada YM milik saya yang isinya kira-kira seperti ini :



    "Bagaimana caranya menyimpan banner pada header blog"



    Sebuah keinginan yang saya anggap wajar bagi seorang pemilik blog, karena sudah barang tentu merupakan suatu kebahagiaan tersendiri apabila banner yang sangat kita sukai dapat di tempatkan pada blog kebanggan kita. Jika ada pertanyaan lain "apakah kita bisa mengganti atau menambahkan banner sendiri kedalam blog?" jawabannya adalah bisa, akan tetapi tentunya kita harus sedikit bercape ria mengotak-atik kode template.



    Lagi-lagi karena template terbagi dua yaitu template klasik dan template baru, maka saya akan membagi dua bahasan tentang bagaimana caranya menambahkan atau mengganti banner yang ada di header.



    Sebelum menginjak kepada proses editting template, langkah awal tentunya sobat harus mempunyai banner yang akan di pakai. Untuk membuat sebuah banner, sobat bisa menggunakan berbagai program desain grafis yang sobat kuasai, apakah itu photoshop, coreldraw, ataupun program-program yang lainnya yang sejenis yang penting judulnya adalah program yang bisa membuat banner.



    Karena template bentuknya ratusan atau bahkan mungkin ribuan, tentunya tulisan ini tidak akan bisa mewakili untuk pemakaian template, akan tetapi mungkin akan sedikit memberi gambaran bagaimana cara menambahkan atau merubah banner yang ada di header. Sebagai proyek percontohan (kaya kerjaan saja ya pake proyek segala), saya akan mengambil contoh template Minima yang di desain oleh Douglas Bowman, dan template ini merupakan template asli blogger.



    Untuk Template Klasik



    Seperti yang saya sebutkan di awal bahwa langkah pertama yang dilakukan adalah membuat banner, gambar banner terserah kepada sobat, mau gambar pemandangan, laut, atau photo sobat sendiri juga boleh. Langkah kedua adalah meng upload banner tersebut, bisa di upload ke blogger sendiri atau ke hosting lain. Untuk cara upload gambar sudah saya terangkan di sini dan di sini. Sebagai contoh, saya sudah upload banner di www.photbucket.com dan mempunyai alamat banner seperti ini :



    http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif



    dan gambar bannernya seperti ini ( gambarnya dalam skala kecil):









    Untuk cara penempatannya silahkan ikuti langkah-langkah berikut :




    1. Sign in di blogger




    2. Klik menu Template




    3. Klim menu Edit HTML




    4. Copy seluruh kode HTML yang ada lalu paste pada notepad kemudian save, ini sebagai backup data apabila kita melakukan kesalahan dalam proses edtitting template




    5. Sisipkan kode berikut pada style sheet css sobat. Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan




      6. /* Header
      ----------------------------------------------- */

      @media all {

      #header {

      width:660px;

      margin:0 auto 10px;

      border:1px solid #ccc;

      background:url(http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif) no-repeat top center;

      }

      }





    6. Jika sobat ingin menghapus garis yang berada di tepi banner, sobat harus menghapus kode berikut :




      7. #blog-title {

      margin:5px 5px 0;

      padding:20px 20px .25em;

      border:1px solid #eee; <-- hapus (delete)

      border-width:1px 1px 0; <-- hapus (delete)

      font-size:200%;

      line-height:1.2em;

      font-weight:normal;

      color:#666;

      text-transform:uppercase;

      letter-spacing:.2em;

      }




      #description {

      margin:0 5px 5px;

      padding:0 20px 20px;

      border:1px solid #eee; <-- hapus (delete)

      border-width:0 1px 1px; <-- hapus (delete)

      max-width:700px;

      font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;

      text-transform:uppercase;

      letter-spacing:.2em;

      color:#999;

      }




    7. Klik tombol Pratinjau untuk melihat perubahan




    8. Jika sudah OK, klik tombol Simpan Perubahan Template




    9. Selesai.






    Untuk template baru



    Bagi sobat pengguna template baru, bisa menggunakan dua cara.



    Cara pertama :




    1. Sign in di blogger




    2. Klik menu Layout




    3. Klik menu Edit HTML




    4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data




    5. Klik kotak kecil di samping tulisan Expand Template Widget




    6. Tunggu beberapa saat sampai proses selesai





    7. Tambahkan kode berikut pada style sheet css sobat.Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan




      8. /* Header
      -----------------------------------------------

      */



      #header-wrapper {

      width:660px;

      margin:0 auto 10px;

      border:1px solid #ccc;

      background:url(http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif)no-repeat top center;

      }

      }


    8. Klik tombol Pratinjau untuk melihat perubahan yang ada




    9. Bila sudah OK, klik tombol SIMPAN TEMPLATE




    10. Selesai.




    Langkahnya diatas sama dengan yang di template klasik.





    Cara kedua :




    1. Sign in di blogger




    2. Klik menu Layout




    3. Klik menu Edit HTML




    4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data




    5. Klik kotak kecil di samping tulisan Expand Template Widget




    6. Tunggu beberapa saat sampai proses selesai





    7. cari kode berikut pada template sobat :




      8. <b:section class='header' id='header' maxwidgets='1'>



      pada kode maxwidgets='1'. Rubah angka satu menjadi angka 2, sehingga
      kodenya menjadi seperti ini :



      <b:section class='header' id='header' maxwidgets='2'>



    8. Klik tombol SIMPAN TEMPLATE




    Nah itu langkah pertama, langkah selanjutnya adalah :




    1. Klik menu Elemen Halaman




    2. KLik tulisan Edit yang ada pada elemen Header




    3. Tunggu beberapa saat




    4. Pilih radio button yang ada di samping tulisan dari komputer Anda




    5. Klik tombol Browse...




    6. Pilih banner yang telah di buat yang ada pada komputer sobat




    7. Tunggu beberapa saat sampai proses selesai.




    8. Gambar banner sobat akan di tampilkan




    9. Klik tombol SIMPAN PERUBAHAN




    10. Selesai.






    Nah silahkan sobat lihat hasilnya!



    jika sobat merasa banner tersebut, maka sobat bisa menggantinya lagi, ulangi saja
    langkah-langkah di atas.



    Ok sobat, mungkin pembahasan tentang cara mengganti banner sudah selesai, untuk melihat contoh blog yang sudah saya tambahkan banner silahkan klik di sini.
    Pembahasan diatas adalah untuk menambahkan hanya satu banner saja, apabila sobat tertarik membuat banner yang bisa berubah-ubah, silahkan baca di sini. Untuk melihat contohnya silahkan klik di sini



    Selamat mencoba sobat !


    Read more »
    Label: , , ,