Cara Gampang Memasang Widget Bio Author Keren Di Sidebar Blog

Rabu, 04 Oktober 2017

Cara menciptakan Widget Author pada blog. hello teman anakforum, kali ini aku akan membahas perihal menciptakan widget author pada blog ala kompi ajaib. dapat dilihat deminya di sisi kanan blog saya.

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

pertama buka blogger, template, edit HTMLcopy instruksi dibawah ini dan paste sebelum instruksi </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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF5YLUjSmKxennUE3JD2zHpeqko4Apff2WKT4r1GaOZjvIQs6gN73_QLUIZGWvhLX0zU1fc7aIEQFiKDEx2oJNU0E9zZh_y-OZcNX3eg_xi6gBaG29jKDzUaztZ-fX6_mzBQOR0S22luo/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>

kemudian copy dan paste instruksi berikut sebelum instruksi </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 instruksi ini

<div class="authorbox"> <h2 class="author-title"> Author </h2>  <img alt=" kali ini aku akan membahas perihal menciptakan widget author pada blog ala kompi asing Cara Praktis Memasang Widget Bio Author keren di sidebar Blog" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPMD-MpLUpz5Uq4AU7jkjVo51W6W4If_GQQ91YfXsdp-vSaLIThCfHPuCO6Tw-uTSb-8LWiC2ahWZJr30ABOopxYV7FmvEhri61udAC1Z8gaHLU7xbG8auxRfUSmH5NRwiNi2OR3LKg1A/s1600/12009767_699321580169649_7374768547572282074_n.jpg" width="120" height="120" />  <a class="authorname" href="https://plus.google.com/113914867098257608613" rel="author" target="_blank" title="Cara Praktis Memasang Widget Bio Author keren di sidebar Blog">DHIKA</a>  <a class="authorname-url" href="https://plus.google.com/113914867098257608613" rel="author" target="_blank" title="Cara Praktis Memasang Widget Bio Author keren di sidebar Blog">FOLLOW ME ON GOOGLE+</a>  <div class="sosmed-author"> <ul> <li><a href="https://web.facebook.com/profile.php?id=100002754402514" target="_blank" title="Cara Praktis Memasang Widget Bio Author keren di sidebar Blog" 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="Cara Praktis Memasang Widget Bio Author keren di sidebar Blog" 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="Cara Praktis Memasang Widget Bio Author keren di sidebar Blog" 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="Cara Praktis Memasang Widget Bio Author keren di sidebar Blog" 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="Cara Praktis Memasang Widget Bio Author keren di sidebar Blog" 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="Cara Praktis Memasang Widget Bio Author keren di sidebar Blog" 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="Cara Praktis Memasang Widget Bio Author keren di sidebar Blog">Follow This Blog</a>  <a class="button-author" href="http://www.feeds.feesburner.com/anakforum/pRSs" rel="nofollow" target="_blank" title="Cara Praktis Memasang Widget Bio Author keren di sidebar Blog">Subscribe This Blog <i aria-hidden="true" class="fa fa-paper-plane"> </i></a> </div> </div>

BACA JUGA CARA MEMBUAT WIDGET MELAYANG SAAT SCROLLDOWN

note : instruksi biru url gambar profil anda

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

aku rasa teman udah dapat mengaturnya sendiri :D


sekian dan terima kasih supaya bermanfaat.


maaf kami tidak menayangkan DEMO

Sumber http://www.anakforum.com/

Share This :