email
PhotobucketPhotobucketPhotobucket
0

Cara membuat Halaman yang Bisa Ngelipat/ Page Peel Effect

Untuk membuat halaman blog teman-teman seperti di atas caranya gampang. Ikuti langkah2 berikut:


1. Login ke blogger >> Tata Letak >> Edit HTML >> Expand widget template

2. Cari kode <b:skin><![CDATA[
dan letakkan kode berikut di atasnya:

<script src='http://sites.google.com/site/software2iqbalinc/javascript/script_ditunjuk_ngelipet_t4belajarblogger.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({width: '307px',height: '319px'}, 500);
} , function() {
$("#pageflip img").stop()
.animate({width: '50px',height: '52px'}, 220);
$(".msg_block").stop()
.animate({width: '50px',height: '50px'}, 200);
});
});
</script>

3. Lalu cari lagi kode ]]></b:skin>

Dan letakkan kode berikut tepat di atasnya:


#pageflip {
position: relative;
}
#pageflip img {
border: none;
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnK4-3GsE3AbBJo3lzrb2plq9JmxdVR5jSx9SIN9yu5-w9E8Tam7uS4qYjaZfFncFzQkUOfiju0UDrohcmEY5W_JguEAwIlB1BHZsr2AIXLyp6G7rTghMDK7g1QigFlY7YN_Z4z3tQcTRb/s1600/berlangganan_kelipat.PNG) no-repeat right top;
text-indent: -9999px;
}


4. Cari kode <body>

Dan lettakkan kode berikut di bawahnya:

<div id='pageflip'>
<a href='http://black-links.blogspot.com/2011/03/cara-membuat-halaman-yang-bisa-ngelipat.html' target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU7Hrj3aiwJwm-V6RLGQ32Y4Twc3-WigZF1DobzChnmNwCee0L_u9hussH67WXzOL49pUUTaaiw_xMEVIC3Ys1lJwWBMZq-j6TKKUNvMmTgEu6x3AUebJ5vw6R5M0l1CVtIOdo4YerXwP5/'/>
<span class='msg_block'/>
</a>
</div>


*Ganti yang berwarna Hijau dengan Link yang anda inginkan. Saran: Link RSS atau
link berlangganan.

5. Simpan hasil kerjaan anda.



Sekarang silahkan lihat blog anda, bagaimana....baguskan?

Untuk mengganti gambar dinding, teman-teman bisa mengganti URL berikut:


#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnK4-3GsE3AbBJo3lzrb2plq9JmxdVR5jSx9SIN9yu5-w9E8Tam7uS4qYjaZfFncFzQkUOfiju0UDrohcmEY5W_JguEAwIlB1BHZsr2AIXLyp6G7rTghMDK7g1QigFlY7YN_Z4z3tQcTRb/s1600/berlangganan_kelipat.PNG) no-repeat right top;
text-indent: -9999px;
}
Read more
7

CARA MEMBUAT SLIDESHOW POSTING BLOG


Untuk melihat hasilnya, coba lihat gambar berikut (klik untuk memperbesar) :

Dan jika Anda tertarik untuk membuatnya, silahkan ikuti panduan di bawah ini :











<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>
<script language='JavaScript'>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = " http://www.geraiblog.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>



Note :
.
Ganti Url berwarna biru dengan Url Anda . Semoga berhasil !!
Read more
 

Blogger Tube

Blogger Tube
contoh DEMO klik gambar

Rock All Night

Rock All Night
contoh DEMO klik gambar

Business View

Business View
contoh DEMO klik gambar

Cameo

Cameo
contoh DEMO klik gambar

Studeno

Studeno
contoh DEMO klik gambar

FRANKLE

FRANKLE
contoh DEMO klik gambar

Photo Gallery

Photo Gallery
contoh DEMO klik gambar

Malina

Malina
contoh DEMO klik gambar

Guild Wars

Guild Wars
contoh DEMO klik gambar

Liberation

Liberation
contoh DEMO klik gambar

i Movies

i Movies
contoh DEMO klik gambar

New Story

New Story
contoh DEMO klik gambar