Tampilkan postingan dengan label artikel Tips dan Trik. Tampilkan semua postingan
Tampilkan postingan dengan label artikel Tips dan Trik. Tampilkan semua postingan

Rabu, 11 Desember 2013

Membuat tulisan yang bergerak mengikuti kursor mouse

contoh hasilnya

untuk membuatnya silakan simak cara berikut ini
cari ruangan code html/javascript
masukkan code dibawah berikut ini

<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: normal;
font-weight: normal;
font-family: 'comic sans';
color: #FF0080;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>
<script type="text/javascript">
;(function(){
var msg = "Followers";
var size = 24;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
var speed = 0.2;
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
</script>


kemudian save dan lihat hasilnya .. . . .

Senin, 09 Desember 2013

menjadikan kursor diikuti oleh bintang bintang

cari ruangan untuk menempatkan code html/javascript
kemudian masukkan code dibawah ini

<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/blues.js"></script>

atau juga  bisa

<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/purples.js"></script>

kemudian save dan lihat hasilnya

Minggu, 08 Desember 2013

cara mengganti warna Text Highlight

misalnya







akan diganti seperti ini

 





---------------------

caranya masuk ke dashboard >> templates >> edit html
cari code dibawah ini
body {

kemudian masukkan code 

::-moz-selection {
background: #CC3399;
color: #ffffff;
}

Sabtu, 07 Desember 2013

Membuat recent post disertai gambar pada blog


masukkan code dibawah ini kedalam rauang code html/javascript
silakan untuk mencoba
<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/recentpost.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>


Jumat, 06 Desember 2013

Membuat kesan pada gambar apabila didekati kursor mouse



masuk ke dashboard >> template >> edit html
cari kode a img {

delete  kode setelah a img { 
gantikan dengan
-webkit-transition-duration:.4s;}

img:hover {filter: alpha(opacity=60);
opacity: .6;
border-radius:20px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}


jika tidak menemukan kode a img{
copy paste code berikut
kemudian diletakkan SEBELUM /* Headings atau /* Header

a img {
-webkit-transition-duration:.4s;}
img:hover {filter: alpha(opacity=60);
opacity: .6;
border-radius:20px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}


coba lihat hasilnya pada gambar postingan blog anda

lihat perbedaanya . .. . .. . 

Senin, 25 November 2013

Membuat 3 menu tab di blog

copy paste code dibawah ini;
masukkan kedalam ruangan html/javascript

semoga berhasil .. .  .

save dan lihat hasilnya

<style>


.tabmenu1 {


text-align:center;


width:260px;


color:#333333


}


a.tabmenu {




background: pink;


width:84px;


text-decoration:none;


color:#333333;


display:inline-block;


padding-top:10px;


padding-bottom:10px;


text-align:center;


font:12 georgia;


letter-spacing:2px;


-webkit-transition-duration:0.5s;


}


a.tabmenu:hover {


background: #000;


color:#fff;


-webkit-transition-duration:0.5s;


}


#menu img { max-width:260px;}


 </style>


<center><div class="tabmenu1">


<a class="tabmenu" onclick="document.getElementById('menu').innerHTML=document.getElementById('nav1').innerHTML" >PAGE 1</a>


<a class="tabmenu" onclick="document.getElementById('menu').innerHTML=document.getElementById('nav2').innerHTML" >PAGE 2</a>


<a class="tabmenu" onclick="document.getElementById('menu').innerHTML=document.getElementById('nav3').innerHTML" >PAGE 3</a>


<div id="menu" style="width:260px;color:#333333;font:12px verdana;">


WELCOME


</div>


<div id="nav1" style="display: none;">


ISI 1


</div></div>


<div id="nav2" style="display: none;">


ISI 2


</div>


</div>


<div id="nav3" style="display: none;">


ISI 3,p.
j<p>
asdaqw<p>
sd


</div></div>

</div></div>

Sabtu, 23 November 2013

Animasi text berjalan di bagian sidebar (marquee)

silakan masukkan code berikut taruh didalam ruangan html/javascript


<marquee style="background-color:FFDDFF; border: 3px solid pink; color:#FF0000; font-family:verdana; font-size:9pt; width:100px; height:25px; " direction="left" behavior="scroll" scrollamount="5" >TEXT BERJALAN ADA DISINI</marquee>

kemudian save dan lihat hasilnya




Minggu, 17 November 2013

Menampilkan satu postingan dihalaman depan blogspot


lari ke dashboard

ikuti langkah berikut pada gambar . ganti dengan 1 / posting di laman utama

semoga berhasil . . . ..


Rabu, 13 November 2013

Membuat kelompok link navigasi menu

copy code berikut masukkan kedalam ruangan html/javascript
<br/><center>
<a href="LINK">About Me</a> | <a href="LINK">Profile</a> | <a href="LINK">Facebook</a><a href="LINK">Twitter</a> | <a href="LINK">Youtube </a> | <a href="LINK">Tips-Trick</a>
<center><a href="LINK">Google Plus</a></center>
</center>


jika berhasil , maka hasilnya kan seperti dibawah

Minggu, 10 November 2013

Meletakkan script iklan banner bergerak di blog


cari ruangan html/javascript
masukkan code berikut
<center><center><div style=' background: #fff; border: 2px solid #fc0c92; padding: 2px; width: 710px;'><div style='text-align: center;'><marquee behavior='alternate' direction='right' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3'><a href="LINK1"><img src="http://icons.iconarchive.com/icons/tanitakawkaw/simple-cute/128/box-icon.png" alt="" width="125" height="125" /></a><a href="LINK2"><img src="http://icons.iconarchive.com/icons/petalart/free-shopping/128/shipping-box-icon.png" alt="" width="125" height="125" /></a><a href="LINK3"><img src="http://icons.iconarchive.com/icons/double-j-design/ravenna-3d/128/Box-icon.png" alt="" width="125" height="125" /></a><a href="LINK4"><img src="http://icons.iconarchive.com/icons/mymovingreviews/3d-movers/128/boxes-brown-icon.png" alt="" width="125" height="125" /></a></marquee></div></div></center></center>


save dan lihat hasilnya
semoga berhasil  . . . .   ,


Senin, 28 Oktober 2013

Membuat navigasi bar di blogspot


masukkan code berikut kedalam ruangan html/javascript
save dan lihat hasilnya

semoga berhasil . .. . . .

<style>

.tingtong{

margin-right:-0px;

margin-left:-0px;

background: url(LINK BACKGROUND);top:0px;

left:0px;

text-align:center;

padding-top:10px;

padding-bottom:10px;

border: #e69fba 3px solid;

}

a.blabla{

background:#e69fba ;

text-decoration:none;

color:#fff;

padding:5px;

font:12px arial;

margin-left:5px;

margin-right:5px;

-webkit-transition:All 0.4s ease;

-moz-transition:All 0.4s ease;

-o-transition:All 0.4s ease;

display:inline-block;

padding-right:10px;


padding-left:10px;


}




a.blabla:hover{background:#fff;

color:#000;

</style>

<br />

<div class="tingtong">

<a class="blabla" href="YOUR LINK">PAGE 1</a>

<a class="blabla" href="YOUR LINK">PAGE 2</a>

<a class="blabla" href="YOUR LINK">PAGE 3</a>

<a class="blabla" href="YOUR LINK">PAGE 4</a>

<a class="blabla" href="YOUR LINK">PAGE 5</a>


</div>

Rabu, 23 Oktober 2013

Memberikan border style di sidebar blog

masuk kedalam edit html
cari code berikut ]]></b:skin>
kemudian paste code berikut ini tepat diatas code yang dicari tadi
.sidebar .widget {
background: #FFF;
border: 2px solid #000;
  margin:5px 5px 1.0em;
  padding:0px 5px 1.0em;
border-radius: 10px; }

simpan template dan lihat hasilnya ..

yang diblok hijau itu adalah lengkungan border

Minggu, 13 Oktober 2013

Menempatkan Hover Over banner link didalam blog

copy paste code berikut ini, letakkan diruangan html/javascript
save dan lihat hasilnya

semoga berhasil

<style>

#bannerdiv {

    z-index: 9999;

    position: fixed;

    bottom: -300px;

    right: 20px;

    -webkit-transition: all 1s ease-in-out;

    -moz-transition: all 1s ease-in-out;

    -o-transition: all 1s ease-in-out;

    transition: all 1s ease-in-out;

    background-color: #000000;

padding: 5px;

margin: 4px;

border-radius: 10px 10px 0px 0px;

}

#bannerdiv:hover {

    bottom: -5px;

}

#bannertitle {

    text-align: center;

    font-size: 11px;

    font-family: verdana;

    letter-spacing: 1px;

    color: #ffffff;

    padding: 3px 5px 15px 5px;

    border-top-left-radius: 10px;

    border-top-right-radius: 10px;

}

 </style>




<br />

<div id="bannerdiv">

<div id="bannertitle">

GIVEAWAY</div>

<center>

<a href="LINK ANDA"><img height="70" src="http://icons.iconarchive.com/icons/tanitakawkaw/simple-cute/128/box-icon.png" width="70" /></a></center>

<center>

<a href="LINK ANDA"><img height="70" src="http://icons.iconarchive.com/icons/double-j-design/ravenna-3d/128/Box-icon.png" width="70" /></a></center>

<center>

<a href="LINK ANDA"><img height="70" src="http://icons.iconarchive.com/icons/petalart/free-shopping/128/shipping-box-icon.png" width="70" /></a></center>

<center>

<a href="LINK ANDA"><img height="70" src="http://icons.iconarchive.com/icons/mymovingreviews/3d-movers/128/boxes-brown-icon.png" width="70" /></a></center>

</div>

Rabu, 09 Oktober 2013

Memberikan border style di sidebar dengan warna lebih dari satu



cari edit html template
cari code berikut  ]]></b:skin>

masukkanm code berikut ini tepat diatas code yang dicari

.sidebar .widget {
background: #FFF;
border-top: 4px solid #F5A9BC;
border-bottom: 4px solid #A9BCF5;
border-left: 4px solid #A9BCF5;
border-right: 4px solid #F5A9BC;

  margin:5px 5px 1.0em;
  padding:0px 5px 1.0em;
border-radius: 10px;
 }

yang tebal >> menentukan warna border style colour
blok hijau >> menentukan lengkungan border


save template . .. , dan lihat hasilnya . .. . ...

Minggu, 06 Oktober 2013

Pasang Breaking News





.newspic {background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggrQtIuqOvcAnRx6iQGV6yJbCyidZxIDURsjNmtQck_CeZiYEbpDYFrGGl5zlVzLzsUL8-8EpTc57otqTp6ptJFmrKhFX6hqlvobETtdbRMg0CHctq805TKCQsQAamr7m7gwjwIhnHaR0/s1600/BRK+NW.png) no-repeat top left;width:979px;margin:0 auto;padding:0 auto; height:24px;color:#fff;}
.news {width: 979px;margin:0 auto;padding:0 auto;line-height: 1.2em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#000000;text-decoration:none;}
.news a:hover {color:#ddd;text-decoration:underline;}
---------------------------------------------------------------

Letakkan kode berikut diatas  </head> 




Jumat, 20 September 2013

Cara mengganti template blogspot

Cara mengganti template blogspot
Cara mengganti template blogspot

=
Cara mengganti template blogspot

=

 klik open setelah itu klik unggah ..  . tunggu samapi proses selesai


Sabtu, 07 September 2013

Round hover jika kursor menyentuh pada gambar

cari dibagian edit html

cari code berikut  /* Header

silakan masukkan code berikut di atas code yang anda cari
/*------ IMAGE ANIMATION------*/img {filter:alpha(opacity=100);-webkit-transition-duration:.5s;} img:hover {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow: 0px 0px 20px #FF3366; -moz-box-shadow: 0px 0px 20px #FF3366; -webkit-border-top-right-radius:30; -webkit-border-top-left-radius:30; -webkit-border-bottom-right-radius:30; -webkit-border-bottom-left-radius:30;}img:hover {filter: alpha(opacity=60); opacity: .60; border: 1px solid#FF3366; border-radius: 50px; -moz-border-radius: 50px;}-moz-opacity:1.0;opacity:1.0;}img:hover {filter:alpha(opacity=80);-moz-opacity:0.80;opacity:.80;}u {text-decoration:underline;border-bottom: 2px dotted #ff0080;padding: 0px;}








semoga berhasil .. . . 




Membuat beraneka [aneka macam jenis border]

menentukan warna >> yang diblok hijau

untuk code OUTSET

<div style="background-color:black; -webkit-border-radius: 20px;border:5px OUTSET #001EFF; padding:10px;">TULISAN ADA DISINI</div>

hasil:
TULISAN ADA DISINI

untuk code INSET

<div style="background-color:black; -webkit-border-radius: 20px;border:5px INSET #001EFF; padding:10px;">TULISAN ADA DISINI</div>

hasil:
TULISAN ADA DISINI


untuk code GROOVE

<div style="background-color:black; -webkit-border-radius: 20px;border:5px GROOVE #001EFF; padding:10px;">TULISAN ADA DISINI</div>

hasil:
TULISAN ADA DISINI


untuk code RIDGE

<div style="background-color:black; -webkit-border-radius: 20px;border:5px RIDGE #001EFF; padding:10px;">TULISAN ADA DISINI</div>

hasil:
TULISAN ADA DISINI



untuk code DASHED

<div style="background-color:black; -webkit-border-radius: 20px;border:5px DASHED #001EFF; padding:10px;">TULISAN ADA DISINI</div>

hasil:
TULISAN ADA DISINI



untuk code SOLID

<div style="background-color:black; -webkit-border-radius: 20px;border:5px SOLID #001EFF; padding:10px;">TULISAN ADA DISINI</div>

hasil:
TULISAN ADA DISINI


untuk code DOUBLE

<div style="background-color:black; -webkit-border-radius: 20px;border:5px DOUBLE #001EFF; padding:10px;">TULISAN ADA DISINI</div>

hasil:
TULISAN ADA DISINI