Girant_31: jQuery

Tampilkan postingan dengan label jQuery. Tampilkan semua postingan

By Girant_31

Alhamdulillahirobbil'alamin..

Masih bisa update disela-sela. . . .

Menyambung dan mengupdate tentang memberi effect gambar didalam postingan, jika sebelumnya ane pernah share sedikit tentang Effect Image Corner pada postingan, kali ini masih sama tentang effect-effectan pada gambar yang kita pasang didalam postingan. bedanya Effect kali ini adalah effect elastis Thumbnail membesar disaat dilewati oleh Cursor/Pointer. atau lebih detailnya effect kali ini memiliki dua fungsi tergadap gambar, pertama Membuat ukuran gambar menjadi thumbnail lebih kecil dari ukuran aslinya ketika halaman pertama kali dimuat, kedua Memberi efek animasi dengan mengembalikan gambar kembali ke ukuran sebenarnya ketika mouse kita lewatkan diatasnya.

Demo Elastis Effect ThumbnailKlik disini untuk melihat demo Elastis Effect Thumbnail Membesar

Pada demo tersebut, coba lewati gambar yang ada disana dengan cursor/pointer sobat, dan lihat apa yang terjadi?! nah effect yang seperti itulah yang ane maksud..

Langsung saja ke cara penerapan nya.

Langkah 1

Seperti biasa untuk kode CSS, diletakan diatas kode ]]></b:skin> pada Rancangan - Edit HTML blog sobat.

.menuitem{display:inline-block;}

Langkah 2

Dan untuk kode Java Script, diletakan diatas kode </head> pada Rancangan - Edit HTML blog sobat.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;.menuitem img&#39;).animate({width: 100}, 0);
$(&#39;.menuitem&#39;).mouseover(function(){
gridimage = $(this).find(&#39;img&#39;);
gridimage.stop().animate({width: 200}, 150);
}).mouseout(function(){
gridimage.stop().animate({width: 100}, 150);
});
}); 
</script>

Perhatikan kode pada baris ke 1, kode tersebut adalah kode Framework jQuery dari Java Script diatas, jika sebelumnya sobat semua pernah memasang jQuery Framework tersebut pada template sobat, maka kode pada baris ke 1 dihapus saja.

Langkah 3

Save template sobat, lalu menuju ke halaman posting.
Upload lah satu contoh gambar kedalam postingan.

Langkah 4

Pindahkan mode editor postingan sobat ke mode Edit HTML. dan cari kode gambar yg sudah di upload sebelumnya. untuk kode gambar biasanya akan seperti ini bentuk kode nya :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80cNJS4Kfz_WU6tuKDz7UgJcdYzLMjab6yM6sg5fPfAgS8FL8evWAUUvhYt9Hh107LLXd_VXj0_QfE13zxBUVQgEjMqsqE0kxUGN4TZKrqFT42ggFHTkI3nNC2YwSinvT6ulRMtXa-AeS/s1600/tooltip+jquery+girant_31.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80cNJS4Kfz_WU6tuKDz7UgJcdYzLMjab6yM6sg5fPfAgS8FL8evWAUUvhYt9Hh107LLXd_VXj0_QfE13zxBUVQgEjMqsqE0kxUGN4TZKrqFT42ggFHTkI3nNC2YwSinvT6ulRMtXa-AeS/s400/tooltip+jquery+girant_31.jpg" width="400" />
</a>

Langkah 5

Jika sudah ketemu kode gambarnya, maka tinggal tambahkan kode dibawah ini pada kode gambar tersebut.

class="menuitem"

dan akan membentuk kode gambar secara keseluruhan seperti dibawah ini :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80cNJS4Kfz_WU6tuKDz7UgJcdYzLMjab6yM6sg5fPfAgS8FL8evWAUUvhYt9Hh107LLXd_VXj0_QfE13zxBUVQgEjMqsqE0kxUGN4TZKrqFT42ggFHTkI3nNC2YwSinvT6ulRMtXa-AeS/s1600/tooltip+jquery+girant_31.jpg" class="menuitem" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80cNJS4Kfz_WU6tuKDz7UgJcdYzLMjab6yM6sg5fPfAgS8FL8evWAUUvhYt9Hh107LLXd_VXj0_QfE13zxBUVQgEjMqsqE0kxUGN4TZKrqFT42ggFHTkI3nNC2YwSinvT6ulRMtXa-AeS/s400/tooltip+jquery+girant_31.jpg" width="400" />
</a>

kode yang berwarna merah adalah kode yang disisipkan diantara kode gambar dalam postingan sobat, sisipkan sebelum kode "><img Lalu terbitkan entri postingan sobat, dan lihat hasilnya disaat cursor/pointer sobat melewati gambar yang telah diterbitkan dalam postingan sobat..

Langkah 6

Selesai.
Selamat Mencoba dan semoga bermanfaat.

Sedikit Informasi, kode-kode atau trik diatas dapat juga sobat gunakan untuk membuat menu dengan menggunakan gambar dan effect seperti yang dimaksud diatas.

More►►

Auto Caption pada Gambar

By Girant_31

Update kembali disela-sela kesibukan KKN.
Pada postingan kali ini, ane sedikit update tentang Effect Image Corner pada postingan sebelumnya. sama hal nya dengan Effect Image Corner, Auto Caption pada Gambar ini masih membahas sekitar modifikasi gambar pada postingan dengan sentuhan effect auto caption sebagai keterangan pada gambar tersebut agar terlihat lebih menarik dan lebih elegant.

Demo Auto Caption pada GambarKlik disini untuk melihat demo Auto Caption pada Gambar

Auto Caption pada Gambar adalah effect pada gambar dipostingan yang mana effect tersebut membungkus gambar dan memberikan wadah untuk keterangan dari gambar, kurang lebih keterangan gambarnya seperti ini:

Tertarik ??

Mari kita lihat cara membuatnya :

Langkah 1

Masukan kode dibawah ini diatas kode ]]></b:skin> pada halaman Rancangan - Edit HTML template blog sobat semua.

div.gambar {
margin:2px 1px 10px;
padding:5px;
text-align:center;
background:url() repeat-y scroll left center #E3C7EF;
border:1px solid #6A2D86;
display:inline-block;
}
div.gambar img {
display:block;
}
div.gambar span{
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
background:url() repeat-x scroll 0 0 #6A2D86;
color:#fff;
margin:5px 0 0;
display:block;
padding:2px;
border:1px solid #6A2D86;
}

Langkah 2

Pasang Framework jQuery dibawah ini diatas kode </head> pada halaman Rancangan - Edit HTML template blog sobat semua.

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

Seperti biasa, jika Framework jQuery tersebut sebelumnya sudah sobat pasang di template sobat, maka Langkah 2 dilewat saja.

Langkah 3

Letakan kode dibawah ini diatas kode </head> pada halaman Rancangan - Edit HTML template blog sobat semua, atau setelah kode Framework jQuery diatas bagi yg belum pernah memasang Framework jQuery tersebut.

