Advertisemen
Halo Sobat, kali ini saya kembali akan memberikan tutorial membuat widget back to top untuk Blog AMP karena 2 widget ini semuanya sudah valid AMP
Cara memasang widget 1
1.Letakkan kode dibawah ini di atas </head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>
2.Letakkan CSS dibawah ini di atas kode </style>
/*Back to top ATAEH*/
.back-to-top{cursor:pointer;position:fixed;right:30px;width:50px;height:50px;font-size:26px;color:#fff;z-index:99999;text-align:center;border-radius:100%;background:#4285f4;line-height:50px;box-shadow:0 6px 12px rgba(0,0,0,.2);bottom:30px}.back-to-top i{font-size:inherit;line-height:inherit;color:#fff}
3.Selanjutnya sobat lekakkan kode HTML di bawah ini di atas kode </body>
<!--ATAEH backtotop--> <div class='back-to-top'> <a href='#'><i class='fa fa-angle-up'/></a> </div>
4.Finish
Sumber : Ataeh
Cara memasang widget 2
1.Letakkan CSS dibawah ini di atas kode </style>
.scrollToTop{color:#ddd;
font-size:1.4em;
box-shadow:0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);
width:50px;
height:50px;
border-radius:100px;
border:none;
outline:0;
background:#00c2ff;
z-index:1000;
bottom:10px;
right:10px;
position:fixed;
opacity:0;
visibility:hidden;
cursor:pointer}
#marker{position:absolute;
top:100px;
width:0;
height:0;}
.scrollToTop svg{width:34px;
height:34px;
vertical-align:middle;}
#totop:before{content:"";
display:block;
height:20px;
margin-top:-20px;
visibility:hidden;}
2.Pasang kode dibawah ini di atas kode </head>
<script async='async' custom-element='amp-animation' src='https://cdn.ampproject.org/v0/amp-animation-0.1.js'/> <script async='async' custom-element='amp-position-observer' src='https://cdn.ampproject.org/v0/amp-position-observer-0.1.js'/>
3.Pasang kode HTML dibawah ini, di bawah kode <body>
<div id='totop'></div>
4.Pasang kembali kode dibawah ini di ataskode </body>
<amp-animation id='showAnim' layout='nodisplay'>
<script type='application/json'>
{
"duration": "200ms",
"fill": "both",
"iterations": "1",
"direction": "alternate",
"animations": [{
"selector": "#scrollToTopButton",
"keyframes": [{
"opacity": "1",
"visibility": "visible"
}]
},
{
"selector": "#halaman",
"keyframes": [{
"opacity": "1",
"visibility": "visible"
}]
}]
}
</script>
</amp-animation>
<amp-animation id='hideAnim' layout='nodisplay'>
<script type='application/json'>
{
"duration": "200ms",
"fill": "both",
"iterations": "1",
"direction": "alternate",
"animations": [{
"selector": "#scrollToTopButton",
"keyframes": [{
"opacity": "0",
"visibility": "hidden"
}]
},
{
"selector": "#halaman",
"keyframes": [{
"opacity": "0",
"visibility": "hidden"
}]
}]
}
</script>
</amp-animation>
<div id='marker'>
<amp-position-observer layout='nodisplay' on='enter:hideAnim.start; exit:showAnim.start'>
</amp-position-observer>
</div>
<button aria-label='Scroll To Top' class='scrollToTop' id='scrollToTopButton' on='tap:totop.scrollTo(duration=200)'>
<svg viewBox='0 0 24 24'>
<path d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='#fff'/>
</svg>
</button>
5.Finis
Sumber : chimul
Selamat mencoba...!
Advertisemen
Related Posts
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar