Kembali ke atas

Cara Membuat Pemberitahuan Melayang Pada Blog


Cara Membuat Pemberitahuan Melayang Pada Blog - Hallo sahabat sahabat blogger maupun netizen sekalian, Selamat datang kembali saya ucapkan kepada kalian semua, Dan juga selamat membaca artikel yang telah saya sediakan ini.



Pada Siang hari ini, Saya baru saja menemukan sebuah ide untuk membagikan kepada kalian sebuah informasi tutorial yang mungkin akan sangat membantu sekali buat kalian semua, Tutorial ini akan mengajarkan kepada kalian semua, Cara memasang / membuat notifikasi melayang pada blog kalian semua, Seperti di screenshot diatas.

Bagaimana sih caranya ?
Apakah susah atau tidak ?
Tentunya tidak susah, Karena disini kalian hanya akan menyalin dan menempatkan kode kode nya saja pada bagian edit html pada blog kalian.

Tentunya jika kalian memasang notifikasi melayang ini, Para pengunjung blog kalian akan mengetahui pemberitahuan yang kalian tampilkan pada blog kalian.
Dan pastinya akan sangat bermanfaat sekali buat kalian semua.

Baiklah langsung saja ke inti pembahasan dari artikel ini, Cara membuat pemberitahun melayang pada blog.

Langkah - Langkah

Pastikan Telah Terdapart Jquery Dan Css Material Icon Pada Blog Kalian.
  1. Silahkan kalian membuka akun blogger kalian masing masing
  2. Selanjutnya silahkan kalian pilih bagian Templates, Lalu silahkan kalian pilih opsi Edit Html.
  3. Letakan Kode Css Material icon dibawah ini tepat diatas kode </head>.
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
    
  4. Selanjutnya Letakan kode dibawah ini tepat diatas kode ]]></b:skin> atau </style>.
    /* BLANTER Notif Box Created by Idblanter.com */
    #notif-wrapper{position:fixed;width:100%;z-index:999}
    .blanternotif{background:#d32f2f;color:#FFF;width:50px;height:50px;border-radius:100%;position:fixed;z-index:999;bottom:45%;left:20px;-webkit-animation-duration:5s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notifklik;animation-duration:5s;animation-iteration-count:infinite;animation-name:notifklik;transition:all 5s ease-in-out}
    .blanternotif i{color:#FFF;font-size:25px;margin:11px 10px 10px 13px;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notificon;animation-duration:2s;animation-iteration-count:infinite;animation-name:notificon;transition:all 2s ease-in-out}
    @keyframes notifklik{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
    @keyframes notificon{0%{transform:rotate(-30deg)}50%{transform:rotate(30deg)}100%{transform:rotate(-30deg)}}
    @keyframes notifbox{0%{transform:rotateZ(-45deg);visibility:visible;opacity:0;bottom:68%;left:78px}100%{transform:none;visibility:visible;opacity:1;bottom:41%;left:110px}}
    .notifbox{padding:20px;border-radius:3px;position:fixed;resize:none;line-height:1.5;z-index:999;left:110px;bottom:41%;max-width:30rem;background:#d32f2f;border:1px solid #d32f2f;color:#fff;font-size:13px;box-shadow:0 1px 1px 0 rgba(0,0,0,0.07),0 1px 1px 0 rgba(0,0,0,0.06);display:inline-block;opacity:0;visibility:hidden;transition:.4s ease-in-out}
    .notifbox:before{content:"";width:0;height:0;position:absolute;top:-.7px;left:-15px;border-width:8px;border-style:solid;border-color:#d32f2f #d32f2f transparent transparent;display:block}.blanterxE5CD{display:none!important}#notif-wrapper.aktif .blanterxE5CD{display:block!important;animation-name:none!important}#notif-wrapper.aktif .blanterxE7F4{display:none!important}
    .notifbox.aktif{-webkit-animation-duration:1s;-webkit-animation-iteration-count:1;-webkit-animation-name:notifbox;animation-duration:1s;animation-iteration-count:1;animation-name:notifbox;transition:all 1s ease-in-out;opacity:1;visibility:visible}
    @media screen and (max-width:680px){.notifbox:before{display:none}.notifbox{left:0%!important;bottom:0}@keyframes notifbox{0%{left:0!important}100%{left:0!important}}}
    

  5. Selanjutnya, Kalian letakan kode Html Tepat Dibawah kode <body> atau diatas kode </body>.
    <div id='notif-wrapper'>
    <a class='blanternotif' href='javascript:;' title='Notifications'><i class='material-icons blanterxE7F4'>&#59380;</i><i class='material-icons blanterxE5CD'>&#58829;</i></a>
    <div class='notifbox'>
    Blogger semakin lama semakin berkembang, jadi kita harus bisa menyesuaikan perubahan dan menggunakan kreatifitas untuk menyempurnakannya.
    </div>
    </div>

  6. Selanjutnya letakan kode javascript di bawah ini tepat diatas kode </body>.
    <script type='text/javascript'>
    $(document).ready(function(){$(".blanternotif").click(function(){$(".notifbox,#notif-wrapper").toggleClass("aktif");});});
    </script>
    

  7. Selanjutnya, Silahkan kalian Simpan Template Kalian.
  8. Dan Lihat Lah perubahannya.
Dengan Ini kalian bisa membuat notifkasi pada blog kalian semua, Dan tentunya para pengunjung blog kalian akan dengan mudah mendapatkan pemberitahuan yang telah kalian siarkan pada blog kalian semua.

Penutup

Demikianlah artikel ini bisa saya sampaikan kepada kalian  semua para pengunjung blog saya ini, Semoga artikel yang saya buat ini bisa bermanfaat untuk kalian semua, Dan jangan lupa juga untuk selalu mengunjungi blog saya ini, Sampai jumpa pada artikel selanjutnya, Cukup sekian dari saya.

Terima kasih.
Komentar Facebook
0 Komentar Blogger

0 Response to "Cara Membuat Pemberitahuan Melayang Pada Blog"

Post a Comment

Silahkan Berkomentar Dengan Baik, Dilarang !
- Sara
- Provokasi
- Menggunakan Kata Kasar
- Spam
- Phissing
- Sebar Url
- Dan Lain Lain yang melanggar ketentuan Google.

Berkomentarlah Dengan Sopan Dan Santun,

Jika komentar kalian melanggar ketentuan blog bang ariel, Dalam Sekejap Komentar Anda Akan Saya Hapus.

Terimakasih.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel