 |
| 5 Style Widget Author dan Kotak Berlangganan Keren |
Pada kesempatan kali ini Mang Otep akan membagikan sebuah koleksi yang mamang kumpulkan dari beberapa sumber di internet, dari yang simpel, elegan, keren, hingga yang komplit ibarat punya blog igniel contohnya sanggup kalian cari dan koleksi sendiri.
Cara penerapannya mamang buat sama, kalian tinggal copy instruksi 5 style di bawah dan masukkan kedalam widget blog kalian. 5 Style yang sanggup menjadi rujukan anda untuk menentukan widget mana yang sempurna dan pas untuk mempercantik tampilan blog anda. Berikut 5 Style Widget Author dan Kotak Berlangganan Keren :
Style No. 1
 |
| Style No. 1 |
Kode Style No. 1
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' rel='stylesheet'/> <style> /* Css Author by ContohBlogger.com */ #ignielAuthor {text-align:center;background-color:#2f303f;color:#bdc3c7;line-height:20px;padding:15px 10px} #ignielAuthor img {border-radius:100px; max-width:100px;margin-bottom:10px} #sidebar-wrapper #ignielAuthor h2, #sidebar-wrapper #ignielAuthor h3 {background:transparent;padding:0px} #sidebar-wrapper #ignielAuthor h2 {font-size:20px} #sidebar-wrapper #ignielAuthor 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 #ignielAuthor h3 {font-size:15px;font-weight:normal} #sidebar-wrapper #ignielAuthor h3:after {display:none} #ignielAuthor hr {border:none; height:1px; background-color:#bdc3c7; width:70%; margin:10px auto} #ignielAuthor2 {width:100%;;margin-bottom:20px} #ignielAuthor2 li {list-style:none;background-color:#008c5f;color:#fff;width:50%;display:inline-block} #ignielAuthor2 li:hover {background-color:#37b185} #ignielAuthor2 li:nth-child(2) {margin-left:-3.5px;border-left:3px solid #2f303f;float:right} #ignielAuthor2 li a {color:#fff;padding:10px 40px;line-height:40px} .simplifymedsos a{display:inline-block;text-align:center;margin-top:10px;margin-right:5px;color:#fff;border-radius:100%;opacity:.9;} .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.showcase2{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.showcase2 svg{width:14px;height:14px;vertical-align:-3px} a.showcase2 svg path{fill:#fff;} a.showcase2 {-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;} </style> <div id="ignielAuthor"><img src="https://lh3.googleusercontent.com/-9aOlgAnGy5I/AAAAAAAAAAI/AAAAAAAAAh8/tpiNGd6fkkk/s60-p-rw-no/photo.jpg" alt=" Style Widget Author dan Kotak Berlangganan Keren 5 Style Widget Author dan Kotak Berlangganan Keren"/> <br/> <h2>Author: Paman Teuku</h2> <h3>From : Aceh, Indonesia</h3> <i>www.ContohBlogger.com</i><br/> <i>"Stimulate your passion!"</i> <hr /> <b>SHORT RESUME</b> <center><table style="text-align:left;font-size:12px"> <tr> <td width="50px">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 style="width:85px;padding-left:20px">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></center> <a class="showcase2" style="width:95%" href="http://www.contohblogger.com/p/contact-form.html" title="5 Style Widget Author dan Kotak Berlangganan Keren">Contact Me<i aria-hidden="true" class="fa fa-paper-plane" style="margin-left:10px;"></i></a> <br/> <div class="medsos"> <a class="facebook tooltip" data-tooltip="Facebook" href="https://www.facebook.com/TeukuBlogger" rel="nofollow" target="_blank"><i class="fa fa-facebook"></i></a> <a class="twitter tooltip" data-tooltip="Twitter" href="https://www.twitter.com/teukuwebid" rel="nofollow" target="_blank"><i class="fa fa-twitter"></i></a> <a class="googleplus tooltip" data-tooltip="Google Plus" href="https://plus.google.com/u/0/108870690279883821904" rel="nofollow" target="_blank"><i class="fa fa-google-plus"></i></a> <a class="youtube tooltip" data-tooltip="Youtube" href="https://www.youtube.com/c/awainanet" rel="nofollow" target="_blank"><i class="fa fa-youtube-play"></i></a> <a class="instagram tooltip" data-tooltip="Instagram" href="https://www.instagram.com/belumpunya" rel="nofollow" target="_blank"><i class="fa fa-instagram"></i></a> <a class="rssfeed tooltip" data-tooltip="RSS Feed" href="https://feeds.feedburner.com/ContohBlogger" rel="nofollow" target="_blank"><i class="fa fa-rss"></i></a> </div> </div> <div id="ignielAuthor2"> <li><a href="https://www.blogger.com/follow-blog.g?blogID=2056664467978427726" title="5 Style Widget Author dan Kotak Berlangganan Keren" target="_blank"><i class='fa fa-user-plus'></i> Follow</a></li> <li><a href="https://www.paypal.me/TeukuAlaina" title="5 Style Widget Author dan Kotak Berlangganan Keren" target="_blank"><i class='fa fa-paypal'></i> Donate</a></li></div> </div> Style No. 2
 |
