Showing posts with label Jquery. Show all posts
Cara Redirect Blog Lama Ke URL Baru Tanpa Kehilangan Trafick
if(window.location.href == 'https://nandanetwork.blogspot.com/2018/04/cara-redirect-blog-lama-ke-url-baru.html')
{
window.location="https://www.nandanetwork.com/2018/04/cara-redirect-blog-lama-ke-url-baru.html";
}
Hy sobat, apa kamu memiliki masalah yang sama seperti yang pernah saya hadapi? Pada awalnya kita membuat satu buah blog dan kemudian dikelola dengan baik hingga mendapatkan
2 Cara Menghapus Menghilangkan Icon Obeng Dan Tang Di Blogger
Icon Tang dan Obeng mungkin anda sering melihat gambar tersebut di dasboard blog anda. Namun umumnya para pengguna blogger.com merasa terganggu akan hal tersebut, beralasankan icon tang dan obeng menutupi blog atau membuat tampilan kurang menarik.
Sebernarnya, tujuan blogger membuat icon obeng dan tang tersebut di blog adalah baik, dimana anda bisa mengedit konten blog anda, baik itu artikel
Cara Mengetahui Nama Template Yang Dipakai Blog Orang Lain
Mungkin anda sering browsing, atau berkelana ke berbagai blog lain. Sekedar untuk membaca atau mencari informasi terbaru tentang hal yang terjadi saat itu,
Bagi seorang blogger, ketika melihat tampilan template blog orang lain menarik. Dan terlihat bagus, mungkin akan membuat anda menginginkan blog anda memiliki template yang sama seperti yang digunakan orang tersebut. Sehingga anda ingin
Cara Hapus Link URL Usang Di Google
Konten usang, atau URL Link yang sudah tidak aktiv merupakan masalah tersendiri bagi seorang blogger dalam mengelola blog mereka. Sebenarnya URL blog yang sudah tidak aktif namun masih diindex oleh google bisa saja mendatangkan suatu masalah yang tidak terduga.
Google memberikan pelayanan terbaik kepada setiap penggunaya, namun dengan banyaknya pengguna google yang menemukan broken link atau
Cara Membuat Tombol Download Seperti JalanTikus Responsive
Situs penyedia aplikasi dan software jalantikus.com sudah sangat tenar,dan banyak sekali dikunjungi oleh orang banyak untuk menemukan tutorial,hal baru dan software serta aplikai untuk android yang bisa dibilang cukup lengkap.
Pada saat mendownload,anda akan melihat tombol download/unduh yang bisa dibilang sangat bagus dan terlihat prifesional. Dan mungkin bagi anda yang memiliki blog
Cara Membuat Tabel Link Download Seperti Samehadaku
Samehadaku.net sudah tidak asing lagi bagi kita. Situs web yang menyediakan tempat mendownload berbagai jenis Anime dengan gratis. Mungkin anda sering mengunjunginya sekedar untuk membaca artikel baru,menonton anime/kartun atau mendownload komik dan video secara gratis.
Tapi, pernahkah anda memperhatikan tabel download yang ada di laman samehadaku untuk mendownload video?
Tabel Link
Cara Membuat Menu Multi Dropdown
Menu atau tittle merupakan hal yang penting untuk disisipkan didalam blog. Dimana menu ini mempermudah pengunjung/visitor untuk menemukan tema tertentu didalam blog anda.
Terlebih lagi bagi anda yang memiliki Blog dengan Menu/Label yang bisa dibilang cukup banyak. Sehingga jika tidak ditempatkan menu yang khusus mengarah pada artikel dengan Label tersebut tentu akan membuat para pengunjung
Cara Membuat Judul Blog Muncul Satu Kata
Pada kali ini saya akan membagikan sebuah tips bagaimana cara menyembunyikan judul postingan yang terlalu panjag dan hanya menampilkan potongan kata sebanyak satu buah kata saja.
Tujuan dari ini ialah untuk merapikan tampilan blog, yang kadang dimana judul yang kita berikan terlalu panjang sehingga membuat tampi9lan menjadi kurang rapi. Maka salah satu caranya ialah memotong judul tulisa
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 : ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcc57fHjtQ9Gsgwv7mA5do4z1H-j_x1f3s6ZKnrmHVUmVdnB5akx-nxW9aoCtWod5-zZHtVhHqOE0NWtN_3tPRTCNPbXxrh3YOCJ7iGdrtWpJ6u305Fz4MNg6ViP5ihUQhdWym59Y0Bjw/s1600/satar.png',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgftQFnjZIVG3pU8eIfy6IdDbH7qecb-lLAZVKKPHHP8txHs1IY2HvwqaZv8jceK_UfQetoWqvXRkzUSes1zx0IYMTwOPi64URutdeRMcGrl2g5q1BXs1KU0Y1k_ObvepT_rapayUIpL8g/s1600/stggar.png',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcc57fHjtQ9Gsgwv7mA5do4z1H-j_x1f3s6ZKnrmHVUmVdnB5akx-nxW9aoCtWod5-zZHtVhHqOE0NWtN_3tPRTCNPbXxrh3YOCJ7iGdrtWpJ6u305Fz4MNg6ViP5ihUQhdWym59Y0Bjw/s1600/satar.png',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgftQFnjZIVG3pU8eIfy6IdDbH7qecb-lLAZVKKPHHP8txHs1IY2HvwqaZv8jceK_UfQetoWqvXRkzUSes1zx0IYMTwOPi64URutdeRMcGrl2g5q1BXs1KU0Y1k_ObvepT_rapayUIpL8g/s1600/stggar.png'],*/
images : ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcc57fHjtQ9Gsgwv7mA5do4z1H-j_x1f3s6ZKnrmHVUmVdnB5akx-nxW9aoCtWod5-zZHtVhHqOE0NWtN_3tPRTCNPbXxrh3YOCJ7iGdrtWpJ6u305Fz4MNg6ViP5ihUQhdWym59Y0Bjw/s1600/satar.png',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgftQFnjZIVG3pU8eIfy6IdDbH7qecb-lLAZVKKPHHP8txHs1IY2HvwqaZv8jceK_UfQetoWqvXRkzUSes1zx0IYMTwOPi64URutdeRMcGrl2g5q1BXs1KU0Y1k_ObvepT_rapayUIpL8g/s1600/stggar.png'],
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 samaoia,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~
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^^
Membuat Menu Bubbles Dengan Jquery Dan CSS3
apa kabar sobat?kali ini saya mau share trik menarik lagi nih.membuat Menu Bubbles Dengan Jquery Dan CSS3,sebenarnya'a ini trik lama ,tapi beda'a disini saya menambahkan Sentuhan CSS3 agar lebih menarik.
efek bubble akan muncul jika sobat arahkan kursor ke tombolnya.mau?cekidot gan....
Pertama,cobat copy paste CSS di bawah ini di Rancangan =>Edit HTML =>lalu letakan css'a di template sobat di atas kode ]]></b:skin>
.bubbles {Note:
margin: 100px 0 0;
padding: 0;
list-style: none;
}
.bubbles li {
padding: 0;
margin: 0 2px;
float: left;
position: relative;
text-align: center;
}
.bubbles a {
padding: 15px 10px;
display: block;
color: #000000;
width: 140px;
text-decoration: none;
font-weight: bold;
background: -moz-linear-gradient(top, #e0f3fa 0%, #d8f0fc 50%, #b8e2f6 51%, #b6dffd 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0f3fa), color-stop(50%,#d8f0fc), color-stop(51%,#b8e2f6), color-stop(100%,#b6dffd));
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
opacity:0.9;
-webkit-transition: all 0.6s ease-in-out;
}
.bubbles a:hover {opacity:1;}
.bubbles li em {
font-weight: normal;
background: -moz-linear-gradient(top, #feffe8 0%, #d6dbbf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffe8), color-stop(100%,#d6dbbf));
width: 130px;
height: 25px;
position: absolute;
top: -85px;
left: 3px;
text-align: center;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
.bubbles li em:after {
content:"";
display:block;
position:absolute;
bottom:-20px;
left:50px;
width:0;
height:0;
border-width:20px 0 0 20px;
border-style:solid;
border-color:#d6dbbf transparent;
}
-warna gradient tombol bisa sobat ganti pada css tag ".bubbles a"
-untuk mengganti warna bubble,ganti warna gradient pada css tag ".bubbles li em" dan border-color:#d6dbbf pada css tag ".bubbles li em:after"
lalu masukan juga script dibawah ini di template sobat,tepat'a di bawah kode ]]></b:skin>
<script src="https://sites.google.com/site/djogzs/js/jquery.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".bubbles a").append("<em></em>");
$(".bubbles a").hover(function() {
$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function() {
$(this).find("em").animate({opacity: "hide", top: "-15"}, "slow");
});
});
</script>
Terakhir,masukan kode html di bawah ini di Rancangan=>Elemen Laman=>tambah gadget=>HTML/JavaScript lalu letakan kode html'a ,lalu disimpan.
<ul class="bubbles">Setelah itu lihat hasilnya ^^
<li>
<a href="http://djogzs.blogspot.com/" title="Home sweet home">Home</a>
</li>
<li>
<a href="http://djogzs.blogspot.com/" title="siapa aku?">About</a>
</li>
<li>
<a href="http://djogzs.blogspot.com/" title="Johanes">Contact</a>
</li>
</ul>
oia,sobat bisa ganti URL,nama link,dan pesan yang ada pada bubbble dengan kata2 sobat sendiri.
contoh " title="siapa aku?" "
dan bila sobat ingin menambahkan tombol lagi,tinggal copy paste kode html dibawah ini.
<li>lalu letakan kode'a di atas kode " </ul> "
<a href="http://djogzs.blogspot.com/" title="pesan">Nama link</a>
</li>
selamat mencoba,dan jangan lupa tinggalkan komentarnya n_n
Membuat menu melayang dengan sentuhan Jquery dan CSS3
Apa kabar sobat?udah pernah lihat menu melayang belum?pasti sudah kan..kali ini saya mau share trik menu melayang,tetapi menu ini dilengkapi jquery dan css3.effect animasi hover'a dengan css3 dan
effect melayang dengan jquery yang selalu mengikuti layar kita.contoh'a bisa sobat lihat disini mau tau cara'a?lets go...
Pertama,buka blogger sobat, Rancangan => Edit HTML
lalu masukan css dibawah ini ke template sobat
#floatMenu {
position:absolute;
top:150px;
left:50%;
margin-left:235px;
width:80px;}
#floatMenu ul {list-style-type: none;}
#floatMenu ul li a {
display:block;
background:-moz-linear-gradient(-90deg, #222, #2b2b2b) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear, left top, left bottom, from(#222), to(#2b2b2b));
border:1px solid #999;
border-left:6px solid #999;
text-decoration:none;
color:#ccc;
padding:5px 5px 5px 25px;
width:80px;
-webkit-transition: all 0.6s ease-out;
box-shadow: #333 0px 0px 10px;
-moz-box-shadow: #333 0px 0px 10px;
-webkit-box-shadow: #333 0px 0px 10px;
}
#floatMenu ul li a:hover {
color:#fff;
background-color:#333333;
border-right:6px solid #999;
width:150px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 0px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 0px;
}
#floatMenu ul.menu1 li a:hover {border-color:#09f;}
Note:
-bila sobat ingin mengganti warna background menu'a,sobat tinggal ganti kode warna'a.
-sobat juga bisa ganti warna hover menu'a dengan mengganti kode warna'a.
Selanjut'a.sobat masukan script di bawah ini di bawah kode ]]></b:skin>
<script language="javascript" src="https://sites.google.com/site/djogzs/js/jquery_mini.js"></script>
<script language="javascript" src="https://sites.google.com/site/djogzs/js/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>
terakhir..sobat masukan kode html di bawah inidi elemen halaman sobat,atau bisa di template sobat di atas kode </body>
<div id="floatMenu">
<ul class="menu1">
<li><a href="#" onclick="return false;"> Home </a></li>
<li><a href="#" onclick="return false;"> About </a></li>
<li><a href="#" onclick="return false;"> Contact </a></li>
<li><a href="#" onclick="return false;"> Blog </a></li>
<li><a href='#' onclick='MGJS.goTop();return false;' onclick="return false;"> Back to top </a></li>
</ul>
</div>
Note:
-Ganti tanda # dengan Url sobat.
-Ganti juga Nama link sobat.
selesai deh..
selamat mencoba sob,dan jangan lupa tinggalkan komentarnya n_n
Memasang Accordion Dengan Jquery dan Css
sobat udah pernah liat blog teman sobat sidebar'a bisa buka,lalu menutup??ini dia trik'a namanya Accordion,kalau sobat belum tau seperti apa Accordion,sobat bisa lihat contoh'a disini dengan Accordion kamu bisa mengurangi
tempat blog kamu.trik ini tdk akan memberatkan blog kq.ok,dah langsung aja saya kasih tau cara'a n_n
Pertama,masukan kode HTML ini ke blog kamu...
isi widget yang kamu iginkan.contoh:bukutamu,blogroll,link dan sebagai'a
<div class="container">
<h2 class="acc_trigger"><a href="#">Menu1</a></h2>
<div class="acc_container">
<div class="block">
Isi widget/text kamu disini
</div>
</div>
<h2 class="acc_trigger"><a href="#">Menu2</a></h2>
<div class="acc_container">
<div class="block">
Isi widget/text kamu disini
</div>
</div>
</div>
kemudian,masukan CSS ini di template sobat
h2.acc_trigger {
padding: 0;
margin: 0 0 5px 0;
background: url(http://www.sohtanaka.com/web-design/examples/accordion/h2_trigger_a.gif) no-repeat;
height: 46px;
line-height: 46px;
width: 500px;
font-size: 2em;
font-weight: normal;
float: left;
}
h2.acc_trigger a {
color: #fff;
text-decoration: none;
display: block;
padding: 0 0 0 50px;
}
h2.acc_trigger a:hover {
color: #ccc;
}
h2.active {background-position: left bottom;}
.acc_container {
margin: 0 0 5px; padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
background: #f0f0f0;
border: 1px solid #d6d6d6;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.acc_container .block {
padding: 20px;
}
Note:url gambar bisa kamu ganti sesuai kebutuhan.atau dapat diganti dengan CSS 3
setelah itu,copy paste script ini di bawah kode ]]></b:skin>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container
//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
$('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
$(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
}
return false; //Prevent the browser jump to the link anchor
});
});
</script>
selesai deh...
selamat mencoba n_n
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
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)
(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 ^^
Subscribe to:
Posts (Atom)
