Membuat Author Box Simple dan Responsive

Author box seperti masyusuf.com

Membuat Author Box Simple dan Responsive - Author box merupakan bagian penting dari template terutama untuk blog pribadi. Author box berfungsi untuk mengenalkan kepada pengunjung tentang pemilik blog, dan untuk lebih dekat dengan pemilik blog contohnya dalam social media.

Nah, author box yang akan saya bagikan di bawah ini merupakan author box untuk template blogger yang digunakan di blog mas yusuf(masyusuf.com) dan blog ini juga. Desain author box ini berbeda dengan yang lain, karena ini merupakan desain saya sendiri.

Author box ini adalah author box untuk sidebar bukan yang di bawah postingan. Author box ini saya buat dengan desain simple dan responsive. Dalam author box ini yang saya tekankan adalah bagian responsivenya, karena responsive adalah unsur penting dalam template blog. Untuk desainnya, author box ini bisa dibilang sangat simple.

Daripada kebanyakan basa-basi nanti malah basi langsung saja kita ke bagian inti dari cara membuat author box simple dan responsive simak di bawah ini.

Cara Membuat Author Box Simple dan Responsive

1. Pertama-tama kamu masuk ke Dashboard blogger lalu pilih Tata Letak, di bagian sidebar klik Tambah Gadget lalu pilih HTML/Javascript.

2. Setelah pilih HTML/Javascript, isi bagian judul dengan author, aboutme, atau terserah kamu. Pada bagian konten isi dengan script di bawah ini lalu klik simpan.

Script HTML

<div id="author-box">
    <div class="wrapper-author">
        <div class="label-author">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOFNKVQGWqaTjsRK87LAivJ3X7n-FNku6kFyL3DPmRB6lfBGDea4dsILmxbAstNvTFbiF5yYsXTev9Z3KCRzbB8B5if061xc6vIoJmtbIV2DLughY8CSyjRdkcm5wSZPjo8ICctgpLERo/h120/label-author.png" />
        </div>
        <div id='header-author'>
            <div class="sosmed">
                <a href="Isi dengan link profil Facebook" target="_blank" class="sosmed-fb"><i class='fab fa-facebook-square'/></i></a>
                <a href="Isi dengan link profil instagram" target="_blank" class="sosmed-ig"><i class="fab fa-instagram"/></i></a>
            </div>
            <div class="avatar">
                <img src="Isi dengan link foto author" />
            </div>
        </div>
        <div id='body-author'>
            <div class="author-name">
                <a href="Isi dengan link social media bisa fb, instagram, dll(pilih salah satu)">Ikhfan Yusuf</a>
            </div>
            <div class="deskripsi">
                <p> <a href='Isi dengan link social media bisa fb, instagram, dll(pilih salah satu)' class='author-deskripsi'>Ikhfan Yusuf Arifin</a> , Isi dengan deskripsi</p>
            </div>
        </div>
    </div>
</div>

Untuk bagian script yang saya beri warna hijau di atas adalah script untuk gambar tulisan author seperti di bawah, jadi jika kamu ingin menghilangkannya tinggal hapus script warna hijau di atas.

Author box bagian label author

3. Oh iya, untuk icon social media di atas saya menggunakan icon fontawesome versi terbaru, jadi kemungkinan belum banyak template yang memakainya. Artinya kamu harus letakan kode di bawah ini. Copy dan pastekan script di bawah tag <head> atau di atas tag penutup </head>.

<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.0.9/css/all.css' integrity='sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1' rel='stylesheet'/>

4. Apakah sudah?. Tentu belum script di atas baru HTML dan script untuk fontawesome saja, jadi kalau kamu lihat hasilnya pasti berantakan. Kita butuh CSS untuk merapikan dan mendesain author box sesuai keinginan.

5. Selanjutnya kamu ke dashborad blogger, bagian menu Tema lalu klik edit HTML.

6. Setelah kamu masuk bagian editor tema, letakan kursor di mana saja di dalam editor tema, lalu tekan tombol ctrl+f untuk memunculkan kotak search di pojok kanan atas. Hal ini untuk memudahkan kita mencari tag kode tempat kita letakan script cssnya.

7. Oke, sekarang cari tag script <style> kalau tidak ada cari script <b:skin><![CDATA[, biasanya kalau template custom ada tag <style>.

8. Selanjutnya copy dan pastekan script css di bawah ini. Pastekan di bawah tag <style> atau di atas tag </style>.
Jika tidak ada tag style, pastekan di bawah <b:skin><![CDATA[ atau di atas ]]></b:skin>.

Script CSS

/*----- Author Box -----*/

#author-box{
    border: 1px solid #eaeaea;
}
.label-author img{
    position: relative;
    top: -1px;
    right: -1px;
    float: right;
}
.wrapper-author{
    margin-bottom: 10px;
}
#header-author{
    background: linear-gradient(148deg, #00BFA5, #A7FFEB 77%, #64FFDA);
}
.avatar{
    text-align: center;
    clear: both;
    position: relative;
    top: -25px;
}
.avatar img{
    border-radius: 50%;
}
    .sosmed{
        position: absolute;
        margin: 5px 6px;
}
    .sosmed a{
        margin-right: 4px;
}
    .sosmed a i{
        font-size: 24px;
        color: #fff;
}

#body-author{
    margin: 0 10px;
}
.author-name{
    text-align: center;
    border-bottom: 1px solid #eaeaea;
    transition: border-bottom 0.8s;
    margin: 10px 0;
}
.author-deskripsi{
    color: #009688;
    text-decoration: none;
}
.author-name a{
    text-decoration: none;
    font-size: 18px;
    color: #26A69A;
}
.author-name:hover{
    border-bottom: 1px solid #009688;
}
.deskripsi{
    background: #fff;
    width: 70%;
    margin: 5px auto;
}
.deskripsi a{
    transition: color 0.8s;
}
.deskripsi a:hover{
    color: rgba(0, 136, 150, 0.7);
}
.deskripsi p{
    border-right: 1px solid #009688;
    border-left: 1px solid #009688;
    padding: 0 5px;
    font-size: 13px;
    line-height: 1.3;
    color: rgba(33, 37, 41, 0.75);
}

9. Terakhir klik simpan template, dan author box sudah jadi.

Kalau kamu ngerti tentang css html, silahkan boleh di custom sendiri sesuka hati. Nah, sudah saya bagikan cara membuat author box simple dan responsive berarti sampai di sini artikel pertama blog bagian kode.
Silahkan bertanya di kolom komentar jika ada pertanyaan atau error, saya akan bantu sebisa saya, karena saya juga masih belajar, terima kasih semoga bermanfaat.

Bagian Kode