بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
LONCENG MELAYANG adalah gerak lonceng yang berada di posisi sebelah kiri blog dengan posisi melayang atau floating. Pergerakan ini memunculkan semacam animasi yang memukau sehingga gerakannya mirip dengan lonceng asli yang bergoyang ketika berdentang.
Ketika lonceng ini diklik, maka seketika itu juga akan timbul tulisan yang sudah termodifikasi sedemikian rupa dengan ucapan "Selamat Datang di Blog Alifacode". Warna dari lonceng ini bergradasi seperti pelangi, sehingga tidak cepat membuat bosan ketika melihatnya. Perpaduan yang cantik antara animasi pergerakan dan gradient warna.
Saya mencoba menyadur dari trik yang sudah ada kemudian saya modifikasi sedikit disana-sini dengan editing CSS dan hasilnya cukup memuaskan. IDBlanter sebagai pemilik coding mencoba memberikan trik ini untuk membuat blog kita semakin atraktif dengan adanya lonceng yang dapat bergoyang ini.
Baca Juga :
Dengan memadukan tiga element penting koding yaitu HTML, CSS dan Javascript, maka trik ini berhasil ditampilkan sempurna di halaman blog kita. Sungguh mengesankan bukan. Karena dengan kreativitas yang ketrampilan yang dimiliki tidak menutup kemungkinan modifikasi dari lonceng ini nantinya bisa dikembangkan lagi. Terima kasih ya IDBlanter. Saya comot triknya untuk saya tampilkan di tutorial ini.
Oke langsung saja ya kita mulai prakteknya. Sebenarnya kita hanya menempelkan kode ini di bagian template blog. Usahakan kalian back up template terlebih dahulu sesuai Disclaimer yang tercantum di web ini ya. Supaya nanti ketika terjadi galat atau error, maka tampilan blog tetap bisa kita kembalikan seperti semula. Jangan sampai lupa.
Sebelumnya kalian pastikan membaca tutorial ini ya dengan cermat dan teliti. Agar nantinya ketika menempelkan kode tidak salah tempat, karena ada beberapa kode yang hampir mirip dan ada juga kode yang sudah terparse misal :
<head> diganti menjadi <head>
</head> diganti menjadi </head><!--<head/>-->
</body> diganti menjadi <!--</body>--> </body>
Begini tutorialnya :
Membuat Lonceng Bergerak Melayang di Halaman Blogspot
1. Masuk ke Dashboard Blogger
2. Klik Tema
3. Pilih Sesuaikan : Edit HTML
4. Tempelkan kode dibawah ini persis diatas kode ]]></b:skin>
#notif-wrapper{position:fixed;width:100%;z-index:999}
.blanternotif{background:#FF1493;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:#FF1493;color:#fff;font-size:13px;box-shadow:7px 7px 10px rgba(0,0,0,0.44);background-image:linear-gradient(90deg, rgba(219,102,240,1) 0%, rgba(223,136,74,1) 50%, rgba(228,224,67,1) 100%);-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border: 0px;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: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}}}
.blink {animation: blink-animation 1s steps(5, start) infinite;-webkit-animation: blink-animation 1s steps(5, start) infinite;}
@keyframes blink-animation {to {visibility: hidden;}}
@-webkit-keyframes blink-animation {to {visibility: hidden;}}5. Masih di template. Tempelkan kode dibawah ini persis diatas kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>6. Sedangkan kode dibawah ini ditempel dibawah kode </head>
<div id='notif-wrapper'>
<a class='blanternotif' href='javascript:;' title='Notifications'><i class='material-icons blanterxE7F4'></i><i class='material-icons blanterxE5CD'></i></a>
<div class='notifbox'>
Terima kasih telah berkunjung ke Alifacode
</div>
</div> 6. Kemudian terakhir, tempelkan javascript dibawah ini persis diatas kode </body>
<script type='text/javascript'>
$(document).ready(function(){$(".blanternotif").click(function(){$(".notifbox,#notif-wrapper").toggleClass("aktif");});});
</script> Setelah semua dilakukan saatnya menyimpan kerjaan kamu. Terus klik Publikasi. Pasti sudah muncul lonceng berdenting di sebelah kiri blog kamu dan dengan gerakan melayang yang atraktif. Silakan dicoba. Semoga berhasil ya. Jika sudah bisa, mohon sampaikan komentar kamu dibawah ini. Terima kasih dan Salam Blogger.
