VHA-INFO: Tutorial Blog

Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Rabu, 03 Agustus 2011

Mengganti Sidebar Blog Dengan Animasi

Berikut ini akan saya terangkan bagaimana cara mengganti background sidebar pada blog sobat menjadi seperti gambar si samping

Pertama Login Dulu Ke Blog
Kemudian Pilih Tata Letak
Pilih Edit HTML
Lalu Cari Code Berikut

Untuk mengganti background sidebar Sobat, pertama simpan dulu gambar-gambar di atas dan uploadlah gambar tersebut ke photobucket atau hosting Sobat. Atau jika Sobat mau pakai gambar lain silahkan saja, Sobat tinggal simpan file gambarnya di hosting Sobat.

Lalu, cari kode di bawah ini :

.sidebar h2, .middlecol h2, .bottom h2{

color: $sidebarcolor;

text-transform: capitalize;

font-size: 14px;

font-family: Arial, Tahoma, Verdana;

font-weight: bold;

margin: 0px 0px 5px 0px;

padding: 0px 0px 2px 0px;

border-bottom:1px solid $bordercolor;

}

Lalu tambahkan script/link ini :

background:#f7f7f7 url(http://i696.photobucket.com/albums/vv321/milyarder/sidebarbanner.gif?imgmax=800)repeat;

Ganti link yang berwarna merah dengan link gambar Sobat. Lalu tambahkan ke dalam script .sidebar h2 yang tadi Sobat cari. Sehingga hasilanya akan seperti ini :

.sidebar h2, .middlecol h2, .bottom h2{

color: $sidebarcolor;

text-transform: capitalize;

font-size: 14px;

font-family: Arial, Tahoma, Verdana;

font-weight: bold;

margin: 0px 0px 5px 0px;

padding: 0px 0px 2px 0px;

border-bottom:1px solid $bordercolor;

background:#f7f7f7 url(http://i696.photobucket.com/albums/vv321/milyarder/sidebarbanner.gif?imgmax=800)repeat;

}

Kemudian Simpan
Dan Lihat HAsilnya,,,
Semoga Bermanfaat,,,

Jumat, 01 Juli 2011

menu translate navbar

Bagus kan...? mungkin diantara JUTAAN blog didunia, sudah banyak yang memasangnya. bagi yang belum, yuk kita bahas cara membuatnya...!

1. Login Ke blogger kalian
2. Masuk Ke Rancangan / Tata Letak
3. Pilih Elemen Halaman
4. Tambah Gadget ---> HTML/Java Script
5. Copy dech script dibawah ini :

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'id'
}, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script><br />

6. simpan dan selesai.

Sabtu, 11 Juni 2011

membuat menu multi kolom

Ini sama halnya cara membuat menu tab view tapi mungkin Anda tidak tahu, itu bagi para pemula termasuk saya :) . Gambar disamping adalah contoh dari menu tab view sama halnya dengan daftar isi bentuknya tapi ini disertai dengan atau terbagi menjadi tiga kolom supaya memudahkan Anda untuk menaruh setiap judul posting yang baru Anda posting seperti blog punya Mas Debby. Selain untuk daftar isi, ini juga bisa digunakan untuk menaruh link banner teman2 blogger Anda, data statistik dari traffic Anda jika Anda membuat histats, visitor, pagerank dll. Membuat tab viem menu ini juga bisa meminimalisasi blog Anda biar tidak terlalu berantakan dimana fitur blog Anda yang sebagian besar menggunakan HTML atau Javascript. Kalau begitu mari kita coba buat dengan tips membuat view tab menu berikut ini:

1. Login ke blogger, Dasbor pergi ke>> Rancangan>>Edit HML.

2. Centang Expand Template Widget.

3. Anda juga perlu untuk membackup template asli anda terlebih dahulu dengan Download Template Lengkap dan memilih simpan/save dan menyimpannya pada hard disk. Cadangan ini akan bermanfaat jika ada yang tidak beres dengan langkah2 yang anda kerjakan.

4. Cari kode ]]></b:skin>
Kalau sulit bisa dengan cara cepat saat pencarian yaitu dengan tekan CTRL F/F3.

5. Letakkan kode dibawah ini diatas kode tersebut.

/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {widht:100%;
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 89px; /* ukuran lebar menu */
text-align: center; /* rata tengah */
height: 30px; /* ukuran tinggi menu */
padding-top: 10px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #ccc; /* warna border menu */
border-bottom-width: 0;
margin:0px;
padding: 5px 0;
font-family:verdana,Helvetica,sans-serif; /* font */
font-size:12px; /* ukuran font */
font-weight:bold; /* besar hurup menu */
background-color: #D8D8D8; /* warna latar menu */
color: #424242; /* warna huruf menu */
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
}
div.TabView div.Tabs a.Active {
background-color: gray; /* warna background menu aktif */
color: #000000;
}
div.TabView div.Tabs a:hover {
background-color: #D8D8D8; /* warna background menu hover */
color: #424242;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /* warna border kotak utama */
overflow: hidden;
background:#D8D8D8; /* background kotak utama */
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 7px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 5px 0px;
font-size: 12px; /* besar hurup kotak utama */
}

/* tabview css end */

Jangan lupa edit yang ditunjukkan kode yang berwarna merah sepaya sesuai dengan blog Anda Ok.

