Tampilkan postingan dengan label Ilmu nge-Blogg. Tampilkan semua postingan
Tampilkan postingan dengan label Ilmu nge-Blogg. Tampilkan semua postingan

Kamis, 22 Desember 2011

Tips Link Bergoyang

Pada Tutorial Blog Berikut ini cantik akan membahas Cara Membuat Link Bergoyang dangdut hehehe salah gan maksud cantik Link Bergoyang Dengan Javascript.Link Bergoyang Adalah Link Yg Ketika Mouse Menyorotnya Akan Bergoyang patah patah..cieeeee..


makin ngga jelas ne maklum sobat konsen sedikit udah agak berkurang.Link Bergoyang ini Digunakan Untuk mempercantik Link Saja.. ..ashhh kepanjangan cuap cuap nya langsung aja sobat Ikuti Langkah-Langkah Berikut:

1 Login Ke Blog Sobat
2 Pada Dasbor Pilih >>Rancangan-->Kemudian EDIT HTML
3.Cari Kode </head> dan copy kode dibawah ini dan paste / taruh tepat diatas kode </head>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});</script>

4. pratinjau template dulu..apakah sudah berhasil membuat link berjoget..??
5. kalau oke langsung saja bungkus..save template
semoga bermanfaat

Ucapan Salam ketika (well come)

Berikan ucapan selamat datang kepengunjung blog anda
tentunya dengan bahasa kita masing-masing
ga usah niru bahas yang lainya...
kamu adalah kamu, dan jangan jadi pengikut
be your self oce....???

langsung saja anda copy kode script berikut ini

<script type="text/javascript">
alert('TULISAN ANDA DISINI ')
</script>
<noscript>Enable javascript in your browser to view an important message</noscript>

Copy kode tersebut diatas dan paste pada widget html/javascript(tambah gadget)
(masuk account blogger anda, dasbor, tataletak, tambah gadget, pilih html/javascript).
Setelah anda paste kode tersebut, silahkan klik tombol save/simpan perubahan.
seandainya gagal kita tinggal menghapus lagi...
khan cuma sekedar widget, jadi kita tinggal nyari aja di tata letaknya...]




kalo punyaku sih Bismillahir Rahmanir Rahim


selamat mencoba

Rabu, 21 Desember 2011

Membuat Arsip Bergerak


بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْمِ



Halo sobat blogger semua.. nah kali ini ::ILMU QITHA:: akan share mengenai Cara Membuat Label Dengan Efek Marquee (bergerak).

Nah sebelumnya mungkin bagi sobat yang pernah membaca artikel saya mengenai cara memberi scroll pada label dan cara membuat label berputar. Nah jadi kali ini giliran Cara Membuat Label Dengan Efek Marquee (bergerak).

Tidak jauh berbeda dengan cara memberi scroll pada label. Tapi disini berbedaannya hanya terletak pada kode untuk menjalankannya.

ok deh langsung saja pada Cara Membuat Label Dengan Efek Marquee (bergerak)
1. login blog
2. rancangan -> edit HTML (centang "Expand Template Widget")
3. lalu cari kode seperti dibawah ini, NB: title ='Labels' adalah judul label yang ada di blog sobat, silahkan disesuaikan. Dan kode yang berwarna merah adalah kode yang harus disisipkan kedalam template sobat.

<b:widget id='Label1' locked='false' title='Labels' 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> 

4. simpan

NB :
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.

Yahoo Emoticons

Ini dia yang paling seru dalam membuat postingan di blog, kita bisa menambahkan yahoo emoticons ke dalam postingan kita. Yahoo emoticons ini sebenarnya gambar yang bisa mengekspresikan diri kita dalam setiap tulisan yang kita buat, ekspresi senang, marah, lagi nyengir, sampai jatuh cinta juga ada.

Selain bisa membuat tulisan jadi lebih bervariasi, yahoo emoticons ini juga efektif dalam penulisan kata-kata, jadi kita tidak perlu menulis kata - kata yang panjang lebar untuk menunjukkan emosional kita, cukup dengan yahoo messenger emoticons pembaca sudah bisa melihat ekspresi kita.

Berikut beberapa contoh gambar beserta kode HTML nya


