Cara Membuat Cursor Animasi

Hmmm jika anda adalah orang orang yang suka mempercantik blog, neh ada sedikit Tutorial blog tentang membuat Cursor keren, hmmmm kok keren? yah..karena cursor nya bertabur bintang. Trus bagaimana membuat cursor bertabur bintang?

Sebenarnya ini udah gak asing lagi karena udah banyak sekali para blogger yang memosting membuat cursor bertabutur bintang ini, tapi bagi yang belum paham neh tutorial nya yang saya ambil dari blog sahabat saya

1. Login ke akun blogger anda

2.Masuk ke Layout atau Rancangan

3. Trus tambah Page Element / elemen laman

3.Tambahkan gadget HTML/JavaScript

4.Pilih kode warna taburan bintang dibawah ini.

Kode warna bintang Hijau

<script src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.hijau.js" type="text/javascript"></script>  

Kode warna bintang Ungu

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.ungu.js' type="text/javascript"></script>

Kode warna bintang Merah 

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.merah.js' type="text/javascript"></script>

Kode warna bintang Putih

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.putih.js' type="text/javascript"></script>

Kode warna bintang Biru

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.biru.js' type="text/javascript"></script> 

5. Kopi salah satu yang anda suka lalu simpan dan simpan lagi

6. Kode di atas juga bisa dicampur campur menurut saudara

7. Lihat hasilnya....keren kan?

Read More »

11.12 | 0 komentar

Membuat Template 4 Kolom Blogspot

1. Cari kode <div id='content-wrapper'> atau<div id='crosscol-wrapper' style='text-align:center'>

2. Letakkan kode berikut ini dibawah <div id='content-wrapper'>
atau dibawah <div id='crosscol-wrapper' style='text-align:center'> . . .</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
</b:section>
</div>

<div id='sidebar2-wrapper'>
<b:section class='sidebar2' id='sidebar2' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='Blog Archive'/>
</b:section>
</div>

<div id='sidebar3-wrapper'>
<b:section class='sidebar3' id='sidebar3' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

3. Tambahkan juga kode berikut diatas ]]></b:skin>

#main-wrapper {
width: 270px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

#sidebar-wrapper {
margin-left: 10px;
width: 200px;
float: left;
display: inline;
word-wrap: break-word;
overflow: hidden;
}

#sidebar2-wrapper {
margin-left: 10px;
width: 200px;
float: left;
display: inline;
word-wrap: break-word;
overflow: hidden;
}

#sidebar3-wrapper {
width: 200px;
float: right;
display: inline;
word-wrap: break-word;
overflow: hidden;
}

 Save template anda dan lihat hasilnya

Read More »

08.06 | 0 komentar

Membuat Link Berkedip Warna Warni / script rainbow

Mungkin ini tips yang bisa di bilang klasik tapi masih cukup menarik perhatian yaitu membuat warna link berkedip warna warni, caranya sangat mudah dan temen - temen bisa mengambil atau mendownload scriptnya secara gratis di www.dynamicdrive.com. Langsung aja berikut langkah - langkah membuat link berkedip warna warni :

• Silahkan download scriptnya terlebih dahulu :
Download script rainbow 

• Lalu ekstrak file tersebut
• Nah setelah itu upload lah file rainbow.js ke server milik anda
• Jika sudah diupload copy alamat URL file tersebut, contoh seperti berikut (dibawah ini hanya contoh link JS yang telah diupload tidak bisa digunakan, jadi ganti dengan milik temen - temen sendiri),
  
  

<script src='http://www.geocities.com/putro/rainbow.js'/>

•  selesai, sekarang tinggal cara memasukan script tersebut di blog kita. Caranya seperti berikut :
  

1. Pilih Tata Letak.
2. Klik Edit HTML.
3. Cari kode </head> (gunakan Ctrl + F )
4. Simpan kode <script src='http://www.geocities.com/putro/rainbow.js'/> di bawah kode </head>
5. Simpan Template.
   

Selesai dah, selamat mencoba...

Read More »

12.47 | 0 komentar

Widget Recent Post Bergerak Ke Bawah Dengan Thumbnail Blog

Halo sobat blogger. Apa kabar? pastinya baik. ok tutorial kali ini saya memberikan tutorial mengenai Recent Post. Tentunya para blogger sekalian sudah tau apa itu recent post. Itu,,tuh,, daftar posting terbaru sobat blogger sekalian. Nah memang blogger sudah menyediakan widget Recent Post yang standar, tetapi ini berbeda Recent Post ini bergerak dari atas ke bawah jika ingin demonya silahkan liat sendiri di blog saya. Berhubung saya tidak pandai berbicara panjang lebar kita langsung aja PRAKTEK.

1. Login ke akun blogger masing masing
2. Dari dashboard ke Rancangan
3. Klik Add Gadget/Tambah Gadget
4. Pilih HTML/Javascript
5. Masukkan kode berikut
   

   <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:350px;
   }
   #spylist ul{
   width:285px;
   overflow:hidden;
   list-style-type: none;
   padding: 0px 0px;
   margin:0px 0px;
   }
   #spylist li {
   width:273px;
   padding: 5px 5px;
   margin:0px 0px 5px 0px;
   list-style-type:none;
   float:none;
   height:70px;
   overflow: hidden;
   background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
   border:1px solid #ddd;
   }
   
   #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] = "http://i43.tinypic.com/orpg0m.jpg";
   
   imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
   
   imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
   
   imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
   
   imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
   showRandomImg = true;
   
   boxwidth = 290;
   
   cellspacing = 6;
   
   borderColor = "#232c35";
   
   bgTD = "#000000";
   
   thumbwidth = 70;
   
   thumbheight = 70;
   
   fntsize = 12;
   
   acolor = "#666";
   
   aBold = true;
   
   icon = " ";
   
   text = "comments";
   
   showPostDate = true;
   
   summaryPost = 40;
   
   summaryFontsize = 10;
   
   summaryColor = "#666";
   
   icon2 = " ";
   
   numposts = 15;
   
   home_page = "http://wind7-free.blogspot.com/";
   
   limitspy=4
   intervalspy=4000
   
   </script>
   
   <div id="spylist">
   <script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
   </div>

6. Ganti http://wind7-free.blogspot.com/ dengan url blog sobat
7. Jika sudah silahkan klik Simpan
8. Lihat hasilnya

Kalau masih belum ngerti liat screenshot ini aja

.....:::::Sekian tutorial dari saya. Semoga bermanfaat:::::.....

Read More »

13.58 | 0 komentar

Free Blogger Template – Silver Carving

Setelah lama terbengkalai karna salah satu point blogger gagal, akhirnya template ini bisa rampung juga. Ide dasar dari template ini adalah membuat efek pahatan dengan border CSS3. Selain membuat template terlihat menarik,efek ini juga tidak memakai image sama sekali, alias full CSS design.
Untuk masalah layout, template ini mengadopsi template utama dari blog ini. Dimana pada halaman utama ber-layout 3 column, sedangkan pada halaman post berubah menjadi 2 column. Istilah keren yang saya namakan sendiri untuk jenis templatenya adalah "Transforming Style" (cari dikamusnya 2jam lho,baru ketemu) hehe..

Preview

Download

UPDATE : Link download terdahulu sudah rusak. Untuk mendownload silahkan melalui link baru di bawah ini

Download

Read More »

16.09 | 0 komentar

Cara Membuat Navigasi Halaman Bernomor

Navigasi halaman sebenarnya udah disediakan oleh pihak blogger dalam template Framework (Default) mereka. Bentuknya berupa link Older Post, Newer Post dan Home. Tapi kalo kalian ingin mengganti tampilan sederhana tersebut dengan yang lebih elegan, navigasi dalam bentuk nomor ini bisa menjadi alternatif buat blog kalian.

• Login ke Account (dashboard) blog kalian.
• Masuk ke menu Rancangan (design), kemudian pilih Edit HTML.
• Cari kode ]]></b:skin> , dan ganti kode tersebut dengan kode berikut :

.showpageArea{padding:15px;background:#fff}
.showpageArea a{-moz-border-radius:5px;text-decoration:none}
.showpageNum a{font-weight:bold;color:#0080ff;padding:1px 8px; margin:0 4px;text-shadow:0px 2px 4px #666;border:1px solid #91bde6;background:#fff;}
.showpageNum a:hover{color:#fff;background:-moz-linear-gradient(top,#cee5fc,#0080ff);text-shadow:0px 2px 2px #00a;border:1px solid #369afc;}
.showpagePoint{color:#fff; text-shadow:0px 2px 2px #00a; padding:1px 8px; margin:2px; font-weight:bold;border:1px solid #369afc;background:-moz-linear-gradient(top,#cee5fc,#0080ff);-moz-border-radius:5px;}
.totalpages{margin:0 8px 0 0;color:#444;background:#fff;padding:1px 10px;border:1px solid #91bde6;-moz-border-radius:5px;}
.showpage a{padding:1px 8px; margin:0 2px;border:1px solid #91bde6;background:#fff;color:#0080ff;text-shadow:0px 2px 4px #999;padding-left:10px}
.showpage a:hover{background:-moz-linear-gradient(top,#cee5fc,#0080ff);color:#fff;text-shadow:0px 2px 2px #00a;padding:1px 8px;padding-left:10px}
#showlastpage a{font-weight:bold}
]]></b:skin>

• Save template.

Berikutnya, kita akan memasukkan kode script pada bagian html template. Disini ada dua cara dalam membuatnya.
1. Menggunakan Inline Script.
--> Cari kode </body> pada kode template kalian, dan ganti kode tersebut dengan kode dibawah ini :

<div>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;&#9668;&#39;;
var downPageWord =&#39;&#9658;&#39;;
</script>
<script type='text/javascript'>
//<![CDATA[
document.getElementById("blog-pager").style.display="inline";var canvas="";function writescript(a){document.write('<script src="/feeds/posts/summary?alt=json-in-script&callback='+a+"&start-index="+startindex+'&max-results=100" ><\/script>')}function writelabelscript(a){document.write('<script src="/feeds/posts/summary/-/'+label+"?alt=json-in-script&callback="+a+"&start-index="+startindex+'&max-results=100" ><\/script>')}var url=location.href,total;var already=new Boolean(false);var timestamps=new Array();if(url.indexOf("/search/label/")!=-1){if(url.indexOf("?updated-max")!=-1){var label=url.substring(url.indexOf("/search/label/")+14,url.indexOf("?updated-max"))}else{var label=url.substring(url.indexOf("/search/label/")+14,url.indexOf("?&max"))}}if(url.indexOf("#Page")!=-1){var currentpagenum=parseInt(url.substring(url.indexOf("#Page")+5,url.length))}else{var currentpagenum=1}var startindex=(currentpagenum-displayPageNum-1>0)?((currentpagenum-displayPageNum-2)*pageCount+1):1;var total=(2*displayPageNum+1)*pageCount;if(url.indexOf("?q=")==-1&&url.indexOf(".html")==-1){if(url.indexOf("/search/label/")==-1){var islabel=new Boolean(false);do{writescript("buildtimestamps");startindex+=100}while(total>startindex)}else{var islabel=new Boolean(true);do{writelabelscript("buildtimestamps");startindex+=100}while(total>startindex)}document.write('<script type="text/javascript">printnav();<\/script>')}function buildtimestamps(b){if(already==false){total=parseInt(b.feed.openSearch$totalResults.$t)}init=pageCount-1;for(var a=init;post=b.feed.entry[a];a+=pageCount){timestamps[timestamps.length]=encodeURIComponent(post.published.$t.substring(0,19)+post.published.$t.substring(23,29))}}function printlast(b){var a=encodeURIComponent(b.feed.entry[0].published.$t.substring(0,19)+b.feed.entry[0].published.$t.substring(23,29));if(islabel==false){link="search?updated-max="+a+"&max-results="+pageCount+"#Page"+maxpages}else{link="/search/label/"+label+"?updated-max="+a+"&max-results="+pageCount+"#Page"+maxpages}document.getElementById("showlastpage").innerHTML='<a href="'+link+'">'+maxpages+"</a>"}function printnav(){maxpages=Math.ceil(total/pageCount);canvas=canvas+'<span class="totalpages">Page ['+maxpages+"]</span>";var a=((currentpagenum+displayPageNum)<maxpages)?currentpagenum+displayPageNum:maxpages;var c=((currentpagenum-displayPageNum)>1)?currentpagenum-displayPageNum:1;if(currentpagenum>1){if(islabel==false){if(currentpagenum==2){link="/"}else{link="search?updated-max="+timestamps[(c==1)?currentpagenum-c-2:currentpagenum-c-1]+"&max-results="+pageCount+"#Page"+(currentpagenum-1)}}else{if(currentpagenum==2){link="/search/label/"+label+"?&max-results="+pageCount}else{link="/search/label/"+label+"?updated-max="+timestamps[(c==1)?currentpagenum-c-2:currentpagenum-c-1]+"&max-results="+pageCount+"#Page"+(currentpagenum-1)}}canvas=canvas+' <span class="showpage"><a href="'+link+'">&#9668</a></span>'}if(c!=1){if(islabel==true){canvas=canvas+'<span class="showpageNum"><a href="/search/label/'+label+"&max-results="+pageCount+'">1</a></span>'}else{canvas=canvas+'<span class="showpageNum"><a href="/">1</a></span>'}canvas=canvas+"..."}for(var b=c;b<=a;b++){if(islabel==true){if(b==1){link="/search/label/"+label+"?&max-results="+pageCount}else{link="/search/label/"+label+"?updated-max="+timestamps[(c==1)?b-c-1:b-c]+"&max-results="+pageCount+"#Page"+b}if(b==currentpagenum){canvas=canvas+'<span class="showpagePoint">'+b+"</span>"}else{canvas=canvas+'<span class="showpageNum"><a href="'+link+'">'+b+"</a></span>"}}else{if(b==1){link="/"}else{link="search?updated-max="+timestamps[(c==1)?b-c-1:b-c]+"&max-results="+pageCount+"#Page"+b}if(b==currentpagenum){canvas=canvas+'<span class="showpagePoint">'+b+"</span>"}else{canvas=canvas+'<span class="showpageNum"><a href="'+link+'">'+b+"</a></span>"}}}if(a!=maxpages){canvas=canvas+' .. <span id="showlastpage" class="showpage"></span>';startindex=Math.floor((total-1)/pageCount)*pageCount;if(islabel==true){writelabelscript("printlast")}else{writescript("printlast")}}if(currentpagenum<maxpages){if(islabel==false){link="search?updated-max="+timestamps[(c==1)?currentpagenum-c:currentpagenum+1-c]+"&max-results="+pageCount+"#Page"+(currentpagenum+1)}else{link="/search/label/"+label+"?updated-max="+timestamps[(c==1)?currentpagenum-c:currentpagenum+1-c]+"&max-results="+pageCount+"#Page"+(currentpagenum+1)}canvas=canvas+' <span class="showpage"><a href="'+link+'">&#9658</a></span>'}document.getElementById("blog-pager").innerHTML=canvas};
//]]>
</script>
</b:if>
</div>
</body>

--> Ubah angka 5 pada var pageCount sesuai dengan jumlah post yang tampil di halaman depan blog kalian.

var pageCount=5;
var displayPageNum=5;

--> Angka 5 pada var displayPageNum adalah jumlah page yang akan ditampilkan. Ganti sesuai yang kalian inginkan.
--> Save, dan lihat hasilnya.
2. Menggunakan script dari luar.
--> Buka Notepad , dan copy kode berikut ini kedalamnya :

//<![CDATA[
document.getElementById("blog-pager").style.display="inline";var canvas="";function writescript(a){document.write('<script src="/feeds/posts/summary?alt=json-in-script&callback='+a+"&start-index="+startindex+'&max-results=100" ><\/script>')}function writelabelscript(a){document.write('<script src="/feeds/posts/summary/-/'+label+"?alt=json-in-script&callback="+a+"&start-index="+startindex+'&max-results=100" ><\/script>')}var url=location.href,total;var already=new Boolean(false);var timestamps=new Array();if(url.indexOf("/search/label/")!=-1){if(url.indexOf("?updated-max")!=-1){var label=url.substring(url.indexOf("/search/label/")+14,url.indexOf("?updated-max"))}else{var label=url.substring(url.indexOf("/search/label/")+14,url.indexOf("?&max"))}}if(url.indexOf("#Page")!=-1){var currentpagenum=parseInt(url.substring(url.indexOf("#Page")+5,url.length))}else{var currentpagenum=1}var startindex=(currentpagenum-displayPageNum-1>0)?((currentpagenum-displayPageNum-2)*pageCount+1):1;var total=(2*displayPageNum+1)*pageCount;if(url.indexOf("?q=")==-1&&url.indexOf(".html")==-1){if(url.indexOf("/search/label/")==-1){var islabel=new Boolean(false);do{writescript("buildtimestamps");startindex+=100}while(total>startindex)}else{var islabel=new Boolean(true);do{writelabelscript("buildtimestamps");startindex+=100}while(total>startindex)}document.write('<script type="text/javascript">printnav();<\/script>')}function buildtimestamps(b){if(already==false){total=parseInt(b.feed.openSearch$totalResults.$t)}init=pageCount-1;for(var a=init;post=b.feed.entry[a];a+=pageCount){timestamps[timestamps.length]=encodeURIComponent(post.published.$t.substring(0,19)+post.published.$t.substring(23,29))}}function printlast(b){var a=encodeURIComponent(b.feed.entry[0].published.$t.substring(0,19)+b.feed.entry[0].published.$t.substring(23,29));if(islabel==false){link="search?updated-max="+a+"&max-results="+pageCount+"#Page"+maxpages}else{link="/search/label/"+label+"?updated-max="+a+"&max-results="+pageCount+"#Page"+maxpages}document.getElementById("showlastpage").innerHTML='<a href="'+link+'">'+maxpages+"</a>"}function printnav(){maxpages=Math.ceil(total/pageCount);canvas=canvas+'<span class="totalpages">Page ['+maxpages+"]</span>";var a=((currentpagenum+displayPageNum)<maxpages)?currentpagenum+displayPageNum:maxpages;var c=((currentpagenum-displayPageNum)>1)?currentpagenum-displayPageNum:1;if(currentpagenum>1){if(islabel==false){if(currentpagenum==2){link="/"}else{link="search?updated-max="+timestamps[(c==1)?currentpagenum-c-2:currentpagenum-c-1]+"&max-results="+pageCount+"#Page"+(currentpagenum-1)}}else{if(currentpagenum==2){link="/search/label/"+label+"?&max-results="+pageCount}else{link="/search/label/"+label+"?updated-max="+timestamps[(c==1)?currentpagenum-c-2:currentpagenum-c-1]+"&max-results="+pageCount+"#Page"+(currentpagenum-1)}}canvas=canvas+' <span class="showpage"><a href="'+link+'">&#9668</a></span>'}if(c!=1){if(islabel==true){canvas=canvas+'<span class="showpageNum"><a href="/search/label/'+label+"&max-results="+pageCount+'">1</a></span>'}else{canvas=canvas+'<span class="showpageNum"><a href="/">1</a></span>'}canvas=canvas+"..."}for(var b=c;b<=a;b++){if(islabel==true){if(b==1){link="/search/label/"+label+"?&max-results="+pageCount}else{link="/search/label/"+label+"?updated-max="+timestamps[(c==1)?b-c-1:b-c]+"&max-results="+pageCount+"#Page"+b}if(b==currentpagenum){canvas=canvas+'<span class="showpagePoint">'+b+"</span>"}else{canvas=canvas+'<span class="showpageNum"><a href="'+link+'">'+b+"</a></span>"}}else{if(b==1){link="/"}else{link="search?updated-max="+timestamps[(c==1)?b-c-1:b-c]+"&max-results="+pageCount+"#Page"+b}if(b==currentpagenum){canvas=canvas+'<span class="showpagePoint">'+b+"</span>"}else{canvas=canvas+'<span class="showpageNum"><a href="'+link+'">'+b+"</a></span>"}}}if(a!=maxpages){canvas=canvas+' .. <span id="showlastpage" class="showpage"></span>';startindex=Math.floor((total-1)/pageCount)*pageCount;if(islabel==true){writelabelscript("printlast")}else{writescript("printlast")}}if(currentpagenum<maxpages){if(islabel==false){link="search?updated-max="+timestamps[(c==1)?currentpagenum-c:currentpagenum+1-c]+"&max-results="+pageCount+"#Page"+(currentpagenum+1)}else{link="/search/label/"+label+"?updated-max="+timestamps[(c==1)?currentpagenum-c:currentpagenum+1-c]+"&max-results="+pageCount+"#Page"+(currentpagenum+1)}canvas=canvas+' <span class="showpage"><a href="'+link+'">&#9658</a></span>'}document.getElementById("blog-pager").innerHTML=canvas};
//]]>

--> Simpan kode tersebut dengan nama navigasihal.js (Rubah pilihan Save as type menjadi All Files)

--> Upload script navigasihal.js ke situs hosting. Kalian bisa menggunakan layanan hosting gratis dari Ripway.com
--> Kalau udah di upload, sekarang kita tinggal memasukkan script pemanggilannya pada kode template kita.
Di menu Edit HTML, cari kode </body> dan ganti kode tersebut dengan kode berikut ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;&#9668;&#39;;
var downPageWord =&#39;&#9658;&#39;;
</script>
<script type='text/javascript' src='navigasihal.js'></script>

Nb: ganti teks berwarna hijau dengan URL link file di hostingan kalian. Contoh :

<script type='text/javascript' src='http://ripway.com/keichiro/navigasihal.js'></script>

--> Save, dan lihat hasilnya.
Semoga bermanfaat.

Read More »

15.58 | 0 komentar

Cara Membuat Judul Blog Berjalan

Banyak cara yang dapat dilakukan untuk mempercantik tampilan suatu blog agar terlihat menarik di mata para pengunjung. Salah satunya adalah dengan membuat judul blog tersebut berjalan atau bergerak pada title bar browser seperti fungsi Marquee. Tidak seperti membuat teks berjalan pada fungsi marquee yang membutuhkan tag <marquee>, di sini kita memerlukan JavaScript tertentu untuk membuat judul blog berjalan. Untuk membuat judul/title blog berjalan, berikut ini langkah-langkahnya.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Back-up template dengan mengeklik Download Template Lengkap untuk berjaga-jaga kalau nanti terjadi kesalahan dalam pengeditan.

4. Cari tag <head>.

5. Copy kode di bawah ini dan paste-kan di bawah tag <head> tersebut.

<script language='JavaScript'>
var txt=&quot; <data:blog.pageTitle/> &quot;;
var kecepatan=200;
var segarkan=null;
function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout(&quot;bergerak()&quot;,kecepatan);}
bergerak();
</script>

6. Untuk mengubah kecepatan silakan ganti angka 200 pada var kecepatan=200; semakin rendah nilainya semakin cepat gerakannya.

7. Klik tombol SIMPAN TEMPLATE.

Read More »

16.39 | 0 komentar

Hilangkan Link Posting Lebih Baru, Beranda, Posting Lama

WIND7-FREE.

Link Posting Lebih Baru (Newer Post), Beranda (Home), dan Posting Lama (Older Post) merupakan deretan link navigasi yang biasanya terletak di bawah kolom komentar. Link ini dapat membantu pengunjung untuk melihat posting yang berikutnya atau posting yang sebelumnya atau untuk kembali ke halaman depan atau home. Namun, bila Anda tidak menyukai dengan keberadaannya, link-link ini dapat dihilangkan agar tidak terlihat lagi. Berikut ini cara menghilangkan link Posting Lebih Baru, Beranda, dan Posting Lama.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Silakan klik Download Template Lengkap untuk menyalin templat guna mengantisipasi kalau nanti terjadi kesalahan dalam pengeditan.

4. Untuk menghilangkan link Posting Lebih Baru, silakan cari kode seperti di bawah ini. Gunakan Ctrl + F untuk memudahkan pencarian.

#blog-pager-newer-link {
float:left;
}

5. Tambahkan kode display:none; sehingga hasilnya menjadi seperti di bawah ini.

#blog-pager-newer-link {
float:left;

display:none;

}

6. Untuk menghilangkan link Posting Lama, silakan cari kode seperti di bawah ini.

#blog-pager-older-link {
float:right;
}

7. Kemudian tambahkan kode display:none; sehingga hasilnya menjadi seperti di bawah ini.

#blog-pager-older-link {
float:right;
display:none;

}

8. Terakhir, untuk menghilangkan link Beranda, silakan cari kode seperti di bawah ini.

#blog-pager {
text-align:center;
}

9. Selanjutnya, tambahkan kode display:none; lagi sehingga hasilnya menjadi seperti di bawah ini.

#blog-pager {
text-align:center;
display:none;

Read More »

16.12 | 0 komentar

Membuat Back to Top di Bawah Posting

WIND7-FREE.

Link 'Back to Top' atau 'Kembali ke Atas' dibuat untuk memudahkan pengunjung yang ingin kembali ke atas halaman blog tanpa memutar scroll mouse. Link Back to Top tersebut dapat ditempatkan secara terapung seperti yang sudah pernah dibahas dalam posting yang berjudul Cara Memasang Tombol 'Back to Top' pada Blog.

Kali ini kita akan membuat link Back to Top di posting. Link Back to Top ini akan muncul pada bagian bawah posting. Linknya dapat berupa tulisan atau dapat diganti dengan gambar seperti yang terlihat pada tabel di bawah ini.

Back to Top tulisan	Back to Top gambar

Untuk membuat 'Back to Top' di posting, Anda dapat menyimak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk mem-backup template.

4. Beri tanda centang pada Expand Template Widget.

5. Cari kode yang seperti di bawah ini atau kode untuk icon email. Untuk mempercepat pencarian, tekan Ctrl + F, kemudian ketikkan kode yang akan dicari.

<b:if cond='data:post.emailPostUrl'>

          <span class='item-action'>

          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>

              <img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>

          </a>

          </span>

        </b:if>

6. Untuk membuat link Back to Top, silakan tambahkan kode <a href='#'>Back to Top</a> setelah kode sumber gambar icon email sehingga kodenya menjadi seperti di bawah ini.

<b:if cond='data:post.emailPostUrl'>

          <span class='item-action'>

          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>

              <img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>

          </a><a href='#'>Back to Top</a>

          </span>

        </b:if>

•  Tulisan Back to Top dapat Anda ganti sesuai keinginan Anda, misalnya Kembali ke Atas.

7. Jika ingin mengganti tulisan Back to Top dengan gambar, silakan tambahkan kode di atas dengan kode URL gambar Anda.

Contoh:

<b:if cond='data:post.emailPostUrl'>

          <span class='item-action'>

          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>

              <img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>

          </a><a href='#' title='Kembali ke Atas'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcw-WTGOGsvFdE92YBEdISQLow5LsXItR1nGiccQ8-7CUgLZbdksA2b5b-ZGMwIdQelqI9iEbpu51_MQ131xvpEoVE5B4CKGJOLsovj6ULePgdlNYlj-v5pOWamelnjJoJv0Sk-fdypyoG/s1600/Up.jpg'/></a>

          </span>

        </b:if>

• Anda dapat mengganti judul Kembali ke Atas sesuai keinginan Anda dan ganti URL gambar-nya dengan URL gambar Anda sendiri.

8. Klik tombol SIMPAN TEMPLATE.

Read More »

16.10 | 0 komentar

Cara Membuat Gadget Label Menjadi Dua Kolom

WIND7-FREE.

Apakah Anda sudah memasang gadget atau widget label tipe daftar atau list di sidebar blog Anda? Jika sudah, apakah gadget label tipe daftar tersebut masih menyisakan ruang kosong pada bagian kanannya sehingga memungkinkan bila dijadikan 2 kolom? Bila iya, jadikan saja gadget label daftar Anda menjadi dua kolom agar menghemat tempat pada sidebar blog Anda.

Nah, untuk membuat gadget label daftar menjadi 2 kolom, silakan ikuti langkah-langkahnya di bawah ini. Namun, sebelumnya pastikan Anda telah memasang gadget label jenis daftar di sidebar blog Anda.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap utnuk mengantisipasi kalau nanti terjadi kesalahan dalam pengeditan.

4. Cari kode ]]></b:skin> (Gunakan Ctrl + F untuk mempercepat pencarian)

5. Copy kode di bawah ini dan paste di atas kode tersebut.

#Label1 li {

float:left;

width:50%;

}

6. Klik tombol PRATINJAU. Bila gadget label belum berhasil menjadi 2 kolom, silakan ganti angka 50 dengan angka yang lebih kecil lagi, misalnya 45, lalu klik tombol PRATINJAU. Jika belum berhasil juga, silakan ubah lagi angka tersebut dengan angka yang lebih kecil sampai label terbentuk menjadi dua kolom.

7. Bila label sudah berhasil menjadi 2 kolom, klik tombol SIMPAN TEMPLATE.

Read More »

16.08 | 0 komentar

Cara Memasang Gadget Pengikut dengan Script di Blogger

WIND7-FREE.

B

iasanya kita bila ingin menambahkan widget pengikut di Blogger menggunakan cara Masuk > Rancangan > Elemen Laman > Tambah Gadget > Pengikut. Namun, karena adanya suatu masalah, widget tersebut bisa saja tidak muncul di blog kita. Nah, ada cara lain untuk memasang widget pengikut ini di blog kita yaitu dengan menggunakan script. Dengan script ini kita dapat mengatur tampilan widget Pengikut atau Follower sesuai dengan selera kita. Bagaimana cara mendapatkan script widget atau gadget Pengikut ini? Silakan simak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger Anda.

2. Setelah berada di halaman Dasbor, silakan klik menu Akunku.

3. Pada Produk Saya, klik Google Jalinan Teman (Google Friend Connect).

4. Klik menu Gadget.

5. Klik Members atau Dapatkan gadget ini.

6. Silakan tentukan lebar widget sesuai lebar sidebar blog Anda dan atur banyaknya baris foto yang ingin ditampilkan.

7. Silakan pilih serangkaian warna untuk gadget Pengikut Anda dan jenis font.

8. Klik tombol Buat kode untuk mendapatkan kode HTML.

9. Copy kode HTML yang tersedia.

10. Silakan menuju halaman Dasbor blog Anda kembali

11. Klik Rancangan > Elemen Laman > Tambah Gadget.

12. Pilih HTML/JavaScript.

13. Berikan judul sesuai keinginan Anda.

14. Paste kode HTML yang tadi di-copy di kolom Konten.

15. Klik tombol SIMPAN.

16. Pindahkan elemen ke tempat yang Anda inginkan.

17. Klik tombol SIMPAN.

18. Selesai.

Read More »

16.00 | 0 komentar

Cara Membuat Warna Kotak Komentar Admin Berbeda

WIND7-FREE.

Maksud dari judul di atas adalah kita akan memberi warna serta border pada kolom komentar admin sehingga pengunjung dapat dengan mudah membedakan mana komentar admin dan mana komentar pengunjung lain. Warna kotak komentar yang berbeda ini akan terjadi saat kita berkomentar jika kita selaku admin blog telah sign in di Blogger. Contohnya seperti kotak komentar admin di blog ini yang terlihat berbeda dengan komentar lainnya.

Bila tertarik untuk mengaplikasikan trik ini pada template blog Sobat, silakan simak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger Sobat.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk berjaga-jaga kalau nanti terjadi kesalahan kita dapat dengan mudah mengembalikan template seperti semula.

