Genyo.id | Cara Membuat Widget Author Box Keren Di Sidebar Valid AMP Hai kawan kali saya akan menjelaskan tentang Cara membuat widget Author Box di sidebar Untuk Blog yang sudah valid AMP HTML. AuthorBox adalah widget untuk profil pemilik blog agar mudah di kenal oleh orang lain.
Cara kali ini, saya akan menjelaskan dengan cara menghosting Kode Authorbox di Github.dan untuk menampilkan widget nya kita menggunakan Js dari Amp-Iframe Untuk yang menggunakan CSS Silahkan Baca disini. Cara buat widget authorbox di sidebar dengan css Valid AMP.
Berhubung Blog saya masih asli dari template kang ismet dan tanpa atau tidak ada sidebarnya, Jadi tidak saya pasang widget apapun di blog ini. Oke langsung saja ke Cara Membuat Widget Author Box Keren Di Sidebar Valid AMP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.sosmed-author,a.authorname,h2.author-title,a.authorname-url{display:block;text-align:center}
.authorbox{width:300px;background:url(https://3.bp.blogspot.com/-3yDpLGbw8EU/VyfbFfmlhpI/AAAAAAAAB7I/duc-y5strQ0xwETmT2PRbX07ld7vtdRIwCLcB/s1600/blogging-mistakes-300x169.jpg) top center no-repeat #fff;border:1px solid #dedede;border-radius:3px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding:16px 0 0;margin:0 auto;}
h2.author-title{font-weight:bold;text-decoration:none;margin:0 auto 10px;font-size:22px;color:#fff!important}
.authorbox img{margin:55px auto 0;border-radius:100%;display:block}
a.authorname{margin:10px auto;font-weight:400;font-size:20px!important;text-decoration:none;}
a.authorname-url{margin:0 auto 10px;font-weight:400;font-size:16px!important;text-decoration:none;}
.sosmed-author li,.sosmed-author ul{list-style:none}
.sosmed-author ul{margin:0!important;padding:0!important}
.sosmed-author{margin:0 auto!important;padding:10px 0;background:#dfdfdf;border-top:1px solid #dedede}
.sosmed-author li{display:inline-block;margin-right:10px}
.sosmed-author li:last-child{margin-right:0}
.sosmed-author li a,a.authorname,a.authorname-url{color:#555!important;transition:all .4s ease-out}
.sosmed-author li a:hover,a.authorname:hover,a.authorname-url:hover{color:#111!important}
a.button-author{display:block;background:#4d90fe;border:1px solid #3079ed;color:#fff!important;font-weight:bold;font-size:16px!important;margin:10px 10px 0;padding:5px;text-align:center;border-radius:3px;transition:all .4s ease-out;text-decoration:none}
a.button-author:hover{background:#357ae8;border:1px solid #2f5bb7}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div class="authorbox">
<h2 class="author-title">
AUTHOR
</h2>
<img alt="author" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://1.bp.blogspot.com/-ZWcKusDwrKk/WeyW0b2z8QI/AAAAAAAAACE/VWXioGUGs_4yxLs-lS1dBRECWKP1Rz3YgCLcBGAs/s1600/dulbjn.jpg" width="120" height="120" />
<a class="authorname" href="https://plus.google.com/+DulBjn" rel="author" target="_blank" title="Dul Bjn">Dul Bjn</a>
<a class="authorname-url" href="https://plus.google.com/+DulBjn" rel="author" target="_blank" title="google.com/+DulBjn">google.com/+DulBjn</a>
<div class="sosmed-author">
<ul>
<li><a href="https://www.facebook.com/DulBjn" target="_blank" title="Facebook" rel="nofollow"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="https://twitter.com/DulBjn" target="_blank" title="Twitter" rel="nofollow"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="https://www.google.com/+DulBjn" target="_blank" title="Google+" rel="nofollow"><i class="fa fa-google-plus-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="//www.youtube.com/c/UCct0GvW7QxRuw9IBkVRKWiw" target="_blank" title="Youtube" rel="nofollow"><i class="fa fa-youtube-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="https://www.linkedin.com/in/DulBjn" target="_blank" title="LinkedIn" rel="nofollow"><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="https://www.instagram.com/DulBjn/" target="_blank" title="Instagram" rel="nofollow"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
</ul>
<div class="clear"></div>
<a class="button-author" href="https://cdn.rawgit.com/dbalikcom/ampblog/b9a3df1f/contact%20from%20blog%20amp/?email=dulbjn@gmail.com&url=https://genyo.id/p/123contactform/?m=1&blog=https://genyo.id&title=Genyo.id" target="_blank" title="Contact Admin">Contact Admin</a>
<a class="button-author" href="https://feedburner.google.com/fb/a/mailverify?uri=dulbjn" rel="nofollow" target="_blank" title="Subscribe Blog">Subscribe Blog <i aria-hidden="true" class="fa fa-paper-plane"></i></a>
</div>
</div>
<script>
var imgDefer = document.getElementsByTagName("img");
for (var i = 0; i < imgDefer.length; i++) {
if (imgDefer[i].getAttribute("data-src")) {
imgDefer[i].setAttribute("src", imgDefer[i].getAttribute("data-src"));
}
}
</script>
</body>
</html>
<amp-iframe width="300" height="400" sandbox="a llow-scripts allow-same-origin allow-popups" frameborder="0" scrolling="no" src="https://cdn.rawgit.com/dulbjn/Html/6ee61c4b/authorbox/"> </amp-iframe>
Silahkan anda ganti kode yang saya tandai dengan link cdn rawgit anda sendiri.
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>
Selesai, Mungkin hanya itu untuk artikel saat ini tentang Cara Membuat Widget Author Box Keren Di Sidebar Valid AMP Semoga bermanfaat.