Search

Home » Archives for March 2010

Cara Buat File Flash Online

Posted by Kimberly on Wednesday, March 31, 2010

Pusing mau bikin Flash banner ?hehehe ga usah pusing-pusing sob karena dalam postingan kali ini klinik-it akan membahas tentang Cara Buat File Flash Online. kalo biasanya sobat buat fle flash dengan menggunakan software-software tertentu kali ini sobat bisa membuatnya dengan mudah karena dibuatnya secara online,,dan juga sobat gaperlu pusing-pusing untuk menaruh file flash tersebut ke hosting-hosting tempat penyimpanan file karena jika file flash kita sudah berhasul dibuat kita hanya perlu mengcopy link lokasi file flash yang kita buat aja ,praktis dan mudah kan ?

Salah satu situs yang menyediakan pembuatan file flash secara online adalah situs http://www.123-banner.com/ .Di situs tersebut sobat bisa berkreasi sendiri untuk membuat file flash secara online dengan desain yang sudah disediakan, desain yang disediakan oleh situs tersebut juga tergolong banyak. jadi sobat bisa memilih desain sesuai dengan keinginan sobat, ya udah buat sobat yang ingin mencoba membuat file flash secara online langsung aja ikuti langkah-langkah Cara Buat File Flash Online di bawah ini .

Cara Buat File Flash Online.

1.Klik http://www.123-banner.com/ .

2.Setelah masuk ke situs tersebut silakan sobat klik Graphic Banner .

3.Selanjutnya silakan pilih desain banner flash yang sobat inginkan kemudian klik Choose Banner.

4.Pada langkah selanjutnya atau pada kolom Setting silakan sobat masukan teks yang sobat inginkan pada kolom Text 1: Text 2: dan masukan alamat blog sobat pada kolom URL: .

5.Untuk setting Text Transparency: biarkan saja .

6.Pada setting Text Color: silakan sobat ubah sesuai dengan warna teks yang sobat inginkan.

7.Untuk setting Background Lucency: biarkan saja.

8.Untuk setting Background Color: silakan sobat pilih warna latar belakang banner sesuai dengan keinginan sobat.

9.Jika sudah silakan sobat klik tombol Submit Query yang ada dibagian bawah.

10.Tunggu sampai proses loading selesai..

11.Kalo loadingnya sudah selesai silakan klik Click your right mouse here
to save the banner atau jika sobat bingung lihat aja gambar dibawah .



12.selanjutnya tinggal sobat Copy aja link banner flash yang sobat buat tadi pada addres bar web browser yang sobat gunakan .contoh linknya biasanya seperti ini http://www.123-banner.com/bannertmp/123-banner_com_1103283.swf

13.untuk memasangnya ke dalam blog silakan Sobat baca postingan terdahulu klinik-it DISINI .

14.Selamat mencoba....
More about → Cara Buat File Flash Online
at 8:39 PM { Add comments }

Slider Menu Image

Posted by Kimberly on Tuesday, March 30, 2010

image Sebelumnya saya sudah pernah membahas cara membuat slider menu ala zinmag-primus, kali ini saya akan coba berikan yang sedikit berbeda. Slider ini hanya menampilkan gambar saja tanpa dibubuhi keterangan atau diskripsi dari link atau gambar tersebut, namun saya rasa slider menu dengan image ini tampilannya lebih efektif ketimbang slider menu yang dulu pernah saya jelaskan. Sebagai contoh bisa sobat lihat pada contoh demo slide-nya disini.

 

