Minggu, 30 September 2007

Horizontal Blue Menu Navigation


Ada suka memasang menu navigasi di header? yang satu ini boleh untuk
di jadikan pilihan.Blue menu navigatioan, biru is my color. Penasaran
ingin melihat seperti apa tampilan menu navigasi ini, silahkan klik
pada tombol di bawah ini :





klik di sini



Bagaimana menurut sobat akan tampilan menu navigasi ini? tertarik? silahkan
ikuti cara instalasinya di sini !



Selamat mencoba !


uniQue Template R 1.3


Ada yang suka gelap? jika ada, saya sudah buatkan yang satu nih, hitam.
Black is macho, begitu katanya bagi yang sangat menggemarinya. Dari segi desain,
template ini tidak ada yang beda dengan pendahulunya yaitu uniQue template R 1.2,
yups... cuma beda warna. Lumayan buat sobat yang masih bingung otak-atik warna sudah
tidak perlu lagi berpuyeng ria karena sudah saya buatkan untuk sobat.

Untuk melihat demo, silahkan klik pada gambar di bawah :





uniQue template R 1.3





Yang mau download, silahkan klik di sini !



Sebelum di upload ke blogger, jangan lupa untuk mengekstrak terlebih dahulu dengan software winzip.



Selamat berdownload ria !




Sabtu, 29 September 2007

Sisipkan Icon di View Profile



Jika pada postingan yang lalu telah di bahas bagaimana cara
menyisipkan mini icon pada label(kategory), maka pada kesempatan
kali ini akan coba di bahas tentang cara menyisipkan mini icon di
View My Complete Profile atau Lihat Profile Lengkap Saya.
Memang sebenarnya tidak terlalu penting, akan tetapi lumayan untuk
pemanis blog kita agar tampil sedikit lebih cantik dari sebelumnya.




Seperti biasa, sobat terlebih dahulu harus sudah mengupload mini icon
yang akan di pasang pada hosting tempat menyimpan gambar, kemudian
catat alamat gambar tersebut, misal saya telah mengupload sebuah mini
icon dan telah mempunyai lamat gambar alamat sebagai berikut :




http://24rohman.googlepages.com/icon_user.gif





Agar gambar tersebut bisa tampil, maka harus di tambah kode untuk memangilnya,
kodenya jadi seperti ini :




<img src='http://24rohman.googlepages.com/icon_user.gif'/>





Icon ini mempunyai gambar seperti ini :







Sebagai catatan saja bahwa tutor kali ini khusus bagi sobat yang memakai template baru.
Untuk menyisipkan mini icon pada View My Complete Profile, sebelumnya sobat
harus sudah menampilkan profile di blognya. Silahkan ikuti langkah-
langkah berikut ini:




  1. Sign in di blogger.




  2. Klik menu Layout.




  3. Klik menu Edit HTML.




  4. Klik tulisan Download Template Seluruhnya, silahkan save dulu untuk backup data.




  5. Klik kotak kecil di samping tulisan Expand Widget Template.




  6. Tunggu beberapa saat sampai proses selesai.




  7. Cari kode seperti ini :




  8. <b:if cond='data:aboutme != ""'>


    <dd class='profile-textblock'><data:aboutme/>


    </dd>


    </b:if>

    </dl>

    <a class='profile-link' expr:href='data:userUrl'>


    <data:viewProfileMsg/></a>

    </b:if>


  9. Sisipkan kode icon seperti kode di bawah ini :


  10. <b:if cond='data:aboutme != ""'>


    <dd class='profile-textblock'><data:aboutme/>


    </dd>


    </b:if>

    </dl>

    <a class='profile-link' expr:href='data:userUrl'>


    <img src='http://24rohman.googlepages.com/icon_user.gif'/>&#160;


    <data:viewProfileMsg/></a>

    </b:if>





  11. Klik tombol SIMPAN TEMPLATE.




  12. Selesai.






Untuk melihat contoh silahkan sobat klik di sini !



Selamat mencoba !



Revisi Blue Lover Template


Setelah saya melakukan blogwalking beberapa hari yang lalu,
saya menjumpai ada yang memakai templateku yaitu Blue Lover Template,
eh setelah saya perhatikan ada pemandangan yang kurang mengasyikan yaitu
pada bagian label serta bagian arsip ada tulisan yang terpotong, iya benar-benar terpotong
sehingga tidak dapat terbaca. Ada yang salah dengan rancanganku uy...




Bagi sobat yang sudah terlanjur memakai template ini, ada revisi nih dari saya.
Ada sedikit kode yang harus di tambahkan pada template sobat, silahkan untuk
mengikuti langkah-langkah berikut ini :




  1. Sign in di blogger




  2. Klik menu Layout




  3. Klik menu Edit HTML




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




  5. Cari kode seperti ini :




  6. /* Sidebar Content

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

    .sidebar {

    color: $sidebartextcolor;

    line-height: 1.5em;

    background: $sidebarBgcolor;

    padding:5px;

    }


    .sidebar ul {

    list-style:none;

    margin:0 0 0;

    padding:0 0 0;

    background: $sidebarBgcolor;

    }

    .sidebar li {

    margin:0;

    text-indent:-15px;

    line-height:1.5em;

    }


    .sidebar .widget{

    padding:0 0 0em;

    margin:0 0 1.5em;

    }



  7. Selipkan kode yang dicetak merah seperti contoh berikut :

  8. /* Sidebar Content

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

    .sidebar {

    color: $sidebartextcolor;

    line-height: 1.5em;

    background: $sidebarBgcolor;

    padding:5px;

    }


    .sidebar ul {

    list-style:none;

    margin:0 0 0;

    padding:0 0 0;

    background: $sidebarBgcolor;

    }

    .sidebar li {

    margin:0;

    text-indent:-15px;

    line-height:1.5em;

    padding:0 0 .25em 15px; /* ini kode tambahannya */

    }


    .sidebar .widget{

    padding:0 0 0em;

    margin:0 0 1.5em;

    }


  9. Klik tombol Simpan Template




  10. Selesai.





Bagi sobat yang akan memakai template ini, jangan kawatir karena sudah saya
perbaiki, silahkan bagi yang berminat untuk mendownloadnya di sini !
tapi jangan lupa di ektrak dulu pake winzip sebelum di upload ke blogger ya.


Kamis, 27 September 2007

Ganti Warna Sidebar Minima



Adakah diantara sobat pecinta template minima? jawabannya kemungkinan banyak, diantaranya
adalah sobat junyan. Di balik kecintaannya terhadap template minima, ada sedikit keinginan
yang masih belum bisa di lakukan yaitu mengubah warna kolom sidebar agar tidak sama dengan
warna kolom posting. Memang jika sobat merujuk kepada kode asli dari template tersebut, walhasil
tidak akan bisa membuat keduanya berbeda warna karena memang di desain untuk satu warna.
Apabila sobat ingin merubahnya tentu saja itu bisa di lakukan dan saya kira tidaklah terlalu
sulit untuk melakukannya.