| Style No. 2 |
Kode Style No. 2
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' rel='stylesheet'/> <style> #twist-blogger-sbox-v2 { padding: 0; padding-bottom: 5px; font-family: inherit; display: block; margin: 0; width: 100%; border-radius: 1px; border: 0; background: #363636; } #twist-blogger-sbox-v2 .main_tagline { padding: 0px 0px; line-height: 2.5em; font-size: 26px; margin: 0; height: 95px !important; overflow: hidden; font-weight: normal; color: #FFF; text-align: center; border: 0; background-color: #FF5959; } #twist-blogger-sbox-v2 .email_icon { display: table; margin: -35px auto 0px; font-size: 25px; padding: 12px; height: 25px; width: 25px; background-color: #363636; color: #FFF; border-radius: 50px; border: 10px solid #FFFFFF; line-height: 0; } #twist-blogger-sbox-v2 p { font-size: 15px; color: #F9F9F9; text-shadow: 0px -1px 0px #000; line-height: 27px; padding: 5px 10px 5px; text-align: center; width: 80%; margin: 5px auto 20px; border-bottom: 2px solid #6A6A6A; border-radius: 20px; } #twist-blogger-sbox-v2 .rssform { padding: 0; margin: 0 auto; display: block; } #twist-blogger-sbox-v2 .rssform input { padding: 8px; margin: 20px auto 15px; font-size: 13px; color: #000; text-align: center; display: block; font-family: inherit; font-weight: normal; width: 90%; height: 38px; text-transform: uppercase; outline: none !important; border: 1px solid #FFFFFF; border-radius: 1px; background-color: #FCFCFC; box-sizing: border-box !important; } #twist-blogger-sbox-v2 .rssform .button:hover { background: #000000; } #twist-blogger-sbox-v2 .rssform .button { background: #FF5959; color: white!important; border: 1px solid #FFFFFF; margin-top: 15px; outline: none !important; transition: all .3s ease-in-out; padding: 5px 2px !important; float: none; text-transform: uppercase; font-size: 18px; font-weight: normal; cursor: pointer; } #twist-blogger-sbox-v2 .text { line-height: 1.2em; display: table; float: none; margin: 0px auto; text-align: center; min-width: 157px; padding: 5px 0px; border: 0; } #twist-blogger-sbox-v2 .text a { color: #000000; margin: 0 5px; text-align: center; float: left; display: table; padding: 4px 5px; background-color: #FFFFFF; border-radius: 50px; border: 2px solid #2D2D2D; width: 15px; height: 15px; line-height: 0; font-size: 16px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } #twist-blogger-sbox-v2 form { margin-bottom: 10px !important; } </style> <div id="twist-blogger-sbox-v2"> <div class="main_tagline">Join Our Newsletter</div><div class="email_icon"><i class="fa fa-envelope"></i></div> <p>Get All The Latest Updates Delivered Straight Into Your Inbox For Free!</p> <div class="rssform"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=contohblognih', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input type="text" name="email" placeholder="Enter your email address..."> <input type="hidden" value="contohblognih" name="uri"> <input type="hidden" name="loc" value="en_US"> <input value="Join Now" class="button" type="submit"> </form> </div> <div class="text"> </b>Cek Inbox Email Anda untuk Konfirmasi</a> </div> </div>
Style No. 3
 |