Tampak gambar akan bergerak sendiri sesuai dengan delay atau waktu yang telah di setting pada kode javascript-nya. Untuk membuat cukup mudah, bagi yang suka yang bereksperimen dengan template-nya silahkan dicoba tutorialnya berikut ini.

 

  • Silahkan download terlebih dahulu kode javascript-nya disini dan disini.
  • Kemudian upload file js tersebut ke google sites atau google code.
  • Setelah selesai upload, lihat url atau link dari file yang sudah di upload, seperti contoh link yang sudah saya upload bentuknya seperti ini :

    http://newalltutorial.googlecode.com/files/jquery-1.3.1.min.js
    http://newalltutorial.googlecode.com/files/jquery.scrollTo.js

  • Sekarang bagian edit template, masuk ke Tata Letak �> Edit HTML.
  • Tambahkan kode berikut ini setelah kode ]]></b:skin>

     

    <script src='http://newalltutorial.googlecode.com/files/jquery-1.3.1.min.js' type='text/javascript'/>
    <script src='http://newalltutorial.googlecode.com/files/jquery.scrollTo.js' type='text/javascript'/>

     

    <style type='text/css'>
    #slider {width:320px;height:200px;padding:5px;margin:0;position:relative;overflow:hidden}
    #slider a:link, #slider a:active {color:#FFF;text-decoration:none}
    #slider a:hover {color:#F00}
    #mask-gallery {overflow: hidden}
    #gallery {list-style:none;margin:0;padding:0;z-index 0;width:900px;overflow:hidden}
    #gallery li {float:left;padding:0px;margin:0px}
    #mask-excerpt {position:absolute;top:0;right:0;z-index:500px;overflow:hidden}

    </style>

    <script>
    $(document).ready(function() {
    var speed = 5000;

           $(&#39;#mask-gallery, #gallery li&#39;).width($(&#39;#slider&#39;).width());
           $(&#39;#gallery&#39;).width($(&#39;#slider&#39;).width() * $(&#39;#gallery li&#39;).length);
           $(&#39;#mask-gallery, #gallery li, #mask-excerpt, #excerpt li&#39;).height($(&#39;#slider&#39;).height());

           var run = setInterval(&#39;newsscoller(0)&#39;, speed);

           $(&#39;#gallery li:first, #excerpt li:first&#39;).addClass(&#39;selected&#39;);

           $(&#39;#btn-pause&#39;).click(function () {
                  clearInterval(run);
                  return false;
           });

           $(&#39;#btn-play&#39;).click(function () {
                  run = setInterval(&#39;newsscoller(0)&#39;, speed);

                  return false;
    });

           $(&#39;#btn-next&#39;).click(function () {
                  newsscoller(0);
                  return false;
           });

           $(&#39;#btn-prev&#39;).click(function () {
                  newsscoller(1);
                  return false;
    });

           $(&#39;#slider&#39;).hover(
                  function() {
                         clearInterval(run);
    },
                  function() {
                         run = setInterval(&#39;newsscoller(0)&#39;, speed);
                  }
           );
    });

    function newsscoller(prev) {
           var current_image = $(&#39;#gallery li.selected&#39;).length ? $(&#39;#gallery li.selected&#39;) : $(&#39;#gallery li:first&#39;);
           var current_excerpt = $(&#39;#excerpt li.selected&#39;).length ? $(&#39;#excerpt li.selected&#39;) : $(&#39;#excerpt li:first&#39;);

           if (prev) {

                  var next_image = (current_image.prev().length) ? current_image.prev() : $(&#39;#gallery li:last&#39;);

                  var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $(&#39;#excerpt li:last&#39;);

                  } else {
                         var next_image = (current_image.next().length) ? current_image.next() : $(&#39;#gallery li:first&#39;);
                         var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $(&#39;#excerpt li:first&#39;);
    }

           $(&#39;#excerpt li, #gallery li&#39;).removeClass(&#39;selected&#39;);
                  next_image.addClass(&#39;selected&#39;);
                  next_excerpt.addClass(&#39;selected&#39;);

                  $(&#39;#mask-gallery&#39;).scrollTo(next_image, 800);
                  $(&#39;#mask-excerpt&#39;).scrollTo(next_excerpt, 800);

    }
    </script>

  • Simpan Template.

Keterngan :

  1. Kode yang berwarna merah adalah kode js yang sudah sobat upload ke hosting google site atau google code, jika malas mengupload silahkan gunakan saja milik saya.
  2. var speed = 5000 adalah kecepatan slide image-nya, semakin tinggi angkanya, maka akan semakin lambat.
  3. Untuk width:320px dan height:200px masing-masing untuk lebar dan tinggi menu, sesuaikan dengan lebar sidebar sobat.
  • Sekarang bagian memasang gambar slide-nya, masuk ke Elemen Halaman.
  • Pilih Tambah Gadget �> pilih yang HTML/Javascript.
  • Sekarang masukkan kode berikut :

    <div id="slider">
    <div id="mask-gallery">
    <ul id="gallery">

    <li><a href="http://newalltutorial.blogspot.com/2010/03/roten-herzen-template.html"><img src="http://lh5.ggpht.com/_7Y9pl24WpQY/S5k7-LSv8kI/AAAAAAAADHo/9E8EpPU1mKI/image_thumb%5B2%5D.png" height="200px" width="320px" border="0" alt="Free Blogger Template" /></a></li>

    <li><a href="http://newalltutorial.blogspot.com/2010/03/smart-gradient.html"><img src="http://lh6.ggpht.com/_7Y9pl24WpQY/S57X-OyXc5I/AAAAAAAADJ4/ukDMwgpRQDE/smart%20gradient_thumb%5B2%5D.png" height="200px" width="320px" border="0" alt="Free Blogger Template" /></a></li>

    <li><a href="http://newalltutorial.blogspot.com/2010/02/blue-light-template.html"><img src="http://lh4.ggpht.com/_7Y9pl24WpQY/S3aqOXkcFgI/AAAAAAAAC9U/iAjS27QlZYU/image_thumb2.png" height="200px" width="320px" border="0" alt="Free Blogger Template" /></a></li>

    </ul>
    </div>
    </div>
    <div id="buttons">
    <a href="#" id="btn-prev">prev</a>
    <a href="#" id="btn-pause">pause</a>
    <a href="#" id="btn-next">next</a>
    <a href="#" id="btn-play">play</a>
    </div>

  • Kemudian Simpan.

Keterangan :

  1. Kode yang berwarna hijau adalah url yang akan di tuju.
  2. Kode yang berwarna ungu adalah url dari gambar.

Selamat mencoba.
More about → Slider Menu Image
at 3:49 PM { Add comments }
Labels: , ,

Cara Pasang Flash Di Blog

Posted by Kimberly on Sunday, March 28, 2010

Buat sobat yang ingin Pasang Flash Di Blog inilah tutorialnya .Apa itu Flash ? Flash adalah salah satu jenis gambar ,namun bedanya flash dengan gambar lainya adalah flash mempunyai resulusi yang lebih bagus dan lebih aktraktif ,File Flash biasanya berformat atau ber-extensi .swf .Untuk Memasang Flash Di blog sobat harus mempunyai file Dengan Format SWF terlebih dahulu lalu lalu meng-uploadnya ke tempat hosting,misalnya geocities.com atau 000webhost dan juga file hosting yang lainya .Di bawah ini adalah Salah satu contoh Flash.



Gambar di atas adalah Contoh gambar flash yang bisa dipasang di blog ,Gambar flash tersebut juga bisa dipasang diheader atau dipostingan yang tujuanya supaya blog menjadi lebih aktaraktif . Untuk Tutorial membuat flash secara online .sobat bisa klik-disini .Dan untuk memasang Flash Di header Blog silakan Sobat Klik disini.

Sekian dulu penjelasan klinik-it tentang file Flash,, Buat kamu yang ingin memasang file flah di blog silakan ikuti langkah-langkah Cara Pasang Flash Di Blog di bawah ini .

Cara Pasang Flash Di Blog

1.Login ke blogger.

2.Klik Tatat Letak.

3.Klik Tambah Gadget.

4.Pilih HTML/javascript.

5.Kemudian Copy dan paste KODE berikut kedalamnya.

<embed src="http://gratisanshare.com/theme/banner.swf" quality="high" bgcolor="white" width="500" height="100" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash"></embed>

KETERANGAN
>> Ganti http://gratisanshare.com/theme/banner.swf Ganti dengan Link Url File flas kamu yang sudah kamu upload ke File Hosting.

>> Ganti width="500" height="100 dengan ukuran dari file flash kamu.

6.Jika sudah klik Simpan.
More about → Cara Pasang Flash Di Blog
at 7:39 PM { Add comments }

Cara Pasang Site Meter

Posted by Kimberly

Sitemeter adalah Alat untuk mengukur jumlah pengunjung blog atau yang sering disebut Counter Web, namun bedanya Site meter tidak memberikan perhitungan Jumlah pengunjung blog secara langsung didalam blog orang yang menggunakan fasilitas dari sitemeter tersebut,atau bisa dikatakan site meter adalah counter web tersembunyi .mengapa dikatakan sebagai counter web tersembunyi ? ya karena sitemeter hanya memberikan banner atau link menuju counter blog kita. dibawah ini adalah contoh banner dari sitemeter .



Jadi jika sobat ingin memasang web counter yang tidak ingin dilihat oleh pengunjung blog secara langsung,,sobat bisa menggunakan site meter ini .jika sobat tertarik untuk memasang sitemeter,silakan ikuti langkah-langkah Cara Pasang Site Meter di bawah ini .

Cara Pasang Site Meter

1.Klik http://www.sitemeter.com/.

2.Klik Sign Up pada pilihan Site Meter Basic Free .

3.Klik lagi Sign Up pada pilihan Site Meter Basic Free.

4.Kemudian isikan data yang diperlukan pada form pendaftaran, seperti :
  • Your Site's URL isikan dengan Alamat blog sobat.
  • Your Site's NAME isikan dengan judul blog sobat.
  • Codename isikan dengan nama sobat atau dengan kata yang lainya .
  • Your Current time biarkan saja .
  • Beri tanda titik pada By checking this box I agree to be bound by.


5.Klik Next.

6.Pada form pendaftran selanjutnya silakan isikan form pendaftaran tersebut dengan lengkap ,Seperti :
  • Email addres isikan dengan alamat email sobat.
  • Title isikan dengan Other saja.
  • Your ZIP or postal Code isikan dengan kode pos alamat sobat ,atau isi saja dengan 17422.
  • Country isikan dengan indonesia.
  • Pilih jenis kelamin sobat pada GENDER.
  • Beri tanta titik NO pada pilihan Can you receive HTML email.
7.Klik Next.

8.klik Next lagi setelah ada pernyataan dan tidak ada masalah pada pendaftaran.

9.Selanjutnya klik Manager pada tab menu yang ada diatas.

10.Kemudian klik HTML pada Adding Site Meter to your site .atau biar lebih jelasnya lihat gambar dibawah.



11.Copy seluruh kode HTML yang diberikan Sitemeter.

12.Selanjutnya Login ke blogger.

13.Klik Tata Letak.

14.Klik Tambah Gadget.

15.Kemudian pilih HTML/javascript.

16.Selanjutnya paste Seluruh kode HTML yang tadi kedalamnya.

17.Klik Simpan.

18.Selesai... untuk melihat jumlah pengunjung blog sobat tiap hari ,sobat tinggal klik aja banner tersebut.nanti akan tertampil statistik blog sobat.
More about → Cara Pasang Site Meter
at 4:48 PM { Add comments }

Bisnis Online Tanpa Modal Hasilkan 3,5 MILYAR

Posted by Kimberly on Saturday, March 27, 2010

Terobosan Terbaru Bisnis Online Tanpa Modal Penghasilan Hingga 3,5 Milyar


Ada Kabar Gembira Buat Sobat Semua .Di Dalam postingan kali ini klinik-it akan merekomendasikan sebuah terobosan baru untuk sobat yang ingin memulai bisnis online TANPA MODAL Alias GRATIS .Tugas sobat hanyalah mengajak 10 orang untuk bergabung menjadi Downline Sobat .Setian Member yang daftar melalu link Referal Sobat, Sobat akan dibayar 35 Rupiah ,dan jika downline sobat mendapatkan downline lagi sobat akan mendapatkan35 rupiah lagi, terus dan menerus.

Supaya Sobat Bisa Lebih Jelas Berikut ini adalah systemnya.

SYSTEM


Untuk mendukung KESUKSESAN anda situs ini juga kami lengkapi dengan :

  1. Sistem Reseller.
    Jika Anda bergabung, maka Anda berhak mendapatkan website replika/URL dengan pola sebgaia berikut :

    http://www.GratisanShare.com/?ref=ID_anda

    URL ini berfungsi untuk mengembangkan jaringan anda, dimana siapapun yang bergabung melalu URL tersebut secara otomatis akan menjadi DOWNLINE anda.


  2. Water Flow Randomizer (WFR),
    Sistem inilah yang bekerja memberikan keuntungan bagi Anda tanpa henti 24 jam penuh selamanya. Saat ada pengunjung akan mendaftar dan memasuki website TANPA SPONSOR, Maka Otomatis Sistem akan melakukan Randomizer (pengacakan) terhadap Seluruh Member untuk dijadikan sponsor / Upline. Sistem randomizer akan mendahulukan member yang belum punya downline atau punya downline paling sedikit, serta jika terdapat beberapa member yang sama-sama belum punya downline maka sistem akan memilih member yang join paling dahulu untuk dijadikan Sponsor. Ibarat Aliran Air (water flow), maka randomizer ini akan mengalir kebawah dulu.

  3. Water Flow Spill Over (WFSO),
    Saat Matrix dari member terpenuhi (Telah mencapai 10 Downline) maka (Kelebihan) Downline berikutnya Secara otomatis, sistem akan melakukan Spill Over (limpahan) kebawah jaringannya. Sistem akan menelusuri jaringan yang belum mendapat downline sama sekali atau yang mempunyai downline paling sedikit untuk diberi Spill Over (limpahan). Jika jaringan sama-sama masih belum punya downline atau jumlah downlinenya sama, maka sistem akan mencari yang Join terlebih dahulu pada web ini untuk diberi Spill Over. Ibarat Aliran Air (water flow), maka Spill Over ini akan mengalir kebawah dulu.

  4. Full Report System
    ->> Anda bisa memantau seluruh perkembangan anda di Program ini melalui Member Area, yang meliputi :
    1. Jumlah downline yang sudah anda peroleh hingga Level 8 dibawah anda
    2. Jumlah Total KOMISI Tiap LEVEL
    3. jumlah KOMISI yang sudah anda Ambil
    4. Jumlah KOMISI yang Belum anda Ambil
    5. Dsb

  5. Fair System
    Siapa yang bekerja dan berusaha lebih keras, akan mendapatkan hasil lebih banyak dalam waktu yang lebih singkat, tidak hanya menguntungkan member yang bergabung terlebih dahulu, oleh karenanya jangan ragu-ragu untuk segera bergabung untuk menjadi Succsess Business Online dalam program ini dan ciptakan MESIN PENGHASIL UANG yang akan membanjiri rekening bank Anda. Disamping itu pula program ini mengutamakan kejujuran dan kebersamaan dalam menjalankan bisnis ini, sehingga tidak terjadinya kecurangan yang dapat merugikan member - member lainnya.

Detail SYSTEM


KESAKSIAN KLIK DINI


Ayo Tunggu Apalagi Daftar sekarang dengan mengklik Gambar dibawah ini. Keuntungan daftar disini adalah sobat akan menjadi DOWNLINE KLINIK-IT.BLOGSPOT.COM< .dan jika sobat kesulitan untuk mendapatkan DOWNLINE klinik-it.blogspot.com akan mencarikan downline untuk sobat .

DAFTAR DI BAWAH


TUNGGU APALAGI !!

BERGABUNGLAH SEKARANG JUGA ...


100% GRATIS, Bebas Biaya
dan Bebas Resiko Sama Sekali

More about → Bisnis Online Tanpa Modal Hasilkan 3,5 MILYAR
at 9:37 PM { Add comments }

Membuat Label Dengan Marquee

Posted by Kimberly

image Jika sobat pernah membaca postingan saya tentang membuat label dengan fungsi scroll, tentunya sobat tidak akan kesulitan membuat label dengan marquee (text berjalan). Agak sedikit aneh memang postingan saya kali ini, label (kategori) dibuat berjalan, tapi tidak ada salahnya kita coba bahas. Buat yang ingin mencoba sekedar ingin tau, berikut tutorial singkatnya. Untuk demo-nya bisa dilihat disini.

 

Seperti biasa, login dulu ke blogger.

  • Jika sobat belum menampilkan label, silahkan sobat pasang dulu labelnya, tentunya label dengan model yang biasa (bukan label cloud).
  • Jika sudah, klik Edit HTML.
  • Klik Expand Template Widget.
  • Kemudian cari kode yang mirip seperti dibawah ini, sebagai catatan untuk title='Label' adalah judul label yang ada di blog sobat, silahkan disesuaikan. Dan kode yang berwarna merah adalah kode yang harus disisipkan.

    <b:widget id='Label1' locked='false' title='Label' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>

    </b:if>
    <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <marquee align='left' direction='up' height='300' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'> 
    <b:if cond='data:display == &quot;list&quot;'>

    <ul>
    <b:loop values='data:labels' var='label'>
    <li>
    <b:if cond='data:blog.url == data:label.url'>
    <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/><a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    <b:if cond='data:showFreqNumbers'>
    <span dir='ltr'>(<data:label.count/>)</span>
    </b:if>
    </li>
    </b:loop>
    </ul>
    <b:else/>
    <b:loop values='data:labels' var='label'>
    <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
    <b:if cond='data:blog.url == data:label.url'>
    <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>
    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    <b:if cond='data:showFreqNumbers'>
    <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
    </b:if>
    </span>
    </b:loop>
    </b:if>
    <b:include name='quickedit'/>
    </marquee>
    </div>
    </b:includable>
    </b:widget>
  • Kemudian Simpan Template.

Keterangan :

  1. direction='up' adalah text yang berjalan dari bawah keatas.

     

  2. height='300' adalah tinggi dari menu

     

  3. scrollamount='2' adalah kecepatan gerakan text, semakin tinggi angkanya maka akan semakin cepat gerakannya.

Saya kira itu saja yang bisa saya sampaikan, semoga bisa bermanfaat.
More about → Membuat Label Dengan Marquee
at 9:48 AM { Add comments }
Labels: , ,

Cara Membuat Label Dengan Fungsi Scroll

Posted by Kimberly

Buat sobat yang mempunyai banyak label mungkin akan direpotkan dengan label atau kategori yang memanjang kebawah .label yang memanjang seperti itu tentunya akan membuat sidebar blog menjadi tidak enak dipandang karena akan memanjang ke bawah ,oleh karena itu banyak blogger yang membuat labelnya dengan fungsi scroll. Label dengan fungsi scroll adalah label yang kedudukanya bisa di geser atau menyelinap kedalam .dengan menggunakan label dengan fungsi scroll ini label blog sobat tidak akan memanjang ke bawah..Sebagai contoh sobat bisa klik disini ,dan coba sobat perhatikan label blog tersebut . atau lihat gambar di bawah ini untuk melihat contohnya..



itu dia yang dinamakan Label Dengan Fungsi Scroll .Nah... jika sobat tertarik untuk membuat label seperti itu silakan sobat ikuti lankah-langkah Cara Membuat Label Dengan Fungsi Scroll dibawah ini .

Cara Membuat Label Dengan Fungsi Scroll

1.Login Ke blogger.

2.Klik Tata Letak.

3.Klik Edit HTML.

4.Selanjutnya cari kode di bawah ini .

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

5.Kemudian Copy dan paste Kode berikut Tepat dibawah kode tersebut.

<div style='overflow:auto; width:ancho; height:240px;'>

6.Selanjutnya cari kode dibawah ini.

</b:includable>

7.Jika sudah ketemu Copy dan pasti kode dibawah ini tepat diatasnya.

</div>

8.Klik SIMPAN TEMPLATE .

Catatan : Jika kode diatas tidak ketemu di blog sobat silakan cari kode <div class='widget-content'> . dan angka 240px yang berwarna merah diatas adalah tinggi label scroll-nya silakan sobat ganti sesuai dengan keinginan sobat.
More about → Cara Membuat Label Dengan Fungsi Scroll
at 4:57 AM { Add comments }

Cara Menampilkan Judul Postingan Pada Hasil Label/Pencarian

Posted by Kimberly on Thursday, March 25, 2010

Postingan yang begitu banyak terkadang amat sangat membuat kita repot , dan kebanyakan blogger yang memiliki postingan yang sangat banyak mereka membuat label atau kategori ,nahh.. didalam label ini kadang-kadang juga masih menimbulkan masalah yaitu jika dalam sebuah kategori/label aba puluhan bahkan ratusan postingan ,pasti saat label/kategori tersebut dibuka loding blog kita akan terasa berat dan lama dan juga postingan akan tampil memanjang kebawah yang membuat pengunjung blog kita yang meng-klik label tersebut akan sulit menemukan artikel yang dia cari dan bisa-bisa pengunjung blog sobat pun bisa gampang lari.hehehe

Tapi sobat ga perlu kwatir, dalam postingan kali ini klinik-it akan memberikan tips yang berguna untuk mensiasati hal tersebut ,yaitu dengan Menampilkan Judul Postingan Pada Hasil Label/Pencarian , nah biar sobat lebih paham apa yang klinik-it maksud sobat bisa klik disini kemudian coba sobat klik label yang ada pada blog tersebut ,dan setelah mengklik label tersebut hasilnya adalah judul postingannya saja yang tertampil .atau biar lebih jelasnya sobat juga bisa melhat gambar di bawah ini .



Udah tau kan apa yang klinik-it maksud di postingan yang ini ? untuk membuat hal tersebut silakan sobat ikuti langkah-langkah Cara Menampilkan Judul Postingan Pada Hasil Label/Pencarian di bawah ini .

1.Login ke Blogger.

2.Klik Tata Letak.

3.Klik Edit HTML.

4.Selanjutnya silakan sobat cari kode di bawah ini .

<b:include data='post' name='post'/>

5.Kemudian ganti kode tersebut dengan kode dibawah ini .

<b:if cond='data:blog.homepageUrl
!= data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'><data:post.title/></a>
<br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

6.Klik SIMPAN TEMPLATE.

7.Selanjutnya silakan sobat klik LABEL yang ada di blog sobat ,dan lihat hasilnya..
More about → Cara Menampilkan Judul Postingan Pada Hasil Label/Pencarian
at 9:56 PM { Add comments }

Cara Membuat Footer Menjadi 4 Kolom

Posted by Kimberly

Seperti janji klinik-it sebelumnya yaitu klinik-it akan memberikan tips lanjutan tentang membuat Footer menjadi Beberapa kolom alias multi kolom , Dan janji tersebut akan klinik-it tepati setelah sebelumnya klinik-it memberikan tips tentang Cara Membuat Footer Menjadi 3 kolom dan cara membuat footer menjadi dua kolom ,nahh dalam postingan kali ini klinik-it akan memberikan tips tentang Cara Membuat Footer Menjadi 4 Kolom . apa masih mau tambah lagi kolom footernya ? hehehe...

Jangan kebanyakan iia sobat kolom footernya,hehehe nanti sobat sendiri yang bingung mau di apakan itu footer .tapi buat sobat yang masih kurang dengan kolom footernya bisa langsung ikuti langkah-langkah Cara Membuat Footer Menjadi 4 Kolom di bawah ini .

Cara Membuat Footer Menjadi 4 Kolom

1.Seperti biasa Login Dulu ke blogger.

2.Klik Tata Letak.

3.Klik Edit HTML.

4.Selanjutnya silakan sobat cari kode ]]></b:skin> .

5.Jika sudah ketemu Copy dan paste kode di bawah ini tepat di atas kode ]]></b:skin> .

#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}

6.Selanjutnya silakan sobat cari kode dibawah ini .

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

7.Jika sudah ketemu Hapus kode <b:section class='footer' id='footer'/> kemudian ganti bengan kode dibawah ini .

<div id='footer-column-divide'>

<div id='footer1' style='width: 25%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 25%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>

<div id='footer4' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col4'
preferred='yes' style='float:right;'/>
</div>

8.Klik Simpan Template .

9.Jika berhasil maka hasilnya adalah seperti di bawah ini .



10.Selamat Mencoba..
More about → Cara Membuat Footer Menjadi 4 Kolom
at 9:25 PM { Add comments }

Cara Membuat Footer Menjadi 3 kolom

Posted by Kimberly

Setelah sebelumnya klinik-it memposting tentang cara membuat footer menjadi 2 kolom ,mungkin footer 2 kolomnya masih kurang cukup buat sobat ,tapi ga usah kwatir karena dalam postingan kali ini klinik-it akan memberikan tips tentang Cara Membuat Footer Menjadi 3 kolom , kalo footer 3 kolomnya belum cukup juga nanti akan klinik-it posting juga tentang cara membuat footer menjadi 4 kolom ,hehehe

Nahh sebelum kita membuat footer menjadi 3 kolom ,ada baiknya sobat klink-it ADD facebooknya klinik-it dulu disini.hehehe ya udah buat sobat klinik-it yang pengen membuat footer menjadi 3 kolom langsung aja ikuti langkah-langkah Cara Membuat Footer Menjadi 3 kolom di bawah ini .

Cara Membuat Footer Menjadi 3 kolom

1.Login ke blogger.

2.Klik Tata Letak.

3.Klik Edit HTML.

4.Cari kode ]]></b:skin> .Biar lebih gampang carinya silakan sobat tekan tombol CTRL+F .

5.Selanjutnya copy dan paste kode berikut tepat di atas kode ]]></b:skin> .

#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}

6.Selanjutnya Cari kode dibawah ini .

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

7.Jikalau sudah ketemu Hapus kode <b:section class='footer' id='footer'/> kemudian ganti bengan kode dibawah ini .

<div id='footer-column-divide'>

<div id='footer1' style='width: 30%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 40%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 30%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
</div>

8.Klik Simpan Template .

9.Jika sudah selesai maka hasilnya akan terlihat seperti gambar di bawah ini .



10.Selamat Mencoba...
More about → Cara Membuat Footer Menjadi 3 kolom
at 7:42 PM { Add comments }

Cara Merubah Footer Menjadi 2(Dua) Kolom

Posted by Kimberly

Apa itu footer ? Footer adalah bagian bawah blog yang gunanya hampir sama dengan sidebar yaitu untuk menambah element halaman blog, misalkan seperti untuk menambahkan Script HTML ,dan biasanya template bawaan yang dikasih dari blogger hanya memiliki 1 kolom footer ,dan mungkin tidak cukup buat sobat dengan 1 kolom footer ,tapi ga usah berkecil hati karena dalam postingan kali ini klinik-it akan memberikan tips supaya footernya bisa jadi 2 kolom atau seterusnya.

Nahh dalam postingan kali ini klinik-it akan menjelaskan tentang Cara Merubah Footer Menjadi 2(Dua) Kolom , footer yang menjadi 2 kolom ini bisa sobat gunakan untuk memperbanyak aksesoris blog sobat , jadi tidat tergantung hanya dengan sidebar saja .Nahh kalo sobat belum tau dengan apa yang dinamakan footer .ini dia gambarnya .ini adalah contoh footer dengan 1 kolom.



Di atas itu adalah contoh footer dengan 1 kolom , untuk merubahnya menjadi dua kolom silakan sobat ikuti langkah-langkah Cara Merubah Footer Menjadi 2(Dua) Kolom di bawah ini.

Cara Merubah Footer Menjadi 2(Dua) Kolom

1.Login ke blogger.

2.Klik Tata Letak.

3.Klik Edit HTML.

4.Cari kode ]]></b:skin> .Biar lebih gampang carinya silakan sobat tekan tombol CTRL+F .

5.Selanjutnya copy dan paste kode berikut tepat di atas kode ]]></b:skin> .

#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}

6.Selanjutnya Cari kode dibawah ini .

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

7.Jika sudah ketemu Hapus kode <b:section class='footer' id='footer'/> kemudian ganti bengan kode dibawah ini .

<div id='footer-column-divide'>

<div id='footer1' style='width: 50%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 50%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div style='clear:both;'/>
</div>

8.Sehingga kodenya menjadi seperti dibawah ini .

<div id='footer-wrapper'>
<div id='footer1' style='width: 50%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 50%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div style='clear:both;'/>
</div>
</div>

9.Klik SIMPAN TEMPLATE.

10.Jika berhasil maka hasilnya akan seperti gambar dibawah ini .



11.Selesai..semoga bermanfaat..
More about → Cara Merubah Footer Menjadi 2(Dua) Kolom
at 7:02 PM { 1 comments }

Cara Pasang Tabel Kode Warna HTML Di Blog

Posted by Kimberly on Wednesday, March 24, 2010

Buat sobat klinik-it yang ingin Pasang Tabel Kode Warna HTML Di Blog ini dia tipnya .Tabel Kode Warna HTML ini berguna buat sobat sendiri atau buat pengunjung blog sobat yang ingin mengetahui Kode Warna Dalam HTML, Misalnya kode warna HTML untuk warna kuning kodenya adalah #F7FE2E ,seperti itulah kode warna di dalam kode HTML ,sebelum sobat memasang tabel kode warna HTML ke dalam Blog Sobat ,ada baiknya sobat lihat terlebih dahulu contoh tabel Kode warna HTML di Bawah Ini.







































































































































































































Kode HTML Warna :




Setelah sobat melihat contoh dari tabel kode warna HTML diatas sobat juga bisa memasangnya . untuk memasang Tabel Kode warna HTML seperti yang ada diatas silakan sobat ikuti langkah-langkah Cara Pasang Tabel Kode Warna HTML Di Blog di bawah ini .

1.Login Ke Blogger.

2.Klik Tata Letak.

3.Klik Element Halaman.

4.Klik Tambah Gadget.

5.Pilih HTML/javascript.

6.Copy kemudian paste kode dibawah ini kedalam kotak teks HTML/javascript tadi.



7.Klik SIMPAN .

8.Atau SObat juga bisa memasang Tabel Kode warna diatas ke dalam Postingan Blog sobat .
More about → Cara Pasang Tabel Kode Warna HTML Di Blog
at 8:04 PM { Add comments }

Cara Membuat Hujan Salju Di Blog

Posted by Kimberly

Hujan Salju Di blog .Huawww... pasti indah .nahh dalam postingan kali ini klinik-it akan memberikan tipsnya,yaitu tips tentang Cara Membuat Hujan Salju Di Blog . ini dia pernak-pernik yang ga boleh ketinggalan dan wajib ada di blog sobat. apa maksudnya hujan salju yang ada di blog ? hujan salju yang ada di blog adalah kumpulan bintik-bintik putih yang jatuh di dalam blog , hujan salju ini cocok dipasang di blog yang menggunakan template berwarna gelap ,supaya saljunya terlihat bagus dan terlihat lebih berkilau .

Nahh buat sobat yang penasaran dengan hujan salju yang dari tadi klinik-it jelaskan, sobat bisa klik disini untuk melihat contohnya ,setelah sobat masuk kedalam blog tersebut silakan sobat perhatikan ada bintik-bintik putih mirip salju ,nahh... itu dia yang disebut hujan salju yang ada di blog. jika sobat tertarik ingin membuat hujan salju seperti itu silakan ikuti langkah-langkah Cara Membuat Hujan Salju Di Blog di bawah ini .

Cara Membuat Hujan Salju Di Blog

1.Login Ke Blogger .

2.Klik Tata Letak.

3.Klik Edit HTML.

4.Selanjutnya Silakan Sobat Cari Kode </head> .biar lebih mudah mencarinya tekan aja tombol CTRL+F.

5.Kalo udah ketemu kodenya Copy dan Paste kode berikut tepat dibawah kode </head> .

<script src='http://denisahlan.netau.net/hujansalju.js' type='text/javascript'/>

6.Klik Simpan Template .

7.Terakhir tinggal sobat lihat dech hasilnya..
More about → Cara Membuat Hujan Salju Di Blog
at 7:27 PM { Add comments }

Cara Membuat Kata Penutup di Blog

Posted by Kimberly on Tuesday, March 23, 2010

Sobat bingung ya.. sama dudul postingan klinik-it kali ini ? hehehe ga usah bingung-bingung karena klinik-it akan menjelaskanya .Cara Membuat Kata Penutup di Blog maksudnya adalah kita memberikan salam pada pengunjung blog kita sebelum sang pengunjung menutup atau keluar dari blog kita . Kalo sobat klinik-it belum pahah silakan sobat klik disini lalu keluar lagi dari blog tersebut ,nahh sebelum sobat meninggalkan blog tersebut ada sebuah pesan yang muncul kan .nahh itu dia yang disebut Kata Penutup di Blog. sekarang sobat sudah paham kan ?

Cara Membuat Kata Penutup di Blog ini mudah koq sobat,yang perlu sobat lakukan hanyalah menambahkan sedikit script pada element HTML template sobat .Biar lebih jelas silakan sobat ikuti langkah-langkah dibawah ini untuk Membuat Kata Penutup di Blog.

Cara Membuat Kata Penutup di Blog

1.Login Ke Blogger .

2.Klik Tata Letak.

3.Klik Edit HTML.

4.Selanjutnya Silakan Sobat Cari Kode </head> .biar lebih mudah mencarinya tekan aja tombol CTRL+F.

5.Kalo udah ketemu kodenya Copy dan Paste kode berikut tepat dibawah kode </head>

<script type='text/javascript'>
// goodbye alert
function goodbye(){
alert('TERIMA KASIH ATAS KUNJUNGANNYA DAN JANGAN LUPA BERKUNJUNG KEMBALI..');
}
parent.window.onunload=goodbye;

</script>

6.Ubah teks yang berwarna biru sesuai dengan keinginan sobat.

7.Klik SIMPAN TEMPLATE .

8.Sekarang tinggal sobat lihat hasinya . silakan sobat berkunjung ke blog sobat sendiri kemudian coba sobat keluar dari blog sobat . nanti akan ada salam perpisahan .hehehe
More about → Cara Membuat Kata Penutup di Blog
at 8:22 PM { Add comments }

Cara Menyembunyikan Judul dan Deskripsi Blog

Posted by Kimberly

Membuat desain header sendiri memang sudah kebiasaan buat sebagian blogger . namun kadang-kadang ada sedikit masalah yang timbul saat pemasangan desain header tersebut ,masalahnya adalah disaat desain header baru sudah terpasang judul dan deskripsi blog kita jadi main tindih-tindihan dengan banner header blog kita ,Di hapus judul blog dan deskripsinya tidak mungkin karena tidak akan bisa disimpan .nahh... repot kan.hehehe tapi ga usah kwatir karena kali ini klinik-it punya tipsnya nich...

Cara Menyembunyikan Judul dan Deskripsi Blog sebenarnya sedikit mudah..hehehe kita cuma menambahkan sedikit kode saja pada element HTML template kita ,kode yang perlu ditambahkan adalah kode seperti ini display:none; .nahh.. untuk lebih jelasnya silakan sobat ikuti langkah-langkah Cara Menyembunyikan Judul dan Deskripsi Blog di bawah ini .

Cara Menyembunyikan Judul dan Deskripsi Blog

1.Login Ke Blogger .

2.Klik Tata Letak.

3.Klik Edit HTML.

4.Untuk menembunyikan judul blog cari kode seperti dibawah ini .

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: normal normal 200% Georgia, Serif;
}

5.Kalo uada ketemu Tambahkan kode display:none; di bawah kode font: normal normal 200% Georgia, Serif; .atau lebih jelasnya lihat kode dibawah ini.

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: normal normal 200% Georgia, Serif;
display:none;
}

