Cara Membuat Widget Author Box Keren Di Sidebar Valid AMP

Abdi Des 01, 2018 Des 01, 2018 7 min read

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

Pertama Silahkan copy Kode dibawah ini dan Silahkan salin di Notepad.


<!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&amp;url=https://genyo.id/p/123contactform/?m=1&amp;blog=https://genyo.id&amp;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>

Silahkan ganti link yang saya tandai dengan Gambar background yang anda inginkan

Ganti Link kedua yang saya tandai dengan link Gambar profil anda.

Kemudian silahkan Ganti semua url Link yang masih berhubungan dengan link sosial media saya.

Ganti Link Ketiga yang saya tandai Contact Admin dengan Link contact anda.

Link keempat yang saya tandai ganti dengan link subscribe/follow blog anda.

Jika sudah di ganti semua,Kemudian terakhir klik Simpan dengan akhiran/extensi/Format / misal dengan nama authorbox/

Jika sudah tersimpan dengan format html, Masuk ke akun github anda. Silahkan unggah filenya > Saling link github > kemudian masuk ke cdn.rawgit.com paste link di situ ambil linknya. Sampai disini kita sudah mendapatkan link nya. Jika belum bisa menghosting menggunakan github silahkan baca disini dulu. Cara Menghosting CSS HTML di github.

saya anggap anda sudah mendapatkan link yang dihosting tadi.Langkah selanjutnya silahkan masuk ke blogger.com > Tata letak > Tambah widget Sidebar > HTML/Java Script.

Sekarang silahkan copy kode iframe dibawah ini dan masukan di Html yang baru saja anda dibuat.


<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.

Terakhir klik simpan.

oh ya jika template anda belum ada javascript amp-iframe nya silahkan pasang dulu java script di bawah ini.


<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>

Silahkan Letakan kode nya di atas kode <head/> atau Untuk mempermudah pencarian klik ctl+f cari code async dan letakan di situ bersama js js lainya.Jika kode js sudah ada silahkan lewati saja.

Terakhir klik simpan template.

Selesai, Mungkin hanya itu untuk artikel saat ini tentang Cara Membuat Widget Author Box Keren Di Sidebar Valid AMP Semoga bermanfaat.