| Style No. 4 |
Kode Style No. 3
<style type="text/css"> .hbzsub { background-color: rgb(87, 98, 105); width: 100%; height: 100%; padding: 5px; box-shadow: 0px 0px 5px rgb(87, 98, 105); } .hbzform-inner { text-align: center; color: rgb(255, 255, 255); font: bold 16px "trebuchet MS","Tahoma"; } .hbzemailform { width: 240px; margin: 10px auto; } #hbzemailbox { background-color: #798187; color: #FFF; width: 208px; border: 1px solid #697780; padding: 15px; text-align: center; height: 18px; box-sizing: content-box; } #hbzemailbutton { background-color: rgb(243, 93, 92); border: 1px solid rgb(215, 84, 83); color: rgb(255, 255, 255); width: 240px; font: bold 16px "trebuchet MS","Tahoma"; padding: 15px; text-align: center; height: 50px; margin: 10px auto; cursor: pointer; } #hbzemailbutton:hover { background-color: #E64C4B; border: 1px solid #BF4A49; } .hbzsignup-form { margin-top: 15px; } .hbzsocial-icons { overflow: hidden; text-align: center; border-bottom: 1px solid rgb(133, 133, 133); width: 230px; display: block; margin: 20px auto; } .hbzsocial-icons ul { margin: 0px auto !important; text-align: center; padding: 0px !important; display: inline-block; } .hbzsocial-icons ul li { background: transparent none repeat scroll 0% 0% !important; border: medium none !important; float: left; list-style-type: none !important; padding: 0px !important; margin: 0px 2px !important; } .hbzsocial-icons ul li::before, .hbzsocial-icons ul li::after { display: none !important; } .hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoDtqgrLMmMV9m9AuBv-9OSMyOHsbvOpq4pYyDXMJX4Cm-OSmdQRG4-25BMGhx-QZ41CMvvynvCp2AeH2iUs6Qt5122jlfpZL63XCTDKlDBpYocUY0NwR_SaUW0bfUp1EnGNpOPc0zRNRU/s1600/sprite_32x32.png") no-repeat scroll 0 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; display: block; height: 34px; overflow: hidden; text-indent: -999px; transition: all 0.25s linear 0s; width: 34px; } .hbzsocial-icons ul li.social-facebook a { background-position: -62px 1px; } .hbzsocial-icons ul li.social-facebook a:hover { background-color: #3b5998; } .hbzsocial-icons ul li.social-twitter a { background-position: -254px 1px; } .hbzsocial-icons ul li.social-twitter a:hover { background-color: #00aced; } .hbzsocial-icons ul li.social-gplus a { background-position: -95px 0px; } .hbzsocial-icons ul li.social-gplus a:hover { background-color: #dd4b39; } .hbzsocial-icons ul li.social-pinterest a { background-position: -159px 1px; } .hbzsocial-icons ul li.social-pinterest a:hover { background-color: #cb2027; } .hbzsocial-icons ul li.social-rss a { background-position: -190px 0px; } .hbzsocial-icons ul li.social-rss a:hover { background-color: #F87E12; } </style> <div class="hbzsub"> <div class="hbzsocial-icons"> <ul> <li class="social-facebook"><a href="[Fb url]" target="_blank" title="5 Style Widget Author dan Kotak Berlangganan Keren">Facebook</a></li> <li class="social-twitter"><a href="[Twitter url]" target="_blank" title="5 Style Widget Author dan Kotak Berlangganan Keren">Twitter</a></li> <li class="social-gplus"><a href="[Google+ url]" target="_blank" title="5 Style Widget Author dan Kotak Berlangganan Keren">Google+</a></li> <li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="5 Style Widget Author dan Kotak Berlangganan Keren">Pinterest</a></li> <li class="social-rss"><a href="[RSS url]" target="_blank" title="5 Style Widget Author dan Kotak Berlangganan Keren">RSS</a></li> </ul> </div> <div class='hbzsignup-form'> <div class='hbzform-inner'> <h4>Subscribe to my Newsletter</h4> </div> <div class='hbzemailform'> <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='uri' type='hidden' value='[Your Blog uri]'/> <input name='loc' type='hidden' value='en_US'/> <input id='hbzemailbox' name='email' required='' type='text' placeholder='Your Email'/> <input id='hbzemailbutton' title='' type='submit' value='Subscribe'/> </form> </div> </div> </div>
Style No. 4
 |
