Tip Blogger And Tutorial

Cara Membuat Blog Lebih Expressive

2011-04-17T01:50:00.000-07:00

Hallo sobat tua dan muda dimanapun anda berada, kita jumpa lagi dalam acara Trik dan Tips :D . Dalam episode kali ini kita akan mencoba membahas tentang "Bagaimana Cara Membuat Postingan/Content Blog Agar Lebih Expressive. Maksudnya apaan tuh?
Gini lho, kalo di layanan Blog lain semisal Wordpress, setiap kita mengetikkan tanda ini :) maka yang muncul adalah gambar ini :) , kalo tanda ini :p maka yang muncul gambar ini :p dan lain-lain . Nha kalo gitu kan akan membuat blog kita menjadi lebih expressive tuh. Sayangnya bagi kita yang memakai layanan di Blogger tidak mendapat fasilitas tersebut. Tapi tenang aja bung, dalam Trik dan Tips kali ini kita akan mencoba membahas bagaimana supaya bagi kita yang memakai layanan Blogger bisa seperti yang ada di Wordpress. Langkahnya cukup mudah, gini lho.....

1. Login ke blogger trus pilih Layout -->> Edit HTML
2. Beri tanda centang pada jawaban yang benar, eh, maksudnya pada Expand Widget Templates
3. Cari kode ini ]]></b:skin> (letaknya kira2 di bagian tengah posisi kiri)
4. Masukkan script di bawah ini persis dibawah kode ]]></b:skin>

<script src='http://kendhin.890m.com/smile/smile.js' type='text/javascript'/>

Jangan lupa disimpan, trus coba deh kamu posting dengan memakai kode-kode tersebut, Insya4JJI berhasil. kalo gagal coba lagi, kalo masih gagal ya coba sekali lagi, kalo masih gagal lagi ya mengkin servernya lagi down atau itu emang karena kamu kurang beruntung. :D

Berikut ini adalah beberapa standar kode smile yang bisa digunakan :

:) --> :)
:D --> :D
:$ --> :$
:( --> :(
:p --> :p
;) --> ;)
:k --> :k
:@ --> :@
:# --> :#
:x --> :x
:o --> :o
:L --> :L
:O --> :O
:r --> :r
:y --> :y
:t --> :t
:s --> :s
:~ --> :~
:v --> :v
:f --> :f
:d --> :d
:c --> :c
:z --> :z

Sebelum mengetikkan kodenya, harus di spasi dulu.
untuk sementera itu dulu, icon-smile selanjutnya masih dalam penelitian di laboratorium :D

Cara Membuat Read More / Baca Selengkapnya di Blogger

2011-04-17T01:48:00.000-07:00

Biasanya postingan terbaru akan ditampilkan dihalaman utama blog. Namun jika postingan kamu terlalu panjang maka hal tersebut akan membuat penuh halaman utama. Jika kamu ingin supaya postingan kamu yang ditampilkan dihalaman utama cuma abstraksinya saja kemudian ada sebuah link Read More / Baca Selengkapnya untuk melihat selengkapnya maka ikutilah langkah-langkah berikut :

1. Buka menu Layout kemudian pilih Edit HTML.
2. Kasih tanda cek (centang) pada cekbox "expand widget template"
3. Cari kode berikut di Template blog kamu (tempatnya kira-kira pada 1/4 bagian bawah kode hmtl) :

4. Kalau sudah ketemu, Ganti kode kode tersebut sehingga menjadi seperti ini:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

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

<a expr:href='data:post.url'>Read More......</a>
</b:if>

Tulisan "Read More....." itu bisa kamu rubah, misalnya jadi "Baca Selengkapnya".

5. Simpan hasil pengeditan.
6. Kemudian pilih menu Setting lalu pilih Formatting
7. Pada kotak Post Template isikan kode berikut:

8. Kemudian Simpan.
9. Ketika memposting, kan disana ada 2 tab pilihan tuh, yang "Compose" dan "Edit Html", Nha km pilih Yang "Edit HTML", Maka secara otomatis akan tampak kode seperti berikut :

10. Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalama utama (sebelum tulisan "Redmore") diatas kode ini : <span class="fullpost"> sementara sisanya yaitu keseluruhan posting letakkan di antara kode <span class="fullpost"> dan </span>
11. Ini yang paling penting diantara semua proses diatas yaitu ..... Selesai..... he..he..he.. :D
Selamat Mencoba...

Membuat Read More Versi 2

2011-04-17T01:44:00.001-07:00

Lho? maksudnya apa? gini lho kalo read more yang lama, yang sudah pernah dibahas kita bahas dulu (udah baca belum?, kalo belum baca dulu gih disini ), kan kalo kita ng-klik tulisan read more atau Baca Selengkapnya itu kita akan membuka halaman baru sehingga akan meloading lagi halaman web kita, ya tho?. Nha Read more yang ini, yang akan kita bahas ini nggak gitu cara kerjanya, cara kerjanya yaitu berangkat jam 08.00 pagi pulang jam 16.00 WIB (emangnya PNS) :D Gini lho cara kerjanya :
Di trik Read more yang baru ini, kita akan membuat link Read more yang jika kita meng-klik link tersebut, maka keseluruhan artikel akan terpampang dibawahnya, jadi tidak perlu meload ke halaman yang lain, contohnya disini. Piye? uenak tho? bagi yang sudah kebelet ingin menyimak trik ini silahkan langsung ikuti trik berikut ini (langsung loncat dua baris ke bawah). Dan bagi yang kebelet mo pipis silahkan ke kamar mandi dulu :D

Berikut ini langkah-langkahnya:

1. Login ke Blogger
2. Pilih Layout --> Edit HTML
3. Kamu mau memback-up template kamu dulu nggak?, kalo iya kilik tulisan Download Template lalu simpan.
4. JBeri tanda centang pada kotak yang bertuliskan Expand Template Widget
5. Kopi kode berikut ini dan taruh tepat diatas kode </head>

6. Sudah? sudah belum? ditanya kok diam aja gimana sih ? :x
7. Kalo sudah cari kode dibawah ini

(letaknya kira-kira di bagian tengah kebawah. yak terus..terus..Nha disitu ketemu kan kodenya?)

8. Nha dibawahnya kan ada kode gini <div class='post-body entry-content'> Nha ganti kode tersebut menjadi seperti ini:

9.Terus dibawahnya kan kan ada kode gini <p><data:post.body/></p>
10. Tembahkan kode ini dibawahnya.

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

11. jadi seluruh kodenya akan menjadi seperti ini :

<div class='post-header-line-1'/>
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

12. Tulisan 'Selengkapnya' dan 'Ringkasan' bisa diganti dengan apa aja kata yang kamu suka.
13. Lalu simpan template.
14. Pilih menu Setting -->> Formatting
15. Di bagian bawah ada kotak yang disampingnya ada tulisan "Post Template", dan isikan kode dibawah ini ke dalamnya lalu simpan setting.

selesai....

Ohya, kalo memposting pilih yang "Edit Html", letakkan abstraksi posting yg akan ditampilkan di halaman muka di atas kode <span class="fullpost"> sementara sisanya yaitu keseluruhan posting letakkan di antara kode <span id="fullpost"> dan </span>

Trus bagaimana bagi yang sudah pakai 'read more' yang lama dan pingin ganti dengan 'read more' yang baru ini?
gini caranya:

'Read more' yang lama kan kodenya seperti ini :

<div class='post-header-line-1'/>
<div class='post-body entry-conten'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Read More......</a>
</b:if>

hapus text yang berwarna biru, lalu ikuti langkah-langkah diatas.
oh ya jangan lupa ikuti langkah berikut ini
1. Pilih menu Setting -->> Formatting
2. Di bagian bawah ada kotak yang disampingnya ada tulisan "Post Template", dan isikan kode dibawah ini ke dalamnya lalu simpan setting.

bedanya apa sama read more yang dulu? perhatikan text yang berwarna merah, kalo dulu kan tulisannya "class" sekarang ganti menjadi "id".

Gimana? Sudah bisa belum?
Pinter.... anak siapa siiihhh??? duh lutunya :$

Cara Membuat Menu DTree

2011-04-17T01:43:00.000-07:00

Apa itu menu Dtree (D-Tree) ? itu lho menu yang memiliki struktur seperti pohon, yang punya cabang-cabang itu lho, Seperti kalo kita membuka Windows Explorer. Menu yang seperti gambar dibawah ini atau seperti contoh ini.
Menu Dtree ini sangat berguna jika kamu memiliki postingan yang buanyak, karena dengan menggunakan menu Dtree maka akan bisa menghemat space/ruang yang ada di blogmu. Nah kamu pingin tahu cara membuatnya?

Beginilah cara membuatnya :

1. Login to Blogger, trus pilih "Layout --> Edit HTML"
2. Taruh kode berikut ini diatas kode <head>

Domain Dot Com Gratis

2011-04-17T01:40:00.000-07:00

WOW..WOW..WOW...
Mungkin in yang ditunggu-tunggu oleh para bloger maupun para insan yang bergentayangan didunia internet. Bagi kamu yang udah bosen memakai domain blabla.blogspot.com , yaitu kita bisa mendapatkan domain dot com (namamu.com) secara geratis. Benarkah ini nyata? Benarkah domain dot com bener-bener gratis? kayaknya sih emang bener-bener nyata dan gratis, soalnya aku sendiri lom nyoba, tapi setelah aku survey di TKP, dan hasilnya... eng..ing..eng.. kalo menurutku sih masuk akal kalo ini bener-bener gratis.

Trus kenapa mereka mau membuatkan domain dot com buat kita? padahal kan domain dot com (top level domain) itu bukan jenis domain gratisan. Gini nih kalo menurut jawabanku, kenapa kita bisa mendapatkan domain dot com gratis karena mereka akan menempatkan iklan/banner di website kita, tapi jangan kuatir bannernya akan ditempatkan dibagian bawah dari web/blog kita. Nha bagaimana? kamu tertarik mau mencobanya? silahkan daftar disini : DOMAIN DOT COM GRATIS. Oh ya ku lupa, ada beberapa persyaratan lagi yang harus dipenuhi, gini nih beberapa persyaratanya :

1. Web/blog harus memiliki postingan minimal 15 perbulan, atau we/blog kamu memiliki pengunjung minimla 100/hari
2. Kamu harus memasang banner mereka di bagian bawah web/blog kamu.
3. Tidak boleh mengandung unsur pornografi.
4. dll

