Senin, 23 April 2012

Macam Border

-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;

-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;

-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;

-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
READ MORE - Macam Border

Cara Membuat Efek Link Bergoyang/Nudging

Tertarik untuk mempraktekannya? Caranya:

1) Sign in akun blogger
2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript
3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script type='text/javascript'> $(document).ready(function() { $('a').hover(function() { $(this).animate({ marginLeft: '10px' }, 400); }, function() { $(this).animate({ marginLeft: 0 }, 400); }); });</script>

Keterangan:
400 - Kecepatan Nudging

4) Klik save dan lihat hasilnya.
READ MORE - Cara Membuat Efek Link Bergoyang/Nudging

Mempercantik Side Bar


Caranya:

1) Sign in akaun blogger
2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript
3) Copy paste kode di bawah pada ruang Html / Javascript tadi

<div style="background: #FFC8E3 repeat; repeat; padding: 5px; border:2px dashed #990066; border-top-left-radius: 20px 20px; border-top-right-radius: 20px 20px; border-bottom-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px; -moz-box-shadow: 0 0 18px #FF3399 ; -webkit-box-shadow: 0 0 18px #FF3399 ; "><center></center>


Masukkan kode html widget / banner / image apa saja yang ingin anda letakkan disini


</div>

Keterangan :
Tulisan kuning - masukkan kod html gadget Anda

FFC8E3 - warna background kotak

dashed - Border

990066 - warna garisan border

FF3399 - warna bayang-bayang kotak.

Kode warna silahkan cek disini. Selamat mencoba...

READ MORE - Mempercantik Side Bar

Cara Membuat Efek Gambar Berubah Ketika Tersentuh Cursor


Ingin mencobanya Copy kode dibawah ini..

<a href="Target link" target="_blank"><img onmouseout="this.src='URL gambar pertama'" onmouseover="this.src='URL gambar kedua'" src="URL gambar pertama" /></a>
Ket:
URL gambar pertama: ganti dengan url gambar pertama anda
URL gambar kedua: ganti dengan url gambar kedua anda.

Letakkan cursor anda pada gambar dibawah ini, lihat perubahan pada gambar :)


#NB: Bisa diletakkan di sidebar atau postingan. Selamat mencoba...
READ MORE - Cara Membuat Efek Gambar Berubah Ketika Tersentuh Cursor

Scroll Box Untuk Widget

Tertarik? Ikuti langkah-langkah dibawah ini:

Caranya:
1) Sign in akaun blogger
2) Dashboard > Design > Add A Gadget > Html / Javascript
3) Copy paste kod di bawah pada ruang Html / Javascript tadi

<div style="width:426px;height:100px;overflow:auto; ">

Letakkan kod widget anda di sini

</div>

426 : width - Lebar scroll box
100 - Tinggi scroll box

4) Save dan lihat hasilnya.
READ MORE - Scroll Box Untuk Widget

Efek Animasi Saat Cursor Menyentuh Link


Caranya:

1) Sign in akaun blogger
2) Dashboard > Design > Edit HTML > Centang kotak "Expand Widget Templates"
3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kode: a:hover
4) Kemudian copy paste kode di bawah ini setelah/dibawah kode a:hover tadi:

color:#FF6699; background:url(URL IMAGE) ;background-repeat: repeat;
text-decoration:underline;

NB:
Url image, url untuk gambar yang Anda pilih. Anda bisa melihatnya disini atau pilih dibawah ini.

http://dl5.glitter-graphics.net/pub/590/590935ankbyj1xx4.gif

http://dl7.glitter-graphics.net/pub/474/474167l68h9nknqq.gif

http://dl9.glitter-graphics.net/pub/690/690739pesbqr6dqw.gif

http://dl2.glitter-graphics.net/pub/1455/1455682apvfgvhztr.gif

http://i603.photobucket.com/albums/tt117/misdollymie/rainbowhover.gif

READ MORE - Efek Animasi Saat Cursor Menyentuh Link

Cara Membuat Gambar Bergerak (Scrolling Image)








Scrolling images adalah gambar bergerak yang pergerakannya ditentukan oleh kita sendiri. Scrolling image ini boleh diletakkan pada bagian mana pun dalam blog, header, footer, sidebar ataupun ruang post..

Anda berminat? Ikuti langkah berikut:
- Berikut adalah kode untuk scrolling image:

<marquee direction="up" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" width="150" height="200">


<a href="Link Yang Ingin Dikunjungi" target="_blank"><img src="url gambar" /></a>
<a href="link untuk dibuka" target="_blank"><img src="url gambar" /></a>

</marquee>

