Blog Kang Fatur: JQuery

    Social Items

Home / JQuery
Showing posts with label JQuery. Show all posts
Showing posts with label JQuery. Show all posts
Loading Blog

Membuat Animasi Loading di Blog - Rata-rata para Blogger sekarang sudah banyak yang menggunakan Animasi Loading agar terlihat bagus. Animasi Loading adalah dimana saat blog kita sedang menuju ke halaman Posting/URL lain maka disitulah terlihat Animasi Loading yang sedang berputar sampai Loading blog selesai. Dan kali ini saya akan memberi cara untuk Membuat Animasi Loading di Blog.


Langkah-langkah untuk Membuat Animasi Loading di Blog. Login ke blogger.com Pilih Rancangan / Template, kemudian Edit HTML Cari kode ]]></b:skin> Jika sudah ketemu lalu letakan kode berikut diatas kode ]]></b:skin> 

<style type="text/css">
#loadhalaman {
  position: fixed;
  opacity: 0.93;
  top: 0;
  left: 0;
  background-color: #000;
  z-index: 9999;
  text-align: center;
  width: 100%;
  height: 100%;
  padding-top: 20%;
  color: #000;
  display: none;
}

.loadball {
  background-color: transparent;
  border: 5px solid #00a3ff;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-radius: 50px;
  box-shadow: 0 0 35px #00a3ff;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  -moz-animation: spinPulse 1s infinite ease-in-out;
  -webkit-animation: spinPulse 1s infinite linear;
}

.loadball-2 {
  background-color: transparent;
  border: 5px solid #00a3ff;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-radius: 50px;
  box-shadow: 0 0 15px #00a3ff;
  width: 30px;
  height: 30px;
  margin: 0 auto;
  position: relative;
  top: -50px;
  -moz-animation: spinoffPulse 1s infinite linear;
  -webkit-animation: spinoffPulse 1s infinite linear;
}

@-moz-keyframes spinPulse {
  0% {
    -moz-transform: rotate(160deg);
    opacity: 0;
    box-shadow: 0 0 1px#00a3ff;
  }

  50% {
    -moz-transform: rotate(145deg);
    opacity: 1;
  }

  100% {
    -moz-transform: rotate(-320deg);
    opacity: 0;
  };
}

@-moz-keyframes spinoffPulse {
  0% {
    -moz-transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(360deg);
  };
}

@-webkit-keyframes spinPulse {
  0% {
    -webkit-transform: rotate(160deg);
    opacity: 0;
    box-shadow: 0 0 1px#00a3ff;
  }

  50% {
    -webkit-transform: rotate(145deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: rotate(-320deg);
    opacity: 0;
  };
}

@-webkit-keyframes spinoffPulse {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  };
}
</style>


Jika sudah, Pasang JQuery Terbaru Caranya cari kode </head> lalu letakan kode JQuery 1.8.3 di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
Langkah Terakhir, Cari kode </body> lalu letakan kode berikut diatas kode </body> 

 <div id='loadhalaman'>
