Friday, October 28, 2011

Cara memasang Energy Saving Mode Pada Blog

Cara memasang energy saving mode pada blog sangat mudah, jika kamu pasang script ini dan membiarkan blogmu itu tanpa aktivitas maka script ini akan bekerja,yaitu akan seperti menampilkan screensaver hitam,lihat gambar dibawah ini! ini adalah tampilan dari blog yang dipasang script energy saving mode:

Cara memasang Energy Saving Mode Pada Blog

Nah,bagimana sih cara Cara memasang Energy Saving Mode Pada Blog? ikuti langkah2 dibawah ini!

Untuk pengguna Blogger/Blogspot:
  • Login ke halaman admin [blogger.com]
  • Klik Rancangan
  • kemudian add widget (boleh di bagian manapun yang sesuai, coz tidak ditampilkan penuh)
  • pilh widget jenis html/javascript, judul boleh dikosongkan
  • paste kode berikut:
    <script language="javascript" type="text/javascript" src="http://delpid.googlecode.com/files/energysavingmode.js"></script>
  • kemudian save/simpan.
Nah,mudah kan.. selamat mencoba!

Artikel terkait:
Memberi gambar background pada Cbox
Memberi gambar background pada shoutmix
Cara Menyembunyikan Buku Tamu Rolling Widget
Cara menyembunyikan shoutbox dengan ajax style
Membuat Warna Kotak Komentar Admin Berbeda pada Blog
Membuat Kotak Parse kode HTML
Menampilkan foto profil pada komentar blog

Monday, October 24, 2011

Memberi gambar background pada Cbox

Sebelumnya saya telah tulis tentang cara memberi gambar pada buku tamu atau shoutmix lalu bagaimana caranya kalau kita menggunakan cbox? nah,dibawah ini contoh tampilan guest book atau buku tamu dengan gambar background dengan cbox.



Memberi gambar background pada CboxSebelum Memberi gambar background pada Cbox,silahkan kamu membuat buku tamunya dulu klik disini, setelah jadi kamu pilih style presets

Memberi gambar background pada Cbox
Lalu pilih style yang transparan, atur warna text dan link sesuai yang kamu inginkan lalu save,seperti gambar dibawah ini:

Memberi gambar background pada CboxSetelah selesei edit kode yang kamu dapat dari cbox tadi! kode cbox biasanya seperti dibawah ini:
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="220" height="305" src="http://www5.cbox.ws/box/?boxid=616173&amp;boxtag=fp1wb6&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain5-616173" style="border:#000000 1px solid;" id="cboxmain5-616173"></iframe></div>
<div><iframe frameborder="0" width="220" height="75" src="http://www5.cbox.ws/box/?boxid=616173&amp;boxtag=fp1wb6&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-616173" style="border:#000000 1px solid;border-top:0px" id="cboxform5-616173"></iframe></div>
</div>
<!-- END CBOX -->

Ganti kode yang berwarna merah dengan kode dibawah ini!
<div id="cboxdiv" style="text-align: center; line-height: 0;background-position:center;background:url(url gambar kamu);width:220px;height:305px;background-repeat:no-repeat;">
Pada kode yang berwarna hijau silahkan ganti dengan url gambar yang kamu inginkan,dan ukuran yang berwarna merah silahkan sesuaikan dengan ukuran cbok kamu,nih ada beberapa gambar background yang bisa kamu pakai juga.
http://www.bestiphonewallpapers.com/bulkupload/081109/Cartoon/PinkHelloKitty.jpg
http://www.dreamstime.com/blue-background-thumb2315107.jpg
http://www.dreamstime.com/floral-background-thumb4863792.jpg
setelah semua selesei silahkan pasang di blog sobat,kamu bisa membuat buku tamumu secara tersembunyi juga boleh..selamat mencoba!

Friday, October 21, 2011

Memberi gambar background pada shoutmix

Buku tamu ada bermacam-macam,kamu bisa membuatnya buku tamu pada blog kamu sesui keinginan kamu,untuk tata letaknya kamu juga bisa mengaturnya juga,misalnya membuat buku tamu secara tersembunyi dengan rolling widget maupun dengan gaya ajax style,Nah kali ini saya akan memberi tutorial tentang memberi gambar background pada shoutmix kamu,untuk lebih jelas,lihat gambar dibawah ini:

Memberi gambar background pada shoutmix

Indah bukan? langsung saja,cara memberi gambar background pada shoutmix adalah sbb:
  1. Login ke blog kamu.
  2. Klik rancangan.
  3. Klik Add a Gadget HTML/ Javascript
  4. Copy code dibawah ini:
    <div id="edited" style="width:250px; height:400px; background:url(http://www.soiphone.com/uploads/200902/f/1235098340.jpg) no-repeat left top; padding-top:-5px; padding-left:0px; position:relative" align="center">
    <!-- Begin ShoutMix - http://www.shoutmix.com -->
    <iframe frameborder="0" title="CHEKGUISZA" height="400" src="url shoutmix anda" id="r" style="filter:alpha(opacity=50);opacity:0.55;-moz-opacity:0.55; display:block; " scrolling="auto" width="250">
    <a style="" href="url shoutmix anda">View shoutbox</a>
    </iframe>></div>
    <!-- End ShoutMix -->
  5. Save
NB:
Warna hijau adalah ukuran untuk shoutmix kamu,sesuaikan dengan kebutuhanmu
Ganti url shoutmix dengan url shoutmix kamu,untuk mengetahui url shoutmix kamu,silahkan arahkan cursor pada link refress shoutmix kamu lalu klik kanan dan copy link location.
Warna Kuning adalah url dari gambar background shoutmix kamu, kamu boleh juga coba beberapa url dibawah ini:
http://www.bestiphonewallpapers.com/bulkupload/081109/Cartoon/PinkHelloKitty.jpg
http://www.dreamstime.com/blue-background-thumb2315107.jpg
http://www.dreamstime.com/floral-background-thumb4863792.jpg

Saturday, October 15, 2011

Cara Menyembunyikan Buku Tamu Rolling Widget

Sebelumnya saya telah tulis cara menyembunyikan buku tamu atau shoutbox dengan ajax style,nah,sekarang ada cara yang lain lagi yang tak kalah bagusnya,yakni dengan cara menyembunyikan buku tamu dengan rolling widget.Langsung saja ya,tampilan buku tamunya seperti gambar dibawah ini:

Cara Menyembunyikan  Buku Tamu Rolling Widget

Jika kamu mengklik link guest book pada navbar maka akan muncul buku tamunya,dan untuk menutupnya lagi silahkan klik lagi link guest book tersebut lagi,Nah,Bagaimana cara membuatnya? gampang aja kok, karena sebenarnya widget ini bukanlah widget baru melainkan rolling widget yang script-nya sedikit saya modifikasi.

Untuk membuat rolling widget supaya bersembunyi, berikut adalah langkah-langkahnya:
  1. Login ke blogspot kamu
  2. Klik Rancangan
  3. Klik Edit HTML
  4. Centang kotak kecil html dan download html kamu untuk backup
  5. Copy kode dibah ini dan letakkan tepat dibawah kode </head>

    <!-- Mulai Rolling Widget -->
    <style type="text/css">
    #gb{
    position:fixed;
    top:10px; /*jarak dari atas*/
    right:0px;
    z-index:+1000;
    }
    * html #gb{position:relative;}

    .gbtab{
    height:100px;
    width:30px;
    float:left;
    cursor:pointer;
    background:none;
    }
    .gbcontent{
    float:left;
    border:2px solid #888888; /*warna bingkai*/
    background:#F0F0F0; /*warna latar*/
    padding:5px 10px 0px 10px;
    }
    </style>

    <script type="text/javascript">
    function showHideGB(){
    var gb = document.getElementById("gb");
    var w = gb.offsetWidth;
    gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
    gb.opened = !gb.opened;
    }
    function moveGB(x0, xf){
    var gb = document.getElementById("gb");
    var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    gb.style.right = x.toString() + "px";
    if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
    }
    </script>

    <div id="gb">
    <div class="gbtab" onclick="showHideGB()"></div>
    <div class="gbcontent">
    <div style="text-align:center;"><a href="javascript:showHideGB()" title="Close/Tutup"><img style="border:0px; width:100px; height:auto;" alt="Guestbook" src="http://i563.photobucket.com/albums/ss76/peace_enes/guestbook.png" /></a></div>

    Kode Shoutbox atau Buku Tamu

    <script type="text/javascript" src="http://delpid.googlecode.com/files/rollingwidget.js"></script>
    </div></div>
    <!-- Selesai Rolling Widget -->
  6. Save template kamu.
  7. Setelah itu buatlah sebuah link untuk menampilkan rolling widget, seperti berikut :

    <a href="javascript:showHideGB()">Buku Tamu</a>

  8. Kamu dapat menempatkan link ini pada navbar menu, sidebar, atau di tempat lain. Kamu juga dapat mengganti Buku Tamu dengan Guest Book, Chat Room, ShoutBox, atau Juga dengan gambar.

Wednesday, October 12, 2011

Cara menyembunyikan shoutbox dengan ajax style

Shoutbox sangat penting pada sebuah blog,karena dengan adanya shoutbox kita bisa melakukan interaksi pada blog yang kita kunjungi, jadi buat yang belum memasang shoutbox atau buku tamu pada blog,silahkan baca tentang cara memasang shoutbox atau buku tamu disini.

Shoutbox juga bisa memperindah tampilan daripada blog kamu,kamu bisa menyembunyikan shoutbox pada sisi kiri atau kanan blog kamu juga bisa menambah shoutbox dengan emoticon sesuai yang kamu inginkan agar blog terlihat lebih keren.

Nah,kali ini saya akan share tentang cara menyembunyikan shoutbox kamu dengan ajax style, dengan cara ini buku tamu tidak akan terlihat sebelum tombol shoutbox di klik,cara menyembnunyikan shoutbox dengan cara ini saya pikir keren juga dapat mengurangi loading shoutbox itu sendiri.

Inilah tampilan menyembunyikan shoutbox dengan ajax style:

Sebelum di klik

Cara menyembunyikan shoutbox dengan ajax styleSetelah di klik

Cara menyembunyikan shoutbox dengan ajax style

Nah keren kan,cara membuatnya mudah,caranya sebagai berikut:
  • Login ke blogspot kamu.
  • Klik rancangan.
  • Klik add gadget
  • Pilih HTML/JavaScript
  • Masukkan kode dibawah ini:

    <div style='display:scroll;position:fixed;top:70px;right:-0px;'><script type="text/javascript" src="http://delpid.googlecode.com/files/jquery-latest.pack.js"></script><script>$(document).ready(function(){$('a[name=modal]').click(function(e){e.preventDefault();var id=$(this).attr('href');var maskHeight=$(document).height();var maskWidth=$(window).width();$('#mask').css({'width':maskWidth,'height':maskHeight});var winH=$(window).height();var winW=$(window).width();$(id).css('top',winH/2-$(id).height()/2);$(id).css('left',winW/2-$(id).width()/2);$(id).fadeIn(2000);});$('.window .close').click(function(e){e.preventDefault();$('#mask').hide();$('.window').hide();});$('#mask').click(function(){$(this).hide();$('.window').hide();});});</script><style>img{border:none}#mask{position:center;left:0;top:0;z-index:9000;background-color:#000;display:none}#boxes .window{position:fixed;left:0;top:0;width:271px;height:477px;display:none;z-index:9999;padding:20px}#boxes #polska{background:none no-repeat 0 0 transparent;width:271px;height:480px;padding:56px 0 20px 5px}#closesb{padding:2px 0 0 0}#author{padding:8px 0 0 168px}</style><ul><center><a href="#polska" name="modal"><button>ShoutBox</button></a></center></ul><div id="boxes"><div id="polska" class="window"><center>GANTIKAN TULISAN INI DENGAN CODE SHOUTBOX ANDA</center><div id="author"></div><div id="closesb"><center><input type="button" value="Close" class="close"/><center></div></div><div id="mask"></div></div></div>
  • Ganti tulisan berwarna merah dengan kode shoutbox kamu
  • Simpan.



Lihatlah hasilnya,semoga berhasil.

Thursday, October 6, 2011

Benarkah Google adsense support bahasa Indonesia?

Hari ini saya blogwalking ke beberapa blog temen saya,tanpa sengaja saya menemukan salah satu blog yang memiliki iklan google juga,saya melihat ternyata tulisan yang biasa muncul dengan tulisan "AdChoices" atau "Ads by Google" berubah menjadi "Iklan oleh Google" sayapun segera meload lagi blog delpid ini,ternyata masih AdChoices, pertanyaan saya,dengan adanya tulisan itu lagi google adsense telah benar2 mendukung blog berbahasa indonesia? kalau benar kita sekarang bisa memasang script bukan melalui google friendconnect lagi dunk..tapi saya masih takut untuk memasang script google adsense langsung tanpa melalui google friendconnect.

Gambar tampilan iklan oleh google:

Benarkah Google adsense support bahasa Indonesia?

Nah,buat temen2 mungkin bisa memberi masukan,bahwa benarkah iklan google telah support bahasa Indonesia? silahkan beri komentar kamu dibawah! terima kasih sebelumnya.

Tuesday, October 4, 2011

Cara Membuat Blockquote Dengan CSS

Blockquote adalah kalimat berisi kutipan dari suatu sumber yang di blok pada satu kotak. Blockquote bisa digunakan jika suatu kalimat atau paragraf dianggap penting atau bisa juga merupakan penekanan.

Blockquete terkadang juga digunakan untuk memberi keindahan dalam menampilkan kode html pada postingan blog,didalam setiap template blogger memiliki kode blockquuote yang berbeda-beda,nah disinilah kita bisa merubah kode css blockquote agar tampilanya sesuai dengan yang kita inginkan,nih salah satu contoh gambar blockquote.

Cara Membuat Blockquote Dengan CSS

Dibawah ini ada beberapa kode css yang berbeda untuk blockquote,silahkan pilih dan terapkan sesuai yang kamu inginkan! ikuti langkah2nya sbb:

1. Login > dashboard > design > edit HTML

2. Backup template asal blog dengan download full template

3. Dengan menggunakan fungsi Find (ctrl + F), cari kod berikut

.post blockquote {

4. Kalau sudah ketemu ganti dengan salah satu kode dibawah ini sesuai blockquote yang kamu inginkan.
  • Kode css blockquote
    blockquote {background: #EEE ;
    width: 400px;
    padding: 5px;
    margin: 5px;
    width: 400px;
    overflow:auto;
    max-height:250px;
    -webkit-box-shadow:
    1px 1px 0 rgba(0, 0, 0, 0.100),
    3px 3px 0 rgba(255, 255, 255, 1.0),
    4px 4px 0 rgba(0, 0, 0, 0.125),
    6px 6px 0 rgba(255, 255, 255, 1.0),
    7px 7px 0 rgba(0, 0, 0, 0.150),
    9px 9px 0 rgba(255, 255, 255, 1.0),
    10px 10px 0 rgba(0, 0, 0, 0.175);
    -moz-box-shadow:
    1px 1px 0 rgba(0, 0, 0, 0.100),
    3px 3px 0 rgba(255, 255, 255, 1.0),
    4px 4px 0 rgba(0, 0, 0, 0.125),
    6px 6px 0 rgba(255, 255, 255, 1.0),
    7px 7px 0 rgba(0, 0, 0, 0.150),
    9px 9px 0 rgba(255, 255, 255, 1.0),
    10px 10px 0 rgba(0, 0, 0, 0.175);
    box-shadow:
    1px 1px 0 rgba(0, 0, 0, 0.100),
    3px 3px 0 rgba(255, 255, 255, 1.0),
    4px 4px 0 rgba(0, 0, 0, 0.125),
    6px 6px 0 rgba(255, 255, 255, 1.0),
    7px 7px 0 rgba(0, 0, 0, 0.150),
    9px 9px 0 rgba(255, 255, 255, 1.0),
    10px 10px 0 rgba(0, 0, 0, 0.175);

    }

    Hasilnya akan seperti gambar dibawah ini:

    Cara Membuat Blockquote Dengan CSS
  • Kode css blockquote
    .post blockquote {
    background: #F3F3F1 url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5Jv9YD4I/AAAAAAAACPc/BJ-zgoLMJXw/s1600/comma-side-orange1.gif);
    background-position:; background-repeat:repeat-y;
    margin: 0 20px;
    padding: 20px 20px 10px 45px; font-size: 0.9em;
    font: italic 1.2em Georgia, "Times New Roman", Times, serif;
    }

    .post blockquote p {
    margin: 0; padding-top: 10px;
    }

    Hailnya akan seperti dibawah ini

    Cara Membuat Blockquote Dengan CSS
  • Kode blockquote
    .post blockquote {
    background: #484B52 url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5J3xbxyI/AAAAAAAACPk/gxR76OhXXaw/s1600/green-black-side.gif) ;
    background-position:;
    background-repeat:repeat-y;
    margin: 0 20px;
    padding: 20px 20px 20px 50px; color:#C7CACF;
    font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman";
    }

    .post blockquote p {
    margin: 0; padding-top: 10px;
    }

    Hasilnya akan seperti dibawah ini

    Cara Membuat Blockquote Dengan CSS
  • Kode blockquote
    .post blockquote {
    background-position:-10px -7px;
    border: 1px dashed #FFC600;
    margin: 20px 10; padding: 0 20px 0 50px;
    background: url("http://3.bp.blogspot.com/_jM8-wHc3NKY/TR3MwDiXB1I/AAAAAAAAAQo/Fi8TGwkSRNQ/s1600/quote.png") 5% no-repeat #FFF8DD;
    }

    Hasilnya akan seperti dibawah ini

    Cara Membuat Blockquote Dengan CSS
  • Kode blockquote
    blockquote{width: 90%;background:#FFF; padding:5px 15px; margin:5px; color:#555; border:1px solid #C1C1AE; line-height:150%; font-size:12px;border: 1px solid #eee;
    -webkit-box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
    -moz-box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
    box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;}

    Hasilnya akan seperti gambar dibawah

    Cara Membuat Blockquote Dengan CSS
5. Simpan template kamu.

NB:
Sekarang untuk cara penggunaan blockquotenya pada menu Posting bisa dilihat pada gambar berikut:



Blok kode atau teks yang diinginkan lalu klik Tool Menu yang ditunjuk dengan tanda panah.Silahkan pilih sesuai yang kanu inginkan,dan untuk membuat blockquote dengan fungsi scroll kamu bisa membuatnya secara manual saat menulis dengan mode html saat menulis,nih kodenya:
<blockquote style="overflow:auto;height:100px;">Text kamu disini</blockquote>

semoga bermanfaat!

Sunday, October 2, 2011

Menampilkan judul posting saja pada label

Label pada blogger adalah salah satu navigasi untuk mengetahui berbagai macam isi daripada sebuah blog,label bisa dibuat tag cloud atau bisa juga dibuat label berwarna-warni untuk memperindah tampilan sebuah blog jika pengunjung mengklik salah satu label pada blog kamu,maka akan muncul judu-judul postingan yang susuai dengan label tersebut,tapi jika yang tampil pada halaman label tersebut adalah judul posting beserta seluruh isi artikel maka halaman label itu akan menjadi sangat panjang,dan ini malah membuat sulit pengunjung untuk mengetahui isi dari blog itu,lalu bagaimana cara agar judul posting saja pada halaman label?

Lihat halaman label dari blog delpid ini seperti gambar dibawah ini:

Menampilkan judul posting saja pada label

Nah,salah satu cara untuk membuat halaman label seperti diatas ternyata caranya sangat mudah kok,silahkan baca dan ikuti langkah2 cara Menampilkan judul posting saja pada label dibawah ini!
  1. Masuk ke dashboard > Design/Rancangan > Klik 'expand widget template'.
  2. Cari kode: <b:include data='post' name='post'/> (Ctrl+F)
  3. Ganti dengan script ini:

    <!--Judul post saja di label-->
    <b:if cond='data:blog.searchLabel'>
    <h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
    <b:else/>
    <b:if cond='data:blog.pageType == "archive"'>
    <h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    </b:if>
    <!--delpid.blogspot.com-->


  4. Save template HTML.
  5. Coba dicek hasilnya pada halaman label kamu.
Semoga berhasil!
 

Sponsor