Saturday, November 12, 2016

Cara Mudah Memasang Widget Bio Author keren di sidebar Blog

Cara membuat Widget Author pada blog. hello sobat anakforum, kali ini saya akan membahas tentang membuat widget author pada blog ala kompi ajaib. bisa dilihat deminya di sisi kanan blog saya.

widget bio







untuk mempermudah mengenalkan diri anda, anda harus mempunyai sosial media, dan mempromosikannya lewat bio author blog anda, saya akan memberi sedikit tipsnya

pertama buka blogger, template, edit HTMLcopy kode dibawah ini dan paste sebelum kode </head>
<style> type='text/css'> .sosmed-author,a.authorname,h2.author-title,a.authorname-url{display:block;text-align:center} .authorbox{width:300px;background:url(//lh3.googleusercontent.com/lUQcK29uPNQzy9gVVKuCuVIso6amDmTXH1rsbIXukGeBp0BOJIYtwCE8BbNTVv_UArIBFg=s300-fcrop64=1,00001ad4fffff235) 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>


lalu copy dan paste kode berikut sebelum kode </body>


<script> //<![CDATA[ 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>



selanjutnya buka tata letak, tambah widget, HTML/JAVASCRIPT

copy dan paste kode ini
<div class="authorbox"> <h2 class="author-title"> Author </h2>
 <img alt="author" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://3.bp.blogspot.com/-JNUzjSaVPwQ/WCMG94iCxBI/AAAAAAAAA60/VavSwDD-E24HtptianU5BoGDd6GZuNPFgCLcB/s1600/12009767_699321580169649_7374768547572282074_n.jpg" width="120" height="120" /> 
<a class="authorname" href="https://plus.google.com/113914867098257608613" rel="author" target="_blank" title="Ridhwan Setya Mahadhika">DHIKA</a> 
<a class="authorname-url" href="https://plus.google.com/113914867098257608613" rel="author" target="_blank" title="FOllOW SAYA DI GOOGLE+">FOLLOW ME ON GOOGLE+</a>
 <div class="sosmed-author"> <ul> <li><a href="https://web.facebook.com/profile.php?id=100002754402514" 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/dhikaasuboys" 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/113914867098257608613" target="_blank" title="Google+" rel="nofollow"><i class="fa fa-google-plus-square fa-2x" aria-hidden="true"></i></a></li> 
<li><a href="https://www.youtube.com" 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" 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/ridhwandhika" 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="//www.blogger.com/follow.g?view=FOLLOW&blogID=5067225532374049415" target="_blank" title="Follow This Blog">Follow This Blog</a> 
<a class="button-author" href="http://www.feeds.feesburner.com/anakforum/pRSs" rel="nofollow" target="_blank" title="Subscribe This Blog">Subscribe This Blog <i aria-hidden="true" class="fa fa-paper-plane">
</i></a> </div> </div>

note : kode biru url gambar profil anda

kode ungu muda id Blog anda
kode ungu tua url feed anda

saya rasa sobat udah bisa mengaturnya sendiri :D


sekian dan terima kasih semoga bermanfaat.


maaf kami tidak menayangkan DEMO
KOMENTAR DISINI GAN!!

0 komentar