<img border="0" height="18" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif" width="18" />


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif" border="0" height="18" width="18" />


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" border="0" height="18" width="18" />


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif" border="0" height="18" width="20" />


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif" border="0" height="18" width="18" />


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif" border="0" height="18" width="18" />


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/6.gif" border="0" height="18" width="42" />


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif" border="0" height="18" width="18" />


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif" border="0" height="18" width="18" />


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif" border="0" height="18" width="18" />


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif" border="0" height="18" width="18" />


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif" border="0" height="18" width="34" />


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif" border="0" height="18" width="18" />


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif" border="0" height="18" width="18" />


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif" border="0" height="18" width="18" />


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif" border="0" height="18" width="18" />


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif" border="0" height="18" width="34" />


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif" border="0" height="18" width="18" />


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif" border="0" height="18" width="18" />


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif" border="0" height="18" width="22" />


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif" border="0" height="18" width="18" />


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif" border="0" height="18" width="18" />


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" border="0" height="18" width="30" />


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif" border="0" height="18" width="30" />


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif" border="0" height="18" width="24" />


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif" border="0" height="18" width="18" />

Selamat Mencoba, jadikan postingan sobat lebih berwarna..

Memasang Text Berjalan Recent Posts di Blog

Agak berbeda dengan recent posts pada umumnya, recent post berikut adalah recent posts atau postingan terakhir dari blog yang berjalan atau biasa kita sebut dengan marquee. Contoh demonya bisa sobat lihat disini. Tertarik ingin memasangnya? berikut langkah singkat dan padatnya, tidak perlu backup template karena kita akan meletakkannya langsung di elemen halaman.
  • Pada Elemen Halaman, klik Tambah Gadget.
    image
  • Kemudian pilih yang HTML/Javascript.
  • Masukkan kode berikut kedalamnya :
    <script type='text/javascript'>
    //<![CDATA[
    function RecentPostsScrollerv2(json)
    {
                var sHeadLines;
                var sPostURL;
                var objPost;
                var sMoqueeHTMLStart;
                var sMoqueeHTMLEnd;
                var sPoweredBy;
                var sHeadlineTerminator;
                var sPostLinkLocation;
                try
                {           
                sMoqueeHTMLStart = "\<MARQUEE onmouseover=\"this.stop();\" onmouseout=\"this.start();\" ";           
                if( nWidth)
                {
                    sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"" + nWidth + "%\"";
                }
                else
                {
                    sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"100%\"";
                }
                if( nScrollDelay)
                {
                    sMoqueeHTMLStart = sMoqueeHTMLStart + " scrolldelay = \"" + nScrollDelay + "\"";
                }
                if(sDirection)
                {
                    sMoqueeHTMLStart = sMoqueeHTMLStart + " direction = \"" + sDirection + "\"";
                    if(sDirection == "left" || sDirection =="right")
                    {
                        //For left and right directions seperate the headilnes by two spaces.
                        sHeadlineTerminator = "&nbsp;&nbsp;";
                    }
                    else
                    {
                        //For down and up directions seperate headlines by new line
                        sHeadlineTerminator = "\<br/\>";
                    }
                }
                if(sOpenLinkLocation =="N")
                {
                    sPostLinkLocation = " target= \"_blank\" ";
                }
                else
                {
                    sPostLinkLocation = " ";
                }
                sMoqueeHTMLEnd = "\</MARQUEE\>"
                sHeadLines = "";
                for(var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++)
                {
                    objPost = json.feed.entry[nFeedCounter];
                    for (var nCounter = 0; nCounter < objPost.link.length; nCounter++)
                       {
                        if (objPost.link[nCounter].rel == 'alternate')
                        {
                              sPostURL = objPost.link[nCounter].href;
                              break;
                        }
                    }
    sHeadLines = sHeadLines + "\<b\>"+sBulletChar+"\</b\> \<a " + sPostLinkLocation + " href=\"" + sPostURL + "\">"  + objPost.title.$t + "\</a\>" + sHeadlineTerminator;
                }           
                document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd )
                }
                catch(exception)
                {
                    alert(exception);
                }
    }
    //]]>
    </script>
    <script style="text/javascript"> var nMaxPosts = 20; var sBgColor; var nWidth; var nScrollDelay = 180; var sDirection="left"; var sOpenLinkLocation="Y"; var sBulletChar="•"; </script> <script style="text/javascript" src="http://miscah.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"></script>
  • Simpan.

Keterangan :
  1. Ganti kode yang berwarna merah dengan alamat blog sobat.
  2. var nMaxPosts = 20 adalah jumlah postingan terakhir.
  3. var nScrollDelay = 180 adalah kecepatan text.
  4. var sDirection="left" untuk text berjalan dari kanan ke kiri, ganti dengan right jika ingin text tersebut berjalan dari kiri ke kanan.
  5. var sOpenLinkLocation="Y" untuk link pada halaman yang sama, ganti dengan "N" untuk membuka link pada jendela baru (new tab).
  6. var sBulletChar="•" adalah icon kecil pada bagian depan setiap link, bisa diganti dengan apa saja sesuai selera.

Semoga bermanfaat.

Membuat Menu Dengan Fungsi Scroll

menu scroll Bagi blogger pemula seperti saya, membuat menu dengan fungsi scroll ini awalnya saya pikir susah, padahal jika kita mengerti bahasa pemrograman, membuat menu seperti ini sangatlah mudah. Untuk penghematan tempat jika sobat mempunyai daftar menu yang sangat panjang, menu dengan fungsi scroll ini bisa menjadi solusi yang tepat selain menggunakan marquee atau text berjalan.
Dan pembuatan menu ini tidak menggunakan kode HTML yang banyak dan ribet, yup hanya sedikit kode HTML, sobat sudah bisa membuat menunya. Menu ini bisa juga sobat menfaatkan dalam menempatkan blogroll yang panjang atau daftar menu postingan yang sobat miliki.

Untuk membuat menunya sobat hanya membutuhkan kode HTML seperti ini :


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


ISI MENU 


</div>


Keterangan :
  • width --> lebar menu
  • height --> tinggi menu
  • padding --> jarak antar tulisan dengan garis pinggir
  • border --> ketebalan garis pinggir

Tinggal sobat kreasikan sendiri sesuai dengan blog sobat.

Contoh kode HTML untuk menu yang saya punya :

<div style="overflow:auto;width:310px;height:200px;padding:10px;border:1px solid #eee">

1.<a href="http://miscah.blogspot.com/2009/04/panduan-membuat-blog.html"> Panduan Membuat Blog</a> 

2.<a href="http://miscah.blogspot.com/2009/04/mengganti-template-blogspot.html"> Mengganti Template Blogspot</a> 

3.<a href="http://miscah.blogspot.com/2009/04/cara-membuat-label-kategori.html"> Cara Membuat Label</a>

4.<a href="http://miscah.blogspot.com/2009/04/untuk-membuat-tampilan-tulisan-atau.html"> Upload Gambar ke Dalam Postingan</a>

5.<a href="http://miscah.blogspot.com/2009/04/cara-pasang-banner-di-blog.html"> Cara Pasang Banner</a>

6.<a href="http://miscah.blogspot.com/2009/04/tutorial-membuat-text-area.html"> Tutorial Membuat Text Area</a>

7.<a href="http://miscah.blogspot.com/2009/04/membuat-favicon.html"> Tips Membuat Favicon</a> 

8.<a href="http://miscah.blogspot.com/2009/04/trik-membuat-read-more.html"> Trik Membuat Read More</a>

9.<a href="http://miscah.blogspot.com/2009/04/cara-pasang-search-engine-di-blog.html"> Cara Pasang Search Engine</a>

10.<a href="http://miscah.blogspot.com/2009/04/menyimpan-file-di-geocitiesyahoocom.html"> Menyimpan File di Yahoo! Geocities</a>

11.<a href="http://miscah.blogspot.com/2009/04/kode-html-tampil-di-postingan.html"> Kode HTML Tampil di Postingan</a>

12.<a href="http://miscah.blogspot.com/2009/04/cara-pasang-meta-tag.html"> Cara Pasang Meta Tag</a>

13.<a href="http://miscah.blogspot.com/2009/04/daftarkan-blog-ke-search-engine.html"> Daftarkan Blog ke Search Engine</a>

14.<a href="http://miscah.blogspot.com/2009/04/alexa-rank.html"> Alexa Rank</a>

15.<a href="http://miscah.blogspot.com/2009/04/tips-membuat-efek-marquee.html"> Tips Membuat Efek Marquee</a>