Intinya syaratnya seperti itu. Nah udha nggak sabar ingin mencobanya? silahkan DAFTAR DISINI

Setting Domain di co.cc

2011-04-17T01:38:00.001-07:00

Seperti yang sudah kita ketahui, bahwa co.cc adalah top level domain yang bisa kita dapatkan secara gratis. Kita bisa mengganti nama blog kita dari "http://namadomain.blogspot.com" atau "http"//namadomain.wordpress.com" (dll) menjadi "http://namadomain.co.cc" . Dengan co.cc kita bisa mengontrol DNS Records, A, MX, dan CNAME records, sehinga domain co.cc bukan hanya sekedar "URL Forwarding".
Berikut ini akan saya coba mengungkapkan tentang cara setting domain di co.cc:

Ada 3 tipe pengaturan di co.cc. Ketiganya memiliki fungsi tersendiri. berikut ini penjelasanya:

1. Managed DNS
Ini biasanya digunakan untuk sebuah web yang memerlukan web hosting dan mengharuskan untuk mengarahkan Name Server-nya ke hosting tersebut. Misal untuk membuat web di 000webhost, atau bisa juga untuk blog wordpress yg menggunakan hosting dari luar. Metode ini tidak cocok digunakan untuk blogger/blogspot yang menggunakan hosting default dari blogger/blogspot.
Cara setting untuk metode ini yaitu dengan mengisi pada kolom "Name Server 1 dan Name Server 2 dengan name server yg sesuai dengan hosting yang digunakan. Misal, bagi yang menggunakan hosting dari 000webhost maka untuk kolom "Name Server 1" disi dengan "ns01.000webhost.com" dan kolom "Name Server 2" disi dengan "ns02.000webhost.com". Kemudian klik tombol "Setup". Selesai

2. Zone Records
Zone records cocok digunakan bagi para pengguna blogger/blogspot. berikut ini cara setting untuk Zone Records

Pada kolom "Host" isikan dengan nama domain yg sudah km daftarkan, misal "www.namadomain.co.cc" (jangan lupa dikasih "www")
Untuk option "TTL" biarkan saja, gak perlu dirubah2
Pada option "Type" pilih yang "CNAME"
Untuk kolom "Value" isikan "ghs.google.com"

Langkah selanjutnya yaitu merubah settingan di blogger/blogspot caranya begini:

Login ke blogger/blogspot kemudian masuk ke menu "Setting-->Publishing"
Kemudian pilih "Switch to: • Custom Domain
Setelah itu klik pada "Already own a domain? Switch to advanced settings"
Kemudian isikan nama domain kamu yang baru pada kolom "Your Domain".

Selanjutnya klik tombol "Save Setting"

Selesai. Kalau berhasil (Settingnya sudah benar) maka domain kamu yang baru akan aktif dalam waktu antara beberapa jam sampai 2 hari. Jadi sabar aja menunggunya. Blog kamu akan tetap bisa diakses dengan melalui domain yang lama.

3. URL Forwarding
URL forwarding bisa digunakan untuk apa aja, bisa web ato blog. Tapi URL Forwarding ini hanya memforward domain yg baru (yang di co.cc) ke domain lama. Jadi domain lama akan 100% seperti semula tanpa ada perubahan apapun, cuma kita bisa mengakses web/blog kita dengan mengetikkan nama domain baru kita di browser. Jika menggunakan URL Forwarding maka yang terindex di google atau Search engine yang lain adalah tetap Domain kita yang lama.
Untuk setting URL Forwarding sangat mudah, kita hanya mengisikan data-data yang diminta dan disesuaikan dengan web/blog kita, seperti "Redirect to:, Page Title, URL Hiding, Meta Description dan Meta Keywords". Kita tidak perlu lagi mensetting domain di web/blog kita lagi.
Note: Metode ini tidak dianjurkan jika tidak terpaksa

Jadi kesimpulannya adalah:

Jika kamu memakai layanan blogger/blogspot maka gunakanlah "Zone Records"
Jika domainnya digunakan untuk web yg memerlukan hosting atau untuk wordpress maka gunakanlah "Manage DNS"
Jangan menggunakan "URL forwarding" jika tidak terpaksa. Misal untuk untuk blog dari multiply yang tidak support custom domain.

11 Sites to find +1000 free twitter Buttons and badges

2011-04-11T10:22:00.000-07:00

Now a days twitter getting more users and ranking in amazing rates, I think 100% of my friends , allblogtools.com visitors and blogger users are using it in regular basis, twitter have been a basic site that we all use it every day, and i can say every few minutes.
so we released a new tool few day ago. Twitter Static Badge Generator For Blogger., this is the first tool that enables you to put a twitter badge on your blogger blog in very easy steps. you can choose your own badge, and it’s position on your blog. left or right, top or bottom.
after releasing it. some of our regular visitors contacted me and asked about where to find free twitter badges to use it on their blogs.
And here is list of awesome 11 sites you can find more than 1000 twitter badges on it.
badges are usually in gif Or png formats.
to use a badge on your blog using our tool, you have to get the badge url, and it’s easy, just browse the 11 sites below. once you find your favorite badge, right click it. and in Firefox,select Copy Image Location, in Internet Explorer select Properties and copy the image URL then you can use this url in our twitter tool.

here is the 11 sources.

1 . LimesHot

Follow Me On Twitter Badges / Logos / Buttons

2 . randaclay

Free Twitter Graphics

3 . Twitter Logos

Twitter Logos

4 . Siah Design

FREE TWITTER BUTTONS (Includes Animated GIFs)

5 . Vincent Abry

31 Logos et boutons pour Twitter

6 . Twitter Buttons

Twitter Buttons

7 . We Function

sourcename

8 . U Stand Out

Free Twitter Badges For Your Website or Blog

9 . WebDesign-In

10 Twitter Buttons for free

10 . Juliusx @ deviantArt

Twitter Icons

11 . Twitter My Site

Twitter Icons

Please share and follow us if you found this was useful for you.

31 Logos et boutons pour Twitter (Twitter Buttons)

2011-04-11T10:14:00.000-07:00

Day and Night: Creating a Scenery Animation with jQuery and CSS

2011-04-04T10:01:00.001-07:00

View demo Download source

In today’s tutorial I am going to show you, how to create an amazing animated scenery with just a few lines of jQuery and some absolute positioned elements with images.

See the demo link below and check out the result. The animation takes around 30 seconds, so sit back and enjoy it!

Please note that this will NOT work in any IE version. Not because it is not possible, I simply did not have the time and energy for that. I was trying to fix it at least for IE 8 but you know, when coding starts to get ugly because of “fixing” it for IE, I sometimes loose my patience. Today was one of these days (I bet you all have them) where you say: Darwin, I Ching … IE has to die out (and not only IE6), no, the whole line!

Ok, let’s start with the coding.

1. The HTML

The HTML consists of the divs that will have the scenery as background images. So, we will have the sky, the sun, the clouds, the landscape, the moon and the stars. We will also have an element for the night and a shooting star:

<div id="sky"></div>
<div id="sun_yellow"></div>
<div id="sun_red"></div>
<div id="clouds"></div>
<div id="ground"></div>
<div id="night"></div>
<div id="stars"></div>
<div id="sstar"></div>
<div id="moon"></div>

The color change of the setting sun is simulated by the fading in of another red sun, while the yellow sun fades out.

But before we get into the animation details, let’s take a look at the CSS.

2. The CSS

The CSS is very similar for all of the elements, since most of them will be stretched over the screen. All of them have absolute positioning:

body{
    overflow:hidden;
}
#clouds, #sky, #night, #stars{
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    width:100%;
}

When having common attributes, we can specify them for all the classes divided by commas.

#sky{
    background:#fff url(../images/sky.png) repeat-x top left;
    z-index:1;
}

The sky is composed of a semi-transparent images with a gradient from blue to white. This will give a nice effect to the sky.

#sun_yellow{
    position:absolute;
    left:45%;
    top:50%;
    width:150px;
    height:152px;
    background:transparent url(../images/sun.png) no-repeat center center;
    z-index:2;
}
#sun_red{
    position:absolute;
    left:45%;
    top:50%;
    width:150px;
    height:152px;
    background:transparent url(../images/sun2.png) no-repeat center center;
    z-index:2;
    opacity:0;
}

In the beginning of the animation, when it is daytime, we want to show a yellow sun. The sun will set, i.e. move down, and fade out slowly. At the same time, we will fade in the red sun, that will be moving the same way. So, initially, we set the position to somewhere in the center of the screen. Then, we will animate the movement and the fade out/in effects.

#clouds{
    background:transparent url(../images/clouds.png) repeat-x top left;
    z-index:3;
}
#ground{
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    width:100%;
    height:232px;
    background:transparent url(../images/ground.png) repeat-x bottom center;
    z-index:3;
}

The clouds and the landscape will be repeated because we want users with a bigger screen to see a complete scenery as well. Try to zoom in/out in your browser and you will see that the screen is always filled with the images. Since we set the overflow of the body to be hidden, the user will never have to scroll – he simply won’t see anything that goes beyond the browser edges.

#night{
    background-color:#000;
    z-index:4;
    opacity:0;
}
#stars{
    bottom:200px;
    background:transparent url(../images/stars.png) repeat bottom center;
    z-index:5;
    opacity:0;
}

The night will simply be a div stretched over all the screen with a background color of black. We will make it appear slowly by setting its opacity higher, hence making it less transparent.

#sstar{
    position:absolute;
    left:40%;
    top:10%;
    width:126px;
    height:80px;
    background:transparent url(../images/shootingstar.png) no-repeat 80px -200px;
    z-index:5;
    opacity:0;
}

The shooting star will be a special element: the image is a simple inclined white line. We will make it appear like a shooting star by moving its background position and fading it out. Because of that, we need to set the initial background position to 80px horizontally (xpos) and -200px vertically (ypos). So basically, we want to place it in the outer top right corner and then make it appear in the “visible area”.

#moon{
    position:absolute;
    left:45%;
    top:60%;
    width:168px;
    height:168px;
    background:transparent url(../images/moon.png) no-repeat center center;
    z-index:6;
    opacity:0;
}

