Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan

Membuat navigasi nomor halaman di blogspot

Tips dan triks blog yang ingin saya bagikan hari ini adalah bagaimana cara membuat navigasi nomor halaman pada blogspot. Navigasi nomor halaman yang saya maksud adalah nomor halaman yang ada di homepage blog kita. Biasanya pada homepage hanya berisi tulisan 'posting lama' - 'posting baru' dan 'home'. Jadi, disini kita akan memodifikasi sedikit. :D

Beberapa fungsi memasang navigasi nomor halaman pada homepage adalah :
  • Mempermudah pengunjung untuk melihat artikel-artikel kita yang sebelumnya
  • Mempercantik tampilan

Nah, berikut cara membuat navigasi nomor halaman pada blogspot :

1. Sobat login ke blog sobat >> Rancangan >> Edit HTML >> beri tanda centang pada expan widget template

2. Cari tag ]]></b:skin>

3. Copy lalu paste kode CSS berikut diatas ]]></b:skin> 
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

4.  Selanjutnya sobat cari lagi tag </body>

5. Copy kode berikut lalu paste diatas tag </body> tersebut
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
6. Save template sobat dan lihat hasilnya..
Diposting oleh Tidak ada komentar:

Merubah tampilan kursor diblog


Merubah tampilan kursor diblog sangat mudah, salah satu tujuannya adalah mempercantik tampilan blog kita. oke, mari lihat caranya:
1. Login terlebih dahulu di blogger.com
2. masuk kemenu DESIGN > EDIT HTML
3. cari kode </head> (tips: gunakan CTRL+ f untuk mempercepat pencarian)
4. lalu letakkan kode CSS berikut diatasnya:

<style type="text/css">
HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/thumbnails/cool1.gif"), auto;}
</style>

ket:
kode warna merah adalah alamat URL kursor anda, silahkan diganti sesuai keinginan.
5. simpan template anda dan selesai, coba lihat hasilnya.
banyak sekali situs penyedia kursor ribuan bahkan jutaan kursor disana yang bisa anda koleksi, salah satunya http://www.totallyfreecursors.com.

Demikian semoga berhasil.

Diposting oleh Tidak ada komentar:

Zoom Hover Mouse / Disentuh Kursor Mouse Gambar Perlahan Membesar

Manis juga kalau diblog kita setiap gambarnya disentuh kursor mouse gambar/image/icon-nya perlahan membesar.Biar tidak panjang cerita kita langsung aja pasang script hover mouse zoom image. :)
  1. Pertama:
    login di Blogger untuk edit blog kesayangan anda dengan account Google dan password spesial anda.
  2. Ke-Dua:
    klik tab Rancangan dan di susul dengan klik edit HTML
  3. Ke-Tiga:
    klik Download Template Lengkap, simpan hasil unduhan file xml di dalam komputer anda
    waspada itu lebih baik dari pada ntar nyesal :)
  4. Ke-Empat:
    centang Expand Template Widget, biar semua isi template anda terlihat keseluruhannya
  5. Ke-Lima:
    cari code </head>

    ( cara cepat mencari kata/word didalam halaman edit HTML: tekan tombol CTRL + F )

    Letakkan kode berikut di atasnya
    <style type='text/css'>
    {border: none;vertical-align: top;}
    </style>
    <script type='text/javascript'>
    //<![CDATA[
    if (document.images){
    (function(){
    var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
    var expConIm = function(im){
    im = im || window.event;
    if (!expConIm.r.test (im.className))
    im = im.target || im.srcElement || null;
    if (!im || !expConIm.r.test (im.className))
    return;
    var e = expConIm,
    widthHeight = function(dim){
    return dim[0] * cos + dim[1] + 'px';
    },
    resize = function(){
    cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
    im.style.width = widthHeight (e.ims[i].w);
    im.style.height = widthHeight (e.ims[i].h);
    if (e.ims[i].d && times > e.ims[i].jump){
    ++e.ims[i].jump;
    e.ims[i].timer = setTimeout(resize, speed);
    } else if (!e.ims[i].d && e.ims[i].jump > 0){
    --e.ims[i].jump;
    e.ims[i].timer = setTimeout(resize, speed);
    }
    }, d = document.images, i = d.length - 1;
    for (i; i > -1; --i)
    if(d[i] == im) break;
    i = i + im.src;
    if (!e.ims[i]){
    im.title = '';
    e.ims[i] = {im : new Image(), jump : 0};
    e.ims[i].im.onload = function(){
    e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
    e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
    e (im);
    };
    e.ims[i].im.src = im.src;
    return;
    }
    if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
    e.ims[i].d = !e.ims[i].d;
    resize ();
    };
    expConIm.ims = {};
    expConIm.r = new RegExp('\\bexpando\\b');
    if (document.addEventListener){
    document.addEventListener('mouseover', expConIm, false);
    document.addEventListener('mouseout', expConIm, false);
    }
    else if (document.attachEvent){
    document.attachEvent('onmouseover', expConIm);
    document.attachEvent('onmouseout', expConIm);
    }
    })();
    }
    //]]>
    </script>
  6. Ke-Enam
    Simpan Template
selesai dech.


selanjutnya buka halaman posting atau halaman HTML yang ingin anda tautkan image/gambar
Gunakan Kode HTML image berikut:
<img class="expando" border="0" src="URL GAmbar Anda" width="150" height="150">
ganti URL GAmbar Anda dengan URL image/gambar anda

apa bedanya kode diatas dengan code HTML image/gambar seperti biasa yang kita gunakan? bedanya kode image ditambah
class="expando" di depan img menjadi <img class="expando"
sekarang setiap image/gambar yang anda masukkan di dalam kolom posting dan widget HTML yang di bumbui dengan kode class="expando" maka gambar tersebut setiap di sentuh mouse atau kursor mouse berada di atas gambar jangan tekejut kalau gambarnya membesar.

ini baru benar-benar selesai tips and trick Zoom image Cursor Mouse Hover (Gambar membesar saat Kursor Mouse berada diatas Image ). Trick ini rumayan bisa menghibur pengunjung/visitor blog anda

dicoba ya!

demo Zoom Hover Mouse

Diposting oleh Tidak ada komentar:

14 Gambar Status Yahoo Messenger

Berikut Gambar-gambar status Yahoo Messenger yang dapat anda pasang di web anda. Pilih salah satu gambar status Yahoo Messenger di bawah ini, lalu copy scriptnya di bawah gambar tersebut dan paste di web anda. Jangan lupa ganti tulisan YAHOO_ID_ANDA dengan ID Yahoo anda.

1. Status Yahoo Messenger Script :          

2. Status Yahoo Messenger Script :                      


3. Status Yahoo Messenger Script :       


4. Status Yahoo Messenger Script :                           


  5. Status Yahoo Messenger Script :     


6. Status Yahoo Messenger Script :                                   



7. Status Yahoo Messenger Script :       

8. Status Yahoo Messenger Script :                     


9. Status Yahoo Messenger Script :


10. Status Yahoo Messenger Script :


11. Status Yahoo Messenger Script :


12. Status Yahoo Messenger Script :  


13. Status Yahoo Messenger Script :

14. Status Yahoo Messenger Script :  
Diposting oleh Tidak ada komentar:

25 Situs Submit Web Gratis

Jika anda punya web atau blog yang sepi pengunjung, anda bisa mencoba mendaftarkan web/blog anda di submit Search Engine atau direktori.
Terdapat banyak situs di internet yang menyediakan fasilitas submit untuk web/blog, tetapi kebanyakan layanan tersebut mengharuskan kita untuk membayar.
Disini saya mempunyai beberapa kumpulan situs yang menyediakan submit untuk web/blog anda secara gratis :