Karena saat ini template minima masih terbagi dua yaitu minima klasik dan minima baru maka
akan saya coba bahas satu persatu. Sebai catatan yaitu template yang di gunakan adalah template minima
berwarna putih.



  • Minima Klasik




  • Untuk merubah warna kolom sidebar minima, silahkan cari kode seperti di bawah ini :



    /* Content

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

    @media all {

    #content {

    width:660px;

    margin:0 auto;

    padding:0;

    text-align:left;

    }

    #main {

    width:410px;

    float:left;

    }

    #sidebar {

    width:220px;

    float:right;

    }

    }




    Agar warna sidebar bisa berubah warna, sobat tinggal menyisipkan kode warna yang di inginkan, contoh
    warna krem :



    background:#f5ede3;



    Agar tulisan yang ada di sidebar tidak terlihat menabrak dinding sidebar, sobat bisa memberi sedikit
    sentuhan dengan menambahkan kode padding, misal :



    padding : 7px;



    Maka apabila kode-kode diatas di sisipkan pada kode kolom sidebar, maka kodenya akan jadi seperti ini :



    /* Content

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

    @media all {

    #content {

    width:660px;

    margin:0 auto;

    padding:0;

    text-align:left;

    }

    #main {

    width:410px;

    float:left;

    }

    #sidebar {

    width:220px;

    float:right;

    background:#f5ede3; /*ini kode tambahannya */

    padding:7px;/*ini kode tambahannya */

    }

    }




    Sangat mudah bukan? tidak terlalu banyak kode yang harus di tambahkan. Bagaimana apabila
    kolom posting ingin di beri warna juga? sobat hanya tinggal menyisipkan kode warna diantara
    kode posting, yaitu bagian #main;


    #main {

    width:410px;

    float:left;

    background:#f5ede3; /* ini kode tambahannya */

    padding:7px;/* ini kode tambahannya */

    }




  • Minima baru





  • Untuk template baru, ada sedikit perbedaan dalam hal pewarnaan yaitu memakai variable
    warna. Dengan adanya variable warna maka si pemakai template dapat mengubah warna secara
    praktis di bagian menu Font dan Warna. Contoh variable warna dari template minima
    seperti ini :





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

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







    Tugas dari sobat adalah membuat variable baru, terserah namanya apa, akan tetapi di sarankan
    untuk membuat nama variable dengan yang mudah di ingat. Masih bingung? silahkan ikuti langkah berikut ini:




    Sisipkan kode berikut diantara kode variable :




    <Variable name="sidebarbgcolor" description="Warna background sidebar"

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







    Tambahkan kode berikut pada kode untuk kolom sidebar, yang warna merah adalah kode yang harus di tambahkan :



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

    background:$sidebarbgcolor; /* ini kode tambahannya */

    padding: 7px; /* ini kode tambahannya */

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

    }





    Jika penambahan kode sudah selesai, jangan lupa untuk menekan tombol Simpan Template.
    Bagaimana jika kolom posting juga ingin berwarna? seperti yang tadi juga, silahkan buat variable warna
    dan sisipkan kode diantara kode kolom posting. Trus bagaimana apabila kolom sidebarnya ada dua? sama
    saja, tinggal buat variable, kemudian sisipkan kode tambahan pada sidebar yang satunya lagi.



    Sedikit tambahan, sebenarnya untuk variable warna bisa juga tidak usah dibuat. Caranya sobat langsung
    menuliskan kode warnanya pada kode sidebar, contoh :



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

    background:#e6e6e6; /* ini kode tambahannya */

    padding: 7px; /* ini kode tambahannya */

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

    }





    Akan tetapi apabila kode warna langsung di pasang seperti itu maka pada menu Font dan Warna,
    warna tersebut tidak bisa di ubah-ubah.



    mau melihat contoh sidebar minima yang punya warna berbeda, silahkan klik di sini !



    selamat mencoba !



    Buat Frame Iklan


    Sobat fajar widodo rupanya tertarik untuk mengetahui bagaimana
    cara membuat frame seperti frame iklan yang ada di blog ini. Apakah sobat juga
    sama tertarik untuk membuat frame tersebut? baca saja sampai akhir,
    saya akan memberitahu caranya.




    Untuk membuat frame seperti itu banyak cara yang bisa di tempuh, diantaranya bisa
    menggunakan kode HTML <div>
    atau bisa juga dengan menggunakan kode HTML <span>.
    Langkah yang harus di persiapkan adalah tentukan dahulu lebar, warna latar belakang,
    warna huruf, jenis huruf, besarnya huruf, serta hal lain yang sekiranya berhubungan. Agar lebih
    mudah untuk di mengerti, saya buatkan sebuah contoh frame sebagai berikut:




    Belajar membuat website »

    Membuat website itu sangatlah mudah, dapatkan panduannya di sini ! ditunjang berbagai software & full support. daftar segera !!

    http://www.resepbisnis.com/?id=rohman





    Kode asli dari frame di atas adalah sebagai berikut :






    <div style="border: 3px dashed red; background: #005af5; padding:10px; width:330px; text-align:left; color:white;">

    <a style="font-size: 17px;COLOR: yellow; text-decoration:none;" href="http://kolom-tutorial.blogspot.com/2007/07/perkenalkan-situs-wwwresepbisniscom.html" title="klik di sini"><b>Belajar membuat website </b></a> &raquo;<br/>

    Membuat website itu sangatlah mudah, dapatkan panduannya di sini ! ditunjang berbagai software & full support. daftar segera !!<br/>

    <a style="color:yellow; font-size:12px; text-decoration:none;" href="http://kolom-tutorial.blogspot.com/2007/07/perkenalkan-situs-wwwresepbisniscom.html" title="klik di sini"><b>http://www.resepbisnis.com/?id=rohman</b></a>

    </div>






    Jika saya membuat spesifikasi pada frame iklan di atas, maka akan seperti ini :



    warna pembatas : merah

    style dari pembatas : garis putus-putus dengan lebar 3 pixel

    jarak hurup dengan batas terluar : 10 pixel

    lebar frame: 330 pixel

    posisi hurup : rata kiri

    warna hurup : putih

    warna latar belakang : biru

    warna link : kuning




    Bagaimana sudah agak faham? kemungkinan besar masih bingung deh.
    Agar lebih mudah cobalah sobat otak-atik sendiri kode di atas, saya
    sedikit malas untuk menerangkan secara terperinci dari kode yang
    saya buat.



    ooo... iya lupa... sobat fajar widodo lebih spesifik menanyakan kode untuk
    membuat garis putus-putus. Untuk garis putus-putus perintahnya seperti ini :



    border : 3px dashed red;



    3px menandakan lebar dari garis, dashed berarti garis putus-putus, red adalah kode warna merah.



    Ada juga style yang lain yaitu berupa garis berbentuk garis yang solid ada juga yang berupa titik-titik.



    border : 3px dashed red; --> untuk garis solid

    border : 3px dotted red; --> untuk garis berupa titik-titik




    Sepertinya cukup dulu deh, silahkan untuk bereksperimen menciptakan variasi-variasi baru
    dari bentuk frame. Salam !


    Rabu, 26 September 2007

    Pasang Kode Adsense Untuk Konten



    Jika beberapa waktu yang lalu saya telah memposting artikel yang
    memuat kiat-kiat agar lebih mudah untuk di terima oleh google adsense,
    maka pada kesempatan kali ini akan mencoba membahas tentang bagaimana
    menempatkan kode iklan "Adsense Untuk Konten " (adsense for content)
    pada blog.



    Berbicara mengenai cara pemasangan kode iklan, maka sudah barang tentu sobat harus
    sudah di terima oleh Google Adsense sebagai mitra kerjanya. Bagi sobat yang
    masih belum di terima, maka menurut saya kata sabar adalah yang paling tepat untuk
    di ucapkan dan di laksanakan. Jika masih belum di terima,
    cobalah untuk
    memperhatikan isu yang di angkat oleh google pada surat penundaan penerimaan keanggotaan
    sobat, apakah isu bahasa yang belum di support oleh adsense? isi blog yang susah di navigasikan
    atau alasan lainnya? maka segeralah untuk memperbaikinya, dan apabila sudah merasa yakin telah
    memenuhi kriteria yang ada maka cobalah untuk submit kembali blognya ke google adsense.



    Kembali kepada topik bahasan utama seperti yang telah di katakan di awal yaitu mengenai
    pemasangan kode iklan "Adsense Untuk Konten", sobat bisa melakukannya
    dengan beberapa cara yaitu di antaranya adalah dengan mengambil kode langsung dari situs
    Google Adsense atau bisa juga langsung dari account Blogger tanpa harus
    mengunjungi Google adasense. Untuk cara yang pertama yaitu mengambil langsung kode iklan
    dari situs Google Adsense, silahkan untuk mengikuti langkah-langkah berikut ini :




    1. Silahkan kunjungi situs google adsense
      atau klik saja di sini !




    2. Login dengan menggunakan username serta password sobat




    3. Klik tab Konfigurasi Adsense




    4. Klik Adsense untuk Konten




    5. Beri tanda pada tombol radio di samping tulisan Unit Iklan




    6. Klik pada menu dropdown yang ada di sampingnya, pilih iklan apa yang mau tampil di blog sobat :





      • Iklan teks dan gambar (default) : iklan yang akan muncul berupa iklan yang berbentuk teks atau bisa juga
        berbentuk gambar (banner)



      • Hanya iklan teks : pilihan ini khusus untuk menampilkan iklan dalam bentuk teks



      • Hanya iklan gambar : jika iklan yang mau muncul berupa iklan gambar (banner) saja






    7. Klik tombol Lanjutkan >> yang berada di sebelah kiri bawah layar monitor




    8. Klik menu dropdown yang ada di sebelah atas untuk menentukan ukuran dari iklan




    9. Aturlah warna sesuai dengan keinginan sobat, klik pada kotak masing-masing





      • Garis Tepi : warna dari garis tepi



      • Judul : warna hurup judul iklan



      • Background : warna latar belakang iklan



      • Teks : warna hurup isi iklan



      • URL : warna hurup alamat situs si pemasang iklan





    10. Klik pada menu dropdown untuk memilih gaya sudut





      • Sudut bujur sangkar : bentuk iklan berbentuk kota



      • Sudut sedikit membulat : bentuk iklan pojoknya membentuk bulatan kecil



      • Sudut yang sangat membulat : bentuk iklan yang tampil berbentuk membulat (rounders), ini cocok bagi yang
        yang memakai template dalam bentu bulat (Rounders)






    11. Klik pada tombol radio untuk memilih tampilan apabila tidak iklan yang bisa di tampilkan





      • Tampilkan iklan layanan masyarakat : yang akan tampil adalah berupa iklan layanan masyarakat



      • Menampilkan iklan non-Google dari URL lain : yang akan di tampilkan adalah bukan iklan dari google



      • Isi ruang dengan warna solid : akan di timpah dengan warna yang di pilih





    12. Klik tombol Lanjutkan >>




    13. Klik link Tambahkan channel baru




    14. Masukan nama channel yang di inginkan, contoh : kolom tutorial. Kemudian klik tombol Ok




    15. Klik tombol Lanjutkan




    16. Copy seluruh kode yang di berikan, lalu paste pada notepad untuk keperluan nanti di pasang di blog




    17. Selesai.





    Untuk langkah pertama yaitu pengambilan kode iklan dari Google adsense telah selesai, langkah selanjutnya
    adalah memasang pada blog sobat, silahkan ikuti langkah berikut ini :




    1. Sign in di blogger dengan id sobat




    2. Klik menu layout




    3. Klik menu Elemen Halaman




    4. Klik tulisan Tambahkan sebuah lemen Halaman




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




    6. Copy kode yang ada di notepad tadi, kemudian paste pada kolom elemen yang muncul




    7. Klik tombol Simpan perubahan




    8. Klik pada elemen yang baru di buat, tahan lalu pindahkan pada tempat yang di inginkan (di drag & dropt),
      lalu klik tombol SIMPAN yang berada di sebelah atas




    9. Selesai.







    Pembahasan mengenai cara memasang iklan yang langsung diambil dari Google Adsense di rasa sudah cukup, untuk yang lain-lain
    akan di bahas pada artikel berikutnya.




    PS : bagi yang belum daftar, cepetan daftar. Klik pada banner di sebelah kanan atas.





    Cara Menghilangkan Navbar Blogger


    Sobat Ihsan mengajukan pertanyaan yang di tulis melalui shoutbox. Beliau menanyakan bagaimana cara menghilangkan Navbar Blogger, dan kali ini saya akan mencoba membahasnya. Apa itu Navbar Blogger? navbar blogger adalah
    suatu frame yang berukuran kecil miliknya blogger yang terdapat di bagian atas
    blog. frame ini berfungsi untuk login ke blogger atau bisa juga sebagai jalan untuk
    melihat blog lain atau bisa juga untuk menandai blog yang sekiranya melanggar TOS
    blogger seperti blog yang mengandung unsur SARA ataupun pornografi untuk dilaporkan
    ke pihak blogger.




    Apakah kita bisa menghilangkan Navbar Blogger? jika pertanyaannya seperti itu maka
    tentu jawabanya adalah bisa, akan tetapi sebelum menghilangkan navbar tersebut ada
    baiknya sobat berfikir-fikir dahulu dan silahkan baca TOS blogger secara seksama,
    karena resiko yang akan di pikul sangatlah berat yaitu akan di tutupnya account
    blogger sobat atau dengan kata lain sobat akan kehilangan blog kesayanangannya.
    Lumayan mengerikan bukan? memang beberapa waktu yang lalu tersiar kabar bahwa pernah
    ada yang menanyakan ke pihak blogger apakah boleh menghilangkan navbar blogger atau tidak? dan katanya sekarang pihak blogger membolehkan untuk menghapus navbar, tapi entahlah apakah berita tersebut benar atau tidak yang jelas sobat harus selalu membaca TOS secara seksama.



    Masih bersikeras untuk menghilangkan navbar blogger? jika masih akan saya beritahu, akan tetapi resiko di tanggung masing-masing, saya tidak bertanggung jawab jika di kemudian hari terjadi sesuatu dengan blog sobat.



    Untuk menghilangkan navbar blogger, sobat tinggal menambahkan kode di bawah ini pada
    style sheet CSS :






    /* hilangkan navbar

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



    #navbar-iframe {

    height:0px;

    visibility:hidden;

    display:none

    }




    Atau bisa juga menaruh kode berikut persis di bawah kode <body> :




    <style type='text/css'>

    #navbar-iframe {display:none;}

    </style>




    Mau pilih yang mana? keduanya mempunyai fungsi yang sama yaitu menghilangkan navbar blogger. Masih bingung juga
    dalam pemasangan kode di atas? silahkan ikuti langkah-langkah berikut ini :



  • Untuk template klasik





    1. Sign in di blogger




    2. Klik menu Template




    3. Klik menu Edit HTML




    4. Copy seluruh kode yang ada lalu save di komputer sobat sebagai backup data agar aman




    5. Copy kode berikut lalu paste di atas kode </style>





    6. /* hilangkan navbar

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



      #navbar-iframe {

      height:0px;

      visibility:hidden;

      display:none

      }




    7. Klik tombol Simpan Perubahan Template




    8. Selesai.









  • Untuk template baru





    1. Sign in di blogger




    2. Klik menu Layout




    3. Klik menu Edit HTML




    4. Klik link bertuliskan Download Template Seluruhnya, silahkan save dulu untuk backup data




    5. Copy kode berikut lalu paste di atas kode ]]></b:skin>





    6. /* hilangkan navbar

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



      #navbar-iframe {

      height:0px;

      visibility:hidden;

      display:none

      }




    7. Klik tombol Simpan Template




    8. Selesai.






    Selamat menikmati blog tanpa navbar !


    Senin, 24 September 2007

    Membuat Readmore (3)

    Melihat dari banyaknya komentar yang di ajukan pada artikel tentang
    cara memotong artikel atau lebih di kenal dengan Read more...,
    maka sayapun tertarik untuk membahasnya kembali. Bagi sobat yang belum pernah
    membacanya, silahkan baca di sini, karena jika sobat belum membacanya
    maka ketika membaca artikel ini terasa tidak ada kaitannya.




    Memang ada sebagian orang merasa puas karena telah menemukan artikel tentang
    cara membuat menu Read more... yang saya tulis karena setelah di praktekan hasilnya
    sangat memuaskan alias berhasil mulus, tapi ada juga yang merasa sedikit jengkel karena
    menurut perasaan mereka telah mengikuti seluruh langkah-langkah yang saya tulis tapi
    hasilnya nihil alias tidak berhasil. Dan ada juga sebagian yang merasa jengkel karena
    telah mengikuti apa yang saya tulis, ini di akibatkan katanya setelah mengikuti apa-apa yang saya
    saya tulis seluruh postingannya menjadi hilang entah kemana.



    Fenomena yang cukup menarik, satu sumber tulisan akan tetapi hasilnya bisa bervariasi.
    Tapi jangan terburu berkecil hati, saya pun di dalam belajar nge-blog tidak sekonyong-konyong
    berhasil dan tidak sekonyong-konyong menjadi pintar, semua ada prosesnya. Dan satu lagi kabar
    gembira bagi sobat yang belum berhasil membuat menu Read more... dulu sayapun pernah
    mengalaminya dan sayapun pernah juga mengalami kehilangan seluruh postingan saya setelah
    membuat menu Read more..., akan tetapi justru karena kegagalan-kegagalan tersebutlah
    yang membuat saya lebih bersemangat untuk terus belajar, saya mempunyai prinsip yaitu apabila
    orang lain bisa kenapa saya tidak bisa, dan itulah yang menjadi cambuk untuk terus belajar dan belajar,
    dan sampai detik inipun saya masih tetap belajar.



    Kembali kepada masalah Read more.., walaupun masih banyak yang belum berhasil alias gagal
    ketika membuat menu Read more.. pada postingan, saya masih tetap yakin apabila sobat
    mengikuti secara benar maka hasilnya akan sukses, ini pernah terbukti ada seorang sobat ketika
    Chatting melalui Yahoo ! Messenger bersikeras tidak berhasil walaupun telah mengikuti apa yang
    saya tulis. Weks... saya juga bingung atuh kalau sudah mengikuti sesuai yang di tulis tapi tetap
    tidak berhasil. Akhirnya jalan terakhir saya gunakan yaitu sobat tersebut saya suruh mengganti password
    untuk login ke blogger lalu kemudian password baru tersebut di berikan kepada saya dengan perjanjian
    bahwa sobat saya harus percaya bahwa saya tidak akan mengacak-acak isi blog nya. Setelah saya login
    ke blog teman saya tersebut ternyata benar saja bahwa beliau ini tidak mengikuti seluruh yang saya
    tulis, kemudian saya tambahkan kode Read more.. nya dan berhasil dengan waktu yang relatif singkat.
    Setelah itu saya beritahukan bahwa sudah berhasil dan password yang baru untuk login di minta untuk
    di ubah kembali agar saya pun tidak mengetahuinya. Jadi kesimpulan sementara yaitu sobat yang belum berhasil,
    kemungkinan ada kode yang telewatkan.



    Baiklah... kembali ke topik awal yaitu tentang menu Read more..., agar sedikit mengerti akan saya
    tuliskan kode dasar dari posting, yaitu :







    <div class='post-body'>

    <p><data:post.body/></p>

    <div style='clear: both;'/> <!-- clear for photos floats -->

    </div>








    Perhatikan baik-baik kode di atas, itu merupakan kode asli dari template sobat sebelum di otak-atik.
    Jika sobat mengikuti langkah-langkah yang pernah saya tulis, maka kode nya akan berubah seperti ini:







    <div class='post-body'>


    <b:if cond='data:blog.pageType == "item"'>

    <style>.fullpost{display:inline;}</style>

    <p><data:post.body/></p> <!-- satu -->

    <b:else/>

    <style>.fullpost{display:none;}</style>


    <p><data:post.body/></p> <!-- dua -->


    <a expr:href='data:post.url'>Read more.....</a>

    </b:if>


    <div style='clear: both;'/> <!-- clear for photos floats -->

    </div>








    Kode di atas sengaja di bedakan warnanya, warna biru merupakan kode asli dari template,
    warna merah merupakan kode yang harus di tambahkan. Yang perlu sobat hati-hati adalah kode ini :





    <p><data:post.body/></p>







    Kode di atas harus di pastikan ada dua tidak boleh ada satu karena jika ada satu maka postingan
    sobat bisa hilang semuanya, akan tetapi sebenarnya seluruh postingan tidak hilang, akan tetapi
    tidak di perlihatkan alias di sembunyikan. Postingan di perlihatkan dan di sembunyikan karena
    kode :





    <style>.fullpost{display:inline;}</style>




    <style>.fullpost{display:none;}</style>








    {display:inline;}
    artinya di tampilkan, dan

    {display:none;}
    artinya jangan di tampilkan alias sembunyikan dan kode inilah apabila
    salah pemasangan mengakibatkan semua postingan menjadi tidak di tampilkan, jadi apabila di satukan
    dari seluruh kode, maka kira-kira seperti ini :



    Tampilkan postingan



    Jangan tampilkan postingan



    Tampilkan postingan apabila di klik link Read more...





    Langkah yang tak kalah pentingnya yaitu sobat harus memasang kode Readmorenya pada tab Edit HTML
    jangan pada tab Compose, serta kode Read more... harus selalu di tutup. Contoh pemasangan
    kode read more... pada artikel seperti ini :



    Ini adalah tulisan pada paragrap pertama yang akan muncul di halaman muka blog, paragrap - paragrap
    lainnya akan muncul apabila pengunjung blog meng klik link untuk membuka keluruhan artikel.



    <div class="fullpost">




    Paragrap yang kedua, ketiga dan seterusnya harus di tempatkan di sini, jangan di tempatkan
    sebelum kode readmore, jangan lupa untuk menutup kodenya ya..




    </div>






    Maka nanti yang akan muncul hanyalah paragrap atasnya saja yakni seperti ini :



    Ini adalah tulisan pada paragrap pertama yang akan muncul di halaman muka blog, paragrap - paragrap
    lainnya akan muncul apabila pengunjung blog meng klik link untuk membuka keluruhan artikel.


    Read more...





    Sudah lebih fahamkah? bagi sobat yang belum berhasil ada baiknya untuk mencobanya kembali.
    Satu hal yang harus sobat ingat yaitu selalu membuat backup data template sebelum mencoba otak-atik kode
    template, karena jika terjadi kesalahan semisal seluruh postingan menghilang maka jangan bingung
    dan merasa panik, sobat tinggal Upload kembali backup data template yang sudah di simpan
    pada komputer kita sebelum melakukan otak-atik, dan hasilnya nanti akan sedia kala seperti sebelum
    sobat melakukan edit kode template. Jadi jangan pernah jera untuk mencobanya. Mau mencoba kembali?
    silahkan baca langkahnya di sini !


    Kamis, 20 September 2007

    Sisipkan Mini icon pada Label


    Sebagaimana janji saya terdahulu bahwa akan memposting tentang bagaimana memasang mini icon pada blog, dan kali ini saya khususkan untuk menyisipkan mini icon pada Label atau kategori blog. Satu yang perlu di ketahui yaitu
    postingan ini di khususkan bagi sobat yang memakai template baru saja, untuk yang klasik tentu saja tidak perlu bersusah payah karena untuk label sama seperti membuat link biasa.




    Karena pada postingan yang lalu telah saya informasikan situs penyedia layanan mini icon, maka sekarang saya asumsikan sobat telah mempunyai mini icon yang telah di upload di hosting. Sebagai contoh saya telah mengupload sebuah mini icon dan mempunyai alamat gambar sebagai berikut :



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



    dan agar gambar tersebut tampil, maka kita perlu memanggilnya, kodenya seperti ini :




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




    gambarnya seperti ini :



    folder gift



    Agar icon dengan tulisan tidak terlihat berdempetan, maka sobat bisa menambahkan efek spasi dengan menyelipkan kode :



    &#160;



    kode di atas adalah khusus di pakai pada saat edit template XML, karena apabila pada format HTML memakai kode :



    &nbsp;



    Bagaimana bingungkan? sama kalau begitu, saya juga sedikit bingung. Ini saya sampaikan dengan tujuan agar nantinya lebih mudah di mengerti. Dan sebagai catatan, sebelum sobat mempraktekan langkah di bawah sobat harus sudah mempunyai postingan yang di beri label / kategori. Langsung saja, untuk menyelipkan mini icon pada label /kategori silahkan ikuti langkah-langkah berikut ini :




    1. Sign in di blogger




    2. Klik menu Layout




    3. Klik menu Edit HTML




    4. Klik link Download template, save dulu untuk di jadikan backup agar aman




    5. Beri tanda centang pada kotak kecil di samping tulisan Expand Widget Template, sekali lagi jangan lupa beri tanda centang dulu yah, sebab kalau tidak, nanti akan tidak sesuai dengan langkah selanjutnya




    6. Cari kode seperti berikut :





    7. <a expr:href='data:label.url'>

      <data:label.name/>

      &#160; (<data:label.count/>)</a>




    8. Sisipkan kode mini icon nya sehingga kodenya jadi seperti ini :





    9. <a expr:href='data:label.url'>

      <img src="http://amen24.googlepages.com/folder.gif"/> &#160;

      <data:label.name/>

      &#160; (<data:label.count/>)</a>




    10. Klik tombol Simpan Template




    11. Selesai.




    Jika sobat telah menyisipkan kode tersebut, maka setiap label akan tedapat mini icon nya. Mau melihat contoh nyata? silahkan kunjungi http://template-unik.blogspot.com.



    Selamat mencoba !


    uniQue Template R 1.2


    Ada yang suka warna biru? ini saya buatkan yang berwarna biru. Format XML alias template baru, tiga kolom dengan posisi kolom posting di tengah dan sidebar di selah kiri dan kanan, mau lihat? silahkan klik gambar di bawah untuk melihat demo nya !






















    Yang mau download, silahkan klik saja di sini !

    Download Mini Icon



    Apakah sobat suka menghias diri ketika berkaca? jawabannya sudah pasti sepakat "iya suka". Berhias diri bertujuan agar penampilan kita menjadi lebih baik di mata orang yang melihat kita. Tak ubahnya seperti badan kita, sebuah blog pun apabila ingin tampil menarik di mata pengunjungnya haruslah di hias dengan berbagai hiasan atau sebut saja aksesori. Akan tetapi tentu saja jangan terlalu berlebihan, karena sesuatu yang berlebihan akan berakibat tidak baik, begitupun dengan yang namanya blog. Sebuah blog yang di hias dengan berbagai aksesori yang terlalu berlebihan akan berakibat buruk, salah satunya yaitu blog kita akan susah di loading oleh pengunjung karena data yang harus di loading terlalu banyak.




    Salah satu aksesori yang bentuknya mungil akan tetapi sangat menarik adalah mini icon. Yupssss... sebuah mini icon boleh juga di lirik menjadi sebuah aksesori. Dipandang dari bentuknya yang mungil akan terlihat sangat lucu dan yang paling utama adalah kapasitas data yang tidak terlalu besar. Coba lihat dan bandingkan link
    di bawah ini :



    Blog Roll



    uniQue Template


    Free Css style




    Blog Roll



    • uniQue Template


    • Free Css style




    Blog Roll



     uniQue Template


     Free Css style




    Blog Roll




     uniQue Template


     Free Css style






    Contoh di atas adalah contoh pembuatan link exchange atau Blog Roll dengan memakai dua gaya. Contoh pertama dan kedua adalah blog roll tanpa penambahan aksesori mini icon, sedangkan contoh ketiga dan ke empat adalah dengan menyisipkan mini icon. Manakah menurut sobat yang lebih menarik? Jika saya pribadi cenderung memilih yang memakai mini icon. Sepakatkah sobat dengan saya? apabila jawabnya "ya" ayo lanjutkan membacanya.




    Mungkin ada di antara sobat sangat tertarik dengan mini icon ini, akan tetapi masih merasa bingung karena keterbatasan kemampuan dalam hal pembuatannya. Memang untuk membuat sebuah mini icon membutuhkan ketelitian dan kesabaran di samping yang paling
    utama yaitu penguasaan terhadap suatu program design grafis. Sebuah kabar gembira bagi sobat yang seperti saya katakan tadi di awal. Di internet banyak sekali situs-situs yang menyediakan layanan ini, satu di antara sekian banyak situs penyedia layanan ini adalah http://www.famfamfam.com. Silahkan tuju situs ini, sobat bisa mendownload ratusan bentuk icon yang mungil serta lucu, bahkan icon bendera pun tersedia di sana.



    Bagaimana sudah dikunjungi dan di download? jika sudah di download, langkah selanjutnya adalah meng upload icon tersebut di hosting tempat menyimpan gambar, jangan semuanya di upload tapi yang di anggap perlu saja. Untuk meyisipkannya di blog sobat misal ingin di samping profile, di tanda waktu atau di mana saja akan saya ajarkan pada kesempatan berikutnya..... tunggu saja ya...








    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

    Rabu, 12 September 2007

    Mohon pamit


    Sehubungan dengan datangnya bulan suci ramadhan, maka dengan ini saya memberikan informasi bahwa akan menarik diri dari jagad blog. Jika masih di beri kesempatan, maka insya Alloh akan mengudara kembali setelah hari raya Idul Fitri. Bagi sobat yang bertanya maka besar kemungkinan tidak akan saya jawab, bagi yang sudah pasang link mungkin setelah hari raya baru akan saya backlink, dan bagi yang ingin membaca-baca tutorial yang sudah saya tulis silahkan sobat lihat di bagian bawah blog ini akan tetapi yang di bagian bawah tersebut tidaklah lengkap karena banyak yang belum saya cantumkan, saya sarankan sobat untuk klik link Daftar Isi di sebelah kanan atas karena dengan daftar isi akan muncul semua tulisan saya yang pernah di posting.




    Dengan ini saya mohon pamit kepada sobat semua, dan sebagai penutup saya ucapkan
    Selamat menunaikan ibadah puasa, mohon mohon maaf lahir dan batin. Sampai
    bertemu kembali di lain kesempatan. Wassalam.


    Selasa, 11 September 2007

    Marhaban Ya Ramadhan


    Tak terasa waktu berjalan begitu cepat, rasanya baru kemarin saya berkumpul bersama
    keluarga. Bertemu ibu tercinta, sanak saudara serta karib kerabat bersama-sama merayakan hari raya Idul Fitri, dan ternyata itu semua sudah berlalu setahun yang lalu, esok sudah memasuki bulan suci ramadhan kembali.



    Melalui tulisan ini saya mengucapkan selamat menunaikan ibadah puasa bagi sobat yang
    mearasa dirinya sebagai muslim, dan sekaligus mohon di bukakan pintu maaf yang sebesar-sebesarnya apabila selama ini ada tulisan-tulisan saya yang tidak berkenan di hati sobat semua.



    Mudah-mudahan dengan datangnya momentum bulan suci Ramadhan ini dapat lebih meningkatkan kadar keimanan kita yang selama ini tak terasa semakin menurun.




    Marhaban Ya Ramadhan


    Selamat menunaikan

    ibadah puasa 1428H



    Twitter Delicious Facebook Digg Stumbleupon Favorites More