Keterangan:
up - arah pergerakan gambar. Anda bisa mengganti dengan left, right, up atau down
2 - kelajuan pergerakan gambar
Link Yang Ingin Dikunjungi - url blog Anda atau bisa saja link yang ingin Anda buka
url gambar - url gambar yang ingin di buat Scrolling
READ MORE - Cara Membuat Gambar Bergerak (Scrolling Image)

Cara Membuat Button Dashboard Dan Follow


1) Sign in akaun blogger
2) Dashboard > Design > Page Element > Add A Gadget > Html / Javascript
3) Copy paste kode di bawah pada ruang Html / Javascript tadi

<div style="position: fixed; top: 5px; right: 90px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=ID BLOG ANDA" target="_blank" rel="nofollow" title="Follow !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://assets.tumblr.com/images/iframe_follow_alpha.png?6" border="0" /></a><div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopacity" href="http://blogger.com/home" target="_blank" rel="nofollow" title="Dashboard !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://assets.tumblr.com/images/iframe_dashboard_alpha.png?6" /></a></div>

NB:
Ganti kode berwarna biru dengan ID Blog Anda


Simpan dan lihat hasilnya..
READ MORE - Cara Membuat Button Dashboard Dan Follow

Cara Membuat Efek Shadow Pada Blockquote

Efek kotak bayang-bayang akan muncul apabila cursor menyentuh Blockquote (Contohnya seperti Blockquote saya) Penasaran? Ikuti langkah-langkah dibawah ini:

1) Sign in akaun blogger
2) Dashboard > Design > Edit HTML
3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kode .post blockquote { atau blockquote:hover {
4) Copy kode di bawah ini dibawah kode pada nomor 3 tadi

border:2px dashed #000000;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-box-shadow: 0 0 18px #FF3399 ;
-webkit-box-shadow: 0 0 18px #FF3399 ;
}

Keterangan:
000000 - warna garis border. Tukar kepada warna yang Anda suka. Cek kode warna disini
FF3399 - warna bayang-bayang efek shadow

READ MORE - Cara Membuat Efek Shadow Pada Blockquote

Cara Membuat Efek Star Wars Pada Blog

Tertarik untuk mempraktekannya? Caranya:
1) Sign in akun blogger
2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript
3) Copy dan paste kode di bawah pada ruang Html / Javascript tadi:

<script type="text/javascript">
// <![CDATA[
var speed=33; // lower number for faster
var warp=3; // from 1 to 10
var stars=100; // number of stars
var colour="#66FF66"; // colour of stars
var position=0; // set to '-1' for stars to appear behind text on page

/****************************
* Star Warp Effect *
* (c) 2005 mf2fm web-design *
* http://www.mf2fm.com/rv *
* Tutorial by Polskahackrew *
****************************/
var i;
var strs=new Array();
var strx=new Array();
var stry=new Array();
var stdx=new Array();
var stdy=new Array();
var swide=800;
var shigh=600;
warp/=100;
window.onload=function() { if (document.getElementById) {
var b, s, temp;
set_width();
b=document.createElement("div");
s=b.style;
s.position="absolute";
s.zIndex=position;
b.setAttribute("id", "bod");
document.body.appendChild(b);
set_scroll();
for (i=0; i<stars; i++) {
strs[i]=document.createElement("div");
strs[i].style.backgroundColor=colour;
strs[i].style.overflow="hidden";
strs[i].style.position="absolute";
stdy[i]=Math.random()*4-2;
stdx[i]=Math.random()*6-3;
temp=Math.random()*100;
strx[i]=swide/2+temp*stdx[i];
stry[i]=shigh/2+temp*stdy[i];
if (Math.abs(stdx[i])+Math.abs(stdy[i])>2.66) {
strs[i].style.width="2px";
strs[i].style.height="2px";
}
else {
strs[i].style.width="1px";
strs[i].style.height="1px";
}
b.appendChild(strs[i]);
}
setInterval("warp_drive()", speed);
}}

function warp_drive() {
for (i=0; i<stars; i++) {
stry[i]+=stdy[i];
strx[i]+=stdx[i];
stdx[i]*=1+warp;
stdy[i]*=1+warp;
if (stry[i]>0 && stry[i]<shigh-3 && strx[i]>0 && strx[i]<swide-3) {
strs[i].style.left=Math.floor(strx[i])+"px";
strs[i].style.top=Math.floor(stry[i])+"px"
}
else {
strx[i]=swide/2;
stry[i]=shigh/2;
stry[i]+=stdy[i]=Math.random()*4-2;
strx[i]+=stdx[i]=Math.random()*6-3;
if (Math.abs(stdx[i])+Math.abs(stdy[i])>2.66) {
strs[i].style.width="2px";
strs[i].style.height="2px";
}
else {
strs[i].style.width="1px";
strs[i].style.height="1px";
}
}
}
}