6. Kemudian Anda cari kode </head> dan letak kode dibawah ini diatas kode tersebut.

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

7. Jangan lupa Simpan Template.

8. Kemudian Anda masuk ke menu Rancangan.

9. Klik Elemen Laman.

10. Klik Tambah Gedget.

11. Pilih HTML/JavaScript dan masukkan kode dibawah ini ke dalam content HTML tersebut.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 273px;">
<a>Komputer</a>
<a>Internet</a>
<a>Traffic</a>
</div>
<div class="Pages" style="width: 271px; height: 275px;">

<div class="Page">
<div class="Pad">
<li><a href="http://mas-debby.blogspot.com/2011/01/cara-agar-file-komputer-tidak-bisa-di.html">1. Cara Agar File Komputer Tidak Bisa Di Pindah Ke Flashdisk</a></li>
<li><a href="http://mas-debby.blogspot.com/2011/01/software-penghemat-baterai-laptop.html">2. Software Penghemat Baterai Laptop</a></li>
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href='http://mas-debby.blogspot.com/2011/01/google-adsense.html'>1. Google Adsense</a></li>
<li><a href='http://mas-debby.blogspot.com/2011/01/internet-gratis.html'>2. Internet Gratis</a></li>
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href="http://mas-debby.blogspot.com/2011/01/cara-download-video-di-youtube.html">1. Cara Download Video di Youtube</a></li>
<li><a href="http://mas-debby.blogspot.com/2011/02/mempercepat-internet-download-manager.html#more">2. Mempercepat Internet Download Manager</a></li>
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initializeundefined'TabView');
</script><noscript><a href="http://www.centro.web.id" title="Centro Indonesia"><strong>software, tips blog, ebook, bisnis online
</strong></a></noscript>

Anda bisa ganti warna merah dengan link Anda.

12. Lalu Save dan selesai semoga berhasil.

Rabu, 08 Juni 2011

Mengganti Tulisan Posting Lebih Baru Dan Posting Lebih Lama Dengan Icon Gambar

Variasi pada tulisan Posting Lebih Baru, Halaman Muka dan dan Posting Lama, selain menggunakan cara pada postingan"Menambahkan Nomor Halaman di Bawah Area Postingan",juga dapat anda gunakan dengan icon gambar. Perhatikan contoh dibawah ini.

Untuk memudahkan dalam pembuataanya, anda dapat menggunakan icon dari blog lain atau icon-icon yang tersedia dibagian bawah postingan ini. Dan bagi anda yang suka menggunakan made in sendiri, buat dulu icon gambarnya sebanyak 3 buah yaitu untuk : post lebih baru, halaman muka dan post lebih lama.
Anda siap...maju.....jalan....!!!!

Cara Mengganti Tulisan Posting Lebih Baru Dan Posting Lebih Lama Dengan Icon Gambar :

1.Login ke blogger

2.Pilih Tata letak Kemudian Pilih Edit HTML

3.Beri Tanda Cek(centang) pada "Expand Widget Templates"

Untuk mengganti tulisan Post lama, cari kode <data:olderPageTitle/> kemudian ganti dengan salah satu alamat URL dibawah ini. (pilih yang paling menarik menurut anda).

Untuk mengganti post lebih baru, cari kode <data:newerPageTitle/> kemudian ganti dengan salah satu alamat URL dibawah ini. (pilih yang paling menarik menurut anda).

Untuk mengganti halaman Beranda, cari kode <data:homeMsg/> kemudian ganti dengan salah satu alamat URL dibawah ini. (pilih yang paling menarik menurut anda).

Setelah ketiga icon pilihan anda dimasukan, klik tombol Simpan Template.

Lihat Penampilan Blog anda yang baru...!!

Rabu, 01 Juni 2011

page halaman

Tetap dalam rangka update biar dikira rajin posting posting dulu ah di www.tutorialpenting.blogspot.com dengan teman cara membuat next page pada blogger seperti gambar diatas. Gambar diatas merupakan next page yang biasanya berada dibawah postingan untuk memperpunah pengunjung dalam mengacak-acak blog kita dari halaman terbaru hingga halaman terjadul. Bagainamankah cara membuat next page pada blogger? caranya tak sulit alias gampang bin mudah banget. Silakan teman login ke akun blogger teman dan kemudian pilih tataletak terus ambil posisi page elemen kemudian Tambahkan gadget dan kopi kode dibawah ini:

<style>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

</style>

<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount=5;
var displayPageNum=6;
var firstPageWord = 'First';
var endPageWord = 'last';
var upPageWord ='Back';
var downPageWord ='Next';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span class="showpage"> Total '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;

}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
</br>

Kemudian simpanlah gadget tersebut tepat dibawah elemen postingan.

Setelahnya klik save alias simpan perubahan. Dan jadilan menu page next yang makin mempercantik blog teman-teman. Selamat mencoba semoga sukses.

salam hormat dariku, oke brooo

Senin, 30 Mei 2011

Menu Navigasi Keren "Slide Out Effect" ( jQuery )

