Hehe keren yak? ada sharingannya :D
BACA JUGA CARA MEMBUAT SHORT LINK DI BLOGSPOT
Pop Up ini hanya meload css dan html serta gambar yang sobat inginkan. Sehingga Pop Up ini dapat di sesuaikan dengan template yang sudah sobat gunakan.
Berikut adalah langkah langkah dan cara menyesuaikannya :
1. Masuk ke dashboard blogger sobat dan pilah tab "template" >> "edit html"
2. Jika sudah "Ctrl+F" cari kode </b:skin> dan Kemudian taruh Code CSS dibawah ini tepat di ATAS kode </b:skin> :
a.popup-link {
padding:17px 0;
text-align: center;
margin:10% auto;
position: relative;
width: 300px;
color: #fff;
text-decoration: none;
background-color: #FFBA00;
border-radius: 3px;
box-shadow: 0 5px 0px 0px #FFFFFF;
display: block;
}
a.popup-link:hover {
background-color: rgba(0,0,0,0.4);
box-shadow: 0 3px 0px 0px #eea900;
-webkit-transition:all 1s;
transition:all 1s;
}
/* end link popup*/
/* animasi popup */@-webkit-keyframes autopopup {
from {opacity: 0;margin-top:-200px;}
to {opacity: 1;}
}
@-moz-keyframes autopopup {
from {opacity: 0;margin-top:-200px;}
to {opacity: 1;}
}
@keyframes autopopup {
from {opacity: 0;margin-top:-200px;}
to {opacity: 1;}
}
/* end animasi popup */
/*style untuk popup */
#popup {
background: url(https://lh4.googleusercontent.com/-sivoP8Nek9Y/VW0z70t5iPI/AAAAAAAABus/SIEA2vE3uQc/w514-h387-no/Yondaime_Hokage_cute%2Bawesome.jpg)no-repeat center;
Background-size: 100% 100%;
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
margin-top:0;
-webkit-animation:autopopup 2s;
-moz-animation:autopopup 2s;
animation:autopopup 2s;
}
#popup:target {
-webkit-transition:all 1s;
-moz-transition:all 1s;
transition:all 1s;
opacity: 0;
visibility: hidden;
}@media (min-width: 768px){
.popup-container {
width:600px;
}
}
@media (max-width: 767px){
.popup-container {
width:100%;
}
}
.popup-container {
position: relative;
margin:1% auto;
padding:30px 50px;
background-color:rgba(0,0,0,0.4);
color:#fff;
border-radius: 3px;
}a.popup-close {
position: absolute;
top:3px;
right:3px;
background-color: #333;
padding:7px 10px;
font-size: 20px;
text-decoration: none;
line-height: 1;
color:#fff;
}
3. SIMPAN TEMPLATE !!! .Setelah sobat selesai mempastekan css sekarang kita menaruh html nya ke body blog kita, Masuk ke Dashboard blogger dan cari tab "Tata Letak". Kemudian "Tambahkna Html/javascript" Pilih Html/Javascript dan pastekan Kode dibawah ini ke Html tersebut :
<div class="popup-wrapper" id="popup">
<div class="popup-container">
<h2>WELCOME X BLOGGER</h2>
<p align="center"><img src="https://lh6.googleusercontent.com/-NtcmI969YL8/VW0u2jii3bI/AAAAAAAABt4/5hnWKVYyf9g/s387-no/sharingan.gif" alt="sharingan" title="sharingan no kakashio" width="100%" height="200px"/></p>
<p>Selamat datang di Andriod X !!! Semoga artikel yang ada di blog ini dapat membantu sobat dalam menyelesaikan masalah melalui tutorial dan referensi yang saya updatekan setiap hari. Terimakasih telah Berkunjung di blog sederhana ini.</p><br/>
<div class="input-group">
<a class="popup-close" href="#popup">X</a>
</div>
</div></div>
5. Langkah terakhir simpan html itu taanpa nama. Nah sekarang lihat blog anda sudah terdapat PopUp welcome.
Mudah kan? Itu adalah tutorial bagaimana cara membuat pop up welcome tanpa Java script. Nah Untuk yang saya tanndai warna merah, bisa disesuaikan dengan keinginan sobat. Jika artikel ini membingungkan mohon bertanya di komentar.
Terimakasih telah menyimak dan semoga artikel ini bermanfaat bagi sobat. Matur Sembah Nuwun
