Salah Bantal

Teknik Canggih SEO Terbaru, Tutorial Blogging, Tugas Softskill Gunadarma

Cara Membuat Slide Show View Image/Foto



Cara Membuat Slide Show View Image/Foto

Memasang widget ini sangat mudah dan bisa di praktikan langsung bahkan oleh blogger pemula.
Sebelum memulai yuk kita bahas apa sih slide show image ini ? widget ini adalah sebuah widget yang menampilkan image secara random . akan berganti-ganti tergantung jumlah foto yang kita masukan ke dalamnya.
memasang widget


Widget ini  memiliki tampilan yang berbeda dengan dari widget slideshow sebelumnya sebab telah sedikit di modifikasi oleh kawan kita yang bernama kang salman modifikasi khususnya efek JQuery accordionnya.

salahbantal yakin widget ini lebih mudah pengunaannya dari pada yang sebelumnya.

widget
Versi Baru, 22 Agustus 2010

Fitur Baru :
- Tidak membebani loading blog, dan tampil lebih 2 kali lebih cepat dari versi sebelumnya.
- Slide show yang di tampilkan lebih ciamik dan memberi warna baru pada blog anda
- Deskripsi text berada di atas foto.
- Durasi Tayang atau slide show foto. kini dapat anda setting sendiri sesuai dengan kebutuhan, Tips terkait ada di akhir artikel ini. 
Langsung Aja kita simak Cara Membuat Slide show ini.

