Selasa, 18 September 2007

Membuat Cursor Animasi


Hallo sobat.. jumpa lagi nih. Setelah beberapa hari absen karena datangnya bulan suci ramadhan dan tadinya saya berniat untuk undur diri selama satu bulan, eh akhirnya tidak tahan juga nih... Nge-log lagiiiii....
(sudah kecanduan kalee ye ). Yupsss... kali ini saya mau membahas salah satu pertanyaan dari sobat alfath yang di ajukan melalui shoutbox. Kutipan pertanyaannya seperti ini :



"ASS.Gmana cara pasang kursor animasi,kan bagus klo kursornya antik... "



Sebuah keinginan yang datang akibat ingin membuat blognya tampak lebih menarik di mata pengunjung.... wajar kalau menurut saya..




Untuk membuat sebuah kursor animasi tidaklah sulit, karena tidak banyak kode yang harus dipakai, akan tetapi tentu saja sesuatu yang gampang akan menjadi sulit tatkala kita tidak tahu caranya, makanya disinilah indahnya berbagi, banyak berbagi akan banyak di bagi, banyak memberi akan banyak di beri. iya ngga?
dan moto saya yang baru yaitu "banyak berbagi banyak sahabat".



Untuk membuat sebuah kursor animasi, langkah pertama yang harus di lakukan adalah membuat sebuah gambar animasi yang berukuran kecil, untuk yang ini terserah kepada keahlian sobat, banyak software pembuat animasi semisal macromedia flash dan kawan-kawannya. Sebuah pertanyaan baru mungkin muncul yaitu bagaimana apabila kita tidak
menguasai program animasi, kan jadi ribet persolaannya. Jika sobat tidak bisa membuat sebuah gambar animasi untuk di pakai, jangan dulu putus harapan. Sobat bisa mencarinya di internet, ratusan atau bahkan ribuan situs menyediakan layanan ini. Caranya sangat mudah, sobat bisa mencarinya lewat search engine yang ada di sebelah kanan atas blog ini. Tuliskan keyword yang berhubungan, misal : Free cursor animated, cursor animation, Free cursor animated atau keyword lainnya yang di rasa berhubungan dengan yang namanya kursor animasi.
Silahkan kunjungi situs yang muncul, barangkali sobat akan menemukan situs yang tepat.



Langkah kedua yaitu menyimpan file animasi yang sudah sobat dapatkan ke hosting tempat menyimpan gambar, contoh : http://www.photobucket.com atau di blogger sendiri juga bisa.
Untuk cara-cara mengupload gambar sudah saya terangkan, silahkan baca kembali di sini apabila sobat masih belum bingung mengenai cara upload gambar. Apabila gambar animasi sudah si upload, catat alamat gambar tersebut. Sebagai contoh, saya mempunyai gambar cursor berbentuk naga terbang dengan alamat sebagai berikut :



http://24rohman.googlepages.com/dragon3.ani





Langkah selanjutnya adalah menyisipkan kode untuk kursor. Kode untuk membentuk kursor adalah sebagai berikut :



cursor: url("alamat gambar kursor");



Sebagai contoh, jika saya menggunakan alamat kursor yang saya miliki, kode nya jadi seperti ini :



cursor: url("http://24rohman.googlepages.com/dragon3.ani");