With the increasing z-indexes, we define which element will be on top of the other. Of course, if we list them in the HTML accordingly, we will have the same effect, but it is always better to make sure of it in the CSS. To all the elements that we don’t want to show from the beginning on, we give an opacity value of 0, hence making them transparent.

And that’s the CSS part. Now, let’s look at the magical JavaScript.

3. The JavaScript

In order to animate the background color of the sky, we will use a jQuery plugin which can be found here. Simply include it after you include the main jQuery script.

Let’s first take a look at the whole JavaScript that we will define:

$(function() {
   $('#sun_yellow').animate({'top':'96%','opacity':0.4}, 12000,function(){
       $('#stars').animate({'opacity':1}, 5000,function(){
            $('#moon').animate({'top':'30%','opacity':1}, 5000, function(){
                $('#sstar').animate({'opacity':1}, 300);
                $('#sstar').animate({
                    'backgroundPosition':'0px 0px','top':'15%', 'opacity':0
                }, 500);
            });
       });
   });
   $('#sun_red').animate({'top':'96%','opacity':0.8}, 12000);
   $('#sky').animate({'backgroundColor':'#4F0030'}, 18000);
   $('#clouds').animate({'backgroundPosition':'1000px 0px','opacity':0}, 30000);
   $('#night').animate({'opacity':0.8}, 20000);
});

In line 2 and 12 to 16 we define what shall happen at the same time. The last integer stands for the milliseconds, the duration of the effect. The yellow sun shall take 12 seconds to move down and to become more transparent, while at the same time, the red sun becomes more opaque (but it moves down, too).

The sky (line 13) shall take 18 seconds to change its background color from white (like we defined in the CSS) to a dark purple.

The clouds (line 14) will appear to be moving because we define an animated change of the background position which takes 30 seconds. We also state that they shall become transparent in the end (so that we have a clear night sky).

Since we want the whole scenery to get darker, we make the night fall by increasing the opacity of the black div.

Now, let’s see what happens in the functions that should start after the sun has set (line 3 to 10).
First, we want the stars to slowly “fade in” by setting the opacity higher. After that has happened, we want the moon to appear from bottom to the center by fading in. Then, the shooting star shall appear. This we simulate by changing it’s background position to 0px 0px and moving it down a little bit. Additionally, to make it a real shooting star, we make it disappear very quickly :) by setting the opacity to 0.

And that’s it! I hope you enjoyed it!

View demo Download source

jPaginate: A Fancy jQuery Pagination Plugin

2011-04-04T09:59:00.000-07:00

jPaginate is a jQuery pagination plugin that comes with a twist: animated page numbers. The user can slide through the available page numbers by clicking or just hovering over the arrows. Shortlinks to the first and last page are available as well.

You can call the plugin in the following way:

$(elementID).paginate()

You can configure the plugin with the following properties:

count: The total number of pages
start: With which number the visible pages should start
display: How many page numbers should be visible
border: If there should be a border (true/false)
border_color: Color of the border
text_color: Color of the text/numbers
background_color: Background color
border_hover_color: Border color when hovering
text_hover_color: Text color when hovering
background_hover_color: Background color when hovering
images: If the arrows should be images or not (true/false)
mouse: With value “press” the user can keep the mouse button pressed and the page numbers will keep on sliding. With value “slide” the page numbers will slide once with each click.
onChange: The callback function when clicking on a page. As argument the number of the page clicked can be used.

View demo Download jPaginate

A Fresh Bottom Slide Out Menu with jQuery

2011-04-04T09:56:00.001-07:00

View demo Download source

In this tutorial we will create a unique bottom slide out menu. This large menu will contain some title and a description of the menu item. It will slide out from the bottom revealing the description text and some icon. We will use some CSS3 properties for some nice shadow effects and jQuery for the interaction.

The Luna Grey iconset can be downloaded at DryIcons: http://dryicons.com/free-icons/preview/luna-grey-icons/

In the downloadable ZIP I will not be able to provide them, but I kept the naming, so that you can easily integrate it.

Ok, let’s start with the Markup.

The Markup

The menu will be placed inside of a container. The menu itself will be an unordered list with link elements inside. The link elements will contain two spans: one for the title and one for the description. We will also have an i element for the icon:

<div class="container">
 <ul id="menu">
  <li>
   <a>
    <i class="icon_about"></i>
    <span class="title">About</span>
    <span class="description">
     Learn about us and our services
    </span>
   </a>
  </li>
   <li>
   <a>
    <i class="icon_work"></i>
    <span class="title">Work</span>
    <span class="description">
     See our work and portfolio
    </span>
   </a>
  </li>
  <li>
   <a>
    <i class="icon_help"></i>
    <span class="title">Help</span>
    <span class="description">
     Talk to our support
    </span>
   </a>
  </li>
   <li>
   <a>
    <i class="icon_search"></i>
    <span class="title">Search</span>
    <span class="description">
     Search our website
    </span>
   </a>
  </li>
 </ul>
</div>

Don’t forget to adapt the link element and to add your destination into an href if you need to.

The CSS

Let’s start with the style of the surrounding container. The container will be of relative position since we will make the menu absolute. We will have to hide the description part of the menu items and so we will hide any overflow of the container. If you place this menu absolutely to the page, i.e. at the bottom, the description part will simply disappear outside of you window. This container allows you to see how to implement this menu relatively to some other element:

.container{
    width:900px;
    height:130px;
    margin:0 auto;
    position:relative;
    overflow:hidden;
    border:3px solid #fff;
 background-color:#fff;
    -moz-box-shadow:1px 1px 6px #000;
    -webkit-box-shadow:1px 1px 6px #000;
    -moz-border-radius:0px 0px 20px 20px;
    -webkit-border-bottom-left-radius:20px;
    -webkit-border-bottom-right-radius:20px;
    border-radius:0px 0px 20px 20px;
}

We create some fancy shadowing and rounded borders with the CSS3 properties. Keep in mind that they will only work in modern browsers (so, basically all except marvelous IE).
The list will have the following style:

ul#menu{
    list-style:none;
    position:absolute;
    bottom:0px;
    left:20px;
    font-size:36px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    color:#999;
    letter-spacing:-2px;
}
ul#menu li{
    float:left;
    margin:0px 10px 0px 0px;
}
ul#menu a{
    cursor:pointer;
    position:relative;
    float:left;
    bottom:-95px;
    line-height:20px;
    width:210px;
}

As you can see, we hide the push the link element down in order to almost hide the description span. We do that by giving a negative bottom position. You can adapt this value to make the span appear a little bit more or not at all.
Now, let’s take a look at the classes for the icons:

.icon_about,
.icon_work,
.icon_help,
.icon_search{
    width:64px;
    height:64px;
    display:block;
    left:140px;
    top:50px;
    position:absolute;
}
.icon_about{
    background:transparent url(../images/id_card.png) no-repeat top left;
}
.icon_work{
    background:transparent url(../images/globe.png) no-repeat top left;
}
.icon_help{
    background:transparent url(../images/help.png) no-repeat top left;
}
.icon_search{
    background:transparent url(../images/find.png) no-repeat top left;
}

The CSS of the title and description spans will look as follows:

ul#menu span.title{
    display:block;
    height:26px;
    text-shadow:1px 1px 1px #000;
    color:#B7B7B6;
    text-indent:10px;
}
ul#menu span.description{
    width:140px;
    height:80px;
    background-color:#B7B7B6;
    border:3px solid #fff;
    color:#fff;
    display:block;
    font-size:24px;
    padding:10px;
    -moz-box-shadow:1px 1px 6px #000;
    -webkit-box-shadow:1px 1px 6px #000;
    box-shadow:1px 1px 6px #000;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}

We also want the two spans to change text and background color, so we define the style for the hover of the parent link element:

ul#menu a:hover span.description{
    background-color:#54504F;
}
ul#menu a:hover span.title{
    color:#54504F;
}

And that’s all the style. Now, let’s add some nice interaction effects with jQuery.

The Javascript

The JavaScript will be pretty straightforward since we will only do two things: slide out the link element and the icon. The following function makes that happen (and the opposite when we move the mouse out):

$(function() {
    $('#menu > li').hover(
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-15px'
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'-10px'
                }, 400);
        },
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-95px'
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'50px'
                }, 400);
        }
    );
});

In order to slide out the link element, we change the bottom position and animate that. For the icon we change the top value and give the effect more time, since we want to create a little delay.

And that’s it! Enjoy it!

View demo Download source

Sliding Panel Photo Wall Gallery with jQuery

2011-04-04T09:54:00.003-07:00

View demo Download source

Today we will create a stunning full page photo wall gallery. The idea is to have a whole page full of thumbs with a nice light effect when we hover. When an image is clicked, a panel slides up from the bottom revealing the full picture. When clicking on the full image, the thumbs panel slide back from the bottom. This effect will give the impression that we are stacking the panels on top of each other every time we change the mode. In the full picture view we add some nice transition effect when we browse through the photos.

In addition, we will use a function for resizing the full image, adapting it to the size of the screen. So, when the screen get’s resized, our image will adapt automatically!

The beautiful images in the demo are from Vincent Boiteau’s photostream on Flickr.

This tutorial will be a little bit more complex than usual, so I will give my best to explain things clearly.

Let’s get started with the markup.

The Markup

The HTML structure consists of three main containers: one for the info bar at the bottom of the page, one for the thumbnails and one panel container for the full image:

<div class="infobar">
 <span id="description"></span>
 <span id="loading">Loading Image</span>
</div>
<div id="thumbsWrapper">
 <div id="content" >
  <img src="thumbs/1.JPG" alt="images/1.JPG" title="something"/>
  <img src="thumbs/2.JPG" alt="images/2.JPG" title="something"/>
  ...
  <div class="placeholder"></div>
 </div>
</div>
<div id="panel">
 <div id="wrapper">
  <a id="prev"></a>
  <a id="next"></a>
 </div>
</div>

The info bar container has a span for the image description and one for the loading display. The thumbnail wrapper contains a content container for all the small images. The very last element after the thumbnails is a placeholder. We need to add some space to the end because we don’t want the thumbnails to get covered by the info bar. Since we don’t want to use any paddings or margins in our containers, we simply add another filler element.

The structure for the panel contains a wrapper for the full image and two navigation items. In our JavaScript function we will add the full size image to this wrapper.

Now, let’s take a look at the style.

The CSS

First, we will define some general style for the page:

