Home » Archives for April 2012
Cara Membuat Efek Link Bergoyang/Nudging
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:
Keterangan:
400 - Kecepatan Nudging
4) Klik save dan lihat hasilnya.
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.
Cara Mendapat Kode Follower
1) Pergi ke Google Friend Connect
2) Klik setting >> masukkan nama dan url blog >> kemudian klik save your settings
3) Klik Gadgets >> Pilih Members
4) Adjust width, Atur warna dengan keinginan kamu
5) Klik Generate kode dan copy kode yang tertera.
- Selesai -
2) Klik setting >> masukkan nama dan url blog >> kemudian klik save your settings
3) Klik Gadgets >> Pilih Members
4) Adjust width, Atur warna dengan keinginan kamu
5) Klik Generate kode dan copy kode yang tertera.
- Selesai -
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 biru - masukkan kod html gadget Anda
FFC8E3 - warna background kotak
dashed - Border
990066 - warna garisan border
FF3399 - warna bayang-bayang kotak.
Selamat mencoba...
Cara Membuat Efek Gambar Berubah Ketika Tersentuh Cursor
Penasaran? 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 :)
Scroll Box Untuk Widget
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
426 : width - Lebar scroll box
100 - Tinggi scroll box
4) Save dan lihat hasilnya.
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.
Efek Animasi Saat Cursor Menyentuh Link
Caranya:
1) Sign in akaun blogger
2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"
3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kode: a:hover
4) Kemudian copy paste kod di bawah selepas 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
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
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..
Cara Membuat Efek Shadow Pada Blockquote
Efek kotak bayang-bayang akan muncul apabila cursor menyentuh Blockquote. 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
Keterangan:
000000 - warna garis border. Tukar kepada warna yang Anda suka. Cek kode warna disini
FF3399 - warna bayang-bayang efek shadow
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
Cara Membuat Efek Star Wars Pada Blog
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:
- Ganti tulisan berwarna biru dengan kode warna yang Anda sukai
- Cek kode warna disini
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
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 {
5) Sekali lagi, dengan menggunakan ctrl + F, cari kode a:link {
6) Paste kode dibawah ini dibawah kode a:link {
7) Simpan template, dan lihat hasilnya...
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...
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
*Ganti tulisan berwarna biru dengan kode warna yang Anda sukai.
*Kode warna lihat disini
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
Cara Membuat Menu Pop Up Selamat Datang Pada Blog
Kali ini ita akan belajar tutorial bagaimana membuat 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. Pop up ini dibuat oleh wierd walker untuk mempercantik dan menambah efek pada blog anda. 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("HTML88").style.display="none";document.getElementById("Text88").style.display="none"">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://dorkzi.blogspot.com/ ">Tips blogging dan Tutorial blog</a></p>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3drJVOCBzownxJy5Pl3GdX3wND08afyY0Cr9lFp7hlU1MbEtdd4-G_4iGWtIPtn8U45p_XsBUMt2lbZmna4KK_U3gNy9UD3K95JBBUmkv_CYfQ5iSHSrNtkCK7urSTTQdTh6NGimCrLPg/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/AVvXsEi3drJVOCBzownxJy5Pl3GdX3wND08afyY0Cr9lFp7hlU1MbEtdd4-G_4iGWtIPtn8U45p_XsBUMt2lbZmna4KK_U3gNy9UD3K95JBBUmkv_CYfQ5iSHSrNtkCK7urSTTQdTh6NGimCrLPg/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...
Cara Membuat Efek Gambar Transparan
Kali ini saya akan memberi trik untuk membuat efek pada gambar. 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...
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//www.dorkzi.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. Sesuaikan ukuran kotak Slide Posting dengan ukuran ruang pada blog anda.
6. Simpan dan lihat hasilnya
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!
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.
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.
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...
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...
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
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.
Simpan dan lihat hasilnya..
<div style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK3T1_tG3b_AU1kbGgncePJjoW1HfmmJlDnpCfr8JZUMHPXsKffxTcqb4APOHKwNJ1G0mrFcBhfN8E5Xq7wKs00A9Z2BmAem9VeNlhndZI_hCpuI3rnRNVqXZArX4p_7KLDbUzml6v1WDs/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&
align=&button=blue&id=twitter_tweet_button_0&
lang=en&link_color=&screen_name=rayhanzhampiet&show_count=&
show_screen_name=&text_color=" frameborder="0" scrolling="no"></iframe> </div>
Simpan dan lihat hasilnya..
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 =' http://www.facebook.com/rizkyvanhalen '</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.
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:
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..
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://blogtrikdantips.blogspot.com
&ShowHowMany=10
&_id=390e906036f48772b2ed4b5d837af4cd
&_callback=getYpipePP
&_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..
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("example1", "example1class", 4000, "_new")
cssfeed.addFeed("Creating Website", "http://dorkzi.blogspot.com/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //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
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 :
Selanjutnya cari kode </head> lalu letakkan kode di bawah ini diatas kode tadi :
Simpan template..........
Selanjutnya simpan kode berikut Pada edit Html postingan kawan atau pada Gadget Html/ Java script Sesuai kebutuhan..
Yang berwarna biru silahkan ganti sesuai kebutuhan.....
namun terkadang cara ini tidak cocok pada sebagian Template,,, jadi coba saja dulu...
Selamat mencoba
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() { $('#coin-slider').coinslider({ width: 563, navigation: false, delay: 5000 }); }); </script>
Simpan template..........
Selanjutnya simpan kode berikut Pada edit Html postingan kawan atau 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 sesuai kebutuhan.....
namun terkadang cara ini tidak cocok pada sebagian Template,,, jadi coba saja dulu...
Selamat mencoba
Cara Membuat Blockquote Hover
Cara membuatnya :
1.Login blogger
2.Rancangan, Edit Html, Cari kode ]]></b:skin>
3.Dan Simpan kode berikut diatasnya :
Untuk memanggilnya, silahkan simpan kode berikut pada edit html postingan kawan :
Simpan dan lihat hasilnya..
1.Login blogger
2.Rancangan, Edit Html, Cari kode ]]></b:skin>
3.Dan Simpan kode berikut diatasnya :
blockquote {
padding: 10px; height: auto;
margin: 10px 0 10px 20px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglgTHxfAgYxsl7MHLxbP6-OGMvg2Hcp5AUhYI4ZN8y1Fx5UuXW3IugqArRfryUp8UfINFeyODj2uax87mNoT3OGYOqHlVm_hTR_aMMFH8Ctg6EpRmVvnPRl6jF7LMWQLe8xM-atmzn4auj/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 dan lihat hasilnya..