Cara Membuat Widget Selamat Datang

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 gadjet lalu pilih HTML/Javascript

6. Masukkan kode berikut ini pada gadjet 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://blogtrikdantips.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://rivaldoatthoriqputrasetyadi.blogspot.com/ ">Blog Trik dan Tips</a></p>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8C2DMTrouSX2PIVgSggfzGbfrDPmK6ske9mcbiJHkLY1ro4w4bYY2Jb2jSY0CYu-1MpowHK0WDk-BMScV5WosP7q7jE8tOd1dZ6jwyrnYIbj0kWQNGSTHU2nn52xqQGG_L3XuazX3oCXH/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/AVvXsEg8C2DMTrouSX2PIVgSggfzGbfrDPmK6ske9mcbiJHkLY1ro4w4bYY2Jb2jSY0CYu-1MpowHK0WDk-BMScV5WosP7q7jE8tOd1dZ6jwyrnYIbj0kWQNGSTHU2nn52xqQGG_L3XuazX3oCXH/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. Gantikan kode berwarna biru dengan url blog dan judul blog anda

8. Simpan template anda lalu lihat hasilnya