Lightbox Blogger dengan Jquery

Sejak berubahnya system edit HTML /perubahan tampilan blogger,banyak sekali template" yang diantaranya yaitu template saya yang ternyata Fitur Lightbox dari blogger tidak berfungsi.Dan sampai sekarang masih sangat sulit untuk memperbaikinya,oleh karena itu yang dapat dilakukan adalah menggunakan Lightbox aternatif yaang cukup sederhana dan ringan,sehingga ketika kita klik gambar pada posting,secara otomatis akan mebuka gambar dengan ukuran normal tanpa berpindah tab baru.Trik ini sebenarnya sudah lama saya temukan di google ,tetapi lupa sumbernya~xDDDDD

Contoh

Gomenasai gomenasai gomenasai @_____@",yahh,karena saya rasa banyak yang membutuhkanya,mungkin akan sangat berguna bagi yang ingin menggunakan fitur lightbox ini.

Sebelum menggunakan trik ini,saya ingatkan untuk selalu membackup template anda agar bila terjadi suatu masalah,dapat dikembalikan seperti semula,tetapi tidak ada masalah juga sih,kerena sudah saya terapkan di blog Oreimo,hayaraku maou-sama dan Titan~xD


Pertama,Buka blogger=>edit HTML lalu copy-paste CSS dibawah ini tepat diatas kode ]]></b:skin>

CSS

#jquery-overlay{position:absolute;
top:0;left:0;z-index:90;
width:100%;height:500px}
#jquery-lightbox
{position:absolute;top:0;left:0;width:100%;
z-index:100;text-align:center;line-height:0}
#jquery-lightbox a,#jquery-lightbox a:hover
{border:none}
#jquery-lightbox a img{border:none}
#lightbox-container-image-box
{position:relative;background-color:#fff;border-radius: 5px 5px 0px 0px;
width:250px;height:250px;margin:0 auto}
#lightbox-container-image{padding:10px}
#lightbox-loading{position:absolute;top:40%;left:0%;
height:25%;width:100%;text-align:center;
line-height:0}
#lightbox-nav{position:absolute;top:0;left:0;
height:100%;width:100%;z-index:10}
#lightbox-container-image-box > #lightbox-nav{left:0}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext
{width:49%;height:100%;zoom:1;display:block}
#lightbox-nav-btnPrev{left:0;float:left}
#lightbox-nav-btnNext{right:0;float:right}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;
background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;
width:100%;padding:0 10px 0;border-radius: 0px 0px 5px 5px;}
#lightbox-container-image-data
{padding:0 10px;color:#666}
#lightbox-container-image-data
#lightbox-image-details
{width:70%;float:left;text-align:left}
#lightbox-image-details-caption{font-weight:bold}
#lightbox-image-details-currentNumber
{display:block;clear:left;padding-bottom:1.0em}
#lightbox-secNav-btnClose{width:66px;float:right;
padding-bottom:0.7em}

Setelah itu letakan Jquery diatas ini tepat diatas kode </body>

Jquery

<script src='http://lightbox-blogger.googlecode.com/files/jquery.min.js' type='text/javascript'/>
<script src='http://lightbox-blogger.googlecode.com/files/lightbox.min.js' type='text/javascript'/>

Setelah itu Simpan dan Lihat hasilnya dengan klik gambar pada postingan anda.

Semoga bermanfaat,Arigatou Gozaimasu~

Read More

Content Accordion dengan jquery

Apa kabar sobat?masih bingung bagaimana bisa template hatsune miku magazine style bisa seperti itu?sebenar'a cara'a sudah cukup umum menurut saya.taukah kamu tentang trik Jquery Accordion?yapp,sebenar'a sama saja,trik'a,kalau biasanya diterapkan untuk list menu atau sidebar,maka trik ini saya terapkan ke element" seperti content,posting,sidebar atau sekaligus semuanya.


Sebelumnya saya peringatkan dahulu sebelum mencoba trik ini,backup dahulu template kamu agar tidak terjadi hal - hal yang tidak diinginkan.kemungkinan berhasilnya trik ini tergantung dirimu sendiri,bagi yang sudah familiar/biasa main css dan html,saya yakin sudah mengerti,tapi bagi yang belum,saya sarankan jangan,tapi jika berniat sungguh",silakan berusaha,saya hanya bisa membantu memberikan solusi,bukan bantuan ini itu =___=v.
#atau yang ga mau ribet ,saya sudah sediakan template yang udah jadi'a~:hatsune miku magazine style+demo

-contoh-

Ok,pertama seperti biasa buka blogger=>template=>edit HTML,setelah itu,ikuti intruksi" dibawah ini.

Copy paste semua CSS ini dibawah code ]]></b:skin>

<style type='text/css'>
#panel{
overflow:auto;
display:block;
}
.slide{
margin:0;
padding:0;
}
.btn-slide:hover {background:#CA2968;}
.btn-slide {
cursor: pointer;
text-align: center;
padding: 10px;
display: block;
color: #B3B3A9; /*Warna text*/
background-color: #1F1538; /*warna background tombol menu*/
position: absolute;
z-index: 9;
margin-left: 0px; /*atur posisi dengan margin*/
margin-right: 0px; /*atur posisi dengan margin*/
margin-top: 0px; /*atur posisi dengan margin*/
margin-bottom: 0px; /*atur posisi dengan margin*/
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
width: 50px; /*Lebar*/
height: 50px; /*tinggi*/
line-height: 50px;
border: 5px solid white; /*border atau garis pinggir*/
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.5); /*bayangan*/
-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.5);
} /* trik dari djogzs.blogspot.com*/
</style>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>

#panel{
overflow:auto;
display:none; /*panel yang disembunyikan dalam keaddan normal*/
}
</style>
</b:if>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.btn-slide{display:none;} /*Agar tombol menu hilang di halaman posting*/
</style>
</b:if>

Lalu copy paste juga Jquery dibawah ini diatas code </body>


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

<script type='text/javascript'>

$(document).ready(function(){

$(&#39;.btn-slide&#39;).click(function(){

$(&#39;#panel&#39;).slideToggle(&#39;slow&#39;);

});

});

</script>

Selanjutnya pengaturan code HTMl'a.perhatikan kode html dibawah ini dan copy paste

//Kode Html dibawah ini,adalah tombol open untuk membuka tutup content//

<div class='slide'><span class='btn-slide'>-OPEN-</span></div>

#untuk mengatur posisi,lebar,tinggi warna dan sebagai'a,kamu tinggal atur css .btn-slide {

kemudian,tentukan content yang akan kamu sembunyikan.

<div id='panel'>

isi content

</div>

#Contoh pada template hatsune miku magazine style

<div id='panel'>


<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='sidebar-right'> /*Sidebar*/
<b:section class='sidebar' id='sidebartop'>
<b:widget id='Profile1' locked='false' title='Profile' type='Profile'/>
</b:section>
</div>
<div id='content-wrapper'> /*wrapper*/
<div id='main-wrap1'>
<div id='main-wrap2'>
<b:section class='main' id='main' showaddelement='no'> /*posting*/
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
</div>


</div>

Intinya,semua kode html yang ada didalam code <div id='panel'> akan tersembunyi,dan difungsikan seperti .
accordion/ buka tutup.



Setelah itu,simpan dan lihat hasilnya.

#trik ini sudah saya tinjau dan coba",hasil'a 2 template ujicoba berhasil diterapkan.

mohon maaf kalau penjelasan'a agak rumit,tapi teorinya sudah cukup dan dapat dicoba,semoga berhasil,:)

Read More

Animasi Dengan Jquery Firefly Plugin

hai sobat,kali ini saya mau sharing cara memasang Jquery Firefly.Jquery Firefly,memungkinkan untuk menampilkan animasi pada background blog/webkita berputar" seperti nyamuk~xDD.contohnya bisa dilihat seperti blog saya sendiri,bila sobat perhatikan,ada bintang" yang bergerak mengelilingi blog saya.sebelum mencoba jquety ini,jaya ingatkan dahulu untuk membackup template kamu.

Contoh Screenshot

Ok,pertama buka blogger => rancangan => edit HTMl,lalu masukan script" dibawah ini, diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/djogzs/js/less-1.1.3.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/djogzs/js/jquery-firefly.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$.firefly({
/*images : [&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAahRkWO9l2kfNDD_QrbjTe41j3BHX1SgHUfnJFn8_xMHB21BatwOB2LQ2O12l3CsAI-DjlW50jJU_5kIeFZhx5ITYFitB7_o-7grkRCmKxeUjMisGSoszudcJsPZplDjDVkEN-4C-iTU/s1600/satar.png&#39;,
&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7dpuGTI9Y3t6pZdmqFm94uU8cdNua_WlA4ZbONAgTIZwJ3aA__6c95Fl1jjoigkO3emXWS683Bu1wDqf8G6ESoFYQwxlPinqtiII_WP6qG7g6dCGeHcRD4KPyqRmRGC8xTmw8Sam0d0g/s1600/stggar.png&#39;,
&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAahRkWO9l2kfNDD_QrbjTe41j3BHX1SgHUfnJFn8_xMHB21BatwOB2LQ2O12l3CsAI-DjlW50jJU_5kIeFZhx5ITYFitB7_o-7grkRCmKxeUjMisGSoszudcJsPZplDjDVkEN-4C-iTU/s1600/satar.png&#39;,
&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7dpuGTI9Y3t6pZdmqFm94uU8cdNua_WlA4ZbONAgTIZwJ3aA__6c95Fl1jjoigkO3emXWS683Bu1wDqf8G6ESoFYQwxlPinqtiII_WP6qG7g6dCGeHcRD4KPyqRmRGC8xTmw8Sam0d0g/s1600/stggar.png&#39;],*/
images : [&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAahRkWO9l2kfNDD_QrbjTe41j3BHX1SgHUfnJFn8_xMHB21BatwOB2LQ2O12l3CsAI-DjlW50jJU_5kIeFZhx5ITYFitB7_o-7grkRCmKxeUjMisGSoszudcJsPZplDjDVkEN-4C-iTU/s1600/satar.png&#39;,
&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7dpuGTI9Y3t6pZdmqFm94uU8cdNua_WlA4ZbONAgTIZwJ3aA__6c95Fl1jjoigkO3emXWS683Bu1wDqf8G6ESoFYQwxlPinqtiII_WP6qG7g6dCGeHcRD4KPyqRmRGC8xTmw8Sam0d0g/s1600/stggar.png&#39;],
total : 65
});
});
</script>

Setelah itu simpan dan lihat hasilnya.

Note:Jika Ditemplate kamu sudah ada jquery,ada kemungkinan animasi'a tidak akan muncul karena bentrok atau ada jquery yang sama

oia,animasinya yang sekarang masih dipakai adalah gambar bintang.Ada yang kecil dan juga ada yang besar (ada2 jenis)kamu bisa menggantinya dengan gambar kamu dan jumlah'a juga bisa kamu atur.tapi untuk gambar'a saya sarankan gunakan gambar yang ukuran/size'a yang kecil,agar tidak trlalu berat.selamat mencoba,Arigatou gozaimasu~

Read More

Animated Text dan Icon Menu Dengan jQuery

Apa kabar sobat,dah lama nih ga share tentang Jquery lagi,sekarang saya mau kasih tutorial cara memasang Menubar
dengan animated Text dan Icon atau lebih tepat'a menggunakan gambar dengan sentuhan Jquery yang animasi'a
sangat menarik

.Contoh'a bisa sobat lihat disini.trik ini saya dapatkan dari http://tympanus.net.sobat juga bisa lihat trik menarik lain'a disana.ok,ga usah basa - basi lagi,langsung baca tutorialnya~


Langkar pertama,Buka blogger =>Rancangan=>edit HTML
lalu Copas semua CSS dibawah ini,Tepat diatas kode ]]></b:skin>

