Cara Membuat Author Box Keren di Bawah Postingan Blog

Sesuai judul diatas, kali ini saya akan membagikan tutorial cara membuat dan memasang widget author box keren di bawah postingan blogger/blogspot.
Membuat Widget Author Box Keren Responsive di Bawah Postingan
Cara Membuat Author Box Keren dan Responsive dibawah Postingan Blog

AdityaTekno.com - Sesuai judul diatas, kali ini saya akan membagikan tutorial cara membuat dan memasang widget author box keren di bawah postingan blogger/blogspot.

Widget ini berfungsi untuk menampilkan foto profile penulis, deskripsi penulis dan sosial media penulis. Keunggulan dari widget ini salah satunya yaitu responsive dan keren. 

Nah, bagi anda yang sudah tidak sabar pengen menerapkan widget author box ini di blog, yuk simak tutorialnya dibawah.

Cara Membuat dan Memasang Author Box Keren dibawah Postingan Blog

Berikut adalah tutorial cara membuat dan memasang author box keren dibawah postingan blog.

  1. Pertama, masuk ke Dashboard Blogger.
  2. Kemudian klik menu Tema >> Edit HTML.
  3. Kemudian salin kode css berikut dan tempelkan di atas kode ]]></b:skin> atau </style>, coba satu persatu di blog anda, 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;
    }
  4. Selanjutnya tempelkan 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>//www<span>.</span>adityatekno<span>.</span>com</li>
    </ul>
    </span>
    </span>
    </div>
  5. Sebelum di Simpan, silahkan ganti url author photo dengan url foto anda, kemudian untuk nama, deskripsi, sosial media bisa disesuaikan sendiri.
  6. Jika dirasa sudah semua, klik Simpan tema dan lihat hasilnya.

Baca Juga : Cara Membuat Tombol Buka Tutup Komentar Keren + Gradient Color pada Blog Blogspot

Demikian tutorial Cara Membuat Author Box Keren dibawah Postingan Blog. Semoga bermanfaat dan terima kasih sudah berkunjung. Salam AdityaTekno.com.