Author Sidebar Blogger PerampokGoogle By Igniel
Hallo teman perampokgoogle selamat menikmati liburan panjang di bulan april ini , Semoga semua planning liburan nya berjalan dengan lancar dan dapat mengobati semua penat acara kerjaan ahad kemarin, Malam ini aku ingin membuatkan sedikit tutorial membuat widget author sidebar yang dibuat oleh kak igniel, Contoh demo nya mampu teman lihat di blog ini.Jika diantara teman ada yang ingin menggunakan widget yang sama menyerupai yang perampokgoogle.com gunakan silahkan ikutin terus artikel malam ini ya !
Cara membuat widget author sidebar blogger
#1. Silahkan login ke blogger kau masing masing https://www.blogger.com/#2. Copy dan pastekan isyarat 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="https://topbloggergallery.blogspot.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 diubahsuaikan dengan kebutuhan blog kalian ya sobat.
#3. Save atau simpan wigetnya.
#4. Silahkan copy dan paste isyarat CSS ini sempurna diatas isyarat </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 akhirnya biar work ya di blog kau masing masing, Jika ada problem jangan ragu untuk bertanya di kolom komentar sob !
0 Response to "Author Sidebar Blogger PerampokGoogle By Igniel"