Author Sidebar Blogger PerampokGoogle By Igniel
Author Sidebar Blogger PerampokGoogle By Igniel
Hallo sobat perampokgoogle selamat menikmati liburan panjang di bulan april ini , Semoga semua planning liburan nya berjalan dengan lancar dan dapat mengobati semua penat aktivitas kerjaan minggu kemarin, Malam ini saya ingin berbagi sedikit tutorial membuat widget author sidebar yang dibuat oleh kak igniel, Contoh demo nya bisa sobat lihat di blog ini.Jika diantara sobat ada yang ingin menggunakan widget yang sama seperti yang perampokgoogle.com gunakan silahkan ikutin terus artikel malam ini ya !
Cara membuat widget author sidebar blogger
#1. Silahkan login ke blogger kamu masing masing https://www.blogger.com/#2. Copy dan pastekan kode html berikut pada Add a Gadget >> HTML & Javascript
<div id="PerampokGoogle"><img src="http://lh6.googleusercontent.com/-Vbzn7Tzt-1c/AAAAAAAAAAI/AAAAAAAAH5Q/fOoNkkMgSYE/s512-c/photo.jpg" alt="igniel.com Author" title="perampokgoogle.com Author"/><br/><h2>AUTHOR: PerampokGoogle</h2><h3>Jakarta, Indonesia</h3><i>"Berbagi itu tidak rugi!"</i><hr/><b>SHORT RESUME</b><table class="PerampokGoogle"><tr><td class="tablekiri">CSS3</td><td><i class='fa fa-star'></i> <i class='fa fa-star'></i> <i class='fa fa-star'></i> <i class='fa fa-star'></i> <i class='fa fa-star-half-empty'></i></td><td class="tablekanan">Javascript</td><td><i class='fa fa-star'></i> <i class='fa fa-star'></i> <i class='fa fa-star'></i> <i class='fa fa-star-half-empty'></i> <i class='fa fa-star-o'></i></td></tr><tr><td>HTML5</td><td><i class='fa fa-star'></i> <i class='fa fa-star'></i> <i class='fa fa-star'></i> <i class='fa fa-star'></i> <i class='fa fa-star-half-empty'></i></td><td style="padding-left:20px">Photoshop</td><td><i class='fa fa-star'></i> <i class='fa fa-star'></i> <i class='fa fa-star'></i> <i class='fa fa-star-o'></i> <i class='fa fa-star-o'></i></td></tr><tr><td>PHP</td><td><i class='fa fa-star'></i> <i class='fa fa-star'></i> <i class='fa fa-star'></i> <i class='fa fa-star-half-empty'></i> <i class='fa fa-star-o'></i></td><td style="padding-left:20px">CorelDraw</td><td><i class='fa fa-star'></i> <i class='fa fa-star'></i> <i class='fa fa-star'></i> <i class='fa fa-star-o'></i> <i class='fa fa-star-o'></i></td></tr></table><a class="ignielBounce" href="/p/contact.html" title="Hire Perampok to do your job">HIRE ME <i aria-hidden="true" class="fa fa-paper-plane" style="margin-left:10px;"></i></a><br/><div class="medsos"> <a class="facebook" title="Facebook" href="https://www.facebook.com/perampokgoogle" rel="nofollow" target="_blank"><i class="fa fa-facebook"></i></a> <a class="twitter" title="Twitter" href="https://www.twitter.com/perampokgoogle" rel="nofollow" target="_blank"><i class="fa fa-twitter"></i></a> <a class="googleplus" title="Google+" href="https://plus.google.com/+Localhost666" rel="nofollow" target="_blank"><i class="fa fa-google-plus"></i></a> <a class="youtube" title="Youtube" href="https://www.youtube.com/c/localhost666" rel="nofollow" target="_blank"><i class="fa fa-youtube-play"></i></a> <a class="instagram" title="Instagram" href="https://www.instagram.com/perampokgoogle" rel="nofollow" target="_blank"><i class="fa fa-instagram"></i></a> <a class="rssfeed" title="RSS Feed" href="https://feeds.feedburner.com/perampokgoogle" rel="nofollow" target="_blank"><i class="fa fa-rss"></i></a> </div> </div><div id="PerampokGoogle2"> <li><a href="https://www.blogger.com/follow-blog.g?blogID=774533039812198129" title="Follow Igniel" target="_blank"><i class='fa fa-user-plus'></i> Follow</a></li> <li><a href="http://www.perampokgoogle.com/p/donation.html" title="Kirim Donasi Untuk PerampokGoogle via Paypal" target="_blank"><i class='fa fa-paypal'></i> Donasi</a></li></div> </div> </div></div>
Silahkan disesuaikan dengan kebutuhan blog kalian ya sobat.
#3. Save atau simpan wigetnya.
#4. Silahkan copy dan paste kode CSS ini tepat diatas kode </head>
#PerampokGoogle{text-align:center;background-color:#2f303f;color:#bdc3c7;line-height:20px;padding:15px 10px}#PerampokGoogle img{border-radius:100px;max-width:100px;margin-bottom:10px}#sidebar-wrapper #PerampokGoogle h2,#sidebar-wrapper #PerampokGoogle h3{background:transparent;padding:0px}#sidebar-wrapper #PerampokGoogle h2{font-size:20px}#sidebar-wrapper #PerampokGoogle h2:after{content:'\f058';font-family:Fontawesome;color:rgb(17,143,249);display:inline;position:relative;border:0px;font-size:18px;padding-top:18px;width:10px!important;margin-left:10px}#sidebar-wrapper #PerampokGoogle h3{font-size:15px;font-weight:normal}#sidebar-wrapper #PerampokGoogle h3:after{display:none}#PerampokGoogle hr{border:none;height:1px;background-color:#bdc3c7;width:70%;margin:10px auto}#PerampokGoogle2{width:100%;margin-bottom:20px}#PerampokGoogle2 li{list-style:none;background-color:#008c5f;color:#fff;width:50%;display:inline-block}#PerampokGoogle2 li:hover{background-color:#37b185}#PerampokGoogle2 li:nth-child(2){margin-left:-3.5px;border-left:3px solid #2f303f;float:right}#PerampokGoogle2 li a{color:#fff;padding:10px 30px;line-height:40px}.PerampokGoogle{text-align:left;font-size:12px;display:flex;justify-content:center}.PerampokGoogle .tablekiri{width:50px}.PerampokGoogle
#PerampokGoogle{text-align:center;background-color:#2f303f;color:#bdc3c7;line-height:20px;padding:15px 10px}#PerampokGoogle img{border-radius:100px;max-width:100px;margin-bottom:10px}#sidebar-wrapper #PerampokGoogle h2,#sidebar-wrapper #PerampokGoogle h3{background:transparent;padding:0px}#sidebar-wrapper #PerampokGoogle h2{font-size:20px}#sidebar-wrapper #PerampokGoogle h2:after{content:'\f058';font-family:Fontawesome;color:rgb(17,143,249);display:inline;position:relative;border:0px;font-size:18px;padding-top:18px;width:10px!important;margin-left:10px}#sidebar-wrapper #PerampokGoogle h3{font-size:15px;font-weight:normal}#sidebar-wrapper #PerampokGoogle h3:after{display:none}#PerampokGoogle hr{border:none;height:1px;background-color:#bdc3c7;width:70%;margin:10px auto}#PerampokGoogle2{width:100%;margin-bottom:20px}#PerampokGoogle2 li{list-style:none;background-color:#008c5f;color:#fff;width:50%;display:inline-block}#PerampokGoogle2 li:hover{background-color:#37b185}#PerampokGoogle2 li:nth-child(2){margin-left:-3.5px;border-left:3px solid #2f303f;float:right}#PerampokGoogle2 li a{color:#fff;padding:10px 30px;line-height:40px}.PerampokGoogle{text-align:left;font-size:12px;display:flex;justify-content:center}.PerampokGoogle .tablekiri{width:50px}.PerampokGoogle .tablekanan{width:85px;padding-left:20px}.medsos a{display:inline-block;text-align:center;margin-right:3px;color:#fff;border-radius:100%;opacity:.9;}.medsos a i{font-family:Fontawesome;width:35px;height:35px;line-height:35px;display:block}.medsos a:hover{color:#fff;transform:rotate(360deg);}.medsos .facebook{background:#3a579a}.medsos .twitter{background:#00abf0}.medsos .googleplus{background:#df4a32}.medsos .youtube{background:#cc181e}.medsos .instagram{background:#992ebc}.medsos .pinterest{background:#cd1c1f}.medsos .linkedin{background:#2554BF}.medsos .tumblr{background:#314358}.medsos .rssfeed{background:#ee802f}a.showcase{display:block;background:#4d90fe;border:1px solid #3079ed;color:#fff!important;font-weight:900;font-size:16px!important;margin:0;padding:5px;text-align:center;border-radius:3px;transition:all .4s ease-out}a.showcase:hover{background:#357ae8;border:1px solid #2f5bb7;}a.ignielBounce{display:block;background:#4d90fe;border:1px solid #3079ed;color:#fff!important;font-weight:900;font-size:16px!important;margin:0;padding:5px;text-align:center;border-radius:3px;margin:0;padding:5px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}a.ignielBounce svg{width:14px;height:14px;vertical-align:-3px}a.ignielBounce svg path{fill:#fff;}a.ignielBounce{-webkit-animation:rubberBand 1s linear 1s infinite normal;animation:rubberBand 1s linear 1s infinite normal}@-webkit-keyframes rubberBand{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}}@keyframes rubberBand{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}}.hrecipe{display:none;margin:30px 0 30px 0;padding:12px;border:1px solid #e8e8e8;background:#f8f8f8;overflow:hidden;}#Feed1_feedItemListDisplay a{line-height:20px;}#Feed1_feedItemListDisplay .item-date,#Feed1_feedItemListDisplay .item-author{font-style:italic;}.status-msg-wrap{width:95.8%;position:relative;margin:10px 0 20px 20px}.status-msg-body{background:#2f303f;color:#bdc3c7;padding:10px 0;text-align:center}.status-msg-body b{color:#fff}.status-msg-hidden{display:none}.kotakiklan{width:300px;background:#2f303f;padding:10px;text-align:center;}.kotakiklan img{margin:7px 5px;text-align:center;transition:all 0.4s ease-in-out;width:125px;height:125px;border:1px solid #bdc3c7}.kotakiklan img:hover{opacity:0.75}.kotakiklan img.waktuku{background-color:#fff}
setelah itu silahkan save templatenya dan lihat hasilnya semoga work ya di blog kamu masing masing, Jika ada masalah jangan ragu untuk bertanya di kolom komentar sob !
