Pengikut

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

Posting Komentar

  1. mungkin saya rasa sudah cukup, kebetulan saya lagi nyari-nyari cara membuat pop up setelah googling saya mampir kesini !
    terima kasih informasinya gan !

    BalasHapus
    Balasan
    1. sama-sama gan, makasih juga bwat kunjungan Plus komenarnya
      moga sukses selalu..

      Hapus
  2. gan kalo gambarnya beda itu yang diganti yang mana ya?

    BalasHapus
    Balasan
    1. ya tinggal ganti url gambarnya aja gan kalo mau beda,
      makasih

      Hapus
  3. kok saya g bisa ya?.. pas di save html salah..
    tolong invonya dong

    BalasHapus
    Balasan
    1. salah kali gan saat ngopy kodenya, taw salah nyimpen nya

      Hapus
  4. tq infonya gan ini yg saya cari

    BalasHapus
  5. Gan yg kode warna biru itu yg mana gan

    BalasHapus
    Balasan
    1. itu yang ada alamt blog saya nya gan,, ganti dengan alamat blog agan, makasih

      Hapus
  6. sob..kalau munculin gambar di pop up gmn caranya ? kalau itu kan yg muncul cm tulisan aja..

    BalasHapus
    Balasan
    1. ganti sama gambar aja gan tulisannya nya,, yang di script itu

      Hapus
  7. Balasan
    1. yoi gan, jangan lupa di test di blog sendiri okeehh,, salam blogger

      Hapus
  8. http://www.majalah-playboy-penthouse.com/2013/06/magazine-for-man-fhm-april-2013-russia.html

    BalasHapus
    Balasan
    1. Makasih gan komentarnya and link nya

      Hapus
    2. Makasih gan komentarnya and link nya

      Hapus
  9. http://www.majalah-playboy-penthouse.com/2013/06/magazine-for-man-fhm-april-2013-russia.html

    BalasHapus
    Balasan
    1. Makasih gan komentarnya and link nya

      Hapus
    2. Makasih gan komentarnya and link nya

      Hapus
  10. Saya coba aplikasikan di wp gan, mudah-mudahan berhasil, makasih...

    BalasHapus
    Balasan
    1. silahkan gan.. makasih komentarnya ya

      Hapus
  11. mantap gan tutorialnya,. udah ane coba praktekin dan hasilnya sukses,. thanks gan,.

    BalasHapus
    Balasan
    1. makasih juga gan komentarnya,,, salam blogger

      Hapus
  12. gan..,
    napa gk bisa di save.??
    html nya selalu salah
    please., kasih tw cara nya gan.,

    BalasHapus
    Balasan
    1. kan ada tuh teks merah.. tulisannya kolom dan baris ke berapa.. terus di cek deh

      Hapus
  13. Balasan
    1. iya silahkan gan, jangan lupa sumbernya

      Hapus
  14. Mantapp infonya gan, tq
    http://aplikasi-praktis.blogspot.com/

    BalasHapus
  15. Balasan
    1. Iya gan sama sama, makasih juga komentarnya

      Hapus
  16. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  17. SUkses
    blognya..
    www.tokoherbalyogyakarta.blogspot.com

    BalasHapus
    Balasan
    1. iya makasih gan,,, amin jadi blogger sukses

      Hapus
  18. gan kog template saya ga bissa di save ya ... seperti ada kode yang salah ,mohon bantuanya buat www.bisniskaraoke.com

    BalasHapus
  19. bermanfaat postnya
    http://fastpctrick.blogspot.com/

    BalasHapus
  20. ntar pulang kerja langsung ane praktekin gan

    BalasHapus
  21. Sungguh informasi yang sangat bagus, semoga tetap update terus min..
    terima kasih

    BalasHapus

Silahkan berkomentar, komentar sobat adalah inspirasi saya !!