window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth-13;
shigh=self.innerHeight-13;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
swide-=2;
shigh-=2;
}

window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
var s=document.getElementById("bod").style;
s.top=sdown+"px";
s.left=sleft+"px";
}
// ]]>
</script>

- Ganti tulisan berwarna biru dengan kode warna yang Anda sukai
- Cek kode warna disini
READ MORE - Cara Membuat Efek Star Wars Pada Blog

Efek Miring Saat Cursor Menyentuh Link

1) Sign in akaun blogger
2) Dashboard > Design > Edit HTML > Centang kotak "Expand Widget Templates"
3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kode a:hover {
4) Kemudian copy kode dibawah ini dibawah kode a:hover {

transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);

5) Sekali lagi, dengan menggunakan ctrl + F, cari kode a:link {
6) Paste kode dibawah ini dibawah kode a:link {

transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;

7) Simpan template, dan lihat hasilnya...
READ MORE - Efek Miring Saat Cursor Menyentuh Link

Cara Membuat Cursor Mengeluarkan Gelembung (Bubble)

1) Log in akaun blogger anda
2) Dashboard > Design > Add A Gadget > HTML / Javascript
3) Pada ruang HTML / Javascript, copy paste kode di bawah

<script type="text/javascript" src="https://sites.google.com/site/jombinabelogcursorbuih/bubble%20cursor.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#FFFF33", "#FFFF33", "#FFFF33", "#FFFF33", "#FFFF33"); // colours for top, right, bottom and left borders and background of bubbles

var bubbles=100; // maximum number of bubbles on screen
/****************************

* JavaScript Bubble Cursor *

* (c) 2010 mf2fm web-design *

* http://www.mf2fm.com/rv *

* DON'T EDIT BELOW THIS BOX *

****************************/

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var bubb=new Array();

var bubbx=new Array();

var bubby=new Array();

var bubbs=new Array();

window.onload=function() { if (document.getElementById) {

var rats, div;

for (var i=0; i<bubbles; i++) {

rats=createDiv("3px", "3px");

rats.style.visibility="hidden";

div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.top="1px";

div.left="0px";

div.bottom="1px";

div.right="0px";

div.borderLeft="1px solid "+colours[3];

div.borderRight="1px solid "+colours[1];

div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.top="0px";

div.left="1px";

div.right="1px";

div.bottom="0px"

div.borderTop="1px solid "+colours[0];

div.borderBottom="1px solid "+colours[2];

div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.left="1px";

div.right="1px";

div.bottom="1px";

div.top="1px";

div.backgroundColor=colours[4];

div.opacity=0.5;

if (document.all) div.filter="alpha(opacity=50)";

document.body.appendChild(rats);

bubb[i]=rats.style;

}

set_scroll();

set_width();

bubble();

}}

function bubble() {

var c;

if (x!=ox || y!=oy) {

ox=x;

oy=y;

for (c=0; c<bubbles; c++) if (!bubby[c]) {

bubb[c].left=(bubbx[c]=x)+"px";

bubb[c].top=(bubby[c]=y)+"px";

bubb[c].width="3px";

bubb[c].height="3px"

bubb[c].visibility="visible";

bubbs[c]=3;

break;

}

}

for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);

setTimeout("bubble()", 40);

}

function update_bubb(i) {

if (bubby[i]) {

bubby[i]-=bubbs[i]/2+i%2;

bubbx[i]+=(i%5-2)/5;

if (bubby[i]>sdown && bubbx[i]>0) {

if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {

bubb[i].width=bubbs[i]+"px";

bubb[i].height=bubbs[i]+"px";

}

bubb[i].top=bubby[i]+"px";

bubb[i].left=bubbx[i]+"px";

}

else {

bubb[i].visibility="hidden";

bubby[i]=0;

return;

}

}

}

document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sleft;

x=(e)?e.pageX:event.x+sdown; }

window.onresize=set_width;

function set_width() {

if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (typeof(self.innerHeight)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

else {

swide=800;

shigh=600;

}

}

window.onscroll=set_scroll;

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

}

function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}

// ]]>
</script>

*Ganti tulisan berwarna biru dengan kode warna yang Anda sukai.
*Kode warna lihat disini. selamat mencoba :)
READ MORE - Cara Membuat Cursor Mengeluarkan Gelembung (Bubble)

Minggu, 22 April 2012

Cara Membuat Menu Pop Up Selamat Datang Pada Blog


Kali ini kita akan sama-sama belajar tutorial bagaimana membuat menu pop up selamat datang pada blog. Pop up atau jendela munculan akan nampak apabila anda berkunjung ke blog. Anda bisa memodifikasi pop up ini dengan gambar, pesan untuk subscribe, dan lain sebagainya. Jika anda tertarik untuk membuatnya ikuti langkahnya dibawah ini:

