cara memasang buku tamu dengan sliding (tersembunyi)

Jumat, 06 April 2012 | 0 komentar


Apakah sobat memasang buku tamu dengan mengunakan shoutmix atau guest book yang lain ? Bagaimana rasanya setelah terpasang ? Tentu semakin seru saja kan, walau sedikit agak berat ketika loading. ( Hah...berat..!!? ) Walau cuma sedikit tapi lama-lama bisa semakin berat jika widget yang kita pasang bertambah. Sebelum hal ini terjadi bagaimana kalau shoutmix kita sembunyikan, tentunya akan bergeser keluar jika kita klik. Untuk hal ini kita bisa menggunakan menu sliding atau para sobat yang lain biasa menyebutnya dengan widget tersembunyi. Jika sobat ingin menyembunyikannya bisa memasukkan buku tamu sobat kedalam menu di bawah ini.
Caranya seperti biasa:
    Login ke blog sobat.
    Pilih tata letak.
    Tambahkan Gadget.
    Pilih HTML/JAVAScript.
    Ganti kode shoutmix di bawah ini yang berwarna biru dengan kode shoutmix milik sobat.
    Kemudian klik simpan
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:160px;
width:35px;
float:right;
cursor:pointer;
background:http://i761.photobucket.com/albums/xx252/darma_bucket/buku-tamu.jpg
}
.gbcontent{
float:right;
border:2px solid #336633;
background:#FF66CC;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB (x0, xf){
var gb = document.getElementById ("gb");
var dx = Math.abs (x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.left = x.toString() + "px";
if (x0!=xf){setTimeout("moveGB("+x+", "+xf+") ", 10) ;}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB() "></div>
<div class="gbcontent">

<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="darmasena" src="http://www4.shoutmix.com/?darmasena"
width="160" height="400" frameborder="0" scrolling="auto">
<a href="http://www4.shoutmix.com/?darmasena">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat
widget at ShoutMix!">ShoutMix chat widget</a><br />
<!-- End ShoutMix -->
</div>
<script type="text/javascript">
var gb = document.getElementById("gb") ;
gb.style.left = (30-gb.offsetWidth).toString() + "px";
</script></div></div>


keterangan:
    Warna kuning adalah alamat gambar beserta posisinya.
    Warna hijau untuk tampilan warna bisa sobat rubah.
    Warna merah adalah di mana posisi widget akan diletakkan.
    Sedang untuk warna biru adalah di mana sobat harus meletakkan kode shoutmixnya.

Semoga bermanfaat
Continue Reading

membuat recent post auto scroll

| 0 komentar

salah satu widget utama dalam blog adalah widget Recent Post atau Posting Terbaru, dengan menampilkan daftar post terbaru, pengunjung yang masuk bukan dari halaman utama dapat mengetahui posting-posting terbaru secara langsung.



Selain sebagai navigasi suatu blog, recent post yang satu berbeda dengan recent post lainnya, selain memiliki tampilan yang menarik recent post yang satu ini mempunyai kelebihan Auto Scroll. Dengan adanya auto scroll pada recent post ini bila kalian memasangnya bisa menjadikan tampilan suatu blog menjadi lebih apik dan menarik, selain itu bisa mengundang pengunjung untuk mengetahui post-post lainnya dan alhasil jumlah pageview pun akan bertambah. Script ini saya dapat dari teman netterku saudara Ahmad di Cara Membuat Recent Posts Blogger (Auto Scroll &amp; Thumbnails), yang script aslinya dari bloggertricks.combila kalian tertarik untuk memasangnya bisa ikuti cara dan scriptnya dibawah ini :

  • Masuk ke Dashboard - Design/Rancangan - Add Gadget
  • Pilih HTML/Javascript - Copy Paste scripts dibawah ini
  • Save
Pasang kode di bawah ini:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">

<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:345px;
}
#spylist ul{
width:332px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:290px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#FFC7AD url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #C33F00;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language='javascript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq_W71nfTjAEAi_6zZxIreaxmZi52lVV4OexOjg8ZckRu2KbgLWJ8KUs-lxyZvTe8H1CuHWg9d1cj71-TRo2PAVsSuU6IV0qV-Tx3lw_9w06-LJ6faLawJ_zLdExBqHA6A9Gf5hunlYfU/s1600/Situseo+no+image.jpg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq_W71nfTjAEAi_6zZxIreaxmZi52lVV4OexOjg8ZckRu2KbgLWJ8KUs-lxyZvTe8H1CuHWg9d1cj71-TRo2PAVsSuU6IV0qV-Tx3lw_9w06-LJ6faLawJ_zLdExBqHA6A9Gf5hunlYfU/s1600/Situseo+no+image.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq_W71nfTjAEAi_6zZxIreaxmZi52lVV4OexOjg8ZckRu2KbgLWJ8KUs-lxyZvTe8H1CuHWg9d1cj71-TRo2PAVsSuU6IV0qV-Tx3lw_9w06-LJ6faLawJ_zLdExBqHA6A9Gf5hunlYfU/s1600/Situseo+no+image.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq_W71nfTjAEAi_6zZxIreaxmZi52lVV4OexOjg8ZckRu2KbgLWJ8KUs-lxyZvTe8H1CuHWg9d1cj71-TRo2PAVsSuU6IV0qV-Tx3lw_9w06-LJ6faLawJ_zLdExBqHA6A9Gf5hunlYfU/s1600/Situseo+no+image.jpg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq_W71nfTjAEAi_6zZxIreaxmZi52lVV4OexOjg8ZckRu2KbgLWJ8KUs-lxyZvTe8H1CuHWg9d1cj71-TRo2PAVsSuU6IV0qV-Tx3lw_9w06-LJ6faLawJ_zLdExBqHA6A9Gf5hunlYfU/s1600/Situseo+no+image.jpg";
showRandomImg = true;
boxwidth = 300;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comment";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://syamgreat.blogspot.com/";
limitspy=5
intervalspy=6000
</script>

<div id="spylist">
<script type='text/javascript'>
//<![CDATA[
/*
* Script dikombinasikan dari bloggerstricks.com
* spy effect dari jqueryfordesigners.com
* Oleh Abu Farhan (www.abu-farhan.com)
* Modifikasi oleh buka-rahasia.blogspot.com
*/
jQuery(function(){jQuery("ul.spy").simpleSpy(limitspy,intervalspy).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simpleSpy=function(f,g){f=f||4;g=g||5000;return this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find("> li:first").height();l.find("> li").each(function(){i.push("<li>"+e(this).html()+"</li>")});o=i.length;l.wrap('<div class="spyWrapper" />').parent().css({height:h*f});l.find("> li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}).bind("start",function(){k=true});function n(){if(k){var p=e(i[m]).css({height:0,opacity:0,display:"none"}).prependTo(l);l.find("> li:last").animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function showrecentposts(z){document.write('<ul class="spy">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];break}}if("content" in w){var r=w.content.$t}else{if("summary" in w){var r=w.summary.$t}else{var r=""}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){img[o]=d}cmtext=(text!="no")?'<i><font color="'+acolor+'">('+f+" "+text+")</font></i>":"";var q=[1,2,3,4,5,6,7,8,9,10,11,12];var x=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var u=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=x[e];break}}var n=(showPostDate)?'<i><font color="'+acolor+'"> ('+u+" "+h+" "+t+")</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var v='<li><a href="'+p+'"><img src="'+img[o]+'" width="'+thumbwidth+'" height="'+thumbheight+'" class="recent-thumb"/></a><a href="'+p+'" class="recent-link">'+g+'</a><div class="spydate">'+n+'</div><div class="spycomment">'+cmtext+"</div>";document.write(v);j++}document.write("</ul>")}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');
//]]>
</script>
</div>
<span class="Apple-style-span" style="color: black; font-family: arial, sans-serif; font-size: 10px;"><a href="http://syamgreat.blogspot.com/2011/11/cara-membuat-auto-scroll-recent-post.html" target="_blank">thank you for visiting</a></span>


Keterangan :
  • http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg sebaiknya ganti atau memakai host sendiri dengan cara  mengupload kembali file gambar tersebut
  • Ganti http://syamgreat.blogspot.com/ dengan alamat blog kalian dan pastikan ada tanda slash ( / ) di belakang alamat blog.
  • boxwidth = 300 adalah lebar widget dalam pixel (px), sesuaikan dengan lebar sidebar blog kalian.
  • text = "comment" adalah teks di belakang jumlah komentar, kalian bisa menggantinya dengan kalimat yang sesuai.
  • numposts = 10; adalah jumlah posting terbaru yg akan muncul dalam widget
  • limitspy=5 adalah jumlah posting terbaru dalam sekali tampilan, kalian bisa mengganti jumlahnya
  • intervalspy=6000 adalah kecepatan scroll/spy dalam milisecond (ms), ganti nilainya untuk mengatur kecepatannya.


SEMOGA BERMANFAAT :)

Continue Reading
 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. syamGREAT - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Free Blogger Template