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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZdkX14R5HJoJUjzWrBI0dO7_L2tmvQHq_2prPTN33HspdFYEZ_noTLhmtUAEYIO_EVg-y7fgtk2Gtu0v-TQ6wZr7r1hFaehIeYxEFP-yOIciN4U_kXtvBfbDaQVrEfSiYZzsyx6uJQN2b/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/AVvXsEgZdkX14R5HJoJUjzWrBI0dO7_L2tmvQHq_2prPTN33HspdFYEZ_noTLhmtUAEYIO_EVg-y7fgtk2Gtu0v-TQ6wZr7r1hFaehIeYxEFP-yOIciN4U_kXtvBfbDaQVrEfSiYZzsyx6uJQN2b/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
  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. Mantapp infonya gan, tq
    http://aplikasi-praktis.blogspot.com/

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

      Hapus
  15. Komentar ini telah dihapus oleh pengarang.

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

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

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

    BalasHapus
  18. terimakasih,, sangat bermanfaat

    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
  22. Kalo mau pasang pop up di menu gimana mas?... Misalnya di blog saya ada menu pendaftaran, jika diklik keluar pop up "maaf pendaftaran di buka mulai tanggal bla bla bla".

    Sperti itu!!...

    BalasHapus
  23. Tulisan download nya bisa di ganti gk gan

    BalasHapus
  24. makasih bang atas artikelnya hehe

    BalasHapus
  25. gak bisa disimpan css-nya gan:

    BalasHapus
  26. I really like your post.
    We have to know the methods you can easy way to Activate YouTube doing YouTube.com/activate. If you are facing issues with YouTube, like how to connect YouTube on your TV, mobile or other devices contact us. Google has provided us the enjoyment, and by YouTube activate, you watch here latest videos, songs, or web series, etc.

    BalasHapus
  27. Kini Bermain Poker Online Uang Asli Sudah Sangat Mudah ! Bisa Pakai Aplikasi E-Money lohh.. Dan Deposit Bisa dimulai Dari Nominal Hanya Rp 10.000,- Saja..

    Linkaja88 Selaku Agen Judi Online Yang Berdiri Sejak 2014. Menyediakan Permainan Kartu Online Menggunakan Uang Asli Yang Sudah Cukup Populer Dan Banyak DiKenal Kalangan Pecinta Judi Online.

    Menyediakan Banyak permainan Judi Online Yang Lengkap Dan Bisa Deposit Via E-Money !

    Tersedia :
    • Deposit Via Ovo
    • Deposit Via Gopay
    • Deposit Via Dana
    • Deposit Via Sakuku
    • Deposit Via Linkaja
    • Deposit Via E-Money Lainnya Yang Ada Di Indonesia.

    Link Daftar » https://bit.ly/regisbvgaming

    Pendaftaran Langsung Saja Hubungi Kontak WA Cs Kami Yang Bertugas (Online 24 Jam Setiap Hari) :
    » Nomor WhatsApp : 0812–2222–995

    BalasHapus

Silahkan berkomentar, komentar sobat adalah inspirasi saya !!