1. Masuk ke Rancangan --> Edit HTML
2. Carilah kode </head>
3. Letakkan kode dibawah ini diatas kode </head>

<script type="text/javascript" src="<span style="color: red; margin: 0px; padding: 0px;">http://wierdwalker.googlecode.com/files/leightbox.js</span>"></script>
<script type="text/javascript" src="<span style="color: red; margin: 0px; padding: 0px;">http://wierdwalker.googlecode.com/files/prototype.js</span>"></script>


4. Masuk lagi ke Rancangan - Edit Laman
5. Tambahkan gadget lalu pilih HTML/Javascript
6. Masukkan kode berikut ini pada gadget tersebut

<!-- Welcome page Start by http://blogtrikdantips.blogspot.com/ -->
<style>a.lbAction {
padding: 0 3px;
text-decoration: none;
float: right;
position: absolute;
top: -20px;
right: -20px;
color: #000000;
border: 5px solid #000000;
background: #CCCCCC;
z-index: 102;
}
a.lbAction:hover {
background: #FFFFFF;
}
a.lbAction:active {
background: #999999;
}



div.leightbox {
color: #333;
display: none; /* toggle display to show/hide the popups when designing & previewing */
position: absolute;
top: 50%;
left: 50%;
margin: -250px 0 0 -200px;
width: 500px;
height: 400px;
padding: 0;
border: 1em solid #000000;
background: #FFFFFF;
z-index: 101;
overflow: none;
}
div.scrollbox {
margin: 0 auto;
width: 100%;
height: 100%;
text-align: left;
overflow: auto;
}

.scrollbox h1{text-align: center;}
.scrollbox p{text-align: center;}
.scrollbox img{float:left;margin:0px 0px 0xp 10px;}
div#overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color:#000000;
-moz-opacity: 0.80;
opacity: .80;
filter: alpha(opacity=80);
}

div.lightbox[id]{ position:fixed; }
div#overlay[id]{ position:fixed; }
</style><div style="padding-top:15px;">
<a id="EPEntryButton" onclick="document.getElementById(&quot;HTML88&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;Text88&quot;).style.display=&quot;none&quot;">ENTER</a>
</div>
<div id="EPGrab"><a href=" http://dorkzi.blogspot.com/" target="_blank">Make your own</a></div>
<div id="EPDarkLayer"></div>
<!-- CSS part -->
<style>
#welcome-wrapper{width:40%;margin:0 auto;height:0px;text-align:center;}
/* welcome message widget */
#Text88, #EPEntryButton, #EPGrab {position:relative;z-index:510;top:100px;}
#Text88 {background-color:#fff;border:solid 10px orange;color:#222;display:none;padding:15px;}
#HTML88 {z-index:499;display:none;}
/* DarkLayer div */
#EPDarkLayer {background-color:#000;opacity:0.6;filter:alpha(opacity=60);top:0px;left:0px;z-index:500;position:fixed;}
/* Entry button */
#EPEntryButton {background-color:lawngreen;border:outset 3px #000;color:#333;cursor:pointer;font-size:25px;padding:5px;text-decoration:none;}
#EPGrab {color:white;padding-top:10px;}
</style>
<!--[if IE 6]>
<style>
#EPDarkLayer {position:absolute;}
</style>
<![endif]-->
<!----------// POPUP (AUTOLOAD) //---------->
<div id="pop01" class="leightbox">

<div class="scrollbox">
<h1>Welcome To My Blog</h1>
<p>A blog by <a href=" http://ilovebloggink.blogspot.com/ ">Tips blogging dan Tutorial blog</a></p>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOH95Gw8_gmN9wmdzhUSJ0yxfOA34p13mGeaGvFd1pPzEiqqzPs2HNPPB1SGpU0RzRZqjS0kVR2qrSWHUU-7cK74Twy3_hYztvWoeO_9e-lBvf-yB0ayQsRYrdITuRPXejBg1rUnpwZCPx/s1600/WelcomeToMyPageRdFlower2.jpg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="300" width="294" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOH95Gw8_gmN9wmdzhUSJ0yxfOA34p13mGeaGvFd1pPzEiqqzPs2HNPPB1SGpU0RzRZqjS0kVR2qrSWHUU-7cK74Twy3_hYztvWoeO_9e-lBvf-yB0ayQsRYrdITuRPXejBg1rUnpwZCPx/s320/WelcomeToMyPageRdFlower2.jpg" /></a>

</div>
<a href="#" class="lbAction" rel="deactivate">Enter The Blog</a></div>

<!----------// POPUP (AUTOLOAD script: add AFTER the autoload popup div) //---------->
<script type="text/javascript">
lb = new lightbox();
lb.initCallable('pop01');
lb.activate();
</script><!-- Welcome page End -->

7. Ganti tulisan berwarna biru dengan Url blog Anda. Selamat mencoba...
READ MORE - Cara Membuat Menu Pop Up Selamat Datang Pada Blog

Cara Membuat Efek Gambar Transparan


Efek ini dikenal dengan nama 'Mouse over efek on image'.....atau 'efek mouse pada gambar'.
Anda berminat. Ikuti langkah dibawah ini:

1. Login ke blogger
2. Ketika anda sedang memposting masukan kode ini.

<img src="Masukkan URL Gamabar Anda Disini" style="opacity:0.2;filter:alpha(opacity=40)"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

3. Demo: Letakkan kursor sobat pada gambar diatas
4. Masukan url anda pada tulisan berwarna merah!! efeknya akan terlihat dari redup menjadi cerah.

Selamat mencoba...
READ MORE - Cara Membuat Efek Gambar Transparan

Cara Membuat Slide Posting


Rasanya belum lengkap apabila anda belum mencoba membuat Posting dengan Tampilan Slide. Jika demikian maka coba saja trik berikut ini. Posting dengan tampilan slide disini adalah hasil dari posting yang kita tulis akan ditampilkan dalam bentuk slide. Bagian dari tampilan yaitu judul posting dan isinya.

1. Login ke blogger
2. Pilih Tata Letak dan tambahkan gadget
3. Klik HTML JavaScript
4. Masukan kode dibawah ini:

<div id="TickerBC3905386" style="width:220px;height:150px
;overflow: auto;overflow-x: hidden;overflow-y: hidden;border-style: solid;border-width: 0;border-color: #CC6699;background-color: #FFCCFF;" class="bc_ticker">

<table width="100%">
<tr>
<td width="10" style="color: #0000CC; font-size: 10pt; font-family: Arial,Helvetica;"><a id="TickerPrevBC3905386" style="text-decoration: none; color: #0000CC;" href="javascript: ;" class="bc_tickerarrow" onclick="PrevTickerBC3905386();">«</a></td>
<td id="TickerContentBC3905386" style="vertical-align: top;background-" class="bc_tickercontent">
<a id="TickerLinkBC3905386" style="text-decoration: none;" href="javascript: ;" class="bc_tickerlink" target="_top"><b><span id="TickerTitleBC3905386" style=" " class="bc_tickertitle"></span></b></a> <span id="TickerSummaryBC3905386" style=" " class="bc_tickersummary"></span>
</td>
<td width="10" style="color: #0000CC; font-size: 10pt; font-family: Arial,Helvetica;"><a id="TickerNextBC3905386" style="text-decoration: none; color: #0000CC;" href="javascript: ;" class="bc_tickerarrow" onclick="NextTickerBC3905386();">»</a></td>
</tr>
</table>

<!-- DO NOT CHANGE OR REMOVE THE FOLLOWING NOSCRIPT SECTION OR THE BLASTCASTA NEWS TICKER WILL NOT FUNCTION PROPERLY. -->
<noscript><a href="http://www.blastcasta.com/" title="Add News and Content to Websites, Customize: Combine and Filter Feeds"><img border="0" src="http://www.blastcasta.com/images/tp.gif"/></a></noscript>
</div>

<script id="scr3905386" type="text/javascript"></script>
<script type="text/javascript">
setTimeout('document.getElementById(\'scr3905386\').src = (document.location.protocol == \'https:\' ? \'https\' : \'http\') + \'://www.blastcasta.com/ticker-js.aspx?feedurl=http%3A//http://ilovebloggink.blogspot.com/feeds/posts/default&changedelay=4&maxitems=-1&showsummary=1&objectid=3905386\'', 500);
</script>
</div>

5. Gantikan tulisan berwarna merah dengan URL blog anda.
#NB: Sesuaikan ukuran kotak Slide Posting dengan ukuran ruang pada blog anda.

6. Simpan dan lihat hasilnya..selamat mencoba :)
READ MORE - Cara Membuat Slide Posting

Cara Memasang Recommended Slide Out Pada Blog


Widget jquery ini akan muncul seperti slide ketika pengujung melihat halaman yang paling bawah. Recommended slide out akan menampilkan posting acak pada blog anda. Anda tidak perlu kuatir dengan loading page blog karena widget ini telah dimodifikasi sehingga tidak membuat halaman menjadi berat.

1. Untuk membuatnya silahkan kunjungi situs BloggerPlugins.org atau KLIK DISINI
2. Pada situs tersebut klik icon blogger yang tampak seperti dibawah ini:


3. Akan muncul jendela baru, lalu klik Menambah Widget

Widget anda akan tersimpan pada Elemen Halaman. Jika anda ingin melihatnya, maka buka posting dari halaman anda, lalu scroll ke halaman paling bawah. Anda akan melihat recommended post slideout muncul dari sudut kanan. Selamat mencoba!
READ MORE - Cara Memasang Recommended Slide Out Pada Blog

Cara Membuat Widget Follow Me On Twitter

Ada berbagai macam jenis widget Follow Me yang sering kita lihat tentunya, mulai dari widget Follow Me animasi sampai yang statis (diam). Dan penempatan widget ini pun bisa dimana saja, bisa di sidebar dan ada juga widget Follow Me yang melayang (floating) bebas ditempatkan di area mana saja. Kali ini saya mau share cara pasang widget follow me twitter melayang aja deh seperti yang ada di blog ini. Sekalian saya kasih 2 tipe sekaligus, yang dengan animasi sama yang statis (diam) alias non animasi..

Widget Follow Me Twitter Melayang dengan Animasi :
1.Login ke dashboard blogger anda.
2.Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).
3.Copy script dibawah ini dan paste pada gadget.

<a style="display:scroll;position:fixed;bottom:1px;left:1px;" href="http://twitter.com/rizkyy_10" target="_blank"><object type="application/x-shockwave-flash" data="http://www.buzzbuttons.com/BUTTON8/twitbutton.swf" width="159" height="159"><param name="movie" value="http://www.buzzbuttons.com/BUTTON8/twitbutton.swf" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="flashvars" value="username=http://twitter.com/rizkyy_10" /></object></a>

4.Ganti username Twitter http://twitter.com/rizkyy_10 dengan akun twitter anda.
5.Save / Simpan.



Widget Follow Me Twitter Non Animasi (statis) :
1.Login ke dashboard blogger anda.
2.Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).
3.Copy script dibawah ini dan paste pada gadget.

<a style="display:scroll;position:fixed;bottom:1px;left:1px;" href="http://twitter.com/rizkyy_10" target="_blank"><img src="http://www.twitterbuttons.org/images/twitter-9a.png" width="150" height="124" border="0" /></a>

4.Ganti username Twitter http://twitter.com/rizkyy_10 dengan akun twitter anda.
5.Save / Simpan.

Nah untuk widget follow me twitter yang kedua, sobat dapat menggonta-ganti gambar buttonnya dengan koleksi gambar button follow me yang ada disini http://www.twitterbuttons.org/index.html. Caranya tinggal ganti URL button yang saya tandai dengan warna biru dengan URL button twitter pilihan. Ada puluhan button twitter follow me yang bisa sobat pilih. Contoh gambar-gambarnya yang ada dibawah ini nih :





Selamat mencoba...
READ MORE - Cara Membuat Widget Follow Me On Twitter

Cara Membuat Efek Ketikan Pada Judul Blog


Ada beberapa cara untuk membuat judul blog menjadi animatif. trik kali ini sedikit berbeda dimana judul blog akan muncul seperti sebuah ketikan dari masing-masing huruf. Kalo misalnya anda tertarik untuk memasangnya pada blog anda ikuti aja trik berikut ini:

1. Login ke blogger
2. Pilih Tata Letak
3. Klik Edit HTML
4. Cari kode </body>
5. Paste script berikut ini tepat diatas kode </body>

<script>
var tit = document.title;
var c = 0;
function writetitle() {
document.title = tit.substring(0,c);
if(c==tit.length)
{
c = 0;
setTimeout("writetitle()", 2000)
}
else {
c++;
setTimeout("writetitle()", 275)
}
}
writetitle()
</script>

6. Simpan perubahannya dan lihat hasilnya..

READ MORE - Cara Membuat Efek Ketikan Pada Judul Blog

Cara Membuat Widget Status Twitter Di Blog

Demo hasil widget dapat sobat lihat pada screenshoot diatas dan scriptnya dapat langsung dicopy aja terus pasang di sidebar blog sobat dan jangan lupa ganti username twitternya.

<div style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Ezk0N2r1-zWShmsJHUDoidWF82H5X92YDcQ0WFc5618RpHOsGcIiz0DASusjobuLnfyNmBb7Fg_GyP39C2wtizaxVx7tTJo90snUAR-oR1gsIdJT7CUw3ybK57AUNd5UCGumypU5H44o/s1600/tweet.png) no-repeat;padding-top:45px;padding-left:8px">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 10,
interval: 3000,
width: 285,
height: 123,
theme: {
shell: {
background: 'transparent',
color: '#000000'
},
tweets: {
background: 'transparent',
color: '#000000',
links: '#135a9e'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'default'
}
}).render().setUser('rayhanzhampiet').start();
</script>
</div>
<br />
<div class="twitter"> <!-- Twitter --> <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp;
align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;
lang=en&amp;link_color=&amp;screen_name=rayhanzhampiet&amp;show_count=&amp;
show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>

Simpan dan lihat hasilnya..
READ MORE - Cara Membuat Widget Status Twitter Di Blog

Cara Membuat Page Peel Join Us On Facebook


Page peel blog adalah halaman yang melipat pada blog anda dan akan terbuka lebar lipatannya apabila anda mengarahkan mouse anda diatas efek tersebut, contohnya seperti yang ada pada gambar diatas.

penasaran bagaimana membuatnya? Ikuti langkah berikut ini:

1. Login ke blogger
2. Masuk ke Design --> Klik Edit HTML
3. Cari kode </head>
4. Letakan script dibawah ini diatas kode </head>

<script type='text/javascript'>var tujuan =&#39; http://www.facebook.com/rizkyvanhalen &#39;</script>
<script src='https://sites.google.com/site/ivennuary/script-ivennuary/page-peel-effect/page_peel_effect.js/' type='text/javascript'/>

5. Ganti kode berwarna merah dengan url halaman facebook anda.
6. Simpan template dan lihat hasilnya.
READ MORE - Cara Membuat Page Peel Join Us On Facebook

Cara Membuat Popular Post Tanpa Thumbnail

Popular post atau posting populer adalah artikel yang paling sering atau banyak mendapat komentar dari pengunjung. Selain judul populer post yang ditampilkan, juga akan memuat jumlah komentar dari pengunjung. Caranya membuatnya mudah saja, langsung kita praktekan:

1. Login ke blogger
2. Masuk ke Rancangan --> Edit Halaman
3. Tambahkan Gadget
4. Pilih HTML/Javascript
5. Masukan kode dibawah ini:

<script type="text/javascript">
function getYpipePP(feed) {
document.write('<ol style="">');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = " (" + feed.value.items[i].commentcount + ")";
var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
document.write(pList);
document.write(pComment); //to remove comment count delete this line
document.write('</a></li>
');
}
document.write('</ol>
');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://ilovebloggink.blogspot.com
&amp;ShowHowMany=10
&amp;_id=390e906036f48772b2ed4b5d837af4cd
&amp;_callback=getYpipePP
&amp;_render=json" type="text/javascript">
</script>

Keterangan:
- Kode berwarna biru adalah jumlah artikel yang ingin ditayangkan
- Kode berwarna merah adalah url blog Anda

6. Ganti kode berwarna merah dengan url blog anda
7. Simpan gadget. Selamat mencoba..
READ MORE - Cara Membuat Popular Post Tanpa Thumbnail

Cara Membuat News Sticker


News sticker adalah cuplikan judul berita atau highlight yang ditampilkan dalam bentuk sticker. Ada news sticker dalam bentuk show hide ada juga dalam bentuk marquee (teks berjalan). News sticker biasanya bisa ditemukan dalam acara berita di tv yang ditampilkan dibawah layar. Kali ini news stiker yang kita buat sedikit berbeda karena menampilkan judul posting atau artikel dalam bentuk show hide. Selain judul berita news sticker ini juga menampilkan tanggal posting artikel tersebut. Kita akan menggunakan script jquery untuk membuatnya news sticker ini. Ingin tau caranya ikuti tutorial berikut ini:

1. Login ke Blogger
2. Masuk ke Rancangan --> Edit HTML
3. Carilah kode kode ]]></b:skin>
4. Paste kode dibawah ini diatas kode ]]></b:skin>

/* News Sticker by www.blogtrikdantips.blogspot.com
---------------------------------------------*/
.newspic {background:#FFF url(http://4.bp.blogspot.com/-dx79apSnB6I/T3UoZVIgltI/AAAAAAAACxY/35LWW31ebL4/s1600/BRK+NW.png) no-repeat top left;BORDER:1PX SOLID #CDCDCD; width:840px;margin:0 auto;padding:0 auto;height:23px;color:#000;}
.news {width: 840px;margin:0 auto;padding:0 auto;line-height: 1em;text-align:left;font-family:Arial;font-size:10px;color:#000;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#000;text-decoration:none;}
.news a:hover {color:#0099cc;text-decoration:underline;}

5. Selanjutnya letakkan kode berikut ini diatas kode </head>

<!-- News sticker by www.blogtrikdantips.blogspot.com -->
<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'/>
<script type='text/javascript'>
//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};
var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]>
</script>
<style type='text/css'>
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;}
.labelfield{ /*CSS for label field in general*/
color:#0099cc;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#aaa;font:normal 12px courier;text-transform:none;}
#example1{ /*Demo 1 main container*/
width: 960px;
height: 13px;
border: 0px solid #cdcdcd;
padding: 0px;
font:bold 13px courier;
text-transform:none;
text-align:left;
background-color:transparent;}
code{ /*CSS for insructions*/
color: #0099CC;}
#example1 a:link, #example1 a:visited {color:#0099cc;text-decoration:none;}
#example1 a:hover {color:#111;text-decoration:none;}
</style>

6. Kemudian kita akan meletakkan News sticker tersebut diatas posting dan sidebar, caranya yaitu cari kode <div id='outer-wrapper'>

7. Setelah itu paste kode berikut diatas kode <div id='outer-wrapper'>

<div style='clear:both;'/>

<div class='newspic'>
<div style='float:left;width:780px;padding:6px 0 6px 125px; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://dorkzi.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>

8. Ganti kode berwarna merah diatas dengan url blog anda
9. Simpan template anda dan lihat hasilnya

Semoga bermanfaat :D
READ MORE - Cara Membuat News Sticker

Selasa, 17 April 2012

Cara Membuat Efek Slideshow Pada Gambar (With jQuery)

Untuk cara membuatnya :
1.Login blogger
2.Rancangan, Edit Html
3.Cari kode ]]></b:skin> lalu letakkan kode berikut diatas kode tadi :

