Author Sidebar Blogger PerampokGoogle By Igniel
Hallo sahabat perampokgoogle selamat menikmati liburan panjang di bulan april ini , Semoga semua planning liburan nya berjalan dengan lancar dan sanggup mengobati semua penat acara kerjaan ahad kemarin, Malam ini aku ingin menyebarkan sedikit tutorial membuat widget author sidebar yang dibentuk oleh kak igniel, Contoh demo nya sanggup sahabat lihat di blog ini.Jika diantara sahabat ada yang ingin memakai widget yang sama menyerupai yang perampokgoogle.com gunakan silahkan ikutin terus artikel malam ini ya !
Cara menciptakan widget author sidebar blogger
#1. Silahkan login ke blogger kau masing masing https://www.blogger.com/#2. Copy dan pastekan aba-aba 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="Author Sidebar Blogger PerampokGoogle By Igniel Author Sidebar Blogger PerampokGoogle By Igniel " title="Author Sidebar Blogger PerampokGoogle By Igniel "/><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="Author Sidebar Blogger PerampokGoogle By Igniel ">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="Author Sidebar Blogger PerampokGoogle By Igniel " href="https://www.facebook.com/perampokgoogle" rel="nofollow" target="_blank"><i class="fa fa-facebook"></i></a> <a class="twitter" title="Author Sidebar Blogger PerampokGoogle By Igniel " href="https://www.twitter.com/perampokgoogle" rel="nofollow" target="_blank"><i class="fa fa-twitter"></i></a> <a class="googleplus" title="Author Sidebar Blogger PerampokGoogle By Igniel " href="https://plus.google.com/+Localhost666" rel="nofollow" target="_blank"><i class="fa fa-google-plus"></i></a> <a class="youtube" title="Author Sidebar Blogger PerampokGoogle By Igniel " href="https://www.youtube.com/c/localhost666" rel="nofollow" target="_blank"><i class="fa fa-youtube-play"></i></a> <a class="instagram" title="Author Sidebar Blogger PerampokGoogle By Igniel " href="https://www.instagram.com/perampokgoogle" rel="nofollow" target="_blank"><i class="fa fa-instagram"></i></a> <a class="rssfeed" title="Author Sidebar Blogger PerampokGoogle By Igniel " 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="Author Sidebar Blogger PerampokGoogle By Igniel " target="_blank"><i class='fa fa-user-plus'></i> Follow</a></li> <li><a href="http://www.perampokgoogle.com/p/donation.html" title="Author Sidebar Blogger PerampokGoogle By Igniel " 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 aba-aba CSS ini sempurna diatas aba-aba </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} sesudah itu silahkan save templatenya dan lihat kesudahannya supaya work ya di blog kau masing masing, Jika ada problem jangan ragu untuk bertanya di kolom komentar sob !
0 Comments