√ Cara Membuat Author Box Keren di Bawah Postingan Blog - AdityaTekno

Social Items

Membuat Widget Author Box Keren Responsive di Bawah Postingan

Cara Membuat dan Memasang Widget Author Box Keren di Bawah Postingan Blogger - Welcome back sobat AdityaTekno.com. Nah sesuai judul diatas, postingan ini saya buat atas permintaan sobat BG, yaitu tutorial membuat author box dibawah postingan seperti di AdityaTekno.com(saat ini). Dan saya minta maaf karena baru bisa post hari ini.

Widget ini berfungsi menampilkan foto profile pengarang, deskripsi pengarang dan sosial media pengarang. Keunggulan dari widget ini yaitu responsive. 
Berikut adalah tutorial cara membuat author box keren di bawah postingan blog.


Cara Membuat Author Box Keren Responsive di Bawah Postingan


1. Pertama, masuk ke Dashboard Blogger >> Tema >> Edit HTML.
2. Kemudian copy kode css berikut dan paste kan di atas kode ]]></b:skin> atau </style>. Coba satu persatu di blog sobat, mana yang cocok.
/* Author Box Keren Responsive by AdityaTekno */
.adityatekno-info{display:block;padding:0;margin:0 auto;color:#999;line-height:1.3em;font-size:12.3px!important;margin:0auto}
.adityatekno-info{background:#EAEBED;margin:30px auto 10px;display:block;position:relative;padding:35px 25px 25px;overflow:hidden}
.adityatekno-info::before{content:"";display:block;width:100%;height:88px;background:#005980;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 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:#fff;text-align:center;border-radius:2px}
ul.sosmed-saya li {display: inline-block;}
.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){
.adityatekno-info {padding: 30px 15px 20px;}
.author {margin: 20px 0 35px !important;}
}
@media screen and (max-width:480px){
.adityatekno-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}
}
ul.sosmed-saya li a.fb {
    background-color: #4a7fbb;
}
ul.sosmed-saya li a.tw {
    background-color: #00aced;
}
ul.sosmed-saya li a.ig {
    background-color: #c4906e;
}
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}

/* 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;
}

3. Lalu letakan kode HTML dibawah ini setelah kode <div class='post-footer'> atau yang mirip dengan kode tersebut. Pokoknya dicoba mana peletakan yang cocok.
<div class='adityatekno-info'>
<span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<span class='author-photo'>
<img alt='Aditya Nur Kahfi' src='https://3.bp.blogspot.com/-NVGLhuDfrIc/WumMJgVJENI/AAAAAAAAAvY/uDrixu7e1powtfE3X9KWlt7N-CU41xBnQCLcBGAs/s320/BroGerrr.png' title='Aditya Nur Kahfi'/>
</span>
<span class='about-author vcard'>
<span class='author'>
<span class='fn'><a class='g-profile' href='#' itemprop='url' rel='author' title='author profile'><span itemprop='name'>Aditya Nur Kahfi</span></a></span>
</span>
<span class='author-desc'>
Seorang Blogger yang menyukai dunia IT, Pemrograman dsb, yang haus akan pengetahuan dan masih perlu banyak belajar.
</span>
<ul class='sosmed-saya'>
<li><a class='fb' href='https://www.facebook.com/adityanur.kahfi.9' itemprop='sameAs' rel='nofollow' title='facebook pribadi'><i aria-hidden='true' class='fa fa-facebook'/></a></li>
<li><a class='tw' href='https://twitter.com/AdityaNurKahfi2' itemprop='sameAs' rel='nofollow' title='twitter pribadi'><i aria-hidden='true' class='fa fa-twitter'/></a></li>
<li><a class='ig' href='https://www.instagram.com/adityanurkahfi/' itemprop='sameAs' rel='nofollow' title='instagram pribadi'><i aria-hidden='true' class='fa fa-instagram'/></a></li>
<li class='site'><span>https:</span>//broggerku<span>.</span>blogspot<span>.</span>com</li>
</ul>
</span>
</span>
</div> 
Silahkan ganti url author photo dengan url foto anda, dan untuk nama, deskripsi, sosial media bisa disesuaikan sendiri.

Terakhir, Simpan Tema dan lihat hasilnya.

Demikian tutorial Cara Membuat Author Box Keren di Bawah Postingan Blog. Semoga bisa mengurangi penasaran anda yang ngebet pengen memasang author box seperti di blog ini. Good luck! Sampai jumpa di postingan selanjutnya. Salam BG AdityaTekno.com.

Cara Membuat Author Box Keren di Bawah Postingan Blog

Membuat Widget Author Box Keren Responsive di Bawah Postingan

Cara Membuat dan Memasang Widget Author Box Keren di Bawah Postingan Blogger - Welcome back sobat AdityaTekno.com. Nah sesuai judul diatas, postingan ini saya buat atas permintaan sobat BG, yaitu tutorial membuat author box dibawah postingan seperti di AdityaTekno.com(saat ini). Dan saya minta maaf karena baru bisa post hari ini.

Widget ini berfungsi menampilkan foto profile pengarang, deskripsi pengarang dan sosial media pengarang. Keunggulan dari widget ini yaitu responsive. 
Berikut adalah tutorial cara membuat author box keren di bawah postingan blog.


Cara Membuat Author Box Keren Responsive di Bawah Postingan


1. Pertama, masuk ke Dashboard Blogger >> Tema >> Edit HTML.
2. Kemudian copy kode css berikut dan paste kan di atas kode ]]></b:skin> atau </style>. Coba satu persatu di blog sobat, mana yang cocok.
/* Author Box Keren Responsive by AdityaTekno */
.adityatekno-info{display:block;padding:0;margin:0 auto;color:#999;line-height:1.3em;font-size:12.3px!important;margin:0auto}
.adityatekno-info{background:#EAEBED;margin:30px auto 10px;display:block;position:relative;padding:35px 25px 25px;overflow:hidden}
.adityatekno-info::before{content:"";display:block;width:100%;height:88px;background:#005980;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 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:#fff;text-align:center;border-radius:2px}
ul.sosmed-saya li {display: inline-block;}
.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){
.adityatekno-info {padding: 30px 15px 20px;}
.author {margin: 20px 0 35px !important;}
}
@media screen and (max-width:480px){
.adityatekno-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}
}
ul.sosmed-saya li a.fb {
    background-color: #4a7fbb;
}
ul.sosmed-saya li a.tw {
    background-color: #00aced;
}
ul.sosmed-saya li a.ig {
    background-color: #c4906e;
}
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}

