Home Blog How to Widget Cara Membuat Widget Notifikasi Keren Pada Navigasi Seperti Template Asal Seo Responsive Arlina Design

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

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



Car


Membuat Notifikasi Keren Pada Navigasi Seperti Template Asal Seo Responsive Arlina Design
Sebenarnya. kamu dapat membeli template seperti aku ini ke mbak arlina disini. dan tentu kamu sudah mendapatkan fasilitas Notifikasi tersebut dan kamu dapat mempelajari strukturnya.
sebenarnya. aku hanya ingin membagikan cara ini karena memang aku 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 aku 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:&#39;\f00d&#39;;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'>
Putuokaken </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.


Related Posts
On.