Skip to main content

Membuat Pop Up Selamat Datang pada Blog.

Membuat Pop Up Selamat Datang pada Blog.

kali ini saya akan memberikan tutorial bagaimana membuat pop up selamat datang pada blog. Pop up atau jendela munculan akan nampak apabila anda berkunjung ke blog. Anda bisa memodifikasi pop up ini dengan gambar, pesan untuk subscribe, dan lain sebagainya. Pop up ini dibuat oleh wierd walker untuk mempercantik dan menambah efek pada blog anda. Jika anda tertarik untuk membuatnya ikuti langkahnya dibawah ini:

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://gudanggame31.blogspot.com/ ">FREE DOWNLOAD GAME,SOFTWARE,etc</a></p>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9rkuANt3muBbcEaUMo9IChM-SmnkJRbfotjgGzxVcF41o7vg1QfFyYfqN-yusmlyUbosGJBOuqyM6-xb6uT68hddnWBy5DJJmWkOJPg5k1XmWEHnJqiKu2lig4cZwaS2d9SOaCOhP6Ly8/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/AVvXsEg9rkuANt3muBbcEaUMo9IChM-SmnkJRbfotjgGzxVcF41o7vg1QfFyYfqN-yusmlyUbosGJBOuqyM6-xb6uT68hddnWBy5DJJmWkOJPg5k1XmWEHnJqiKu2lig4cZwaS2d9SOaCOhP6Ly8/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

Comments

Popular posts from this blog

Download Cheat Engine 6.2

Download Cheat Engine 6.2 kali ini saya akan bagikan yaitu Cheat engine 6.2.karna teman saya ada yang minta cheat engine.karena itu saya berikan,kalo tidak dia akn nangis heheheheh ^_^ .Cheat engine ini gunanya untuk mencheat game di facebook,pc dan lain-lain.untuk mencari cheat silahkan cari di google atau di blog ini oke dari pada berlama-lama mendingan langsung download. screenshot: Link Download CheatEngine 6.2 oke selamat mendownload.

Download Counter Strike Global Offensive Full Cracked For PC 100% Working

Download Counter Strike Global Offensive Full Cracked For PC 100% Working Counter Strike GO. Siapa sih gamer yang tidak kenal dengan Counter strike ? bahkan bisa jadi yang tidak suka main game juga tahu dengan Counter strike. Kali ini admin akan membagikan sebuah game counter strike yang saat ini banyak diminati pleh para pencinta Counter strike namun banyak pula yang mengalami masalah dengan cara install counter strike GO ini. Saya membagikan counter strike Global offensive atau GO ini yang sudah di crack yang akan membuat sahabat tidak perlu kesusahan dalam cara menginstallnya melainkan Counter strike Global Offensive yang saya share ini setelah diinstall bisa langsung dimainkan karena sudah dicrack. CS GO atau counter strike global offensive ini diterbitkan pada tahun 2012 kemarin dengan grafik yang sangat bagus dan saya jamin para pencinta game bergenre Shooter pasti akan sangat menyukainya. Screenshot : Minimum System Requirements : OS: Windows XP/Vista/7...

Cara Membuat Daftar Isi Blog Secara Otomatis

Cara Membuat Daftar Isi Blog Secara Otomatis  - Selamat malam sahabat blogger.maka pada kesempatan ini saya akan menjelaskan bagaimana cara membuat daftar isi di blog secara otomatis. Daftar isi sangat berguna untuk mempermudah para pengunjung blog dalam mencari artikel atau konten yang mereka cari / inginkan. Sedangkan manfaat untuk admin blog yaitu daftar isi blog juga dapat meningkatkan jumlah page view blog.   anda dapat melakukan beberapa langkah mudah membuat daftar isi berikut ini : Langkah-langkah memasang widget Daftar Isi di blog : 1. Login ke akun blogger 2. Klik " Laman Baru " kemudian klik " Laman Kosong ", untuk lebih jelasnya, silahkan perhatikan gambar dibawah ini : Gambar 1.1 3. Kemudian pilih Mode  HTML 4. Lalu  copy  kode script dibawah ini : <div style="border: 1px solid #eee; height: 700px; overflow: auto; padding: 10px; width: 530px;"> <script src="http://widgetsitemap.googlecode...