Saya kali ini akan membahas Cara Memasang Widget Author Box Responsive, Author Box ini adalah manfaatnya memberikan info tentang penulis supaya di ketahui oleh pengujung blog, Untuk kamu yang ingin memberikan info tentang diri kamu silahkan pasang Author box ini. Langsung saja kita menuju langkah - langkahnya.
1. Login Blogger, Klik Template → Edit HTML.
2. Letakkan CSS di bawah ini sebelum tag </head>
<style>/* Author box MeHaday Update */.
.MeHaday-info{display:block;padding:0;margin:0 auto;color:#999;line-height:1.3em;font-size:12.3px!important;margin:0auto}
.MeHaday-info{background:#fafafa;margin:30px auto 10px;display:block;position:relative;padding:35px 25px 25px;overflow:hidden}
.MeHaday-info::before{content:"";display:block;width:100%;height:88px;background:#f4a85d;position:absolute;top:0;left:0;right:0;z-index:0}
.author{font-size:20px;font-family:"Archivo Narrow";font-weight:700!important;padding:0!important;display:block;margin:17px 0 32px!important;text-transform:uppercase}
.author-photo{display:inline-block;float:left;position:relative;z-index:1}
.author-photo img{width:90px;height:90px;border-radius:99em;z-index:1;border:7px solid #EAEBED}
.about-author{z-index:1;position:relative;display:inline-block;float:right;width:calc(100% - 125px)}
.author-desc{font-size:15px;font-weight:400;line-height:1.6em;color:#777}
ul.sosmed-saya{display:block;overflow:hidden;margin:20px auto 10px;padding:0}
ul.sosmed-saya li{display:inline-block}
ul.sosmed-saya li a,ul.sosmed-saya li.site{display:inline-block;margin-right:7px;margin-bottom:5px;font-size:15px;padding:0;width:45px;height:30px;line-height:30px;color:#fafafa;text-align:center;border-radius:2px}
ul.sosmed-saya li a:hover{opacity:1}
ul.sosmed-saya li a.efbi{background-color:#4a7fbb}
ul.sosmed-saya li a.tewe{background-color:#00aced}
ul.sosmed-saya li a.iige{background-color:#c4906e}
ul.sosmed-saya li.site{font-family:Consolas,Monaco;width:auto;background-color:#fff;border:1px solid #dbd2c0;padding:0 15px;font-style:italic;font-size:14px;color:#999}
.author a, .author a:hover {color: #fff;}
ul.sosmed-saya li.site{font-family:Consolas,Monaco;width:auto;background-color:#fff;border:1px solid #bdc3c7;padding:0 15px;font-style:italic;font-size:14px;color:#999}
@media screen and (max-width:600px){
.rbz-info {padding: 30px 15px 20px;}
.author {margin: 20px 0 35px !important;}
}
@media screen and (max-width:480px){
.rbz-info{margin:30px auto 10px;text-align:center}
.author-photo{display:block;float:none}
.about-author{display:block;float:none;width:100%;text-align:center}
.author{text-align:center;display:block;margin:15px 0 25px!important}
.author-desc{text-align:center}
ul.sosmed-saya{display:block;text-align:center}
ul.sosmed-saya li{display:inline-block;text-align:center}
.author a,.author a:hover{color:#888}
}
/* latin */
@font-face {
font-family: "Archivo Narrow";
font-style: normal;
font-weight: 400;
src: local("Archivo Narrow Regular"), local("ArchivoNarrow-Regular"), url(https://fonts.gstatic.com/s/archivonarrow/v5/DsLzC9scoPnrGiwYYMQXpkU-p1xzoRgkupcXIqgYFBc.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* And Author box MeHaday Update */.</style>
3. Lalu pasang kode di bawah ini setelah kode <div class='post-footer'> biyasanya terdapat lebih dari satu, maka kamu coba satu - satu di manakah tempat yang cocok untuk peletakan Widget Author Box tersebut bila tidak ada tag tersebut silahkan kamu letakkan di tag yang mirip atau juga bisa di bawah tag kode </article> tempat di bawahnya.
<b:if cond='data:blog.pageType == "item"'>
<div class='MeHaday-info'>
<span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<span class='author-photo'>
<img alt='MeHaday Update' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqXvySchdIhLoo79zMJJ4qBaeY5jbUWCStdsuK6PEd_ffG6FWhjYEap3FAdoy9KA94_55SgVZFKlcbNdH9EWlwLum4O3Pqoz9mTdgw3evpq3JrGZy94V-SIMPLo_7rt_M-Uf_0YsBfOcw/s1600/unnamed-%25287%2529.png' title='Mister Design'/>
</span>
<span class='about-author vcard'>
<span class='author'>
<span class='fn'><a class='g-profile' href='https://plus.google.com/116490631411504171458' itemprop='url' rel='author' title='author profile'><span itemprop='name'>MeHaday Update</span></a></span>
</span>
<span class='author-desc'>
Perkenalkan nama saya Harun Faruqi atau sering di panggil Haday ini adalah sebuah contoh Widget Author Box yang saya buat.
</span>
<ul class='sosmed-saya'>
<li><a class='efbi' href='https://www.facebook.com/Haday.Thanksforyou15' itemprop='sameAs' rel='nofollow' title='Facebook Pribadi'><i aria-hidden='true' class='fa fa-facebook'></i></a></li>
<li><a class='tewe' href='https://www.twitter.com/harunfaruqi' itemprop='sameAs' rel='nofollow' title='Twitter Pribadi'><i aria-hidden='true' class='fa fa-twitter'></i></a></li>
<li><a class='iige' href='https://www.instagram.com/haday10/' itemprop='sameAs' rel='nofollow' title='Instagram Pribadi'><i aria-hidden='true' class='fa fa-instagram'></i></a></li>
<li class='site'>http://mehadayupdate.blogspot.com</li>
</ul>
</span>
</span>
</div></b:if>
4. Ganti kode warna merah dengan URL gambar kamu dan warna oren ganti dengan URL Google + kamu dan untuk warna biru ganti dengan kata - kata dan judul Author kamu, Simpan dan lihat hasilnya.
Ini adalah contoh hasil saya
Demo Screenshot :
Live Demo :
Sekian yang dapat saya sampaikan semoga artikel ini dapat bermanfaat bagi kamu. Bila kamu ingin bertanya silahkan berkomentar di kolam komentar.
0 Comments
EmoticonEmoticon