ADSENSE Link Ads 200 x 90
ADSENSE 336 x 280
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 sanggup mengobati semua penat acara kerjaan ahad kemarin, Malam ini aku ingin mengembangkan sedikit tutorial membuat widget author sidebar yang dibentuk oleh kak igniel, Contoh demo nya sanggup teman lihat di blog ini.Jika diantara teman 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 instruksi 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 instruksi CSS ini sempurna diatas instruksi </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} sehabis itu silahkan save templatenya dan lihat alhasil agar work ya di blog kau masing masing, Jika ada persoalan jangan ragu untuk bertanya di kolom komentar sob ! Sumber https://perampokgoogle.blogspot.com
0 Response to "Author Sidebar Blogger PerampokGoogle By Igniel"
Posting Komentar