<div class='loadball'/>
<div class='loadball-2'/>
</div>
<script type='text/javascript'>
$(function () {
    var siteURL = &quot;http://&quot; + top.location.host.toString();
    var $internalLinks = $(&quot;a[href^=&#039;&quot; + siteURL + &quot;&#039;], a[href^=&#039;/&#039;], a[href^=&#039;./&#039;], a[href^=&#039;../&#039;]&quot;);
    $internalLinks.click(function () {
        $(&#039;#loadhalaman&#039;).fadeIn(1500).delay(6000).fadeOut(1000);
    });
    $(&#039;#loadhalaman&#039;).click(function () {
        $(this).hide();
    });
});
</script>

Semoga bermanfaat.

Membuat Animasi Loading di Blog

Haloo para Sobat Blogger semua, setelah kurang lebih setahun tidak Ngeblog karena aktivitas lain, minggu-minggu ini saya baru ngeblog lagi sekaligus mengganti Template yang katanya Responshive, Ok langsung aja kepermasalahan.

Konten Sosial Locker

Berapa banyak orang yang menggunakan situs jaringan sosial untuk meningkatkan Traffic Website mereka ? Ada Blogger profesional yang sepenuhnya tergantung pada Lalu Lintas Sosial . Namun, sangat sulit untuk mendapatkan eksposur sosial dengan cepat . Padahal , ada beberapa widget yang membantu untuk meningkatkan pengikut sosial , tetapi tidak cukup . Jika kita ingin mendominasi web sosial , maka kita harus memanfaatkan setiap kesempatan yang kita miliki.

Di bawah ini Locker Sosial terdiri dari tiga tombol sosial dan loker menampilkan horizontal. Tombol Sosial terdiri dari Facebook, Twitter dan Google plus. Setiap seseorang yang akan melihat Link atau Gambar atau apasaja yang kita sembunyikan didalamnya harus mengklik salah satu tombol share yang tiga tersebut. Kebanyakan orang biasanya trik ini digunakan untuk menyembunyikan Link Download.
Untuk lebih jelasnya di bawah ini adalah demonya, silahkan sobat share ke salah satu jejaring sosial.






Sumber : http://www.mybloggerlab.com/

Membuat Konten Sosial Locker di Blogger BlogSpot

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 :

kang fatur

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>



KETERANGAN
  1. Ubahlah LINKSOBAT sesuai dengan link keinginan sobat.
  2. Ubahlah keterangan didalam tag title (misal; title='Beranda' di ubah menjadi title='Home') sesuai dengan keinginan sobat.
  3. Perhatikan kode pada Langkah 5 baris 5 yaitu top: 50px; ubahlah nilai 50 untuk menentukan jarak antara bagian atas halaman blog dengan menu.
  4. Perhatikan kode pada Langkah 5 baris 15 yaitu margin-left: -50px; ubahlah nilai -50 untuk mengatur berapa jarak menu yang akan disembunyikan.
  5. Jika nilai -50 diubah (pada keterangan nomor 4) maka nilai -50 pada Pada Langkah 7 baris 7 dan baris 13 juga harus diubah atau disamakan.
  6. Perhatikan kode pada Langkah 5 baris 34, 37, 40, 43, 46, 49, 52 ubahlah URL Icon sesuai dengan icon yang telah sobat siapkan.




KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Navigasi Efek Slide Out dengan jQuery

Slid Show JqueryjQuery Cycle Plugin adalah sebuah Slideshow Plug In yang ringan dan cukup mengagumkan. Plugin ini menyediakan sebuah metode pemanggilan cycle yang di libatkan pada sebuah element container,yang mana tiap-tiap bagian element dari container menjadi sebuah slide. Jika sobat tertarik menggunakan jquery slideshow dengan cycle plugin untuk blogger khususnya atau website sobat ikutilah langkah-langkah di bawah ini

  1. Seperti biasa sobat harus log in dulu ke blogger
  2. Pilih Rancangan
  3. Kemudian pilih Edit HTML
  4. centang Expand Widget Templates dan backup dulu templete sobat (untuk menghindari apabila terjadi kesalahan)
  5. Copy code dibawah ini dan pastekan diatas code </head> atau di bawah code ]]></b:skin>


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"> </script>
    <script type="text/javascript" src="http://my-slideshow.googlecode.com/files/jquery.cycle.all.min.js"> </script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('#myslides').cycle({
    fx: 'cover',
    speed: 500,
    timeout: 2000
    });
    });
    </script>



  6. Untuk code CSS di bawah ini sobat copy dan pastekan diatas kode ini ]]></b:skin>

    #myslides {
    width: 370px;
    height: 220px;
    padding: 0;
    margin: 0 auto;
    }

    #myslides img {
    padding: 10px;
    border: 1px solid rgb(100,100,100);
    background-color: rgb(230,230,230);
    width: 350px;
    height: 200px;
    top: 0;
    left: 0
    }


    PERHATIAN
    Sobat bisa mengedit kode css diatas sesuai dengan yang sobat inginkan misalnya width (lebar slidshow/gambar) dan height (tinggi slideshow/gambar)


  7. Langkah yang terakhir adalah sobat memasang kode HTML di bawah ini dimana sobat ingin meletakkan SlidShow tersebut dengan mendambah Gadget.


<div id="myslides">
<img src="http://my-slideshow.googlecode.com/files/cilimus.jpeg.jpg" />
<img src="http://my-slideshow.googlecode.com/files/air-panas.jpg" />
<img src="http://my-slideshow.googlecode.com/files/gunung-ciremai.jpg" />
<img src="http://my-slideshow.googlecode.com/files/telaga-remis.jpg" />
<img src="http://my-slideshow.googlecode.com/files/kolamlinggarjati.jpg" />
</div>

PERHATIAN
kode yang berwarna kuning adalah alamat Gambar. Silahkan sobat ganti dengan alamat gambar sobat.


KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Cara Membuat Slideshow Dengan Jquery Cycle Plug In

Floating Menu SQueryPada tutorial kali ini saya akan mengetengahkan cara membuat "Floating Menu JQuery dengan Link Efek Disko", kenapa saya kasih judul ini mungkin karena apa yang saya bahas mirip dengan lampu disko hehehe, mungkin para sobat juga kurang puaskan apa dan seperti apa yang dibahas kali ini??..

Untuk kepastian dan meyakinkan kepada para sobat semua silahkan para sobat klik disni atau disini untuk melihat langsung demo yang kita bahas.

Gimana tertarik? OK kalau sobat semua tertarik dan ingin mencobanya silahkan lakukan langkah langkah sebagai berikut :

Langkah Pertama :
Seperti biasa para sobat harus dalam keadaan LogIn. Dasbor --> Rancangan --> Edit HTML. kemudian cari ]]></b:skin> Setelah ketemu simpan kode tersebut di atas kode tadi.

#floatMenu {
position:absolute;
top:150px;
left:50%;
margin-left:235px;
width:200px;
}
#floatMenu ul {
margin-bottom:20px;
}
#floatMenu ul li a {
display:block;
border:1px solid #999;
background-color:#222;
border-left:6px solid #999;
text-decoration:none;
color:#ccc;
padding:5px 5px 5px 25px;
}
#floatMenu ul li a:hover {
color:#fff;
background-color:#333333;
}
#floatMenu ul.menu1 li a:hover {
border-color:#09f;
}
#floatMenu ul.menu2 li a:hover {
border-color:#9f0;
}
#floatMenu ul.menu3 li a:hover {
border-color:#f09;
}

Langkah ke Dua cari kode seperti ini <head> setelah ketemu simpan kode di bawah ini sebelum kode <head>

<script language="javascript" src="http://longfield22.googlecode.com/files/jquery_mini.js"></script>
<script language="javascript" src="http://longfield22.googlecode.com/files/jquery.dimensions.js"></script>
<script language="javascript">
var name = "#floatMenu";
var menuYloc = null;

$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
});
</script>

<link href="http://longfield22.googlecode.com/files/reset.css" rel="stylesheet" type="text/css" />
<link href="http://longfield22.googlecode.com/files/page.css" rel="stylesheet" type="text/css" />




Langkah ke Tiga yaitu sobat cari kode seperti ini <body> setelah ketemu letakkan kode di bawah ini dibawah kode <body>

<div id="page-wrap">
<div id="header">
<h2> Longfield Floating menu</h2>
<h1>jQuery&CSS</h1>
</div>
<div id="content">


</div>
</div>

<div id="floatMenu">
<ul class="menu1">