.sti-menu{
width:1010px;
position:relative;
margin:60px auto 0 auto;
}
.sti-menu li{
float:left;
width:200px;
height:300px;
margin:1px;
}
.sti-menu li a{
display:block;
overflow:hidden;
background:#fff;
text-align:center;
height:100%;
width:100%;
position:relative;
-moz-box-shadow:1px 1px 2px #ddd;
-webkit-box-shadow:1px 1px 2px #ddd;
box-shadow:1px 1px 2px #ddd;
}
.sti-menu li a h2{
color:#000;
font-family: 'Wire One', arial, serif;
font-size:42px;
font-weight:bold;
text-transform:uppercase;
position:absolute;
padding:10px;
width:180px;
top:140px;
left:0px;
text-shadow: 0px 1px 1px black;
}
.sti-menu li a h3{
font-family: Baskerville, "Hoefler Text", Garamond, "Times New Roman", serif;
font-size:18px;
font-style:italic;
color: #111;
position:absolute;
top:248px;
left:0px;
width:180px;
padding:10px;
}
.sti-icon{
width:100px;
height:100px;
position:absolute;
background-position:top left;
background-repeat:no-repeat;
background-color:transparent;
left:50px;
top:30px;
}
.sti-icon-care{
background-image:url(http://tympanus.net/Tutorials/AnimatedTextIconMenu/images/care.png);
}
.sti-icon-alternative{
background-image:url(http://tympanus.net/Tutorials/AnimatedTextIconMenu/images/alternative.png);
}
.sti-icon-family{
background-image:url(http://tympanus.net/Tutorials/AnimatedTextIconMenu/images/family.png);
}
.sti-icon-info{
background-image:url(http://tympanus.net/Tutorials/AnimatedTextIconMenu/images/info.png);
}
.sti-icon-technology{
background-image:url(http://tympanus.net/Tutorials/AnimatedTextIconMenu/images/technology.png);
}

langkah kedua,kamu Copas lagi Font google api,paket Jquery animated dibawah ini.
lalu letakan di atas kode </body> atau boleh juga dibawah kode ]]></b:skin>.

<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Wire+One' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://tympanus.net/Tutorials/AnimatedTextIconMenu/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://tympanus.net/Tutorials/AnimatedTextIconMenu/js/jquery.iconmenu.js"></script>
<script type="text/javascript">
$(function() {
$('#sti-menu').iconmenu();
});
</script>

Dan langkah terakhir,kamu Copas kode HTML dibawah ini dimanapun kamu mau ^^
Mau dirancangan=>elemen halaman=>tambah gadget=>HTML/javascript BOLEH.
atau maudirancangan=>edit HTML=> copas di dalam/bawah kode <body> juga boleh,tergantung sobat mau letakan dimana.

<ul id="sti-menu" class="sti-menu">
<li data-hovercolor="#37c5e9">
<a href="#">
<h2 data-type="mText" class="sti-item">Advanced Patient Care</h2>
<h3 data-type="sText" class="sti-item">Personalized to your needs</h3>
<span data-type="icon" class="sti-icon sti-icon-care sti-item"></span>
</a>
</li>
<li data-hovercolor="#ff395e">
<a href="#">
<h2 data-type="mText" class="sti-item">Alternative Medicine</h2>
<h3 data-type="sText" class="sti-item">Holistic approaches</h3>
<span data-type="icon" class="sti-icon sti-icon-alternative sti-item"></span>
</a>
</li>
<li data-hovercolor="#57e676">
<a href="#">
<h2 data-type="mText" class="sti-item">Modern Info Center</h2>
<h3 data-type="sText" class="sti-item">Educating you</h3>
<span data-type="icon" class="sti-icon sti-icon-info sti-item"></span>
</a>
</li>
<li data-hovercolor="#d869b2">
<a href="#">
<h2 data-type="mText" class="sti-item">Future Family Planning</h2>
<h3 data-type="sText" class="sti-item">For a healthier future</h3>
<span data-type="icon" class="sti-icon sti-icon-family sti-item"></span>
</a>
</li>
<li data-hovercolor="#ffdd3f">
<a href="#">
<h2 data-type="mText" class="sti-item">Advanced Technology</h2>
<h3 data-type="sText" class="sti-item">From the latest research</h3>
<span data-type="icon" class="sti-icon sti-icon-technology sti-item"></span>
</a>
</li>
</ul>

Note:
1.Ganti tanda pagar # dengan Url yang kamu inginkan.
2.li data-hovercolor adalah warna link hover'a
3.<h2 data-type="mText" class="sti-item">Nama link</h2>
4.<h3 data-type="sText" class="sti-item">Descripsi link</h3>

Slesai deh,kalau sudah simpan template~xD
bila ada masalah atau pertanyaan,silakan tanyakan,dan berikan komentar'a,terima kasih,selamat mencoba^^

Read More

Effect Asap dengan jquery

Ini dia,koleksi Jquery menarik dari saya,dengan effect asap ini,blog kamu akan tambah menarik.untuk contoh'a,kamu bisa liat di blog akatsuki atau di gayadesign mau tau cara'a?CEkidot gan n_n

kalau mau lihat contoh'a,sobat bisa lihat disini
pertama,copy paste js ini di atas kode </body> atau di bawah kode <head>

<link href='http://www.gayadesign.com/scripts/smokeeffect/css/style.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<script src="http://www.gayadesign.com/scripts/smokeeffect/js/smokeEffect.js" type="text/javascript"></script>

<script type='text/javascript'>
SmokeEffect.imgLocation = "http://www.gayadesign.com/wp-content/themes/gdblocked/images/smoke.png";
SmokeEffect.smokeWidth = 100;
SmokeEffect.smokeHeight = 100;
</script>

lalu masukan kode html dan js ini diblog kamu

<div id="smokeSpawnPoint">
<img alt="chimney" src="http://www.gayadesign.com/wp-content/themes/gdblocked/images/chimney.png" /></div>
<script type="text/javascript">
SmokeEffect.makeEffect("smokeSpawnPoint", 24, 12);
</script>

selesai deh,sekarang asap'a akan muncul di blog sobat...
tapi bila sobat ingin asap'a melayang di blog sobat+ menjadi tombol back to top,tinggal ditambahkan

kode ini

<a href='#' onclick='MGJS.goTop();return false;' style='display:scroll;position:fixed;bottom:0px;left:20px;'>

dan jadi'a seperti ini

<a href='#' onclick='MGJS.goTop();return false;' style='display:scroll;position:fixed;bottom:0px;left:20px;'>

<div id="smokeSpawnPoint">
<img alt="chimney" src="http://www.gayadesign.com/wp-content/themes/gdblocked/images/chimney.png" /></div>
<script type="text/javascript">
SmokeEffect.makeEffect("smokeSpawnPoint", 24, 12);
</script></a>

selamat mencoba,dan jangan lupa tinggalkan komentar ya n_n

Read More

Back to top dengan sentuhan jquery

Back to Top dengan jQuery ini adalah versi lain dari 'Back to Top dengan Smoothscroll'. Versi Back to Top dengan jQuery
ini akan berfungsi untuk naik keatas secara halus dan ketika mencapai keatas kecepatannya akan berkurang yang mirip dengan Lift.bagaimana cara memasang tombol ini?

ikuti langkah2 berikut ini:

1. Masukan script jQuery berikut diatas </body>
(jika telah ada script ini tidak perlu diperlukan lagi)

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

2. Masukan pula script 'back to top' ini dibawah script jQuery diatas:

<script src='http://choenblogspot.googlecode.com/files/backtotop.js' type='text/javascript'/>

3.Kemudian letakan kode html dibawah ini di elemen halaman atau di letakan sebelum </body> atau dibagian footer, dan benahi posisinya dengan CSS sesuai keinginan anda.

<a href='#' onclick='MGJS.goTop();return false;'>Top</a>

Selamat mencoba ^^

Read More