Jumat, 11 Mei 2018

5 Style Widget Author dan Kotak Berlangganan Keren

5 Style Widget Author dan Kotak Berlangganan Keren

5 Style Widget Author dan Kotak Berlangganan Keren
5 Style Widget Author dan Kotak Berlangganan Keren
5 Style Widget Author dan Kotak Berlangganan Keren - Widget Author dan Kotak Berlangganan merupakan fitur koneksi antara pengunjung dan pemilik sebuah blog, dengan adanya widget ini para pengunjung dapat lebih mengenal blog kita dalam hal siapa pemilik dan bagaimana cara mengikuti perkembangan artikel terbaru blog tersebut.

Pada kesempatan kali ini Mang Otep akan membagikan sebuah koleksi yang mamang kumpulkan dari beberapa sumber di internet, dari yang simpel, elegan, keren, sampai yang komplit seperti punya blog igniel misalnya bisa kalian cari dan koleksi sendiri.

Cara penerapannya mamang buat sama, kalian tinggal copy kode 5 style di bawah dan masukkan kedalam widget blog kalian. 5 Style yang bisa menjadi referensi anda untuk memilih widget mana yang tepat dan pas untuk mempercantik tampilan blog anda. Berikut 5 Style Widget Author dan Kotak Berlangganan Keren :

Style No. 1
5 Style Widget Author dan Kotak Berlangganan Keren
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="Igniel"/>
<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="Hire Igniel to do your job">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="Follow Igniel" target="_blank"><i class='fa fa-user-plus'></i>&nbsp;&nbsp;Follow</a></li>
<li><a href="https://www.paypal.me/TeukuAlaina" title="Donate Teuku via Paypal" target="_blank"><i class='fa fa-paypal'></i>&nbsp;&nbsp;Donate</a></li></div>
</div>


Style No. 2
5 Style Widget Author dan Kotak Berlangganan Keren
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("http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/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="Facebook">Facebook</a></li>
   <li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>
   <li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li>
   <li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>
   <li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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
5 Style Widget Author dan Kotak Berlangganan Keren
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="Follow This Blog">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="Facebook" 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="Twitter" 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="Instagram" 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="Google+" 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="Youtube" 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="Jika Mau Lapor" 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="Jadwal Shalat">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="Al-Qur'an Online">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="Ebook Islam">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="Partner">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
5 Style Widget Author dan Kotak Berlangganan Keren
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("http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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="Facebook">Facebook</a></li>
   <li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>
   <li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li>
   <li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>
   <li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">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 Blog Mang Otep ini, semoga bermanfaat dan bisa menjadi referensi anda untuk desain blog. Jika menyukai artikel ini anda bisa like, share, and subscribe untuk mendapatkan artikel terbaru langsung dari email anda.
Untuk tutorial cara memasangnya anda bisa cari digoogle dengan keyword "Cara memasang widget pada blog" atau semacam itu
Disini mamang tidak memiliki hak cipta atas beberapa desain di atas, mamang hanya membagikan koleksi yang sudah mamang peroleh dari internet, dan mamang tidak menghapus sedikitpun kode original dari 5 style di atas

Disana Gunung Disini Gunung, Ditengahnya Pulau Jawa
Kamu Bingung Infonya Nanggung, Mending Visit Blog Mang Otep Aja

Load comments