<li><a href="#" onclick="return false;"> Home </a></li>
</ul>
<ul class="menu2">
<li><a href="#" onclick="return false;"> category </a></li>
<li><a href="#" onclick="return false;"> forum </a></li>
<li><a href="#" onclick="return false;"> facebook gw </a></li>

</ul>
<ul class="menu3">
<li><a href="#" onclick="return false;"> Technical support </a></li>
</ul>
</div>


Setelah langkah-langkah di atas beres klik Simpan Template, beres deeh

PERHATIAN
JIka ada </div> yang kurang silahkan ditutup OK


Selamat mencoba semoga berhasil dan bermanfaat

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Floating Menu JQuery Dengan Link Efek Disko

Pada postingan sebelumnya pernah saya membahas tentang 30+ Menu Navigasi Horizontal dengan CSS dan HTML. Yang banyak akan pilihan

Naah, 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.

Menu Navigasi Slide Out

Jika sobat ingin melihat Demonya silahkan klik disini atau disini.

OK, mungkin setelah melihat demo di atas para sobat pingin langsung pasang di blog sobat mari kita lanjut ke langkah-langkah sebagai berikut :

  1. Seperti biasa Login ke Blogger sobat
  2. Masuk ke Tata Letak --> Edit HTML
  3. Kemudian centang "Expand Template Widget"
  4. Selanjutnya cari kode ]]></b:skin>
  5. Jika sudah ketemu Masukkan (Copy Paste) kode CSS di bawah ini, tepat di atas kode ]]></b:skin> tadi.

    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);
    }



  6. Langkah selanjutnya cari kode seperti ini </head>
  7. Setelah ketemu Masukkan kode JQuery di bawah ini tepat di atas kode </head> tadi.

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
    <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>


    PERHATIAN!!
    Jika di template sobat sudah pernah dipasang kode yang berwarna merah di atas, sebaiknya kode tersebut tidak usah dipasang


  8. Kemudian langkahk yang terakhir sobat cari kode seperti ini </body>
  9. Setelah ketemu kemudian Masukkan (Copy Paste) kode di bawah ini tepat di atas kode </body> tadi.

    <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='LINKANDA' 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>


  10. Simpan template sobat dan lihat hasilnya. Selamat mencoba semoga berhasil dan dapat bermanfaat.



KETERANGAN!!
  • Ubahlah LINKSOBAT dengan keinginan link Sobat.
  • Ubahlah keterangan didalam tag title (misal; title='Beranda' di ubah menjadi title='Home') sesuai dengan keinginan anda.



KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Menu Navigasi Slide Out / Slide Out Navigation

Pada tutorial kali ini saya akan mengetengahkan cara "Membuat Tobmol Back To Top JQuery". Fungsi tombol ini yaitu untuk menggulung layar ke atas pada Blog/Situs kita, apalagi bagi Blog sobat yang memuat Postingan sangat panjang, dan pembacapun tidak kewalahan harus menscroll dari bawah ke atas (kasian takut kewalahan).

Saya tidak akan panjang lebar untuk menjelaskan hal ini, karena sobat-sobat semua mungkin sudah pada tahu alias paham OK. Adapun cara pembuatannya sangat gampang dan simpel alias tidak membuat sobat pusing.

OK, kita langsung aja ke tahap pembuatan yuuukk,

  1. Seperti biasa LogIn ke Blogger sobat
  2. Klik tab Rancangan --> Elemen Halaman
  3. Klik Tambah Gadget --> HTML/Java Script
  4. Kemudian simpan kode dibawah ini dalam konten HTML/Java Script

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

    <script src="http://kangfatur.googlecode.com/files/uwihdei.js" type="text/javascript"></script>


    PERHATIAN
    Kode yang berwarna Green/Hijau jika di HTML Template sobat sudah pernah memasangnya atau sudah ada maka sobat cukup memasang kode yang berwarna Merah/Red saja OK


  5. Setelah langkah-langkah diatas terpenuhi maka klik tombol Save dan lihat hasilnya