6.Selanjutnya untuk menyembunyikan deskripsi Dari judul Blog sobat silkan cari kode seperti di bawah ini .

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
color: #999999;
}

7.Selanjutnya tambahkan kode display:none; di bawah kode color: #999999; atau biar lebih jelas lihat kode lengkapnya.

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
color: #999999;
display:none;
}

8.Kalo ga sobat bisa juga cari kode seperti di bawah ini.

.descriptionwrapper p{
margin:0;
padding:0px 0 0 110px;
line-height:1.0em;
font-style:normal;
font-weight:;
font-size:9pt;
letter-spacing:.1em;
color:#333;
}

9.Selanjutnya sama seperti di atas tinggal tambahin kode display:none; aja dibawah kode color:#333; .

10.Sehingga kodenya jadi seperti dibawah ini .

.descriptionwrapper p{
margin:0;
padding:0px 0 0 110px;
line-height:1.0em;
font-style:normal;
font-weight:;
font-size:9pt;
letter-spacing:.1em;
color:#333;
display:none;
}

11.Kalo udah selesai Silakan klik tombol SIMPAN TEMPLATE. nahh biar sobat nyari kodenya ga bingung teken aja tombol CTRL+F terus masukin dech kode yang mau dicari..
More about → Cara Menyembunyikan Judul dan Deskripsi Blog
at 7:42 PM { Add comments }