*{
    margin:0;
    padding:0;
}
body{
    background-color:#000;
    font-family:Verdana;
    text-transform:uppercase;
    color:#fff;
    font-size:10px;
    overflow:hidden;
}

The body needs to get the property overflow hidden, because we will set the scroll bar for the thumbs view only. If we would add scrolling to the page, the scroll bar would appear when the full image panel slides up. We avoid that by saying that the overflow will be hidden for the body.

The info bar will have a fixed position. We always want it to be visible and at the same place in the page:

.infobar{
    background-color:#000;
    height:28px;
    line-height:28px;
    right:20px;
    position:fixed;
    bottom:0px;
    left:20px;
    z-index:999999999;
    text-align:center;
    color:#ddd;
    -moz-border-radius:10px 10px 0px 0px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    text-shadow:0px 0px 1px #ccc;
}

We add some border radius for rounded borders. We set the z-index crazily high since we want the element to be always on top. of course you could just use a value like 15 or 50. Just be careful with the other elements that will get a new z-index dynamically in the JS. The highest one of them is 10.

The description and the loading item will have the following style:

span#description{
    text-shadow:1px 1px 1px #000;
    display:none;
}
span#loading{
    display:none;
    padding-right: 30px;
    background:transparent url(../loading.gif) no-repeat center right;
}

The loading item will have a loading image as background.

The thumbs wrapper will have a panel like style. We set it fixed, occupying the whole screen.Important for the effect is the bottom:0px since we will want the wrapper to come up from the bottom by animating its height. Again, we set the overflow to hidden, since we just want the content container to have a scroll bar.

#thumbsWrapper{
    overflow:hidden;
    position:fixed;
    height:100%;
    width:100%;
    left:0px;
    right:0px;
    bottom:0px;
}

The content wrapper will also occupy all the page. The vertical scroll bar we set explicitly by saying overflow-y:scroll (auto would be the default value). Initially, we want this container to be invisible because we don’t want to show the scroll bar while there is nothing on the page during the initial loading time.

#content{
   position:absolute;
   top:0px;
   height:100%;
   width:100%;
   left:0px;
   background-color:#111;
   overflow-y:scroll;
   display:none;
}

The images in the content container will float left and have an opacity of 0.4. The hover function will then increase opacity, giving the whole thing a spotlight effect.

#content img{
    float:left;
    margin:2px;
    cursor:pointer;
    opacity:0.4;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
}

The placeholder will make sure that our thumbs don’t get covered by the info bar when we are at the bottom of the page:

.placeholder{
    float:left;
    clear:both;
    width:100%;
    height:30px;
}

The panel will have the following style similar to the style of the thumbs wrapper:

#panel{
    background-color:#222;
    width:100%;
    position:fixed;
    bottom:0px;
    left:0px;
    right:0px;
    height:0px;
    text-align:center;
}

Initially, the

#panel img{
    cursor:pointer;
    position:relative;
    border:1px solid #000;
    -moz-box-shadow:0px 0px 10px #111;
    -webkit-box-shadow:0px 0px 10px #111;
    box-shadow:0px 0px 10px #111;
    display:none;
}

We set it to display:none since we will make it appear by fading it in. This will create a nice effect.

The image wrapper be centered horizontally. This we achieve by setting the left and right margins to auto.

#wrapper{
    position:relative;
    margin:40px auto 0px auto;
}

The navigation items will have the following style:

a#next,
a#prev{
    width:40px;
    height:40px;
    position:fixed;
    cursor:pointer;
    outline:none;
    display:none;
    background:#aaa url(../nav.png) no-repeat top left;
}
a#next:hover, a#prev:hover{
    background-color:#fff;
}
a#next{
    right:0px;
    top:50%;
    margin-top:-20px;
    background-position: 0px 0px;
}
a#prev{
    left:0px;
    top:50%;
    margin-top:-20px;
    background-position: 0px -40px;
}

We give the navigation items a fixed position. To center an absolute or fixed element horizontally (or vertically) you can give it a top (or left) value of 50% and then a negative top (or left) margin of half of its height (or width). Since the navigation item is 40px high, our top margin is is -20px.

And that was all the style. Now, let’s take a look at the JavaScript magic:

The JavaScript

OK, don’t scare, it’s a bit lengthy… but don’t worry, most of it is comments and code indention :)
Our main functions fire when we click on a thumb or click on a full image.

When clicking on a thumbnail (line 34) we first show our loading item in the info bar. Then we say to load the respective image (line 40) with the source being the alt attribute of the thumb we clicked (line 92). Everything that is inside of the load function will just be executed after the image is loaded (line 41 to 93). So, we hide the loading item from the info bar, resize the image to fit into the viewport and append the image element to the wrapper. Then we fade it in (line 54) and slide up the panel where we will see the full image and the fading in effect still executing (57 – 91). We also show the description and the navigation items, and finally we make the thumbs wrapper disappear by setting the height to 0 (line 90). We do that because we want it sliding back from the bottom when we click on the full image.

For the click event on the full image (line 101 to 119) we need to use “live” since the img element is not there in the beginning but it is created dynamically. We animate the thumbs wrapper and set the panel to zero height.

The functions for browsing through the full images check which thumb image is the previous or next one and according to that we set the next or previous full image (line 128 to 137). For that we use the navigate function (line 143 to 191).

From line 18 to 26 we say that we want the full size picture to be resized whenever we resize the window. The resize function is defined from line 197 until 237. We also resize the wrapper around the image.

$(function() {
 /* this is the index of the last clicked picture */
 var current = -1;
 /* number of pictures */
 var totalpictures = $('#content img').size();
 /* speed to animate the panel and the thumbs wrapper */
 var speed  = 500;

 /* show the content */
 $('#content').show();

 /*
 when the user resizes the browser window,
 the size of the picture being viewed is recalculated;
  */
 $(window).bind('resize', function() {
  var $picture = $('#wrapper').find('img');
  resize($picture);
 });

 /*
 when hovering a thumb, animate it's opacity
 for a cool effect;
 when clicking on it, we load the corresponding large image;
 the source of the large image is stored as
 the "alt" attribute of the thumb image
  */
 $('#content > img').hover(function () {
  var $this   = $(this);
  $this.stop().animate({'opacity':'1.0'},200);
 },function () {
  var $this   = $(this);
  $this.stop().animate({'opacity':'0.4'},200);
 }).bind('click',function(){
  var $this   = $(this);

  /* shows the loading icon */
  $('#loading').show();

  $('').load(function(){
   $('#loading').hide();
   if($('#wrapper').find('img').length) return;
   current  = $this.index();
   var $theImage   = $(this);
   /*
   After it's loaded we hide the loading icon
   and resize the image, given the window size;
   then we append the image to the wrapper
   */
   resize($theImage);

   $('#wrapper').append($theImage);
   /* make its opacity animate */
   $theImage.fadeIn(800);

   /* and finally slide up the panel */
   $('#panel').animate({'height':'100%'},speed,function(){
    /*
    if the picture has a description,
    it's stored in the title attribute of the thumb;
    show it if it's not empty
     */
    var title = $this.attr('title');
    if(title != '')
     $('#description').html(title).show();
    else
     $('#description').empty().hide();

    /*
    if our picture is the first one,
    don't show the "previous button"
    for the slideshow navigation;
    if our picture is the last one,
    don't show the "next button"
    for the slideshow navigation
     */
    if(current==0)
     $('#prev').hide();
    else
     $('#prev').fadeIn();
    if(current==parseInt(totalpictures-1))
     $('#next').hide();
    else
     $('#next').fadeIn();
    /*
    we set the z-index and height of the thumbs wrapper
    to 0, because we want to slide it up afterwards,
    when the user clicks the large image
     */
    $('#thumbsWrapper').css({'z-index':'0','height':'0px'});
   });
  }).attr('src', $this.attr('alt'));
 });

 /*
 when hovering a large image,
 we want to slide up the thumbs wrapper again,
 and reset the panel (like it was initially);
 this includes removing the large image element
  */
 $('#wrapper > img').live('click',function(){
  $this = $(this);
  $('#description').empty().hide();

  $('#thumbsWrapper').css('z-index','10')
  .stop()
  .animate({'height':'100%'},speed,function(){
   var $theWrapper = $(this);
   $('#panel').css('height','0px');
   $theWrapper.css('z-index','0');
   /*
   remove the large image element
   and the navigation buttons
    */
   $this.remove();
   $('#prev').hide();
   $('#next').hide();
  });
 });

 /*
 when we are viewing a large image,
 if we navigate to the right/left we need to know
 which image is the corresponding neighbour.
 we know the index of the current picture (current),
 so we can easily get to the neighbour:
  */
 $('#next').bind('click',function(){
  var $this           = $(this);
  var $nextimage   = $('#content img:nth-child('+parseInt(current+2)+')');
  navigate($nextimage,'right');
 });
 $('#prev').bind('click',function(){
  var $this           = $(this);
  var $previmage   = $('#content img:nth-child('+parseInt(current)+')');
  navigate($previmage,'left');
 });

 /*
 given the next or previous image to show,
 and the direction, it loads a new image in the panel.
  */
 function navigate($nextimage,dir){
  /*
  if we are at the end/beginning
  then there's no next/previous
   */
  if(dir=='left' && current==0)
   return;
  if(dir=='right' && current==parseInt(totalpictures-1))
   return;
  $('#loading').show();
  $('').load(function(){
   var $theImage = $(this);
   $('#loading').hide();
   $('#description').empty().fadeOut();

   $('#wrapper img').stop().fadeOut(500,function(){
    var $this = $(this);

    $this.remove();
    resize($theImage);

    $('#wrapper').append($theImage.show());
    $theImage.stop().fadeIn(800);

    var title = $nextimage.attr('title');
    if(title != ''){
     $('#description').html(title).show();
    }
    else
     $('#description').empty().hide();

    if(current==0)
     $('#prev').hide();
    else
     $('#prev').show();
    if(current==parseInt(totalpictures-1))
     $('#next').hide();
    else
     $('#next').show();
   });
   /*
   increase or decrease the current variable
    */
   if(dir=='right')
    ++current;
   else if(dir=='left')
    --current;
  }).attr('src', $nextimage.attr('alt'));
 }

 /*
 resizes an image given the window size,
 considering the margin values
  */
 function resize($image){
  var windowH      = $(window).height()-100;
  var windowW      = $(window).width()-80;
  var theImage     = new Image();
  theImage.src     = $image.attr("src");
  var imgwidth     = theImage.width;
  var imgheight    = theImage.height;

  if((imgwidth > windowW)||(imgheight > windowH)){
   if(imgwidth > imgheight){
    var newwidth = windowW;
    var ratio = imgwidth / windowW;
    var newheight = imgheight / ratio;
    theImage.height = newheight;
    theImage.width= newwidth;
    if(newheight>windowH){
     var newnewheight = windowH;
     var newratio = newheight/windowH;
     var newnewwidth =newwidth/newratio;
     theImage.width = newnewwidth;
     theImage.height= newnewheight;
    }
   }
   else{
    var newheight = windowH;
    var ratio = imgheight / windowH;
    var newwidth = imgwidth / ratio;
    theImage.height = newheight;
    theImage.width= newwidth;
    if(newwidth>windowW){
     var newnewwidth = windowW;
     var newratio = newwidth/windowW;
     var newnewheight =newheight/newratio;
     theImage.height = newnewheight;
     theImage.width= newnewwidth;
    }
   }
  }
  $image.css({'width':theImage.width+'px','height':theImage.height+'px'});
 }
});