1. Yahoo! Search
http://search.yahoo.com/info/submit.html

2. Google
http://www.google.com/addurl/?continue=/addurl

3. Live Search
http://search.msn.com/docs/submit.aspx

4. Dmoz Directory
http://www.dmoz.org/add.html

5. Exalead
http://www.exalead.com/search/C=0?definition=submitYourSitePage

6. MavicaNet
http://www.mavicanet.com

7. ScrubTheWeb
http://www.scrubtheweb.com/addurl.html

8. Wikia Search
http://re.search.wikia.com

9. World Site Index
http://www.worldsiteindex.com

10. Cuil
http://www.cuil.com/info/contact_us/feedback/?to=crawl%20me

11. What U Seek
http://www.whatuseek.com/addurl-secondary.shtml

12. ExactSeek
http://www.exactseek.com/add.html

13. BusinessSeek
http://www.businessseek.biz/page.php?page=submission-policy

14. EntireWeb
http://www.entireweb.com/free_submission/

15. SearchMe
http://www.searchme.com/support/submit.php

16. IllumiRate
http://www.illumirate.com/add_your_site_exp.cfm

17. 01WebDirectory
http://www.01webdirectory.com/submit.htm

18. Amfibi
http://addurl.amfibi.com/

19. SearchSight
http://searchsight.com/submit.htm

20. WebbieWorld
http://www.webbieworld.com/signup.asp

21. Web Linker
http://www.wlinker.com/add_submit_url

22. NetInsert
http://www.netinsert.com/en/insert.html

23. SonicRun
http://search.sonicrun.com/add

24. Thales Directory
http://www.thalesdirectory.com/submit.php

25. Link Centre
http://www.linkcentre.com/addurl.html
Diposting oleh Tidak ada komentar:

Membuat Icon Kaskus Pada komentar Blogger

Cara membuat emoticon kaskus di komentar
Hari ini kita sharing tentang cara membuat emoticon kaskus di komentar blog. Semuanya pasti sudah pada tau dengan situs yang satu ini, kalau gak tau gak g4oL..wekekee...
Kaskus adalah sebuah forum online terbesar di indonesia, sampai - sampai saykoji membuat lagu khusus untuk forum yang satu ini, judulnya kaskus anthem :). salah satu yang paling saya sukai
adalah emoticons nya yang gokil dan tidak ada dimana pun. emoticons membuat suasana forum menjadi penuh ekspresif dan terasa hidup, bagaimana jika emoticons itu terletak di kolom komentar blog kita? pastinya blog kita akan tambah seru :)

Mari kita pasang emoticons kaskus nya untuk blog kita. caranya singkat dan mudah :

=> masuk ke akun blogger anda, di dasbor klik rancangan, lalu klik Edit HTML dan centang


=>Cari kode </body> lalu letakkan diatas nya kode berikut:

<script src='http://caraonline.googlecode.com/files/caraonlinekaskus.js' type='text/javascript'/>

=> lalu cari lagi kode <b:include data='post' name='comment-form'/> dan letakkan kode berikut tepat diatasnya :


Simpan template & lihat hasilnya di atas kolom komentar anda.

Sekian tutorial tentang cara membuat / menaruh emoticon kaskus di kolom komentar anda, dan pasti akan saya lanjutkan pada emoticon - emoticon lainnya.

Selamat Mencoba...!!!
Diposting oleh Tidak ada komentar:

Read More/Baca Selengkapnya Otomatis

Apakah Anda ingin menampilkan ringkasan hanya pada halaman utama di blog Anda dengan  menambahkan read more atau baca selanjutnya?
Akhirnya setelah menerapkan banyak cara. Saya menemukan cara terbaik untuk menambah "read more/baca selanjutnya" di blog blogspot saya. Jadi, disini saya akan membagikan caranya untuk hanya menampilkan ringkasan posting anda pada halaman indeks blog Anda dan halaman kategori. Jangan khawati, caranya mudah dan sederhana kok.....