Beberapa Fakta Seputar Komentar Spam

Posted by Kimberly

spam Mungkin kita tidak pernah berpikir sampai sejauh itu, sehingga menganggap link spam pada bagian komentar blog kita anggap hal yang biasa. Sebaiknya baca benar-benar kutipan dari situs resmi Google Webmaster Central Blog. Berikut ini ada kutipan yang saya ambil dari situs resminya, semoga bisa menjadi acuan sobat dalam memprotect setiap komentar yang masuk.

 

Komentar dapat menjadi benar-benar sumber informasi yang baik dan cara yang efisien melibatkan pengguna situs dalam berdiskusi. Konten yang berharga ini tidak boleh diganti dengan kata kunci omong kosong dan link. Untuk alasan ini ada banyak cara untuk mengamankan aplikasi Anda dan  spammer.

  • Larang posting anonim.
  • Gunakan CAPTCHA dan metode lain untuk mencegah komentar spam otomatis.
  • Aktifkan moderasi komentar.
  • Gunakan "nofollow" atribut untuk link di isian komentar.
  • Larang hyperlink di komentar.
  • Blok komentar halaman menggunakan robots.txt atau meta tag.

 

Semoga kutipan diatas bisa menjadi acuan kita dalam menyaring semua komentar yang masuk di blog kita. Satu hal yang ingin di tekankan oleh google, jangan membangun link pada isian komentar, seperti meletakkan link yang berlebihan dengan beberapa keyword yang mungkin mengacu pada kontes SEO yang sedang sobat ikuti. Sebaiknya hindari hal itu !
More about → Beberapa Fakta Seputar Komentar Spam
at 1:11 PM { Add comments }
Labels: ,