16.<a href="http://miscah.blogspot.com/2009/05/pasang-kode-tukaran-link.html"> Pasang Kode Tukaran Link</a>

17.<a href="http://miscah.blogspot.com/2009/05/backlink.html"> Backlink</a>

18.<a href="http://miscah.blogspot.com/2009/05/yahoo-messenger-emoticons.html"> Yahoo Emoticons</a>

19.<a href="http://miscah.blogspot.com/2009/04/link-berkelip-warna-warni.html"> Link Berkelip Warna-Warni</a>

20.<a href="http://miscah.blogspot.com/2009/05/tips-membuat-menu-dropdown.html"> Membuat Menu Dropdown</a>

</div>


Hasilnya :
1. Panduan Membuat Blog

2. Mengganti Template Blogspot

3. Cara Membuat Label

4. Upload Gambar ke Dalam Postingan

5. Cara Pasang Banner

6. Tutorial Membuat Text Area

7. Tips Membuat Favicon

8. Trik Membuat Read More

9. Cara Pasang Search Engine

10. Menyimpan File di Yahoo! Geocities

11. Kode HTML Tampil di Postingan

12. Cara Pasang Meta Tag

13. Daftarkan Blog ke Search Engine

14. Alexa Rank

15. Tips Membuat Efek Marquee

16. Pasang Kode Tukaran Link

17. Backlink

18. Yahoo Emoticons

19. Link Berkelip Warna-Warni

20. Membuat Menu Dropdown



Sedikit keterangan tentang elemen diatas :
  • overflow:auto adalah kode untuk penggulung halaman apabila isi dari halaman tersebut sudah melampaui batas tinggi atau lebar yang telah di tentukan.
  • width:310px adalah lebar bidang yang di inginkan, dalam hal ini adalah sebesar 310 pixel, nilai ini tentunya di sesuaikan dengan keinginan atau di sesuaikan dengan lebar sidebar yang ada. namun, agar selalu sesuai dengan sidebar maka sebaiknya memakai nilai 100% (width:100%).
  • height:200px adalah tinggi bidang yang di inginkan, nilai ini bisa di ubah sesuai keinginan, misal jadi 300px.
  • padding:10px adalah jarak agar tulisan yang ada dalam halaman tersebut tidak menabrak dinding halaman, nilai ini tentu saja bisa di ubah sesuai keinginan. misal : padding:5px.
  • border:1px solid #eee adalah garis pada pembatas setiap sisinya, #eee untuk kode warna abu-abu.

Selamat Mencoba !!

Membuat Menu Dengan Fungsi Scroll

menu scroll Bagi blogger pemula seperti saya, membuat menu dengan fungsi scroll ini awalnya saya pikir susah, padahal jika kita mengerti bahasa pemrograman, membuat menu seperti ini sangatlah mudah. Untuk penghematan tempat jika sobat mempunyai daftar menu yang sangat panjang, menu dengan fungsi scroll ini bisa menjadi solusi yang tepat selain menggunakan marquee atau text berjalan.
Dan pembuatan menu ini tidak menggunakan kode HTML yang banyak dan ribet, yup hanya sedikit kode HTML, sobat sudah bisa membuat menunya. Menu ini bisa juga sobat menfaatkan dalam menempatkan blogroll yang panjang atau daftar menu postingan yang sobat miliki.

Untuk membuat menunya sobat hanya membutuhkan kode HTML seperti ini :


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


ISI MENU 


</div>


Keterangan :
  • width --> lebar menu
  • height --> tinggi menu
  • padding --> jarak antar tulisan dengan garis pinggir
  • border --> ketebalan garis pinggir

Tinggal sobat kreasikan sendiri sesuai dengan blog sobat.

Contoh kode HTML untuk menu yang saya punya :

<div style="overflow:auto;width:310px;height:200px;padding:10px;border:1px solid #eee">

1.<a href="http://miscah.blogspot.com/2009/04/panduan-membuat-blog.html"> Panduan Membuat Blog</a> 

2.<a href="http://miscah.blogspot.com/2009/04/mengganti-template-blogspot.html"> Mengganti Template Blogspot</a> 

3.<a href="http://miscah.blogspot.com/2009/04/cara-membuat-label-kategori.html"> Cara Membuat Label</a>