Langkah-langkahnya seperti berikut:
1. Login ke akun blog and, terus pilih  Dashboard --> Template -->  Edit HTML
2. Jangan lupa centang "Expand Widget Templates"
3. Cari (Ctrl+F) kode: </head>
4. Sekarang tambahkan kode berikut sebelum atau diatas kode </head>:
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300;
summary_img = 300;
img_thumb_height = 172;
img_thumb_width = 172;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}


function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");


if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="https://lh3.googleusercontent.com/-vtACBbXECq8/To0xtOBJv_I/AAAAAAAACaI/y4KESK20ess/header-object.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}


if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}


var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}




//]]>
</script>
</b:if>
Catatan: Anda dapat mengubah nilai-nilai pada kode yang berwarna hijau sesuai keinginan anda.
Nilai summary_noimg: mewakili jumlah karakter postingan  tanpa gambar/thumbnail.
Nilai summary_img: mewakili jumlah karakter postingan gambar.
Nilai img_thumb_height: tinggi gambar dalam posting
Nilai img_thumb_width : lebar gambar dalam posting.
Ganti https://lh3.googleusercontent.com/-vtACBbXECq8/To0xtOBJv_I/AAAAAAAACaI/y4KESK20ess/header-object.png dengan  url gambar yang anda inginkan untuk tampil pada postingan yang tidak ada gambar. Gambar hanya akan muncul pada tampilan read more.

5. Selanjutnya cari kode ini:
<data:post.body/>
6. Ganti kode tersebut dengan kode dibawa ini:
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more</b></a></span>
</b:if>
</b:if>
Anda bisa menganti tulisan Read More yang berwarna merah diatas dengan Baca Selengkapnya, Selanjutnya dll. Up to U............

7. Sekarang Save Template anda dan lihat perubahannya


Selamat Mencoba
Diposting oleh Tidak ada komentar:

Kumpulan Menu navigasi Drop-Down Horisontal

 
Menu navigasi berfungsi sangat penting untuk website atau blog. Selain memberikan daya tarik lebih  pada website atau blog. Tapi sangat berguna untuk menavigasi atau memberi petunjuk pada pengunjung untuk memudahkan menelusuri dan melihat seluruh isi yang ada pada website atau blog anda. Ada beberapa bentuk menu navigasi, diantaranya vertikal dan horisontal. Dan keduanya mempunyai fungsi yang sama.
Kali ini saya menampilkan bermacam-macam koleksi menu navigasi Horisontal  yang saya dapat dari Blogger Tips And Tricks. Dan anda bisa membuat dan memiliki menu-menu ini sesuai selera anda. Anda tinggal lihat demonya, baca artikel panduannya, dan coba untuk membuat.

Langsung saja berikut koleksi menu navigasi Drop-Down Horisontal :

1. Advanced CSS Menu

Demo : http://www.webdesignerwall.com/demo/advanced-css-menu/
Article : http://www.webdesignerwall.com/tutorials/advanced-css-menu/
Download : http://www.webdesignerwall.com/file/advanced-css-menu.zip


2.  Bulletproof CSS Sliding Doors

Demo : http://azadcreative.com/files/Bulletproof.zip
Article : http://azadcreative.com/2009/03/bulletproof-css-sliding-doors/
Download : http://azadcreative.com/files/BulletproofSlidingDoors.psd.zip


3.  How to Make a CSS Sprite Powered Menu

Demo : http://s3.amazonaws.com/buildinternet/live-tutorials/css-sprite-menu/css-sprites-nav.html
Article : http://buildinternet.com/2010/01/how-to-make-a-css-sprite-powered-menu/
Download : http://s3.amazonaws.com/buildinternet/live-tutorials/css-sprite-menu/css-sprites-nav.zip


4.  CSS Express Drop-Down Menus

Demo : http://www.projectseven.com/tutorials/navigation/auto_hide/workpage.htm
Article : http://www.projectseven.com/tutorials/navigation/auto_hide/
Download : http://www.projectseven.com/tutorials/navigation/auto_hide/p7exp.zip


5.  CSS3-only horizontal drop line tab menu

Demo : http://www.skyrocketlabs.com/categories/tutorials/css3-only-horizontal-dropline-tab-menu/demo/index.html
Article : http://www.skyrocketlabs.com/articles/css3-only-horizontal-dropline-tab-menu.php
Download : http://www.skyrocketlabs.com/categories/tutorials/css3-only-horizontal-dropline-tab-menu/css3-only-horizontal-dropline-tab-menu.zip


6.  Nicer Navigation with CSS Transitions

Demo : http://www.gethifi.com/blog/nicer-navigation-with-css-transitions
Article : http://www.gethifi.com/blog/nicer-navigation-with-css-transitions



7.  Pure CSS Horizontal Menu

Demo : http://devinrolsen.com/wp-content/themes/typebased/demos/css/css-horizontal-menu/WORKS.php
Article : http://www.devinrolsen.com/pure-css-horizontal-menu/


8.  DropDown CSS Menu

Demo : http://divitodesign.com/dd-articles/horizontal-css-menu/index.html
Article : http://divitodesign.com/css/how-to-dropdown-css-menu/
Download : http://www.divitodesign.com/dd-articles/horizontal-css-menu/horizontal-css-menu.rar


9.  Pure CSS Menu With Infinite Sub Menus Tutorial

Demo : http://www.devinrolsen.com/wp-content/themes/typebased/demos/css/infinite-sub-menu/
Article : http://www.devinrolsen.com/pure-css-menu-with-infinite-sub-menus-tutorial/


10. CSS3 Dropdown Menu

Demo : http://www.webdesignerwall.com/demo/css3-dropdown-menu/
Article : http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/


11. Elegant Drop Menu with CSS Only

Demo : http://aext.net/example/elegant-menu-with-css-only/
Article : http://aext.net/2009/09/elegant-drop-menu-with-css-only/
Download : http://www.box.net/shared/paoqo8y1lt


12. CSS dropdown menu without javascripting or hacks

Demo : http://www.texaswebdevelopers.com/blog/examples/ddmenu2.asp
Article : http://www.texaswebdevelopers.com/blog/template_permalink.asp?id=129


13. Create Vimeo-like top navigation

Demo : http://www.jankoatwarpspeed.com/examples/vimeo_navigation/
Article : http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx
Download : http://www.jankoatwarpspeed.com/file.axd?file=2009%2f1%2fvimeo_navigation.zip


 14. ADxMenu


Demo : http://aplus.rs/adxmenu/examples/htb/
Article : http://aplus.rs/adxmenu/
Download : http://aplus.rs/adxmenu/adxmenu-v4.zip


15.  A Great CSS Horizontal Drop-Down Menu

Demo : http://sperling.com/examples/menuh/
Article : http://sperling.com/examples/menuh/
Download : http://sperling.com/examples/menuh/menuh.css


16. CSS menus

 Demo : http://www.howtocreate.co.uk/tutorials/testMenu.html
Article : http://www.howtocreate.co.uk/tutorials/testMenu.html


17. Pure CSS Fish Eye Menu

Demo : http://www.jampmark.com/html+css-techniques-demos/pure-css-fish-eye-menu-demo.html#expandDown
Article : http://www.jampmark.com/html+css-techniques/pure-css-fish-eye-menu.html
Download : http://www.jampmark.com/downloads/javascript-html-css-codes/pure-css-fish-eye-menu.html


18. A centered menu with gradient and two pointers

Demo : http://www.cssplay.co.uk/menus/two_points.html
Article : http://www.cssplay.co.uk/menus/two_points.html


19. Create an Advanced CSS3 Menu