Cara Membuat Link Berkedip Warna Warni

Posted by Kimberly on Monday, March 22, 2010

Di pagi menjelang siang hari ini klinik-it akan menerbitkan sebuah postingan baru nich sobat.hehehe dalam postingan klinik-it kali ini klinik-it akan menjelaskan tentang cara mempercantik tampilan bllog lagi.hehehe karana mempercantik tampilan blog itu adalah naluri dari setiap Blogger .Dalam postingan yang ini klinik-it akan menjelaskan tentang Cara Membuat Link Berkedip Warna Warni . knapa link nya berkedip warna warni ? ya tentunya supaya blog terlihat lebih aktraktif tentunya .

Nahh mungkin sobat bingung apa itu yang disebut Link Berkedip Warna Warni. link yang berkedip warna warni itu adalah link yang jika kita arahkan kursor ke link tersebut,link itu akan berkedip warna warni ? Contohnya bisa sobat klik disini dan coba sobat arahkan kursor ke link yang ada pada blog tersebut ..Nahh.. biar sobat ga penasaran mendingan langsung aja di praktekan tutorial Cara Membuat Link Berkedip Warna Warni di bawah ini .

Cara Membuat Link Berkedip Warna Warni

1.Login ke Blogger.

2.Klik Tata Letak.

