Dashboard | +Follow

McJellyz Tutorialz.


★ Tutorial : Welcome Note (Classic Template)
Tutorial ne, terlalu ramai yang request T^T Saya pun dengan baik hati nak buat tutorial hari ini. Sekali dengan freebies, kalau korang nak lah heh heh. Ini untuk pengguna Classic Template/Blogskins sahaja. Saya masih mencari code untuk Template Designer. Ada tu memang ada, tapi nanti muncul pulak simbol --> kat atas blog, jadi tak lawa lah kan? Kan kan? :>

First things first, pergi sign in Blogger > Dashboard > Template.
  • Ctrl+F, cari </style>
Dah jumpa? Yeay ho ho. 
  • Now, korang paste code ne dekat atas </style> tadi.
.hallo {
text-align:center;
margin-top: 250px;
}
  • Dah paste code tu? Sekarang, cari code </head> pulak, then paste code bawah ne dekat bawah code </head> yang anda dah jumpa tu eh eh. Update ; kalau tak jadi, paste code bawah ne sebelum <body oncontextmenu='return false;'> atau <body>

<script language="javascript" type="text/javascript">
/* toggle() checks to see if the images has already been faded
or not and sends the appropriate variables to opacity(); */
function toggle(el,milli) {
// Get the opacity style parameter from the image
var currOpacity = document.getElementById(el).style.opacity;
if(currOpacity != 0) { // if not faded
fade(el, milli, 100, 0);
} else { // else the images is already faded
fade(el, milli, 0, 100);
}
}
/* changeOpacity() uses three different opacity settings to
achieve a cross-browser opacity changing function. This
function can also be used to directly change the opacity
of an element. */
function changeOpacity(el,opacity) {
var image = document.getElementById(el);
// For Mozilla
image.style.MozOpacity = (opacity / 100);
// For IE
image.style.filter = "alpha(opacity=" + opacity + ")";
// For others
image.style.opacity = (opacity / 100);
}
/* fade() will fade the image in or out based on the starting
and ending opacity settings. The speed of the fade is
determined by the variable milli (total time of the fade
in milliseconds)*/
function fade(el,milli,start,end) {
var fadeTime = Math.round(milli/100);
var i = 0; // Fade Timer
// Fade in
if(start < end) {
for(j = start; j <= end; j++) {
// define the expression to be called in setTimeout()
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
// setTimeout will call 'expr' after 'timeout' milliseconds
setTimeout(expr,timeout);
i++;
}
}
// Fade out
else if(start > end) {
for(j = start; j >= end; j--) {
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
setTimeout(expr,timeout);
i++;
}
}
}
</script>
<div class="hallo" onClick="javascript:toggle('wise', 3000); this.style.display='none'; document.getElementById('june').style.display=''">
<img src="URL WELCOME NOTE"
style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=40"/>
</div>

<div id="wise" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">
<div id="june" style="display : none;">

Nampak tak saya bold-kan and warnakan URL WELCOME NOTE tu? Ha yg tu gantikan lah dengan URL gmbr welcome note korang okay. Tak tahu nak gantikan dengan apa? Nah, saya kasi freebies.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXqXG41DGgdbIVrZ8wra5fOZO92ro__XfJV9EH4HHql7eyC5JmC8nXXa8NJeT3G0wiqK9c6yGuOS0h5MAlYSpXyle3sjLvV95NpTzU_ZX7YBXK_YcKDg86sF7ytDmo_GzMq0zT7qZWo-U/s1600/Blue.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH3XRmKszWlT5R0IDzzBOA3x58AvMmEV2QkO6XW63ooqv4Gy8bkNkXB1FmYrjVvC-JbjPHJ8DUmeFAV_XqJhaiXYwohfi1tfkd1HPJLKj0tS4uOnv1K6pQSA1ZL5KWuRD7SEItbRt9d3o/s1600/Orange.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfNFvd6EDq_nB545reSUPEsHPYJDHhaju_hSrB-LNZYF5QFz2bBTta9E4qQE7D92hnT__z1p8rX_KWxUukr-4OjOcvzIjFwAdLUsAp_ZrHJQhCZZo29iixO5XVti1kBuPPbz4TFCQr0_o/s1600/Pink.png

Ha, gantikan lah yang pink dengan pink hokay? Itu je lah hihi babai semoga berjaya :x Ehh cop cop cop, jangan lupa like fanpage baru saya ne heee. Ok babai.
xx Nazihah Anuar

- Tutorial List
- Personal Blog

p/s ; This blog is for tutorials only.
p/s(ii) ; I'm more active on my personal blog.