Pada tutorial sebelumnya saya pernah membahas tentang Menu navigasi keren "Slide out effect" ( jQuery ) dimana letak dari menu navigasi tersebut berada di sebelah kiri dari element halaman blog/web.Tapi pada tutorial kali ini kita akan menempatkan Menu navigasi tersebut di atas dari element halaman blog/web anda.Hasilnya tetap sama seperti pada tutorial sebelumnya,disaat kita scroll halaman ke bagian paling bawah sekalipun,menu navigasi tersebut akan selalu ada pada posisi atas elemen halaman.Untuk versi demonya anda bisa lihat disini .
Berikut langkah - langkah project latihan kita kali ini. 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 kode : ]]></b:skin>
5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode ]]></b:skin>

ul#navigation{position:fixed; margin:0px; padding:0px; top:0px; right:10px; list-style:none; z-index:999999; width:721px}
ul#navigation li{width:103px; display:inline; float:left}
ul#navigation li a{display:block; float:left; margin-top:-2px; width:100px; height:25px; background-color:#E7F2F9; background-repeat:no-repeat; background-position:50% 10px; border:1px solid #BDDCEF; -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px; -khtml-border-bottom-right-radius:10px; -khtml-border-bottom-left-radius:10px; text-decoration:none; text-align:center; padding-top:80px; opacity:0.7;     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70)}
ul#navigation li a:hover{background-color:#CAE3F2}
ul#navigation li a span{letter-spacing:2px; font-size:11px; color:#60ACD8; text-shadow:0 -1px 1px #fff}
ul#navigation .home a{    background-image:url(http://www.iconarchive.com/icons/rokey/the-last-order/48/internet-icon.png)}
ul#navigation .about a{    background-image:url(http://www.iconarchive.com/icons/zakar/shining-z/48/Brush-SZ-icon.png)}
ul#navigation .search a{    background-image:url(http://www.iconarchive.com/icons/rokey/the-last-order/48/search-icon.png)}
ul#navigation .podcasts a{    background-image:url(http://www.iconarchive.com/icons/rokey/the-last-order/48/my-music-icon.png)}
ul#navigation .rssfeed a{    background-image:url(http://www.iconarchive.com/icons/rokey/the-last-order/48/subscriptions-icon.png)}
ul#navigation .photos a{    background-image:url(http://www.iconarchive.com/icons/rokey/the-last-order/48/jpeg-image-icon.png)}
ul#navigation .contact a{    background-image:url(http://www.iconarchive.com/icons/rokey/the-last-order/48/e-mail-icon.png)}

6. Setelah Itu Beralihlah dan cari kode <body>
Jika Sudah, Letakkan kode berikut tepat dibawah Kode diatas

<ul id='navigation'>
    <li class='home'><a href='#'><span>Home</span></a></li>
    <li class='about'><a href='#'><span>About</span></a></li>
    <li class='search'><a href='#'><span>Search</span></a></li>
    <li class='photos'><a href='#'><span>Photos</span></a></li>
    <li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li>
    <li class='podcasts'><a href='#'><span>Podcasts</span></a></li>
    <li class='contact'><a href='#'><span>Contact</span></a></li>
</ul>

KET: Saya akan memberi sedikit penjelasan disini kususnya untuk anda yang masih baru atau awam dengan pengkodean diatas.
pada item <li> kita dapat melihat beberapa menu yakni :

    * Home
    * About
    * Search
    * Photos
    * Rss Feed
    * Podcast
    * Contact

Menu tersebut nantinya akan mengisi header dari tiap elemen <li>,dan pada bagian "<a href='#'>" adalah tempat dimana kita meletakan link tujuan dari tiap-tiap header tersebut.Contohnya seperti ini.

<li class='Home'><a href='http://uttafreak-987.blogspot.com/'><span>Home</span></a></li>

Ketika kita mengeklik menu Home ,maka anda akan masuk kehalaman beranda website/blog.Jadi...untuk menu-menu lainnya saya harap anda sudah memahaminya.

7. Langkah terakhir, cari kode ]]></b:skin>
Jika Sudah, Letakkan kode berikut tepat dibawah Kode diatas :

<script language='javascript' src='http://pujangga.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>

Selesai..silahkan anda priview dulu dari hasil latihan ini ,apabila semua berjalan dengan sempurna barulah anda

pasang banner 125x125

gimana??? tertarik untuk membuatnya,...
baiklah sobat bisa langsung mencobanya,.. berikut cara-caranya :
seperti biasa
1. Pastikan login Blogger terlebih dahulu.
2. Klik pilihan Tata Letak => Edit HTML
3. Carilah kode ]]></b:skin> kalau sudah ketemu, letakkan kode berikut tepat di atas :

/* Start Banner 125x125 */
.contentCenter {
text-align:center;
}
.adsbanner {
background:url("http://i7.photobucket.com/albums/y284/StubbyOstrich/animated%20gif/Rasengan.gif");
background-position:center;
-moz-border-radius:8px; -webkit-border-radius:8px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #33F; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #33F; -o-transition:1s ease-out; -moz-transition:1s ease-out; -webkit-transition:1s ease-out;
margin:1em 0 1em 0; line-height:1.6em; margin:20px 4px; padding:10px 6px;
}
.adsbanner:hover {margin:20px 4px; -moz-border-radius:13px; -webkit-border-radius:13px; 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;}
.adsbanner ul{
list-style-type:none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 5px 0px;
width:300px;
overflow:hidden;
}
.adsbanner ul li{
list-style-type:none;
margin: 0px 1px 0px 0px;
padding: 5px 0px 5px 5px;
float:left;
display:inline;
}
.adsbanner ul li:hover {-moz-border-radius:15px; -webkit-border-radius:15px; 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;}
/* End Banner 125x125 */