3.Klik Edit HTML.

4.Kemudian Cari kode </head>. Setelah ketemu copy dan paste kode dibawah ini tepat di bawah kode </head> tadi .

<script src='http://denisahlan.netau.net/klinikit.js'/>

5.Klik Simpan Template.

6.Untuk melihat hasilnya langsung aja sobat arahkan kursor ke link yang ada pada blog sobat.

7.Selamat mencoba...
More about → Cara Membuat Link Berkedip Warna Warni
at 8:46 PM { 1 comments }

Memasang Icon Tab Pada Sidebar

Posted by Kimberly on Saturday, March 20, 2010

icon tab Setelah membaca komentar beberapa sobat di postingan cara membuat tab view menu, yang menanyakan bagaimana cara membuat icon atau bullet icon pada tab view menu. Sebenarnya icon tersebut sudah ada pada template, dan tidak di tambahkan secara manual pada saat membuat tab view menu.

 

Icon tersebut akan muncul dengan sendirinya jika kita membuat daftar tulisan, link atau blogroll dengan menambahkan kode <ul><li> dan menutupnya dengan </li></ul>. Atau jika sobat membuat daftar link menggunakan fasilitas tambah gadget pada elemen halaman di blogger.

link

Untuk menambahkan icon yang berwarna kuning tersebut sangatlah mudah, ikuti langkah-langkahnya berikut ini :

 

  • Login ke blogger dengan user ID sobat.
  • Tuju Tata Letak.
  • Klik tab Edit HTML.
  • Kemudian tambahkan kode berikut ini diatas kode ]]></b:skin>

    #sidebar-wrapper ul {

    color:#333;

    margin:0px;

    padding:0px;

    }


    #sidebar-wrapper ul li {

    background:url(http://lh6.ggpht.com/_7Y9pl24WpQY/SuHhL1fZSMI/AAAAAAAAB_w/engBWuVJmlo/link_arrow_thumb%5B1%5D.png) no-repeat 0px 5px;

    margin:0px 0px 5px;

    padding:0px 0px 5px 15px;

    }


    #sidebar-wrapper ul li a:hover {

    margin:0px 0px 5px;

    padding:0px;

    }

  • Simpan Template.

 Keterangan :

  1. Kode yang berwarna merah adalah kode css untuk sidebar blog saya, sobat sesuaikan dengan kode css sidebar blog sobat, tapi umumnya sama.
  2. Kode yang berwarna ungu adalah url dari icon, bisa sobat ganti sesuai keinginan sobat.

 Contoh penulisan manual :

 

