Pages

Kamis, 10 Mei 2012

Tutorial Cara pasang Energy Save Mode di Blog

Pada kesempatan kali ini, mari kita belajar tentang cara memasang “Energy Saving Mode” pada blogger. Kalo sobat masih asing dengan hal ini, bisa sobat coba pada blog saya ini. Jika blog ini sedang idle (tidak melakukan aktivitas apapun), maka kemudian akan muncul halaman baru (semacam screensaver) yang berwarna gelap dan bertuliskan “Energy saving mode”. Untuk lebih jelasnya penampakannya dibawah ini:
image

Tertarik untuk mencobanya? Langsung saja langkah-langkahnya sebagai berikut:
1. Login ke akun blogger sobat.

2. Klik “Design”
image

3. Kemudian klik “Edit HTML”
image

4. Jangan lupa centang “Expand Widget Template”
clip_image002

5. Temukan kode </head> (bisa memanfaatkan ctrl+f) 

6. Letakkan script berikut diatas kode </head>
<!-- save your energy -->
<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'></script>
<!-- save your energy end -->
7. Simpan template sobat.

8. Lihat perbedaannya sekarang.

Bagaimana? Mudah bukan? Selamat mencoba!

Sabtu, 28 Januari 2012

Membuat Link Berbintang-Bintang | Tutorial Blog

Kali ini saya akan berbagi tentang salah satu cara untuk mempercantik blog, yaitu Membuat Link Berbintang-Bintang saat di sentuh cursor. Cara lainnya sobat dapat Membuat Efek Bintang Pada Kursor, Membuat Tombol Share Post Melayang, memasang Widget Google Followers Show Hide, dll.
Berikut Cara Membuat Link Berbintang-Bintang :
  1. Login ke Blogger, Klik Design/Rancangan > Edit HTML.
    Membuat Link Berbintang-Bintang
  2. Beri tanda centang pada Expand Template Widget.
    Membuat Link Berbintang-Bintang
    Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
  3. Cari kode :
    a:hover {
    color:#0000ff;
    text-decoration:underline; 
    }
    Akan lebih mudah jika Anda mencari a:hover saja.
  4. Jika sudah ketemu ganti kode yang berwarna merah dengan kode di bawah ini.
    { background-image: url(http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/dip.gif);}
  5. Terakhir klik SIMPAN / SAVE TEMPLATE.
    Membuat Link Berbintang-Bintang
Sekian Tutorial tentang Membuat Link Berbintang-Bintang.

Membuat Widget Follow Twitter Melayang | Tutorial Blog

Membuat Widget Follow Twitter melayang ini sangat mudah karena kita tidak perlu pusing mengutak atik HTML template kita. Kita tinggal memasukkan ke dalam widget sidebar.
Berikut langkah memasang Widget Follow Twitter melayang :
  1. Login ke akun blogger anda.
  2. Pilih Design/Rancangan > Page Element/Elemen Halaman.
    Design Page Element
  3. Klik Add a Gadget/Tambah Gadget.
    Add Gadget
  4. Pilih HTML/Java Script.
    Html JavaScript
  5. Silahkan Copy kode berikut dan paste didalam konten HTML/Java script nya
    <script type="text/javascript" src="http://tutorial-blog.googlecode.com/files/twitbird.js"></script><br /> <script type="text/javascript"> var birdSprite="http://4.bp.blogspot.com/-jmMHmT3wOak/Tam8b6aBLkI/AAAAAAAABBg/goBeWfPYRYw/s1600/birdsprite.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/m4d13";var tweetThisText = "Official blog twitter page ";tripleflapInit();</script>
    Ganti tulisan yang berwarna merah dengan url twitter Anda.
  6. Terakhir klik Save.
    Save Widget
    Silakan lihat hasilnya di blog Anda.
Sekian Artikel tentang Membuat Widget Follow Twitter Melayang.

Widget Google Followers Show Hide | Tutorial Blog

Widget followers pada umumnya memperberat loading blog, karena itu pada tutorial ini saya akan berbagi cara membuat widget followers yang lebih ringan dengan mode Show-Hide.
Berikut cara Memasang Widget followers yang lebih ringan dengan mode Show-Hide :
  1. Login dengan akun blogger sobat, klik Rancangan / Design > Elemen laman / Page Element.
    Page Element
  2. Klik Add a gadget / Tambah Gadget, dan pilih HTML/Javascript.
    Html JavaScript
  3. Letakkan kode berikut didalam area konten;
    <style type="text/css">
    #fl{position:fixed; left:150px; z-index:+1000;}
    * html #fl{position:relative;}
    .flcontent{
    float:left;
    border:2px solid #676767;
    background:#dddddd repeat-x bottom center scroll;
    -moz-border-radius-topleft:15px;
    -moz-border-radius-topright:15px;
    -moz-border-radius-bottomleft:15px;
    -moz-border-radius-bottomright:15px;
    padding:10px;
    }
    </style>
    <script type="text/javascript">
    function showHideFL(){
    var fl = document.getElementById("fl");
    var w = fl.offsetWidth;
    fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
    fl.opened = !fl.opened;
    }
    function moveFL(x0, xf){
    var fl = document.getElementById("fl");
    var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    fl.style.bottom = x.toString() + "px";
    if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}
    }
    </script>
    <div id="fl">
    <div class="fltab" onclick="showHideFL()"> </div>
    <div class="flcontent">

    Letakan Kode Widget Follow Disini

    <div style="text-align: right;">
    <a href="javascript:showHideFL()">
    [Close]
    </a></div>
    <font size="2"><a href="http://wadahtutorial.blogspot.com/"target=_blank"><div style="color: #eeeeee;">
    <span >Tutorial Blog</span></div></a></font>
    </div>
    <script type="text/javascript">
    var fl = document.getElementById("fl");
    fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
    </script></div>
  4. Selanjutnya buat kode widget followers-nya dengan google friend connect, untuk mengambil kode widget follownya silahkan ikuti tutorial Widget Followers Google Friend Connect
  5. Setelah dapat kode-nya, paste kode tersebut pada area konten Widget Follow tadi (Ganti Letakan Kode Widget Follow Disini [kode yang berwarna merah] dengan kode Widget Follow dari google friend connect), Lalu Save
  6. Terakhir, masih pada Elemen Halaman, klik Tambahkan gadget > HTML/Java Script sekali lagi, Kemudian copy paste-kan kode berikut ini:
    <a href="javascript:showHideFL()"/><img border="0" src="http://i1193.photobucket.com/albums/aa345/bakulatz/fl.png" alt="Follow" title="Klik untuk membuka kotak Follow" style="display:scroll;position: fixed; top:30px;right:50px;cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ;" height="49px" width="130px" /></a>
  7. Save dan lihatlah hasilnya.
Selain mode Show Hide Sobat juga bisa memasang Widget Google Followers Static.
Semoga artikel ini bisa membantu sobat yang ingin Memasang Widget Google Followers dengan mode Show Hide.

Membuat Tombol Share Post Melayang | Tutorial Blog

Share button memang berpengaruh dalam mempromosikan artikel blog kita. Karena itu kali ini saya akan berbagi cara memasang floating share button pada blog. Dalam widget ini terdapat tiga share button, yaitu Twitter, Digg, dan Facebook, widget ini akan selalu melayang, sehingga akan selalu terlihat oleh pengunjung blog.
Berikut langkah memasang Tombol Share melayang :
  1. Login ke akun blogger anda.
  2. Pilih Design/Rancangan > Page Element/Elemen Halaman.
    Design Page Element
  3. Klik Add a Gadget/Tambah Gadget.
    Add Gadget
  4. Pilih HTML/Java Script.
    Html JavaScript
  5. Silahkan Copy kode berikut dan paste didalam konten HTML/Java script nya
    <style  type="text/css">  *{margin:0;padding:0;}  * html #z33sHare{ position: absolute; }  #z33sHare{ right:1%;width:  70px;background:transparant;border:0px solid  #E7E7E7;-moz-border-radius:3px;-webkit-border-radius:3px; position:fixed; top: 20%; }  #z33sHare div{ padding:6px 6px 6px 5px; }  #stw{ margin-left:-2px; }  #sfs{ margin-left:-5px; } </style>  <div id="z33sHare"> <div id="ssl-box"> <div id="stw"><a  name="fb_share" type="box_count"  href="http://www.facebook.com/sharer.php"></a><script src="http://widgets.fbshare.me/files/fbshare.js"></script></div> <div><a  href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script  type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>  <div><script  type="text/javascript"> (function() {   var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];  s.type =  'text/javascript'; s.async = true; s.src =  'http://widgets.digg.com/buttons.js';  s1.parentNode.insertBefore(s, s1); })();</script> <a class="DiggThisButton  DiggMedium"></a></div> </div>
    <div  style="clear:both;"></div> </div>
  6. Terakhir klik Save.
    Save Widget
    Silakan lihat hasilnya di blog Anda.

    Membuat Efek Bintang Pada Kursor | Tutorial Blog

    Untuk mempercantik blog, mungkin Anda bisa menggunakan effect bintang berjatuhan pada cursor, trik yang satu ini akan membuat bintang berjatuhan dari cursor saat cursor digerakkan, walaupun menurut saya itu hanya tanda [+] yang berjatuhan. hehe...
    Untuk membuat efek bintang berjatuhan pada blog sobat dapat memasangnya pada widget HTML/JavaScript blog sobat, atau melalui menu Edit HTML.
    • Melalui widget HTML/JavaScript
    1. Login Ke Blogger. Pilih Design/Rancangan > Page Element.
    2. Klik Add a Gadget / Tambah Gadget. Pilih HTML/JavaScript.
    3. Masukkan kode berikut ke dalam area konten.
      <script src='http://wadah-tutorial.googlecode.com/files/red_star.js' type='text/javascript'/></script>
      Warna bintang diatas berwarna merah. Anda dapat menggantinya dengan warna lain.
      Berikut beberapa kode yang lain :
      <script src='http://wadah-tutorial.googlecode.com/files/yellow_star.js' type='text/javascript'/></script>   *Warna Kuning
      <script src='http://wadah-tutorial.googlecode.com/files/green_star.js' type='text/javascript'/></script>   *Warna Hijau
      <script src='http://wadah-tutorial.googlecode.com/files/blue_star.js' type='text/javascript'/></script>   *Wana Biru
    4. Terakhir klik Simpan / Save.
    • Melalui menu Edit HTML
    1. Login Ke Blogger. Pilih Design/Rancangan > Edit HTML.
    2. Beri centang pada Expand Widget Templates.
    3. Cari kode ]]></b:skin>
    4. Kemudian copy kode diatas dan taruh dibawah kode ]]></b:skin>
      penting : hapus tanda </script> pada kode tersebut.
    5. Terakhir Save / Simpan Template.
    Silakan dicoba dan semoga berhasil Membuat Efek Bintang Pada Kursor.

Bagi Sobat yang ingin mengganti tampilan cursor di blog, itu sangat mudah, bagi yang sudah tau, bagi yang belum tau pasti tidak mudah. hehe...
Sebelumnya saya pernah posting tentang Membuat Efek Bintang Pada Kursor, kali ini saya akan berbagi tentang cara untuk merubah tampilan cursor blog, berikut caranya :
  1. Login ke Blogger. Masuk ke menu Rancangan >Edit HTML
    Cara Merubah Cursor Blog
  2. Cari kode </head>
  3. Letakkan kode berikut tepat diatas kode </head>
    <style type='text/css'>HTML,BODY{cursor:url(&quot;http://cursors4.totallyfreecursors.com/thumbnails/bluemultiglit.gif&quot;), auto;}</style>
    Keterangan: Teks yang berwarna merah adalah alamat url kursor. Silahkan ganti dengan alamat url cursor yang ingin Sobat gunakan.
  4. Setelah Itu Save Template Anda dan selesai...
    Cara Merubah Cursor Blog
Jika sobat tidak memiliki icon kursor, silakan kunjungi http://www.totallyfreecursors.com situs tersebut menyediakan ribuan icon cursor,pilih icon yang sobat mau..
Dan Sobat juga dapat langsung memasangnya melalui widget HTML/Javascript, berikut caranya :
  1. Kunjungi http://www.totallyfreecursors.com
  2. Lalu pilih salah satu cursor yang ingin Sobat gunakan.
    Cara Merubah Cursor Blog
  3. Copy kode yang diberikan.
    Cara Merubah Cursor Blog

Sabtu, 12 Maret 2011

Kumpulan template Keren

caranya gampang 
1. login blogspot
2. k rancangan
3. Edit HTML
4. trs browse tempalte kamu yg donload td da trs upload
gampang kan^^

Kamis, 10 Maret 2011

Cara memasang widget follow show

Follow mungkin tak asing lagi kata-kata ini bagi sobat-sobat blogger, tapi trik yang satu ini mungkin masih jarang ditemukan yaa
Baiklaah kali ini akan saya posting bagaimana cara membuat widget follower melayang dengan mode show. Postingan ini merupakan permintaan dari beberepa sobat blogger.
Trik ini merupakan pengembangan dari Script untuk membuat show Cbox. 
Mau tau caranya ? mari ikuti langka langkah berikut :

Cara buat widget follow show
1. Login ke blogger
2. Pilih Rancangan 
3. Klik Tambah Gadget
4. Pilih HTML/JavaScript
5. Masukan kode HTML berikut ini

<style type="text/css">
#fl{
position:fixed;
left:150px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #676767;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7xJCPUd5IdCzOvRZ7ocPap3Ej6A_JG06AmqCIIfqS3R8AsAYw8gAMEsz5g7vUnk62HEPcLa364c5id8qbKNhCm4HHVv9xXwgIQmvRK-vObl-xUnVEpXvGrFM24-v18fv3LcTwbR5qPAk/)#000000 repeat-x bottom center scroll;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideFL(){
var fl = document.getElementById("fl");
var w = fl.offsetWidth;
fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
fl.opened = !fl.opened;
}
function moveFL(x0, xf){
var fl = document.getElementById("fl");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
fl.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}
}
</script>
<div id="fl">
<div class="fltab" onclick="showHideFL()"> </div>
<div class="flcontent">


Kode Widget Follow Disini


<div style="text-align: right;">
<a href="javascript:showHideFL()">
[Tutup]
</a></div>
<font size="2"><a href="http://ini-hanya-blog.blogspot.com/2011/01/cara-memasang-widget-follow-show.html"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">By Fadhil corbin</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>

6. untuk mengambil kode widget follownya silahkan masuk ke link ini http://www.google.com/friendconnect
7. Lihat gambar dibawah ini

[1] Pilih blog sobat yang akan dipasang widget follownya
[2] Klik "Tambahkan Gadget Anggota"
[3] Silahkan diatur ukuran, warna sendiri
[4] Klik "Buat kode"
[5] Silahkan Copy kodenya, dan ikuti langkah selanjutnya
8. Paste kode Widget Follow ada tadi pada tulisan berwarna merah (Kode Widget Follow Disini)
9. Simpan jika sudah selesai

10. Untuk memasang tombol Navigasinya, silahkan masuk ke :
[1] Masuk ke Rancangan
[2] Klik Edit HTML
[3] Centang Expand Template Widget
[4] Taruh kode berikut ini diatas kode <body>
<a href='javascript:showHideFL()' style='display:scroll;position: fixed; bottom:5px;left:5px;' title='Follow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDs5OY5R5St0JO-uau50DZPkT9uN9S3eEFk7yuaKs37YSyL1ANKioc36XR9oUbGmgEYV5SRcuUWcj82sXDer-Kv0lB0PWdIrVMsXj98r4aMxMMRfAlMfGBu5_OFhVYyYrJ9f4kv8xaPeU/'/></a>
Liadnya di sini
11. Simpan jika sudah selesai
Sekarang lihat hasilnya kawan, dan jangan lupa memberi komentar ya.

Cara Kasih Lagu Di Blog

1. Login Blogspot.com
2. Ke rancangan
3. Tambah gadget HTML/JavaScript
4. Copas code nih
<center><a href="http://fullmusik.co.cc" target="_blank"><img src="http://fullmusik.org/guci.gif" border="0" /><br /><img src="http://fullmusik.org/music.gif" border="0" /><br /><embed src="http://fullmusik.org/iza/wst/Bruno_Mars_-_Just_The_Way_You_Are.swf" AUTOSTART=TRUE LOOP=TRUE WIDTH=0 HEIGHT=0 ALIGN="CENTER"></embed><br />Gratisan Musik</a></center>
Bruno Mars-Just The Way U are
Liad Di Sini
KLu Mau Lagu laen liad di sini

Cara membuat efek kursor bertabur bintang di blog

Cara membuat efek kursor bertabur bintang
1. Login ke blogger
2. Pilih Rancangan
3. Klik Tambah Gadget
4. Pilih HTML/JavaScript
5. Masukan kode HTML berikut ini
Pilih script dibawah ini sesuai dengan keinginan kalian, kalian dapat memilih warna dengan script dibawah ini, silahkan pilih salah satu kemudian masukan pada gadget JavaScript yang telah kalian pilih tadi.

Untuk bintang biru
<script src="http://denisahlan.netau.net/bintang.biru.js" type="text/javascript"></script> 
Untuk bintang hijau
<script src="http://denisahlan.netau.net/bintang.hijau.js" type="text/javascript"></script> 
Untuk bintang merah
<script src="http://denisahlan.netau.net/bintang.merah.js" type="text/javascript"></script>
Untuk bintang putih
<script src="http://denisahlan.netau.net/bintang.putih.js" type="text/javascript"></script> 
Untuk bintang ungu
<script src="http://denisahlan.netau.net/bintang.ungu.js" type="text/javascript"></script> 
Kalo mao scriptnya klick di sini
6. Simpan jika sudah selesai