<script style='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$(".gambar").each(
 function() {
  $(this).wrap("<div></div>");
  $(this).parent().attr("class", "gambar");
  $(this).attr("class", "");
  $(this).parent().append("<span>" + $(this).attr("alt") + "</span>");
  $(this).removeAttr("style");
  $(this).parents("a").removeAttr("href");
 }
);
});
//]]>
</script>

Langkah 4

Save template sobat, dan dilanjut membuat satu postingan dengan mengupload gambar pada postingan tersebut.

Langkah 5

Cari kode HTML gambar yg sudah diupload pada mode Edit HTML new entry post sobat, biasanya kode HTML dari gambar akan membentuk seperti ini :

<img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWb8LVy3KXnbot0KZHUpx8kYC0ptdy9XFky1ZxWhtNIQ1kBaHuv-PWe5iUMaqOLxpOw5s_kUBKSzVqvqXjnPBRBwhT36AISeP5yP_MC8DgVU43A2hRKAz5FCE4zZEcZYRceQZhfjFCwNuc/s400/autocaption-girant.jpg" alt="Ket Gambar" width="400" />

Setelah ketemu. lalu. . .

Langkah 6

Sisipkan kode class="gambar" pada kode HTML gambar diatas, sehingga akan membentuk keseluruhan kodenya seperti dibawah ini :

<img class="gambar" border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWb8LVy3KXnbot0KZHUpx8kYC0ptdy9XFky1ZxWhtNIQ1kBaHuv-PWe5iUMaqOLxpOw5s_kUBKSzVqvqXjnPBRBwhT36AISeP5yP_MC8DgVU43A2hRKAz5FCE4zZEcZYRceQZhfjFCwNuc/s400/autocaption-girant.jpg" alt="Keterangan Gambar" width="400" />

Langkah 7

Lantas bagaimana dengan memberikan keterangan pada gambar tersebut??
biasanya sudah secara otomatis terpasang atribut alt="ket gambar" pada kode HTML gambar tersebut. namun saran ane, sesuaikanlah dengan keterangan gambar yg kita kehendaki dengan mengisi atribut tersebut.

Langkah 8

Terbitkan entri posts sobat, dan lihat hasilnya..
Terciptalah secara otomatis Auto Caption pada Gambar di postingan sobat.
menarik bukan ??

Selesai.
Selamat mencoba dan semoga bermanfaat.

More►►

Tooltips Menu Hover

By Girant_31

Mengenal Tooltips, mungkin sudah tidak asing lagi bagi sobat blogger semua. banyak cara dalam memasang tooltips di blog dan berbagai macam pula menempatkan tooltips tersebut. Kali ini ane akan sedikit share tentang Tooltips Menu Hover yang mana membuat menu dengan effect tooltips di saat cursor melintas diatasnya.

Seperti apa Tooltips Menu Hover ?

mari kita lihat demo nya.

Demo Tooltips Menu HoverKlik disini untuk melihat demo Tooltips Menu Hover

Cara membuat Tooltips Menu Hover :
Langkah 1

Letakan kode dibawah ini tepat diatas kode ]]></b:skin> pada halaman Rancangan-Edit HTML akun blog sobat.

.menu {
margin:100px 10px 10px 10px;
padding: 0;
list-style: none;
}
.menu li {
padding: 0;
margin: 0 2px;
float: left;
position: relative;
text-align: center;
}
.menu a {
padding: 14px 10px;
display: block;
color: #000000;
width: 144px;
text-decoration: none;
font-weight: bold;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGrMWeNhsJonC3eti0IBdc6CQmAh1KC9aQczsmspZ3HcVhAcZV-8aD3ohYOdx7nZ-eRv2CU8PM5Pab1nqECek4RzCNPJIpkNJKzQAhggRDHpVFAkdM3btFIHqJ9X2cyme179aXHnW6YRI8/) no-repeat center center;
}
.menu li em {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV3bhZfwjcKZozxm2EbUl9yzsW1_PMhBtdXgyaZQti-NiA1DoV_jfxir8-sSkT-fwLljM3HbvFHcZu-ZSy33XozqB3MLyeR3ctTMFBPfTOVYGItptexeOmHGKsC1sBu1Y-h-8I245DAfvN/) no-repeat;
width: 180px;
height: 45px;
position: absolute;
top: -85px;
left: -15px;
text-align: center;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
}

Langkah 2

Pasang Framework jQuery dibawah ini pada template sobat, tepatnya pada halaman Rancangan-Edit HTML diatas kode </head>.

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

Jika sebelumnya sobat pernah memasang Framework jQuery tersebut pada template sobat, maka Langkah 2 dilewat saja.

Langkah 3

Letakan kode dibawah ini tepat diatas kode </head> pada halaman Rancangan-Edit HTML akun blog sobat.

