Hari ini di demikowe akan berbagi widget yang keren, bergaya, dan terlihat premium tanpa kredit merek dan kredit tersembunyi.
Saat ini menjadi tren untuk menerapkan jenis Notifikasi Melayang ini blog, dan yang paling penting tidak membuat blog jadi berat loadingnya.
Banyak blogger profesional menggunakan bilah notifikasi jenis ini untuk memberi tahu pembacanya atau menunjukkan beberapa hal penting di atasnya.
Posisi notifikasi melayang terlihat bagus dan bergaya di bagian atas blog Kamu. Kamudapat menaruh pemberitahuan tentang posting terbaru atau terpopuler dan iklan jasa yang ingin kalian tawarkan ke pengunjung blog, sehingga pengunjung blog Kamu dapat dengan mudah menghubungi topik atau artikel tersebut.
Bilah notifikasi dapat dengan mudah ditutup dan dibuka dengan satu tombol, yang ada di sisi kanan bilah . Widget ini bekerja sangat lancar karena didukung oleh kode jquery dan ditata oleh css. Kustomisasi widget ini sangat mudah, Kamu dapat dengan mudah mengubah latar belakang, warna tepi dan warna teks.
Kamu bisa liat langsung demo bilah notifikasi melayang ini di blog ini sob..
Ok..langsung aja ane beritahu cara memasang bilah notifikasi melayang mirip headline ini
Cara memasang widget ini:
Langkah-langkah ini sangat sederhana dan mudah sehingga setiap blogger baru tidak akan menghadapi masalah apa pun untuk menginstalnya di blog mereka.
Pergi ke Blogger.com >> Blog Anda >> Template, Sekarang Cadangkan template Kamu. Kemudian pilih Edit HTML >> Proses Jangan lupa Klik / Centang kotak Expand Template Widget. Cari <head> dan tepat di bawahnya tempel kode CSS berikut.
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
Sekarang kita harus menambahkan kode jQuery dan CSS di template Anda yang akan bertanggung jawab atas fungsi bilah.
Pergi Ke Blogger> Template
Cadangkan template Anda
Klik Edit HTML
Cari </head>
Letakkan skrip berikut tepat di atasnya:
<style>
.tybar{width: 100%;
margin: 0;
height: 50px;
display: table;
font-size: 17px;
line-height: 50px;
font-weight: 600;
-webkit-font-smoothing: antialiased;
color: rgb(255, 255, 255);
font-family: Ruda;
border-color: rgb(255, 255, 255);
background-color: #0e1032;
box-shadow: 0 1px 3px 2px rgba(0,0,0,0.15);
text-align: center;}
.tybar .bar-but{font-size: 17px;
font-weight: bold;
margin-left: 25px;
background: #fff;
padding: 5px;
color: #fff;
background-color: #f2132d;
line-height: 1.05;
padding: 4px 15px;
cursor: pointer;
text-decoration: none;
border-radius: 3px;}
.tybar .bar-but a{color:#fff; text-decoration: none;}
.tybar i {
float: right;
padding-right: 40px;
cursor: pointer;
line-height: 50px;
}
body{margin-top:-49.33px;}
body{margin-top:49.33px ;transition:600ms;-webkit-transition:600ms;-moz-transition:600ms;-o-transition:600ms;}
.toggleclose{top:-75px!important;}
.togglebody{margin-top:0!important;}
.fa-arrow-down {
position: fixed;
right: 30px;
top: -2px;
background:#00BE98;
color: #FFFFFF;
width: 40px;
height: 30px;
border-radius: 3px;
line-height: 26px!important;
padding-top: 10px;
padding-right: 0!important;
}
.tybar{z-index:99999;top:0;transition:600ms;-webkit-transition:600ms;-moz-transition:600ms;-o-transition:600ms;position:fixed}
.blink_me {
color:#f2132d;
margin-right:10px;
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@media screen and (max-width:800px) {
.tybar{display:none;}
body {
margin-top: 0;
}
}
</style>
<script>
//<![CDATA[
jQuery(document).ready(function(){
jQuery( '.tybar i' ).click(function() {
jQuery( '.tybar' ).toggleClass( 'toggleclose' );
jQuery( 'body' ).toggleClass( 'togglebody' );
jQuery( '.tybar i' ).toggleClass( 'fa-times' );
jQuery( '.tybar i' ).toggleClass( 'fa-arrow-down' );
});
});
//]]>
</script>Sekarang mari kita tambahkan bagian terakhir dan terpenting dari widget ini , Cari <body> dan letakkan tepat di bawahnya. jika kamu tidak menemukan <body> maka cari <body expr: class = 'data: blog.pageType'>
<div class='tybar'> <span class='blink_me'>Red Text</span>Normal White Text<span class='bar-but'><a href='#'>Button Text</a></span><i class='fa fa-times'/> </div>Simpan dan lihat hasilnya..
Demikian Cara Membuat Notifikasi Melayang Keren Mirip Headline di Blogspot
Semoga bermanfaat sob..
Posting Komentar