Cara pasang welcome image pada blog

Welcome image ini adalah imej akan terpapar bila kita mula mula masuk ke blog.Kita perlu klik pada imej tersebut bagi memasuki blog berkenaan.Rasanya dah banya blog yang memasangnya dengan berbagai bagai imej.Jika ada berminat untuk membuatnya.Ikuti langkah seterusnya:1.Log in ke Dashboard
2.Pilih Design >>Edit HTML









3.Cari kod  ]]></b:skin> pada template
Kemudian masukkan kod dibawah ini diatasnya:

</style></head>
<script language="javascript" type="text/javascript">

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);
}
}
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);
}
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="input" onClick="javascript:toggle('wise', 3000); this.style.display='none';
document.getElementById('june').style.display=''">
<center><img src="http://2.bp.blogspot.com/-dqVHXhhmaVk/TvAOcUwonAI/AAAAAAAAB1w/icKYmo-BFXA/s1600/welcome+image.png"
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"/></center>
</div>
<div id="wise" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">
<div id="june" style="display : none;">
 <body>

#bahagian teks berwarna merah boleh digantikan dengan url imej anda sendiri

4.Kemudian simpan template anda
 

Cara pasang shoutbox melayang

     Dalam artikel sebelum ini saya ada menerangkan cara bagaimana cara memasang shout box secara tersembunyi pada tepi paparan blog.Untuk kali ini pula agak berlainan kerana shoutbox yang diklik akan muncul dibahagian tengah  paparan blog dengan kesan gelap dan muncul secara perlahan lahan.Cara membuatnya juga agak mudah kerana  cuma perlu masukkan pada widget sahaja.Cara memasangnya:

1.Masuk ke design-klik page elements


2. pilih add a gadget

3.Pilih HTML/Javascript

Dan masukkan kod ini:

<!-- Start flying Shoutbox  by ybl -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
//select all the a tag with name equal to ybl
$('a[name=ybl]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var tbbHeight = $(document).height();
var tbbWidth = $(window).width();
//Set heigth and width to tbb to fill up the whole screen
$('#tbb').css({'width':tbbWidth,'height':tbbHeight});
//transition effect
$('#tbb').fadeIn(1000);
$('#tbb').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#tbb').hide();
$('.window').hide();
});

//if tbb is clicked
$('#tbb').click(function () {
$(this).hide();
$('.window').hide();
});

});
</script>
<style>a {color:#ffffff; text-decoration:none}
img { border: none; }
#tbb {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#ddt .window {
position:fixed;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#ddt #yblshoutbox {
background:url(https://lh5.googleusercontent.com/-nDP_P-QqX54/TWoQRu88UxI/AAAAAAAABaU/oJ_e6l8Kdg0/s1600/shout.gif) no-repeat 0 0 transparent;
width:272px;
height:460px;
padding:60px 0 20px 15px;
}
#ttp {
padding:2px 0 0 0;
}
</style>
<ul><center> <a href="#yblshoutbox" name="ybl"><img src="https://lh3.googleusercontent.com/-orZIIwB83bI/TWoQjbTHR6I/AAAAAAAABaY/6epCnQ_6Ar8/s512/button.gif" border="0" width="128" height="58" /></a> </center> </ul>
<div id="ddt">
<!-- Start Shoutbox -->
<div id="yblshoutbox" class="window">

LETAKKAN KOD SHOUTBOX DISINI

<div id="ttp"><input type="button" value="Close" class="close" style="background: #0066FF; color: #ffffff;"/><a href="http://teknikbuatblog.blogspot.com/2010/12/cara-pasang-shoutbox-melayang.html"><font size="1">get this</font>
</a></div></div><!-- End Shoutbox -->
<div id="tbb"></div></div>
<!-- End of flying Shoutbox  by ybl -->
Kemudian klik save
#Jangan lupa masukkan kod shoutmix pada ruangan diatas.Ubahkan kod shoutmix/Cbox contoh width="240" height="380" supaya memenuhi ruang bingkai.

 

Tricks Cara Memasang Burung Terbang Twitter di Blogger

.
Apakah ada diantara anda yang bosan dengan tampilan blog atau websitenya yang gitu-gitu aja? Bagi anda yang ingin mempercantik blog atau websitenya mungkin bisa memasang tricks yang satu ini agar tampilan blog atau website anda tidak membosankan, tampilan ini adalah tampilan burung twitter terbang yang tentunya akan sangat menarik untuk dilihat,dan sekaligus menambah teman twitter anda jika burung terbang itu di klik. Anda bisa melihat contohnya seperti pada blog saya ini.. :)

Ok seperti biasa anda login dulu di blog anda
  1. Login di Blogger
  2. Pilih Design
  3. Pilih Page Element
  4. Pilih Add Gadget
  5. Pilih Html/Java Script
  6. Copy paste code yang dibawah ini ke kolom Html/Java Script tersebut


<!-- floating twitter Bird -->
<script type="text/javascript" src="http://mangde.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="http://1.bp.blogspot.com/-oNZEzd5FasI/TcOd9CZrh_I/AAAAAAAAAaA/DhsDjm2xsBU/s1600/cyan+bird.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/Akun Twitter Anda";
var tweetThisText = "Twitter - UserID http://www.mangde.co.cc/";
tripleflapInit();
</script>


7. Cari tulisan yang berwarna biru dan gantilah dengan akun Twitter anda
8. Save dan lihat hasilnya

Update :


Bagi anda yang ingin tampilan burung dengan warna yang lain silahkan ganti url

  • http://1.bp.blogspot.com/-oNZEzd5FasI/TcOd9CZrh_I/AAAAAAAAAaA/DhsDjm2xsBU/s1600/cyan+bird.png

silahkan ganti url diatas dengan pilihan warna sesuai dengan selera anda dengan url dibawah ini

Warna Hitam

  • http://3.bp.blogspot.com/-XQ2GeMpVBIo/TcOdaP26SyI/AAAAAAAAAZg/kim-mviLbmw/s1600/black+bird.png
Warna Coklat

  • http://1.bp.blogspot.com/-cHBcUw3YZzE/TcOdbguvk7I/AAAAAAAAAZk/C7DyyoMbgI4/s1600/brown+bird.png
Warna Biru

  • http://3.bp.blogspot.com/-0ZjGQ5SfUS0/TcOdb8OId6I/AAAAAAAAAZo/0lSFZmIgD8c/s1600/Blue+bird.png
Warna Putih


  • http://3.bp.blogspot.com/-nxMjqgtYpBs/TcOdhy39bfI/AAAAAAAAAZ4/2CJfXwjWuOs/s1600/white+bird.png
Warna Merah

  • http://1.bp.blogspot.com/-JpH0OsnMC4o/TcOdgdbIsdI/AAAAAAAAAZ0/xt4vTgOTIsc/s1600/red+bird.png
Warna Hijau

  • http://4.bp.blogspot.com/-YCthEeFW4nA/TcOdfr4R7YI/AAAAAAAAAZw/34O0XvIkkQM/s1600/Green+bird.png
Warna Ungu

  • http://1.bp.blogspot.com/-4VfM_i9GMes/TcOdfkXEWxI/AAAAAAAAAZs/HXojFKEJBuE/s1600/purple+bird.png
Warna Kuning