<script type='text/javascript'>
$(document).ready(function(){
  $(".menu a").hover(function() {
    $(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
  }, function() {
    $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
  });
});
</script>

Langkah 4

Save template sobat dan langsung menuju halaman Rancangan-Elemen Laman.

Langkah 5

Tambahkan kode dibawah ini pada halaman Add Gadget HTML/Java Script blog sobat.

<ul class="menu">
  <li>
    <a href="URL LINK 1">MENU 1</a>    
    <em>TIPS 1</em>
  </li>
  <li>
    <a href="URL LINK 2">MENU 2</a>
    <em>TIPS 2</em>
  </li>
  <li>
    <a href="URL LINK 3">MENU 3</a>
    <em>TIPS 3</em>
  </li>
</ul>

Perhatikan kode yg dicetak besar, gantilah dengan ketentuan menu yang sobat pasang.

URL LINK [1, 2, 3,] = Menentukan URL link yang sobat tuju.
MENU [1, 2, 3,] = Menentukan nama pada menu.
TIPS [1, 2, 3,] = Menentukan nama didalam Tooltips.

Langkah 6

Drah drop gadget yg sudah ditambahkan ke atas postingan, atau di header, terserah keinginan sobat.

Disarankan ditempatkan pada gadget yang memiliki width besar, agar hasilnya lebih maximal.

Langkah 7

Save template sobat dan lihat hasilnya.
Personally I dont think this is the right way to do it,
if you have better ideas to develop it, please comment !!

Selesai.
Selamat mencoba dan semoga bermanfaat.

More►►

Neon Text Color jQuery

By Girant_31

Sudahkah sobat melihat tulisan diatas ?? ya itulah yang dimaksud Neon Text Color jQuery.. Effect flashing didalam text adalah murni dari pengaruh java script, tanpa menggunakan CSS sama sekali.

Neon Text Color jQuery ini dapat digunakan di postingan maupun di sidebar, guna mempercantik tampilan blog/website sobat.

Tertarik ??!! Langsung saja ke langkah-langkah membuat Neon Text Color jQuery. Masukan kode java script dibawah ini pada postingan ( pd mode Edit HTML ) atupun di sidebar ( dg menambahkan add gadget HTML/Java Script pd widget sidebar sobat).

<center><h1><script language="JavaScript1.2">
var message="DEMO"
var neonbasecolor=""
var neontextcolor="#FD3D3A"
var neontextcolor2="#FF8080"
var flashspeed=50       // kecepatan flashing dalam milliseconds
var flashingletters=5    // jumlah huruf yg di flashing dlm neontextcolor
var flashingletters2=1  // jumlah huruf yg di flashing dlm neontextcolor2 (0 to disable)
var flashpause=0        // pause diantara flash-cycles dlm milliseconds
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)
function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}
function neon(){
//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}
//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor
if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script></h1></center>

Perhatikan kode yang di highlight. kode pada baris kedua, ganti kode DEMO dengan tulisan yang akan diberikan effect. kode pada baris keempat dan kelima, ganti kode warna dengan kode warna yg sobat suka. kode pada baris keenam, angka 50 adalah kecepatan flashing effect neon. lebih besar angkanya maka akan lebih lambat kecepatan flashing nya. kode pada baris ketujuh, angka 5 adalah merupakan jumlah huruf yang di flashing. kode pada baris kedelapan, angka 1 adalah jumlah huruf yg di flashing setelah kode pada baris ketujuh. Selesai. Terbitkan postingan sobat dan lihat hasilnya.

Neon Text Color jQuery ini tidak berlaku bagi text yg dimodifikasi.. seperti di bold atau di warnai.

Selamat mencoba dan semoga bermanfaat.

More►►

Tab Vanilla Slick

By Girant_31

Hampir sama dengan postingan ane terdahulu tentang Tab View Slider, dimana Tab view jQuery kali ini adalah salah satu Tab view jQuery ter-simple.. dengan memakai fungsi click untuk membuka isi content, juga tetap menggunakan framework dalam kendali proses kerja nya.

Tab view jQuery kali ini kita sebut saja Tab Vanilla Slick, yang berfungsi untuk mengumpulkan beberapa konten terpisah seakan menjadi satu bagian, dan untuk menampilkannya, cukup klik salah satu judul konten tersebut.

Demo Tab Vanilla SlickKlik disini untuk melihat demo Tab Vanilla Slick

Ketika sobat klik salah satu judul konten maka konten yang dimaksud akan ditampilkan dan konten yang lainnya akan disembunyikan, selain itu ditambah efek slide down dan slide up agar perpindahan konten lebih menarik.

Cara membuat dan memasang Tab Vanilla Slick :

Langka 1

Pasang framework dibawah ini pada template sobat, tepatnya diatas kode </head> pada rancangan-Edit HTML blog sobat.

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

Perhatikan framework jQuery diatas, jika sebelumnya sobat pernah memasang framework tersebut di template sobat, maka untuk Langkah 1 di lewat saja.

Langka 2

Tambahkan kode Java Script dibawah ini, tepat setelah kode pada Langkah 1 atau diatas kode </head> pada rancangan-Edit HTML blog sobat.

<script  type='text/javascript'>
$(document).ready(function(){
    $('#archive, #blog').hide();    
    $("ul.slick li").click(function () {
        $(".active").removeClass("active");
        $(this).addClass("active");
        $(".content-slick").slideUp();
        var content_show = $(this).attr("title");
        $("#"+content_show).slideDown();
    });
 });
</script>

Langka 3
Tambahkan kode CSS dibawah ini, tepat diatas kode ]]></b:skin> pada rancangan-Edit HTML blog sobat.

#slick_area {
  border:1px solid #dedbd1;
  background-color:#f3f1eb;
  padding:8px;  
  margin:10px 0;
  line-height:18px;
  width:310px;
}
#slick_area  a{
  color:#222;
  text-decoration:none;
}
.slick_area a:hover{
  color:#009;
}
ul.slick {
  margin:2px 5px 8px 0;
  padding:0px;
}
ul.slick li {
  list-style:none;
  display:inline;
  background-color:#dedbd1;
  padding:5px 14px;
  text-decoration:none;
  font-size:10px;
  font-weight:bold;
  text-transform:uppercase;
  cursor:pointer;
  border:1px solid #dedbd1;
}
ul.slick li:hover {
  color:#009;
}
ul.slick li.active {
  background-color:#fff;
  border:1px solid #585858;
}
.content-slick {
  background-color:#fff;
  border:1px solid #585858;
  color:#dedede;
  min-height:40px;
  padding:7px 13px 5px;
  text-align:justify;
}  
.content-slick ul {
  margin:2px;
  padding:0;
}
.content-slick ul li {
  list-style:none;
  border-bottom:1px solid #585858;
  padding:4px;
}
.content-slick ul li:last-child  {
  border-bottom:none;
}
.content-slick  ul li:hover, .content-slick  ul li a:hover {
  display:block;
  background-color:#dedbd1;
}
.content-slick  ul li a {
  text-decoration:none;
  color:#000;
  display:block;
}
#archive, #blog { display:none; }

Langka 4

Save template sobat.

Semua kode sudah terpasang, lantas bagaimana untuk menampilkan Tab Vanilla Slick tersebut ??

Langka 5
Tambahkan halaman widget sidebar sobat dngan cara memasukan kode dibawah ini pada halaman add gadget HTML/Java Script.

<div id="slick_area">
<ul class="slick">
<li title="label" class="slick  active">Label</li>
<li title="archive" class="slick">Archive</li>
<li title="blog" class="slick">Blog</li>
</ul>

<div id="label" class="content-slick">
<ul>
<li><a href="#">Link 1-1</a></li>
<li><a href="#">Link 1-2</a></li>
<li><a href="#">Link 1-3</a></li>
</ul>
</div>

<div id="archive" class="content-slick">
<ul>
<li><a href="#">Link 2-1</a></li>
<li><a href="#">Link 2-2</a></li>
<li><a href="#">Link 2-3</a></li>
</ul>
</div>

<div id="blog" class="content-slick">
<ul>
<li><a href="#">Link 3-1</a></li>
<li><a href="#">Link 3-2</a></li>
<li><a href="#">Link 3-3</a></li>
</ul>
</div>
</div>

Terdapat 4 bagian pada kode Langkah 5.

- Bagian pertama adalah merupakan judul konten dari masing-masing tab.

- Bagian ke 2 - 4 adalah merupakan isi konten.

- Kode yg diberi tanda merah, adalah kode yang dapat dirubah oleh sobat, baik itu judul konten maupun dalam penempatan URL link.

Source Code Tab Vanilla SlickKlik disini untuk mengambil source code Tab Vanilla Slick

Langka 6
Save template sobat.. dan lihat hasilnya.

Jika sobat ingin menambahkan jumlah tab-nya, silahkan memodifikasi kode java script dan HTML nya pada Langkah 2 dan Langkah 5.

Selesai..
Selamat mencoba dan semoga bermanfaat.

More►►

Effect Image Corner

By Girant_31

Huuffs.. Setelah sempet kesel, marah, kecewa, bingung dikerjai oleh si mBah Google kemarin, dimulai dari hilangnya semua komentar sobat semua, juga sempet penghapusan blog tercinta ini selama 3 jam. dan ternyata seluruh blogger di dunia ini pun sebagian besar mengalami nya,.. ga percaya? lihat disini. rata-rata dari mereka mengeluh komentar di blog nya tidak muncul, tapi laporan di eMail mereka sudah banyak yang berkomentar. akhirnya ane menyimpulkan bahwa masalah kemarin tersebut adalah bukan dari human error blog kita masing-masing, tapi ulah dari blogger yg sedang carmuk. jadi saran saya, biarkan saja.. karena tidak ada solusi or Tips n Trick untuk masalah tersebut, hanya tinggal masalah waktu.. biarkanlah itu menjadi urusan keprofesionalan mereka.

Ok.. Sebelum masuk ke berbagi ilmu disini, ane mengajak sobat semua untuk sejenak memperhatikan beberapa image dan effect nya dibawah ini satu persatu :

Image Asli tanpa Effect	Image dg Effect Reflex
Image dg Effect Corner	Image dg Effect Glossy

Adakah salah satu effect image diatas yang menarik buat anda ??

Perlu diketahui, Effect image diatas tanpa editan Photoshop, Corel, 3D Studio MAX dll. Itu semua murni dg script jQuery !! dan sebenarnya masih banyak lagi jenis effect nya loh.

Gimana menarik bukan??
atau masih bingung??

Jadi Effect Image ini adalah effect yang tercipta didalam postingan stelah kita memasukan script jQuery didalamnya, tanpa terlebih dahulu diedit di Photoshop, Corel, 3D Studio MAX dll. lantas fungsi nya buat apa?? memberatkan blog ga?? melihat dari fungsi nya, agar isi postingan kita terkesan lebih menarik dan profesional (ciee..), tapi memang aga sedikit memberatkan blog kita, karena ada fungsi pemanggil plugin java Script yang sebelumnya kita pasang terlebih dahulu di template kita. so.. terserah sobat semua mempertimbangkan nya.

Pada bahasan kali ini, kita coba dengan Effect Image Corner dan macam-macam nya. bisa lihat contohnya diatas seperti apa effect nya, atau lihat demonya.

Demo Effect Image CornerKlik disini untuk melihat demo Effect Image Corner

Cara menerapkan di blog :

LANGKAH 1
Masukan kode dibawah ini tepat diatas kode </head> pada halaman Rancangan - Edit HTML blog sobat.

<script src='http://daftarisi-girant.googlecode.com/files/corner.js' type='text/javascript'/>

LANGKAH 2
Save template sobat, lalu menuju ke halaman posting.
Upload lah satu contoh gambar kedalam postingan.

LANGKAH 3
Pindahkan mode editor postingan sobat ke mode Edit HTML. dan cari kode gambar yg sudah di upload sebelumnya. untuk kode gambar biasanya akan seperti ini bentuk kode nya :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80cNJS4Kfz_WU6tuKDz7UgJcdYzLMjab6yM6sg5fPfAgS8FL8evWAUUvhYt9Hh107LLXd_VXj0_QfE13zxBUVQgEjMqsqE0kxUGN4TZKrqFT42ggFHTkI3nNC2YwSinvT6ulRMtXa-AeS/s1600/tooltip+jquery+girant_31.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80cNJS4Kfz_WU6tuKDz7UgJcdYzLMjab6yM6sg5fPfAgS8FL8evWAUUvhYt9Hh107LLXd_VXj0_QfE13zxBUVQgEjMqsqE0kxUGN4TZKrqFT42ggFHTkI3nNC2YwSinvT6ulRMtXa-AeS/s400/tooltip+jquery+girant_31.jpg" width="400" />
</a>

LANGKAH 4

Jika sudah ketemu kode gambarnya, maka tinggal tambahkan kode dibawah ini pada kode gambar tersebut.

class="corner iradius16"

dan akan membentuk kode gambar secara keseluruhan seperti dibawah ini :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80cNJS4Kfz_WU6tuKDz7UgJcdYzLMjab6yM6sg5fPfAgS8FL8evWAUUvhYt9Hh107LLXd_VXj0_QfE13zxBUVQgEjMqsqE0kxUGN4TZKrqFT42ggFHTkI3nNC2YwSinvT6ulRMtXa-AeS/s1600/tooltip+jquery+girant_31.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img class="corner iradius16" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80cNJS4Kfz_WU6tuKDz7UgJcdYzLMjab6yM6sg5fPfAgS8FL8evWAUUvhYt9Hh107LLXd_VXj0_QfE13zxBUVQgEjMqsqE0kxUGN4TZKrqFT42ggFHTkI3nNC2YwSinvT6ulRMtXa-AeS/s400/tooltip+jquery+girant_31.jpg" width="400" />
</a>

kode yang berwarna merah adalah kode yang disisipkan diantara kode gambar dalam postingan sobat, sisipkan setelah kode <img . Lalu terbitkan entri postingan sobat, dan lihat hasilnya.

Itu salah satu contoh dari Effect Image Corner, lantas bagaimana dengan contoh Effect Image Corner yang lainya ?? Perhatikan demo dari Effect Image Corner !!

Untuk masing-masing effect pada demo Effect Image Corner tersebut memiliki kode yg berbeda-beda, dan inilah kode dari masing-masing effect tersebut :

Effect Image Corner 1

class="corner iradius16"

Effect Image Corner 2

class="corner iradius24 ishadow33 inverse"

Effect Image Corner 3

class="corner iradius20 ishadow33"

Effect Image Corner 4

class="corner iradius32 ishade50 ishadow25"

Effect Image Corner 5

class="corner iradius48 ishade33"

Sama seperti Langkah 4, sisipkan salah satu kode diatas pada kode gambar sesuai dengan effect yang di inginkan.

Kini sobat dapat menampilkan Image dalam postingan dengan Effect yang mengesankan tanpa harus editing gambar dulu melalui Photoshop dan teman-teman nya.. dan ane yakin setelah ini para ahli editing/design photo akan kehabisan job.. wkwkwkwk.. :D. karena ada cara yg lebih simple mengedit gambar seperti contoh diatas.

Selesai.
Semoga bermanfaat dan selamat berkreasi.

More►►

Recent Post News Scrolling

By Girant_31

Menyambung postingan terdahulu tentang Recent Post News Ticker,
Kali ini masih sama tentang recent post atau lebih pas nya mengenai widget daftar isi.

Recent Post News Scrolling adalah sama halnya dengan recent post pada umumnya.
hanya saja ada penambahan sedikit kode/script yg membuat recent post ini automatic scrolling,
dan auto stop on mouse over.

Demo Recent Post News ScrollingKlik disini untuk melihat demo Recent Post News Scrolling

Untuk membuat seperti itu, langsung saja CoPas kode/script dibawah ini,
dan masukan ke halaman add gadget HTML/Java Script.

<marquee behavior="scroll" direction="up" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()">
<script>
function rp(json) {
document.write('<ul>');
for (var i = 0; i < numposts; i++) {
document.write('<li>');
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(more)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
document.write(posttitle);
if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
}
}
document.write('</li>');
}
document.write('</ul>');
}
</script>

<script>
var numposts = 500;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
</script>

<script src="http://agoezimoetz.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script></marquee>

Ganti http://agoezimoetz.blogspot.com dengan URL Blog sobat.

Lalu tambahkan kode/script dibawah ini tepat sebelum kode diatas.

