Cara Membuat Pop Up Selamat Datang di Blog

Salam blogger, pada kesempatan kali ini saya akan sedikit membahas tentang tutorial blogger, yaitu bagaimana membuat pop up selamat datang pada blog.  sebelumnya, apakah anda sudah tahu apa itu pop up? Pop up adalah jendela munculan yang akan muncul apabila anda berkunjung ke suatu halaman website. Disini anda bisa sedikit memodifikasi pop up ini dengan gambar, animasi, pesan untuk subscribe, atau sebagainya. Pop up ini dibuat untuk mempercantik dan menambah efek pada blog.

Berikut langkah-langkah membuat pop up selamat datang :

1. Login ke account blogger sobat

2. klik menu Template

3. kemudian pilih Edit Html

4. pilih lanjutkan untuk masuk ke Setup Html

5. setelah masuk jangan lupa centang kotak kecil di pojok kiri yang 

    bertuliskan "expand template widget"

6. lalu sobat cari kode </head>, agar pencarian lebih mudah 

    sobat tekan tombol ctrl+f pada keyboard komputer sobat

7. 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>

8. Simpan Template

Terakhir sobat tinggal menambahkan gadget pop up :

1. klik menu Tata Letak

 

2. lalu Tambah gadget

   

3. pilih Html/Javascript

  

4. Masukan kode dibawah ini

<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://boytriks.blogspot.com" target="_blank">Make your own</a></div>

<div id="EPDarkLayer"></div>

<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]-->

<div id="pop01" class="leightbox">

<div class="scrollbox">

<h1>Welcome To My Blog</h1>

<p>A blog by <a href="http://boytriks.blogspot.com">Tips dan Trik</a></p>

<a href="http://1.bp.blogspot.com/_uKSg2OevrDw/TVEQS3gOb6I/AAAAAAAAAHo/GB1-vpLBrxU/s1600/WelcomeToMyPageRdFlower2.jpg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="300" width="294" src="http://1.bp.blogspot.com/_uKSg2OevrDw/TVEQS3gOb6I/AAAAAAAAAHo/GB1-vpLBrxU/s320/WelcomeToMyPageRdFlower2.jpg" /></a>

</div>

<a href="#" class="lbAction" rel="deactivate">Enter The Blog</a></div>

<script type="text/javascript">

lb = new lightbox();

lb.initCallable('pop01');

lb.activate();

</script></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};

//]]>

</script>

<style type='text/css'>

.titlefield{ /*CSS for RSS title link in general*/

text-decoration: none;}

.labelfield{ /*CSS for label field in general*/

color:#0099cc;font-size: 100%;}

.datefield{ /*CSS for date field in general*/

color:#aaa;font:normal 12px courier;text-transform:none;}

#example1{ /*Demo 1 main container*/

width: 960px;

height: 13px;

border: 0px solid #cdcdcd;

padding: 0px;

font:bold 13px courier;

text-transform:none;

text-align:left;

background-color:transparent;}

code{ /*CSS for insructions*/

color: #0099CC;}

#example1 a:link, #example1 a:visited {color:#0099cc;text-decoration:none;}

#example1 a:hover {color:#111;text-decoration:none;}

</style>

5. Ganti kode yang berwarna biru dengan url blog sobat

6. Simpan Gadget dan lihat hasilnya

Selamat mencoba dan semoga bermanfaat