Cara buat Slideshow ringkas

Cara buat Slideshow ringkas untuk banyak kegunaan.Slideshow ringkas ini juga kita boleh gunakan untuk meletakan iklan di blog dalam format/bentuk 125x125.

Cara-cara untuk membuatnya juga ringkas.

Login ke akun blog anda

Masukkan script di bawah ini ke dalam GADGET HTML/Javascript.

<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg73cH3IhbaK1OU864sv1D7wbgtdztmKKLJ0TsP4JlA7JM9iYt-4-YZ57oVxHzTKmCZWeY-fR_psgwZdhpgfNz4ZbQh0b9xBGmMuImU8UCZKCZY5SAp4XLbVPtwcLhd4eedufviO9JeRYrX/', 30, 60 ], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz6_kExt9UmELCSGtGMaMdt1XPY1VbcRiXFs-TiYqxeDiynKhZ041t7laZDCY0jIv2DKbvd8Xv56EMuH8wmt1ZsSVyoKhIfByjqXFkVSsILdiUoLDZ8WAs9Xo21obmcmKx1Tw7gn1KiV8Z/', -55, 60 ]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
<div id="mygallery" class="stepcarousel">
<div class="belt">


<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>


<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>


<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>


<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>


<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>


<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>


<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

Ganti yang berwarna merah mengikut kesesuaian blog Anda.
Dan SAVE GADGET

Cari code ]]></b:skin> dan gunakan Ctrl-F untuk memudahkan pencarian.

Salin code di bawah ini dan letak diatas ]]></b:skin>

.carousel {
float:left;
margin:0;
padding:0
}

.carousel .widget {
width:720px;
background:#888;
margin:0;
padding:0
}

.stepcarousel {
position:relative;
overflow:scroll;
width:765px;
height:160px
}

.stepcarousel .belt {
position:absolute;
left:0;
top:0
}

.stepcarousel .panel {
float:left;
overflow:hidden;
width:140px;
margin:5px 20px 5px 0
}

.stepcarousel .panel img {
float:left;
background:#940f04;
border:1px solid #000;
margin:5px;
padding:5px
}

.stepcarousel .panel img:hover {
background:#fff
}

#under_header {
opacity:100
}

.carousel h2,.quickedit {
display:none
}

Ganti yang berwarna merah mengikut kesesuan blog anda.

Copy code dibawah ini dan letak dibawah code ]]></b:skin> pula.

<script src='https://sites.google.com/site/listblogtutorial/widget/slideshow.js' type='text/javascript'/>

SAVE TEMPLATE, dan lihat hasilnya.

Selamat mencuba.

READ MORE - Cara buat Slideshow ringkas

Cara Membuat SiteMap efek jquery

SiteMap,satu wideget atau efek diblog kita yang menghimpunkan segala artikel kita yang lalu
Dengan adanya SiteMap diblog kita,memberi satu kemudahan kepada pengunjung blog untuk melihat artikel kita yang lalu berdasarkan lebel yang dibuat.

Jika artikel lalu kita  Membuat SiteMap mengikut Haribulan,kini kita membuat sitemap dengan efek jquery dimana ia memberi penampilan yang lebih menawan.

Script SiteMap efek jquery ini saya perolehi dari blogger Indonesia Hendriono,seorang pereka cipta berbagai-bagai script jquery untuk template.

Untuk membuatnya,seperti biasa,Masuk Design - Edit HTML

Seterusnya cari code ]]></b:skin> dan letakan code css dibawah ini diatas kode ]]></b:skin>

