Cara membuat jendela pop-up selamat datang saat masuk ke blog

Mungkin efek ini hanya bekerja jika monitor tersebut menggunakan mozila

1. Masuk ke Dashboard ~> Blog Sobat ~> Template ~> Edit HTML ~> Lanjutkan ~> Centang Expand Template Widget 

2. Cari kode dibawah ini (Gunakan CTRL+F atau F3 Untuk mempercepat pencarian)

</head>

3. Letakan kode dibawah ini tepat diatas kode yang tadi

 <script type="text/javascript" src="<span style="color: red; margin: 0px; padding: 0px;">http://tutorialblogger.googlecode.com/files/leightboxTutorialBlogger.js</span>"></script>
<script type="text/javascript" src="<span style="color: red; margin: 0px; padding: 0px;">http://tutorialblogger.googlecode.com/files/prototypeTutorialBlogger.js</span>"></script>

4. Setelah itu pilih Tata Letak , lalu Tambah Gadget 
5. Setelah itu akan muncul tab baru, pilih gadget Html Javascript
6. Lalu muncul halaman baru lagi
7. Kosongkan Judul, dan isikan kode berikut pada kontennya

<!-- Selamat Datang Start by http://tutorialseo-blog.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;">Masuk</a>
</div>
<div id="EPGrab"><a href="http://tutorialseo-blog.blogspot.com/2012/04/cara-membuat-jendela-pop-up-saat-masuk.html" target="_blank">Get This!!</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>Selamat Datang di Blog Saya</h1>
<p>Oleh <a href="MASUKAN URL ANDA/ ">JUDUL BLOG ANDA</a></p>
<a href="" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="300" width="294" src="MASUKAN LINK GAMBAR" /></a>

</div>
<a href="#" class="lbAction" rel="deactivate">MASUK KE 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><!-- Selamat Datang END -->

• Silakan ganti kalimat bewarna merah

8. Selesai

Anda baru saja membaca artikel yang berkategori desain dengan judul Cara membuat jendela pop-up selamat datang saat masuk ke blog. Jika kamu suka, janganlike dan bagikan keteman-temanmu ya... By : Tutorial Blogger

Ditulis oleh: Andreano Calvin - Minggu, 22 April 2012