For further details, check the comments in the code, they describe what is done in the moment.

And that’s it! I hope you enjoyed the tutorial and the result!

View demo Download source

CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation

2011-04-04T09:52:00.003-07:00

View demo Download source

Today I want to show you, how to create an Apple-style navigation menu with a twist. Although “fancy” and “Apple-style” don’t really go together, I thought that it’s time for something different.

This menu looks very similar to the Apple-style navigation but it reveals some icons when hovering over it. The icons slide out from the top and when the mouse leaves the link, the icon slides back under the link element. This creates a neat “card-shuffle” effect.

The icons used in this tutorial can be found on DryIcons.com. I am not allowed to redistribute the icons under the free license, so I did not include them in the downloadable ZIP file. But you can easily find them here. I did not rename them for the tutorial so that you can easily recreate the navigation without changing the names or the stylesheet.

Ok, let’s get started!

1. The HTML

The markup just consists of a div with an unordered list inside. The list elements contain a span for the icon and the link element:

<div class="navigation">
 <ul class="menu" id="menu">
 <li><span class="ipod"></span><a href="" class="first">Players</a></li>
 <li><span class="video_camera"></span><a href="">Cameras</a></li>
 <li><span class="television"></span><a href="">TVs</a></li>
 <li><span class="monitor"></span><a href="">Screens</a></li>
 <li><span class="toolbox"></span><a href="">Tools</a></li>
 <li><span class="telephone"></span><a href="">Phones</a></li>
 <li><span class="print"></span><a href="" class="last">Printers</a></li>
 </ul>
</div>

2. The CSS

The style of the navigation container and the unordered list will be the following:

.navigation{
    position:relative;
    margin:0 auto;
    width:915px;
}
ul.menu{
    list-style:none;
    font-family:"Verdana",sans-serif;
    border-top:1px solid #bebebe;
    margin:0px;
    padding:0px;
    float:left;
}
ul.menu li{
    float:left;
}

Since we are making the list float, we will need some relative wrapper for the icons. You see, the icons which will be the background-images of the spans in our list, will have absolute positioning. That comes handy when you need to define a z-index, i.e. saying that some element is on top or under another one. Since we want the icons to appear on top and then dissapear under the link element, we will have to deal with z-indeces. And absolute positioning of elements in a relative container will makes things easier.

Now, let’s define the style for the link elements:

ul.menu li a{
    text-decoration:none;
    background:#7E7E7E url(../images/bgMenu.png) repeat-x top left;
    padding:15px 0px;
    width:128px;
    color:#333333;
    float:left;
    text-align:center;
    border-right:1px solid #a1a1a1;
    border-left:1px solid #e8e8e8;
    font-weight:bold;
    font-size:13px;
    -moz-box-shadow: 0 1px 3px #555;
    -webkit-box-shadow: 0 1px 3px #555;
    text-shadow: 0 1px 1px #fff;
}

We want to give the link elements a fixed width and some background gradient. The borders will create a nice inset effect.

The next hover class will be applied using jQuery, since the :hover pseudo class creates an unwanted effect: When the icon slides out it covers the link for a few milliseconds, making the hover style dissapear in that time. That is perceived as a flicker and we will avoid that by defining a class that we will simply add with jQuery when we do the icon slide out effect:

ul.menu li a.hover{
    background-image:none;
    color:#fff;
    text-shadow: 0 -1px 1px #000;
}

The first and last link element should have a rounded border on the respective side, so we define two classes for those:

ul.menu li a.first{
    -moz-border-radius:0px 0px 0px 10px;
    -webkit-border-bottom-left-radius: 10px;
    border-left:none;
}
ul.menu li a.last{
    -moz-border-radius:0px 0px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
}

The common style for all the icon spans will be the following:

ul.menu li span{
    width:64px;
    height:64px;
    background-repeat:no-repeat;
    background-color:transparent;
    position:absolute;
    z-index:-1;
    top:80px;
    cursor:pointer;
}

The single styles for the specific icons will contain the background-image and the x-position:

ul.menu li span.ipod{
    background-image:url(../icons/ipod.png);
    left:33px; /*128/2 - 32(half of icon) +1 of border*/
}
ul.menu li span.video_camera{
    background-image:url(../icons/video_camera.png);
    left:163px; /* plus 128 + 2px of border*/
}
ul.menu li span.television{
    background-image:url(../icons/television.png);
    left:293px;
}
ul.menu li span.monitor{
    background-image:url(../icons/monitor.png);
    left:423px;
}
ul.menu li span.toolbox{
    background-image:url(../icons/toolbox.png);
    left:553px;
}
ul.menu li span.telephone{
    background-image:url(../icons/telephone.png);
    left:683px;
}
ul.menu li span.print{
    background-image:url(../icons/print.png);
    left:813px;
}

As you can see, we are positioning the icons in such a way, that they are centered inside of the list element. The top position is 80px initially since we want to show them to the user when the page get’s loaded. Then we will hide them in a stair-like fashion to create an awesome effect!

3. The JavaScript

First, we want to create the effect of the icons dissapearing in a stair-like fashion and then we will define the hover function for the list elements:

$(function() {
    var d=1000;
    $('#menu span').each(function(){
        $(this).stop().animate({
            'top':'-17px'
        },d+=250);
    });

    $('#menu > li').hover(
        function () {
            var $this = $(this);
            $('a',$this).addClass('hover');
            $('span',$this).stop().animate({
                'top':'40px'
            },300).css({
                'zIndex':'10'
            });
        },
        function () {
            var $this = $(this);
            $('a',$this).removeClass('hover');
            $('span',$this).stop().animate({
                'top':'-17px'
            },800).css({
                'zIndex':'-1'
            });
        }
    );
});

When hovering, we add the class “hover” to the link element, make the icon appear from the top, and increase the z-Index, so that the icon stays on top of the link. When the mouse goes out, we do exactly the opposite, which creates the effect that the icon dissapears behind the link element. For that we will allow more time (800 milliseconds) because it’s such a fun effect that the user might want to enjoy a little bit!

And that’s all!
I hope you like and enjoy it!

View demo Download source

Twitter API and jQuery Showcase: Display your Followers or Friends

2011-04-04T09:50:00.001-07:00

Today I was playing around with the Twitter API and created this little “widget” using jQuery and PHP. I know, there are already plenty of them, but I wanted to improve some details.

Some of the features are:

You can get your most recent 100 followers or friends
Followers or friends are shown in sets of 25 per widget page
The images of the users are preloaded (unlike in Twitter)
You can navigate through the set
You can refresh the entire set
More information on the user can be seen using a tooltip when hovering over his picture

You can configure and use this in your website to show your followers or friends with some interesting information about them (name, number of followers, number of friends).

A reason why 100 followers or friends are loaded in the beginning is the restriction the Twitter API is giving in the number of results per request. So, in order not to make several requests which would take quite some time, I just get 100. However, you can always click the link to the entire list in the end of the pagination.

The tooltip is created using qTip.

View demo Download source

Beautiful Background Image Navigation with jQuery

2011-04-04T09:44:00.000-07:00

View demo Download source

In this tutorial we are going to create a beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the same background image but with a different position. The background image for each item will be animated to slide into place in different times, creating a really nice effect. The background image sliding direction from the list item in the middle will depend on which item the user was before: coming from the right, it will slide from the left and vice versa.

On top of that we will have sub-menus that appear with their semi-transparent background sliding in. These backgrounds create an awesome effect of actually just being one element that slides into place, changing its color.

We will be using the amazing Background-Position Animation Plugin by Alexander Farkas.

The photos that we will be using are from Pat’s beautiful B&W collection on Flickr.

There will be a little bit of CSS3 involved which absence will almost not be notable when using a browser that does not support its properties (like IE).

We tried to make this one cross-browser compatible and voilà! It works beautifully in Google Chrome, Firefox, Opera, Safari, IE8, IE7 and guess what, it even works respectively in IE6. (We are using an adapted style sheet and you will have to apply some PNG fix if you want the sub-menu backgrounds to be semi-transparent. )

OK, so let’s get started!

The Markup

The HTML will consist of a wrapper div and an unordered list with three list items. We will initially set some “bg” classes that will have the respective background images. The “menuWrapper” will always have the “bg” class of the current list item so that we have the background image of the current list item.

<div id="menuWrapper" class="menuWrapper bg1">
 <ul class="menu" id="menu">
  <li class="bg1" style="background-position:0 0;">
   <a id="bg1" href="#">Our Passion</a>
   <ul class="sub1" style="background-position:0 0;">
    <li><a href="#">Submenu 1</a></li>
    <li><a href="#">Submenu 2</a></li>
    <li><a href="#">Submenu 3</a></li>
   </ul>
  </li>
  <li class="bg1" style="background-position:-266px 0px;">
   <a id="bg2" href="#">Our Brands</a>
   <ul class="sub2" style="background-position:-266px 0;">
    <li><a href="#">Submenu 1</a></li>
    <li><a href="#">Submenu 2</a></li>
    <li><a href="#">Submenu 3</a></li>
   </ul>
  </li>
  <li class="last bg1" style="background-position:-532px 0px;">
   <a id="bg3" href="#">Contact</a>
   <ul class="sub3" style="background-position:-266px 0;">
    <li><a href="#">Submenu 1</a></li>
    <li><a href="#">Submenu 2</a></li>
    <li><a href="#">Submenu 3</a></li>
   </ul>
  </li>
 </ul>