#dafis-acc {
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}
.dafis-label {
background: rgb(125,126,125);
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
color: #A1A1A1;
text-transform:uppercase;
font-weight: bold;
line-height: 2em;
margin: 1px 3px;
cursor: pointer;
outline: medium none;
overflow: hidden;
padding: 2px 10px;
text-decoration: none;
text-align: center;
}
.dafis-label:hover {
color: #F2F2F2;
}
.dafis-daf ol {
margin: 0 0 0 30px !important;
padding: 0 !important;
}
.dafis-daf ol li {
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
line-height: 1.3em;
margin: 1px 3px !important;
text-align: left;
white-space: nowrap;
}
.dafis-daf ol li a {
color: #333333 !important;
display: block;
padding-top:5px;
padding-left: 10px;
text-decoration: none !important;
}
.dafis-daf ol li a:hover {
color:f2f2f2;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

Cari code </head> dan letakan code dibawah ini diatas code </head>

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

PERINGATAN:Jika didalam template sudah ada script seperti ini,jangan diletakkan lagi.
Cukup dengan satu Script seperti ini.

Save template.

Script dibawah ini untuk menampilkan sitemap,boleh diletakkan pada posting, widget atau pada halaman statis.

<script type="text/javascript" src="https://sites.google.com/site/listblogtutorial/sitemap/site-map.js"></script>
<script src="http://listblog-tutorial.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Penting: Ganti url dengan url blog anda.(warna biru)

READ MORE - Cara Membuat SiteMap efek jquery

Cara Membuat Slide Navigation dengan JQuery

Banyak cara membuat Navigation/Tab,kali ini kita akan membuat Cara Membuat  Slide Navigation dengan JQuery pula.

Cara-cara Membuat  Slide Navigation dengan JQuery.

Macam biasa mestilah membuka blog dengan ruang edit html.
Cari code berikut ]></b:skin>
Salin code css dibawah ini dan letak diatas ]></b:skin> tadi.

.headerfixed {
width:600px;
height:56px;
position:absolute;
top:50%;
left:10px;
background:#fff url(title.png) no-repeat top left
}

ul#navixed {
position:fixed;
top:0;
right:10px;
list-style:none;
z-index:999999;
width:721px;
margin:0;
padding:0
}

ul#navixed li {
width:103px;
display:inline;
float:left
}

ul#navixed li a {
display:block;
float:left;
margin-top:-2px;
width:100px;
height:25px;
background-color:#000;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0 0 10px 10px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-khtml-border-bottom-right-radius:10px;
-khtml-border-bottom-left-radius:10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70)
}

ul#navixed li a:hover {
background-color:#000
}

ul#navixed li a span {
letter-spacing:2px;
font-size:11px;
color:#FFF
}

ul#navixed .home a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOZ4zfv6VOI0be2Dp5QPQo1wArQLUtws02Z1-fdPHb5yO-k2EtcKqh-LO9B3n1TNQ4hp712G160ZKxsgmgLQJlbb42tndU5UZA1HTwQeTmdoyPCfai_APVCOxsgC0_hWdI9kzsbfRqlKo/s1600/home.png)
}

ul#navixed .about a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaO83xRxdkmCOWbluyqyQafW-IEp5c1hhDsMMate5qbVzdgb5cjwMcZplkoe80LnVIAXch4QUaffdj52l_E-Ji5K2m374T0ZTsFIaswdzx82VgHu4x281XhVHQmYiZBNlkX6qXMbI3v7s/s1600/id_card.png)
}

ul#navixed .search a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu_l4HzgTJYjdur0X837sn_B5LEA_O7dv2BDOPdqFwQCQx3qPkYl2QiB4VMrG0CgVb-xfYKzgxdhBBZ10C_VsA9UGFHEZh-Dq9qIqtA42hmR6DPp-qY7AwnfKFdsF0NlUyecvEDr5jnHs/s1600/search.png)
}

ul#navixed .podcasts a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Tlk_ODD8Cm5qnphfBDTEIIEYry1nYawvYYCgRTEDsKd_jQbPt5f9GrbAl_HwZEl3pHamX6H4LbW2xvfp6ko7tCO2N7g9maqBVx0rGrh1Leyo7U9XtNR3dnHA9tKrS49lkdaxghRw2N0/s1600/ipod.png)
}

ul#navixed .rssfeed a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEingxxYyYUrPUjVIOjTR6wFGOEfsAuxIxYWg3y5SyL3WYW12TA8K5VRI4sAEpJrXsnMHMS5dWFnM5pr0y8ZLOruCbuMIRtLTncJyBhANpuHluCGIhlXRGe8RSJnfajaFUYZb4fPF3sgwao/s1600/rss.png)
}

ul#navixed .photos a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgogQciYR7vFkxKdD9yYQeMwYlRWQ1JA0vX_EVF3MuSbXp24Ak0Evpq4_f3ta6ctYXunSG9osMtsa2jhEJgCZpBZBK3Pn5yIMjj3PFFV-qYfOiGOeil7K_UDer5hCEfWn0BYqTkdX0MbgU/s1600/camera.png)
}