Langkah selanjutnya yang harus di lakukan adalah memasukan kode di atas ke dalam kode template sobat, agar lebih mudah untuk di pahami, saya tuliskan langkah-langkahnya :



  • Untuk template klasik





    1. Sign in di blogger.



    2. Klik menu Template



    3. Klik menu Edit HTML



    4. Copy seluruh kode template yang ada, lalu save untuk backup data



    5. Cari kode yang mirip dengan kode di bawah ini, biasanya di tulis dengan body :




    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;

      }




    7. Sisipkan kode kursor di dalam kode tadi, sehingga seperti ini :




    8. body{

      background:#fff;

      margin:0;

      padding:40px 20px;

      font:x-small Georgia,Serif;

      text-align:center;

      color:#333;

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

      font-size: /**/small;

      cursor: url("http://24rohman.googlepages.com/dragon3.ani");

      }




    9. Klik tombol Simpan Perubahan Template



    10. Selesai. Silahkan lihat hasilnya.






  • Untuk template baru





    1. Sign in di blogger



    2. Klik menu Layout



    3. Klik menu Edit HTML



    4. Klik link Download template seluruhnya, save dulu untuk backup biar aman



    5. Cari kode yang mirip dengan kode dibawah, biasanya di tulis dengan body :





    6. body {

      background:$bgcolor;

      margin:0;

      color:$textcolor;

      font:x-small Georgia Serif;

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

      font-size: /**/small;

      text-align: justify;

      }


    7. Sisipkan kode kursor di dalam kode tadi, sehingga seperti ini :




    8. body {

      background:$bgcolor;

      margin:0;

      color:$textcolor;

      font:x-small Georgia Serif;

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

      font-size: /**/small;

      text-align: justify;

      cursor: url("http://24rohman.googlepages.com/dragon3.ani");

      }



    9. Klik tombol Simpan Template



    10. Selesai. Silahkan lihat hasilnya.





    Atau ada juga cara lain, yaitu di tempatkan di dalam kode <body>,
    sobat tinggal menyisipkannya sehingga kodenya jadi seperti ini :




    <body style='CURSOR: url("http://24rohman.googlepages.com/dragon3.ani")'>




    Saya rasa cukup deh, selamat menikmati animasinya. Untuk contoh nyata tentang yang saya terangkan diatas, sobat bisa kunjungi blog saya yang lain, silahkan klik di sini !



    Eh sobat, di template unik sudah banyak template yang baru lho, kunjungi sebentar blogku yang satu ini ya, silahkan klik http://template-unik.blogspot.com

    Selasa, 11 September 2007

    Cara Daftar Google Adsense



    Seperti janji saya kemarin lusa bahwa saya akan coba membahas seputar google adsense, dan kali ini adalah mengenai cara-cara mendaftar. Namun sebelum menginjak kepada topik utama yakni bagaimana mendaftar di google adsense ada beberapa hal atau lebih tepat saya sebut kiat-kiat bagaimana agar blog kita lebih memungkinkan untuk di terima menjadi anggota dari Google adsense, karena tak jarang pemilik blog yang ingin ikut program ini merasa kapok di sebabkan pihak google adsense menolak dari keanggotaan dirinya.



    Yang perlu di ingat adalah kiat-kiat yang saya berikan ini adalah bukanlah suatu hal yang mutlak apabila dilakukan akan 100 persen menjamin sobat di terima di google adsense, akan tetapi hanyalah sebuah tips sebagai bahan pertimbangan sobat semua. Baiklah, di bawah ini saya berikan beberapa kiat agar lebih cepat di terima oleh Google adsense :




  • Berbahasa inggris




  • Usakan blog yang di daftarkan ke google adsense mempunyai bahasa utama bahasa inggris, karena bahasa inggris merupakan bahasa yang di support oleh adsense, yang perlu di ketahui adalah apabila kita sudah di terima oleh adsense, kita
    dapat menyimpan kode iklannya pada blog milik kita yang lainnya, tidak terbatas kepada blog yang di daftarkan. Jadi hanya sekedar untuk lulus seleksi, sebaiknya buatlah dulu blog yang berbahasa inggris. Bagaimana apabila tidak bisa bahasa inggris dan tentunya tidak mempunyai blog yang berbahasa inggris? sobat jangan terlebih dahulu putus harapan, silahkan coba dulu daftarkan blognya di adsense karena sudah banyak blog yang berbahasa indosesia pun bisa di terima oleh adsense.



  • Sudah banyak posting artikel




  • Biasanya ini yang sering terjadi, sebuah blog yang baru jadi dan hanya berisi satu atau dua posting artikel saja sudah di daftarkan ke adsense. Sebaiknya isilah terlebih dahulu blognya dengan beberapa postingan artikel, minimal sudah mempunyai 10 buah artikel barulah coba daftarkan di adsense.



  • Design blog harus rapi




  • Sebaiknya tatalah terlebih dahulu blog yang akan di daftarkan ke adsense, walaupun Google adsense tidak mengharuskan bahwa yang di daftarkan adalah sebuah situs atau blog yang bersifat profesional, namun adsense tidak menginginkan iklan nya pada blog yang terkesan di desain asal jadi.



  • Blog sudah ada pengunjungnya




  • Usakan bahwa blog kita sudah ada pengunjungnya, minimal sudah pernah di kunjungi oleh 100 orang pengunjung. Selain itu yang perlu di ingat adalah bisnis Google adsense ini merupakan bisnis yang sangat bergantung kepada para pengunjung blog, percuma saja apabila kita sudah punya iklan adsense tapi masih sepi pengunjung. Agar blognya banyak di kunjungi pengunjung tentu kita harus berpromosi ria ke sana kemari
    dan isi dari blog kita ada hal yang di rasa bermanfaat bagi para pengunjung blog.





    Mungkin itu saja dulu beberapa kiat dari saya agar blog sobat lebih besar kemungkinannya di terima oleh Google adsense. Sudah siapkah untuk mendaftar ke google adsense? baiklah, silahkan ikuti langkah-langkah berikut ini :




    1. Untuk mendaftar adsense sobat bisa klik pada banner yang berada di sebelah kanan atas blog ini



    2. Setelah berada pada situs Google adsense, silahkan klik tombol dropdown yang berada pada sebelah atas dan pilihlah bahasa indonesia agar lebih di mengerti oleh kita.



    3. Klik tombol Daftar sekarang



    4. Ada beberapa form yang harus di isi :





      • URL Situs Web[?] --> isi dengan alamat URL sobat. Contoh : http://kolom-tutorial.blogspot.com



      • Bahasa pada website --> klik menu dropdownnya, lalu pilih bahasa utama dari blog sobat, bahasa inggris atau bahasa indonesia



      • Jenis Account: [?] --> pilih yang individual



      • Negara atau wilayah: --> pilih indonesia (sesuaikan dengan tempat tinggal sobat)



      • Nama penerima pembayaran --> isi dengan nama lengkap sobat. ini sangatlah penting, jangan di singkat. contoh : Rohman Abdul Manap jangan di singkat jadi Rohman AM



      • Alamat: --> isi dengan alamat lengkap sobat



      • Kota: --> isi dengan nama kota dimana sobat tinggal. contoh : bandung



      • Negara bagian: --> tidak perlu, ini khusus untuk amerika



      • Kode pos: [?] --> isi dengan kode pos



      • Telepon: --> isi dengan nomor telepon sobat



      • Dibawah tulisan kebijakan, silahkan sobat centang semua kotak kecil yang berisi perjanjian bahwa sobat menyetujuinya



      • Klik tombol Submit Informasi







    5. Selesai.







    Langkah selanjutnya adalah menunggu kiriman email dari google adsense, dan selama itu silahkan berdoa agar om google dapat berkenan menerima sobat.



    Untuk cara daftar saya rasa cukup sekian dulu, silahkan nantikan artikel selanjutnya.



    Silahkan berharap-harap cemas.


    Minggu, 09 September 2007

    Setting Widget Mybloglog


    Dulu saya pernah membahas bagaimana cara daftar serta mendapatkan widgetnya di sini, akan tetapi rupanya ada beberapa sobat yang masih bingung dan penasaran bagaimana cara setting widget agar yang tampak adalah hanya berupa photo saja seperti yang ada pada blog ini karena pada umumnya widget mybloglog adalah berbentuk horizontal dan terdapat nama-nama pemilik di masing-masing photonya. Yups.... saya akan mencoba membahasnya kembali.



    Sekarang saya anggap sobat sudah menjadi anggota mybloglog dan hanya tinggal melakukan setting saja. Ikuti langkah-langkah berikut ini :





    1. Silahkan sign in dulu di mybloglog




    2. Jika sobat mempunyai beberapa blog yang di daftarkan dalam satu account, klik tombol Get Widgets yang berada di bawah gambar blog yang ingin di pasang widget




    3. Klik kotak kecil yang berada di samping tulisan c_color_heading_bg, pilih warna yang persis dengan background blog sobat pada gambar warna-warna sebelah atas.




    4. Klik kotak kecil di samping tulisan c_color_heading, yang ini merupakan warna tulisan Recent readers, silahkan pilih yang sobat inginkan




    5. Klik kotak kecil di samping tulisan c_color_link_bg, pilih warna yang persis dengan background blog sobat




    6. Klik kotak kecil di samping tulisan c_color_link, pilih warna yang di nginkan




    7. Klik kotak kecil di samping tulisan c_color_bottom_bg, pilih warna yang sesuai dengan background sobat




    8. Ubah nilai angka 180 yang berada pada kotak di samping tulisan Width dengan nilai lebar yang di inginkan (dalam pixel)




    9. Pilih radio button No, di samping tulisan Show Screen Names. Sekali lagi pilih No jangan Yes karena inilah yang membuat muncul tulisan nama pengunjung




    10. Pilih radio button Half-Size, di samping tulisan Image Size




    11. Pilih angka yang di inginkan pada menu dropdown di samping tulisan Rows, sebaiknya 5 saja agar tidak terlalu berat witgetnya.




    12. Ganti tulisan Recent Readers di samping tulisan Title dengan kata yang sobat inginkan, misal : pembaca terbaru, yang mampir, yang lewat, atau apa saja




    13. KLik tombol Preview and Get Code




    14. Copy kode yang ada lalu paste pada notepad untuk nanti di masukan ke dalam blog sobat




    15. Selesai.




    Contoh hasil dari apa-apa yang saya terangkan coba lihat ke bagian samping kanan blog ini :



    Jika sobat menginginkan gambar yang terbentuk adalah berupa gambar yang memanjang dengan foto-foto dalam ukuran yang besar, sobat hanya harus melakukan settingan yang berbeda pada langkah yang ke 8, 10 serta yang ke 11. Untuk langkah yang 8 sobat harus setting dengan ukuran yang lebar, contoh 700 pixel (biasanya widget ini akan di simpan di bagian footer blog). Untuk langkah yang ke 10 sobat harus memilih yang Full-Size agar gambar yang terbentuk adalah dalam ukuran besar. untuk langkah yang ke 11 sobat sebaiknya memilih angka 2 saja agar gambar yang di tampilkan dua baris saja. Untuk melihat contoh, bisa di lihat di sini !



    Untuk memasukan kode mybloglog kedalam blog sobat, silahkan sobat baca kembali artikel yang terdahulu di sini ! dan satu catatan ringan saja akan tetapi sering di tanyakan adalah apabila sobat baru memasang widget mybloglog maka tidak akan terdapat photo-photo, photo-photo ini akan terbentuk apabila ada pengunjung blog sobat yang notabene sama-sama anggota dari mybloglog.



    semoga artikel ini dapat mewakili dari kepenasaranan sobat.



    Selamat mencoba !


    Sabtu, 08 September 2007

    Google Adsense


    Seiring dengan banyaknya pertanyaan seputar google adsense, mulai dari cara daftar, cara pemasangan kode dan lain sebagainya, maka mulai saat ini akan ikut memberikan informasi seputar google adsense.



    Apa itu Google Adsense ?



    Google adsense adalah salah satu program yang di miliki oleh Google dalam hal periklanan (advertising). Siapakah yang terlibat dalam Google adsense ini? ada tiga unsur yang terlibat, yaitu :




  • Google, merupakan pihak yang menerima iklan.



  • Advertiser, adalah pihak pemasang iklan.



  • Publisher, adalah pihak yang menampilkan iklan.




  • Yang akan saya bicarakan kali ini adalah kita sebagai pemilik blog menjadi seorang publisher atau dengan kata lain pihak yang menampilkan iklan dari google. Apa yang kita dapat dengan menjadi publisher dariGoogle adsense? yang akan kita dapatkan adalah komisi yang berupa uang dollar dari google.



    Bagaimana sistem kerjanya?



    Sistem kerjanya tidaklah sulit, kita hanya memasang kode-kode iklan yang di berikan oleh google pada blog milik kita.



    Jenis produk dari Google adsense :



  • Adsense For Content
  • , produk ini berupa iklan dalam bentuk teks ataupun gambar. Kita sebagai publisher akan mendapatkan komisi apabila ada pengunjung dari blog kita yang meng Klik iklan tersebut, semakin banyak pengunjung yang meng Klik maka semakin besar pula komisi yang kita dapatkan. Untuk melihat contoh nyata dari iklan adsense for content, sobat bisa melihatnya pada blog milik saya yang lain, coba klik di sini ! atau di sini !
    di sana sobat bisa melihat iklan berupa gambar (banner) ataupun berupa Link yang terdapat nama situsnya pada bagian bawah link tersebut.



  • Adsense For Search
  • , produk ini berupa Search Engine dari google, sobat bisa melihat contohnya pada bagian sebelah kanan atas blog ini. Untuk yang ini, kita akan mendapatkan komisi apabila ada pengunjung yang akan mencari sesuatu di web dan menggunakan Search Engine tersebut dan meng klik link situs yang ada.




  • Adsense For Referral
  • , untuk produk yang ini kita tidak akan di bayar apabila ada pengunjung yang mengklik iklan tersebut, akan tetapi kita akan mendapatkan komisi apabila ada orang yang menggunakan atau bergabung pada produk tersebut, contoh untuk download browser Fire Fox (bannernya nya ada di sebelah kanan atas blog ini), kita akan mendapatkan komisi apabila ada pengunjung yang mendownload serta memakainya di komputer mereka. Untuk Referral yang gabung Google adsense, kita akan di bayar sebesar $100 apabila orang yang bergabung tersebut mendapatkan $100 yang pertama dari google.



    Berapakah uang yang akan kita dapat dari Google ?



    Untuk besarnya uang yang akan kita dapat jumlahnya tidak di batasi, akan tetapi tentunya kembali lagi kepada faktor pengunjung blog kita, semakin banyak pengunjung maka semakin banyak pula kemungkinan orang akan mengklik iklan kita. jadi langkah pertama yang harus di tempuh adalah promosi dan promosikan blog milik sobat agar di kenal dan di kunjungi banyak orang. Sudah banyak publisher dari indonesia yang mendapatkan ratusan atau ribuan dollar setiap bulannya.



    Kapan kita di bayar oleh Google ?



    Kita akan di bayar oleh Google apabila pendapatan kita sudah mencapai minimal $100 setiap bulan nya, dan pembayarannya akan di lakukan setelah 30 hari setelah kita melewati pendapatan minimal $100 tersebut, jadi apabila bulan september ini sobat mendapatkan minimal $100 maka komisi ini akan di bayarkan pada akhir bulan oktober nanti.



    Dalam bentuk apa kita di bayar ?



    Seperti yang saya sebutkan di atas, kita akan di bayar oleh uang $ (dollar). Akan tetapi bukan berupa uang cash tapi dalam bentuk cek. Apabila sobat sudah mendapatkan $100, maka cek tersebut akan di antarkan ke kita. untuk cara pengirimannya ada dua yaitu melalui jasa pos dan menggunakan DHL (jasa pengiriman cepat). Apabila sobat memilih yang jasa pos, sobat tidak akan di kenakan biaya apapun oleh google akan tetapi cek akan sampai ke kita memerlukan waktu yang cukup lama yaitu sekitar tiga minggu sampai satu bulan. Apabila cek tersebut ingin cepat sampai di tangan kita, sobat bisa memilih yang melalui DHL, dengan menggunakan DHL cek akan sampai dalam waktu 2-3 hari, akan tetapi untuk yang DHL ini di kenakan biaya sebesar $24 dan akan di potong dari pendapatan kita.



    Siapakah yang boleh mengikuti Google Adsense ?



    Siapa saja boleh ikut dan yang menarik adalah daftarnya Gratis, akan tetapi ada syarat-syarat yang harus di penuhi di antaranya yaitu website atau blog yang ikut program ini harus berbahasa utama yang di support oleh Google yaitu bahasa inggris serta bahasa-bahasa eropa lainnya, untuk yang bahasa indonesia belum termasuk bahasa yang di support. Trus bagaimana kalo blog bahasa indonesia ingin bergabung? sebenarnya bisa saja di coba dan sudah banyak yang berhasil di terima oleh google, akan tetapi iklan yang bisa di tampilkan hanyalah produk adsense for search serta adsense for referral.Untuk adsense for content tidak akan muncul iklannya walau kode iklannya sudah kita pasang.



    Apa yang di larang dalam google adsense ?



    Apabila kita mengikuti program google adsense ada beberapa aturan yang tidak boleh di langgar diantaranya adalah kita tidak boleh meng Klik iklan sendiri ataupun menyuruh teman serta orang lain untuk mengkliknya (harus alami dhenk).
    darimana google mengetahui apabila kita yang mengklik iklan tersebut? tentunya google tidaklah bodoh, dia bisa melacak IP address serta faktor-faktor yang tidak kita pikirkan, jadi jangan coba-coba untuk berbuat curang karena akibatnya kita akan di keluarkan oleh google (mengerikan). Untuk membaca aturan-aturan penting lainnya sobat bisa membacanya langsung di sini !



    Artikel pertama tentang google adsense, saya cukupkan sekian dulu. Untuk cara daftar dan lain sebagainya tunggu saja pada artikel berikutnya.



    PS : yang mau daftar google adsense, silahkan klik pada banner di sebelah kanan atas blog ini.





    Jumat, 07 September 2007

    uniQue template R 1.1


    Setelah sekian lama saya tidak membuat template, akhirnya kemarin saya iseng-iseng membuat template lagi dan lumayan sudah ada satu yang jadi. Template ini saya berinama uniQue template R 1.1, namanya sekarang rada keren dikit di banding dengan template-template terdahulu. Sebelumnya saya ucapkan terima kasih kepada terune sasaq yang telah mengganti nama Template unik menjadi uniQue template. Setelah saya lihat-lihat ternyata boleh juga tuh idenya, thanks ya terune. Untuk melihat demo dari template ini, silahkan sobat klik pada gambar di bawah ini :

















    Menurut pengamatan saya pribadi, template ini lebih bagus dari template-template yang pernah saya buat. Disamping itu ada keunikan lainnya yaitu sidebar yang saya buat mempunyai lebih dari satu style, ada sidebar ukuran lebar serta sidebar ukuran sempit, yang ukuran lebarpun saya bagi dua kembali yaitu di tempatkan di bagian atas dan yang satunya saya tempatkan di bagian bawah. Template ini saya rasa sangat cocok bagi sobat yang ikutan program adsense karena tentu bisa memilih iklan yang lebar atau iklan yang sempit, kedua-duanya saya sediakan tempatnya. Selain itu, dalam pewarnaan tampaknya lebih cool alias kalem, sangat cocok bagi sobat yang tidak suka akan warna nge-jreng ( udah ah, ko jadi narsis ya ).




    Satu permintaan dari saya yaitu sobat jangan menghilangkan link yang ke template unik, karena saya banyak menjumpai para pemakai template buatanku menghapus semua link yang ada, jadi saya kira orang tersebut tidak mempunyai rasa terima kasih
    ataupun wujud apresisi terhadap jerih payah orang lain. untuk menu navigasi yang ada di header, yang itu silahkan sobat ubah, karena menu tersebut sengaja saya buatkan untuk sobat, jadi tidak ada masalah kalau yang ada di header ( weleh ko jadi marah-marah begini ).




    Agar marah-marahnya tidak berlanjut, bagi yang berminat silahkan download dulu tapi ingat ya sebelum di upload ke blogger, templatenya ekstrak dulu memakai Winzip. Silahkan klik di sini !




    Selamat mencoba template baruku !



    Kamis, 06 September 2007

    Tips menambah kolom pada template baru

    Karena banyaknya pertanyaan seputar bagaimana cara menambah kolom pada blog, akhirnya saya meluangkan waktu untuk menulis artikel ini. Sebenarnya untuk menambah sebuah kolom baru bukanlah sebuah hal yang terlalu sulit, akan tetapi tetap saja perlu sedikit pengetahuan untuk melakukannya.

    Pada kesempatan kali ini saya tidak akan menerangkan bagaimana cara membuat kolom dengan bantuan gambar, akan tetapi seperti biasa saya akan menggunakan template Minima yang merupakan template resmi yang di sediakan blogger yang notabene tidak menggunakan gambar.


    Jika mengacu kepada standarisasi dari template blogger, maka sebuah template akan mempunyai tiga elemen penting, yaitu :

  • Elemen Header

  • Elemen Outer

  • Elemen Footer


    Untuk elemen Outer di bagi kembali menjadi :

  • Elemen main, elemen main ini adalah elemen tempat kita menyimpan posting, jadi apabila kita memposting sebuah artikel maka akan masuk dan di tampilkan pada elemen ini

  • Elemen Sidebar, elemen sidebar ini adalah merupakan elemen untuk menyimpan berbagai blog tools ataupun aksesori yang kita inginkan untuk mempercantik blog.


    Akibat ketidak puasan dari sidebar yang hanya satu buah, maka jika kita menginginkan adanya sidebar tambahan maka kita tentu saja harus menambahnya sendiri, agar sedikit jelas maka akan saya perlihatkan kode template asli dari template minima (template baru/XML)






    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    &lt;html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'&gt;

    <head>

    <b:include data='blog' name='all-head-content'/>

    <title><data:blog.pageTitle/></title>

    <b:skin><![CDATA[/*

    -----------------------------------------------

    Blogger Template Style

    Name: Minima

    Designer: Douglas Bowman

    URL: www.stopdesign.com

    Date: 26 Feb 2004

    Updated by: Blogger Team

    ----------------------------------------------- */

    /* Variable definitions

    ====================

    <Variable name="bgcolor" description="Page Background Color"

    type="color" default="#fff" value="#ffffff">

    <Variable name="textcolor" description="Text Color"

    type="color" default="#333" value="#333333">

    <Variable name="linkcolor" description="Link Color"

    type="color" default="#58a" value="#5588aa">

    <Variable name="pagetitlecolor" description="Blog Title Color"

    type="color" default="#666" value="#666666">

    <Variable name="descriptioncolor" description="Blog Description Color"

    type="color" default="#999" value="#999999">

    <Variable name="titlecolor" description="Post Title Color"

    type="color" default="#c60" value="#cc6600">

    <Variable name="bordercolor" description="Border Color"

    type="color" default="#ccc" value="#cccccc">

    <Variable name="sidebarcolor" description="Sidebar Title Color"

    type="color" default="#999" value="#999999">

    <Variable name="sidebartextcolor" description="Sidebar Text Color"

    type="color" default="#666" value="#666666">

    <Variable name="visitedlinkcolor" description="Visited Link Color"

    type="color" default="#999" value="#999999">

    <Variable name="bodyfont" description="Text Font"

    type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">

    <Variable name="headerfont" description="Sidebar Title Font"

    type="font"

    default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">

    <Variable name="pagetitlefont" description="Blog Title Font"

    type="font"

    default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">

    <Variable name="descriptionfont" description="Blog Description Font"

    type="font"

    default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">

    <Variable name="postfooterfont" description="Post Footer Font"

    type="font"

    default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">

    */


    /* Use this with templates/template-twocol.html */


    body {

    background:$bgcolor;

    margin:0;

    color:$textcolor;

    font:x-small Georgia Serif;

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

    font-size: /**/small;

    text-align: center;

    }

    a:link {

    color:$linkcolor;

    text-decoration:none;

    }

    a:visited {

    color:$visitedlinkcolor;

    text-decoration:none;

    }

    a:hover {

    color:$titlecolor;

    text-decoration:underline;

    }

    a img {

    border-width:0;

    }


    /* Header

    --------------------------------------- */


    #header-wrapper {

    width:660px;

    margin:0 auto 10px;

    border:1px solid $bordercolor;

    }


    #header-inner {

    background-position: center;

    margin-left: auto;

    margin-right: auto;

    }


    #header {

    margin: 5px;

    border: 1px solid $bordercolor;

    text-align: center;

    color:$pagetitlecolor;

    }


    #header h1 {

    margin:5px 5px 0;

    padding:15px 20px .25em;

    line-height:1.2em;

    text-transform:uppercase;

    letter-spacing:.2em;

    font: $pagetitlefont;

    }


    #header a {

    color:$pagetitlecolor;

    text-decoration:none;

    }


    #header a:hover {

    color:$pagetitlecolor;

    }


    #header .description {

    margin:0 5px 5px;

    padding:0 20px 15px;

    max-width:700px;

    text-transform:uppercase;

    letter-spacing:.2em;

    line-height: 1.4em;

    font: $descriptionfont;

    color: $descriptioncolor;

    }


    #header img {

    margin-left: auto;

    margin-right: auto;

    }


    /* Outer-Wrapper

    ------------------------------------------ */

    #outer-wrapper {

    width: 660px;

    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;

    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 */

    }


    /* Headings

    ------------------------------------------- */


    h2 {

    margin:1.5em 0 .75em;

    font:$headerfont;

    line-height: 1.4em;

    text-transform:uppercase;

    letter-spacing:.2em;

    color:$sidebarcolor;

    }


    /* Posts

    ------------------------------------------ */

    h2.date-header {

    margin:1.5em 0 .5em;

    }


    .post {

    margin:.5em 0 1.5em;

    border-bottom:1px dotted $bordercolor;

    padding-bottom:1.5em;

    }

    .post h3 {

    margin:.25em 0 0;

    padding:0 0 4px;

    font-size:140%;

    font-weight:normal;

    line-height:1.4em;

    color:$titlecolor;

    }


    .post h3 a, .post h3 a:visited, .post h3 strong {

    display:block;

    text-decoration:none;

    color:$titlecolor;

    font-weight:normal;

    }


    .post h3 strong, .post h3 a:hover {

    color:$textcolor;

    }


    .post p {

    margin:0 0 .75em;

    line-height:1.6em;

    }


    .post-footer {

    margin: .75em 0;

    color:$sidebarcolor;

    text-transform:uppercase;

    letter-spacing:.1em;

    font: $postfooterfont;

    line-height: 1.4em;

    }


    .comment-link {

    margin-left:.6em;

    }

    .post img {

    padding:4px;

    border:1px solid $bordercolor;

    }

    .post blockquote {

    margin:1em 20px;

    }

    .post blockquote p {

    margin:.75em 0;

    }


    /* Comments

    -------------------------------------------- */

    #comments h4 {

    margin:1em 0;

    font-weight: bold;

    line-height: 1.4em;

    text-transform:uppercase;

    letter-spacing:.2em;

    color: $sidebarcolor;

    }


    #comments-block {

    margin:1em 0 1.5em;

    line-height:1.6em;

    }

    #comments-block .comment-author {

    margin:.5em 0;

    }

    #comments-block .comment-body {

    margin:.25em 0 0;

    }

    #comments-block .comment-footer {

    margin:-.25em 0 2em;

    line-height: 1.4em;

    text-transform:uppercase;

    letter-spacing:.1em;

    }

    #comments-block .comment-body p {

    margin:0 0 .75em;

    }

    .deleted-comment {

    font-style:italic;

    color:gray;

    }


    #blog-pager-newer-link {

    float: left;

    }



    #blog-pager-older-link {

    float: right;

    }


    #blog-pager {

    text-align: center;

    }


    .feed-links {

    clear: both;

    line-height: 2.5em;

    }


    /* Sidebar Content

    ------------------------------------------ */

    .sidebar {

    color: $sidebartextcolor;

    line-height: 1.5em;

    }


    .sidebar ul {

    list-style:none;

    margin:0 0 0;

    padding:0 0 0;

    }

    .sidebar li {

    margin:0;

    padding:0 0 .25em 15px;

    text-indent:-15px;

    line-height:1.5em;

    }


    .sidebar .widget, .main .widget {

    border-bottom:1px dotted $bordercolor;

    margin:0 0 1.5em;

    padding:0 0 1.5em;

    }


    .main .Blog {

    border-bottom-width: 0;

    }


    /* Profile

    ------------------------------------------- */

    .profile-img {

    float: left;

    margin: 0 5px 5px 0;

    padding: 4px;

    border: 1px solid $bordercolor;

    }


    .profile-data {

    margin:0;

    text-transform:uppercase;

    letter-spacing:.1em;

    font: $postfooterfont;

    color: $sidebarcolor;

    font-weight: bold;

    line-height: 1.6em;

    }


    .profile-datablock {

    margin:.5em 0 .5em;

    }


    .profile-textblock {

    margin: 0.5em 0;

    line-height: 1.6em;

    }


    .profile-link {

    font: $postfooterfont;

    text-transform: uppercase;

    letter-spacing: .1em;

    }


    /* Footer

    -------------------------------------------- */

    #footer {

    width:660px;

    clear:both;

    margin:0 auto;

    padding-top:15px;

    line-height: 1.6em;

    text-transform:uppercase;

    letter-spacing:.1em;

    text-align: center;

    }


    /** Page structure tweaks for layout editor wireframe */

    body#layout #header {

    margin-left: 0px;

    margin-right: 0px;

    }

    ]]></b:skin>



    </head>


    <body>

    <div id='outer-wrapper'><div id='wrap2'>


    <!-- skip links for text browsers -->

    <span id='skiplinks' style='display:none;'>

    <a href='#main'>skip to main </a> |

    <a href='#sidebar'>skip to sidebar</a>

    </span>


    <div id='header-wrapper'>

    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

    <b:widget id='Header1' locked='true' title='3 kolom (Header)' type='Header'/>

    </b:section>

    </div>



    <div id='content-wrapper'>


    <div id='crosscol-wrapper' style='text-align:center'>

    <b:section class='crosscol' id='crosscol' showaddelement='no'/>

    </div>


    <div id='main-wrapper'>

    <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'/>

    </div>


    <!-- spacer for skins that want sidebar and main to be the same height-->

    <div class='clear'>&#160;</div>


    </div> <!-- end content-wrapper -->


    <div id='footer-wrapper'>

    <b:section class='footer' id='footer'/>

    </div>


    </div>

    </div> <!-- end outer-wrapper -->


    </body>

    </html>






    Dari kode diatas, yang perlu di perhatikan adalah kode di sekitar Outer-Wrapper :


    /* Outer-Wrapper
    ------------------------------------------ */
    #outer-wrapper {
    width: 660px;
    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;
    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 */
    }


    Seperti saya singgung diatas bahwa Outer-Wrapper merupakan wadah untuk menyimpan main-wrapper serta sidebar-wrapper. Jadi jika kita ingin menambah kolom baru atau dengan kata lain sidebar baru, maka hal yang pertama wajib di lakukan adalah menambah nilai lebar dari Outer-wrapper itu sendiri.

    Sekarang bagaimanakah cara menambahkan kolom baru? Yang pertama harus di pikirkan adalah berapakah lebar kolom baru yang mau kita buat. Ok, biar sejalan saya ambil contoh lebar yang akan di buat adalah sebesar 180 pixel, jadi secara otomatis kita harus merubah lebar dari Outer-wrapper terlebih dahulu, sehingga secara kasar lebar outer-wrapper menjadi : 410 pixel + 220 pixel + 180 pixel + 20 pixel = 830 pixel, biar ada sedikt sela, maka kita tambah 10 pixel sehingga nilainya menjadi 840 pixel. Untuk menambah kode sidebar baru, saya beri contoh seperti ini :

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


    Maka apabila di tambahkan kodenya jadi 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;
    }



    Itu merupakan langkah pertama yang kita lakukan. langkah yang kedua adalah kita harus membuat kode yang di pasang pada bagian body. Sebagai contoh pada template diatas, kode id untuk sidebar adalah seperti ini :




    Maka kewajiban selanjutnya adalah memasang kode untuk id sidebarbaru yang akan kita buat, kodenya seperti ini :




    Apabila di padukan, simpanlah kode sidebaru di bawah kode sidebar yang asli, kodenya kira-kira seperti ini :






    Kolom baru yang kita buat sudah tercipta. Agar tampak lebih menarik, maka sebaiknya kita pun mengubah lebar dari header serta footer dengan nilai yang sama untuk Outer-wrapper yaitu sebesar 840 px.


    Masih bingung? 

    Agar tidak terlalu bingung, saya ajak sobat untuk mempraktekannya langsung. Silahkan sobat buat satu blog baru sebagai percobaan (jangan pada blog yang utama), pilihlah template minima yang biasa. Sudah siapkah sobat? Ok, kita langsung meluncur ke TKP dan saya asumsikan sobat sudah mempunyai satu blog baru sebagai bahan percobaan :



  • Sign in di blogger


  • Klik menu Layout


  • Klik menu Edit HTML


  • Ingat ! jangan memberi tanda centang pada kotak kecil di samping tulisan Expand Widget Template, sekali lagi jangan mencentangnya, karena jika sobat mencentangnya nanti akan keluar kode-kode widget yang memusingkan kepala.


  • Cari kode seperti di bawah ini :





  • ganti nilai 660px dengan 840px, sehingga kodenya jadi seperti ini :






  • Cari kode seperti di bawah ini :





  • ganti nilai 660px menjadi 840px, sehingga kodenya menjadi seperti ini :





  • cari kode seperti di bawah ini :





  • Copy paste kode berikut persis di bawah kode yang seperti di atas :






  • Cari kode seperti di bawah ini :






  • Ganti nilai 660px menjadi 840 px, sehingga kodenya akan seperti ini :






  • Cari kode seperti di bawah ini :





  • Copy kode berikut, lalu paste persis di bawah kode yang seperti di atas :





  • Klik tombol Simpan Template


  • Selesai.

    Untuk melihat efek hasilnya, silahkan klik Elemen Halaman apakah sudah berformasi tiga kolom atau belum? jika sudah, silahkan isi sidebar tersebut dengan apa saja lalu lihatlah hasil nyatanya.

    Langkah-langkah di atas merupakan metoda dasar saja, untuk menambahkan variasi lain, sobat memerlukan pengetahuan serta kretifitas. Agar sobat yakin dengan apa yang saya terangkan, sobat bisa melihat contoh yang sudah jadi, silahkan klik di sini !

    Eh kunjungi juga ya blog baruku, coba klik di sini !

    Selamat berexperimen !