Cara Buat Rounded Corner Horizontal Scrolling: Amazing Scrolling

Horizontal Scrolling ini amat cantik desainnya karena telah ditambahkan efek rounded corner dan dapat ditampilkan tanpa harus merubahnya dalam bentuk file html.Cukup simpan kode HTML dan Javascript melalui penambahan widget. Sampeyan bisa memasukkan link kedalamnya beserta judul dan teks untuk menjelaskan judul secara singkat. Berbagai hal bisa disampaikan di sini, misalnya link sahabat, posting, iklan atau kata sambutan dan ucapan terima kasih. Pengaturan posisinya juga amat mudah dilakukan karena kita hanya perlu mengubah posisi horizontal scroller terhadap bagian sebelah kiri dan atas blog.

D E M O

Cara Membuat Rounded Corner Horizontal Scrolling

Kode HTML dan Javascript Rounded Corner Horizontal Scrolling

<div id="plcholddiv" style="position:absolute;left:0px;top:0px;width:200px; height:160px;overflow:hidden;"></div>

<script type="text/javascript">
/* bgs1GR_RChorizontalScrolling.js * bgs1GR * gubhug reyot */
var titlea = new Array();var texta = new Array();var linka = new Array();var trgfrma = new Array();var heightarr = new Array();var cyposarr = new Array();
cyposarr[0]=0;cyposarr[1]=1;cyposarr[2]=2;cyposarr[3]=3;cyposarr[4]=4;cyposarr[5]=5;cyposarr[6]=6;
titlea[0] = "Kode HTMl dan CSS";
texta[0] = "Cara Menggunakan Beberapa Atribut HTML";
linka[0] = "http://gubhugreyot.blogspot.com/";
trgfrma[0] = "_parent";
titlea[1] = "Panduan BlogDETIK";
texta[1] = "Berbagai tutorial dan panduan posting dan penambahan widget di BlogDETIK.";
linka[1] = "http://gubhugreyot.blogdetik.com/";
trgfrma[1] = "_parent";
titlea[2] = "Modifikasi Template";
texta[2] = "Cara untuk menambah dan merubah background Image di Template BloGGeR Baru";
linka[2] = "http://bloggerstuars.blogspot.com/";
trgfrma[2] = "_parent";
titlea[3] = "WordPRESS";
texta[3] = "Mengenal dan cara menggunakan  berbagai tools di halaman posting WordPRESS.";
linka[3] = "http://gubhugreyot.wordpress.com/";
trgfrma[3] = "_parent";
titlea[4] = "Pasang Iklan";
texta[4] = "Dapatkan banyak bonus menarik dan segera daftarkan melalui link ini. 100% keuntungan untuk pemilik blog";
linka[4] = "http://dobol.blogspot.com/";
trgfrma[4] = "_parent";
titlea[5] = "Template BloGGeR";
texta[5] = "Rahasia merubah lebar halaman blog dan kolom sidebar dari berbagai template BlogSPOT";
linka[5] = "http://gubhugreyot.blogspot.com/";
trgfrma[5] = "_parent";
titlea[6] = "Tempe Bongkrek";
texta[6] = "Sedia berbagai tempe gembus yang terbuat dari bahan-bahan pilihan. Dijamin secepatnya akan membuat nyawa melayang.";
linka[6] = "http://tempebongkrek.blogspot.com/";
trgfrma[6] = "_parent";
var mc=7;
uagent = window.navigator.userAgent.toLowerCase();IEB=(uagent.indexOf('msie') != -1)?true:false;var scompat = document.compatMode;var spage=null;var PlcHoldDiv=null;var cvar=0,say=0,tpos=0,enson=0,hidsay=0,hidson=0;var VNAME_timeo=null;var kalan=0;var objst = new Array();stepc=parseInt(20*(6000/1000));dif=0.00;op=1.00;dif=(1.00/stepc);CalcIcWidth=200-8-8-(2*1);CalcSlideWidth=200-(2*1);divtextb ="<div id=d";divtev1=" onmouseover=\"ll(";divtev2=")\" onmouseout =\"lll(";divtev3=")\" onclick=\"butclick(";divtev4=")\"";divtexts = " style=\"position:absolute;visibility:hidden;width:"+CalcIcWidth+"px; COLOR:"+"#F4F3EC"+"; left:0px; top:0px; FONT-FAMILY: "+"verdana,arial,helvetica"+"; FONT-SIZE: "+8+"pt; FONT-STYLE:"+"normal"+"; FONT-WEIGHT:"+"normal"+"; TEXT-DECORATION:"+"none"+"; margin:0px; LINE-HEIGHT:"+12+"pt; text-align:"+"left"+";padding:0px;\">";ns6span= " style=\"position:relative; COLOR:"+"#4ddb68"+"; width:"+CalcIcWidth+"px; FONT-FAMILY:"+"verdana,arial,helvetica"+"; FONT-SIZE:"+9+"pt; FONT-STYLE:"+"normal"+"; FONT-WEIGHT:"+"bold"+"; TEXT-DECORATION:"+"none"+"; LINE-HEIGHT:"+14+"pt;text-align:"+"left"+"; padding:0px;\"";function ll(gnum){if((linka[gnum].length)>2){var objd=null;var objd2=null;objd=document.getElementById('d'+gnum);objd2=document.getElementById('hgd'+gnum);objd.style.color="#fc4801";objd2.style.color="#fd01fa";objd.style.cursor='pointer';objd2.style.cursor='pointer';}window.status=""+linka[gnum];}function lll(gnum2){var objd=null;var objd2=null;objd=document.getElementById('d'+gnum2);objd2=document.getElementById('hgd'+gnum2);objd.style.color="#fbf5ca";objd2.style.color="#4dd6db";window.status="";}function butclick(gnum3){if(linka[gnum3].substring(0,11)=="javascript:"){eval(""+linka[gnum3]);}else{if((linka[gnum3].length)>3){
if((trgfrma[gnum3].indexOf("_parent")>-1)){eval("parent.window.location='"+linka[gnum3]+"'");}else if((trgfrma[gnum3].indexOf("_top")>-1)){eval("top.window.location='"+linka[gnum3]+"'");}else{window.open(''+linka[gnum3],''+trgfrma[gnum3]);}}}}function llll(){kalan=kalan-Math.ceil(kalan/(6000/1000));tpos=0;for(i=hidson;i<=hidsay;i++){objst[i].style.left=""+(8+kalan-CalcSlideWidth)+"px";}for(i=enson;i<=say;i++){objst[i].style.left=""+(8+kalan)+"px";objst[i].style.top=4+tpos+"px";objst[i].style.visibility="visible";tpos=tpos+heightarr[i]+10;}if(kalan<=0){hidsay=say;hidson=enson;say++;if(say>=mc){say=0;}enson=say;VNAME_timeo=setTimeout('lllll()',4000);}else{VNAME_timeo=setTimeout('llll()',30);    }}function FadeBitti(){for(i=hidson;i<=hidsay;i++){objst[i].style.zIndex=2;}for(i=enson;i<=say;i++){objst[i].style.zIndex=3;}hidsay=say;hidson=enson;say++;if(say>=mc){say=0;}enson=say;VNAME_timeo=setTimeout('lllll()',4000);}function llllllllll(){op=op-dif;if(op<(0.00)){op=0.00;}if(IEB==true){spage.filters[0].apply();}for(i=hidson;i<=hidsay;i++){if(IEB==true){objst[i].style.visibility="hidden";}else{objst[i].style.opacity=op;}objst[i].style.zIndex=3;}tpos=0;for(i=enson;i<=say;i++){objst[i].style.top=4+tpos+"px";if(IEB==true){objst[i].style.visibility="visible";}else{objst[i].style.opacity=1.00-op;}tpos=tpos+heightarr[i]+10;objst[i].style.zIndex=2;}if(IEB==true){spage.filters[0].play();}else{if(op>(0.00)){VNAME_timeo=setTimeout('llllllllll()',30);}else{for(i=hidson;i<=hidsay;i++){objst[i].style.zIndex=2;}for(i=enson;i<=say;i++){objst[i].style.zIndex=3;}hidsay=say;hidson=enson;say++;if(say>=mc){say=0;}enson=say;   VNAME_timeo=setTimeout('lllll()',4000);}}}function lllll(){if(6==6){}else if(6==0){}else{if(IEB==true){spage.filters[0].apply();}for(i=hidson;i<=hidsay;i++){objst[i].style.visibility="hidden";}}cvar=0;tpos=0;art=1;topla=0;do{if(art==1){topla=0;}else{topla=10;}cvar=cvar+heightarr[say]+topla;if(cvar<(160-4-4-1-1)){say++;if(say>mc){art=1;break;}}else{if(art==1){say++;if(say>mc){art=1;break;}}}art++;}while(cvar<(160-4-4-1-1));say--;if(6==6){        kalan=CalcSlideWidth;        setTimeout('llll()',30);}else if(6==0){op=1.00;setTimeout('llllllllll()',50);}else{for(i=enson;i<=say;i++){objst[i].style.left=8+"px";objst[i].style.top=4+tpos+"px";objst[i].style.visibility="visible";tpos=tpos+heightarr[i]+10;}if(IEB==true){spage.filters[0].play();}else{hidsay=say;hidson=enson;say++;if(say>=mc){say=0;}enson=say;VNAME_timeo=setTimeout('lllll()',4000);}}}function lllllllll2(){i=0;for(i=0;i<mc;i++){objst[i]=document.getElementById('d'+i);heightarr[i]=objst[i].offsetHeight;objst[i].style.top=160+200+"px";if(6!=6){objst[i].style.left=8+"px";objst[i].style.visibility="visible";}}if((IEB==true)&&(6!=6)){spage.onfilterchange=FadeBitti;}lllll();}function lllllllll(){if(IEB==true){spage=document.getElementById("spageie");}else{spage=document.getElementById("spagens");}if(!spage){setTimeout('lllllllll()',100);return;}i=0;innertxt="";for(i=0;i<mc;i++){innertxt=innertxt+""+divtextb+""+i+""+divtev1+i+divtev2+i+divtev3+i+divtev4+divtexts+"<div id=\"hgd"+i+"\""+ns6span+">"+titlea[i]+"<br></div>"+texta[i]+"</div>";}spage.innerHTML=""+innertxt;spage.style.left="0px";spage.style.top="0px";setTimeout('lllllllll2()',100);}function BuildHtmlCont(){PlcHoldDiv=document.getElementById("plcholddiv");if(!PlcHoldDiv){setTimeout('BuildHtmlCont()',100);return;}var intext="";var filterstyle="";if(IEB==true){filterstyle="";}intext="<div id=\"disspageie\" style=\"border-radius:15px;-moz-border-radius:15px;position:absolute;width:"+200+"px; height:"+160+"px;left:0px; top:0px;margin:0px;overflow:hidden;padding:0px;border-style:"+"solid"+"; border-width:"+1+"px; border-color:"+"#000000"+";background-image: url(http://i48.tinypic.com/30j4bqc.gif); background-repeat :repeat;background-position:"+"0"+"px "+"0"+"px;\"><div id=\"spageie\" style=\"border-radius:15px;-moz-border-radius:15px;position:absolute;width:"+200+"px; height:"+160+"px; left:0px; top:0px; border-style:solid; border-width:0px; border-color:"+"#888888"+";"+filterstyle+"overflow:hidden;clip:rect("+"4 200 155 0"+");\"></div></div>";if(IEB!=true){intext=intext+"<div id=\"spagensbrd\" style=\"border-radius:15px;-moz-border-radius:15px;position:absolute; width:"+(200-2*1)+"px; height:"+(160-2*1)+"px; left:0px; top:0px; border-style:"+"solid"+"; border-width:"+1+"px; border-color:"+"#888888"+";overflow:hidden;\"><div id=\"spagens\" style=\"border-radius:15px;-moz-border-radius:15px;position:absolute; width:"+(200-2*1)+"px; height:"+(160-2*1)+"px; left:0; top:0; border-width:0px; overflow:hidden;clip:rect("+"4 200 155 0"+");\"></div></div>";}PlcHoldDiv.innerHTML=""+intext;setTimeout('lllllllll()',100);}setTimeout('BuildHtmlCont()',100);
</script>

