shad0w-share

Pada postingan sebelumnya pernah saya membahas tentang "Cara Membuat Slideshow Dengan Jquery Cycle Plug In" dan "Floating Menu JQuery Dengan Link Efek Disko"



Sekarang kita akan membuat menu navigasi dengan efek slide out yang tetap menggunakan framework jQuery. Menu ini mempunyai efek slide yang sangat halus, saat kita mengarahkan pointer mouse (mouse hover) pada menu, maka menu akan bergeser keluar (slide out) secara perlahan dan akan kembali pada posisi semula jika kita menggeser mouse keluar dari area menu selain itu menu ini akan selalu dalam posisi tetap walau kita menggeser (scroll) halaman naik ataupun turun. Kita bisa saja menggunakan navigasi menu ini untuk berbagai keperluan, misal Sosial Bookmark dan lain sebagainya. Seperti contoh pada gambar di bawah ini :







Jika sobat ingin mencobanya silahkan iktui langkah langkah berikut :



Langkah 1

Login ke Blogger

Langkah 2

Masuk ke "Tata Letak - Edit HTML"

Langkah 3

Klik "Expand Template Widget"

Langkah 4

Cari kode dibawah ini:

]]></b:skin>

Langkah 5

Masukan (copypaste) kode CSS dibawah ini diatas kode pada langkah 4:

ul#menusisi {

position: fixed;

margin: 0px;

padding: 0px;

top: 50px;

left: 0px;

list-style: none;

z-index:9999;

}

ul#menusisi li {

width: 100px;

}

ul#menusisi li a {

display: block;

margin-left: -50px;

width: 100px;

height: 55px;

background-color:#141414;

background-repeat:no-repeat;

background-position:48px center;

border:1px solid #cfcfcf;

-moz-border-radius:0px 10px 10px 0px;

-webkit-border-bottom-right-radius: 10px;

-webkit-border-top-right-radius: 10px;

-khtml-border-bottom-right-radius: 10px;

-khtml-border-top-right-radius: 10px;

/*-moz-box-shadow: 0px 4px 3px #000;

-webkit-box-shadow: 0px 4px 3px #000;

*/

opacity: 0.8;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);

}

ul#menusisi .beranda a{

background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png);

}

ul#menusisi .tentang a{

background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/S9BJaX0yaqI/AAAAAAAAD_4/GZhfUKvK588/d/nav_info.png);

}

ul#menusisi .cari a{

background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJejnwlAI/AAAAAAAAEAE/B_LZd63vGeI/d/nav_search.png);

}

ul#menusisi .komentar a{

background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaFyqDGI/AAAAAAAAD_w/pNO6TUSigBg/d/nav_comment.png);

}

ul#menusisi .rssfeed a{

background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaabJhzI/AAAAAAAAEAA/Oo4mhwCwzbI/d/nav_rss.png);

}

ul#menusisi .alat a{

background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJelocqyI/AAAAAAAAEAI/6SmP-UHv-eg/d/nav_tools.png);

}

ul#menusisi .kontak a{

background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png);

}

Langkah 6

Cari kode dibawah ini:

</head>

Langkah 7

Masukan (copypaste) kode jQuery dibawah ini diatas kode pada langkah 6:

<script src='http://www.google.com/jsapi'/>

<script>

google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);

</script>

<script type="text/javascript">

$(function() {

$('#menusisi a').stop().animate({'marginLeft':'-50px'},1000);

$('#menusisi > li').hover(

function () {

$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);

},

function () {

$('a',$(this)).stop().animate({'marginLeft':'-50px'},200);

}

);

});

</script>

Langkah 8

Cari kode dibawah ini:



</body>





Langkah 9

Masukan (copypaste) kode dibawah ini diatas kode pada langkah 8:

<ul id='menusisi'>

<li class='beranda'><a href='LINKSOBAT' title='Beranda'></a></li>

<li class='tentang'><a href='LINKSOBAT' title='Tentang'></a></li>

<li class='cari'><a href='LINKSOBAT' title='Cari'></a></li>

<li class='alat'><a href='LINKSOBAT' title='Alat'></a></li>

<li class='rssfeed'><a href='LINKSOBAT' title='RSS Feed'></a></li>

<li class='komentar'><a href='LINKSOBAT' title='Komentar'></a></li>

<li class='kontak'><a href='LINKSOBAT' title='Kontak'></a></li>

</ul>

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Aatas permintaan sahabat SERI kali ini saya setelah berbuka puasa dan sebelum tarawih menyempatkan diri untuk menulis sebuah postingan yang singkat. Seri menuliskan di kotak komentar meminta agar saya mebantunya dia meminta tutorial tentang "Menampilkan Next Page Hanya Judul Postingan" saja yang muncul.Dan mudah-mudahan postingan ini menghasilkan apa yang di inginkan oleh Seri.

Oke langsung aja ke topik pembicaraan yaitu menampilkan next page dengan judul postinganya saja di main blog. Gimana maksudnya next page sih?
Maksud Saya "next page" itu adalah halaman dari blog selain halaman depan itu loh! apabila Sobat mengklik link "Older post" atau "Posting lama" di main page hanya muncul judul postingnya saja.

Seperti Sobat jika mengklik link "older post" di blog kang rohman



Adapun cara memasangnya adalah sebagai berikut :

Masuk menu Layout kemudian masuk menu Edit HTML dan centang tanda "Expand widget templates"

Kemudian cari kode seperti di bawah ini :

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

Bila sudah ketemu. Ganti kode tersebut dengan kode di bawah ini :

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div style='border: 2px outset rgb(189, 189, 189); width: 500px; padding: 10px; background-color: rgb(247, 248, 224); text-align: left;'>
<a expr:href='data:post.url'>
<data:post.title/></a></div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Bila langkah-langkah di atas sudah selesai klik tombol SIMPAN/SAVE

Kemudian lihat hasilnya, mudah-mudaha berhasil. Khususnya buat sahabat Seri Bahasa



KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Assalamu'alaikum salam Blogger, sebelumnya Saya ucapkan selamat Berpuasa, setelah lama Saya gak posting di blog untuk kesempatan ini saya meluangkan waktu untuk membuat postingan khususnya untuk para sobat Kang Fatur semua, ya sambil ngabuburit dibulan Ramadhan mudah-mudahan postingan ini menjadi sebuah Amal bagi Kang Fatur dan dapat bermanfaat bagi pa ra sobat semua.

Postingan kali ini Kang Fatur mao mengetengahkan tutorial sederhana yaitu tentang "Pasang Tombol Ganti Background Blog". dengan adanya tombol ini Blog kita bisa di ganti-ganti dengan bermacam-macam efek Background Warna sesuai kesukaan kita.

Untuk DEMO silahkan klik salah satu warna di bawah ini dan lihat perubahannya :

OK, Kang Fatur tidak akan banyak-banyak berbicara lagi kita langsung aja ke tahap pembuatan Tombol Ganti Background Blog :

1. Seperti biasa LogIn ke Blogger sobat
   
2. Pada halaman Dasbor klik Rancangan
   
3. Pada Halaman Elemen Laman klik Tambah Gadget / add a gadget, pilih yang HTML/Javascript
   
4. Kemudian Copy dan Paste Kode di bawah ini di ktak HTML/Javascript
   
   
   

   <center><script type="text/javascript">
   function bgChange(bg)
   {
   document.body.style.background=bg;
   }
   </script>
   
   <table border="1" width="660" height="20">
   <tr> <td
   onclick="bgChange('#FFFFFF')" bgcolor="white">
   <td
   onclick="bgChange('#000000')" bgcolor="#000000">
   <td
   onclick="bgChange('#F0E68C')" bgcolor="#F0E68C">
   
   <td
   onclick="bgChange('#E0FFFF')" bgcolor="#E0FFFF">
   <td
   onclick="bgChange('#98FB98')" bgcolor="#98FB98">
   <td
   onclick="bgChange('#B0E0E6')" bgcolor="#B0E0E6">
   <td
   onclick="bgChange('#87CEFA')" bgcolor="#87CEFA">
   <td
   onclick="bgChange('#FFDAB9')" bgcolor="#FFDAB9">
   <td
   onclick="bgChange('#FFC0CB')" bgcolor="#FFC0CB">
   
   <td
   onclick="bgChange('#E6E6FA')" bgcolor="#E6E6FA">
   <td
   onclick="bgChange('#D3D3D3')" bgcolor="#D3D3D3">
   
   </td
   ></td
   ></td
   ></td
   ></td
   ></td
   ></td
   ></td
   ></td
   ></td
   ></td
   ></tr>
   </table>
   
   <div class='clear'></div></center>

   
   
   
5. Kemudian Klik tombol Simpan/Save

Selamat mencoba, dan semoga bermanfaat. Untuk tombol Ganti Background dengan Gambar akan menyusul.


KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Inilah Pidato Obama saat kehadirannya di Indonesia. Anda mungkin akan tertawa mendengar beberapa bagian pidato-nya yang menyebut beberapa makanan khas Indonesia yang sangat populer dengan keseharian Anda.

Silahkan Simak.

Simaklah lomba pidato ini semoga memperkaya pengalaman Anda dan menambah keberanian untuk percaya diri berbicara di depan umum.

Silahkan simak pidato siswa pada saat Ujian Praktek membawkan Pidato di depan kelas.

Bagaimana perasaan Anda ketika pertama kali diminta untuk berpidato? Telapak tangan menjadi berkeringat, deg-degan, dan kening berkeringat dingin. Pernahkan seperti itu? Mudah-mudahan tidak bagi Anda.

Silahkan simak, lihat dan perhatikan pidato di bawah ini:


Lihat Contoh penampilan pidato lainnya :

• Pidato Siswa-Ujian Praktek
• Lomba Pidato 2009
• Pidato Presiden OBAMA di Indonesia- Baso, Soto