Cara Mengganti Gambar Kursor di Blog

Cara Mengganti Gambar Kursor di Blog  -  Gara-gara kepingin sekali mengganti gambar kursor di blog ini, akhirnya setelah googling kesana kemari nemu juga sebuah situs yang menyediakan banyakgambar-gambar kursor pilihan. Gambar kursor yang disediakan situs penyedia gambar ini http://www.totallyfreecursors.com/ banyak sekali, jadi kita tinggal memilih sesuai selera aja. Untuk cara memasang gambar kursor ini di blog, kita harus menambahkan sedikit saja kode CSS supaya bisa dipasang pada template. Dibawah ini ada beberapa sample gambar untuk kursor yang saya ambil berikut URL alamat kursor tersebut.

              URL :http://downloads.totallyfreecursors.com/thumbnails/monkey-ani.gif

                URL :http://downloads.totallyfreecursors.com/thumbnails/aliendance.gif

                URL :http://downloads.totallyfreecursors.com/thumbnails/tail2.gif

                URL :http://downloads.totallyfreecursors.com/thumbnails/banana1.gif

                URL :http://downloads.totallyfreecursors.com/thumbnails/bullseye-ani.gif

               

Cara mengganti gambar kursor di blog :

1.    Login ke dashboard blogger anda.

2.    Pilih Rancangan > Edit HTML, centang Expand widget template.

3.    Carilah kode </head> pada template anda dengan menggunakan Ctrl F.

4.    Copy kode CSS dibawah ini dan letakkan tepat diatas kode </head> .

<style type='text/css'> HTML,BODY{cursor: url(&quot;http://downloads.totallyfreecursors.com/thumbnails/sweden.gif&quot;), auto;} </style>

5.    Simpan template anda dan lihat perubahan pada gambar kursor

6.    Jika sobat ingin mengganti gambar kursor dengan gambar yang lain, sobat tinggal ganti URL gambar yang berwarna merah dengan URL gambar pada sample diatas atau sobat bisa langsung browsing sendiri ke TKP dihttp://www.totallyfreecursors.com/ .

Nah ternyata mengganti gambar kursor di blog memang bisa jadi solusi mempercantik tampilan blog juga ya apalagi kalo ditambahin lagi dengan efek bintang siip dah. Tinggal giliran sobat blogger nih, selamat mencoba ya !

Cara Membuat Halaman Maintence Pada Blogspot

Cara membuat Halaman Maintenance Pada Blogspot, (Under Maintenance). Setelah kemarin saya membahas tentang Search Box Simpel dan Keren Untuk Blogspot, kali ini saya akan kembali membahas tentang tips dan trik blogspot. Dulu awalnya, saya pikir cuman di blogWordpress saja yang bisa maintenis, eh maintenance maksude :)) Ternyata Blogspot-pun bisa. 
Just to share saja sob, kebetulan saya (kode-blogger) sudah lama tidak meng-update postingannya, jadi kali ini saya sempatkan untuk membahas tips dan trik blogspot again. 
Biasanya saat kita sedang meng-edit blog (apapun itu) pasti gak mau kan keliahatan kalau blog kita sedang diperbaiki, syukur-syukur kalo gak keliatan errornya waktu edit, lah kalo ada?? malu n gak enak dilihat kan sob ?? Nah, untuk mengatasi hal tersebut kita sebagai blogger setia (Blogspot) tentunya ada caranya, yaitu dengan Mode Maintenance. Gak cuman Wordpress, Blogspot-pun bisa !! Hihihi (buat para master2 pastilah sudah gak asink lagi tentang hal ini, jd lewatin saja) :)) 

Oke, silahkan lihat demonya. Cara membuatnya-pun cukup mudah, hanya menggunakan kode CSS, pasti mudah dan gak ribet !! bila sobat memasang kode maintenance-nya, maka akan muncul creenshot seperti dibawah ini: 

Bila tertarik untuk membuat Halaman Maintenance Pada Blogspot, silahkan ikuti langkah-langkah berikut:

1. Login ke akun blogger sobat 
2. Masuk ke rancangan/design 
3. Pilih Tata Letak 
4. Edit HTML 
5. Lalu cari kode berkut: ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin> 

html { height: 100%; background: url(http://i865.photobucket.com/albums/ab218/1rd3/site-under-maintenance-kodeblogger.png) no-repeat center 50%; margin: 0; } body { display: none; } 
6. Jangan lupa Simpan Template. 


Sip, sampai disini sobat udah bisa membuat Halaman Maintenance Pada Blogspot, melihat kode diatas jelaslah sangat simpel dan mudah dimengerti tentunya. 
Silahkah ganti link image diatas (http://i865.photobucket.com/albums/ab218/1rd3/site-under-maintenance-kodeblogger.png) sesuai dengan kreasi sobat. 

Sekian dari saya (kode-blogger) untuk topik Cara Membuat Halaman Maintenance/Under Maintenance Pada Blogspot. 

Cara membuat Halaman Maintenance Pada Blogspot, (Under Maintenance). Setelah kemarin saya membahas tentang Search Box Simpel dan Keren Untuk Blogspot, kali ini saya akan kembali membahas tentang tips dan trik blogspot. Dulu awalnya, saya pikir cuman di blogWordpress saja yang bisa maintenis, eh maintenance maksude :)) Ternyata Blogspot-pun bisa. 
Just to share saja sob, kebetulan saya (kode-blogger) sudah lama tidak meng-update postingannya, jadi kali ini saya sempatkan untuk membahas tips dan trik blogspot again. 
Biasanya saat kita sedang meng-edit blog (apapun itu) pasti gak mau kan keliahatan kalau blog kita sedang diperbaiki, syukur-syukur kalo gak keliatan errornya waktu edit, lah kalo ada?? malu n gak enak dilihat kan sob ?? Nah, untuk mengatasi hal tersebut kita sebagai blogger setia (Blogspot) tentunya ada caranya, yaitu dengan Mode Maintenance. Gak cuman Wordpress, Blogspot-pun bisa !! Hihihi (buat para master2 pastilah sudah gak asink lagi tentang hal ini, jd lewatin saja) :)) 

Oke, silahkan lihat demonya. Cara membuatnya-pun cukup mudah, hanya menggunakan kode CSS, pasti mudah dan gak ribet !! bila sobat memasang kode maintenance-nya, maka akan muncul creenshot seperti dibawah ini: 

Bila tertarik untuk membuat Halaman Maintenance Pada Blogspot, silahkan ikuti langkah-langkah berikut:

1. Login ke akun blogger sobat 
2. Masuk ke rancangan/design 
3. Pilih Tata Letak 
4. Edit HTML 
5. Lalu cari kode berkut: ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin> 

html { height: 100%; background: url(http://i865.photobucket.com/albums/ab218/1rd3/site-under-maintenance-kodeblogger.png) no-repeat center 50%; margin: 0; } body { display: none; } 

6. Jangan lupa Simpan Template. 


Sip, sampai disini sobat udah bisa membuat Halaman Maintenance Pada Blogspot, melihat kode diatas jelaslah sangat simpel dan mudah dimengerti tentunya. 
Silahkah ganti link image diatas (http://i865.photobucket.com/albums/ab218/1rd3/site-under-maintenance-kodeblogger.png) sesuai dengan kreasi sobat. 

Sekian dari saya (kode-blogger) untuk topik Cara Membuat Halaman Maintenance/Under Maintenance Pada Blogspot. 

Membuat " Recent Comment " Efek Scrolling Dengan jQuery Dan Css

Malam sobatku..
Jika kemarin saya memberikan sebuah tutorial yang menggunakan animasi jQuery dan CSS maka kali ini saya akan memberikan tutorial yang sama,yaitu Recent Comment scrolling dengan jQuery dan CSS. Untuk contoh bisa sobat lihat pada gambar berikut.

Jika sobat ingin mencobanya langsung saja ikuti langkah berikut :
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. cari code : <head>
Lalu letakkan kode berikut dibawahnya :

<script language='javascript' src='http://pujangga.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>

4. Selanjutnya letakkan Kode CSS dibawah ini sebelum atau diatas kode ]]></b:skin> .

/*Recent comment code Start*/
#listticker{
height:235px;
width:100%;
overflow:hidden;
border:solid 1px #DEDEDE;
padding:2px 5px 14px 5px;
border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #F70000; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #F70000; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #F70000;
}
#listticker:hover{border-radius:12px; -moz-border-radius:12px; -webkit-border-radius:12px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F}
#listticker li{
border:0; margin:0; padding:0; list-style:none;
}
#listticker li{
height:75px;
padding:5px;
}
#listticker a{
color:#009900;
margin-bottom:
}
#listticker .news-title{
display:block;
font-weight:bold;
margin-bottom:4px;
font-size:11px;
}
#listticker .news-text{
display:block;
font-size:12px;
color:#666666;
}
#listticker img{
float:left;
margin-right:14px;
padding:4px;
}
#listticker i {
color: #009900;
}
<-- Recent comment code End -->

Sobat dapat mengedit code CSS diatas sesuka anda,
5. Save Template,..

Sekarang pada wiget
1. Buka Layout (Tata Letak) » Page Elements (Elemen Laman).
2. Klik Add a Gadget (Tambah gadget).
3. Pilih gadget HTML/JavaScript.
Lalu Copy-paste script berikut ke dalam gadget tadi.

<script type="text/javascript">
$(document).ready(function(){

 var first = 0;
 var speed = 200;
 var pause = 3500;

  function removeFirst(){
   first = $('ul#listticker li:first').html();
   $('ul#listticker li:first')
   .animate({opacity: 0}, speed)
   .fadeOut('slow', function() {$(this).remove();});
   addLast(first);
  }
 
  function addLast(first){
   last = '<li style="display:none">'+first+'</li>';
   $('ul#listticker').append(last)
   $('ul#listticker li:last')
   .animate({opacity: 1}, speed)
   .fadeIn('slow')
  }

 interval = setInterval(removeFirst, pause);
});
</script>

<ul id="listticker">

 <script type="text/javascript">
// ----------------------------------------
// SHOW RECENT COMMENTS
// ----------------------------------------
// This functions takes a blogger-feed in JSON
// format and displays it.
//
// Version: 1.0
// Date:    2006-12-01
// Author:  Hans Oosting
// URL:     beautifulbeta.blogspot.com
// ----------------------------------------

function showrecentcomments(json) {
  for (var i = 0; i < numcomments; i++) {
    var entry = json.feed.entry[i];
    var alturl;

    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        alturl = entry.link[k].href;
        break;
      }
    }
   alturl = alturl.replace("#", "#comment-");
   var postlink = alturl.split("#");
   postlink = postlink[0];
   var linktext = postlink.split("/");
   linktext = linktext[5];
   linktext = linktext.split(".html");
   linktext = linktext[0];
   var posttitle = linktext.replace(/-/g," ");
   posttitle = posttitle.link(postlink);
   var commentdate = entry.published.$t;
   var cdyear = commentdate.substring(0,4);
   var cdmonth = commentdate.substring(5,7);
   var cdday = commentdate.substring(8,10);
   var monthnames = new Array();
   monthnames[1] = "Jan";
   monthnames[2] = "Feb";
   monthnames[3] = "Mar";
   monthnames[4] = "Apr";
   monthnames[5] = "May";
   monthnames[6] = "Jun";
   monthnames[7] = "Jul";
   monthnames[8] = "Aug";
   monthnames[9] = "Sep";
   monthnames[10] = "Oct";
   monthnames[11] = "Nov";
   monthnames[12] = "Dec";
   var comment = entry.content.$t;
   var re = /<\S[^>]*>/g;
   comment = comment.replace(re, "");
   if (showcommentdate == true)
   document.write('<li>');
   document.write('Tanggal ' + cdday + ' '+ monthnames[parseInt(cdmonth,10)] + ' ' + cdyear + ' ');
      document.write('<b><a href="' + alturl + '">' + entry.author[0].name.$t + '</b></a> berkomentar');
   if (showposttitle == true) document.write(' pada ' + posttitle);
   document.write(':<br/>');
   if (comment.length < numchars)
         document.write('<i>' + comment + '</i><br/><br/>');
   else
         document.write('<i>'+ comment.substring(0, numchars) + '...</i><br/><br/>');
  }

}
document.write('</li>');
</script>
<script style="text/javascript">var numcomments = 6;var showcommentdate = true;var showposttitle = true;var numchars = 80;var standardstyling = true;</script><script src="http://erickvand-blog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</ul>

KET::
- tulisan 'erickvand-blog.blogspot.com'sobat tinggal ganti dengan URL BLOG sobat.

Nara Sumber : Erick Blog

Background Bergerak

Info unik kali ini mengenai salah satu trik membuat gambar background blog menjadi dinamis. Trik ini menggunakan JQuery sederhana yang dikhususkan untuk membuat gambar background menjadi bergerak (Scrolling Background). Script ini membuat gambar background blog bergerak secara vertikal dari arah bawah ke arah atas. Buat sobat blogger yang ingin mencobanya silakan disimak trik membuat scrolling background berikut ini.

>> Preview Cara Membuat Background Bergerak di Blog <<

Cara Pemasangan

• Login » blogger.
• Rancangan » Edit HTML.
• Apabila anda belum menggunakan kode JQuery silakan anda pasang kode JQuery dibawah ini tepat di atas Kode </Head>.
  
  
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'></script>
• Copy-Paste kode di bawah ini tepat di atas Kode </Head>.
  
  
  <script type='text/javascript'>
  //<![CDATA[
  $(function(){
  // ***
  // Scrolling background
  // ***
  // height of background image in pixels
  var backgroundheight = 4000;
  
  // get the current minute/hour of the day
  var now = new Date();
  var hour = now.getHours();
  var minute = now.getMinutes();
  
  // work out how far through the day we are as a percentage - e.g. 6pm = 75%
  var hourpercent = hour / 24 * 100;
  var minutepercent = minute / 30 / 24 * 100;
  var percentofday = Math.round(hourpercent + minutepercent);
  
  // calculate which pixel row to start graphic from based on how far through the day we are
  var offset = backgroundheight / 100 * percentofday;
  
  // graphic starts at approx 6am, so adjust offset by 1/4
  var offset = offset - (backgroundheight / 1);
  
  function scrollbackground() {
  // decrease the offset by 1, or if its less than 1 increase it by the background height minus 1
  offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
  // apply the background position
  $('body').css("background-position", "50% " + offset + "px");
  // call self to continue animation
  setTimeout(function() {
  scrollbackground();
  }, 70
  );
  }
  // Start the animation
  scrollbackground();
  });
  
  //]]>
  </script>

• Copy-Paste Kode CSS di bawah ini tepat di atas Kode </Head> untuk memasang gambar background. Anda dapat mengganti gambar background sesuai dengan yang anda inginkan dengan merubah alamat hosting gambar pada Kode CSS di bawah dengan alamat hosting gambar yang anda pilih.
  
  
  <style>
  body {
  background: black url(http://3.bp.blogspot.com/-tS5lZKl3Qag/TtjQUfMzi2I/AAAAAAAAAkA/QZc2FwvhW4o/s200/bg.gif) repeat center; background-attachment: fixed;
  }
  </style>
• Keterangan :
  - repeat // Pengulangan gambar arah x dan y.
  
  • repeat-x // Pengulangan gambar hanya arah horizontal.
  • repeat-y // Pengulangan gambar hanya arah vertikal.
  - http://3.bp.blogspot.com/-tS5lZKl3Qag/TtjQUfMzi2I/AAAAAAAAAkA/QZc2FwvhW4o/s200/bg.gif // URL Link gambar.
  - center // Lokasi gambar berada di tengah layar.
  • Left // Lokasi gambar berada di kiri gambar.
  • Right // Lokasi gambar berada di kanan gambar.

Membuat menu Sign in, Sign Up, Login blog di Navbar menu

Membuat menu Sign in, Sign Up, Login blog di Navbar menu - Banyak yang bertanya-tanya kepada kang salman soal ini, oleh sebab itu malam ini kang salman sengaja mengulas trik bagaimana membuat login menu blogger yang di pasang di navbar menu, anda bisa melihat contohnya di blog ini waktu dulu tampilannya seperti gambar di atas, kalau sekarang sedit berbeda. silakan lihat sediri tulisan My Official Forum, disana ada member area, register, sign in, sign up lengkap dengan menu loginnya. di atas. bagaimana cara membuatnya?? oke mari kang salmanbongkar triknya.

Oiya sebelumnya, menu login ini merupakan pengembangan dari Membuat Menu Login di Blogger dan setelah di modifokasi jadilah seperti yang kang salman gunakan  


HOT UPDATE tulisan, kode dan posting artikel ini terlah di perbarui dan di perbaiki tanggal 29 Mei 2011. Kode sudah kami uji coba di blog baru dan berhasil.  

Langkah pertama :

Login ke blogger » Pilih Rancangan » Edit HTML

Langkah kedua

1.  Copy kode di bawah ini :

/* Top Horisontal
---------------------------------------------*/
.toppic{background:#000000;width:100%;margin:0 auto;border-bottom:0px solid #666;filter:alpha(opacity=70);opacity:0.7;}
.topnav{width: 100px;height:32px;overflow: hidden;margin:0 auto;  padding:0px 10px 0px 10px; }

2.  Cari kode ]]></b:skin>
3.  Simpan kode yang tadi di copy tadi di atas ]]></b:skin>
4.  Simpan berikut di tepat bawah <body>

<div class='toppic'>
    <div class='topnav'>
<div style='font:normal 11px Trebuchet Ms;float:left;padding-top:8px;letter-spacing:.01em;color:#f9f9f9;'>
My Official Forum  |  <a href='http://4jvohexlvs.tal.ki/members/' title='Members Area'>Members area</a>  :  <a href='http://4jvohexlvs.embed.tal.ki/_rpx/' title='Sign up to forum'>Register</a>  |  <a href='http://4jvohexlvs.embed.tal.ki/_rpx/' title='log in to forum'>Sign in</a>
</div>
<div style='float:right;font:normal 11px Trebuchet Ms; text-decoration:none; color: #f9f9f9;padding-top:4px;'>
<form action='https://www.google.com/accounts/ServiceLoginBoxAuth' id='start-login' method='post' name='login' onsubmit='onlogin()'>
<input name='continue' type='hidden' value='http://www.blogger.com/loginz?d=%2Fhome&amp;p=http%3A%2F%2Fwww.blogger.com%2F'/>
<input name='service' type='hidden' value='blogger'/>
<input name='nui' type='hidden' value='8'/>
<input name='naui' type='hidden' value='8'/>
<input name='fpui' type='hidden' value='2'/>
<input name='uilel' type='hidden' value='3'/>
<input name='skipvpage' type='hidden' value='true'/>
<input name='rm' type='hidden' value='false'/>
<input name='alwf' type='hidden' value='true'/>
<input name='roeu' type='hidden' value='http://www.blogger.com/login.g'/>
<input name='alinsu' type='hidden' value='0'/>
<input name='GA3T' type='hidden' value='WbQ8QiJfUvA'/>
<div>
<label for='Email'> Username : <input id='Email' name='Email' size='15' tabindex='1' type='text' value=''/></label><label for='Passwd'>  Password : <a href='https://www.blogger.com/forgot.g' target='_top' title='Forgot your password?'/> </label><input autocomplete='off' id='Passwd' name='Passwd' size='15' tabindex='2' type='password'/>
<input class='ubtn ubtn-block' id='signin-btn-ns' name='submit' tabindex='0' type='submit' value='Sign in'/></div>
</form>
</div>
</div>
</div>

Keterangan :

• Tulsan yang berwana merah di atas bisa anda ubah dengan alamat situs lain, atau facebook anda sendiri.
• Jika saya menghubungkannya ke sebuah forum. jika ingin mempuyai forum seperti saya silakan baca tutorialnya disini
• kemudian salin link-link nya dan pindahkan ke tulisan warna merah di atas. maka hasilnya akan seperti milik saya.

Selamat mencoba dan semoga bermanfaat :)
Assalamualaikum...

Cara Menambah Gambar Saat Loading Blog

Tampilan tertentu pada saat loading blog mungkin merupakan daya tarik tertentu dalam sebuah blog. Hal ini memungkinkan anda menyimpan semua ketidak teraturan bentuk tampilan pada saat loading, sehingga pengunjung hanya melihat animasi tampilan loading. Posting kali ini saya akan share bagaimana membuat tampilan loading halaman dengan menggunakan jquery dan css. Tampilan animasi pada loading page ini menggunakan Query Loader, yaitu tampilan layar kosong hitam (bisa diubah) yang meliputi blog anda sampai semua konten dimuat. Artinya pengunjung tidak akan melihat apa yang diloading blog Anda. Pada tampilan ini pengunjung hanya melihat halaman loading dengan bar dan persentase loading secara keseluruhan dengan berwarna gelap. Coba anda refress blog ini? apa yang terlihat.....lumayan menarik bukan??? ok mari kita bahas cara pembuatannya. Ikuti langkah berikut ini. 

Log in ke blog anda 
Klik Rancangan 
Klik Edit HTML 
Masukkan kode berikut di atas kode </head> 

<script src='http://code.jquery.com/jquery-1.5.min.js' type='text/javascript'/>
<script src='http://blogger-loader.googlecode.com/files/queryLoaderpre.js'
type='text/javascript'/> 

Selanjutnya masukkan kode berikut di atas kode </body>

<script>
QueryLoader.selectorPreload = &quot;body&quot;;
QueryLoader.init();
</script> 

Selanjutnya masukkan kode berikut di atas kode ]]></b:skin>

.QOverlay {
background-color: #000000; /* warna background saat blog anda di loading */
z-index: 9999;
}

.QLoader {
background-color: #CCCCCC; /* warna bar loading */
height: 1px;
}

.QAmt {
color:#FF530D; /* warna angka persentase saat loading */
font-size:50px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;
}

Klik Simpan Template
Selesai dan lihat hasilnya
Selamat mencoba dan sukses selalu