Langkah Pembuatan Rounded Corner Horizontal Scrolling

1. Login to BloGGeR (Login ke BloGGeR) : Tulis User Name (Nama Pengguna) atau Email Address serta tuliskan juga Password (Sandi).
2. Dasboard (Dasbor) : Dasbor merupakan halaman pertama yang dijumpai setelah login. KLIK link Layout (Tata Letak) atau Design (Rancangan).
3. Layout/Tata Letak (Design/Rancangan) : Silahkan KLIK Add Gadget (Tambah Gadget) Sampeyan boleh pilih secara sembarang Add Gadget/Tambah Gadget yang manapun tidak menjadi masalah .
4. Add a Gadget (Tambahkan Sebuah Gadget) KLIK HTML/Javascript (pada teks atau gambarnya).
5. Copy-Paste : Copy Kode HTML dan Javascript, kemudian Pastekan di box yang tersedia.
6. SAVE/Simpan : KLIK SAVE/Simpan, kemudian lanjutkan dengan buka blog/open your blog untuk melihat hasilnya.

Keterangan/Catatan :

1. Ganti Judul, Teks dan Link yang terdapat di javascript dan sesuaikan dengan yang ingin sampeyan pasang di Horizontal Scrolling.
   
   Contoh yang harus di ganti :
   
   1. Judul : Kode HTMl dan CSS
   2. Teks : Cara Menggunakan Beberapa Atribut HTML
   3. Link : http://gubhugreyot.blogspot.com/
   
   Ganti dari semua yang ada di javascript.
2. Letak Rounded Corner Horizontal Scrolling akan berada di pojok kiri atas halaman blog. Untuk merubah letaknya, silahkan rubah pada kode HTML-nya:
   
   - left: 0px;
   - top: 0px;
   
   Silahkan boleh sampeyan rubah sesuai tempat dimana scrolling mau diletakkan. semakin besar nilai left, maka akan semakin ke kanan, semakin besar top maka akan semakin ke bawah. Bisa masukkan sembarang angka terlebih dahulu, baru kemudian perkirakan dimana posisi yang tepat.
   
   Contoh :
   
   left:600px;
   top:400px;

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «