Selasa, 15 Februari 2011

trick agar blog kiita diseo fredly



Tips dan Trik Blog: Agar Title Blog Kita SEO Friendly

Agar Title Blog Kita SEO FriendlyAgar title blogger lebih lebih bersahabat dengan Search Engeine (SEO Friendly) kita dapat mengganti Title standar yang sudah ada di dalam template blog kita dengan Title kode yang sudah dimodifikasi.
Caranya adalah:

  1. Login Kehalaman admin blog anda http://blogger.com/home
  2. Klik Rancangan
  3. Pilih Edit html template
  4. Cari kode title dibawah ini:

<title><data:blog.pageTitle/></title>

Kemudian ganti semua kode diatas dengan kode dibawah

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
Semoga bermanfaat.

scrip buku tamu model show hide

Udah lama banget blog ini gak keurus, maklum saja kerjaan offline banyak, kerjaan online juga banyak, nggarap orderan web/ blog, dan ngelola beberapa blog yang lain.

Okey, langsung saja, ini saya ada koleksi script buku tamu dengan model show hide, jadi buku tamu yang biasanya nongkrong di sidebar blog, sekarang melayang disebelah kanan, dan hanya tampak tombolnya saja. Untuk menggunakan script ini, anda hanya cukup mengcopy script dibawah ini letakan di Gadget Html/ Java Script, letakan saja di sembarang tempat, boleh sidebar kanan, bagian header, atau bagian footer, edit teks YOURID dengan nama anda, atau nama blog anda, Buku Tamu Model Show Hide sudah bisa anda nikmati.


<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjsTyF9m8N2bS5hFO049RZ052679kJ1CY1n2_NazhgcAglisaQZTZrFEf-AJa4rHfqWlfdAj65jMHHtxeqZUo7r-kJjEzwsJ_HBqprPf8M5WU5c5vqB7hwaVNoyAb3OcuQdGc6v_Qtu6ab/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding: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">
<!-- Start http://shoutbox.widget.me HTML Code -->
<iframe title="Shoutbox" src="http://shoutbox.widget.me/window.html?uid=YOURID" width="200" height="300" frameborder="0" scrolling="auto"></iframe>
<br /><a href="http://shoutbox.widget.me" title="Get your own free chat widget!">Shoutbox widget</a><br />
<!-- End http://shoutbox.widget.me HTML Code -->
<br/>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Selamat mencoba, semoga bermanfaat.

Minggu, 13 Februari 2011

membuat slide gambar


Membuat Slide Gambar Foto seperti terjatuh dengan jquery

Berbagai ragam dan model slide dapat saja tercipta berkat adanya penggunaan jquery. Mungkin sobat sering melihat gambar atau foto yang ditampilkan dalam bentuk slide pada blog yang anda kunjungi. Ini tentu dapat memberikan daya tarik bagi siapa saja yang melihat Bentuk slide foto tersebut diantaranya ada yang menggunakan efek transisi zoom, berjalan horizontal, vertical dan masih banyak lagi efek-efek yang tercipta dari kehandalan jquery ini.

Nah kali ini saya akan coba buat slide gambar foto terjatuh. Hasilnya bisa anda lihat di blog ini.

Langkah pembuatannya :
1.    Cari kode  </head>
2.    Pasang kode Jquery ini diatas kode tadi
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

(bila di dalam template anda sudah terpasang jquery, maka jangan lakukan langkah ini)

3.    Klik save

4.    Kemudian tambah gadget baru (Add new gadget)

5.    pilih HTML/JavaScript

6.    copy dan paste kode ini ke dalam gadget tadi.

<script src=" http://kodecode.googlecode.com/files/animation1.js " type="text/javascript">
</script><script src="http://kodecode.googlecode.com/files/animation2.js" type="text/javascript"></script>
<script src="http://kodecode.googlecode.com/files/animation3.js" type="text/javascript">
</script><style type="text/css">
.amdhas { height: 232px; width: 432px; padding:0; margin:0; overflow: hidden; -webkit-box-shadow: 2px 2px 4px #000;-moz-box-shadow: 2px 2px 4px #000;-moz-border-radius: 10px; -webkit-border-radius: 10px;}.amdhas img { height: 200px; width: 400px; padding: 15px; border: 1px solid #ccc; background-color: #f8f8ff;-webkit-border-radius: 10px;-moz-border-radius: 10px;}</style><div class="amdhas" id="ke2">
<img height="200" src="URL GAMBAR DI SINI" width="400" />
<img height="200" src="URL GAMBAR DI SINI" width="400" />
<img height="200" src="URL GAMBAR DI SINI" width="400" /></div>
<script type="text/javascript">
$('#ke2').cycle({fx:'scrollDown',speedIn:  2000,speedOut: 500,easeIn:'bounceout',easeOut: 'backin',delay:-2000});
</script>

7.    Simpan / Save dan lihat hasilnya

Keterangan:
Ukuran Gambar Foto dapat diatur dengan merubah angka 232, 432, 200, 400

Selamat menikmati Slide Gambar Foto Terjatuh

membuat slide gambar

Demo Membuat Slide Gambar di Blog Dengan JQuery Silahkan anda lihat di http://smpn1klw.sch.id dibawah header ada slide show gambar dengan animasi transisi yang berubah-ubah, dan hasilnya cukup apik juga.
  1. Silahkan login dulu ke halaman admin blog anda melalui http://blogger.com/home 
  2. Langsung tuju ke halaman layout atau tata letak, dan klik edit html -template
  3. Beri centang pada expand Template widget
  4. Letakkan kode berikut di atas kode ]]></b:skin>
    /* Coin Slider jQuery plugin CSS styles http://workshop.rs/projects/coin-slider */ .coin-slider { overflow: hidden; zoom: 1; position: relative; } .coin-slider a{ text-decoration: none; outline: none; border: none; } .cs-buttons { font-size: 0px; padding: 10px; float: left; } .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; } .cs-active { background-color: #B8C4CF; color: #FFFFFF; } .cs-title { width: 563px; padding: 10px; background-color: #000000; color: #FFFFFF; } .cs-prev, .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
  5. Letakkan kode dibawah ini diatas kode  </head>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://mrmung.googlecode.com/files/coin-slider.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $(&#39;#coin-slider&#39;).coinslider({ width: 563, navigation: false, delay: 5000 }); }); </script>
    Width: 563 : silahkan anda sesuaikan dengan lebar tampilan gambar yang anda inginkan, usahakan gambar sudah di atur ke ukuran yang sesuai, biar tampak manis dilihat. 
  6. Simpan, kemudian klik tata letak 
  7. Tambahkan gadget html/java script kemudian copas kode berikut:
      <div id='coin-slider'>

    <a href="img kamu url" target="_blank">
            <img src="link letak gambar" />
            <span>
        Deskripsi gambar......
            </span>
        </a>
       
    <a href="img kamu url" target="_blank">
            <img src="link letak gambar" />
            <span>
        Deskripsi gambar......
            </span>
        </a>

    <a href="imgkamu_url" target="_blank">
            <img src="link letak gambar" />
            <span>
        Deskripsi gambar......
            </span>
        </a>

    </div>
    Silahkan ganti Link letak gambar dengan lokasi penyimpanan gambar anda.
  8.  Simpan dan silahkan nikmati hasilnya.