4.<a href="http://miscah.blogspot.com/2009/04/untuk-membuat-tampilan-tulisan-atau.html"> Upload Gambar ke Dalam Postingan</a>

5.<a href="http://miscah.blogspot.com/2009/04/cara-pasang-banner-di-blog.html"> Cara Pasang Banner</a>

6.<a href="http://miscah.blogspot.com/2009/04/tutorial-membuat-text-area.html"> Tutorial Membuat Text Area</a>

7.<a href="http://miscah.blogspot.com/2009/04/membuat-favicon.html"> Tips Membuat Favicon</a> 

8.<a href="http://miscah.blogspot.com/2009/04/trik-membuat-read-more.html"> Trik Membuat Read More</a>

9.<a href="http://miscah.blogspot.com/2009/04/cara-pasang-search-engine-di-blog.html"> Cara Pasang Search Engine</a>

10.<a href="http://miscah.blogspot.com/2009/04/menyimpan-file-di-geocitiesyahoocom.html"> Menyimpan File di Yahoo! Geocities</a>

11.<a href="http://miscah.blogspot.com/2009/04/kode-html-tampil-di-postingan.html"> Kode HTML Tampil di Postingan</a>

12.<a href="http://miscah.blogspot.com/2009/04/cara-pasang-meta-tag.html"> Cara Pasang Meta Tag</a>

13.<a href="http://miscah.blogspot.com/2009/04/daftarkan-blog-ke-search-engine.html"> Daftarkan Blog ke Search Engine</a>

14.<a href="http://miscah.blogspot.com/2009/04/alexa-rank.html"> Alexa Rank</a>

15.<a href="http://miscah.blogspot.com/2009/04/tips-membuat-efek-marquee.html"> Tips Membuat Efek Marquee</a>

16.<a href="http://miscah.blogspot.com/2009/05/pasang-kode-tukaran-link.html"> Pasang Kode Tukaran Link</a>

17.<a href="http://miscah.blogspot.com/2009/05/backlink.html"> Backlink</a>

18.<a href="http://miscah.blogspot.com/2009/05/yahoo-messenger-emoticons.html"> Yahoo Emoticons</a>

19.<a href="http://miscah.blogspot.com/2009/04/link-berkelip-warna-warni.html"> Link Berkelip Warna-Warni</a>

20.<a href="http://miscah.blogspot.com/2009/05/tips-membuat-menu-dropdown.html"> Membuat Menu Dropdown</a>

</div>


Hasilnya :
1. Panduan Membuat Blog

2. Mengganti Template Blogspot

3. Cara Membuat Label

4. Upload Gambar ke Dalam Postingan

5. Cara Pasang Banner

6. Tutorial Membuat Text Area

7. Tips Membuat Favicon

8. Trik Membuat Read More

9. Cara Pasang Search Engine

10. Menyimpan File di Yahoo! Geocities

11. Kode HTML Tampil di Postingan

12. Cara Pasang Meta Tag

13. Daftarkan Blog ke Search Engine

14. Alexa Rank

15. Tips Membuat Efek Marquee

16. Pasang Kode Tukaran Link

17. Backlink

18. Yahoo Emoticons

19. Link Berkelip Warna-Warni

20. Membuat Menu Dropdown



Sedikit keterangan tentang elemen diatas :
  • overflow:auto adalah kode untuk penggulung halaman apabila isi dari halaman tersebut sudah melampaui batas tinggi atau lebar yang telah di tentukan.
  • width:310px adalah lebar bidang yang di inginkan, dalam hal ini adalah sebesar 310 pixel, nilai ini tentunya di sesuaikan dengan keinginan atau di sesuaikan dengan lebar sidebar yang ada. namun, agar selalu sesuai dengan sidebar maka sebaiknya memakai nilai 100% (width:100%).
  • height:200px adalah tinggi bidang yang di inginkan, nilai ini bisa di ubah sesuai keinginan, misal jadi 300px.
  • padding:10px adalah jarak agar tulisan yang ada dalam halaman tersebut tidak menabrak dinding halaman, nilai ini tentu saja bisa di ubah sesuai keinginan. misal : padding:5px.
  • border:1px solid #eee adalah garis pada pembatas setiap sisinya, #eee untuk kode warna abu-abu.

Selamat Mencoba !!

Cara Pasang Jam di Blog



Agar blog sobat terlihat cantik dan enak dilihat, sobat bisa mencoba dengan memasang jam pada blog sobat. Wuih terlihat cantik, emangnya dian sastro.. what ever lah. Ada banyak layanan online yang menyediakan script jam untuk di pasang di blog, salah satunya adalah clocklink.
langkah pertama untuk mendapatkan kode HTML nya, silahkan simak caranya berikut ini :

  1. Login ke www.clocklink.com
  2. Klik tulisan Want a Clock on Your Website?
  3. Kemudian pilih model jam yang akan sobat pasang pada blog.
  4. Setelah itu klik tulisan View HTML Tag.
  5. Lalu klik Accept.
  6. Pilih zona waktu, untuk Indonesia bagian barat GMT +7:00
  7. Bisa juga sobat klik radio button Select by the City --> lalu pilih Indonesia sebagai country dan Jakarta sebagai city
  8. Set ukuran jam disamping tulisan Size.
  9. Copy kode HTML nya ke dalam notepad.

Langkah kedua, silahkan sobat login ke Blogger.

  1. Klik Tata Letak.
  2. Klik tab Elemen Halaman.
  3. Lalu klik Tambah Gadget.
  4. Pilih yang HTML/Javascript.
  5. Kemudian copy paste kode yang tadi sobat dapat dari clocklink.
  6. Save.
Selamat Mencoba !! have a nice day..

Cara Pasang Banner di Blog

Agar blog kita kelihatan lebih bagus dan dinamis, ada baiknya kita pasang banner di beberapa sidebar atau header blog kita. Banyak pengunjung blog yang langsung tertuju ke arah banner, apalagi jika kita punya banner yang interaktif dengan pengunjung.
Misalnya jika sobat terdaftar di suatu situs bisnis online, pastinya sobat akan mendapatkan banner untuk mempromosikan link url sobat di tempat sobat mendaftar. Banner yang diberikan berupa kode HTML yang bentuknya agak sedikit ribet, tapi jika setelah kita copy paste ke blog kita, jadinya akan berupa gambar atau banner yang kita maksud.
Seperti ini contohnya, gambar berikut saya dapat setelah mengikuti program bisnis online yang dikenal dengan nama paid to click atau PTC.

buxp
dan biasanya akan diberikan kode html yang nantinya akan kita pasang di blog kita, seperti ini contoh kode html-nya :
<a href="http://www.buxp.net/?r=miskahiper"><img src="http://buxp.net/banner1.gif" alt="" /></a>
dan bagaimana cara memasangnya di blog kita? silahkan ikuti panduannya berikut ini :
  1. Login ke Blogger dengan ID sobat.
  2. Klik Tata Letak.
  3. Klik Elemen Halaman.
  4. Kemudian klik yang bertuliskan Tambah Gadget, bisa di sidebar, header atau bagian bawah template.
    add gadget
  5. Kemudian pilih yang HTML/Java Script
    image
  6. Copy paste kode HTML sobat kedalamnya, sobat bisa menambahkan judul diatasnya jika mau.
    insert html
  7. Lalu klik Simpan.
  8. Selesai.




Membuat banner sendiri

Bagaimana jika sobat ingin memasang banner atau gambar sendiri ke dalam blog sobat dan jika di klik akan menuju ke situs atau blog sobat yang lain? saya akan berikan contohnya berikut ini.

Saya punya gambar kecil dengan bentuk seperti ini : blog go blog

Bagaimana membuatnya menjadi banner yang mempunyai link didalamnya?
  • Upload gambar tersebut kedalam situs penyimpanan online, sobat bisa upload ke Photobucket atau Google Sites
  • Anggap saja sobat ingin menggunakan jasa Photobucket, pada halaman depan silahkan sobat klik Join Now It’s Free! untuk menjadi anggota image
  • Ikuti saja langkah-langkah pendaftarannya sampai selesai.
  • JIka sudah selesai register, klik login untuk masuk ke halaman utama Photobucket
  • Bagaimana cara upload gambarnya? pada bagian atas coba cari tulisan Upload images & videos, klik dan upload gambar yang sudah sobat siapkan. image
  • Setelah selesai upload gambar, kemudian sorot pada gambar tersebut dan klik yang HTML Code
    miscah
  • Sekarang copy paste saja dulu kedalam notepad, misalnya kode html untuk gambar yang saya upload ke Photobucket seperti ini :
    <a href="http://s643.photobucket.com/albums/uu155/miskahiper/?action=view&current=BANNER2.jpg" target="_blank"><img src="http://i643.photobucket.com/albums/uu155/miskahiper/BANNER2.jpg" border="0" alt="blogspot tutorial,blog,tips blogging"></a>
  • Hapus kode yang berwarna merah dan ganti dengan kode url blog sobat atau situs yang ingin sobat beri link, sehingga jadinya seperti dibawah ini :
    <a href=http://miscah.blogspot.com" target="_blank"><img src="http://i643.photobucket.com/albums/uu155/miskahiper/BANNER2.jpg" border="0" alt="blogspot tutorial,blog,tips blogging"></a>
  • Kode tersebutlah yang sekarang bisa sobat copy paste ke blog sobat.

Mudah kan, selamat berkreasi !

Selasa, 20 Desember 2011

Merubah kursor mouse di blog

Saya mengambil gambar kursor dari http://www.cursors-4u.com/ dan Anda dapat mengubahnya kapan saja tergantung pada suasana hati meriah Anda.
 
Tutorial ini akan membantu Anda untuk mengubah kursor mouse pada blog Anda untuk kursor animasi.
Petunjuk Untuk Ikuti:

LANGKAH 1
Login ke Blogger, pergi ke Desain -> Edit HTML dan tandai kotak centang "Expand Template Widget"



Then, find (CTRL+F) this code in the template:

And immediately before it, paste this code:

<style type="text/css">body, a, a:hover {cursor: url(http://safir85.ucoz.com/bdlab-blogspot/dark_blue_3d_cursor.cur), progress;}</style>

Now Click Save Template

You can change the cursor image just change the above Red code

Some cursors are give bellow

<style type="text/css">body, a, a:hover {cursor: url(http://safir85.ucoz.com/FRUITY_CHERRY_HEART-bdlab.blogspot.com.cur), progress;}</style>




<style type="text/css">body, a, a:hover {cursor: url(http://safir85.ucoz.com/BLOGGER-bdlab.blogspot.com.cur), progress;}</style>




<style type="text/css">body, a, a:hover {cursor: url(http://safir85.ucoz.com/bdlab-blogspot/I_LOVE_MY_BLOG.cur), progress;}</style>




<style type="text/css">body, a, a:hover {cursor: url(http://safir85.ucoz.com/bdlab-blogspot/BLUE_SNOWFLAKE.cur), progress;}</style>




<style type="text/css">body, a, a:hover {cursor: url(http://safir85.ucoz.com/bdlab-blogspot/FRUITY_LIME_HEART.cur), progress;}</style>




<style type="text/css">body, a, a:hover {cursor: url(http://safir85.ucoz.com/bdlab-blogspot/FRUITY_LEMON_HEART.cur), progress;}</style>




<style type="text/css">body, a, a:hover {cursor: url(http://safir85.ucoz.com/bdlab-blogspot/FRUITY_KIWI_HEART.cur), progress;}</style>




<style type="text/css">body, a, a:hover {cursor: url(http://safir85.ucoz.com/bdlab-blogspot/REALLY_ANGRY_ANIME_SMILEY.cur), progress;}</style>





<style type="text/css">body, a, a:hover {cursor: url(http://safir85.ucoz.com/bdlab-blogspot/SORRY_ANIME_SMILEY.cur), progress;}</style>




<style type="text/css">body, a, a:hover {cursor: url(http://safir85.ucoz.com/bdlab-blogspot/WATERMELON.cur), progress;}</style>



<style type="text/css">body, a, a:hover {cursor: url(http://safir85.ucoz.com/bdlab-blogspot/UNBORN_8.0_GREY_POINTER.cur), progress;}</style>


<style type="text/css">body, a, a:hover {cursor: url(http://safir85.ucoz.com/bdlab-blogspot/UNBORN_8.0_GREY_HANDWRITING.cur), progress;}</style>
Note We are going to add more animated and royal cursors oftenly so keep visiting this page.

Baca Selengkapnya: http://www.acehsaya.com/2011/05/cara-mengubah-kursor-mouse-pada-blog.html#ixzz1h5rzp4b2

Anda pengunjung yang ke