/* 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;
}

3. Lalu letakan kode HTML dibawah ini setelah kode <div class='post-footer'> atau yang mirip dengan kode tersebut. Pokoknya dicoba mana peletakan yang cocok.
<div class='adityatekno-info'>
<span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<span class='author-photo'>
<img alt='Aditya Nur Kahfi' src='https://3.bp.blogspot.com/-NVGLhuDfrIc/WumMJgVJENI/AAAAAAAAAvY/uDrixu7e1powtfE3X9KWlt7N-CU41xBnQCLcBGAs/s320/BroGerrr.png' title='Aditya Nur Kahfi'/>
</span>
<span class='about-author vcard'>
<span class='author'>
<span class='fn'><a class='g-profile' href='#' itemprop='url' rel='author' title='author profile'><span itemprop='name'>Aditya Nur Kahfi</span></a></span>
</span>
<span class='author-desc'>
Seorang Blogger yang menyukai dunia IT, Pemrograman dsb, yang haus akan pengetahuan dan masih perlu banyak belajar.
</span>
<ul class='sosmed-saya'>
<li><a class='fb' href='https://www.facebook.com/adityanur.kahfi.9' itemprop='sameAs' rel='nofollow' title='facebook pribadi'><i aria-hidden='true' class='fa fa-facebook'/></a></li>
<li><a class='tw' href='https://twitter.com/AdityaNurKahfi2' itemprop='sameAs' rel='nofollow' title='twitter pribadi'><i aria-hidden='true' class='fa fa-twitter'/></a></li>
<li><a class='ig' href='https://www.instagram.com/adityanurkahfi/' itemprop='sameAs' rel='nofollow' title='instagram pribadi'><i aria-hidden='true' class='fa fa-instagram'/></a></li>
<li class='site'><span>https:</span>//broggerku<span>.</span>blogspot<span>.</span>com</li>
</ul>
</span>
</span>
</div> 
Silahkan ganti url author photo dengan url foto anda, dan untuk nama, deskripsi, sosial media bisa disesuaikan sendiri.

Terakhir, Simpan Tema dan lihat hasilnya.

Demikian tutorial Cara Membuat Author Box Keren di Bawah Postingan Blog. Semoga bisa mengurangi penasaran anda yang ngebet pengen memasang author box seperti di blog ini. Good luck! Sampai jumpa di postingan selanjutnya. Salam BG AdityaTekno.com.
Load Comments

Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Notifications

Disqus Logo