Cara Membuat Popup Notifikasi Request Tutorial

Faronesia.com - Halo sobat blogger, pada kesempatan sebelumnya kita telah membahas tutorial Cara membuat popup box keren pada blogspot. Kira - kira apa sih fungsi popup pada  website? Menurut saya pribadi popup sangat banyak fungsi dan kegunaannya, tergantung fitur yang akan kita tanam pada popup tersebut. Pada kesempatan kali ini saya akan memberikan sebuah tutorial singkat Membuat Popup Notifikasi Request Tutorial seperti Faronesia.

Seperti apa sih tampilan popup notifikasi request faronesia? Anda bisa melihatnya diberbagai halaman web faronesia.com dan letaknya berada dibawah dengan posisi mengambang. Popup Request tutorial ini sengaja saya buat muncul diberbagai halaman agar mempermudah pengguna melakukan manuver jika ingin request tutorial.

Popup ini sengaja tidak menggunakan cache dengan alasan seperti tadi yang telah dijelaskan diatas yaitu guna mempermudah pengguna untuk melakukan request tutorial. Jadi, popup akan muncul secara otomatis setiap setelah pemuatan halaman berlangsung.

Saya ingin Popup ini hanya muncul pada halaman utama saja, apakah bisa? Jawabanya Sangat Bisa sekali, caranya dengan menggunakan tag conditional pada bagian Htmlnya. Saya yakin anda bisa menerapkan tutorial ini.

Min, kok di blog saya kode Popupnya tidak berfungsi? Banyak sekali kasus seperti ini dibeberapa komentar postingan saya. Biasanya hal ini terjadi karena kelalaian para pembaca yang tidak cermat dalam membaca perintah dan arahan dipostingan Faronesia. Namun, saya bisa menjamin tutorial Popup ini work 100% disegala template Blogspot maupun Wordpress.

Sebelum mempraktekkannya, saya harap anda sudah membackup template yang akan dimodifikasi. Mengapa demikian? Sebab, jika nanti terdapat hal-hal yang tidak anda inginkan seperti kode tidak cocok, salah menempatkan kode, lupa menempatkan kode, template error, atau bahkan template rusak maka anda masih memiliki cadangannya.

Cara Membuat Popup Notifikasi Request Tutorial

• Masuk ke dashboard blog
• Lalu masuk ke menu tema blog
• Kemudian klik edit HTML
• Cari kode seperti ini ]]></b:skin> atau </style>
• Tempelkan kode CSS berikut dibawah ini tepat diatas kode ]]></b:skin> atau </style>

/* request tutorial by faronesia.com */
.request-faronesia{
position:fixed;
right:20px;
bottom:20px;
width:300px;
background-color:#ffffff;
z-index:99999;
padding:15px;
border-radius:7px;
box-shadow:0 3px 8px 2px rgba(0,0,0,0.1);
}
.request-logo{
float:left;
width:70px;
height:70px;
background:#f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6euVPE4VP7vXjsJbF71x4E_XoKUqYZjAlqPOXpEzXc-OUdFmJFAoAlxgzy8ZhcmRHkl8ekEXVx4K9uvtqQzinP02s1_UCvDwL0-fjmtBQq32WmNZHDnteD6TUF6-rlromHqKj4a0otPs/s1600/pop.png);
margin:0 10px 0 0;
border-radius:3px;
}
.request-faronesia h3{
color:#333333;
font-size:17px;
font-weight:700;
margin:0 0 7px;
}
.request-faronesia p{
font-size:13px;
color:#757575;
line-height:1.5em;
margin:0;
}
.request-faronesia a{
float:left;
width:100%;
height:28px;
background-color:#0081ff;
font-size:14px;
color:#fff;
text-align:center;
line-height:28px;
margin:15px 5px 0;
border-radius:5px;
transition:background .17s ease;
}
.request-faronesia a:hover{
background-color:#3c97ef;
}
.request-tutup{
position:absolute;
top:10px;
right:13px;
font-size:15px;
color:#333333;
font-weight:700;
cursor:pointer;
transition:color .17s ease;
}
.request-tutup:hover{
color:#f03a17;
}

• Pada kode css diatas terdapat link yang saya beri tanda dengan warna merah. Link tersebut adalah logo blog yang akan ditampilkan pada popup. Silahkan ganti dengan logo anda (usahakan gambar persegi)
• Selanjutnya, tempelkan kode HTML berikut dibawah ini tepat diatas kode </body>

<div class='request-faronesia'>
<span class='request-tutup'>&#215;</span>
<div class='request-logo'/>
<h3>Faronesia</h3>
<p class='excerpt'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<a href='https://www.faronesia.com/' rel='dofollow' title='Request tutorials'>Request tutorial</a>
</div>

• Jika anda berniat memunculkan popup hanya pada bagian halaman utama item blog maka sisipkan kode tag conditional dibawah ini di awal dan penutup kode HTML tadi

<b:if cond='data:view.isMultipleItems'>
......ISI KODE HTML DIATAS....
</b:if>

• Ubah teks yang ditandai berwarna Hijau dengan nama blog Anda
• Ubah teks yang ditandai berwarna Jingga dengan perintah yang anda inginkan

• Ubah link yang ditandai berwarna Biru muda dengan link halaman tanggapan. Tidak tahu cara buat halaman tanggapan? silahkan simak tutorial Cara membuat halaman tanggapan pada blog
• Masih pada bagian </body> silahkan tempelkan kode JS berikut dibawah ini tepat diatas kode </body>

<script type='text/javascript'>
$(function(){$(&#39;.request-tutup&#39;).on(&#39;click&#39;,function(){$(&#39;.request-faronesia&#39;).fadeOut(170);});});
</script>

• Selesai, silahkan simpan dan terapkan template

Demikianlah mengenai Cara Membuat Popup Notifikasi Request Tutorial semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.com.