:::Keterangan :
- Untuk tulisan yang Bercetak berwarna merah,adlh URL Gambar, dan dapat sobat ganti sesuka hati anda ..
- dan teks yang berwarna hijau adlh warna pikiran kotak box, sedangkan teks yang berwarna biru, itu adalh warna kotak box saat hover.
- dan yang terakhir teks yg berwarna orange, adlh warna hover pada gambar Iklan banner..sobat ganti dengan warna yang sobat inginkan.untuk melihat warna bisa klik disini.

4. Setelah itu Cari kode <div id='sidebar-wrapper'> , kemudian letakkan kode berikut tepat di bawahnya atau tepat diatas kode <b:section class='sidebar' id='sidebar' preferred='yes'> :

<div class='banner'>
<div class='adsbanner'>
<ul>
<li>

<a href='URL-LINK-BANNER-HERE' rel='bookmark' target='_blank' title='ADS 125x125'><img alt='ads' border='0' src='http://gickr.com/results4/anim_ecab1e10-ab2b-f1d4-15e8-c3c58f0f395f.gif' style='vertical-align:bottom;'/></a>
</li>
<li>
<a href='URL-LINK-BANNER-HERE' rel='bookmark' target='_blank' title='ADS 125x125'><img alt='ads' border='0' src='http://gickr.com/results4/anim_ecab1e10-ab2b-f1d4-15e8-c3c58f0f395f.gif' style='vertical-align:bottom;'/></a>
</li>
<li>
<a href='URL-LINK-BANNER-HERE' rel='bookmark' target='_blank' title='ADS 125x125'><img alt='ads' border='0' src='http://gickr.com/results4/anim_ecab1e10-ab2b-f1d4-15e8-c3c58f0f395f.gif' style='vertical-align:bottom;'/></a>
</li>
<li>
<a href='URL-LINK-BANNER-HERE' rel='bookmark' target='_blank' title='ADS 125x125'><img alt='ads' border='0' src='http://gickr.com/results4/anim_ecab1e10-ab2b-f1d4-15e8-c3c58f0f395f.gif' style='vertical-align:bottom;'/></a>
</li>
</ul>
</div></div>

:::Keterangan :
- Untuk tulisan yang Bercetak berwarna merah,adlh URL Gambar Banner, dan dapat sobat ganti sesuka hati anda ..
- dan teks yang berwarna orange, adlh URL-LINK-BANNER.
- dan teks yang berwarna kuning, adlh title judul banner.

5. Terakhir Priview dl, juga sudah tampil disidebar sobat, baru sobat bisa simpan template. SELESAI....

Minggu, 29 Mei 2011

buku tamu facebook melayang

Pada kesempatan kali ini, utta ingin share lagi nich, tentang memasang 'Widget Buku Tamu Facebook' diblog,.. Widget ini sama halnya dengan Widget sya yang 'Cara Pasang Widget Floating ChatBox (Buku Tamu)', cuma saya memberiakn beberapa tambahan Icon.hehe,...

Okelah klw bgtu langsung saja, sobat bisa langsung memcobanya diblog sobat.

1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Tambah Gadget/Add Gadget Pilih HTML JAVA SCRIPT
4. Masukan Script Berikut Di dalamnya

<style type="text/css">
.gb_fixed{position:fixed; Bottom:90px; right:0px; z-index:+10}
* html .gb_fixed {position:relative;}
#hidden_gb2{display:none;border: 3px solid #fff;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimy5CqQSH9f_2OJwoe_NFtdNJQlJkIlgXPrTvJL9l3-Acs041o0PrdG8BbjytiM9jJh2fIc5Zf1cxhGnfHOnmEmRAFDw25DJyj2uy6_4kaKDWMKXdei0eocQjlr_OkPtwQF3NcVEiWjd2F/)#000 repeat-x bottom center scroll; padding:10px; padding-top:10px; -moz-border-radius-topleft:20px; -moz-border-radius-bottomright:20px; transform:rotate(-5deg); -moz-transform:rotate(-5deg); -webkit-transform:rotate(-5deg); -o-transform:rotate(-5deg)}
#hidden_gb2:hover{border: 3px solid #000; background:url(http://i52.tinypic.com/dc7l0n.gif) no-repeat left bottom #fff; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg)}
</style>
<div class="gb_fixed">
<table cellpadding="0" cellspacing="0" id="hidden_gb2"><tbody>
<tr><td>
<div>
<a href="javascript:void(0)" onclick="gb_showHideGB()"><img src="http://i53.tinypic.com/727lw8.png" /></a>
<span style="font-size: 85%;color:Orange;">
Mau Widget
<a href="http://www.vizero.co.cc/2011/05/cara-pasang-widget-buku-tamu-facebook.html" target="_blank">
Seperti Ini
</a>
and
<a href="http://www.vizero.co.cc/2011/05/cara-pasang-widget-buku-tamu-facebook.html" target="_blank">
Buat Buku Tamu Facebook!
</a></span></div>
--> Kode Facebook Anda Disini <--