Selamat mencoba semoga bermanfaat.


KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Membuat Tombol Back To Top JQuery

Dengan di temaninya sebungkus rokok dan segelas kopy plus martabak akhirnya Alhamdulillah kang fatur bisa jalan jalan di dunia tidaknyata alias Internet. Dan Alhamdulillah saya mendapat oleh-oleh dari salah seorang hali bloger orang Arab Saudi untuk dibagikan kepada para sobat semua.

Oleh-oleh yang saya dapatkan dan yang saya akan bagikan pada malam ini yaitu tentang Membuat Multi Level Drop-Down Menu Dengan CSS dan JQuery. Mungkin para sobat juga sudah banyak mendengar tentang masalah ini, dan sudah banyak para ahli yang mempostingkannya, namun saya hanya sekedar ingin berbagi sama para sobat yang masih awam seperti saya dan mudah mudahan postingan kali ini dapat bermanfaat.

Baik, untuk para pemula semuanya kalau belum tahu apa itu Multi Level drops-Down Menu di bawah ini contoh gambarnya :



Gimana tertarik?? Nah berikut langkah-langkah membuat multi level drop-down menu dengan JQuery.


1. Seperti biasa Log In pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML


2. Tambahkan script JQuery berikut sebelum tag </head>

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



catatan: bagi sobat yang sudah pernah menambahkan atau pada templatenya sudah terdapat scrip Jquery maka langkah kedua abaikan saja


3. Tambahkan juga script berikut setelah script JQuery yang tadi

<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->


<script type="text/javascript" src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/Dropdownmenuwithjquery.js"></script>

4. Selanjutnya tambahkan kode CSS berikut diatas tag ]]></b:skin>:

.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}



5. Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://amatullah83.blogspot.com/">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://amatullah83.blogspot.com/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>



6. Simpan template maka Hasilnya seperti pada gambar di bawah ini :



Untuk Sobat yang sudah hali dengan CSS silahkan edit sesuai selera sobat untuk kode warna silahkan klik disini.

Sekian dulu dari saya, insya Allah postingan selanjutnya menyusul, mau nerusin ngopy dulu takut keburu dingin.

Semoga bermanfaat! Thanks to Dinamic Drive

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Membuat Multi Level Drop-Down Menu

Salam blogger, sebelumnya saya akan berterimakasi kepada pengunjung dan pencinta blogger sekalin khususnya shabat - sahabat blogger, pada kesempatan malam ini saya akan bagi bagikan satu buah trik yang sederhana, simpel tapi mengasikan hehe cara pemasangannyapun sangat simpel.

OK, trik yang akan saya berikan adalah cara membuat "Recent Post Slide Show JQuery" dengan yang namanya "Recent Post Slide Show" ini blog kita akan lebih cantik dan menarik, mudah mudahan pengunjung kita pun juga merasa betah AMIIIN.

OK, berhubung saya tidak mao ngomong panjang lebar karena masih banyak yang harus du beresin kita langsung aja ke TKP :

1. Seperti biasa Masuk ke account Blogger sobat, pilih "Layout" kemudian "Page Elements",
2. Klik "Add a Gadget" (yang mana aja oke), kemudian pilih "HTML/JavaScript",
3. Copy-paste kode di bawah ini:

<script src="https://sites.google.com/site/efekefek/file-js/recentpostslide.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language='javascript'>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://ade-tea.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src=https://sites.google.com/site/efekefek/file-js/recentpostslide2.js' type='text/javascript'></script>
</div>

PERHATIAN
Kode yang berwarna merah ganti dengan alamat link sobat OK


Setelah semua langkah - langkah terlewati, simpan dan lihat hasilnya??

Selamat mencoba semoga bermanfaat dan jangan lupa comennya,

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Recent Post Slide Show JQuery

Subscribe to: Posts (Atom)

Subscribe Our Newsletter

Notifications

Disqus Logo