/*--------Slide show-------------*/
.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;
}

Selanjutnya cari kode </head> lalu letakkan kode di bawah ini diatas kode tadi :

<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>

Simpan template..........

Selanjutnya simpan kode berikut Pada Edit Html postingan sobat atau bisa juga pada Gadget Html/ Java script Sesuai kebutuhan..

<div id="coin-slider">

<a href="Link target gambar" target="_blank">
<img src="http://i1094.photobucket.com/albums/i447/kang-da2ng/iwanranu.jpg" />Keterangan gambar</a>

<a href="Link target gambar" target="_blank">
<img src="http://i1094.photobucket.com/albums/i447/kang-da2ng/iwannende.jpg" />Keterangan gambar</a>

<a href="Link target gambar" target="_blank">
<img src="http://i1094.photobucket.com/albums/i447/kang-da2ng/iwan2.jpg" />Keterangan Gambar</a>

</div>

Yang berwarna biru silahkan ganti dengan URL atau keterangan lain, sesuai kebutuhan.....
#NB: terkadang cara ini tidak cocok pada sebagian Template,,, tapi tidak ada salahnya mencoba...

Selamat Mencoba...
READ MORE - Cara Membuat Efek Slideshow Pada Gambar (With jQuery)

Cara Membuat Blockquote Hover

Cara membuat Blockquote Hover :
1.Login blogger
2.Rancangan, Edit Html, Cari kode ]]></b:skin>
3.Dan Simpan kode dibawah ini diatas kode nomor 2 :

blockquote {
padding: 10px; height: auto;
margin: 10px 0 10px 20px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7lIchq_IgnKplA_BK4egbIcZm8DF2BITbICNgcbFU4abM9hGJ4GezEZ2pR53WLbWZ1yCIOEtLIy8SyVQQq70MDr3W4rAL9pGYtF3A2YHBlH5yEfHc4mhlasJk8Xl6LNMg0tl5N1701tXi/s1600/papers.jpg);
font: 13px/17px Serif, Times, Helvetica;
font-style: italic;
color: #FFCC99;
text-shadow: 1px 1px 1px #000;
border: 1px ridge #0099FF;
border-radius: 20px 10px 20px 10px;
-moz-border-radius: 20px 10px 20px 10px;
-webkit-border-radius: 20px 10px 20px 10px;
-o-transition: all 1.2s ease-in;
-moz-transition: all 1.2s ease-in;
-webkit-transition: all 1.2s ease-in;
}
blockquote:hover {
color: #eee;
-o-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
-moz-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
-webkit-transform: rotate(0deg) scale(1.06) translate(-10px, 0);}
blockquote span.bbuka, blockquote span.btutup {
float: left;
margin-right: 5px;
height: 17px;
width: 22px;
background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-L.png) left top no-repeat;
-o-transition: all 1.2s ease-in;
-moz-transition: all 1.2s ease-in;
-webkit-transition: all 1.2s ease-in;
}
blockquote span.bbtutup {
float: right;
margin-left: 5px;
margin-right: 0;
background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-R.png) right top no-repeat;
}
blockquote:hover span.bbuka, blockquote:hover span.btutup {
-o-transform: rotate(1090deg) scale(1.1);
-moz-transform: rotate(1090deg) scale(1.1);
-webkit-transform: rotate(1090deg) scale(1.1);
}

Untuk memanggilnya, silahkan simpan kode berikut pada edit html postingan kawan :

<blockquote><span class="opening"></span>Masukkan teks disini<span class="closing"></span></blockquote>

Simpan. Selamat mencoba..
READ MORE - Cara Membuat Blockquote Hover