ul#navixed .contact a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWguVNvXV9CfDxTb7IDf9zi3hqMWKtjyCaJaYqderCL6JArFGfuVYbOslT4nrr2G5jWzFvO3tGavglE2tqnwESQ-_kKNgW4dDxSzx7SwrKK2m1FTn3W2qZBnahDF727xHiMWdZi3V9C-U/s1600/mail.png)
}

Cari code </head> pula
Salin code dibawah ini dan letak diatas code </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/> <script src='https://sites.google.com/site/listblogtutorial/sitemap/jcolor.js'/> <script type='text/javascript'> $(function() { var d=300; $(&#39;#navixed a&#39;).each(function(){ $(this).stop().animate({ &#39;marginTop&#39;:&#39;-80px&#39; },d+=150); }); $(&#39;#navixed &gt; li&#39;).hover( function () { $(&#39;a&#39;,$(this)).stop().animate({ &#39;marginTop&#39;:&#39;-2px&#39; },200); }, function () { $(&#39;a&#39;,$(this)).stop().animate({ &#39;marginTop&#39;:&#39;-80px&#39; },200); } ); }); </script>


Cari lagi code <body>
Salin dan letak code dibawah ini diatas code <body>

<ul id='navixed'><li class='home'><a href='#'><span>Home</span></a></li> <li class='about'><a href='#'><span>About</span></a></li>
<li class='search'><a href='#'><span>Search</span></a></li>
<li class='photos'><a href='#'><span>Photos</span></a></li>
<li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li> <li class='podcasts'><a href='#'><span>Podcasts</span></a></li> <li class='contact'><a href='#'><span>Contact</span></a></li>
</ul>

Klik simpan template.
Buka kembali edit HTML untuk anda edit code no3 mengikut kesesuaian blog anda.

Selamat mencuba

READ MORE - Cara Membuat Slide Navigation dengan JQuery

Sorok shoutmix mengunakan code jquery

Sorok shoutmix mengunakan code jquery.

Salin code di bawah ini,dan letak ,di dalam HTM/JavaScript.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

<script>

$(document).ready(function() {

//select all the a tag with name equal to ybl

$('a[name=ybl]').click(function(e) {

//Cancel the link behavior

e.preventDefault();

//Get the A tag

var id = $(this).attr('href');

//Get the screen height and width

var tbbHeight = $(document).height();

var tbbWidth = $(window).width();

//Set heigth and width to tbb to fill up the whole screen

$('#tbb').css({'width':tbbWidth,'height':tbbHeight});

//transition effect

$('#tbb').fadeIn(1000);

$('#tbb').fadeTo("slow",0.8);

//Get the window height and width

var winH = $(window).height();

var winW = $(window).width();

//Set the popup window to center

$(id).css('top', winH/2-$(id).height()/2);

$(id).css('left', winW/2-$(id).width()/2);

//transition effect

$(id).fadeIn(2000);

});

//if close button is clicked

$('.window .close').click(function (e) {

//Cancel the link behavior

e.preventDefault();

$('#tbb').hide();

$('.window').hide();

});

//if tbb is clicked

$('#tbb').click(function () {

$(this).hide();

$('.window').hide();

});

});

</script>

<style>a {color:#000000; text-decoration:none}

img { border:2px none; }

#tbb {

position:absolute;

left:50;

top:50;

z-index:9000;

background-color:transparent;

display:none;

}

#ddt .window {

position:fixed;

left:20;

top:10;

width:440px;

height:700px;

display:none;

z-index:9999;

padding:20px;

}

#ddt #yblshoutbox {

background-color:#999999;

width:440px;

height:460px;

padding:56px 0 20px 5px;

}

#ttp {

padding:2px 0 0 0;

}

</style>

<ul><center> <a href="#yblshoutbox" name="ybl"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA6fp5ihFlGgH5H4L8aBzYR565BQIgI2dkWZl22ACeUl9QfEc63iizwIM95bC2Z_oPkUgh1ro-ltAkujcE_pDNs-LXgUf3gX9o4iLafMA2LrBOoid4xpbKn8Rao35acjNQsMAuoqnRzYiZ/s1600/teksi.jpg" border="0" width="158" height="58" /></a> </center> </ul>

<div id="ddt">

<div id="yblshoutbox" class="window">

LETAK CODE SHOUTMIX DI SINI

<div id="ttp"><input type="button" value="Close" class="close" />

<div id="tbb"></div></div></div></div></div>

READ MORE - Sorok shoutmix mengunakan code jquery