 |
| Ktm bang dul |
 |
| Ktm bang dul |
Jumat, 09 Desember 2016
Jumat, 25 Maret 2016
Membuat Random Post Bergerak
Cara Membuat Widget Random post Bergerak di Blog
Dengan memasang Widget Random post pada blog kita akan menampilkan artikel di blog secara acak
<style type="text/css">
/*widget*/
#rp_plus_img{overflow:hidden;border:solid 1px #ddd;padding:10px; background-color:none;line-height:1.7em;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0;}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:normal !important;margin-bottom:5px;font-size:14px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:60px;border-radius:4px;}
</style>
<!-- start -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Brando07/share/master/random-post-bergerak-seocips.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="http://pro-shinobi.blogspot.co.id/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
<!-- /end -->
Cara Membuat Widget Random post Bergerak di Blog adalah :
<style type="text/css">
/*widget*/
#rp_plus_img{overflow:hidden;border:solid 1px #ddd;padding:10px; background-color:none;line-height:1.7em;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0;}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:normal !important;margin-bottom:5px;font-size:14px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:60px;border-radius:4px;}
</style>
<!-- start -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Brando07/share/master/random-post-bergerak-seocips.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="http://pro-shinobi.blogspot.co.id/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
<!-- /end -->
- Masuk ke Blog
- Klik Menu tata letak
- Tambahkan Gadget dan pilih HTML/java script
- Masukkan kode diatas
- warna Merah adalah kecepatan berpindahnya post
- Biru waktu berhenti post sebelum pindah lagi
- Hijau jumlah post yg ditampilkan
- Kuning ganti dengan url anda
- simpan dan selesai
cara memasang buku tamu pada blog
cara memasang buku tamu pada blog
Kali ini kita akan memasang Cbox auto hidden dari segala arah, segala arah maksudnya yaitu Cbox dapat ditempatkan atau muncul dari bagian sebelah kiri blog, kanan blog, bawah blog, dan atas blog, dan disertakan juga animasi gambar gif sebagai background.
Nah untuk lebih jelasnya mari kita tidur..upss kok tidur ....XD..ikuti langkah berikut ini
pertama daftar dulu ke Cbox
Berikutnya ini adalah Cara Lengkap Memasang Buku Tamu / CBOX Di Blog: Kiri, Kanan, Bawah, Atas:
- Seperti biasa sobat harus Login dulu di akun blog sobat
- Pilih Tata Letak
- Tambah Gadget HTML/Java Script
- Selanjutnya copy paste kode script di bawah ini dan masukan ke dalam Gadget HTML/Java Script.
<style type="text/css">
#at{
position:fixed;
right:35%;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:0px;
width:0px;
float:top;
cursor:pointer;
background:url(url);
}
.atcontent{
float:left;
border:2px solid #fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF_mPf-d1UoAcEoL2bHRSgC344CYjLO-nnPLTIEFNkg72hIy4VLpg91HclP6AM5L1hAyBmCJ-dHW9XqKvNVIcAQlhP60efZKXFIySrFzcKMJ-6-5V-CBWoeK_h3H9TGetZPqz8QVu5DMBc/)#000000 repeat-x bottom center scroll;
-moz-border-radius:10px;
padding:10px;
}
.atcontent:hover{
border:2px solid #fff;
background:url(http://petir-project.googlecode.com/files/zuaz-petir.gif)#000000 repeat-x bottom center scroll;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat;">
Strip kode cbox sobat
</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Tutup Cbox" /></a></div>
</div></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.bottom = (-200-at.offsetWidth).toString() + "px";
</script>
#at{
position:fixed;
right:35%;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:0px;
width:0px;
float:top;
cursor:pointer;
background:url(url);
}
.atcontent{
float:left;
border:2px solid #fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF_mPf-d1UoAcEoL2bHRSgC344CYjLO-nnPLTIEFNkg72hIy4VLpg91HclP6AM5L1hAyBmCJ-dHW9XqKvNVIcAQlhP60efZKXFIySrFzcKMJ-6-5V-CBWoeK_h3H9TGetZPqz8QVu5DMBc/)#000000 repeat-x bottom center scroll;
-moz-border-radius:10px;
padding:10px;
}
.atcontent:hover{
border:2px solid #fff;
background:url(http://petir-project.googlecode.com/files/zuaz-petir.gif)#000000 repeat-x bottom center scroll;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat;">
</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Tutup Cbox" /></a></div>
</div></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.bottom = (-200-at.offsetWidth).toString() + "px";
</script>
Klik save / simpan.
Keterangan:
- Kode warna merah adalah warna gambar, silakan sobat sesuaikan sendiri sesuai selera bila ingin mengganti gambarnya
- Kode warna kuning adalah penepatan dimana cbox akan muncul, bila sobat ingin cbox muncul dari atas ganti kode tersebut menjadi TOP, dari sebelah kiri LEFT, dari sebelah kanan RIGHT .
- Kode warna putih adalah jarak cbox dari sebelah kanan. Silakan sobat sesuaikan sendiri.
- Texts berwarna hijau adala tempat untuk menaruh strip kode cbox sobat (atur cbox sobat agar backgroudnya transparant untuk hasil yang lebih sempurna).
- Tetap login di akun blog sobat
- Masukan script berikut bersamaan dengan script di atas dalam gadget HTML / Java Script
Keterangan:
- Kode berwarna merah adalah gambar tombol, bisa sobat ubah sesuai selera.
- Kode warna kuning adalah dimana tombol akan ditempatkan, TOP untuk menempatkan tombol di atas, BOTTOM untuk menempatkan tombol di bawah, LEFT untuk menempatkan tombol di sebelah kanan.
- Kode warna biru anda sesuaikan jarak tombol TOP dari atas blog, BOTOM dari bawah blog
Kamis, 24 Maret 2016
Membuat related post di blog
Membuat related post di blog
Pasang kode berikut diatas ]]></b:skin>
.related-post .post-thumbnail {z-index: 1;position: relative;width: 98px;height: 98px;margin: 0;display: block; border-right: 1px solid #fff;border-bottom: 1px solid #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 2px 2px 5px #444; -moz-box-shadow: inset 2px 2px 5px #444; box-shadow: inset 2px 2px 5px #555; }
.related-post { float: left; position: relative; width: 98px; height: 98px; margin: 0 10px 10px 0; background: #F6F6F6; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.related-post .related-post-title { display: none; float: left; background: #000; color: #fff; text-shadow: none; font-weight: bold; padding: 10px; position: absolute; top: -20px; left: 40px; z-index: 2; width: 200px; -webkit box-shadow: 0 0 2px #444; -moz-box-shadow: 0 0 2px #444; box-shadow: 0 0 2px #444; }
.related-post:hover .related-post-title {display: block;}
kemudian cari kode yg mirip dibawah ini
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'/>
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>
Copy kode dibawah ini dan letakkan dibawa salah satu kode diatas
<div id='related-posts'>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3>Related Posts</h3>';rn='<h3> No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyBH0tiYgIPdE6ampDV72r0o5zBtVIkeEmDEDHPfqXiU-eCETGolhI7k26vQOIfqSJ6eF05Y7QLT6H69YC-9tgrmVv_6WA5IMBkXBEWxPKRhgITAtbviZLMPLPcamDjrwdqV70frx0mAj8/'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]></script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=5;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</b:if>
</div>
<div class='clear'/>
Rabu, 23 Maret 2016
Membuat image slider di blog
Membuat image slider di blog
sebelumnya dapat juga dibuat : slider dengan efek Quake
dapat dilihat DISINI
Berikut adalah kodenya
Ganti tulisan berwarna biru dengan link tujuan gambar anda
sebelumnya dapat juga dibuat : slider dengan efek Quake
dapat dilihat DISINI
Berikut adalah kodenya
<style type="text/css">
/* http://lhulunk.blogspot.co.id/*/
#sliderFrame { position:relative; width:100%; margin:0 auto 10px; }
#slider { width:100%; height:306px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirohyphenhyphenwerfJkVG6Sb_Yx3-mzF_8gzcJpcYBxMWXaV35igIjh3k5Y7w7C1Fn-1_m4FZdEE8IpMivainPIijPs8hBJcO5g5-QFbqgyqm5ubgLGYXKx5WwQHPAF5dSNmltnjv_AknSegi8C5Y2/s1600/loading.gif) no-repeat 50% 50%; position:relative; margin:0 auto; box-shadow:0 1px 5px #999999; }
#slider img { position:absolute; border:none; display:none; }
#slider a.imgLink { z-index:2; display:none; position:absolute; top:0; left:0; border:0; padding:0; margin:0; width:100%; height:100%; }
div.mc-caption-bg,div.mc-caption-bg2 { position:absolute; width:100%; height:auto; padding:0; left:0; bottom:15px; z-index:3; overflow:hidden; font-size:0; }
div.mc-caption-bg { background-color:black; }
div.mc-caption { font:bold 14px/20px Arial; color:#EEE; z-index:4; padding:10px 0; text-align:center; }
div.mc-caption a { color:#FB0; }
div.mc-caption a:hover { color:#DA0; }
div.navBulletsWrapper { background:none; padding-left:20px; position:relative; z-index:5; cursor:pointer; }
div.navBulletsWrapper div { width:11px; height:11px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxI9O11O-_S1HTRLkF5mY11D5QDhjNDLMHjjpCvrd2qAWYRW5kalPH2QsnPOwvBwTb6mybgkS2YHMzGgE7QFMpcbf1b6QIpJiDgTAAkEV5P0Htiqgc25puHSklEePgf4RQOcxdpKc0Jh_4/s1600/bullet.png) no-repeat 0 0; float:left; overflow:hidden; vertical-align:middle; cursor:pointer; margin-right:11px; position:relative; }
div.navBulletsWrapper div.active { background-position:0 -11px; }
.intro { bottom:0; color:rgba(0,0,0,0.2); font-size:16px; position:absolute; right:0; text-decoration:none; z-index:99999; }
#slider { transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); }
</style>
<script src="http://project.dimpost.com/image-slider/js-image-slider-2.js" type="text/javascript"></script><div id="sliderFrame">
<div id="slider">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMfJmnixmiDfrNSvCwrp0mG2Xk_a470HHzaXADGoGEiVLnXFPxP2Hg6VypCVgNzYNOzU6-YBppxeBhbxBWA00Z45w6RpkM54kn2m4AmuxUHsvWfOmn9G8w3XlsvcTuCwG9h4q9jxParN2t/s1600/image-slider-1.jpg" alt="#htmlcaption1" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0rA26KXWq3nBNpaIQ_2Urqcug5jUR9uDO8R_ucdlPZfLDux5g5_HmjKU6O-hJDoYw7HCkfet2UCXN7T-7jJAxyuDfmeQDKae_JvZ1ybnGyVfgAdGpfgZfOOs5F_if3tHYKJY4sHBrEQ8e/s1600/image-slider-2.jpg" alt="cropoz!" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqDdFgrO4qATtiI8twH8OwoBUQXIDl31PfX5q0sILlB9FVcBzcnZa8jpMcC3PUxzGm_Ci6QuAj9XWYn76kfgCgJnPL_PRl2M21F4G0uUtDqNssaOgRNIvQvrZZ6VmBavzyM1ljZHhQs9Vq/s1600/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitn69WvNg34br0r2FO0Ce3y4DfVaZdsZptDqb6Wr9XN-m6iYuU6sOVDvfTb6YyGYaE-S8hnqjWjwKspa5HaBfeDEi34lGbPFg7VCXp7iMtB7Uvlije1WQFjRwZ6js5Uw1aGeIfNpW4qD_L/s1600/image-slider-4.jpg" alt="#htmlcaption2" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilDy-BDC5sStOLaFCKzNWZh2sogydN7CZhcnpTdDl_EWOApXGjFBqvay-Y1c_CFwI2pYj-x7mAEuur83JuUxWulj7ovqRvQ24jiDoXsy_NKXR4tZKnmC9N6xah3oYWBARKQkAv5of_eOZg/s1600/image-slider-5.jpg" alt="Stay Connected"/></a>
</div>
<div id="htmlcaption1" style="display: none;">
Image Slider by <a href="http://lhulunk.blogspot.co.id/="_blank">lhu#nk</a>
</div>
<div id="htmlcaption2" style="display: none;">
<a href="http://lhulunk.blogspot.co.id/" target="_blank">CSS</a> <a href="http://www.seocips.com" target="_blank">blogger</a> Rocks.
</div>
</div>
Ganti tulisan berwarna biru dengan link tujuan gambar anda
membuat image slider dengang efek
1. Letakkan diatas ]]></b:skin> atau </style>
kode di bawah ini
.quake-slider-wrapper { margin:0 auto; padding:5px; }
.quake-slider { width:560px; height:350px; margin:0; position:relative; overflow:hidden; border:1px solid #ddd; background:#EEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAjn_zGgleG6AqKMa4Rzpg1sve-Wh9hglBXqQ1PooSX__v_1VRjIWVh7P-2y23Bo9xquvOOc1onGJI4zdhLB6h8Q4HQd7lu2jsYBiVAPu1XiLT19SmuvTitgS9wp-gevtCwnCP9HGnMN6c/s1600/loading.gif) no-repeat center; }
.quake-nav a { position:absolute; top:45%; text-decoration:none; width:37px; height:38px; background-repeat:no-repeat; z-index:10000; cursor:pointer; text-indent:-9999px; -webkit-touch-callout:none; -moz-user-select:none; -webkit-user-select:none; user-select:none; -khtml-user-select:none; }
.quake-prev { left:0; margin-left:2px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWwXa2jjw8hKgtGU98tpGNuTHWO1b1uOraHusp7yx6y9jeWnrWzlEML9L9s51A1ijvhqzMbTXzoFisWz4sSipyHlqCcccShypmF-v5YIPTkTGrlEOxq9nJATBQel076KiL7JKWh-6eKI4/s1600/nav.png); }
.quake-next { right:0; margin-right:2px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWwXa2jjw8hKgtGU98tpGNuTHWO1b1uOraHusp7yx6y9jeWnrWzlEML9L9s51A1ijvhqzMbTXzoFisWz4sSipyHlqCcccShypmF-v5YIPTkTGrlEOxq9nJATBQel076KiL7JKWh-6eKI4/s1600/nav.png) right; }
.quake-slider-caption-container-right { background-color:#1889F1; position:absolute; z-index:101; padding:5px; width:200px; right:0; top:0; bottom:0; }
.quake-slider-caption-right { color:white; font:bold 13px/20px Arial,sans-serif; width:200px; position:absolute; z-index:102; right:0; top:0; bottom:0; padding:5px; margin:0; }
.quake-slider-caption-container-bottom { background-color:black; position:absolute; z-index:101; padding:15px; bottom:0; left:0; right:0; }
.quake-slider-caption-bottom { color:white; font:bold 13px/20px Arial,sans-serif; position:absolute; z-index:102; bottom:5px; padding:0 10px; }
.quake-nav-wrapper { position:relative; z-index:1000; }
.quake-nav-container { margin:10px auto 0; }
.quake-nav-control { width:22px; height:22px; cursor:pointer; display:inline-block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9N4Um8a5WmedgNb9e3USPEg3VpaanrGU6eZ74vjHLtACAfmegJqHzXsOZivKmZdmLngajMlh38VtHHpnhvU5HoNWrfC8KxYj0CH-mLOo6Jlus2inNEaCGDFfhdb1V7C-bNHAIfrRXfGo/s1600/circle.png) no-repeat; text-indent:-99999px; border:0; -moz-user-select:none; -webkit-user-select:none; user-select:none; -khtml-user-select:none; outline:none; }
.quake-nav-control.active{/*background-position:0 -22px; */
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhPKUDW9GKNd7hKw6RZSq-grq0PZsfgJ3a8pn0Q6nMyI0YNoBIQ9Rzy59EbIEh0ej1QYX6V7fugc0wdkFn-aR-EVGjKwC28XyZMVduL19-gSwwIbvsu6QKEdgdJ9LBXYMkB3OX0R0uE8/s1600/circle-active.png)}
.quake-slider-caption a { color:Yellow; }
.quake-link { position:absolute; z-index:101; }
Kemudian letakkan kode ini ini diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/><script src='https://sites.google.com/site/vanzdy/script/efek_quake-slider.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function () {
$('.quake-slider').quake({
thumbnails : false,
captionOpacity : '0.7',
hasNextPrev : true,
frameWidth :560, frameHeight : 350, captionsSetup : [{
"orientation" : "bottom",
"slides" : [0,3],
"callback": captionAnimateCallback
}]
});
function captionAnimateCallback(captionWrapper, captionContainer, orientation) {
captionWrapper.css({
bottom: '-990px'
}).stop(true, true).animate({
bottom: 0
}, 500);
captionContainer.css({
left: '-990px'
}).stop(true, true).animate({
left: 0
}, 500);
}
});
</script>
Terakhir letakkan kode ini di bawah <div class='main-wrapper'><script type='text/javascript'>
$(document).ready(function () {
$('.quake-slider').quake({
thumbnails : false,
captionOpacity : '0.7',
hasNextPrev : true,
frameWidth :560, frameHeight : 350, captionsSetup : [{
"orientation" : "bottom",
"slides" : [0,3],
"callback": captionAnimateCallback
}]
});
function captionAnimateCallback(captionWrapper, captionContainer, orientation) {
captionWrapper.css({
bottom: '-990px'
}).stop(true, true).animate({
bottom: 0
}, 500);
captionContainer.css({
left: '-990px'
}).stop(true, true).animate({
left: 0
}, 500);
}
});
</script>
<b:if cond='data:blog.pageType != "item"'>
<div class="quake-slider">
<div class="quake-slider-images">
<a href="http://lhulunk.blogspot.co.id/2016/03/membuat-image-slider-dengang-efek.html" target="_blank"><img alt="Cara Membuat Chop Slider Otomatis di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXvxaqM5xRW3GiJe0aMUIgpAk1bQOiJQDj6Ww311Ttayku0gbipXsVcYLl-QBr_cvrkdB63n9xeC3haN53CHb0VFrE_Yf6Wok0D4G0y0fKc_aDY1_9BH1PzLMyUWmhvigz4230EXJGT1k/s1600/1.jpg" /></a>
<a href="http://www.seocips.com/2014/07/slider-dengan-efek-quake-di-template.html" target="_blank"><img alt="Memasang slider dengan efek Quake" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0ys7lMJtq6y0z7FzILYYLbTRlCwmV5ZGDWAP0Zbq50rzKb0NLXBTYcHu5ADmXuD2qfiZwu4d1QSFBK-Zk1-6Ryb_yoeNLqt9tPtzAY74ekj1Rfuqla9BuveozOaMSlNz-S-AK3DhZHAk/s1600/2.jpg" /></a>
<a href="http://www.seocips.com/2014/08/jquery-image-crousel-slider-for-blogger.html" target="_blank"><img alt="Jquery Image Crousel Slider" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP20abXJtzXuBbR6Z3SzSgLiV-JStSLHKoCX8gcBDhvAy_bm9REljVbqbHmh_5lR37vbKwslYz4lmmWrY1CIzHzfJbC6XQj2oA_b455SpQAgVL_dyx31-bO5JzF8v8p1rpO_FMAhFUebs/s1600/3.jpg" /></a>
<a href="http://www.seocips.com/2014/06/cara-membuat-slide-rekomendasi-artikel.html" target="_blank"><img alt="Jquery Image Crousel Slider" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcW-BDIj2RmfVmjDkGgsllarI8bQm6mFJ-X5P-gA6pTUwXoiIZOCDQiTc5xfgduBr6CXuCsZD0iVE_0RU6ZdSfEzfQETv3-OVIAELFQyDjjuHehIurwhFDvT1biQ4_QRZCy0nRduMiCq8/s1600/4.jpg" /></a>
</div>
<div class="quake-slider-captions">
<div class="quake-slider-caption">
tentang Cara Membuat Chop Slider di Blog. Slider ini benar-benar plugin baru yang dikembangkan sepenuhnya dari awal berdasarkan pengalaman versi sebelumnya dan sesuai dengan tren teknologi modern....<a href='#'>Readmore</a></div>
<div class="quake-slider-caption">
Untuk mempercantik blog sobat dapat menghiasinya dengan slider-slider, sebenarnya juga bukan hanya untuk mempercantik tampilan tapi juga untuk memberitahukan...<a href='#'>Readmore</a></div>
<div class="quake-slider-caption">
Gambar dengan efek slider crousel di blog. Untuk sobat yang ingin mempercantik tampilan blog, atau membuat animasi slider di gambar-gambar...<a href='#'>Readmore</a></div>
<div class="quake-slider-caption">
Memasang slide artikel terkait ini cocok utuk blog dengan tema apa saja, intinya adalah untuk membuat pengunjung tertarik ingin membaca artikel terkait menarik lain yang ada di blog sobat, contohnya seperti ini...Readmore</div>
</div>
</div>
</b:if>
selamat mencoba
Langganan:
Postingan (Atom)
About me
lulunk
Semua Karena Kesenangan
