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>
8. Simpan Template
Terakhir sobat tinggal menambahkan gadget pop up :
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("HTML88").style.display="none";document.getElementById("Text88").style.display="none"">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
mungkin saya rasa sudah cukup, kebetulan saya lagi nyari-nyari cara membuat pop up setelah googling saya mampir kesini !
BalasHapusterima kasih informasinya gan !
sama-sama gan, makasih juga bwat kunjungan Plus komenarnya
Hapusmoga sukses selalu..
gan kalo gambarnya beda itu yang diganti yang mana ya?
BalasHapusya tinggal ganti url gambarnya aja gan kalo mau beda,
Hapusmakasih
kok saya g bisa ya?.. pas di save html salah..
BalasHapustolong invonya dong
salah kali gan saat ngopy kodenya, taw salah nyimpen nya
Hapustq infonya gan ini yg saya cari
BalasHapusmakasih ya komentarnya gan
HapusGan yg kode warna biru itu yg mana gan
BalasHapusitu yang ada alamt blog saya nya gan,, ganti dengan alamat blog agan, makasih
Hapussob..kalau munculin gambar di pop up gmn caranya ? kalau itu kan yg muncul cm tulisan aja..
BalasHapusganti sama gambar aja gan tulisannya nya,, yang di script itu
Hapusmantap nih gan
BalasHapusyoi gan, jangan lupa di test di blog sendiri okeehh,, salam blogger
Hapushttp://www.majalah-playboy-penthouse.com/2013/06/magazine-for-man-fhm-april-2013-russia.html
BalasHapusMakasih gan komentarnya and link nya
HapusMakasih gan komentarnya and link nya
Hapushttp://www.majalah-playboy-penthouse.com/2013/06/magazine-for-man-fhm-april-2013-russia.html
BalasHapusMakasih gan komentarnya and link nya
HapusMakasih gan komentarnya and link nya
HapusSaya coba aplikasikan di wp gan, mudah-mudahan berhasil, makasih...
BalasHapussilahkan gan.. makasih komentarnya ya
Hapusmantap gan tutorialnya,. udah ane coba praktekin dan hasilnya sukses,. thanks gan,.
BalasHapusmakasih juga gan komentarnya,,, salam blogger
Hapusgan..,
BalasHapusnapa gk bisa di save.??
html nya selalu salah
please., kasih tw cara nya gan.,
kan ada tuh teks merah.. tulisannya kolom dan baris ke berapa.. terus di cek deh
HapusMakasih banyak informasinya, ijin copas Gan.
BalasHapusiya silahkan gan, jangan lupa sumbernya
HapusMantapp infonya gan, tq
BalasHapushttp://aplikasi-praktis.blogspot.com/
sama sama gan, salam blogger
Hapusterima kasih infonya mas :)
BalasHapusIya gan sama sama, makasih juga komentarnya
HapusKomentar ini telah dihapus oleh pengarang.
BalasHapusyahh knpa dihapus gan ?
HapusSUkses
BalasHapusblognya..
www.tokoherbalyogyakarta.blogspot.com
iya makasih gan,,, amin jadi blogger sukses
Hapusgan kog template saya ga bissa di save ya ... seperti ada kode yang salah ,mohon bantuanya buat www.bisniskaraoke.com
BalasHapusterimakasih,, sangat bermanfaat
BalasHapusbermanfaat postnya
BalasHapushttp://fastpctrick.blogspot.com/
ntar pulang kerja langsung ane praktekin gan
BalasHapusSungguh informasi yang sangat bagus, semoga tetap update terus min..
BalasHapusterima kasih
Terima Kasih Infonya gan...
BalasHapusTerapkan Kebiasaan Ini Jika Ingin Menjadi Kaya
Ternyata Ini Rahasia Orang Menjadi Kaya
Rahasia Rumus-Rumus Menjadi Kaya
Keajaiban Rejeki Akan Datang Jika Lakukan Hal Ini
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".
BalasHapusSperti itu!!...
Tulisan download nya bisa di ganti gk gan
BalasHapusmakasih bang atas artikelnya hehe
BalasHapusGood News information, thanks
BalasHapusAgen SBOBET
gak bisa disimpan css-nya gan:
BalasHapusI really like your post.
BalasHapusWe 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.
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..
BalasHapusLinkaja88 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