4. Beri tanda centang di Expand Template Widget.

5. Cari kode ]]></b:skin>. Tekan Ctrl + F lalu isikan kode untuk mempercepat pencarian.

6. Copy kode di bawah ini lalu paste di atas kode tersebut.

.comment-body-author {
background: #fee6e6; /* Warna Background */
border:2px dotted #d31111; /*Border*/
margin:0;
padding:0 0 0 0px;
}

• #fee6e6 merupakan warna untuk latar belakang, silakan ganti kode warnanya untuk mengubah warnanya.
• 2px dotted #d31111 adalah border style dot dengan ketebalan 2 piksel dan berwarna #d31111. Silakan diubah sesuai keinginan Sobat.

7. Cari kode seperti di bawah ini.

<b:if cond='data:comment.authorUrl'>

              <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>

            <b:else/>

              <data:comment.author/>

            </b:if>

            <data:commentPostedByMsg/>  

          </dt>

          <dd class='comment-body'>

            <b:if cond='data:comment.isDeleted'>

              <span class='deleted-comment'><data:comment.body/></span>

            <b:else/>

              <p><data:comment.body/></p>

            </b:if>

          </dd>

          <dd class='comment-footer'>

8. Tambahkan kode:

<b:if cond='data:comment.author == data:post.author'>

<dd class='comment-body-author'>

<p><data:comment.body/></p>

</dd>

<b:else/>

di bawah kode:

<data:commentPostedByMsg/>  

          </dt>

dan kode </b:if> di bawah kode:

<dd class='comment-body'>

            <b:if cond='data:comment.isDeleted'>

              <span class='deleted-comment'><data:comment.body/></span>

            <b:else/>

              <p><data:comment.body/></p>

            </b:if>

          </dd>

sehingga hasilnya menjadi seperti di bawah ini.

<b:if cond='data:comment.authorUrl'>

              <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>

            <b:else/>

              <data:comment.author/>

            </b:if>

            <data:commentPostedByMsg/>  

          </dt>

<b:if cond='data:comment.author == data:post.author'>

<dd class='comment-body-author'>

<p><data:comment.body/></p>

</dd>

<b:else/>

          <dd class='comment-body'>

            <b:if cond='data:comment.isDeleted'>

              <span class='deleted-comment'><data:comment.body/></span>

            <b:else/>

              <p><data:comment.body/></p>

            </b:if>

          </dd>

</b:if>

          <dd class='comment-footer'>

9. Klik tombol SIMPAN TEMPLATE.

Read More »

15.58 | 0 komentar

Cara Membuat Text Area di Blogger dengan tombol II

Text Area atau Area Teks merupakan tempat atau area berbentuk persegi yang digunakan untuk menyimpan suatu tulisan atau teks dan membentuk area tersendiri. Biasanya text area ini dipakai untuk menyimpan kode-kode HTML serta teks-teks yang lainnya agar dapat di-copy oleh para pengunjung blog dengan mudah. Ada 2 macam text area yang sering kita jumpai, yaitu text area tanpa tombol highlight dan text area dengan tombol highlight.

Pada text area yang ke-dua, yaitu text area dengan tombol highlight, cara meng-copy teksnya lebih mudah dan praktis. Mengapa demikian? Karena hanya dengan mengeklik tombol highlight maka seluruh teks yang ada di text area akan ter-highlight secara otomatis. Dengan demikian akan memudahkan para pengunjung karena mereka tinggal mengeklik kanan mouse saja lalu pilih Copy maka teks telah ter-copy.

Untuk membuat text area tanpa tombol highlight, silakan copy kode di bawah ini.

<div align="center">
<textarea cols="25" name="code" rows="5">Silakan tulis teks-teks atau kode-kode HTML Anda di sini. Nanti teks Anda akan muncul di text area</textarea></div>

Keterangan:

• <div align="center">, kata center menunjukkan bahwa text area berada di tengah. Jika ingin berada di kiri, diganti dengan left. Bila Anda ingin di kanan, kata center diganti dengan kata right.
• rows="5", menunjukkan tinggi dari text area, yaitu setinggi 5 baris. Jika isi text area melebihi 5 baris maka akan terbentuk penggulung di sisi kanan. Bila Anda menginginkan text area yang lebih tinggi lagi, silakan ganti angka 5 dengan angka yang lebih tinggi nilainya.
• cols="25", menunjukkan lebar dari text area, yaitu tiap baris maksimal mengandung 25 karakter. Jika Anda menghendaki text area yang lebih lebar lagi, silakan ganti angka 25 dengan angka yang lebih tinggi nilainya.

Bila kode untuk membuat text area tanpa tombol highlight di atas ditaruh di Edit HTML, maka hasilnya akan seperti ini.

Silakan tulis teks-teks atau kode-kode HTML Anda di sini. Nanti teks Anda akan muncul di text area

Untuk membuat text area dengan tombol highlight, silakan copy kode di bawah ini.

<div>

<form name="copy">

<div align="center">

<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All" /> </div>

<div align="center">

</div>

<div align="center">

<textarea cols="55" name="txt" rows="100" style="height: 150px; width: 350px;" wrap="VIRTUAL">Simpan tulisan atau kode HTML Anda di sini, maka teks Anda akan siap di-copy oleh para pengunjung blog Anda.</textarea></div>

