Cara Membuat Widget Notifikasi Keren Pada Navigasi Seperti Template Asal Seo Responsive Arlina Design

Nandea96    July 09, 2019    Blog , How to , Widget    Comment   

Cara Membuat Notifikasi Keren Pada Navigasi Seperti Template Asal Seo Responsive Arlina Design

Sebenarnya. kamu dapat membeli template seperti Dea ini ke mbak arlina disini. dan tentu kamu sudah mendapatkan fasilitas Notifikasi tersebut dan kamu dapat mempelajari strukturnya.
sebenarnya. Dea hanya ingin membagikan cara ini karena memang Dea ingin aar kamu tau saja. tentu jika ingin seluruh fasilitas pada template Asal Seo Responsive. mau tidak mau kamu harus membeli template tersebut untuk menghormati pembuatnya. nah dibawah ini Dea akan berikan cara agar kamu dapat membuatnya dan memasangnya tepat pada menu navigasi kamu.

Step  By Step :

1. Masuklah ke akun blogger kamu terlebih dahulu disini
2. Jika sudah maka pergi ke tab/menu "Tema" dan click tombol "Edit HTML"
3. jika sudah disini. carilah code </Style>. lalu pastekan code dibawah ini tepat diatas code </Style> tersebut :

/* Modal Box */
.asalseonotif,.matilampu{visibility:hidden;opacity:0}.asalseonotif{background:#fff;position:fixed;padding:25px;top:20%;transform:scale(1.2);max-width:450px;margin:auto;left:0;right:0;z-index:100;border-radius:4px;box-shadow:0 10px 3rem -1rem rgba(0,0,0,0.5);transition:all .5s}.asalseonotif button{border:none;position:absolute;margin-top:17px;right:30px;cursor:pointer;background:#e8e8e8;padding-left:7px;outline:0}a.waves-light.close-sf{background:#2ecc71;color:#fff;margin-top:15px;display:inline-block;padding:6px 13px;border-radius:3px;float:right;font-size:13px}a.waves-light.close-sf:hover{background:#2bc063;color:#fff}.matilampu{position:fixed;top:0;background:rgba(255,255,255,0.39);left:0;right:0;bottom:0;margin:0;z-index:99;transition:all .4s ease-in-out}.asalseotitle{margin-bottom:15px;font-weight:600}.asalseonotif.aktif,.matilampu.aktif{visibility:visible;opacity:1}.asalseonotif.aktif{transform:scale(1)}.icx{position:absolute;top:10px;right:15px;transform:rotate(180deg);transition:all .3s}.icx:before{content:'\f00d';font-family:fontawesome;font-size:18px;color:#ccc;transition:all .3s}.icx:hover{transform:rotate(360deg)}.icx:hover:before{color:#222}.notiftext{font-size:14px}a.shownotif{background:#f39c12;color:#fff;font-size:16px;padding:0;position:absolute;right:80px;top:15px;width:35px;height:35px;line-height:35px;text-align:center;border-radius:99em;transition:all .3s}a.shownotif:hover{background:#e67e22;color:#fff}
#menuheady.aktif,#pagepix.aktif,#downpix.aktif{filter-blur(4px):;-webkit-filter:blur(4px)}
@media screen and (max-width:768px){.asalseonotif,a.shownotif,.matilampu{display:none}}

4. Setelah itu masukan text javascript dibawah ini tepat dibawah code //<![CDATA[ :

// Modal box
$(document).ready(function(){$(".close-sf").click(function(){$(".asalseonotif,.matilampu,#menuheady,#pagepix,#downpix").removeClass("aktif")})}),$(document).ready(function(){$(".shownotif").click(function(){$(".asalseonotif,.matilampu,#menuheady,#pagepix,#downpix").toggleClass("aktif")})});

5. Yaitu langkah terakhir. disini buatlah sebuah widget/gadget baru dengan cara pergi ke menu/tab "Tata Letak/Layout" Setelah Itu click tulisan "Add Gadget/Tambahkan Widget". lalu akan muncul kotak tabel. disini pilih "HTML/JavaScript". maka Copy dan pastekan code dibawah ini. tepat pada kotak kolom besar tersebut :

<div class='asalseonotif'>
<div class='asalseotitle'>Notification</div>
<div class='notiftext'>
Nandea Bunga </div>
<a class='waves-effect waves-light close-sf' href='javascript:;' title='Done'>Done</a>
<a class='waves-effect icx close-sf' href='javascript:;'/>
</a></div>
<div class='matilampu'/></div>

Enjoy. Sekarang cobalah untuk mengetestnya terlebih dahulu. Bisa? jika bisa selamat. jika masih ada kesalahan. tanyakan pada kolom komen dibawah ini.