Cara Membuat Widget  Author Simple Dan Keren Pada Blogger

Cara Membuat Widget Author Simple Dan Keren Pada Blogger


Pelajar Design - Pada kesempatan ini saya akan membagikan sebuah tutorial tentang Cara Membuat Widget Author Simpe Dan Keren Pada Blogger. Biasanya Widget Author sudah ada pada Template yang kalian gunakan, namun tampilan yang diberikan kurag menarik.

Ada manfaat yang terdapat jika kalian memasang Widget Author ini pada Website Atau Blog Kalian, dengan adanya Widget Author ini pengunjung bisa mengetahui Profil Penulis artikel atau blog tersebut.

Pada umumnya Widget Author ini terletak pada sidebar, footer dan dibawah postingan artikel pada Website Atau Blog. Ada banyak style Widget Author yang sudah dibuat oleh orang yang handal dalam bidang programmer. Di Blogger sendiri sudah menyediakan Widget Author, namun tampilannya kurang menarik dan biasa-biasa saja.

Widget Author ini memiliki latar belakang profil berupa foto, nama, alamat, dan bidang yang dikuasai oleh penulis Blog. Kalian bisa sesuaikan kode yang Pelajardzgn.my.id berikan dibawah sesuai dengan kebutuhan kalian.

Widget Author ini di lengkapi dengan beberapa ikon sosial media seperti Facebook, Twitter, Youtube, Github dan ada button Follow serta Donasi.

Untuk pemasangan Widget Author ini juga mudah, jika kalian ingin merubah beberapa tampilan juga silahkan.

Cara Membuat Widget Author Simpe Dan Keren Pada Blogger

1. Masuk ke Blogger.com.
2. Pilih menu Tata Letak > Tambahkan Gadget > HTML/JavaScript.
3. Lalu kalian copy dan paste kode dibawah ini pada kolom Konten / Content.

<div class="pelajaruthorbox" style="margin:0 10px 10px 0;border-radius:5px">
    <img alt="author"
        src="https://1.bp.blogspot.com/-dwHWlf2xV6s/XMiVcJCa1UI/AAAAAAAAQEE/8MlkEeVL0nkc-dBOSGeD9tkkS0UbDUpmACK4BGAYYCw/s220/avatar_4093.gif"
        width="120" height="120" />
    <a class="pelajaruthorname" href="https://www.pelajardzgn.my.id/" rel="author" target="_blank"
        title="Get in touch">www.pelajardzgn.my.id</a>
    <div class="sosmed-author">
        <ul>
            <li><a href="https://www.pelajardzgn.my.id/" target="_blank" title="Facebook" rel="nofollow"><i
                        class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a></li>
            <li><a href="https://www.pelajardzgn.my.id/" target="_blank" title="Twitter" rel="nofollow"><i
                        class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a></li>
            <li><a href="https://www.pelajardzgn.my.id/" target="_blank" title="Youtube" rel="nofollow"><i
                        class="fa fa-youtube-square fa-2x" aria-hidden="true"></i></a></li>
            <li><a href="https://www.pelajardzgn.my.id/" target="_blank" title="Google+" rel="nofollow"><i
                        class="fa fa-github-square fa-2x" aria-hidden="true"></i></a></li>
        </ul>
        <div class="clear"></div>
        <div class="bawahsos">
            <a class="butt-author" href="https://www.blogger.com/follow-blog.g?blogID=8359472699845456853"
                target="_blank" title="Follow This Blog"><i aria-hidden="true" class="fa fa-rss"></i> Follow</a>
            <a class="butt-contact" href="https://www.pelajardzgn.my.id/" rel="nofollow" target="_blank"
                title="Donasi ke Admin"><i aria-hidden="true" class="fa fa-coffee"></i> Donasi</a>
        </div>
    </div>
</div>
<style>
    .sosmed-author,
    a.pelajaruthorname,
    h2.author-title,
    a.pelajaruthorname-url {
        display: block;
        text-align: center
    }

    .pelajaruthorbox {
        background: url(https://img.freepik.com/free-photo/wall-wallpaper-concrete-colored-painted-textured-concept_53876-31799.jpg?size=626&ext=jpg) top center no-repeat #111;
        padding: 25px 0 0;
        margin: 0 auto;
        width: 300px
    }

    h2.author-title {
        font-weight: bold;
        text-decoration: none;
        margin: 0 auto 10px;
        font-size: 22px;
        color: #fff !important
    }

    .pelajaruthorbox img {
        margin: 1px auto 0;
        border-radius: 100%;
        display: block;
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
        border: 4px solid #fff;
        transition: all .6s;
        background: #222
    }

    .pelajaruthorbox img:hover {
        border-radius: 10%;
        cursor: pointer;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2)
    }

    .pelajaruthorbox a.pelajaruthorname {
        background: #222;
        display: table;
        margin: 20px auto;
        padding: 6px 10px;
        line-height: normal;
        border: 1px solid rgba(0, 0, 0, 0.08);
        color: #fff;
        font-weight: 400;
        font-size: 14px;
        border-radius: 3px;
        letter-spacing: 1px;
        text-decoration: none;
    }

    .pelajaruthorbox a.pelajaruthorname:hover {
        background: #123;
        color: #fff
    }

    .sosmed-author {
        margin: auto;
        padding: 15px;
        background: #111;
        border-radius: 4px;
        border-top: 10px solid #222
    }

    .sosmed-author li,
    .sosmed-author ul {
        list-style: none
    }

    .sosmed-author ul {
        margin: 0;
        padding: 0 0 10px 0;
        width: 100%;
    }

    .sosmed-author li {
        display: inline-block;
        width: 22%
    }

    .sosmed-author li a {
        color: #bdc3c7 !important;
        transition: all .4s ease-out;
    }

    .sosmed-author li a:hover {
        color: #7f8c8d !important;
    }

    .bawahsos {
        width: 100%;
        display: block
    }

    .bawahsos a.butt-author,
    .bawahsos a.butt-contact {
        background: #222;
        color: #fff;
        display: inline-block;
        width: 30%;
        padding: 10px;
        border-radius: 4px;
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
        transition: all .3s;
        text-decoration: none;
    }

    .bawahsos a.butt-contact {
        background: #222;
        color: #fff;
        margin: 0 0 0 8px
    }

    .bawahsos a.butt-author:hover {
        background: #123;
        color: #fff;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2)
    }

    .bawahsos a.butt-contact:hover {
        background: #123;
        color: #fff;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2)
    }

    .bawahsos a.butt-author i,
    .bawahsos a.butt-contact i {
        margin: 0 5px 0 0
    }
</style>

4. Apabila ikon tidak muncul maka kalian harus memasukkan Script Library Font Awesome dibawah ini tepat DIBAWAH kode <head>.

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'rel='stylesheet'type='text/css'/>

Jika berhasil maka hasilnya akan seperti digambar

Hasil Akhir Widget Author
Bagaimana artikel tentang Cara Membuat Widget Author Simpe Dan Keren Pada Blogger? Mudah bukan. Apabila kalian memiliki pertanyaan seputar blogger silahkan komen dibawah ya.

Referensi : https://www.kurazone.net/2019/06/cara-membuat-widget-profil-keren-pada-sidebar-blog.html

You may like these posts