</form>

</div>

Kode di atas mempunyai 2 elemen bagian. Elemen yang pertama adalah elemen kode pembentuk tombol yang bertuliskan Highlight All. Sedangkan elemen yang kedua adalah elemen kode pembentuk text area.

Keterangan untuk elemen pembentuk tombol bertuliskan Highlight All:

• <div align="center">, kata center menunjukkan bahwa posisi tombol berada di tengah. Bila Anda ingin posisi tombol itu berada di sebelah kanan, ganti kata center dengan right. Jika ingin berada di sisi kiri, Anda ganti kata center dengan kata left.
• input onclick="javascript:this.form.txt.focus();this.form.txt.select();", kode ini menunjukkan kalau tombol Highlight All diklik maka seluruh teks yang ada di dalam text area akan ter-highlight.
• value="Highlight All", kata Highlight All adalah kata yang muncul di tombol. Anda dapat menggantinya dengan kata keinginan Anda.

Keterangan untuk elemen pembentuk text area:

• <div align="center">, menunjukkan text area berada di tengah. Jika Anda ingin text area berada di kiri, ganti kata center dengan left. Sedangkan bila Anda ingin di kanan, ganti kata center dengan right.
• width: 350px;, menunjukkan lebar dari text area sebesar 350 piksel. Jika ingin lebih lebar lagi silakan diganti angka 350 dengan angka yang lebih tinggi lagi nilainya.
• height: 150px;, menunjukkan tinggi dari text area. Bila ingin lebih tinggi lagi, silakan ganti angka 150 dengan dengan yang lebih tinggi lagi nilainya.

Bila kode text area dengan tombol highlight di atas diletakkan di Edit HTML, maka hasilnya akan seperti ini.

Simpan tulisan atau kode HTML Anda di sini, maka teks Anda akan siap di-copy oleh para pengunjung blog Anda.

Read More »

15.54 | 0 komentar

Cara Pasang Avatar Di Komentar Blogger

WIND7-FREE.
Menampilkan avatar di komentar Blog. Tentu saat anda berkunjung ke blog Wordpress, avatar di dalam komentar merupakan hal yang lumrah. Lalu apakah mungkin kang hal tersebut di terapkan di mesin Blogspot? Jawabannya adalah Ya!.


Oke kali ini kang salman akan mengulas mengenai cara membuat avatar di komentar blog untuk blogspot
Step 1 :
Silakan Login ke Blogger » Pilih Rancangan » Pilih Tab Edit HTML 
Step 2 : 
-  Beri tanda ceklis pada kotak kecil disamping tulisan "Expand Template Widget"
-  Cari kode ]]></b:skin>
-  Copy kede di bawah ini dan taruh di atas ]]></b:skin>

.avatar-image-container{width:44px;height:44px;}
.avatar-image-container img {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmnYCdlL7wxrgqC1Yp2sIEwH04eCl3MFsWR7zIvW4-Mpk8sQXf8PmibKyc6sA1Ul4JLOMDoCVoIQRPYLuphcgeRcDlBkFjOJtazZ7HksVNB4ru6mSKE9PQjzNPUKsBMAQC_x1YiGVx8-g/s1600/Membuat+Avatar+di+Kometar+Blogger.gif);width:44px;height:44px;}

Ket : ubah tulisan hijau di atas, dengan url foto, gambar, atau avatar yang kamu sukai...
-  Cari kode <dl id='comments-block'>
   Tips : Tekan CTRL+F lalu masukan kode id='comments-block'> ke kotak search, lalu enter
-  Kalau sudah ketemu, pilih yang pertama, lalu hapus kode tadi
-  Ganti dengan kode berikut :

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

-  Sekarang cari kode <div expr:class='data:post.avatarIndentClass' id='comments-block'>
-  Hapus kode tadi dan ganti dengan kode di berikut :

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

Terakhir Simpan dan lihat hasilnya komentar di artikel anda yang mengunkan anonim atau url akan memiliki avatar sehingga terlihat lebih menarik! 
Catatan :
*Terkadang cara diatas tidak cocok untuk beberapa template, jadi anda harus sedikit memodifnya sedikit lagi.

Read More »

16.24 | 0 komentar

Cara Membuat Animasi Link, Berubah Warna Dan Membesar Saat di Sorot Mouse

WIND7-FREE.Animasi Link, Berubah Warna Dan Membesar Ketika Di Sorot Mouse. Pada kesempatan kali ini kang salman akan mengulas bagaimana cara membuat animasi link seperti judul di atas.

Berikut langkah-langkahnya:
1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Edit HTML"
3. Cari bagian a:link { dan a:hover { dan ganti kode yang ada di bawah kode a:link { pada template dengan kode di bawah ini,.....!!!

a:link {
color:#0000ff;
font-size:10px;
cursor:default;
}

a:hover {
color:#d2691e;
font-size:19px;
font-style:italic;
cursor:wait;
}

4. Simpan Template.anda tinggal ganti font2 yang berwarna oke
sekian

Untuk melihat kode warnanya silaan anda lihat artikel berikut :

1. Kumpulan Kode-Kode Warna-Yang-Wajib di Miliki
2. Kumpulan Kode Warna RGB dan Hexadecimal

Oke selamat mencoba cara membuat animasi link, berubah warna dan membesar saat di sorot mouse

Read More »

16.20 | 0 komentar