Demo : http://blog.cameronbaney.com/tutorials/cbdb-menu/demo.html
Article : http://blog.cameronbaney.com/tutorials/advanced-css3-menu/
Download : http://blog.cameronbaney.com/tutorials/cbdb-menu/cbdb-menu.zip


20. Solid Block Menu


Demo : http://www.dynamicdrive.com/style/csslibrary/item/solid_block_menu/
Article : http://www.dynamicdrive.com/style/csslibrary/item/solid_block_menu/
Download : http://www.dynamicdrive.com/cssexamples/media/blockdefault.gif
http://www.dynamicdrive.com/cssexamples/media/blockactive.gif


21. Sleek Pointer Menu

Demo : http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu/
Article : http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu/
Download : http://www.dynamicdrive.com/cssexamples/media/rightround.gif
http://www.dynamicdrive.com/cssexamples/media/pointer.gif


22. Sleek Pointer Menu 2

Demo : http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu-2/
Article : http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu-2/
Download : http://www.dynamicdrive.com/cssexamples/media/rightround2.gif
http://www.dynamicdrive.com/cssexamples/media/pointer.gif


23. How to Create a CSS Menu Using Image Sprites


Demo : http://line25.com/wp-content/uploads/2009/css-menu/demo/demo.html
Article : http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites
Download : http://line25.com/wp-content/uploads/2009/css-menu/demo/awesome-menu.zip


24. CSS Sprite Navigation Tutorial

Demo : http://www.ehousestudio.com/assets/downloads/sprite/
Article : http://www.ehousestudio.com/blog/view/css_sprite_navigation_tutorial
Download : http://www.ehousestudio.com/assets/downloads/sprite.zip

25. CSS Overlapping Tabs Menu

Demo : http://www.tutorialsphere.com/homemade/uploads/2009/02/css-overlapping-tabs-menu.html
Article : http://www.tutorialsphere.com/homemade/2009/02/18/css-overlapping-tabs-menu
Download : http://www.tutorialsphere.com/homemade/uploads/2009/02/tabs.gif


26. CSS Navigation Menus

Article : http://www.jacorre.com/design/cssnavmenus.htm

27.
CSS3 Chunky Menu

Demo : http://zubeta.com/demo-menu.html
Article : http://zubeta.com/css3-menu-demo.html


28. Creating a glassy non div navigation bar

Demo : http://www.james-blogs.com/wp-content/tutorials/glassy-nav-tabs/
Article : http://www.james-blogs.com/2009/01/07/creating-a-glassy-non-div-navigation-bar/
Download : http://www.james-blogs.com/wp-content/tutorials/glassy-nav-tabs/nav-tab-bg.png


29. Centered Tabs with CSS

Demo : http://24ways.org/examples/centered-tabs-with-css/final.html
Article : http://24ways.org/2005/centered-tabs-with-css


30. Apple’s Navigation bar using only CSS

Demo : http://westciv.com/style_master/blog/apples-navigation-bar-using-only-css
Article : http://westciv.com/style_master/blog/apples-navigation-bar-using-only-css


31. Animated horizontal tabs

Demo : http://www.dynamicdrive.com/style/csslibrary/item/animated_horizontal_tabs/
Article : http://www.dynamicdrive.com/style/csslibrary/item/animated_horizontal_tabs/
Download : http://www.dynamicdrive.com/cssexamples/media/tab-blue-right.gif
http://www.dynamicdrive.com/cssexamples/media/tab-blue-left.gif


32. A Horizontal Button Menu - The Easy Way

Demo : http://www.cssplay.co.uk/menus/listnine.html
Article : http://www.cssplay.co.uk/menus/tutorial.html


Naah.... banyak kan...?
sekarang Selamat Mencoba...
Semoga bermanfaat.

Mohon luangkan waktu anda untuk meninggalkan komentar anda ya..... Terima kasih.
Diposting oleh Tidak ada komentar:
Langganan: Postingan (Atom)