| Style No. 4 |
Kode Style No. 4
<!-- Sirclob.com Author Profile + Sosmed --> <div class='container'> <div class='row'> <div class='col-lg-3 col-sm-6'> <div class='card hovercard'> <div class='cardheader'> </div> <div class='avatar'> <img alt='' src='https://goo.gl/BphJBk'/> </div> <div class='info'> <div class='title'> <span style="color: #FFffff;">SIRCLOB</span> </div> <a class="button-author" href="http://www.blogger.com/follow-blog.g?blogID=5402094413579537302" target="_blank" title="5 Style Widget Author dan Kotak Berlangganan Keren">Follow This Blog <i class='fa fa-check-circle' style='color:#3498db;font-size:16px;margin:0 0 0 3px'></i></a> <div class='desc'><span style="color: #FFffff;">Pemuda yang akan akan terus Berusaha yang Terbaik untuk Maju di Hadapan Allah Azza wa Jalla Kelak.</span></div> </div> <div class='bottom'> <div class="sosmed-author"> <ul> <li><a href="https://web.facebook.com/aldiripani" target="_blank" title="5 Style Widget Author dan Kotak Berlangganan Keren" rel="nofollow"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a></li> <li><a href="https://twitter.com/aldiripani" target="_blank" title="5 Style Widget Author dan Kotak Berlangganan Keren" rel="nofollow"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a></li> <li><a href="https://instagram.com/aldiripani" target="_blank" title="5 Style Widget Author dan Kotak Berlangganan Keren" rel="nofollow"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li> <li><a href="https://plus.google.com/+AldiRipani" target="_blank" title="5 Style Widget Author dan Kotak Berlangganan Keren" rel="nofollow"><i class="fa fa-google-plus-square fa-2x" aria-hidden="true"></i></a></li> <li><a href="https://www.youtube.com/channel/UCPizl7FL_OO82LZRV1CeKVg" target="_blank" title="5 Style Widget Author dan Kotak Berlangganan Keren" rel="nofollow"><i class="fa fa-youtube-square fa-2x" aria-hidden="true"></i></a></li> <li><a href="https://web.facebook.com/aldiripani" target="_blank" title="5 Style Widget Author dan Kotak Berlangganan Keren" rel="nofollow"><i class="fa fa-cog fa-spin fa-2x fa-fw" aria-hidden="true"></i></a></li> </ul> <div class="clear"></div> <a class="button-author" href="http://www.aldiripani.com/p/jadwal-shalat-untuk-daerah-di-indonesia.html" rel="nofollow" target="_blank" title="5 Style Widget Author dan Kotak Berlangganan Keren">Jadwal Shalat <i aria-hidden="true" class='fa fa-clock-o' style='color:#fff;font-size:16px;margin:0 0 0 3px' title='Jadwal Shalat'></i></a> <a class="button-author" href="http://www.aldiripani.com/p/membaca-al-quran-dan-terjemahan.html" rel="nofollow" target="_blank" title="5 Style Widget Author dan Kotak Berlangganan Keren">Al-Qur'an Online <i aria-hidden="true" class='fa fa-book' style='color:#fff;font-size:16px;margin:0 0 0 3px' title='Al-Qur'an online'></i></a> <a class="button-author" href="http://www.aldiripani.com/p/download-ebook-islam-terbaru-lengkap.html" rel="nofollow" target="_blank" title="5 Style Widget Author dan Kotak Berlangganan Keren">Ebook Islam <i aria-hidden="true" class='fa fa-file-pdf-o' style='color:#fff;font-size:16px;margin:0 0 0 3px' title='Ebook Islam'></i></a> <a class="button-author" href='http://www.aldiripani.com/p/contact-personal.html' target="_blank" title='Hubungi'>Contact Personal <i aria-hidden="true" class="fa fa-mobile"></i></a> <a class="button-author" href="http://www.aldiripani.com/p/tukar-link-aldi-ripani.html" rel="nofollow" target="_blank" title="5 Style Widget Author dan Kotak Berlangganan Keren">Partner <i aria-hidden="true" class='fa fa-link' style='color:#fff;font-size:16px;margin:0 0 0 3px' title='Partner'></i></a> </div> </div> </div> </div> </div> </div> <style type="text/css"> /* Author Box Sirclob.com */ .sosmed-author li,.sosmed-author ul,ol,ul{list-style:none}.sosmed-author,a.authorname,a.authorname-url,h2.author-title{display:block;text-align:center}.authorbox{width:autopx;background:url() top center no-repeat #dedede;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:700;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,a.button-author{font-size:16px!important;text-decoration:none}a.authorname-url{margin:0 auto 10px;font-weight:400}.sosmed-author ul{margin:0!important;padding:0!important}.sosmed-author{margin:0 auto!important}.sosmed-author li{display:inline-block;margin-right:10px}.sosmed-author li:last-child{margin-right:0}.sosmed-author li a{color:#555!important;transition:all .4s ease-out}a.authorname,a.authorname-url{color:#2a2a2a;background:#dedede;text-shadow:10px 10px 10px #fff}a.button-author,a.button-author:hover{background:#4b4d63}.sosmed-author li a:hover,a.authorname-url:hover,a.authorname:hover{color:#111!important}a.button-author{display:block;border:1px solid #2f303f;color:#fff!important;font-weight:700;margin:10px 10px 0;padding:5px;text-align:center;border-radius:3px;transition:all .4s ease-out}.card,.card.people .card-info{-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.card .card-heading.image .card-heading-header,.card .card-heading.image img,.card.people{vertical-align:top;display:inline-block}.card{padding-top:20px;margin:10px 0 20px;background-color:#252632;border-top-width:0;border-bottom-width:2px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;box-sizing:border-box}.card .card-heading{padding:0 20px;margin:0}.card .card-heading.simple{font-size:20px;font-weight:300;color:#777;border-bottom:1px solid #e5e5e5}.card .card-heading.image img{width:46px;height:46px;margin-right:15px;border:0;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}.card .card-heading.image .card-heading-header h3{margin:0;font-size:14px;line-height:16px;color:#262626}.card .card-heading.image .card-heading-header span{font-size:12px;color:#999}.card .card-body{padding:0 20px;margin-top:20px}.card .card-media{padding:0 20px;margin:0 -14px}.card .card-media img{max-width:100%;max-height:100%}.card .card-actions{min-height:30px;padding:0 20px 20px;margin:20px 0 0}.card .card-comments{padding:20px;margin:0;background-color:#f8f8f8}.card .card-comments .comments-collapse-toggle{padding:0;margin:0 20px 12px}.card .card-comments .comments-collapse-toggle a,.card .card-comments .comments-collapse-toggle span{padding-right:5px;overflow:hidden;font-size:12px;color:#999;text-overflow:ellipsis;white-space:nowrap}.card-comments .media-heading{font-size:13px;font-weight:700}.card.people{position:relative;width:170px;height:300px;padding-top:0;margin-left:20px;overflow:hidden}.card.people:first-child{margin-left:0}.card.people .card-top{position:absolute;top:0;left:0;display:inline-block;width:170px;height:150px;background-color:#fff}.card.people .card-top.green{background-color:#53a93f}.card.people .card-top.blue{background-color:#427fed}.card.people .card-info{position:absolute;top:150px;display:inline-block;width:100%;height:101px;overflow:hidden;background:#fff;box-sizing:border-box}.card.people .card-info .title{display:block;margin:8px 14px 0;overflow:hidden;font-size:16px;font-weight:700;line-height:18px;color:#404040}.card.people .card-info .desc{display:block;margin:8px 14px 0;overflow:hidden;font-size:12px;line-height:16px;color:#737373;text-overflow:ellipsis}.card.people .card-bottom{position:absolute;bottom:0;left:0;display:inline-block;width:100%;padding:10px 20px;line-height:29px;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.card.hovercard{position:relative;padding-top:0;overflow:hidden;text-align:center;background-color:rgba(4,15,27,.8)}.card.hovercard .cardheader{background:#252632;background-size:cover;height:100px}.card.hovercard .avatar{position:relative;top:-50px;margin-bottom:-50px}.card.hovercard .avatar img{width:100px;height:100px;max-width:100px;max-height:100px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;border:5px solid rgba(255,255,255,.5)}.card.hovercard .info{padding:4px 8px 10px}.card.hovercard .info .title{margin-bottom:4px;font-size:24px;line-height:1;color:#262626;vertical-align:middle}.card.hovercard .info .desc{overflow:hidden;font-size:12px;line-height:20px;color:#737373;text-overflow:ellipsis;padding-top:10px;padding-right:10px;padding-left:10px}.card.hovercard .bottom{padding:0 20px;margin-bottom:17px}.crepictsosmed a{display:inline-block;text-align:center;margin-top:10px;margin-right:5px;color:#fff;border-radius:100%;opacity:.9}.crepictsosmed a i{font-family:Fontawesome;width:32px;height:32px;line-height:32px;display:block}.crepictsosmed a:hover{color:#fff;opacity:1;transform:rotate(360deg)}.crepictsosmed .facebook{background:#3b5998}.crepictsosmed .twitter{background:#00aced}.crepictsosmed .googleplus{background:#dd4b39}.crepictsosmed .rssfeed{background:#ee802f} /* Author Box Sirclob.com */ </style>
Style No. 5
 |