<style type="text/css">
ul { cursor: pointer;  text-shadow: 0 1px 1px rgba(0,0,0,.3);  -webkit-border-radius: .5em;  -moz-border-radius: .5em;  border-radius: .5em;  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);  box-shadow: 0 1px 2px rgba(0,0,0,.2); background:; list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhONY5RW6vBlG6ZLWT2tDPwjPMWnWFsFeQbI7UACEcBJwZhyDKf97EWk9PzbL69_6euX5RK6epFeiiBRTQtDA-U4Ff0mQRpUnJq4LmGNN8WukICpFN1q0zltW5621M7mwtU5Y02b6LKRYY/)}
ul a{text-decoration:none;}
ul a:hover {background:;text-decoration:none; color: red;"}
</style>

Sobat bisa ganti gambar sebagai pengganti nomor atau icon list dengan gambar sesuka sobat,
caranya, cari kode dibawah ini pada kode diatas.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhONY5RW6vBlG6ZLWT2tDPwjPMWnWFsFeQbI7UACEcBJwZhyDKf97EWk9PzbL69_6euX5RK6epFeiiBRTQtDA-U4Ff0mQRpUnJq4LmGNN8WukICpFN1q0zltW5621M7mwtU5Y02b6LKRYY/

Lalu ganti dengan URL gambar yg sobat punya.
Save, dan lihat hasilnya.

More►►

Jenuh

By Girant_31

Ada yg tau ga Obat jenuh tuh apa ??

Dan beli nya dimana??

Plis.. Help Me.. !!

Untuk membuat tulisan seperti diatas secara otomatis

Ni dia kodenya sob :

<script type="text/javascript">
for (i = 1; i <= 6; i++)
{
document.write("<h" + i + ">Ane Jenuh ");
document.write("</h" + i + ">");
}
</script>

Masukan az langsung ke dalam postingan.

More►►

Menu Nongol a Hover

By Girant_31

Judul yang aneh.. hehe..

Bicara jQuery memang tidak bakalan ada habisnya..
Maklum ane lagi seneng-seneng nya ngutak-atik jQuery neg..
Setelah bereksperimen, jadi juga neg Menu Nongol a Hover.. (apa jeh..).

Menu Nongol a Hover ini adalah seperti Accordion All In Widget yg sudah ane bahas dahulu..
Bedanya Menu Nongol a Hover ini tanpa Click loh..
Cukup kita lewati dg Cursor Mouse, maka akan muncul keseluruhan menunya.

Penasaran???
Mari kita lihat demonya..

Demo Menu Nongol a HoverKlik disini untuk melihat demo Menu Nongol a Hover

Atau sobat bisa lihat langsung di sidebar blog ane ini, di widget Statistic..
Lewati dg cusror sobat ke arah salah satu yg terdapat di widget Statistic tersebut,
Lihat apa yg terjadi ???
Akan muncul seperti gambar diatas..
Mengerti kan maksud dari Menu Nongol a Hover ini??

Ok kalo sudah mengerti, ini die cara membuatnya :

Langkah 1
Sediakan kompor, kewali, panci dll.. (Mari kita masak..!! Hahaha..).

Serius-serius..
Seperti biasa cari kode ]]></b:skin> pada halaman Tata Letak - Edit HTML
Lalu letakan kode dibawah ini diatas nya.

ol {
        height:30px;
        width:255px;
        overflow:hidden;
        color: #fff;
        text-decoration: none;
 font-size:12px;
        font-weight: bold;
        line-height: 1;
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
       -moz-box-shadow: 0 1px 3px #999;
       -webkit-box-shadow: 0 1px 3px #999;
       text-shadow: 0 -1px 1px #222;
       border-bottom: 1px solid #222;
       padding: 8px 10px 6px;
       margin-top:5px;
       background-color:#a447cf;
}
ol p {
       margin-top:5px;
       padding-top:15px;
       font-size:12px;
       color:#6CF;
}

Langkah 2
Cari kode </head>
Lalu letakan kode di bawah ini diatas nya

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

Catatan :
Bagi sobat yang pernah menambahkan atau ditemplate sobat
sudah terdapat kode JQuery seperti di atas,
maka langkah kedua abaikan saja.

Langkah 3
Kemudian tambahkan pula kode dibawah ini,
dibawah kode JQuery tadi (pd Langkah 2)

<script src='http://daftarisi-girant.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
    //When Mouse rolls over ol
    $(&quot;ol&quot;).mouseover(function(){
        $(this).stop().animate({height:&#39;60px&#39;},{queue:false, duration:600, easing: &#39;easeOutBounce&#39;})
    });
    //When Mouse cursor removed from ol
    $(&quot;ol&quot;).mouseout(function(){
        $(this).stop().animate({height:&#39;30px&#39;},{queue:false, duration:600, easing: &#39;easeOutBounce&#39;})
    });
});
</script>

Langkah 4
Simpan template kedalam Lemari sobat.. hehe..

Langkah 5
Tambahkan kode dibawah ini pada Add a Gadget HTML / Java Script

<div id="vnav">
<ul>
<ol><h1>Home</h1><p>Rumah</p></ol>
<ol><h1>About Me</h1><p>Tentang Saya</p></ol>
<ol><h1>Black</h1><p>Artinya Hitam</p></ol>
<ol><h1>Red</h1><p>Artinya Merah</p></ol>
</ul>
</div>

Kode yg berwarna Merah adalah Judul yg akan ditampilkan otomatis.
Ganti dg judul sesuai kehendak sobat.
Kode yg berwarna Biru adalah Keterangan yg disembunyikan,
dan akan tampil hanya bila dilewati oleh cursor sobat.
Ganti juga sesuai keinginan sobat.

Source Code Menu Nongol a HoverKlik disini untuk mengambil semua source code Menu Nongol a Hover

Langkah 6
Save dan lihat hasilnya.
Gimana?? Ok kan???

Nb.
Jika hasilnya tidak sesuai, mungkin ukuran font yg terlalu lebar, Warna, atau yg lain nya..
Trick nya, Sobat utak atik az lagi pada Padding, Background-color, Font-size
dan yang lain nya pada kode Langkah 1.

Sekian cuap-cuap ane kali ini..
Semoga berhasil dan Semoga bermanfaat.

More►►

Slide Show Humble Sticker

By Girant_31

Huffss..
Selsai juga neg pesenan..

Slide Show Humble Sticker ini adalah pembaruan dari Slide Show Humble jQuery yang
ternyata jauh diluar permintaan..
Maklum, namanya jg newbie..
ya bikin nya juga sampe mentok az.. hehe..

Ok.. Slide Show Humble Sticker kali ini Insya Allah sudah kumplit dibanding dg yg kemarin..
Cocok banget buat yg punya segudang banner.. yg dilengkapi dg :
1. Auto Slide
2. Auto Break
3. Auto Hover Pause
4. Auto Link
5. Keterangan Banner or Gambar yg dipasang
6. dan tetek bengek yg lain nya.. hehe..

Penasaran seperti apa ???
Lihat demonya :

Demo Slide Show Humble StickerKlik disini untuk melihat demo Slide Show Humble Sticker

Gimana ???
Masih ada yang kurang ???
Low ada, Sampaikan saja di kolom komentar di blog Girant_31 ini, Ok !!

To the point..
Langkah 1
Letakan Kode dibawah ini diatas kode ]]></b:skin>