<ul>

 

<li><a href="http://newalltutorial.blogspot.com/2009/12/mempercantik-menu-dengan-mycssmenu.html"> Mempercantik Menu Via MyCSSMenu.com</a></li>

 

<li><a href="http://newalltutorial.blogspot.com/2009/12/memasang-widget-sharing-is-sexy.html"> Memasang Widget Sharing is Sexy di Blog</a></li>

 

<li><a href="http://newalltutorial.blogspot.com/2009/12/pasang-breadcrumb-navigasi-di-blog.html"> Pasang Breadcrumb Navigasi di Blog</a></li>

 

<li><a href="http://newalltutorial.blogspot.com/2009/12/acak-copy-paste-artikel-via-tynt.html"> Malacak Copy Paste Artikel via Tynt Insight</a></li>

 

<li><a href="http://newalltutorial.blogspot.com/2010/01/mengganti-background-dengan-gradient.html"> Mengganti Background Dengan Gradien Image</a></li>

 

<li><a href="http://newalltutorial.blogspot.com/2010/01/cara-membuat-label-dengan-fungsi-scroll.html"> Label Dengan Fungsi Scroll</a></li>

 

<li><a href="http://newalltutorial.blogspot.com/2010/01/tabel-perhitungan-google-pagerank.html"> Tabel Perhitungan Google PageRank</a></li>

 

<li><a href="http://newalltutorial.blogspot.com/2010/01/optimalkan-feedburner-dengan-memasang.html"> Cara Memasang PageFlip</a></li>

 

<li><a href="http://newalltutorial.blogspot.com/2010/01/membuat-efek-tulisan-dengan-css-text.html"> Membuat Efek Tulisan Dengan CSS Text Shadow</a></li>

 

<li><a href="http://newalltutorial.blogspot.com/2010/03/menyimpan-file-di-google-sites.html"> Menyimpan File di Google Sites</a></li>

 

<li><a href="http://newalltutorial.blogspot.com/2010/03/menyembunyikan-image-pada-read-more.html"> Menyembunyikan Image Pada Read More Otomatis</a></li>

 

</ul>

Tulisan yang saya tebalkan adalah kode yang harus sobat tambahkan setiap mengisi tulisan yang didalamnya terdapat link.

 

Semoga tutorial singkat ini bisa bermanfaat.

More about → Memasang Icon Tab Pada Sidebar
at 7:19 PM { Add comments }
Labels: ,
Related Posts Plugin for WordPress, Blogger...