</div>

For the background animation plugin to work correctly we need to set the position of the background image as inline styles initially. We already set the right position for each background image, for example, the third item will have the background image positioned to the outer right.

As you can see, every list item has another sub-list with three more items. The background image position of these sublists is set to a value that hides the image. When we animate the background then, we will create the effect of sliding it in from the left or the right.

The CSS

Let’s start by the general style of the the “menuWrapper” which will contain the font styles and the size of the whole element:

.menuWrapper{
    font-family: "Trebuchet MS", Arial, sans-serif;;
    font-size: 15px;
    font-style: normal;
    font-weight: normal;
    text-transform:uppercase;
    letter-spacing: normal;
    line-height: 1.45em;
    position:relative;
    margin:20px auto;
    height:542px;
    width:797px;
    background-position:0 0;
    background-repeat:no-repeat;
    background-color:transparent;
}

The list and the list items of the first layer will have the following style:

ul.menu{
    list-style:none;
    width:797px;
}
ul.menu > li{
    float:left;
    width:265px;
    height:542px;
    border-right:1px solid #777;
    background-repeat:no-repeat;
    background-color:transparent;
}
ul.menu > li.last{
    border:none;
}

The selector “>” addresses only the li elements of the first layer and will not be applied to the ones of the sub-menus. We will give the last li the class “last” in order to remove the right border.

The following three classes define the background images. We will give these classes to all the li elements depending on which one we hover. So, if we hover the second li, we will give the “bg2″ class to all the first layer list items:

.bg1{
    background-image: url(../images/1.jpg);
}
.bg2{
    background-image: url(../images/2.jpg);
}
.bg3{
    background-image: url(../images/3.jpg);
}

Let’s define the look of the link elements in the first layer list. Since the li elements have a big height, we need to push the link elements down. We do that by setting a high top margin:

ul.menu > li > a{
    float:left;
    width:265px;
    height:50px;
    margin-top:450px;
    text-align:center;
    line-height:50px;
    color:#ddd;
    background-color:#333;
    letter-spacing:1px;
    cursor:pointer;
    text-decoration:none;
    text-shadow:0px 0px 1px #fff;
}

To center the text of a link element vertically, you can give a line-height value equal to the height of the element. (I don’t know why, but when I started with learning CSS, I automatically always used paddings to adapt the height of the element and to center it. Using line-height was a real delight because you can control sizes much better like that.)

The second layer lists would naturally appear after the first layer list, so we use a negative top margin to “pull” them up:

ul.menu > li ul{
    list-style:none;
    float:left;
    margin-top:-180px;
    width:100%;
    height:110px;
    padding-top:20px;
    background-repeat:no-repeat;
    background-color:transparent;
}

The li elements of the sub-menu will be initially hidden. In the script we will fade them in when we hover over their parent list item link:

ul.menu > li ul li{
    display:none;
}

Now we define the classes for the background images of the sub-menus:

ul.menu > li ul.sub1{
    background-image:url(../images/bg1sub.png);
}
ul.menu > li ul.sub2{
    background-image:url(../images/bg2sub.png);
}
ul.menu > li ul.sub3{
    background-image:url(../images/bg3sub.png);
}

The link elements of the li elements will have the following style:

ul.menu > li ul li a{
    color:#fff;
    text-decoration:none;
    line-height:30px;
    margin-left:20px;
    text-shadow:1px 1px 1px #444;
    font-size:11px;
}

ul.menu > li ul li a:hover{
    border-bottom:1px dotted #fff;
}

The first sub-list will be shown in the beginning:

ul.menu > li ul.sub1 li{
    display:block;
}

And that’s all the style. Take a look at the ZIP file for the IE6 style sheet.
Now let’s take a look at the JavaScript.

The JavaScript

What we do in the script is the following: we first check where we are coming from and then we animate the background positions of the list elements in the first level and the backgrounds of the sub-menus accordingly:

$(function() {
 /* position of the <li> that is currently shown */
 var current = 0;

 $('#bg1,#bg2,#bg3').mouseover(function(e){

  var $this = $(this);
  /* if we hover the current one, then don't do anything */
  if($this.parent().index() == current)
   return;

  /* item is bg1 or bg2 or bg3, depending where we are hovering */
  var item = e.target.id;

  /*
  this is the sub menu overlay. Let's hide the current one
  if we hover the first <li> or if we come from the last one,
  then the overlay should move left -> right,
  otherwise right->left
   */
  if(item == 'bg1' || current == 2)
   $('#menu .sub'+parseInt(current+1))
       .stop()
    .animate({backgroundPosition:"(-266px 0)"},300,function(){
     $(this).find('li').hide();
    });
  else
   $('#menu .sub'+parseInt(current+1))
    .stop()
    .animate({backgroundPosition:"(266px 0)"},300,function(){
     $(this).find('li').hide();
    });

  if(item == 'bg1' || current == 2){
   /*
   if we hover the first <li> or if we come from
   the last one, then the images should move left -> right
   */
   $('#menu > li')
    .animate({backgroundPosition:"(-800px 0)"},0)
    .removeClass('bg1 bg2 bg3')
    .addClass(item);
   move(1,item);
  }
  else{
   /*
   if we hover the first <li> or if we come
   from the last one, then the images should move
   right -> left
   */
   $('#menu > li')
    .animate({backgroundPosition:"(800px 0)"},0)
    .removeClass('bg1 bg2 bg3')
    .addClass(item);
   move(0,item);
  }

  /*
  We want that if we go from the first one to the last one
  (without hovering the middle one), or from the last one
  to the first one, the middle menu's overlay should also
  slide, either from left to right or right to left.
   */
  if(current == 2 && item == 'bg1'){
   $('#menu .sub'+parseInt(current))
   .stop()
   .animate({backgroundPosition:"(-266px 0)"},300);
  }
  if(current == 0 && item == 'bg3'){
   $('#menu .sub'+parseInt(current+2))
   .stop()
   .animate({backgroundPosition:"(266px 0)"},300);
  }

  /* change the current element */
  current = $this.parent().index();

  /* let's make the overlay of the current one appear */

  $('#menu .sub'+parseInt(current+1))
   .stop().animate({backgroundPosition:"(0 0)"},300,function(){
    $(this).find('li').fadeIn();
   });
 });
 /*
 dir:1 - move left->right
 dir:0 - move right->left
  */
 function move(dir,item){
  if(dir){
   $('#bg1').parent()
      .stop()
      .animate({backgroundPosition:"(0 0)"},200);
   $('#bg2').parent()
      .stop()
      .animate({backgroundPosition:"(-266px 0)"},300);
   $('#bg3').parent()
      .stop()
      .animate({backgroundPosition:"(-532px 0)"},400,function(){
      $('#menuWrapper').removeClass('bg1 bg2 bg3')
           .addClass(item);
      });
  }
  else{
   $('#bg1').parent()
      .stop()
      .animate({backgroundPosition:"(0 0)"},400,function(){
      $('#menuWrapper').removeClass('bg1 bg2 bg3')
           .addClass(item);
      });
   $('#bg2').parent()
      .stop()
      .animate({backgroundPosition:"(-266px 0)"},300);
   $('#bg3').parent()
      .stop()
      .animate({backgroundPosition:"(-532px 0)"},200);
  }
 }
});

And that’s it! A beautiful cross-browser capable effect!
I hope that you enjoyed the tutorial.

View demo Download source

zFPmenu

2011-04-04T09:24:00.000-07:00

zFPmenu - Fixed-Position Custom Menu and Navigation / Share Widget, the widget'float' that can be filled with a menu containing the links as you wish.

Includes all the navigation scroll to top / bottom of page (scroll to the top / bottom of webpages) is based on jQuery engine, as well as Twitter and Facebook share button (ifdesired).

zFPmenu Code

Put this code into your web pages (before the closing </body> tag):

<!-- zFPmenu START -->
<div id="zfpm_div" style="display:none;">
<div id="zfpm_upperBox">
Place ads, text message, or anything here.
</div>
<ul id="zfpm_ul">
<!-- Your menus start -->
<li><a href="">YOUR MENU-1</a></li>
<li class="dir"><a href="">YOUR MENU 2 (containing submenu)</a>
   <ul>
      <li class="dir"><a href="">YOUR SUBMENU 2.1 (containing sub-submenu)</a>
         <ul>
            <li><a href="">YOUR SUB-SUBMENU 2.1.1</a></li>
            <li><a href="">YOUR SUB-SUBMENU 2.1.2</a></li>
         </ul>
      </li>
      <li><a href="">YOUR SUBMENU 2.2</a></li>
      <li><a href="">YOUR SUBMENU 2.3</a></li>
   </ul>
</li>
<li><a href="">YOUR MENU 3</a></li>
<!-- Your menus end -->
</ul></div>
<script type="text/javascript">
var zfpm_colorTheme = 'light'
var zfpm_shareBox = 'no';
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://zfpmenu.googlecode.com/svn/trunk/js/zfpmenu.js"></script>
<!-- zFPmenu END -->

Usage/Configuration

Setting/Variable

You can change the color theme and the share buttons visibility setting.

var zfpm_colorTheme = 'light';
Set the color theme for the menu widget.
Valid input: 'light' or 'dark'
var zfpm_shareBox = 'no'
Show the Twitter ‘Retweet’, Facebook ‘Share’, and Facebook ‘Like’ buttons (using LinksAlpha’s widget) or not.
Valid input: 'yes' or 'no'

Setting Preview

Color theme:
Show share box:

Complete Variabel List

var zfpm_colorTheme = 'light'; valid input: 'dark' or 'light'.
var zfpm_customBackgroundImage = ''; valid input: full URL of an image.
var zfpm_customBackgroundColor = ''; valid input: example: '#999999'.
var zfpm_shareBox = 'yes'; valid input: 'yes' or 'no'.
var zfpm_shareBoxPosition = 'right'; valid input: 'left' or 'right'.
var zfpm_shareBoxCustomWidth = ''; valid input: example: '300'.
var zfpm_waitForPageLoad = 'yes'; valid input: 'yes' or 'no'.

