Cara Membuat New Updates Pop Up Message di Blog

Selamat datang di The Royal Moringa. Jika anda telah membaca postingan pertama mengenai cara membuat subscribe popup di blog, maka postingan kali ini anda akan cukup mudah melakukannya karena cara yang akan saya tunjukkan serupa dengan yang sebelumnya. Hanya saja, popup message berikut akan berisi notifikasi mengenai update terbaru pada blog anda. Nah, bagi anda yang baru pertama kali mengenal popup, saya akan memberitahu sedikit apa fungsi/kelebihan menggunakan pop up message. Pop up message sendiri sebenarnya adalah alert yang secara otomatis muncul di layar/screen pada saat kita membuka halaman suatu website. Popup message mengenai update terbaru biasanya digunakan oleh website/blog yang membahas mengenai berita, buku yang baru rilis, atau suatu objek yang baru saja diupload oleh seorang pemilik web semisal film atau lagu. Dengan adanya alert message ini, pembaca akan dengan mudah mengetahui hal terbaru yang disajikan oleh suatu blog. Jika anda tertarik, silakan ikuti langkah-langkah berikut.

1. Log in ke akun blog anda > Pada dashboard pilih Theme > Edit HTML > cari ]]></b:skin> kemudian copy dan paste kode CSS berikut diatasnya

#backscreen {
          position: absolute;
          z-index: 999;
          background-color: transparent;
          left: 0;
          top: 0;         
          display: block;
          width:100%;
          height:100%;
}
#popup .window {
   z-index: 9999;
   border-radius: 8px;
   text-align: center;
 }
#popup #message {
   width: 24.75em;
   height: 300px;
   padding: 10px;
   background-color:#fff;
   font-size: 24pt;
   color:#222;  
   border:1px solid #e9e9e9;
 }
#popupfoot {
   font-size: 16pt;
   position: relative;
   bottom: 10px;
   width: 30em;
   left: 4em;
 }
.col_1_of_3:first-child {
    margin-left: 1em;
    }
    .span_1_of_3 {
    width: 8.25em;
    }
    .col_1_of_3 {
    display: block;
    float: left;
    margin: 2em 0.5em 1em 0.5em;
    }
    .col_1_of_3 h3{
    font-size:22px;
    font-weight:normal;
    }

@media only screen and (max-width:595px){
#popup #message {width: 315px;left:0.5em;}
#popupfoot {font-size: 10pt;left:2em;}
}

2. Setelah itu silakan anda cari </head> kemudian copy dan paste kode script berikut diatasnya.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() { 
 var id = '#message';  
 //Get the screen height and width
 var backscreenHeight = $(document).height();
 var backscreenWidth = $(window).width(); 
 //Set heigth and width to mask to fill up the whole screen
 $('#backscreen').css({'width':backscreenWidth,'height':backscreenHeight});  
 //transition effect
 $('#backscreen').fadeIn(500);
 $('#backscreen').fadeTo("slow",0.9); 
 //Get the window height and width
 var winH = $(window).height();
 var winW = $(window).width();                
 //Set the popup window to center
 $(id).css('top',  winH/2-$(id).height()/2);
 $(id).css('left', winW/2-$(id).width()/2);   
 //transition effect
 $(id).fadeIn(2000);      
 //if close button is clicked
 $('.window .close').click(function (e) {
 //Cancel the link behavior
 e.preventDefault();
 $('#backscreen').hide();
 $('.window').hide();
 });
//if mask is clicked
 $('#backscreen').click(function () {
 $(this).hide();
 $('.window').hide();
 });
 });
</script>

3. Setelah sudah, sekarang menuju <body> dan kita akan meletakkan pesan notifikasi tersebut setelah header dan sebelum featured posts/postingan terbaru anda > Copy dan paste kode HTML berikut diatas <div id="content-wrapper"> atau jika tidak menemukan silakan letakkan sebelum elemen postingan terbaru anda

<!-- popup message start -->
<div id="popup" style="left:19.5em;position:fixed !important;z-index:9999;width:814px;">
<div id="message" class="window" style="display:block;">
<div id="cross" style="margin-top:-24px" >
<a href="#" class="close agree" style="font:18px/1 FontAwesome;margin-left:43em;color:rgb(179, 179, 179);"><i class="fa fa-times" aria-hidden="true"></i></a></div>
Our New Release 
<div id="popupfoot">
<div class="col_1_of_3 span_1_of_3">
<img style="width:120px;height:75px;" src="#"/>
<h3>
<a href="#">Title 1</a></h3>
<p align="center" style="font-size:12px">
By : Author</p>
</div>
<div class="col_1_of_3 span_1_of_3">
<img style="width:120px;height:75px;" src="#"/>
<h3>
<a href="#">Title 2</a></h3>
<p align="center" style="font-size:12px">
By : Author</p>
</div>
<div class="col_1_of_3 span_1_of_3">
<img style="width:120px;height:75px;" src="#"/>
<h3>
<a href="#">Title 3</a></h3>
<p align="center" style="font-size:12px">
By : Author</p>
</div>
</div>
</div>
<div id="backscreen">
</div>
</div>
<!-- popup message end -->

4. Kemudian silakan ganti url gambar, judul, url halaman, dan informasi sesuai dengan artikel terbaru yang ingin ditampilkan dalam pesan notifikasi > Save Template dan lihat hasilnya

New updates popup message yang baru saja anda buat kali ini memiliki 3 kolom informasi artikel terbaru dan judul artikel yang membawa pembaca ke link halaman yang dimaksud. Hal ini dapat mempermudah pembaca untuk menjangkau artikel anda. Anda dapat mengubah warna background popup, jenis font, dan warna font sesuai dengan selera anda. Anda juga bisa mengubah background tersebut menjadi gambar dengan mengganti background-color:#fff menjadi background:url('http://urlgambaranda.jpg'). Sama seperti artikel sebelumnya, popup message yang saya berikan pada anda ini cukup memudahkan pengguna karena jika mereka ingin menutup widget/alert ini mereka tidak hanya bisa melakukannya melalui tombol silang (x) tetapi mereka bisa klik di sembarang tempat di luar popup message untuk menutupnya. Semoga artikel ini bermanfaat bagi anda. Terima kasih telah membaca!

The Royal Moringa

Cara Membuat New Updates Pop Up Message di Blog

Post a Comment

2 Comments

Popular Posts

Cara Menyimpan File Dokumen Line di Android

Triks Sederhana Menonaktifkan Back Button pada Halaman Web

Cara Mudah Membuat Simple SlideShow di Blog

Categories

Footer Menu Widget

The Royal Moringa

Cara Membuat New Updates Pop Up Message di Blog

You may like these posts

Post a Comment

2 Comments

Social Plugin

Popular Posts

Cara Menyimpan File Dokumen Line di Android

Triks Sederhana Menonaktifkan Back Button pada Halaman Web

Cara Mudah Membuat Simple SlideShow di Blog

Categories

Footer Menu Widget