* { margin:0; padding:0; }
#newsticker-demo {
width:310px;
background:#EAF4F5;
border:3px solid #000;
-moz-border-radius-topleft:25px;
-moz-border-radius-topright:25px;
-moz-border-radius-bottomleft:25px;
-moz-border-radius-bottomright:25px;
padding:5px 5px 0;
font-family:Verdana,Arial,Sans-Serif;
font-size:12px;
margin:20px auto;
}
#newsticker-demo a { text-decoration:none; }
#newsticker-demo img { border: 2px solid #FFFFFF; }
#newsticker-demo .title {
text-align:center;
font-size:14px;
font-weight:bold;
padding:5px;
}
.newsticker-jcarousellite { width:300px; }
.newsticker-jcarousellite ul li{ list-style:none; display:block; padding-bottom:1px; margin-bottom:5px; }
.newsticker-jcarousellite .thumbnail { float:left; width:300px; }
.newsticker-jcarousellite .info { float:right; width:0px; }
.newsticker-jcarousellite .info span.cat { display: block; font-size:10px; color:#808080; }
.clear { clear: both; }

Langkah 2
Cari kode </head> lalu Letakan Kode dibawah ini diatasnya

<link href='style.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://daftarisi-girant.googlecode.com/files/jquery-latest.pack.js' type='text/javascript'/>
<script src='http://daftarisi-girant.googlecode.com/files/jcarousellite_1.0.1c4.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(&#39;.newsticker-jcarousellite&#39;).jCarouselLite({
vertical: true,
hoverPause:true,
visible: 1,
auto:500,
speed:1000
});
});
</script>

Langkah 3
Save template

Langkah 4
Tambahkan kode dibawah ini pada Add a Gadget HTML / Java Script

<div id="newsticker-demo">
<div class="title">Slide Show Humble Sticker</div>
<div class="newsticker-jcarousellite">
<center><ul>
<li><div class="thumbnail">
<a href="LINK-IMAGE-1"><img src="URL IMAGE-1" /></a><br />
<a href="LINK">INFO LINK</a>
</div></li>
<li><div class="thumbnail">
<a href="LINK-IMAGE-2"><img src="URL IMAGE-2" /></a><br />
<a href="LINK">INFO LINK</a>
</div></li>
</ul></center>
</div></div>

Ganti tulisan Slide Show Humble Sticker dengan judul slide show sesuai keinginan.
Ganti tulisan LINK-IMAGE-1, dan LINK-IMAGE-2 dengan link banner or gambar punya sobat.
Ganti tulisan URL IMAGE-1, dan URL IMAGE-2 dengan URL banner or gambar punya sobat.
Ganti tulisan LINK dengan link keterangan banner or gambar punya sobat.
Ganti tulisan INFO LINK dengan tulisan keterangan banner or gambar punya sobat.

Source Code Slide Show Humble StickerKlik disini untuk mengambil semua source code Slide Show Humble Sticker

Langkah 5
Save dan Preview hasilnya.

Langkah 6
Selesai.

Semoga Bermanfaat bt sobat semua..
Terima kasih..

More►►

Slide Show Humble jQuery

By Girant_31

Slide Show Humble jQuery ini ane share atas permintaan sobat Tukang Colong..
yg mengeluh karena banyaknya banner yg harus dipajang di halaman depan..

Baiklah..
Karena ane orang nya baik hati dan tidak sombong..
ane buat Slide show Humble jQuery ini..

Tapi kekurangan Slide Show Humble jQuery ini adalah :
Kita harus mengklick tombol star terlebih dahulu untuk melihat slide show gambar berikutnya.

Atau lihat demonya :

Demo Slide Show Humble jQueryKlik disini untuk melihat demo Slide Show Humble jQuery

Gimana ???
Ada yang tertarik memasang slide show ini??
sebenarnya sangat mudah untuk memasang nya loh..

Begini neg caranya :
Langkah 1
Letakan kode di bawah ini diatas kode </head>

<script type='text/javascript'>
var rotate_delay = 5000; // delay in milliseconds (5000 = 5 secs)
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
   }
else first();
}
function previous() {
if (current-1 &gt;= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
   }
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}
function ap(text) {
document.slideform.slidebutton.value = (text == &quot;Stop&quot;) ? &quot;Start&quot; : &quot;Stop&quot;;
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == &quot;Stop&quot;) {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout(&quot;rotate()&quot;, rotate_delay);
   }
}
</script>

Simpan template dan lanjut ke tahapan selanjutnya.

Langkah 2
Tambahkan kode dibawah ini pada add gadget HTML/Java Script

<center>
<form name=slideform>
<tr>
<td align=center bgcolor="white">
<b>Slideshow Humble jQuery</b>
</td>
</tr>
<div style="border: 1px solid #ccc; padding-top: 10px; margin: 3px;
overflow: auto;
width: 350px;
height: 130px;
">
<tr>
<td align=center bgcolor="white">
<img src="images1.jpg" name="show">
</td>
</tr>
</div>
<table cellspacing=1 cellpadding=4 bgcolor="#000000">
<tr>
<td align=center bgcolor="#C0C0C0">
<select name="slide" onChange="change();">
<option value="images1.jpg" selected>Gambar 1
<option value="images2.jpg">Gambar 2
<option value="images3.jpg">Gambar 3
</select>
<input type=button onClick="first();" value="|<<" title="Beginning">
<input type=button onClick="previous();" value="<<" title="Previous">
<input type=button name="slidebutton" onClick="ap(this.value);" value="Start" title="AutoPlay">
<input type=button onClick="next();" value=">>" title="Next">
<input type=button onClick="last();" value=">>|" title="End">
</td>
</tr>
</table>
</form>
</center>

- Ganti images1.jpg, images2.jpg, images2.jpg dengan url gambar/banner sobat.
- Aturlah ukuran Widht dan Hight nya sesuai dg sidebar or keinginan sobat.
- Kata-kata Slideshow Humble jQuery bisa sobat rubah sesuai keinginan sobat.

Source Code Slideshow HumbleKlik disini untuk mengambil semua source code Slideshow Humble jQuery

Langkah 3
Simpan dan lihat blog sobat.

Langkah 4
Selesai.

Langkah 5
Semoga bermanfaat..
Terimakasih.

More►►

Page Navigation Berbeda

By Girant_31

Setelah kemarin ngebahas Page 123 Navigation..
Kali ini ane masih membahas tentang Page Navigation.

hanya saja dg trik yg aga berbeda,
dan tentunya hasilnya pun akan berbeda dg yg kemarin..

Demo Page NavigationKlik disini untuk melihat demo Page Navigation Berbeda

Asal sobat mengikuti langkah2 nya dg teliti,
Insya Allah Page Navigation berbeda ini akan muncul di blog sobat..