Upper Box

You can also place text messages, advertisements, or whatever you like in the div box with the ID zfpm_upperBox (above the menu).

Warning

This script is not design for Internet Explorer 6 browser.
Instead, if you add a variable var zfpm_ieUpgradeMessage = 'yes'; to the script, it will show an upgrade notification message on the top of page (see screenshot here) for IE 6 users.

Beautiful Slide Out Navigation Revised

2011-04-04T09:12:00.000-07:00

View demo Download source

After I got a lot of feedback for the Beautiful Slide Out Navigation, I had some new ideas for a similar horizontal navigation. Thanks a lot to everyone!

Like Stefan Matei pointed out, it might be quite cute but we don’t want the user to hover over all options first, in order to see what menu items exit. So, I thought about labeling the menu items and making them stick out, so the user can always “see” what the navigation entails. Being in a horizontal position makes everything readable and when the user hovers over the label, the rest of the item with the icon will slide out.

Although this tutorial is related to the previous one, I will start again from scratch – for the readers that are only interested in this new navigation.

The icons that we will be using are from the Colorful Sticker Icon Sets 1, 2, 3 and 4 byDryIcons. (It is not allowed to redistribute them under the free license, so I cannot include them in ZIP file of this tutorial.)

Ok, let’s get to work.

1. The HTML Structure

The only thing we will need for the navigation is a simple unordered list with links and spans inside of the list elements:

<ul id="navigation">
 <li class="home"><a href=""><span>Home</span></a></li>
 <li class="about"><a href=""><span>About</span></a></li>
 <li class="search"><a href=""><span>Search</span></a></li>
 <li class="photos"><a href=""><span>Photos</span></a></li>
 <li class="rssfeed"><a href=""><span>Rss Feed</span></a></li>
 <li class="podcasts"><a href=""><span>Podcasts</span></a></li>
 <li class="contact"><a href=""><span>Contact</span></a></li>
</ul>

The spans will carry the names of your menu items.
The list is getting an ID because we want to refer to it later in the JavaScript. With jQuery, we will make the link items slide out whenever we hover over the li elements of the list.

2. The CSS

First, we define the CSS properties for the list:

ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}

We position the list in the top right corner of the page.
The navigation should always be accessible for the user, even if he scrolls down the page. So, the position should be fixed. Margin and padding are explicitly set to 0, since the unordered list has default values for them. The navigation should also be on top of all other elements on the page. That’s why we set the z-index very high. The width is defined here, because I want to make the elements inside of the list floating. If I would not give this list an explicit width though, they would start moving and overlapping each other once I start resizing the page. In order to avoid that your floating elements start to e.g. move down when you resize the window, always put them in a container with a fixed width. (721px is the sum of all the li elements)

Now, let’s look at the list element properties:

ul#navigation li {
    width: 103px;
    display:inline;
    float:left;
}

If you want a list to be shown horizontally, set the display of the elements to inline. This will make them be next to each other rather than under each other.
For the links in the list elements, we define the following CSS properties:

ul#navigation li a {
    display: block;
    float: left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color: #E7F2F9;
    background-repeat: no-repeat;
    background-position: 50% 10px;
    border: 1px solid #BDDCEF;
    text-decoration: none;
    text-align: center;
    padding-top: 80px;
}

This is the common style for the link elements. We already define the properties for the background images that we will then put in separate class definitions. The text properties and the padding we need to set for the spans inside the link elements. The padding will push the spans to the bottom part.

Let’s add some rounded borders (they don’t work in Internet Explorer, though) and make the items semi-transparent:

ul#navigation li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#E7F2F9;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

The last filter property will make this work for Internet Explorer as well.

These were the common properties of all the link elements in the list. Now we will define the background image for the links in the specific list items:

ul#navigation .home a{
    background-image: url(../images/home.png);
}
ul#navigation .about a      {
    background-image: url(../images/id_card.png);
}
ul#navigation .search a      {
    background-image: url(../images/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(../images/ipod.png);
}
ul#navigation .rssfeed a   {
    background-image: url(../images/rss.png);
}
ul#navigation .photos a     {
    background-image: url(../images/camera.png);
}
ul#navigation .contact a    {
    background-image: url(../images/mail.png);
}

When hovering over the elements, we want to change the background color in order to make them stand out a little bit more:

ul#navigation li a:hover{
     background-color:#CAE3F2;
}

Now we just need to add some style to the spans:

ul#navigation li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#60ACD8;
    text-shadow: 0 -1px 1px #fff;
}

The text-shadow property will give the letters an engraved look (but it will not work in IE).

And that was the CSS part. Now, let’s take a look at the JavaScript that will give some life to the navigation.

The JavaScript

With jQuery we will first make all of the items disappear first in a “piano-like” way until the point that we can only see the text of the links. When hovering over an item, we will make the whole element slide out from the top. For all this, we define the following:

$(function() {
    var d=300;
    $('#navigation a').each(function(){
        $(this).stop().animate({
            'marginTop':'-80px'
        },d+=150);
    });

    $('#navigation > li').hover(
    function () {
        $('a',$(this)).stop().animate({
            'marginTop':'-2px'
        },200);
    },
    function () {
        $('a',$(this)).stop().animate({
            'marginTop':'-80px'
        },200);
    }
);
});

For creating the piano-like effect we define that for each of the link elements the top margin should be set to -80 pixels (this will make them move to the top outside of the screen). The effect for the first element should last 300 + 150 milliseconds and then each further element should disappear with an additional delay of 150 milliseconds.

When hovering, we want the specific link element to get a top margin of -2 pixels, and that nicely animated, and not too slow (200 milliseconds). Moving the mouse out shall put the link element back to it’s old position (-80 pixels). The stop() function “stops all the currently running animations on all the specified elements” which gives the beautiful effect when, for example, hovering over all elements very quickly.

And that’s it! I hope you like it – enjoy!

View demo Download source

Fixed Fade Out Menu: A CSS and jQuery Tutorial

2011-04-04T09:10:00.001-07:00

View demo Download source

Inspired by David Walsh’s top navigation bar that gets semi-transparent when you scroll down the page, I decided to create a tutorial out of that idea.

The aim is to have a fixed navigation that follows the user when he scrolls, and only subtly showing itself by fading out and becoming almost transparent. When the user hovers over it, the menu then becomes opaque again.

Inside of the navigation we will have some links, a search input and a top and bottom button that let the user navigate to the top or the bottom of the page.

Ok, let’s start.

1. The HTML

The markup is pretty simple: we have a div with a list inside. The list items will be our links, the search input and the arrow buttons:

<div id="nav">
 <ul>
  <li><a class="top" href="#top"><span></span></a></li>
  <li><a class="bottom" href="#bottom"><span></span></a></li>
  <li><a>Link 1</a></li>
  <li><a>Link 2</a></li>
  <li><a>Link 3</a></li>
  <li><a>Link 4</a></li>
  <li><a>Link 5</a></li>
  <li><a>Link 6</a></li>
  <li class="search">
   <input type="text"/>
   <input class="searchbutton" type="submit" value=""/>
  </li>
 </ul>
</div>

The links with the classes top and bottom are the arrows that will lead the user to the beginning or the end of the page. The hrefs in these links reference to some elements having the id top and bottom. Make sure, you reference the right elements in your page. The bottom could, for example, be your comments section in you WordPress blog. In that case you would need to refer to #comments instead.

The span of the top and bottom links will contain the actual arrows as background images.
The search button which is a submit button will have no value since we want to give it a background image and no text.

Let’s look at the style now.

2. The CSS

Let’s first define the main navigation div:

#nav{
    height:35px;
    border-bottom:1px solid #ddd;
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    background:#fff url(../images/nav.png) repeat-x center left;
    z-index:999999;
}

The navigation will always stay right at the top of the page because we “glue” it there withposition:fixed and top:0px. The background image will be a semi-transparent button-like background with a slight 3D effect. Since it is almost transparent, you can try to use different background colors instead of white (#ffffff).

We set the z-index very high since we don’t want any other absolute element to be on top of our navigation.

The unordered list and its list items will have the following style:

#nav ul{
    height:25px;
    list-style:none;
    margin:6px auto 0px auto;
    width:600px;
}
#nav ul li{
    display:inline;
    float:left;
    margin:0px 2px;
}

The unordered list has a fixed width of 600px and will be positioned in the center of the navigation. Centering a relatively positioned element can be achieved by stating that the left and right margin is auto.

The list elements shall be aligned next to each other. We define that with display:inline. We make them floating left because we want to apply a margin here, creating some space between the items.

The general style of all the link elements will be the following:

#nav a{
    font-size:11px;
    font-weight:bold;
    float:left;
    padding: 2px 4px;
    color:#999;
    text-decoration: none;
    border:1px solid #ccc;
    cursor: pointer;
    background:transparent url(../images/overlay.png) repeat-x center left;
    height:16px;
    line-height:16px;
}
#nav a:hover{
    background:#D9D9DA none;
    color: #fff;
}

Although it is not really necessary to state that the cursor should be of type pointer here since it is a link element, I often define that because in some browsers the pointer will only appear when there is an “href”. That might not always be the case and so it is always better to define it again in the CSS if one is not sure how link elements will be used.

The links will have a semi-transparent background image similar to the one for the navigation. Again, you can simply define a color for the background or experiment with combinations of these. The overlay image tints any background color in a light gray.

When hovering over the link element, we remove the background image and change the background color.

Let’s look at the style of the two arrow links:

#nav a.top span, #nav a.bottom span{
    float:left;
    width:16px;
    height:16px;
}
#nav a.top span{
    background:transparent url(../images/top.png) no-repeat center center;
}
#nav a.bottom span{
    background:transparent url(../images/bottom.png) no-repeat center center;
}

Now we define the style for the list element that contains the search and the text input:

#nav ul li.search{
    float:right;
}
#nav input[type="text"]{
    float:left;
    border:1px solid #ccc;
    margin:0px 1px 0px 50px;
    padding:2px 2px 2px 2px;
}

Generally, with specifying input[type="text"] you make sure that you will not change the style of all other inputs. That is a good way of specifying the design of a certain type of inputs.
The margin (TOP RIGHT BOTTOM LEFT) to the left will be a bit more because we want to separate the other links from the search.

The submit button will have the following style:

input.searchbutton{
    border:1px solid #ccc;
    padding:1px;
    cursor:pointer;
    width:30px;
    height:22px;
    background:#E8E9EA url(../images/search.png) no-repeat center center;
}
input.searchbutton:hover{
    background-color:#D9D9DA;
}

This is a good example of when to use a class instead of specifying the style for e.g. input[type="submit"]. There might be many submits in your page, but this one is very special and no other submit will look like it except the search submit.
This input will not have any value as you saw in the HTML part. Instead, we will have an icon as background image.

And that’s all the style! Now let’s add some rocking JavaScript:

3. The JavaScript

What we want to do now, is to leave the menu as it is, whenever we are at the top of the page. When we start scrolling, we want the menu to fade out and to be almost transparent. When we hover over it, it should appear opaque again. All this we define in the following lines of JavaScript:

$(function() {
 $(window).scroll(function(){
  var scrollTop = $(window).scrollTop();
  if(scrollTop != 0)
   $('#nav').stop().animate({'opacity':'0.2'},400);
  else
   $('#nav').stop().animate({'opacity':'1'},400);
 });

 $('#nav').hover(
  function (e) {
   var scrollTop = $(window).scrollTop();
   if(scrollTop != 0){
    $('#nav').stop().animate({'opacity':'1'},400);
   }
  },
  function (e) {
   var scrollTop = $(window).scrollTop();
   if(scrollTop != 0){
    $('#nav').stop().animate({'opacity':'0.2'},400);
   }
  }
 );
});

So, if we are not at the top of the page, scrolling the window will change the opacity value. That effect takes 400 milliseconds (adapt to your preferred time). If we are at the top of the page, the opacity will have the value 1 which means that the element will be opaque.

When hovering over the element, we make it opaque and when we move the mouse out, we will make it more transparent again (if we are not at the top).

And that’s all! Enjoy!

View demo Download source

Beautiful Slide Out Navigation Revised

2011-04-04T09:08:00.000-07:00

View demo Download source

After I got a lot of feedback for the Beautiful Slide Out Navigation, I had some new ideas for a similar horizontal navigation. Thanks a lot to everyone!

Although this tutorial is related to the previous one, I will start again from scratch – for the readers that are only interested in this new navigation.

Ok, let’s get to work.

1. The HTML Structure

The only thing we will need for the navigation is a simple unordered list with links and spans inside of the list elements:

<ul id="navigation">
 <li class="home"><a href=""><span>Home</span></a></li>
 <li class="about"><a href=""><span>About</span></a></li>
 <li class="search"><a href=""><span>Search</span></a></li>
 <li class="photos"><a href=""><span>Photos</span></a></li>
 <li class="rssfeed"><a href=""><span>Rss Feed</span></a></li>
 <li class="podcasts"><a href=""><span>Podcasts</span></a></li>
 <li class="contact"><a href=""><span>Contact</span></a></li>
</ul>

2. The CSS

First, we define the CSS properties for the list:

ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}

Now, let’s look at the list element properties:

ul#navigation li {
    width: 103px;
    display:inline;
    float:left;
}

ul#navigation li a {
    display: block;
    float: left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color: #E7F2F9;
    background-repeat: no-repeat;
    background-position: 50% 10px;
    border: 1px solid #BDDCEF;
    text-decoration: none;
    text-align: center;
    padding-top: 80px;
}

Let’s add some rounded borders (they don’t work in Internet Explorer, though) and make the items semi-transparent:

ul#navigation li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#E7F2F9;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

The last filter property will make this work for Internet Explorer as well.

These were the common properties of all the link elements in the list. Now we will define the background image for the links in the specific list items:

ul#navigation .home a{
    background-image: url(../images/home.png);
}
ul#navigation .about a      {
    background-image: url(../images/id_card.png);
}
ul#navigation .search a      {
    background-image: url(../images/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(../images/ipod.png);
}
ul#navigation .rssfeed a   {
    background-image: url(../images/rss.png);
}
ul#navigation .photos a     {
    background-image: url(../images/camera.png);
}
ul#navigation .contact a    {
    background-image: url(../images/mail.png);
}

When hovering over the elements, we want to change the background color in order to make them stand out a little bit more:

ul#navigation li a:hover{
     background-color:#CAE3F2;
}

Now we just need to add some style to the spans:

ul#navigation li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#60ACD8;
    text-shadow: 0 -1px 1px #fff;
}

The text-shadow property will give the letters an engraved look (but it will not work in IE).

And that was the CSS part. Now, let’s take a look at the JavaScript that will give some life to the navigation.

The JavaScript

$(function() {
    var d=300;
    $('#navigation a').each(function(){
        $(this).stop().animate({
            'marginTop':'-80px'
        },d+=150);
    });

    $('#navigation > li').hover(
    function () {
        $('a',$(this)).stop().animate({
            'marginTop':'-2px'
        },200);
    },
    function () {
        $('a',$(this)).stop().animate({
            'marginTop':'-80px'
        },200);
    }
);
});

And that’s it! I hope you like it – enjoy!

View demo Download source

[DOWNLOAD] Software Recovery File Office yg Rusak / Corrupt

2011-04-04T07:33:00.000-07:00

Perhaps you have experienced any problems or errors when opening an officedocument files like files Word / Excel / PowerPoint. Possible cause is that the file had been damaged or corrupted so it can not be opened by the commonly used officesoftware like Microsoft Office.
The cause of the destruction of these files can vary, either because of power failure thatcauses the computer suddenly died while editing the document that has not been saved,could also be due to a virus, or other causes.
For that please try software utilities / tools below to fix a damaged Office document files.May not fully fix all of the contents or the contents of those documents, but most are notexpected to save important data, especially text, from the need to regenerate the entirecontents of the document from scratch again.

1. Corrupt Office2txt

Corrupt Office2txt is free software portable (no installation needed) to repair variousoffice files such as file format doc, docx, xls, xlsx, ppt, pptx, odt, ods, and odp. Its use is easy enough to open a file that will be corrected, then if successful, the file can besaved.

Download Corrupt Office2txt download here.

2. Repair MyWord

Portable software called Repair My Word is also called WordRepair similar function,namely to improve office files, especially MS Word file that is formatted files. doc.

Download Repair My Word download Here

Hopefully useful.

IE 8: How to Feed and Webslice Add to Favorite Bars

2011-04-04T07:12:00.001-07:00

Internet Explorer 8's Favorites Bar allows you to add RSS feeds and WebSlices that makes it easy to monitor your favorite sites for new content. RSS (Really Simple Syndication) feeds a web feed used to publish frequently updated content. WebSlices is a feature that is really new to IE which allows users to subscribe to specific content contained in web pages.
Adding RSS Feeds to the Favorites Bar:
1. To add an RSS feed Bar Favorites, you must subscribe / Subcribe to the feed. You do this in a way similar to that used in Internet Explorer 7.
2. Click the Favorites button on the toolbar and select the Feed tab.
3. Right-click on the desired feed and select the Monitor on favorite bar from the Context menu.
4. Feed will be added to the Favorites Bar. When there are unread items in feed, the feed title will be bold, so simple to know when new items are added. Clicking the button will display the assigned title of new articles added to the feed. Selecting a title will take you to the page.
WebSlices add to Favorites Bar:
1. If the web page contains WebSlices, you will receive a visual notification in two places:
In the toolbar - The RSS Feed icon indicator will be turned into a purple icon. Selecting the dropdown arrow will list all WebSlices are available on the page.
On web pages - WebSlices notification icon will appear when you make use of Mose on specific content on web pages.
2. Select the desired webslice by choosing a title that is displayed in the toolbar menu websllices list or click the icon that will appear when you point your mouse at the desired content. After memililh webslice, you will be asked if you want to subscribe webslice, click the Add button.
3. Web Slice will appear on the Favorites Bar. Clicking the associated button will display the webslice. To open a web page for webslice, click the Open button in the lower left corner webslice opened.

Tip Blogger And Tutorial

Cara Membuat Blog Lebih Expressive

Cara Membuat Read More / Baca Selengkapnya di Blogger

Membuat Read More Versi 2

Cara Membuat Menu DTree

Domain Dot Com Gratis

Setting Domain di co.cc

11 Sites to find +1000 free twitter Buttons and badges

31 Logos et boutons pour Twitter (Twitter Buttons)

Day and Night: Creating a Scenery Animation with jQuery and CSS

1. The HTML

2. The CSS

3. The JavaScript

jPaginate: A Fancy jQuery Pagination Plugin

A Fresh Bottom Slide Out Menu with jQuery

The Markup

The CSS

The Javascript

Sliding Panel Photo Wall Gallery with jQuery

The Markup

The CSS

The JavaScript

CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation

1. The HTML

2. The CSS

3. The JavaScript

Twitter API and jQuery Showcase: Display your Followers or Friends

Beautiful Background Image Navigation with jQuery

The Markup

The CSS

The JavaScript

zFPmenu

zFPmenu Code

Usage/Configuration

Menu

Setting/Variable

Setting Preview

Complete Variabel List

Upper Box

Warning

Beautiful Slide Out Navigation Revised

1. The HTML Structure

2. The CSS

The JavaScript

Fixed Fade Out Menu: A CSS and jQuery Tutorial

1. The HTML

2. The CSS

3. The JavaScript

Beautiful Slide Out Navigation Revised

1. The HTML Structure

2. The CSS

The JavaScript

[DOWNLOAD] Software Recovery File Office yg Rusak / Corrupt

1. Corrupt Office2txt Corrupt Office2txt is free software portable (no installation needed) to repair variousoffice files such as file format doc, docx, xls, xlsx, ppt, pptx, odt, ods, and odp. Its use is easy enough to open a file that will be corrected, then if successful, the file can besaved.

2. Repair MyWord Portable software called Repair My Word is also called WordRepair similar function,namely to improve office files, especially MS Word file that is formatted files. doc.

IE 8: How to Feed and Webslice Add to Favorite Bars

1. Corrupt Office2txt

Corrupt Office2txt is free software portable (no installation needed) to repair variousoffice files such as file format doc, docx, xls, xlsx, ppt, pptx, odt, ods, and odp. Its use is easy enough to open a file that will be corrected, then if successful, the file can besaved.

2. Repair MyWord

Portable software called Repair My Word is also called WordRepair similar function,namely to improve office files, especially MS Word file that is formatted files. doc.