Langkah 1
1.  Login ke Blogger
2.  Pilih Tata Letak / Rancangan
3.  Pilih Tab Edit HTML
4.  Centang "
5.  Silakan Cari Kode ]]></b:skin> dan Taruh Kode Berikut Di atas kode ]]></b:skin>
/* Image Slideshow */
#s3slider{margin-bottom:5px; width:100%; /* important to be same as image width */height:250px; /* important to be same as image height */position:relative; /* important */word-wrap:break-word; /* fix for long text breaking sidebar float in IE */overflow:hidden; /* fix for long non-text content breaking IE sidebar float */}
#s3sliderContent{width:100%; /* important to be same as image width or wider */position:absolute; /* important */top:0; /* important */margin:0px; padding-left:0px; /* important */}
.s3sliderImage{float:left; /* important */position:relative; /* important */display:none; /* important */}
.s3sliderImage span{position:absolute; /* important */left:0; font:normal 11px 'Arial',Helvetica,sans-serif; padding:10px; width:100%; text-align:center; padding-left:0px; background-color:#000; filter:alpha(opacity=70); /* here you can set the opacity of box with text */-moz-opacity:0.7; /* here you can set the opacity of box with text */-khtml-opacity:0.7; /* here you can set the opacity of box with text */opacity:0.7; /* here you can set the opacity of box with text */color:#fff; display:none; /* important */top:0; /*if you puttop:0; ->the box with text will be shown at the top of the imageif you putbottom:0; ->the box with text will be shown at the bottom of the image*/}

6.  Kemudian Setelah itu coba cari kode </head> dan Taruh Kode berikut, di atas kode</head>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var cssdropdown={disappeardelay:250,dropdownindicator:'<img src="http://img40.imageshack.us/img40/6613/arrowto.gif" border="0" />',enablereveal:[true,8],enableiframeshim:1,dropmenuobj:null,asscmenuitem:null,domsupport:document.all||document.getElementById,standardbody:null,iframeshimadded:false,revealtimers:{},getposOffset:function(d,c){var b=(c=="left")?d.offsetLeft:d.offsetTop;var a=d.offsetParent;while(a!=null){b=(c=="left")?b+a.offsetLeft:b+a.offsetTop;a=a.offsetParent}return b},css:function(b,a,c){var d=new RegExp("(^|\\s+)"+a+"($|\\s+)","ig");if(c=="check"){return d.test(b.className)}else{if(c=="remove"){b.className=b.className.replace(d,"")}else{if(c=="add"&&!d.test(b.className)){b.className+=" "+a}}}},showmenu:function(b,a){if(this.enablereveal[0]){if(!b._trueheight||b._trueheight<10){b._trueheight=b.offsetHeight}clearTimeout(this.revealtimers[b.id]);b.style.height=b._curheight=0;b.style.overflow="hidden";b.style.visibility="visible";this.revealtimers[b.id]=setInterval(function(){cssdropdown.revealmenu(b)},10)}else{b.style.visibility="visible"}this.css(this.asscmenuitem,"selected","add")},revealmenu:function(f,d){var e=f._curheight,b=f._trueheight,a=this.enablereveal[1];if(e<b){var c=Math.min(e,b);f.style.height=c+"px";f._curheight=c+Math.round((b-c)/a)+1}else{f.style.height="auto";f.style.overflow="hidden";clearInterval(this.revealtimers[f.id])}},clearbrowseredge:function(f,d){var c=0;if(d=="rightedge"){var e=document.all&&!window.opera?this.standardbody.scrollLeft+this.standardbody.clientWidth-15:window.pageXOffset+window.innerWidth-15;var b=this.dropmenuobj.offsetWidth;if(e-this.dropmenuobj.x<b){c=b-f.offsetWidth}}else{var a=document.all&&!window.opera?this.standardbody.scrollTop:window.pageYOffset;var e=document.all&&!window.opera?this.standardbody.scrollTop+this.standardbody.clientHeight-15:window.pageYOffset+window.innerHeight-18;var g=this.dropmenuobj._trueheight;if(e-this.dropmenuobj.y<g){c=g+f.offsetHeight;if((this.dropmenuobj.y-a)<g){c=this.dropmenuobj.y+f.offsetHeight-a}}}return c},dropit:function(c,b,a){if(this.dropmenuobj!=null){this.hidemenu()}this.clearhidemenu();this.dropmenuobj=document.getElementById(a);this.asscmenuitem=c;this.showmenu(this.dropmenuobj,b);this.dropmenuobj.x=this.getposOffset(c,"left");this.dropmenuobj.y=this.getposOffset(c,"top");this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(c,"rightedge")+"px";this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(c,"bottomedge")+c.offsetHeight+1+"px";this.positionshim()},positionshim:function(){if(this.iframeshimadded){if(this.dropmenuobj.style.visibility=="visible"){this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px";this.shimobject.style.height=this.dropmenuobj._trueheight+"px";this.shimobject.style.left=parseInt(this.dropmenuobj.style.left)+"px";this.shimobject.style.top=parseInt(this.dropmenuobj.style.top)+"px";this.shimobject.style.display="block"}}},hideshim:function(){if(this.iframeshimadded){this.shimobject.style.display="none"}},isContained:function(a,b){var b=window.event||b;var d=b.relatedTarget||((b.type=="mouseover")?b.fromElement:b.toElement);while(d&&d!=a){try{d=d.parentNode}catch(b){d=a}}if(d==a){return true}else{return false}},dynamichide:function(a,b){if(!this.isContained(a,b)){this.delayhidemenu()}},delayhidemenu:function(){this.delayhide=setTimeout("cssdropdown.hidemenu()",this.disappeardelay)},hidemenu:function(){this.css(this.asscmenuitem,"selected","remove");this.dropmenuobj.style.visibility="hidden";this.dropmenuobj.style.left=this.dropmenuobj.style.top="-1000px";this.hideshim()},clearhidemenu:function(){if(this.delayhide!="undefined"){clearTimeout(this.delayhide)}},addEvent:function(b,c,a){if(b.addEventListener){b.addEventListener(a,c,false)}else{if(b.attachEvent){b.attachEvent("on"+a,function(){return c.call(b,window.event)})}}},startchrome:function(){if(!this.domsupport){return}this.standardbody=(document.compatMode=="CSS1Compat")?document.documentElement:document.body;for(var d=0;d<arguments.length;d++){var g=document.getElementById(arguments[d]).getElementsByTagName("a");for(var b=0;b<g.length;b++){if(g[b].getAttribute("rel")){var a=g[b].getAttribute("rel");var c=document.getElementById(a);this.addEvent(c,function(){cssdropdown.clearhidemenu()},"mouseover");this.addEvent(c,function(h){cssdropdown.dynamichide(this,h)},"mouseout");this.addEvent(c,function(){cssdropdown.delayhidemenu()},"click");try{g[b].innerHTML=g[b].innerHTML+" "+this.dropdownindicator}catch(f){}this.addEvent(g[b],function(i){if(!cssdropdown.isContained(this,i)){var h=window.event||i;cssdropdown.dropit(this,h,this.getAttribute("rel"))}},"mouseover");this.addEvent(g[b],function(h){cssdropdown.dynamichide(this,h)},"mouseout");this.addEvent(g[b],function(){cssdropdown.delayhidemenu()},"click")}}}if(this.enableiframeshim&&document.all&&!window.XDomainRequest&&!this.iframeshimadded){document.write('<IFRAME id="iframeshim" src="about:blank" frameBorder="0" scrolling="no" style="left:0; top:0; position:absolute; display:none;z-index:90; background: transparent;"></IFRAME>');this.shimobject=document.getElementById("iframeshim");this.shimobject.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";this.iframeshimadded=true}}};
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.s3Slider=function(h){var e=this;var l=(h.timeOut!=undefined)?h.timeOut:4000;var g=null;var d=null;var k=true;var f=false;var i=a("#"+e[0].id+"Content ."+e[0].id+"Image");var b=a("#"+e[0].id+"Content ."+e[0].id+"Image span");i.each(function(m){a(i[m]).mouseover(function(){f=true});a(i[m]).mouseout(function(){f=false;c(true)})});var c=function(m){var n=(m)?(l/2):l;n=(k)?10:n;if(i.length>0){d=setTimeout(j,n)}else{console.log("Poof..")}};var j=function(){g=(g!=null)?g:i[(i.length-1)];var m=jQuery.inArray(g,i)+1;m=(m==i.length)?0:(m-1);var n=a(e).width()*m;if(k==true){if(!f){a(i[m]).fadeIn((l/6),function(){if(a(b[m]).css("bottom")==0){a(b[m]).slideUp((l/6),function(){k=false;g=i[m];if(!f){c(false)}})}else{a(b[m]).slideDown((l/6),function(){k=false;g=i[m];if(!f){c(false)}})}})}}else{if(!f){if(a(b[m]).css("bottom")==0){a(b[m]).slideDown((l/6),function(){a(i[m]).fadeOut((l/6),function(){k=true;g=i[(m+1)];if(!f){c(false)}})})}else{a(b[m]).slideUp((l/6),function(){a(i[m]).fadeOut((l/6),function(){k=true;g=i[(m+1)];if(!f){c(false)}})})}}}};j()}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
   $(&#39;#s3slider&#39;).s3Slider({
      timeOut: 3000
   });
});
</script> 
7.  Save Template


Langkah 2
Untuk Bisa Menikmati widget ini silakan perhatikan instruksi di bawah ini  :

1.  Login ke Blogger
2.  Pilih Tata Letak Atau Rancangan
3.  Pilih Tab Edit HTML
4.  Jangan Lupa Untuk buat Backupa data anda
5.  Centang expand template widget
6.  Cari Kode ini <div id='main-wrapper'>
      Tekan Ctrl+F untuk mempermudahnya 
 7.  Copy kode di bawah ini dan Paste tepat di bawah kode <div id='main-wrapper'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div id='s3slider'>

<ul id='s3sliderContent'>

<li class='s3sliderImage'>

<a href='http://www.kucoba.com/2010/07/10-tanda-cewek-suka-ma-kita.html'>

<img height='245'
src='http://3.bp.blogspot.com/_Z8F7gBEfQSU/S_3BHzSwjQI/AAAAAAAAA4Y/ckLzjBVMJmw/s1600/1.jpg'
width='450'/>

<span>
Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image akhiri dengan titik.</span></a></li>

<li class='s3sliderImage'>

<a href='#'>

<img height='245'
src='#'
width='450'/>

<span>
Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

<li class='s3sliderImage'>

<a href='
#'>

<img height='245'
src='
#'
width='450'/>

<span>
Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

<li class='s3sliderImage'>

<a href='
#'>

<img height='245'
src='
#'
width='450'/>

<span>
Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

<li class='s3sliderImage'>

<a href='
#'>

<img height='245'
src='
#'
width='450'/>

<span>
Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

<div class='clear s3sliderImage'/>

</ul>

</div>

</b:if>
 

Keterangan : 
  1. Ganti warna merah dengan alamat link artikel kamu
  2. Ganti warna hijau dengan link gambar / foto
  3. Arti kode width="468" height="245" adalah ukuran dari widget slideshow view, lebar="468" tinggi="245" (atur sesuai ukuran widget yang kamu inginkan)
  4. <span>Isi dengan kalimat yang ingin di tampilkan di atas foto.</span>
  5. Jumlah Slide Show bisa anda perbanyak dengan menambahkan kode <li><a href="#"><img height='245' src="#" width='468'/> <span>isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image jangan lupa akhiri dengan titil atau tanda kalimat lainnya .</span></a></li> di atas kode </ul>


Lihat Contoh yang kang salman buat di bawah ini :
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage'>
<a href='http://www.kucoba.com/2010/07/10-tanda-cewek-suka-ma-kita.html'>
<img height='245' src='http://3.bp.blogspot.com/_Z8F7gBEfQSU/S_3BHzSwjQI/AAAAAAAAA4Y/ckLzjBVMJmw/s1600/1.jpg' width='450'/>
<span>Bagaimanakah tanda perempuan menyukai kita? hal ini selalu jadi pertanyaan setiap cowok yang ntah itu dia ke GR-an atau dia yang benar-benar mengharapkan cinta dan jawaban dari si Doi, inilah 10 tanda khusus tanda cewek ada suka ma kita</span></a></li>
<li class='s3sliderImage'>
<a href='http://www.kucoba.com/2010/07/8-pedomoan-merayu-istri.html'>
<img height='245' src='http://2.bp.blogspot.com/_Z8F7gBEfQSU/S_3BIO7aq-I/AAAAAAAAA4g/JzuVEZNKsFk/s1600/2.jpg' width='450'/>
<span>8 pedoman merayu istri. Mendidik istri adalah tugas seorang suami namun terkadang kita sendiri tidak tau bagaimana cara mendidik istri dengan merayu atau menggodanya, berikut ini anjuran menurut islam cara mendidik istri.</span></a></li>
<li class='s3sliderImage'>
<a href='http://www.kucoba.com/2009/12/5-tips-dan-rahasia-mempercepat-internet.html'>
<img height='245' src='http://1.bp.blogspot.com/_Z8F7gBEfQSU/S_3BITM49PI/AAAAAAAAA4o/kbvZMUdK1zk/s1600/3.jpg' width='450'/>
<span>5 Tips Rahasia Mempercepat Internet. Anda merasa kecepatan internet lambat? temukan penyebabnya disini dan cari tau bagaimana solusinya.</span></a></li>
<li class='s3sliderImage'>
<a href='http://www.kucoba.com/2010/07/membuat-slideshow-berita-foto-seperti.html'>
<img height='245' src='http://3.bp.blogspot.com/_Z8F7gBEfQSU/S_3BIQlG3sI/AAAAAAAAA4w/ovJjGjaCUCE/s1600/4.jpg' width='450'/>
<span>http://www.kucoba.com adalah sebuah blog yang didirikan untuk mendukung program pengembangan sumber daya perblogkan melalui Blogger/Blogspot.</span></a></li>
<li class='s3sliderImage'>
<a href='http://www.kucoba.com/2010/06/inilah-cara-meningkatkan-jumlah.html'>
<img height='245' src='http://2.bp.blogspot.com/_j4kWN5RD0kU/TEJLpcR4RPI/AAAAAAAAA3M/UAmrYeGzRao/s320/graph_summary_barchart.php+juni.png' width='450'/>
<span>Panduan mudah meningkatkan jumlah pengunjung dan dangan cara Cepat, mudah, dan gratis.</span></a></li>
<div class='clear s3sliderImage'/>
</ul>
</div>
</b:if>

Baca Ini !!
Buat Mengubah Ukuran dan Lebar Slide Show Agar Fix Sesuai ukuran yang anda inginkan :
Sesuaikan width dan heigth dengan ukuran widget yang di ingin kan sesuai dengan ruang di sidebar blog atau posisi
lainnya yang tersedia. untuk informasi lebih lanjut silakan lihat Keterangan di nomor tiga di atas. Dan untuk cara mengatur atau setting waktu slide show silakan anda cara kode timeOut: 3000
Ubah angka 3000 itu sesuai kemauan anda .

Semoga Bermanfaat :)

[Read More...]


Membuat Selalu Iklan Melayang Tanpa Tombol Close



Cara membuat iklan melayang di pojok kanan tanpa tombol close.

Berikut Kodenya :


<div style="text-align: center; position: fixed; top: 0px; right: 0px;"><center>Paste Widget Iklannya disini</center></div>

Cara Pasangnya :

  1. Login ke Blogger
  2. Pilih Rancangan
  3. Tambah Widget/add Widget
  4. Pilih HTML
  5. Copy kode tadi di atas.
  6. Masukan kode iklan dan paste di mengantikan huruf warna merah di atas
  7. Save. dan lihat hasilnya
Semoga Bermanfaat :)
[Read More...]


Membuat Menu Log-in DiBlog



Sobat SalahBantal apa kabar ? 
hari ini SalahBantal mau buat artikel bagaimana cara membuat login menu di blog.

Inilah prosesnya :
1.  Login terlebih dahulu ke Blogger
2.  Pilih Edit Tamplate 
3.  Setelah masuk pilih Tambah Widget
4.  Pilih HTML/java script
5.  Silakan copy paste kode di bawah ini


Enter your username and password to enter your Blogger Dasboard <br /><br /><form action="https://www.google.com/accounts/ServiceLoginBoxAuth" method="post" onsubmit="onlogin()"><input value="http://www.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fwww.blogger.com%2F" name="continue" type="hidden" /><input value="blogger" name="service" type="hidden" /><input value="8" name="nui" type="hidden" /><input value="8" name="naui" type="hidden" /><input value="2" name="fpui" type="hidden" /><input value="3" name="uilel" type="hidden" /><input value="true" name="skipvpage" type="hidden" /><input value="false" name="rm" type="hidden" /><input value="true" name="alwf" type="hidden" /><input value="http://www.blogger.com/login.g" name="roeu" type="hidden" /><input value="0" name="alinsu" type="hidden" /><input value="WbQ8QiJfUvA" name="GA3T" type="hidden" /><div><label for="Email"> Username: <br /><input id="Email" tabindex="1" value="" name="Email" size="20" type="text" /></label></div><div><label for="Passwd"> Password: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Forgot your password?">?</a>) <br /></label><input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password" /></div><br /><input id="signin-btn-ns" tabindex="0" value="Sign in" class="ubtn ubtn-block" name="submit" type="submit" /></form><span style="amp;percnt;">Widget by <a href="http://salahbantal.blogspot.com">salah bantal </a></span>