Untuk membuat seperti itu,
Ni die langkah-langkahnya sob :
1. Pertama, seperti biasa. Login dahulu ke akun blogger sobat.
2. Setelah login, klik Tata Letak - Edit HTML dan centang kotak Expand Template Widget.
3. Kalau sudah, cari kode <b:include name='nextprev'/> lalu ganti dengan kode berikut:

<b:if cond='data:blog.pageType == "index"'>
<style type="text/css">
.blogpager {
font-size:16px;
color: #060;
font-weight:bold;
padding:0px 4px;
}
</style>

<div align="center" style="margin:5px;">
<form action="#" name="pager20">
<span id="vwg-pager-first"></span> <span id="vwg-pager-prev"></span> <input name="showingpage" onfocus="this.select()" value="init..." type="text" size="4" title="Enter page number that You want to go" />/<input size="4" type="text" name="pagestotal" disabled="disabled" value="init..." /> <input type="button" onclick="checkpager()" value="Go" /> <span id="vwg-pager-next"></span> <span id="vwg-pager-last"></span>
</form>
</div>
<script type="text/javascript">

var blogID = "7367585238037754776";
var home_page = "http://agoezimoetz.blogspot.com/";
var pager_max_main = 1;

var pager_first_text = "First";
var pager_last_text = "Last";
var pager_prev_text = "Prev";
var pager_next_text = "Next";


</script>
<script src="http://www.freewebs.com/anhvo/blogger/blogger_pager_script_v20.js"
type="text/javascript"></script>
</b:if>

KET:
var blogID --- terdapat angka setelah kode tersebut.
Ganti angka tersebut dengan ID blog kita.
Dapat ditemukan saat kita sedang menulis posting / mengedit template.

var home_page --- ganti url yang dicetak merah dengan url blog sobat.
var pager_max_main --- tergantung pada setting blog kita.
Seperti pada blog ini, pada halaman utama setting jumlah posting blog ini adalah 1.

Source Code Page NavigationKlik disini untuk mengambil source code Page Navigation

4. Selsai..
5. Ucapkanlah Alhamdulillah..

Semoga bermanfaat..

More►►

Tab View Slider (Tanpa di Click)

By Girant_31

Sengaja ane review lg neg pos, coz Sulit jg untuk menerangkan tab view slider ini..
Jadi begini sobat semua.. (Khususnya sobat EGE, sebagai pemohon post ini).
Jd intinya seh, tab view slider ini sama dg tab view biasa..
Hanya saja penggunaanya tanpa sobat click cursor untuk membuka isi tab.. cukup letakan pointer sobat diatas nama tab masing2..

Untuk lebih jelasnya sobat bisa lihat bemonya (demonya mksd ane.. hehehe..) :

Demo Tab View SliderKlik disini untuk melihat demo Tab View Slider

Gimana ???
Begitu sobat letakan pointer sobat diatas tab nya, Isi dari menu tab terslide/terbuka dg sendirinya bukan??

Nah sekarang Langsung saja..
Langkah-langkahnya :
1. Seperti biasa login dulu ke blogger.com
2. Cari menu LAYOUT ->> Edit HTML, centang kotak kecil disamping teks Expand Template Widget
3. Cari kode ]]></b:skin>
Dan ganti dengan kode berikut :

bodie {
        font-family:arial;
        font-size:12px;    
    }
    
    a {
        color:#333;
        text-decoration:none;
        display:block;
    }

    a:hover {
        color:#888;
        text-decoration:none;
    }
    
    #moving_tab {
        /* hide overlength child elements*/
        overflow:hidden;
        
        /* all the child elements are refering to this width */
        width:300px;

        /* fix ie 6 overflow bug */
        position:relative
        
        /* styling */
        border:1px solid #ccc;    
        margin:0 auto;
    }
    
        #moving_tab .tabs {
            /* enable absolute position for .lava */
            position:relative;    
            height:30px;
            
            /* styling */
            padding-top:5px;
            cursor:default;
        }
    
        #moving_tab .tabs .item {
            /* enable z-index */
            position:relative;
            z-index:10;
        
            /* display in one row */
            float:left;
            display:block;

            /* width = half size of #moving_tab */
            width:150px;
            
            /* height = height of .tabs */
            text-align:center;
            font-size:14px;
            font-weight:700;    
        }

        #moving_tab .tabs .lava {
            /* Set it to absolute */
            position:absolute;
            top:0; left:0;
            
            /* display the lava in bottom most layer */
            z-index:0;        
                
            /* width = half size of #moving_tab */
            width:150px;

            /* height = height of .tabs */
            height:30px;
            
            /* styling */
            background:#abe3eb;

        }
        
        #moving_tab .content {
            /* enable absolute position for .panel */    
            position:relative;
            overflow:hidden;
            
            /* styling */
            background:#abe3eb;
            border-top:1px solid #d9fafa;
        }
        
        #moving_tab .panel {
            /* width is width of #moving_tab times 2 */
            position:relative;
            width:600px;
        }
        
        #moving_tab .panel ul {
            /* display in one row */
            float:left;
            
            /* width is the same with #moving_tab */
            width:300px;
            
            /* remove all styles */
            padding:0;
            margin:0;
            list-style:none;
            

        }
            /* styling */
            #moving_tab .panel ul li {
                padding:5px 0 5px 10px;    
                border-bottom:1px dotted #fff;
            }
]]></b:skin>

4. Cari kode </head>
Dan ganti dg kode berikut :

$(document).ready(function () {
    //set the default location (fix ie 6 issue)
    $('.lava').css({left:$('span.item:first').position()['left']});
    
    $('.item').mouseover(function () {
    
        //scroll the lava to current item position
        $('.lava').stop().animate({left:$(this).position()['left']}, {duration:200});
            
        //scroll the panel to the correct content
        $('.panel').stop().animate({left:$(this).position()['left'] * (-2)}, {duration:200});
    });
        
});
</head>

Perlu di ingat, Kode no 4 ini merupakan file.js dari tab slider ini.
dan kita sudah membahas bagai mana memasang file.js di template qita pada postingan saya waktu itu DISINI.

5. Layout --> Page Elements
Pilih tempat yang kamu inginkan kemudian Add a Gadget
pilih HTML/JavaScipt dan taruh code dibawah didalamnya

<div id="moving_tab">
<div class="tabs">
<div class="lava">
</div>
<span class="item">Tab 01</span>
<span class="item">Tab 02</span>
</div>               
<div class="content">                        
<div class="panel">                        
<ul>
<li><a href='#'>Isi Tab 1</a></li>
<li><a href='#'>Isi Tab 1</a></li>
<li><a href='#'>Isi Tab 1</a></li>
<li><a href='#'>Isi Tab 1</a></li>
<li><a href='#'>Isi Tab 1</a></li>
</ul>
<ul>
<li><a href='#'>Isi Tab 2</a></li>
<li><a href='#'>Isi Tab 2</a></li>
<li><a href='#'>Isi Tab 2</a></li>
<li><a href='#'>Isi Tab 2</a></li>
<li><a href='#'>Isi Tab 2</a></li>
</ul>
</div>
</div>
</div>

Isikan link dan nama link sesuai keinginan sobat semua..
Selesai..

Source Code Tab View SliderKlik disini untuk mengambil semua source code Tab View Slider

Semoga bermanfaat..

More►►

Sharing Dock Ala Mac OS

By Girant_31

Sharing Dock Ala Mac OS dibawah Posting

Sharing Dock Ala Mac OS ini sama halnya dengan widget Sharing yang lain,

Hanya saja Style nya ala Mac OS, Sobat semua tw kan Mac OS???

Sobat bisa liat contoh nya :

Demo Sharing Dock Ala Mac OSKlik disini untuk melihat demo Sharing Dock Ala Mac OS

Juga kali ini ane kasih dua Opsi untuk penempatan Sharing Dock Ala Mac OS ini..

1. Pertama ditempatkan di bawah posting pada halaman posting saja

2. Fixed di semat di sebelah bawah page.

Ok langsung saja..

Ini dia langkah-langkahnya :

Langkah ini untuk ditempatkan dibawah postingan di halaman postingan.

1. Seperti biasa login dulu ke blogger.com
2. Cari menu LAYOUT ->> Edit HTML, centang kotak kecil disamping teks Expand Template Widget
3. Cari kode <div class='post-footer-line post-footer-line-1'>

Dan taruh kode berikut di bawah kode <div class='post-footer-line post-footer-line-1'>

(Oy jangan asal copas, klik View Source nya dulu baru di copas, Ok)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
  #sharedock { width: 100%; height: 90px; z-index: 999; }
  #dock { position: relative; bottom: 0; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; }
  .dock-container { position: relative; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKJAjcR4chjAjwMPHxNkjG3uEAZ7vQ_FNwe-_vEyFKO5BqZWLyOJnVXcUM6cCbENtNvz4-VekFaSxWKePJm4cuZLPVd_es8at6btoCJv6kJd0lg2q6uTWtHTFq42FqR_DcviX8CcNgryo/) no-repeat bottom center; height: 50px; padding: 20px 0 20px 0; }
  .dock-container .custom_images a { display: block;  position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; cursor: pointer; }
  .dock-container .custom_images span { background: rgba(0,0,0,.75); display: none; padding: 2px 8px; margin-left: 17px; font-size: 11px; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
  .dock-container .custom_images img { border: 0; margin: 5px 0px 10px 0px; width: 100%; }
  </style>
<div id="sharedock">
  <div id="dock">
  <div class="dock-container">
<div class="addthis_toolbox"> 
 <div class="custom_images">
 <a class="addthis_button_facebook"><span>Facebook</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_facebook.png" alt="Share to Facebook" /></a>
  <a class="addthis_button_twitter"><span>Twitter</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_twitter.png" alt="Share to Twitter" /></a>
<a class="addthis_button_myspace"><span>MySpace</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_myspace.png" alt="Share to MySpace" /></a>
<a class="addthis_button_stumbleupon"><span>Stumble</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_stumbleupon.png" alt="Stumble It" /></a>
<a class="addthis_button_reddit"><span>Reddit</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_reddit.png" alt="Share to Reddit" /></a>
<a class="addthis_button_delicious"><span>Delicious</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_delicious.png" alt="Share to Delicious" /></a>
  <a class="addthis_button_more"><span>More...</span><img src="http://addthis.com/cms-content/images/gallery/addthis_64.png" alt="More..." /></a>
  </div>
  </div> 
  </div>
  </div>
  </div>
  <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://addthis.com//cms-content/images/gallery/fisheye-iutil.min.js"></script>
  <script type="text/javascript">
  $(function () { 
  // Dock initialize
  $('#dock').Fisheye(
  {
  maxWidth: 30,
  items: 'a',
  itemsText: 'span',
  container: '.dock-container',
  itemWidth: 50,
  proximity: 60,
  alignment : 'left',
  valign: 'bottom',
  halign : 'center'
  }
  );
  });
  </script>
</b:if>

4. Simpan Template, dan amankan hehe..

Sampai disini selesai untuk memasang Sharing Dock Ala Mac OS dibawah posting dihalaman postingan saja.

Lalu Langkah dibawah ini adalah untuk disematkan Fixed di bawah pada page.

1. Tambahkan elemen gadget HTML/Java script pada template anda dengan berisikan kode dibawah ini :
(Oy lagi, jangan asal copas, klik View Source nya dulu baru di copas, Ok)

<style type="text/css">
  #sharedock { position: fixed; bottom: 0; left: 0; width: 100%; height: 90px; z-index: 999; }
  #dock { position: relative; bottom: 0; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; }
  .dock-container { position: relative; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKJAjcR4chjAjwMPHxNkjG3uEAZ7vQ_FNwe-_vEyFKO5BqZWLyOJnVXcUM6cCbENtNvz4-VekFaSxWKePJm4cuZLPVd_es8at6btoCJv6kJd0lg2q6uTWtHTFq42FqR_DcviX8CcNgryo/) no-repeat bottom center; height: 50px; padding: 20px 0 20px 0; }
  .dock-container .custom_images a { display: block;  position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; cursor: pointer; }
  .dock-container .custom_images span { background: rgba(0,0,0,.75); display: none; padding: 2px 8px; margin-left: 17px; font-size: 11px; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
  .dock-container .custom_images img { border: 0; margin: 5px 0px 10px 0px; width: 100%; }
  </style>
<div id="sharedock">
  <div id="dock">
  <div class="dock-container">
<div class="addthis_toolbox"> 
 <div class="custom_images">
 <a class="addthis_button_facebook"><span>Facebook</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_facebook.png" alt="Share to Facebook" /></a>
  <a class="addthis_button_twitter"><span>Twitter</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_twitter.png" alt="Share to Twitter" /></a>
<a class="addthis_button_myspace"><span>MySpace</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_myspace.png" alt="Share to MySpace" /></a>
<a class="addthis_button_stumbleupon"><span>Stumble</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_stumbleupon.png" alt="Stumble It" /></a>
<a class="addthis_button_reddit"><span>Reddit</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_reddit.png" alt="Share to Reddit" /></a>
<a class="addthis_button_delicious"><span>Delicious</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_delicious.png" alt="Share to Delicious" /></a>
  <a class="addthis_button_more"><span>More...</span><img src="http://addthis.com/cms-content/images/gallery/addthis_64.png" alt="More..." /></a>
  </div>
  </div> 
  </div>
  </div>
  </div>
  <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://addthis.com//cms-content/images/gallery/fisheye-iutil.min.js"></script>
  <script type="text/javascript">
  $(function () { 
  // Dock initialize
  $('#dock').Fisheye(
  {
  maxWidth: 30,
  items: 'a',
  itemsText: 'span',
  container: '.dock-container',
  itemWidth: 50,
  proximity: 60,
  alignment : 'left',
  valign: 'bottom',
  halign : 'center'
  }
  );
  });
  </script>

2. Simpan
3. Lalu lihat blog sobat..
4. Selesai.

Source Code Sharing Dock Mac OSKlik disini untuk mengambil source code Sharing Dock Ala Mac OS

Semoga berhasil dan semoga bermanfaat.

More►►

Follow Us

Statistic

Selamat Datang

Sepintas Tentang Saya

My Blog

My Social Stuff


Posts	:
Comments	: