FARTHANET: Jquery

Showing posts with label Jquery. Show all posts

Membuat Menu Horizontal Glossy

3:17 PM Jquery

Kembali saya akan berikan tutorial dalam modifikasi menu navigassi horisontal di blog anda. Seperti yang sudah saya jelaskan sebelumnya menu navigasi pada blog merupakan elemen yang penting di alam sebuah blog yang mementingkan penampilan dan style untuk setiap detilnya. Setelah sebelumnya saya memberikan tutorial membuat multi level menu drop down,

Langsung saja. berikut ini tutorial membuat glossy horizontal menu

Login ke blogger dengan akun anda
Kemudian pada dasbor klik Rancangan >> Edit HTML
Tambahkan kode CSS berikut diatas tag  ]]></b:skin>

/*Credits: By Fajar Martha (http://farthanet.blogspot.com) */
/*Modified : IB (http://www.maskolis.co./) */
.glossymenu{
    position: relative;
    padding: 0 0 0 34px;
    margin: 0 auto 0 auto;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0MOq3NYdFTOfQyWPI7Zsif-M1k5XeisjzH06WwKh7dsmckldGpoU8MzYrGXV-meVIDptb6cMfFHDuBqVemElUFRGfD_hOY4oWI2SWRx9uRT4DcxvRIq2XxvNnbcirr1byjMaui1Q8M_s/s1600/maskolis+menu.png) repeat-x; /*tab background image path*/
    height: 46px;
    list-style: none;
}
.glossymenu li{
    float:left;
}
.glossymenu li a{
    float: left;
    display: block;
    color:#000;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
    height: 46px;
    line-height: 46px;
    text-align: center;
    cursor: pointer;
}
.glossymenu li a b{
    float: left;
    display: block;
    padding: 0 24px 0 8px; /*Padding of menu items*/
}
.glossymenu li.current a, .glossymenu li a:hover{
    color: #fff;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlEXA_a-ISJ9QitY23aZddCvJ3nv_pbigj0U5mRpadL88_kfLAP14omBMM2zZoP_y6Qcdoc57HFLszhfZCivO5Icg5P-wCZCifmmwQ9IL6N-Nb8GPaH67oatGHwadRbVbmPX42s1MmIb8/s1600/maskolis+nav.png) no-repeat; /*left tab image path*/
    background-position: left;
}
.glossymenu li.current a b, .glossymenu li a:hover b{
    color: #fff;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjenMV2Vcbm8eGmTUSORwekEWsDWE2jKokKOcs1zUrmDJejEJIeqUXgQlIpVbrrdsKHYDyPRDCvAfOhzKnnm2E4-nup7TafvJlG0CeroOfv2sM0nrD-IsW6EPJji1_VyMS_tMY0lirVcY/s1600/naskolis+leftnav.png) no-repeat right top; /*right tab image path*/
}
Jika gambarnya tidak cocok, bisa anda ganti sesuaikan dengan template yang dipakai. Di bawah ini adalah contoh gambar background yang bisa anda gunakan :
Silahkan upload dulu image diatas ke tempat hosting masing-masing.
Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>
<ul class='glossymenu'>
<li class='current'><a href='http://farthanet.blogspot.com/'><b>Home</b></a></li>
<li><a href='http://www.maskolis.co.cc/search/label/tutorial blog' title='tutorial blog'><b>Tutorial Blog</b></a></li>
<li><a href='http://farthanet.blogspot.com/search/label/SEO' title='SEO'><b>SEO</b></a></li>
<li><a href='http://farthanet.blogspot.com/search/label/wordpress' title='wordpress'><b>Wordpress</b></a></li>
<li><a href='http://farthanet.blogspot.com/search/label/affiliate' title='affiliate'><b>Affiliate</b></a></li>
<li><a href='http://farthanet.blogspot.com/search/label/hosting' title='hosting'><b>Hosting</b></a></li>
</ul>
Temen-temen bisa edit link dan anchor teks kode HTML diatas
Terakhir Save template anda

Efek Salju JQuery

5:57 AM Jquery

Kali ini saya akan membahas tentang cara membuat efek salju pada blog, kedengarannya keren juga ya ! Ya lumayan sih untuk mempercantik blog atau website ! dalam pembuatan efek salju ini lagi-lagi menggunakan script JQuery Contoh efek saljunya bisa di lihat, di bawah ini... Kalau begitu, jika anda ingin membuatnya langsung aja anda tahap-tahapan berikut ini.

Cara Membuat Efek Hujan Salju di Blog :

Langsung aja masuk ke Edit HTML

Beri tanda centang pada Expand Template Widget

Copy-Paste script berikut ini diatas script </head>

Kemudian Simpan.

Menu Navigasi JQuery

5:54 AM Jquery

Ketika merancang sebuah situs baru, web designer biasanya menghadapi pertanyaan: navigasi vertikal atau horizontal? Ada pro dan kontra untuk kedua solusi ini. Salah satu contoh yang navigasi horizontal membatasi jumlah link anda karena memiliki lebar halaman yang terbatas. Ini biasanya diselesaikan dengan menambah drop down sistem pada menu navigasi. Dalam tutorial ini, kita akan menggunakan jQuery untuk membuat sistem navigasi multi-lapis yang berbeda dari jenis-jenis menu navigasi horizontal yang sering kita ketemui.

Berikut beberapa langkah untuk membuatnya :

Tambahkan Script JQuery dibawah ini diatas kode <b:skin><![CDATA[

Kemudian masukan CSS dibawah ini diatas kode ]]></b:skin>

/*--------------------------------------------------
CSS TOP NAVIGATION
---------------------------------------------------*/
#wrap {
margin-left: auto;
margin-right: auto;
width: 900px;
position: relative;
}

#main-nav {
margin: 0px 0px 0px 2px;
text-align: left;
min-height: 25px;
padding-top: 10px;
padding-left: 0px;
}
#main-handle {
width: 605px;
float: right;
margin-top: -1px;
}
#main-nav li {
display: inline;
list-style: none;
}
#main-nav li a {
margin-right: 5px;
font-size: 15px;
text-decoration: none;
color: #f2f2f2;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-weight: bold;
padding: 10px;
outline: 0;
position: relative;
top: -2px;
}
#main-nav li a:hover, #main-nav li a.active {
background: #514539;
}
#sub-link-bar {
background: #514539;
min-height: 10px;
border-bottom: #645546 1px solid;
}
.sub-links {
display: none;
position: absolute;
width: 100%;
top: -30px;
text-align: left;
left: 0px;
}
#main-nav li .sub-links li a:hover{
background: #2d2620;
}
#main-nav li a.close{
display: none;
margin-top: 8px;
position: absolute;
background:url(http://lh5.ggpht.com/_HR8egC6j8tg/TEHTPAkPZJI/AAAAAAAAAOE/mvjEVRA-S3I/minus.png) 0px 0px no-repeat;
}
#main-nav li a.close:hover{
display: none;
margin-top: 8px;
position: absolute;
background:url(http://lh5.ggpht.com/_HR8egC6j8tg/TEHStBuH-BI/AAAAAAAAAOA/HmIDAZ33wYA/plus.png) 0px 0px no-repeat;
}
}

.round {
display:block
}
.round * {
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#645546
}
.round1 {
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #443a30;
border-right:1px solid #443a30;
background:#56493c
}
.round2 {
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #322a23;
border-right:1px solid #322a23;
background:#594c3e
}
.round3 {
margin-left:1px;
margin-right:1px;
border-left:1px solid #594c3e;
border-right:1px solid #594c3e;
}
.round4 {
border-left:1px solid #443a30;
border-right:1px solid #443a30
}
.round5 {
border-left:1px solid #56493c;
border-right:1px solid #56493c
}
.roundfg {
background:#645546
}
/*-- Akhir CSS Top Navigation --*/

Masukkan kode HTML dibawah ini dibawah kode <body>

<div id='sub-link-bar'/>


<div id='wrap'>
<div id='main-handle'>
<div class='roundfg'>
<ul id='main-nav'>
<li><a class='main-link' href='http://amcied-logica.blogspot.com/'>Home</a>
<ul class='sub-links'>
<li><a class='main-link' href='http://amcied-logica.blogspot.com/'>Home</a></li>
</ul>
</li>
<li><a class='main-link' href='http://amcied-logica.blogspot.com/'>Tutorials</a>
<ul class='sub-links'>
<li><a href='http://amcied-logica.blogspot.com/search/label/Tutorial%20Photoshop' title='Tutorial Photoshop'>Tutorial Photoshop</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/Tools%20Blogging' title='Tools Blogging'>Tools Blogging</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/JQuery' title='Jquer'>Jquery</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/Trik%20Blog' title='Trik Blog'>Trik Blog</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/PHP' title='Tutorial PHP'>PHP</a> </li>
</ul>
</li>
<li><a class='main-link' href='http://amcied-logica.blogspot.com/'>Articles</a>
<ul class='sub-links'>
<li><a href='http://amcied-logica.blogspot.com/search/label/Berita' title='Berita'>Berita</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/E-Book' title='E-Book'>E-Book</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/Tips%20Windows' title='Tips Windows'>Tips Windows</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/Tips%20Komputer' title='Tips Komputer'>Tips Komputer</a> </li>
</ul>
</li>
<li><a class='main-link' href='http://amcied-logica.blogspot.com/'>Free</a>
<ul class='sub-links'>
<li><a href='http://amcied-logica.blogspot.com/search/label/Software' title='Software'>Software</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/Free%20Stuff' title='Free Stuff'>Free Stuff</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/RSS%20FEED' title='Rss Feed'>Rss Feed</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/Hacker' title='Hacker'>Hacker</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/Security' title='Security'>Security</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/Page%20Ranking' title='Page Rank'>Page Rank</a> </li>
</ul>
</li>
<li><a class='main-link' href='http://amcied-logica.blogspot.com/'>Videos</a>
<ul class='sub-links'>
<li><a href='http://amcied-logica.blogspot.com/search/label/Diskografi' title='Diskografi'>Diskografi</a> </li>
<li><a href='http://amcied-logica.blogspot.com/2011/02/tv-streaming.html' title='TV Online'>TV Online</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/Video%20Tutorial' title='Video Tutorial'>Video Tutorial</a> </li>
</ul>
</li>
<li><a class='main-link' href='http://amcied-logica.blogspot.com/'>About</a>
<ul class='sub-links'>
<li><a href='http://amcied-logica.blogspot.com/2009/02/peduli-sesama-bukti-akhlak-mulia.html' title='Link Sahabat'>Link Sahabat</a> </li>
<li><a href='http://amcied-logica.blogspot.com/2009/02/mendekatkan-diri-kepada-allah.html' title='Kontak Saya'>Kontak Saya</a> </li>
</ul>
</li>
<li><a class='close' href='#' title='Click to Collapse'/></li>
</ul>
</div>

<b class='round'> <b class='round5'/> <b class='round4'/> <b class='round3'/> <b class='round2'><b/></b> <b class='round1'><b/></b></b> </div>

</div>

Silahkan Save Tempalte dan lihat hasilnya,

Edit Otomatis Warna Font

5:52 AM Jquery

Bagi teman-teman yang tidak puas dengan pengaturan default, Sebenarnya blogger juga menyediakan beberapa fasilitas ini. Salah satunya, agar tampilan tulisan pada posting terlihat lebih menarik, kita bisa merubah warnanya sesuka kita. Untuk kali ini teman-teman bisa mengubah warna font pada postingan dengan cara memasang widget tambahan. Dengan widget ini yang dapat mengubah warna font bukan hanya admin pengunjung pun bisa merubah warna sesuka mereka, demi kenyamanan dalam membaca artikel. Apabila tertarik langsung di coba aja berikut langkah-langkah membuatnya :

Masuk ke Edit HTML kemudian copas script di bawah ini di atas </head>

Setelah itu simpan template lanjutakan ke Elemen Laman.
Tambahkan gadget HTML/JavaScript, copas script dibawah ini kedalamnya.

<style type="text/css">
#tuw-font-change-widget ul {width: auto; overflow: hidden;margin: 0 0 20px !important;padding: 0 !important;list-style; none !important;}
#tuw-font-change-widget ul li {width: 20px !important;height: 20px !important;overflow: hidden;margin: 0 10px 0 0 !important;padding: 2px !important;display: block !important;float: left !important;border: 1px solid #CCCCCC !important;}
#tuw-font-change-widget ul li a {width: 20px !important;height: 20px !important;display: block !important;line-height: 18px !important;text-align: center !important;color: #FFFFFF !important;font-size: 11px !important;font-family: Tahoma !important;text-decoration: none !important; outline: 0 !important;}

#fcw-black { background: #000000 !important; }
#fcw-white { background: #088A08 !important; }
#fcw-blue { background: #0066CC !important; }
#fcw-gray { background: #666666 !important; }
#fcw-red { background: #ed1c24 !important; }
#fcw-yellow { background: #ffff00 !important; }
#fcw-color a { text-indent: -999px !important; }
#fcw-size a { text-indent: 0 !important; background: #333333 !important; }
</style>

<script type="text/javascript">
$(document).ready(function(){
$(" #fcw-color #fcw-black ").click(function() {
$(" .post-body ").css({ color: "#000000" });
return false;
});
$(" #fcw-color #fcw-white ").click(function() {
$(" .post-body ").css({ color: "#088A08" });
return false;
});
$(" #fcw-color #fcw-blue ").click(function() {
$(" .post-body ").css({ color: "#0066CC" });
return false;
});
$(" #fcw-color #fcw-gray ").click(function() {
$(" .post-body ").css({ color: "#666666" });
return false;
});
$(" #fcw-color #fcw-red ").click(function() {
$(" .post-body ").css({ color: "#ed1c24" });
return false;
});
$(" #fcw-color #fcw-yellow ").click(function() {
$(" .post-body ").css({ color: "#ffff00" });
return false;
});
});
</script>

<div id="tuw-font-change-widget">
<div class="tuw-fcw">
<h2> Ganti warna tulisan </h2>
<ul id="fcw-color">
<li> <a id="fcw-black" href="#">black</a> </li>
<li> <a id="fcw-white" href="#">green</a> </li>
<li> <a id="fcw-blue" href="#">blue</a> </li>
<li> <a id="fcw-gray" href="#">gray</a> </li>
<li> <a id="fcw-red" href="#">red</a> </li>
<li> <a id="fcw-yellow" href="#">yellow</a> </li>
</ul>
</div>
</div>

Selesai deh, tinggal di lihat hasilnya.

Menu Rocking and Rolling

5:48 AM Jquery

Sahabat blogger mungkin sudah tidak asing lagi mendengar kata menu navigasi, untuk postingan saya kali ini kita coba untuk membuat menu rocking & rolling. Menu ini sangat cocok buat sahabat-sahabat blogger yang suka mempercantik tampilan blognya, cara pembuatannya sangat mudah tinggal mengikuti langkah-langkah di bawah ini, yuk langsung kita mulai aja.

Seperti biasa masuk ke Edit HTML cari code ]]></b:skin> lalu copas script di bawah ini di atas code tadi.

/* -------------------------
Farthanet
----------------------------------------------- */
.item{
position:relative;
background-color:#f0f0f0;
float:right;
width:52px;
margin:0px 5px;
height:52px;
border:2px solid #ddd;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;
box-shadow:1px 1px 3px #555;
cursor:pointer;
overflow:hidden;
}
.link{
left:2px;
top:2px;
position:absolute;
width:48px;
height:48px;
}
.icon_home{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg64AG0MDg6xaBexigU5Lr1TiZhB0Vi6pEZ7Fl6W1hvsYLeuh4uLh5ND3NBfgUuaB3-rtO1QXidVG9u7hGLdSBiWSf20FbeQHSVJmgb6ry6wAqTOt3FU3vHmIMS-8IcLJpcBJyS5JSrChg/s1600/home.png) no-repeat top left;
}
.icon_mail{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv-_zpx7494NNV7_l7ys0OyPdQEFLcNxlieE9UyjYgugRswB4jGQuJVETtxPZSwETdUuf5bWFf9rC1VxcpxkQb5vpOJlB3Aoi8zzCkoiCtx-DXxI9xR2P91t4jtfFh5qmLYz7JQ5mv9ks/s1600/mail.png) no-repeat top left;
}
.icon_help{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxU1DqI3tDDlEzJ3u6TbCeiKzJ9vmOnCSRQJxpDtU9DH251df8r7xvcGQtaAD4Y9-gTsUiv16xdCX7Yu9YnDUPZrdgEp8vF1phHNRvoak9_UDUDqs3KXR7puTPTOVExhX5fXt7xzyK6k8/s1600/help.png) no-repeat top left;
}
.icon_find{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGRIL9NBi01g1-H5LRveBBT435VUNs3_gpYew1ZN23gF04Xal1btOFJKkGWZak8PUmxOmyHejCsH-fiqsyClGBPOUT1uSAlpOkRpjts-NQ984oh41auJNQ1vnHm-Tav0zjOhvDHtrbx14/s1600/find.png) no-repeat top left;
}
.icon_photos{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisAYU2vigLDLmrqXCYfBgyvKu0z20XvdGzTWYYdZggdfno5jF_dQN2NvrLnj20emOKVkfszRHC0XvtfCTzmeqO1x-dfRJQyXmYz7QV2ytnhaDbY_7mTFCjyAp8Ab6f771FDsga7vH4aI0/s1600/photos.png) no-repeat top left;
}
.item_content{
position:absolute;
height:52px;
width:220px;
overflow:hidden;
left:56px;
top:7px;
background:transparent;
display:none;
}
.item_content h2{
color:#aaa;
text-shadow: 1px 1px 1px #fff;
background-color:transparent;
font-size:14px;
}
.item_content a{
background-color:transparent;
float:left;
margin-right:7px;
margin-top:3px;
color:#bbb;
text-shadow: 1px 1px 1px #fff;
text-decoration:none;
font-size:12px;
}
.item_content a:hover{
color:#0b965b;
}
.item_content p {
background-color:transparent;
display:none;
}
.item_content p input{
border:1px solid #ccc;
padding:1px;
width:155px;
float:left;
margin-right:5px;
}

Selanjutnya copas lagi script di bawah ini di atas code </body>

Yang terakhir copas script di bawah ini di mana saja yang teman-teman suka, tapi di sini saya mencoba copas di HTML/JavaScript

<div class="item">
<a class="link icon_find"></a>
<div class="item_content">
<h2>Search</h2>
<p>
<input type="text" />
<a href="">Go</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_mail"></a>
<div class="item_content">
<h2>Contact us</h2>
<p>
<a href="#">Facebook</a>
<a href="#">Twitter</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_help"></a>
<div class="item_content">
<h2>Help</h2>
<p>
<a href="#">FAQ</a>
<a href="#">Live Support</a>
<a href="#">About Us</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_photos"></a>
<div class="item_content">
<h2>Image Gallery</h2>
<p>
<a href="#">Photo Profil</a>
<a href="#">Images Archives</a>
</p>
</div></div>
<div class="item">
<a class="link icon_home"></a>
<div class="item_content">
<h2>Home</h2>
<p>
<a href="#">Kategori</a>
</p>
</div></div>

Selesai, dan lihat hasilnya.

Menu Navigasi Mac Dock

5:45 AM Jquery

Akhirnya kesampaian juga saya membuat postingan ini, bagaimana cara membuat Menu navigasi CSS Mac Dock mungkin menu navigasi yang satu ini sudah sering kita liat berkeliaran di internet dan bermacam metode cara pemasangannya, nah kali ini kita coba untuk membuatnya ya walau pun postingan saya kali ini aga telat dari pada yang lain mohon di maafkan :), ya udah dari pada basa-basi terus langsung saja kita buat berikut langkah-langkahnya.

Masuk ke Edit HTML cari code ]]></b:skin> lalu copas script di bawah ini di atas code tadi.

/* ---------------
http://www.farthanet.blogspot.com/
---------------------------------- */
.dock {
position: relative;
height: 50px;
text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaHH8rwtQa01g_67-OOUGhC42saSVnBxsLqOdfgbi5Cz-WloQj1lTMuoikax1P3z1MyEo4jNJsFwbOH82JxnrUa9n-_EnB5G3d6csM5-IRwTFOikj3ucqmOZQoxuwrKKs5IlA5l4sIiLg/s1600/dock-bg2.gif);
padding-left: 20px;
}
a.dock-item {
display: block;
width: 40px;
color: #000;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
.dock-item span {
display: none;
padding-left: 20px;
}

Selanjutnya Copas lagi script dibawah ini, diatas code </head>

Lanjut lagi di bagian Body template, letakkan script di bawah ini, di atas </body>

Simpan templet, setelah itu copas lagi script di bawah ini dan letakkan dimana saja sesuai kesukaan teman-teman, disini saya meletakkannya di HTML/JavaScript sebagai contoh.

<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEgePABATMdOc_XfUd7RctEQKMOPmWy8tBq_XszHKI1Ne1yfeYM4yHUYCnT44BU04Qpz4WMoHISlt1cYqFNzNXw_MqAlMDhEqXTe9sjpRajsYFYjBW4whbyLVUhIKK9mtqwwE92NOh1ec/s1600/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQWGMtnAs_uvaR7osvlnSASvcLdEFw2ETx9_DYdq1nnaGqfrMFLBOBZTcGIITbbKAeuCHAtFfRSvXS_g1XcPdUoubQEOiXvmdNacQowSFEJqfudpCVGg8uZayQ1QpKIKWkV6R5niTEt_Q/s1600/email.png" alt="contact" /><span>Contact</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5CwhWUiry9jrrno3l0Nw4U0qb9HKvXSxNVGAoAVRst607aSxK-PK_PuX-BCn3d_gsc-3b4IaD90PiF2Fv7iJmAhRbRT3QVKB3xFzd4YRPaRBb_6i-j1D7Y_khNgHuI3BxdE2_0rKMlko/s1600/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN1sYYrnUpzh7h4z5qEnk4nDYYibBsg66_sLTQDm1OAEliSF4JyBazAHHa8XWXsu3DHBkOtAiVGxvAVrcIih1yJkOodiRVLKlm3ZSAlJbvgoU-0DNiHiiKoUo2Yxh-Fl7vJCD6umfN58o/s1600/music.png" alt="music" /><span>Music</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKNyfyTz_zsqY43RlhgtbbB8N_2g7o7uEbZ78jUm14hHPkiJUYMfDtvzhdrgvuZh8gKDdow0c1rrGCGhddZNeHKEdccs0VdIWdA9d19WU-Lpvu_P22jFTLIq0Qjf9PY4cYQ42kEWMk7SE/s1600/video.png" alt="video" /><span>Video</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrU9sVBZghE0yI6i1Sq7_1TYTez56-nG1KTwcIIzqniuCG5WgaxnZ2rRvMIyAgLKAS7Q1PR1mNhwfYfkz8b8wA5WjzHuPcB40k-bMSfCmhl-LuJ3fXvNPgc_uVZEJYOC07u3NUAfolnlI/s1600/history.png" alt="history" /><span>History</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmH9U7U0tuJN7WWknW5l32DVC9MYFEXW_2k8MPPshcuvaUsluEZT1y_MZod-cQ7gZJ2nxtpZxxjAPdSXM12ew9helB0SomTHAkrEp9s4hgKtpuPJ_X0cPfOlwQRGzZeB1PV-44dcfeW1g/s1600/calendar.png" alt="calendar" /><span>Calendar</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipQqFp7p835us5htrLMO8hYxbwoKx896oQt5MP4_vdZe7qeIwCnvHdtXydHGkcTeakiKgcjdWsjnjMseVOnBtE38DufgAbJGD-zahW_WrEA6L2T-tMHbM2YTUyzHBlXFlY2d4UQEGcpJ4/s1600/rss.png" alt="rss" /><span>RSS</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitEFQnYuVgyvc0ncxkv6vsJna2lL6571-NSpKiy4TR25XT5E9umTQLzn_cggNXGA9v0pj0kNlAeWHlgkqOxU3DnfxQunwQS5gFxaN3G_m6X54wBIU3JXth2fctvfO1niNbjhosSWQa6v4/s1600/rss2.png" alt="rss2" /><span>RSS2</span></a>
</div>
</div>

Selesai...!!! semoga bermanfaat.. :)

Efek Toggle Sidebar Blog JQuery

8:34 PM Jquery

Berikut langkah - langkah pembuatannya.
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : ]]></b:skin>
Lalu letakkan Kode CSS dibawah ini sebelum atau diatas kode ]]></b:skin>

#sidebar h2 {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhDhlrFKgUd-W6u0PzYyuoS0887Bm-xi4VcW_mz0za_8T9rj7juVxvB8h6b5-dezYPCbltMey7bMFVdIXECxXQOcZo1Ad5XYt97Oziegmqw6XwV8N8St6Hdm27FHGI7TFPtPYIUKMvngj5/")no-repeat 100% 50%;
}
#sidebar h2.headactive {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLa42K0atjFiZrd8EMwWosif02ZkAwm6Zi1oz-HMsrOX95Jn3p9KK42gLKU6INZNm6LJlm2Vd_SU4K1fp9G9h_ts1v0bdjCvYYn7QUsiBrQp-MJ9poyytsq6NNRtXtGb8LYUQrOBNNZDc/")no-repeat 100% 50%;
border-bottom:1px solid #282828;
}
#sidebar2 h2.headactive {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhDhlrFKgUd-W6u0PzYyuoS0887Bm-xi4VcW_mz0za_8T9rj7juVxvB8h6b5-dezYPCbltMey7bMFVdIXECxXQOcZo1Ad5XYt97Oziegmqw6XwV8N8St6Hdm27FHGI7TFPtPYIUKMvngj5/")no-repeat 100% 50%;
}

::: Sobat dapat mengedit code CSS diatas sesuka anda,

5. Setelah Itu taruh kode dibawah ini dibawah kode ]]></b:skin> , atau diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
var sidebarnameacc1="sidebar";
var accordionside1=true;
var sideshow1=new Array(0,0);
var sidebarnameacc2="sidebar2";
var accordionside2=false;
var sideshow2=new Array(0,0);
</script>
<script src='http://introbloggerscripts.googlecode.com/files/accordionscriptv101-min.js' type='text/javascript'/>

6. Langkah terakhir Save, dan lihat hasilnya..

Pasang Efek Jquery Di Label

8:29 PM Jquery

Biasanya jika kita lihat di blog orang lain mem modif label dengan pernak-pernik , kalau yang satu ini beda karena label yang diberi efek jquery ini akan bergerak jika mouse dekat dengan label tersebut .
Berikut caranya :

1 . Masuk di Blog anda lalu klik Design > Edit Html.

2. Cari kode kode </head> , lalu copy paste kode dibawah ini diatas atau sebelum kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 450;
$(document).ready(function() {
$('a.linknudge, .Label ul li a').hover(function() {
$(this).animate({
paddingLeft: '20px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
});</script>

4. Lalu klik simpan template dan lihat hasilnya.

Gambar Slideshow di Bawah Header

4:12 PM Jquery

Kali ini saya akan berikan tutorial cara pasang slideshow di bawah header. Saya mengambil kode yang paling sederhana dengan menu slideshow yang juga sangat sederhana. Slideshow sendiri fungsinya sebagai navigasi link yang biasanya diletakkan dibawah header, dan selalu menampilkan gambar sebagai pemanis agar pengunjung tertarik untuk mengklik isi yang dimaksud. Untuk demo saya gunakan template 3pictsel bikinan mas Riki dan meletakkannya di dalam main post, silahkan cek disini.

Kode css yang akan saya berikan tidak mutlak harus sama, karena setiap template pasti berbeda terutama dalam tutorial ini adalah lebar kolom postingan. Untuk demo saya gunakan template yang lebar postingannya kurang lebih 660px. Buat anda yang memiliki lebar kolom post lebih atau kurang dari 660px silahkan disesuaikan saja.

Login dulu di blogger.
Masuk ke Rancangan >> Edit HTML.
Jangan lupa klik Expand Template Widget karena akan membuat anda jadi pusing dengan kode yang panjang.
Copy paste kode berikut diatas kode ]]></b:skin>

view plain print ?

/* SLIDESHOW */
#slider-holder{width:660px;height:200px;overflow:hidden;margin-left:-20px; margin-right:10px; padding:0} #s3slider{width:660px;height:660px;position:relative;overflow:hidden}
#s3sliderContent{width:660px;position:absolute;top:0;margin-left:0}
.s3sliderImage{float:left;position:relative;display:none}
.s3sliderImage span{position:absolute;left:0;font-weight:700;font-size:12px;color:#fff;height:45px;width:660px;background-color:#4e4d3c;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;display:none;bottom:0;padding:10px}
.s3sliderImage span a.featured-title:link,.s3sliderImage span a.featured-title:visited{color:#FFF;font-size:14px;padding:0 0 2px}
.s3sliderImage span a.featured-title:hover{color:#999}
.s3sliderImage span a:link,.s3sliderImage span a:visited{color:#888}
.s3sliderImage span a:hover{color:#555}

Kemudian copas kode berikut diatas kode </head>

Setelah itu siapkan gambar dan url yang akan ditampilkan dalam menu slideshow, jika sudah ada gambar dan url-nya, silahkan anda copas kode berikut setelah kode <div id='main-wrapper'>

<div id='slider-holder'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage' style='display: list-item;'>
<a href='LETAK LINK DISINI 1'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSzysgF8v7yr1pdRX2GZgHBPyJU9mvMHo4uLq7708MLryz2NcvSW6_1zlxsflyM4nLaiugMdtr4iBNZsNZC5yhMSo-OccXq5gQHtzjxJepwbL4iJDmYjyGGlxfl14GtGH2f-_-5t9PTOk/s1600/NorahJones.jpg' style='width: 660px; height: 200px;'/></a>
<span style='display: block;'>
<a class='featured-title block' href='LETAK LINK DISINI 1'>INI GAMBAR NORAH JONES</a><br/>
Norah Jones adalah seorang musisi jazz yang sudah banyak mendapatkan Grammy Award
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LETAK LINK DISINI 2'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpuPKG-d96A5d53ZmUgb-_1sqiBiMk_j0KrLPHuKKCnH20XVccuHquMNz918NXdHaZH7PMEREeYnspAvjpljDouwZ0cJhFB7EGqGDhLAxxQDq8mQtIU3XZgVoaryDrs7iN2PbhOL60VYw/s1600/174456_1_f.jpg' style='width: 660px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LETAK LINK DISINI 2'>FOURPLAY</a><br/>
Nggak usah dijelaskan udah ada tulisanya diatas
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LETAK LINK DISINI 3'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigfoEvvRI_eP3kBrDY3WdIgzgnTfZjGVy_iM7kcXJjsTgR0c4tS3bc7bHPBH2fHWg4p8ZvVGoUsp94PstU2ZGDM8dTMKZL3TVI3ENplocrTK4uvsztrZN3hnphYkhckjwXLW-mVG2rDtk/s1600/andien.jpg' style='width: 660px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LETAK LINK DISINI 3'>MBAK ANDIEN</a><br/>
Ini orangnya yang..............
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LETAK LINK DISINI 4'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdUCwL3A-YnGy0lruoXVSy6UzlgPl-D2D7Qv8q2bu3a4g85gvv_KDxHWwqdSvWdazVT1hAUE2MRXrRP-NeNZC3cw0kxHeJsoCRz4_uwCXZOHycJu_IUdgkLrta-QkpqsT3qEhB0wvfvdI/s1600/Alanis-Morissette-2.JPG' style='width: 660px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LETAK LINK DISINI 4'>ALANIS MORISSETTE</a><br/>
Tampangnya sih biasa, tapi lagunya teman-teman semua harus mendengarkan
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LETAK LINK DISINI 5'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPt3Y_upbzDbBTyjVF3Bld_3_1I-WDuf-Y4FPm8As2m7t415hq7CO5uiB3iMtfecbr2MaZi3vFJ7VUaxU8Eb2WpVVTup23jFoLtmfgJiyiPnO9fn7tx32E6zqB6pH_bAjBZPrqpo7jbDY/s1600/Anne-Hathaway-02.jpg' style='width: 660px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LETAK LINK DISINI 5'>WANITA CANTIK</a><br/>
Siapa coba gambar cewek diatas? Kasih jawabannya di kotak komentar ya....
</span>
</li>
<li class='clear s3sliderImage'/>
</ul>
</div>
</div>

Simpan Template

Keterangan :

Perhatikan lebar 660px, silahkan sesuaikan saja dengan lebar post template anda.
Perhatikan juga angka -20px pada kode css-nya, saya gunakan margin-left:-20px karena menyesuaikan dengan demo template yang saya gunakan.
Tulisan yang berwarna merah ganti dengan deskripsi tentang gambar anda.
Kode yang berwarna biru adalah kode url untuk gambar yang sudah anda upload sebelumnya.

Gimana teman-teman, cukup panjang kan? Jangan khawatir, saya yakin teman-teman semua bisa melakukannya, semoga berhasil ya !

Efek Pemindahan Gambar Dengan JQuery

4:10 PM Jquery

ambar dalam sebuah artikel sangat berarti dalam memperjelas isi atau konten yang sedang kita buat. Tampilan gambar juga bisa dimodifikasi sehingga menjadi lebih cantik. Kali ini saya akan berbagi lagi satu tips untuk memperindah gambar yang kita tampilkan di artikel, yaitu memindahkan gambar dengan jQuery. Maksud dari effect ini ialah kita dapat menggeser atau mendrag gambar sesuai dengan keinginan kita pada gambar posting kita atau gambar di blog kita. Nah jika temen-temen tertarik untuk membuatnya, perhatikan langkah-langkahnya di bawah ini :

Login dulu di Blogger dengan akun anda.
Pada dashboard pilih Rancangan >> edit HTML
Jangan lupa Centang Expand Template Widget
Klik Download template lengkap untuk jaga-jaga.
Sekarang pasang Css kode dibawah ini diatas kode ]]></b:skin>

.drag_gambar img { cursor: move;}
Selanjutnya simpan script berikut diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$("div.drag_gambar img").draggable();
});
</script>
Keterangan :
Perhatikan kode script berwarna Kuning diatas, jika pada template anda sudah terdapat script tersebut, jangan dipasang lagi, pasang saja script yang berwarna merah.
Kemudian klik Save/Simpan Template
Untuk penggunaannya pada gambar, anda bisa menggunakan kode berikut :

<div class='drag_gambar'><img alt='KETERANGAN GAMBAR' src='URL GAMBAR'/></div>

Mudah bukan, tutorial ini sangat sederhana dan bisa memperindah tampilan gambar yang ada di artikel anda. Jika ada yang mau ditanyakan silahkan untuk mengisi kotak komentar yang ada di bawah. Selamat mencoba dan semoga bermanfaat.

Tampilan iPAD Proview Technology

Ilmuwan India Bikin Pencetak Benda dari Foto 3D

Kelas Gratis "OpenBTS" Digelar di Jogja

Laptop Tipis Akan Jadi Tren di 2012

KRITIK DAN PUJIAN UNTUK WINDOWS 8