</td></tr>
</tbody></table>
</div>
<script src="http://marewainfo.googlecode.com/files/ordinaryhack-floating.js">
</script>
<div class="gb_fixed" style="z-index: +5;">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAHQiqjwYfACavjV8-5kJGYOqLutqgFuFkxaEB3xhgOO9Om4iGs834NV-Tv0A1X0qddp4V1WajbTAqXDypzisFSiij-QHNTDBUhCG9FpIF_7KaQQysdD1_9Jjth0n5In0xidxdJ3JafyU/" style="filter: alpha(opacity=60); opacity: 0.8;" />
</a></div>

5. Save.

menu navigasi keren

Pada tutorial sebelumnya saya pernah membahas tentang Menu navigasi keren "Slide out effect" ( jQuery ) I. dan pada tutorial kali ini kita akan membahas tutorial yang sama dengan sebelumnya,dan Hasilnyapun tetap sama seperti pada tutorial sebelumnya,cuma tampilan warna aja yang membedakan, tutorial sebelumnya berwaena hijau langit, sedangkan tutorial sekarang berwarna hitam.Untuk versi demonya anda bisa lihat disini .
Berikut langkah - langkah pembuatannya:
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 kode : ]]></b:skin>
5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode ]]></b:skin>

/*----------------
Beautiful Slide Out Navigation
-------------------------------*/
.headerfixed
        {
            width:600px;
            height:56px;
            position:absolute;
            top:50%;
            left:10px;
            background:#fff url(title.png) no-repeat top left;
        }
ul#navixed {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}
ul#navixed li {
    width: 103px;
    display:inline;
    float:left;
}
ul#navixed li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#000;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navixed li a:hover{
     background-color:#000;
}
ul#navixed li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#FFF;

}
ul#navixed .home a{
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCtFq7XqFfLnaFtm0oG4gWGQro2MzC_r5CGZfyBfculAbzpkJXALGd45gA3sOkyhn2nftInnqYspVZzq4cJu8bAtAmbUAKqbXhaPk4kndYyeC5DyV0RL6TGKP4nXe1jHLG4d43E7cZzJ4/s1600/home.png);
}
ul#navixed .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg7aVI-pLFRHve9uL2PveUwkpfG2pgHZC5FkmvUY3ZSLsvC8dZA-Je12ytArl_FAZDUofq0kvCFVlXTxeQevNrx9ScBq_tZG6oiEs114OV76VyRIGxc4bVBGIiRBktAQwkOobYGpzVaL0/s1600/id_card.png);
}
ul#navixed .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGdTOJ3_lQ_agU7bltVazoMMpVwmf_Aj9Atd4h0u86rHc80_3mu6kUmt_kScSELiTBs7CfGzN0QZKMMu-nLHrbTG7N2hxB30GOd2lSyUSw8-xgXmu3Dll3WommAon7nkAzeYwyIFZHiL4/s1600/search.png);
}
ul#navixed .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEics1fz4yOHLBz-xwGk-nfKdHB4FLCVfo_YQyCmzEUt3aIMpBFmc7g2_kI__l4pDgel1q8KIDrI_GnWUcpPkOYBwVwQV-CvJopSIcFgaWFc5IDN3KikS4VfeIiH7QLWCrgA7HiEUhs0z4Y/s1600/ipod.png);
}
ul#navixed .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh80Umb6Js4HUnVd5RSgO2Nup063sII6ZKpuv7RhNqGqUGrDmVDHVqx-ihb4QgdNJBemFwjEOpK48bsOY7g8QhNvC5KclsohkXC5bR-OAS-ZJPRIk3HYkHv-QvL3gcYwinRnPtcbC07Ayc/s1600/rss.png);
}
ul#navixed .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd3R_W9VkkCP4tkeV66i_Hz8i9d5NVlfzYuVl6VJCQ0yjwQlq56d1N3odgxNne6lQago4PyPIgX3-2eSL10rlqAZSj3Nu9e4Ul9KDsa82SRGb9Lmy_iNy-mz-kAxuL7yccO2De_Uforgc/s1600/camera.png);
}
ul#navixed .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm0eOmojS2olyXIC4fgvYLbYrCxe_Iw6-ZbQjg1EVfQXqP-yBiZ4SLX4TyuIrGYXlobXsDml9mtlySVhdGkkm_3BmbxUbVI6U0O5WbtY73rThwR2bPRZV5SnVSZd12UfcBgixRI81tuy4/s1600/mail.png);
}

6. Setelah Itu Beralihlah dan cari kode <body>
Jika Sudah, Letakkan kode berikut tepat diatasnya.

<ul id='navixed'>
            <li class='home'><a href='#'><span>Home</span></a></li>
            <li class='about'><a href='#'><span>About</span></a></li>
            <li class='search'><a href='#'><span>Search</span></a></li>
            <li class='photos'><a href='#'><span>Photos</span></a></li>
            <li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li>
            <li class='podcasts'><a href='#'><span>Podcasts</span></a></li>
            <li class='contact'><a href='#'><span>Contact</span></a></li>
        </ul>

KET: Saya akan memberi sedikit penjelasan disini kususnya untuk anda yang masih baru atau awam dengan pengkodean diatas.
pada item <li> kita dapat melihat beberapa menu yakni :

    * Home
    * About
    * Search
    * Photos
    * Rss Feed
    * Podcast
    * Contact

Menu tersebut nantinya akan mengisi header dari tiap elemen <li>,dan pada bagian "<a href='#'>" adalah tempat dimana kita meletakan link tujuan dari tiap-tiap header tersebut.Contohnya seperti ini.

<li class='Home'><a href='http://uttafreak-987.blogspot.com/'><span>Home</span></a></li>

Ketika kita mengeklik menu Home ,maka anda akan masuk kehalaman beranda website/blog.Jadi...untuk menu-menu lainnya saya harap anda sudah memahaminya.

7. Langkah terakhir, cari kode </head>
Jika Sudah, Letakkan kode berikut tepat diatasnya :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
    <script src='http://kangdadang.googlecode.com/files/jcolor.js'/>
<script type='text/javascript'>
            $(function() {
                var d=300;
                $('#navixed a').each(function(){
                    $(this).stop().animate({
                        'marginTop':'-80px'
                    },d+=150);
                });

                $('#navixed > li').hover(
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-2px'
                    },200);
                },
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-80px'
                    },200);
                }
            );
            });
        </script>

8. Selesai..silahkan anda priview dulu, lalu save template.

efek slide gambar pada blog

Slide Show Postingan itu apaan sih?

SlideShow, dari namanya sudah cukup jelas bukan? Itu lo yang gambar/foto nya berpindah-pindah sendiri. Saya banyak menjumpai blog sesama blogger itu menggunakan website slide show. Misalnya Slide.com, Kizoa.com atau Slideshow.com sendiri.

Situs-situs slideshow seperti diatas hanya cocok untuk memajang foto-foto/ gambar saja. Tapi bukan itu yang saya maksud pada postingan kali ini. Tapi slideshow postingan pilihan. Yang artinya slide show yang berisi image-image untuk menuju artikel-artikel pilihan yang kita tentukan sendiri.

Sebelum kita mencobanya disini saya akan memberikan cara pemasangan Slider ini, tepat diatas Sidebar.

Baiklah, kita lansung kelangkah pembuatannya..
Ikuti langkah-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 kode : ]]></b:skin>
5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini sebelum atau diatas kode ]]></b:skin> .

#slideM{margin:0 0 15px; overflow:hidden}
.stepcarousel{border-radius:15px; -moz-border-radius:5px; -webkit-border-radius:15px; 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; position:relative; border:1px solid white; overflow:scroll; width:270px; height:200px}
.stepcarousel .belt{position:absolute; left:0; top:0}
.stepcarousel .panel{float:left; overflow:hidden; margin:10px; width:175px; height:160px}
.panel img{width:175px;height:160px}

4. Selanjutnya Cari kode : </head> . Lalu letakkan Kode berikut sebelum atau diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='http://pagenano.googlecode.com/files/last.js' type='text/javascript'/>
<script src='http://pagenano.googlecode.com/files/Nav%20Mdev.js' type='text/javascript'/>
<script src='http://pagenano.googlecode.com/files/Gambar%20Bergantian.js' type='text/javascript'/>
<script type='text/javascript'>
summary_noimg = 500;
summary_img = 300;
img_thumb_height = 130;
img_thumb_width = 110;
</script>
<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(strx,chop){
   if(strx.indexOf("<")!=-1)
   {
        var s = strx.split("<");
        for(var i=0;i<s.length;i++){
            if(s[i].indexOf(">")!=-1){
                s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
            }
        }
        strx = s.join("");
   }
   chop = (chop < strx.length-1) ? chop : strx.length-2;
   while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
   strx = strx.substring(0,chop-1);
   return strx+'...';
}

function createSummaryAndThumb(pID){
   var div = document.getElementById(pID);
   var imgtag = "";
   var img = div.getElementsByTagName("img");
   var summ = summary_noimg;
   if(img.length>=1) {
        imgtag = '<span style="float:left; padding:0 10px 0 00;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
        summ = summary_img;
   }

   var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
   div.innerHTML = summary;
}

//]]>
</script>

<script type='text/javascript'>

stepcarousel.setup({
galleryid: 'mygallery',
beltclass: 'belt',
panelclass: 'panel',
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, wrapbehavior:'slide', persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwv-pkkSxiYhxLwGbN_qSmCoXDKm8o2p1tUWre7FjRoHPBjl7BgJOfeZ18Ljjs9VWnrFMBPTrpIFCayrP2Eux1dchzyYGQRIa30PqolsEGETH-mevaCSCRRiq2g2f9V7-MjEaaFQg0O0T2/s400/NLeft.png', -27, 80], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-1bdhG1BI7so3MRPFKF10ytllZGU18pQD8oyhk18RzoqA5oaCms8t88bROX6gKumDXXe1Kcz_J9SztnIoRwnfKWqsYr3aPdELSxKF8PFbzvIhy5AYsLweiUwlG00KSZiODmR9VFADNP15/s400/NRight.png', -12, 80]},
statusvars: ['statusA', 'statusB', 'statusC'],
contenttype: ['inline']
})

</script>

4. dan selanjutnya cari kode : <b:section class='sidebaratas' id='sidebaratas' preferred='yes'> , lalu letakkan Kode berikut diatasnya.

<div id='slideM'>
<div class='stepcarousel' id='mygallery' style='width:80%;height:180px;margin:0 auto;'>
<div class='belt'>
<div class='panel'>
<a href='http://www.uttafreak-987.co.cc/2011/04/uniqx-transparent-version-10-design-by.html'><img src='http://i52.tinypic.com/1z5p4xf.jpg'/></a>
</div>

<div class='panel'>
<a href='http://www.uttafreak-987.co.cc/2011/04/junoon-template-blogger.html'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySRDs1ZS0gcTR0xhlgFIu3aXyi0UAcuc9Jjo7jMgSFze_ATSZR9X6QioS5_z5llP25WsAYMkTVc8Kjflh2NLsHHhOoZWVWLlK6aXCVV-UpdVVKv9mgxJkuwtOZf2_-JMBomMFsW1Iqy98/'/></a>
</div>

<div class='panel'>
<a href='http://www.uttafreak-987.co.cc/2011/04/mdev-template-tampilan-klasik-sentuhan.html'><img src='http://1.bp.blogspot.com/-uDccDJ5KkPE/TabSvWyY86I/AAAAAAAABnk/xV28znia9CQ/s1600/Mdev.jpg'/></a>
</div>

<div class='panel'>
<a href='http://www.uttafreak-987.co.cc/2011/04/smart-shadow-template-blogger.html'><img src='http://lh5.ggpht.com/_dfnTVAxeWMI/Sy2ZHIP3tfI/AAAAAAAAC7A/uQgnydj_zNE/smart-shadow.gif'/></a>
</div>

<div class='panel'>
<a href='http://www.uttafreak-987.co.cc/2011/04/black-eleganisme-template-blogger.html'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtd9FrHyCOXPSIIOfUU3atGhK_hEVR_cKSyZxtl0gJytpTrs6oZtiu6qlvy553MR4vMTp474SZhforBeXz3lj1WzKDNTPU0Y_aVyVz6NK2h_ll56P3OEMPb5smIrymcSHKH-3udbH4z-g/s400/Black+Eleganisme+Blogger+Template.png'/></a>
</div>

<div class='panel'>
<a href='http://www.uttafreak-987.co.cc/2011/03/koleksi-template-terbaru-2011.html'><img src='http://www.bloggertheme.net/wp-content/uploads/2011/02/yalene.jpg'/></a>
</div>

<div class='panel'>
<a href='http://www.uttafreak-987.co.cc/2011/04/css-template-blogger.html'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijE459EjPc6Shr-J1EU4ajM16HEYtNs8tRCX9JB42_8uNLXkSknTZ_7jS2weLVw_3UHgftTuUkE_SMnl9GYazRCinuPSh1AT08804MW7j4CnTJOwnBB0hI9zoYvQ_-qnUuUPiO1bTL9OGC/?imgmax=800'/></a>
</div>

</div>
</div>
<p id='mygallery-paginate' style='text-align:center'>
<img data-moveby='1' data-over='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcFZ0ro4RV6G4zMEbhpSgHLhLjb_qaW2AccEzC6v-qXFpdRd-nVuciNzLPjIx4eGfr_xOSF-Us2vHlz_CNngBbjbbWNls9_hn_3EGhjomYdaGnC00KFJhYht3YHJCGt1jamhv5Zhn-UvU1/s400/hovclose.png' data-select='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinhcc_VwJdM7n42TgnozRxBSknP9-_jruaDfO0fmZ4YxX9DjeeeL1fWs9DbN4urUNcd6k6GxS4moWdiuRUTiT2aJYY2O5P8zMSKGtwof0iDX7vgQo8DiYJcgvljYTZadTbaLV9BtuE5JL7/s400/close.png' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8JR-M5ZCWdhfBxa6ayRqO95WhATOlWljH1jJYHqAZrRTwvoPE8pyWXWBWn2td06GTVtMBjNmmZee_ERQ2ggVK4xh7mkI7-LxZTcsDWD0jg58snOMGgshrtZ3Y9UlPV6VXhCAjmv5-0eGu/s400/open.png'/>
</p>
</div>

KET:::
- teks yang berwarna orange, URL Gambar anda.. sedangkan
- teks yang berwarna merah, URL gambar anda.

6. Terkhir Preview dulu,. jika berhasil. baru Save template..

Mengganti Tampilan Cursor (Mouse)

Instruksi Dasar :

Login Blog terlebih dahulu di http://draft.blogger.com
Pilih Layout untuk memulai pengeditan pada Blog yang diinginkan
Pilih Tab Edit HTML
Cari kode ]]></b:skin> untuk mempermudah pencarian kode tersebut dapat dipergunakan fasilitas Find pada web browser. Sebagai contoh pada browser Mozilla Firefox ditunjukkan pada Menu Bar -> Edit -> Find (Alt+E+F) atau dengan menekan kombinasi tombol (Ctrl + F)
Penempelan script custom cursor berikut ini dapat diletakkan sesudah atau dibawah kode ]]></b:skin>.

Script :

<style type='text/css'>body, a {cursor: url(Letakkan Url cursor default disini), progress;} a:hover {cursor: url(Letakkan Url cursor link disini), progress;}</style>

Setelah script dan url cursor telah dimasukkan lalu Simpan perubahan dan bisa dilihat hasilnya :)

Cursor Default :

http://lh4.ggpht.com/_TWC8zfBIdik/S-azAjwjYKI/AAAAAAAAAxg/vcB1bh9X0CM/roxxcur1.png

Cursor Link :

http://lh6.ggpht.com/_TWC8zfBIdik/S-azAn6JodI/AAAAAAAAAxk/kdC4_mmwr9c/roxxcur2.png

Dapatkan Cursor - cursor lucu dan menarik pada link berikut ini :

   1. http://www.cursors-4u.com
   2. http://www.myspacecursor.net
   3. http://www.totallyfreecursors.com
   4. http://www.123cursors.com
   5. http://www.anicursor.com
   6. http://moocursors.com/

Sekian tutorial Cara pasang custom cursor di blogspot semoga bermanfaat. Terimakasih.

Cara Pasang Efek Hujan Salju di Blog

Jika anda tertarik langsung saja ikuti langkah berikut :
1. Login ke akun Blogger
2. Klik Tata Letak / Layout
3. Klik tab Edit HTML
4. Cari kode </head>
5. Lalu letakan kode dibawah ini, di atas kode </head>

Warna Putih

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='http://nirav07.110mb.com/jsnow.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$().jSnow();
});
</script>

Warna Putih

<script src="http://snow-effect.googlecode.com/files/snow.js" type="text/javascript"></script>

Warna Pink

Pasang Banner Iklan 125x125 Hover Box dengan CSS3

/* Start Banner 125x125 */
.contentCenter {
text-align:center;
}
.adsbanner {
background:url("http://i7.photobucket.com/albums/y284/StubbyOstrich/animated%20gif/Rasengan.gif");
background-position:center;
-moz-border-radius:8px; -webkit-border-radius:8px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #33F; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #33F; -o-transition:1s ease-out; -moz-transition:1s ease-out; -webkit-transition:1s ease-out;
margin:1em 0 1em 0; line-height:1.6em; margin:20px 4px; padding:10px 6px;
}
.adsbanner:hover {margin:20px 4px; -moz-border-radius:13px; -webkit-border-radius:13px; 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;}
.adsbanner ul{
list-style-type:none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 5px 0px;
width:300px;
overflow:hidden;
}
.adsbanner ul li{
list-style-type:none;
margin: 0px 1px 0px 0px;
padding: 5px 0px 5px 5px;
float:left;
display:inline;
}
.adsbanner ul li:hover {-moz-border-radius:15px; -webkit-border-radius:15px; 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;}
/* End Banner 125x125 */

<div class='banner'>
<div class='adsbanner'>
<ul>
<li>

<a href='URL-LINK-BANNER-HERE' rel='bookmark' target='_blank' title='ADS 125x125'><img alt='ads' border='0' src='http://gickr.com/results4/anim_ecab1e10-ab2b-f1d4-15e8-c3c58f0f395f.gif' style='vertical-align:bottom;'/></a>
</li>
<li>
<a href='URL-LINK-BANNER-HERE' rel='bookmark' target='_blank' title='ADS 125x125'><img alt='ads' border='0' src='http://gickr.com/results4/anim_ecab1e10-ab2b-f1d4-15e8-c3c58f0f395f.gif' style='vertical-align:bottom;'/></a>
</li>
<li>
<a href='URL-LINK-BANNER-HERE' rel='bookmark' target='_blank' title='ADS 125x125'><img alt='ads' border='0' src='http://gickr.com/results4/anim_ecab1e10-ab2b-f1d4-15e8-c3c58f0f395f.gif' style='vertical-align:bottom;'/></a>
</li>
<li>
<a href='URL-LINK-BANNER-HERE' rel='bookmark' target='_blank' title='ADS 125x125'><img alt='ads' border='0' src='http://gickr.com/results4/anim_ecab1e10-ab2b-f1d4-15e8-c3c58f0f395f.gif' style='vertical-align:bottom;'/></a>
</li>
</ul>
</div></div>

PROFIL KU

Rabu, 03 Agustus 2011

Mengganti Sidebar Blog Dengan Animasi

Jumat, 01 Juli 2011

menu translate navbar

Sabtu, 11 Juni 2011

membuat menu multi kolom

Rabu, 08 Juni 2011

Mengganti Tulisan Posting Lebih Baru Dan Posting Lebih Lama Dengan Icon Gambar

Rabu, 01 Juni 2011

page halaman

Senin, 30 Mei 2011

Menu Navigasi Keren "Slide Out Effect" ( jQuery )

pasang banner 125x125

Minggu, 29 Mei 2011

buku tamu facebook melayang

menu navigasi keren

efek slide gambar pada blog

Mengganti Tampilan Cursor (Mouse)

Cara Pasang Efek Hujan Salju di Blog

Pasang Banner Iklan 125x125 Hover Box dengan CSS3

Pasang Iklan Disini

Label Blog

Tag Cloud

Visitor Me

MUSIK

Follow Me

DAFTAR ISI BLOG

Berita

My Banner

Feedjit Me

Resent Posting

PROFIL KU

Rabu, 03 Agustus 2011

Jumat, 01 Juli 2011

Sabtu, 11 Juni 2011

Rabu, 08 Juni 2011

Rabu, 01 Juni 2011

Senin, 30 Mei 2011

document.write(ultimaFecha);

Minggu, 29 Mei 2011

document.write(ultimaFecha);

document.write(ultimaFecha);

document.write(ultimaFecha);

document.write(ultimaFecha);

document.write(ultimaFecha);

Pasang Iklan Disini

Label Blog

Tag Cloud

Visitor Me

MUSIK

Follow Me

DAFTAR ISI BLOG

Berita

My Banner

Feedjit Me

Resent Posting