On Mouseover Alert

On mouseover alert berfungsi untuk menampilkan pesan ketika seorang pegunjung blog menggerakan cursor di atas gambar. Script yang digunakan merupakan script JavaScript yang sangat sederhana. Efek ini juga bisa di tampilkan di dalam sebuah artikel maupun di dalam widget. Jika masih bingung silakan arahkan cursor ke gambar berikut




Cara memasangnya kamu cukup copy dan paste kode di bawah ini dan paste di posting

<a href="" onMouseOver="alert('PESAN YANG INGIN DITAMPILKAN');return true;">
<img src="URL_GAMBAR" ></a>

Semoga Bermanfaat

Read More

Membuat Gambar Bergetar

Pada postingan kali ini saya akan membahas tentang cara membuat gambar bergetar di blogger,
jadi ketika gambar di sorot oleh cursor mouse maka gambar tersebut akan bergetar otomatis.

Cara ini berlaku untuk gambar yang berada di artikel maupun yang berada di widget blog.
Jika masih bingung silakan lihat demonya.

Demo

Cara memasangnya :
1. Login ke Blogger masuk ke -> Rancangan -> Edit HTML
2. Cari kode berikut

]]></b:skin>

3. Copy dan paste kode CSS ini di atas kode tadi

.gambargetar{
position:relative
}

4. Cari lagi kode berikut

</body>

5. Lalu masukan kode di bawah ini di atas kode no 4

<script type="text/javascript" src="http://purnamalabs.googlecode.com/files/Bergetar.js"></script>  

6. Untuk memanggilnya kamu bisa masukan kode di bawah ini pada artikel atau widget

<img src="MASUKAN_URL_GAMBAR_DI_SINI" class="gambargetar" onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this);top.focus()" onclick="top.focus()">

Semoga bermanfaat

Read More

Membuat Read More Otomatis

Fungsi Read more atau baca selengkapnya adalah untuk menyingkat artikel panjang sehingga terlihat menjadi rapi dan menarik.

Selain itu Read more otomatis ini akan mengambil gambar thumbnail dari artikel.

Jika menggunakan Read more versi lama tentu kita akan direpotkan ketika ingin membuat artikel harus menambahkan beberapa kode ke dalam artikel.

Oke sekian basa basinya berikut langkah membuatnya :

1. Login ke Blogger masuk ke -> Rancangan -> Edit HTML dan centang "Expand Widget Template"
2. Cari kode berikut

</head>

3. Kemudian copy kode di bawah ini dan paste sebelum kode no 2

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://sites.google.com/site/hitsukeproject/summarypost.js' type='text/javascript'/>

* Keterangan kode

summary_noimg = 430; //untuk memotong tinggi tanpa gambar
summary_img = 340; //untuk memotong tinggi dengan gambar
img_thumb_height = 100; //untuk mengatur gambar thumbnailnya
img_thumb_width = 120; //untuk lebar gambar thumbnailnya

4. Cari lagi kode

<data:post.body/>

5. Ganti kode no 4 dengan kode di bawah ini

<b:if cond='data:blog.pageType != "item"'> 
<div expr:id='"summary" + data:post.id'><data:post.body/></div> 
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>"); 
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Read More </a></span>
</b:if> 
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> 

Semoga Bermanfaat

Read More

Horizontal Menu With jQuery

Menu di dalam sebuah web atau blog mempunyai fungsi yang sangat penting yaitu untuk memudahkan para pengunjung berselancar di web atau blog tersebut selain untuk memudahkan pengunjung berselancar bisa juga untuk mempercantik tampilan web tersebut.

Pada kesempatan kali ini saya akan menjelaskan tentang cara membuat menu horizontal yang di beri sedikit sentuhan jQuery jadi ketika menu ini sorot oleh kursor mouse maka menu tersebut akan berjungkir balik. Menu ini juga ditambahi dengan efek bayangan/shadow.
Jika masih bingung silakan lihat demonya.

Demo

Cara Membuatnya
1. Login ke Blogger -> Rancangan -> Edit HTML
2. Cari kode berikut

 ]]></b:skin>

3. Copy dan paste kode di bawah ini tepat sebelum kode no 2

ul#topnav {
   margin: 20px 0 90px;
   padding: 0;
   list-style: none;
   font-size: 1.1em;
   clear: both;
   float: left;
   width: 100%;
}
ul#topnav li{
   margin: 0;
   padding: 0;
   overflow: hidden;
   float: left;
   height:40px;
}
ul#topnav a, ul#topnav span {
   padding: 10px 20px;
   float: left;
   text-align: center;
   text-decoration: none;
   color: #fff;
   text-shadow:0px 1px 0px #000;
   text-transform: uppercase;
   clear: both;
   height: 20px;
   width:100px;
   line-height: 20px;
   background: #555;
}
ul#topnav a {
   color: #7bc441; }
ul#topnav span {
   display: none;
}
ul#topnav.v2 span{
   background:#121212;
}
ul#topnav.v2 a{
   color: #ccc;
   background:#151515;
   -moz-box-shadow: 1px 1px 65px #ccc;
}

4. Cari kode berikut

</head>

5. Copy dan paste kode di bawah ini tepat di atas kode no 4

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function() {
$("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag
$("#topnav li").each(function() { //For each list item...
var linkText = $(this).find("a").html(); //Find the text inside of the a tag
$(this).find("span").show().html(linkText); //Add the text in the span tag
});
$("#topnav li").hover(function() { //On hover...
$(this).find("span").stop().animate({
marginTop: "-40" //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find("span").stop().animate({
marginTop: "0" //Move the span back to its original state (0px)
}, 250);
});
});
</script>

6. Copy kode dibawah ini dan paste di gadget HTML/JavaScript atau kamu simpan di tempat yang kamu suka

<ul class='v2' id='topnav'>
<li><a href='http://purnamalabs.blogspot.com/' title='HOME'>HOME</a></li>
<li><a href='ALAMAT LINK' title='MENU 1'>MENU 1</a></li>
<li><a href='ALAMAT LINK' title='MENU 2'>MENU 2</a></li>
<li><a href='ALAMAT LINK' title='MENU 3'>MENU 3</a></li>
<li><a href='ALAMAT LINK' title='MENU 4'>MENU 4</a></li>
<li><a href='ALAMAT LINK' title='MENU 5'>MENU 5</a></li>
</ul>

Semoga Bermanfaat

Read More