6.  Setelah itu Pastekan di HTML/java sript tadi
7.  Save dan lihat hasilnya.

Semoga Bermanfaat :)
[Read More...]


Membuat Menu Vertikal Melayang Dipinggir





trik bloggerseperti yang kita tau berbagai macam cara dilakukan para blogger untuk menghemat ruang di blognya salah satunya dengan membuat buku tamu melayang, kotak blogrol, sampai menu navigasi yang melayang. Nah pada kesempatan kali ini salahbantal akan membahas bagaimana cara membuat menu navigasi yang tersembunyi/melayang. ya tentunya ini untuk menghemat ruang blog kita. Lihat Demonya di Kiri blog ini

Bagi sobat yang ingin menampilkan menu melayang ikuti panduan dibawah ini!



1.  Masuk ke Blogger dengan ID sobat.
trik blogger2.  Pilih Design (Rancangn) ---> Edit HTML.
3.  Back up template dulu, untuk antisipasi kalau gagal.
4.  Cari kode ini : </head> pada template anda.
5.  Copy Seluruh script dibawah ini, kemudian paste tepat bawah </head>
<script src='http://elmubarok.googlecode.com/files/floating1.js' type='text/javascript'/>
<script>
YOffset=150;
XOffset=0;
staticYOffset=30;
slideSpeed=20
waitTime=100;
menuBGColor=&quot;#cc0000&quot;;
menuIsStatic=&quot;yes&quot;;
menuWidth=120;
menuCols=3;
hdrFontFamily=&quot;verdana&quot;;
hdrFontSize=&quot;2&quot;;
hdrFontColor=&quot;black&quot;;
hdrBGColor=&quot;#cc0000&quot;;
hdrAlign=&quot;left&quot;;
hdrVAlign=&quot;center&quot;;
hdrHeight=&quot;15&quot;;
linkFontFamily=&quot;Verdana&quot;;
linkFontSize=&quot;2&quot;;
linkBGColor=&quot;white&quot;;
linkOverBGColor=&quot;#cc0000&quot;;
linkTarget=&quot;_top&quot;;
linkAlign=&quot;Left&quot;;
barBGColor=&quot;#cc0000&quot;;
barFontFamily=&quot;Verdana&quot;;
barFontSize=&quot;2&quot;;
barFontColor=&quot;white&quot;;
barVAlign=&quot;center&quot;;
barWidth=20; // no quotes!!
barText=&quot;MENU&quot;;
// ----- Mulai Edit Menu
ssmItems[0]=[&quot;OPTION :&quot;] //Header Menu
ssmItems[1]=[&quot; Home&quot;, &quot;/&quot;, &quot;&quot;]
ssmItems[2]=[&quot; About Me&quot;, &quot;http://www.kucoba.com/2010/03/profil.html&quot;,&quot;&quot;]
ssmItems[3]=[&quot; Tutorial Blog&quot;, &quot;http://www.kucoba.com/2009/09/tutorial-mudah-blog.html&quot;,&quot;&quot;]
ssmItems[4]=[&quot; Tips Blog&quot;, &quot;http://www.kucoba.com/2010/07/kumpulan-tips-blogspot.html&quot;,&quot;&quot;]
ssmItems[5]=[&quot; Buku Tamu&quot;, &quot;http:/www.kucoba.com/2009/10/buku-tamu.html&quot;, &quot;_new&quot;]
ssmItems[6]=[&quot; Lowongan Kerja&quot;, &quot;http://www.kucoba.com/2010/11/kumpulan-lowongan-kerja-terbaru-di.html&quot;, &quot;&quot;]
ssmItems[7]=[&quot; Dinamika Cinta&quot;, &quot;http://www.kucoba.com/search/label/Dinamika Cinta&quot;, &quot;&quot;]
buildMenu();
//----- Selesai Edit Menu
</script>

Keterangan:
  • Silahkan rubah WELCOME dengan tulisan apa saja yang cocok dengan kehendak sobat
  • kode yang berwarna biru wajib sobat ganti dengan alamat-2 punya sobat. 
  • MY MENU boleh kita ganti dengan MENUKU, DAFTAR MENU dll.
  • Tulisan yang berwaran biru, silakan ubah dengan kode warna yang kalian suka
  • Masih banyak lagi yang bisa sobat utak-atik.
  • Terakhir simpan. semoga berhasil
Oke semoga tips ini bermanfaat bagi anda, selamat menikamati menu melayang blogger
Semoga Bermanfaat :)
[Read More...]


Membuat Rondom Post di Blogger




Tips Blogger
Widget ini berguna untuk menampilkan beberapa artikel blog anda secara acak sehinga artikel yang sudah dari tahun baheula pun bisa muncul kembali sehingga mempunyai peluang untuk di baca oleh pengunjung blog Anda.

Agar bisa menampilkan random post di blogger  lakukan adalah :
1. Login ke Dashboard blogger
2. Kemudian klik Design / Rancangan / Tata Letak.
3. Klik Add a Gatget, kemudian pilih Gadget HTML/JavaScript.
4. Masukkan script random post berikut di dalam Gadget HTML/JavaScript tersebut
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=10;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&
callback=randomposts" type="text/javascript"></script>
Setelah itu simpan dan lihat hasilnya .
Semoga Bermanfaat :)
[Read More...]


Widget Kurs, Nilai Tukar Dan Valas



Tips dan Trik Blogger

Pasang Widget Kurs, Nilai Tukar dan Valas. Jika anda bergelut di bidang perbisnisan, mungkin ini adalah satu alat paling penting buat anda. Jangan bilang anda pembisnis online, Kalau tidak memasang widget nilai tukar mata uang asing ini. salahbantal yakin hal ini akan menjadi sebuah kreadit point bagi mitra anda. ini contoh widget yang akan kita buat :

KursJualBeli
USD9120.008870.00
SGD7115.306892.30
HKD1174.151140.05
EUR12196.1511835.15
GBP14153.0513712.05
JPY112.71108.92
Dan ini kodenya :



Cara pasang di bloggspot klik tombol di bawah :
Oke semoga bermanfaat :)
[Read More...]


Widget Total Comment dan Total Post



Widget Total Comment dan Total Post adalah salah satu yang banyak dipasang pada blog .
Dengan memasang widget ini maka akan dapat terlihat sudah berapa total jumlah  komentar pada blog anda. Sebenarnya ini hanyalah indikator saja sebagai informasi bagi anda dan pengunjung blog anda. Penampilannya akan nampak seperti ini atau di kiri atas sidebar blog ini :

Tips Blogger

Cara memasang adalah sebagai berikut :
 1.   Login pada Blogger
 2.   Klik Layout/Tataletak pada Dashboard.
 3.   Klik Add a Gadget/Tambah Widget.
 4.   Pilih Add HTML/Javascript
 5.   Copy dan paste kode dibawah ini.
<script src="http://salahbantal.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script><script style="text/javascript">function numberOfPosts(json) {document.write('Total Posting: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');}</script><script src="http://salahbantal.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script><script src="http://salahbantal.blogspot.com/feeds/comments/default?orderby=published&alt=json-in-script&callback=rp"></script><script style="text/javascript">function numberOfComments(json) {document.write('Total Komentar: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');}</script><script src="http://salahbantal.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script><br /><a href="http://www.kucoba.com/2010/06/pasang-widget-total-comment-dan-total.html" style="font-size:10px;font-family:verdana;color:#000;margin:2px 4px;margin-top:0;">Buat Ini</a><script type="text/javascript" src="http://www.salahbantal.blogspot.com/2010/06/pasang-widget-total-comment-dan-total.html" /></script>
NB : Gantilah teks yang berwarna merah kucoba dengan nama blog kamu!

6.  Selanjutnya Save.
[Read More...]


Pasang Widget Mp3 Ringan Di Blog



Pasang widget mp3 ringan di blog .
Salah satu cara mempercantik blog adalah dengan cara memasang musik di blog, namun terkadang saat widget mp3 player sudah di pasang musiknya putus-putus atau lama keluarnya dan bisa juga menyebabkan loading blog terasa berat.
Hal itu sering kali membuat kita kesal, dan mungkin membuat pengunjung kita kecewa. 
Nah bagi anda yang ingin memasang mp3 player ringan di blog
Tips Blogger


Google menyediakan fasilitas gadget yang bisa kita pasang di blog kita, teramasuk MP3 player . tinggal copy kodenya, lalu paste ke tempat yang mau kita pasang, bisa dillihat di sini dan pilih MP3 player yang diinginkan, gambar seperti di atas bisa diperoleh di sini Kalau kita punya lagu sendiri yang tidak ada di playlist mereka kita
bisa upload lagu kita ke situs-situs yang menyediakan hostingan MP3, misalnya filefreak, mp3upload, dll. Masukkan kode lagu yang sudah di-Upload dan klik Get the Code Pasang di tempat yang kita inginkan. Salah satu situs yang lebih memudahkan kita lagi untuk memasang MP3 di blog kita adalah di SCM Music Player , disitu memudahkan kita untuk memasang lebih dari 1 lagu, dan tersedia beberapa pilihan skin, penempatan dan apakah mau dimainkan autoplay atau tidak.

Sedangkan untuk saya dulu menggunakan kode :


<TABLE BORDER="3" CELLSPACING="0" CELLPADDING="0"
BORDERCOLOR="#99CCFF" BORDERCOLORLIGHT="#DBEDFF"
BORDERCOLORDARK="#5B7997"><tr><td>
<object id="MediaPlayer1" width="300" height="45"
classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902"
standby="Loading Microsoft Windows Media Player..."
type="application/x-oleobject">
<param name="FileName" value="your-file.mid">
<param name="animationatStart" value="false">
<param name="transparentatStart" value="true">
<param name="autoStart" value="true">
<param name="showControls" value="true">
<param name="Volume" value="-100">
<embed type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
Name="MediaPlayer" src="your-file.mid" AutoStart="true"
ShowStatusBar="1" volume="-1" HEIGHT="50"
WIDTH="300"></embed></object>
</td></tr></table>

Jika MP3 di blog berjalan autoplay.., jadi saat ada pengunjung masuk maka akan otomatis main.

Untuk memilih tidak menggunkakan autoplay, parameternya bisa dirubah dari
<param name="autoStart" value="true">

menjadi :
<param name="autoStart" value="false">
Untuk "yourfile.mid" diganti dengan URL dari MP3 yang sudah diupload,
contohnya : "www.salahbantal.blogspot.com/judullagu.mp3"

Ganti tulisan www.salahbantal.blogspot.com dengan nama blog kamu .


Tips: Kalau mau mp3 yang ringan dan cepat, saya sarankan di kompres dulu lagunya sebelum di upload,
atau pilihlah lagu yang beratnya kecil. max 2.5 mb lah..

 Ok, selamat memasang mp3 player di blog anda, semoga bermanfaat.
[Read More...]


Perbedaan Antara PageRank dan Alexa Renk



Jika ada yang bertanya mana lebih baik Page Rank (PR) atau Alexa Rank (AR)?

Saya akan menjawabnya dengan jawaban Alexa Rank lebih baik... kenapa demikian? berikut perbandingannya :


1. Cara Mereka Berpikir

Google

Menggunakan suatu rumus algoritma khusus untuk menghitung page ranknya, dan yang paling utama dihitung oleh Google adalah berapa banyak BACKLINK yang dimiliki situs tersebut, semakin banyak backlink maka semakin bagus page ranknya.

Alexa

Menggunakan rumus yang sederhana, yaitu semakin banyak website tersebut dikunjungi (baik menggunakan Alexa Toolbar dsb ataupun tidak) maka peringkatnya semakin bagus.

Berbeda dengan Alexa, karena logikanya mendukung logika manusia, yaitu situs yang terkenal adalah situs yang dikunjungi banyak orang, dan semakin banyak yang mengunjungi maka ranking website tersebut semakin bagus.


2. Hacking

Google

Keluar masuk forum SEO, begitu banyak cara untuk "menjahili" page rank, yap... dahulu pun (atau mungkin sekarang masih ada) ada yang melakukan manipulasi page rank, salah satu caranya adalah dengan redirect 301, 302 dan script-script lainnya, sehingga situs yang mempunyai page rank 0 bisa melompat hingga page rank 10 dengan memanfaatkan script ini. Dengan adanya hal ini maka banyak situs-situs yang memberikan servicenya untuk memeriksa keaslian suatu page rank, Anda bisa mengunjungi alamat di :

http://www.build-reciprocal-links.com/fake-rank-checker  

Silakan gunakan alamat di atas untuk mengecek keaslian page rank suatu situs.

Untuk menaikkan ranking Google juga ada cara cepatnya, yaitu submit ke directories gratis atau berbayar yang ada di dunia ini, untuk daftar directoriesnya bisa cari di forum, Google or bisa juga maen-maen ke tempat nongkrong ane yang baru di httpseo.com.

Alexa

Banyak orang yang mengklaim dapat mencurangi Alexa, di antaranya dengan widget, Alexa toolbar, redirect, merefresh halaman dsb, namun secara FAKTA hal ini tidak terbukti benar.

Contoh :
  • Dengan menggunakan Alexa toolbar (Internet Explorer) atau Alexa Sparky (Mozilla Firefox) lalu merefresh halaman hingga ratuan kali maka rank alexa akan membaik.

Cara di atas masih sangat meragukan karena pernah ada netter luar negeri melakukan percobaan dengan membuat 1 website dengan sedikit halaman, website tersebut tidak diberitahukan ke public umum alias tidak ada yang datang ke websitenya selain ia sendiri. Lalu ia merefresh halaman website tersebut and tidak lupa juga menggunakan Alexa Toolbar, bahkan karena rankingnya tidak membaik secara drastis ia mengundang beberapa orang untuk merefresh halaman tersebut sebanyak-banyaknya, namun kenyataannya? ranking alexa nyaris tidak membaik seandainya membaik juga tidak banyak.


Mungkin ini ada benarnya karena dengan melakukan redirect Alexa, maka juga melakukan boot ke Alexa dan mempercepat ranking, namun cara ini masih pro dan kontra.. 


Bagaimana dengan orang-orang yang katanya berhasil dengan cara ini?

Yap mungkin saja Alexa bisa diakali tapi kebanyakan mereka bersifat subjektif terhadap cara ini artinya mereka melakukan percobaan di situsnya yang cukup bahkan sudah ngetop dan dikunjungi oleh banyak orang, sehingg ranking Alexa yang naik drastis diklaim berhasil menjahili Alexa, padahal memang pengunjungnya sudah banyak. Maka itu cobalah gunakan website yang masih baru ketika melakukan percobaan untuk mencurangi Alexa rank


Lalu kenapa Alexa tampaknya tenang-tenang saja dengan metode ini?

Yap, mungkin saja dengan adanya kontraversi ini maka Alexa semakin ngetop, terutama dari sisi Toolbarnya, bukankah salah satu cara mendongkrak popularitas adalah membuat suatu hal yang bersifat kontraversi...?? heheheh

Btw ada juga nih salah satu kesaksian dari cara mencurangi ranking Alexa, alamatnya di sini

Kesaksian tersebut menjelaskan bahwa Alexa rank tidak mudah untuk dicurangi...

Nih dengerin juga kata Alexanya sendiri kalau mau rankingnya bagus :

http://www.alexa.com/site/help/traffic_learn_more

3. Kepercayaan Para Vendor

Yang paling mencolok adalah kenapa sih jika ingin mendaftar ke Text Link Ads dsb yang dilihat adalah peringkat Alexa ranknya..??? Kenapa tidak page ranknya Google saja...?? Google khan perusahaan besar dan terkenal... bahkan lebih terkenal dari Alexa??

Yap seperti yang dijelaskan di atas, Alexa mempunyai perhitungan yang lebih syariah.

Fakta ?


Alexa Rank


Gambar di atas saya print screen dari sebuah situs promosi berita (seperti Digg.com atau LintasBerita.com). Kalau diperhatikan khan rada aneh... page ranknya 3 tapi kok Alexa ranknya 10 jutaan.. and umur situs ini udah lama loh padahal salah satu website yang saya buat umurnya kurang dari 1 bulan mempunyai page rank 0 dan Alexa 4 jutaan.


Nah ketidak kompakan perhitungan tersebut karena website tersebut adalah website berita dan mempunyai banyak backlink tapi akhir-akhir ini situsnya sepi, dan otomatis Alexanya akan drop jauh, namun Google tidak menghitung demikian...


Fakta lainnya coba dech baca ketentuannya Alexa yang diambil darihttp://www.alexa.com/site/help/traffic_learn_more. 

"What are Page Views?

Page views measure the number of pages viewed by Alexa Toolbar users. Multiple page views of the same page made by the same user on the same day are counted only once. The page views per user numbers are the average numbers of unique pages viewed per user per day by the users visiting the site. The three-month change is determined by comparing a site's current page view numbers with those from three month ago."

Masih berpikir untuk melakukan refresh sebanyak-banyaknya...???

Kesimpulannya adalah :
  1. Alexa rank menghitung lebih syariah dan Google fokus kepada backlink sehingga para vendor dan webmaster lebih menyukai Alexa.
  2. Alexa mempunyai ranking yang tidak terlalu lama updatenya dibandingkan Google yang update ± 3 bulan sekali.
  3. Keuntungan menggunakan Alexa adalah Alexa memberikan data real yand didapat dari jumlah kunjungan yang bersifat unik dan sangat baik untuk memonitor prestasi website dalam jumlah kunjungan.
  4. Beberapa orang mengatakan bahwa Alexa hanya menghitung kunjungan website yang menggunakan Alexa toolbar dsb, namun beberapa orang meyakini bahwa tidak perlu menggunakan toolbar, Alexa akan tetap menghitung rank website, namun dengan menggunakan toolbar maka perhitungannya lebih maksimal dan lebih cepat.
  5. Keuntungan menggunakan Google Page Rank adalah saat situs kita sepi maka situs kita masih dihargai oleh Google selama backlinknya masih ada.

Tulisan ini dimaksudkan untuk meluruskan cara pandang kita semua terhadap Google Page Rank dan Alexa Rank.. keduanya mempunyai kelebihan dan kekurangan sendiri... namun lebih bagus jika bisa berprestasi di kedua ranking ini...
[Read More...]


 

Google+ Followers

Return to top of page Copyright © 2010 | salahbantal Converted into Blogger Template by Denih Edogawa