| Style No. 5 |
Kode Style No. 5
<style type="text/css"> .hbzsignup-form { background: transparent url("https://1.bp.blogspot.com/-Y_e_B9KzB-c/Vr6fNXna_BI/AAAAAAAAALo/dk3TFDW2-4I/s1600/Email-bg.jpg") no-repeat scroll center center / 250px 150px; height: 150px; width: 250px; margin: 10px auto 60px auto; } .hbzform-inner p { text-align: center; color: #fff; padding: 10px; font: bold 18px "trebuchet MS","Tahoma"; } .hbzemailform { margin: 120px auto 5px; width: 215px; } #hbzemailbox { background: #FEFEFE none repeat scroll 0% 0%; border: medium none; font: 12px/12px "HelveticaNeue",Helvetica,Arial,sans-serif; margin-right: 5px; box-shadow: 0px 0px 4px rgb(207, 207, 207) inset, 1px 1px 1px rgb(186, 186, 186); padding: 7px; box-sizing: content-box; height: 12px; vertical-align: top; display: inline-block; } #hbzemailbutton { background: transparent linear-gradient(to bottom, rgb(202, 48, 40) 0%, rgb(235, 88, 78) 100%) repeat scroll 0% 0%; box-shadow: 0px 0px 2px rgb(182, 37, 32) inset; border: medium none; color: #FFF; cursor: pointer; font: 13px/13px "HelveticaNeue",Helvetica,Arial,sans-serif; padding: 6px; border-radius: 5px; height: 27px; display: inline-block; } #hbzemailbutton:hover { background: transparent linear-gradient(to bottom, #CA3028 0%, #B72420 100%) repeat scroll 0% 0%; } .hbzsocial-icons { margin: 20px 0 0; overflow: hidden; display: block; text-align: center; } .hbzsocial-icons ul { display: inline-block; margin: 0 auto !important; text-align: center; padding: 0px } .hbzsocial-icons ul li { background: transparent !important; border: none !important; float: left; list-style-type: none !important; margin: 0 4px 10px !important; padding: 0 !important; } .hbzsocial-icons ul li::before, .hbzsocial-icons ul li::after { display: none !important; } .hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoDtqgrLMmMV9m9AuBv-9OSMyOHsbvOpq4pYyDXMJX4Cm-OSmdQRG4-25BMGhx-QZ41CMvvynvCp2AeH2iUs6Qt5122jlfpZL63XCTDKlDBpYocUY0NwR_SaUW0bfUp1EnGNpOPc0zRNRU/s1600/sprite_32x32.png") no-repeat scroll 0 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; display: block; height: 38px; overflow: hidden; text-indent: -999px; transition: all 0.25s linear 0s; width: 38px; } .hbzsocial-icons ul li.social-facebook a { background-color: #3b5998; background-position: -60px 3px; } .hbzsocial-icons ul li.social-twitter a { background-color: #00aced; background-position: -253px 3px; } .hbzsocial-icons ul li.social-gplus a { background-color: #dd4b39; background-position: -93px 3px; } .hbzsocial-icons ul li.social-pinterest a { background-color: #cb2027; background-position: -157px 3px; } .hbzsocial-icons ul li.social-rss a { background-color: #F87E12; background-position: -189px 3px; } .hbzsocial-icons ul li a:hover { background-color: #333; } .hbzsocial-like { display: block; text-align: center; } .hbzsocial-like tbody, .hbzsocial-like tbody tr { display: block; } .hbzfb-likes { display: inline-block; padding-bottom: 15px; margin-right: 5px; } .hbztw-follow { display: inline } </style> <div> <div class='hbzsignup-form'> <div class='hbzform-inner'> <p>Sign Up for Email Updates</p> </div> <div class='hbzemailform'> <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='uri' type='hidden' value='[Your Blog uri]'/> <input name='loc' type='hidden' value='en_US'/> <input id='hbzemailbox' name='email' required='' type='text' placeholder='Enter your email...'/> <input id='hbzemailbutton' title='' type='submit' value='Sign up'/> </form> </div> </div> <div class="hbzsocial-icons"> <ul> <li class="social-facebook"><a href="[Fb url]" target="_blank" title="5 Style Widget Author dan Kotak Berlangganan Keren">Facebook</a></li> <li class="social-twitter"><a href="[Twitter url]" target="_blank" title="5 Style Widget Author dan Kotak Berlangganan Keren">Twitter</a></li> <li class="social-gplus"><a href="[Google+ url]" target="_blank" title="5 Style Widget Author dan Kotak Berlangganan Keren">Google+</a></li> <li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="5 Style Widget Author dan Kotak Berlangganan Keren">Pinterest</a></li> <li class="social-rss"><a href="[RSS url]" target="_blank" title="5 Style Widget Author dan Kotak Berlangganan Keren">RSS</a></li> </ul> </div> <table class='hbzsocial-like'> <tbody> <tr> <td class='hbzfb-likes'> <div id="fb-root"> </div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <div class="fb-like" data-href="[Fb url]" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"> </div> </td> <td class='hbztw-follow'> <a href="[Twitter url]" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-dnt="true">Follow @[Twitter Username]</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); </script> </td> </tr> <tbody> </table> </div>
Demikianlah 5 Style Widget Author dan Kotak Berlangganan Keren diatas dari ini, biar bermanfaat dan sanggup menjadi rujukan anda untuk desain blog. Jika menyukai artikel ini anda sanggup like, share, and subscribe untuk mendapat artikel terbaru eksklusif dari email anda.
Untuk tutorial cara memasangnya anda sanggup cari digoogle dengan keyword "Cara memasang widget pada blog" atau semacam itu
Disini mamang tidak mempunyai hak cipta atas beberapa desain di atas, mamang hanya membagikan koleksi yang sudah mamang peroleh dari internet, dan mamang tidak menghapus sedikitpun instruksi original dari 5 style di atas
Sumber https://www.mangotep.com/
Click to see the code!