Ada banyak bilah Pemberitahuan yang tersedia untuk blogspot tetapi mereka datang dengan kredit tetap yang memiliki properti yang tidak dapat dilepas. Jadi, Hari ini di sorabloggingtips, kami akan membagikan widget yang keren, bergaya, dan terlihat premium tanpa branding dan kredit tersembunyi. Pada hari-hari ini menjadi tren untuk menerapkan bilah Pemberitahuan Mengambang jenis ini di blog, dan yang terpenting terlihat keren. Juga banyak blog populer menggunakan bar jenis ini untuk memberi tahu pembaca mereka atau menunjukkan beberapa hal penting di bagian atas. Tampilannya bagus dan bergaya di bagian atas blog Anda. Anda dapat menempatkan pemberitahuan tentang posting terbaru atau populer Anda, sehingga pengunjung blog Anda dapat dengan mudah mengetahui topik atau artikel tersebut. Bilah notifikasi dapat dengan mudah ditutup dan dibuka dengan satu tombol, yang ada di sisi kanan bilah . Widget bekerja sangat lancar karena didukung oleh kode jquery dan ditata oleh css. Kustomisasi widget ini sangat mudah, Anda dapat dengan mudah mengubah latar belakang, warna batas dan warna teks. Mari kita demo bilah notifikasi yang tampak menakjubkan ini. Anda dapat memeriksa demo di atas di situs ini.
Cara memasang widget ini:-
Langkah-langkah ini sangat sederhana dan mudah sehingga blogger baru mana pun tidak akan menghadapi masalah apa pun untuk menginstalnya di blog mereka.Buka Blogger.com >> Templat Kamu >> Kemudian
Backup template.
Then select Edit HTML >> Proceed
Don’t forget to Click/Tick the Expand Template Widgets box.
Search for <head> and just below it paste the following CSS code.
Now We have to add the jQuery and CSS code in your template which will responsible for the function of the bar.<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
- Go To Blogger > Template
- Backup your template
- Click Edit HTML
- Search for </head>
- Paste the following scripts just above it:
<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><div class='tybar'>All Done : Now everything is completed just Save your Template by pressing Save template button.
<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>
Note: You can change the text and buttons accordingly.
0 Komentar