Membuat Widget Pro-Advanced Author Blog

• Demo
• Download

Motivation - Kali ini, saya akan memberikan Tutorial "Membuat Widget Pro-Advanced Author Blog". Widget ini berfungsi agar pengunjung dapat lebih mengetahui Biodata Penulis Blog (Info mengenai profil blog kita). Widget ini sangat cocok bagi para Blogger yang menyukai Tampilan Keren, Karena Widget ini memang khusus dibuat bagi para blogger bertemplate cool/keren.

Bagaimana cara pemasangannya? Silahkan ikuti Tutorialnya Dibawah ini:

• Login ke Blogger >> Dashboard >> Template >> EDIT HTML
• Temukan Kode ]]></b:skin> dengan CTRL+F
• Pastekan Kode dibawah ini, tepat diatas kode ]]></b:skin>

      .clear {
    clear:both;
    }

    #author-box {
    margin:10px 0;
    }

    #author-box a:hover {
    background:none!important;
    }

    #author-box .row-1 {
    background:#333;
    padding:20px;
    }

    #author-box .row-1 .avatar {
    float:left;
    line-height:1;
    -moz-box-shadow:0 0 10px #FFF;
    -webkit-box-shadow:0 0 10px #FFF;
    box-shadow:0 0 10px #FFF;
    }

    #author-box .row-1 .info {
    margin:0 0 0 110px;
    }

    #author-box .row-1 .info h6 {
    color:#FFF;
    font-size:20px;
    margin:-4px 0 0;
    }

    #author-box .row-1 .info h6 span {
    font-size:11px;
    font-weight:400;
    background:#1BA1E2;
    -webkit-border-radius:40px;
    -moz-border-radius:40px;
    border-radius:40px;
    filter:alpha(opacity=60);
    opacity:0.6;
    margin:0 0 0 1em;
    padding:1px 9px 2px;
    }

    #author-box .row-1 .info p {
    color:#DDD;
    font-weight:400;
    font-size:14px;
    margin:0;
    }

    #author-box .row-2 {
    background:#666;
    }

    #author-box .row-2 a.social-item {
    display:block;
    float:left;
    color:#FFF;
    text-align:center;
    padding:15px;
    }

    #author-box .row-2 .social-item .icon {
    height:32px;
    width:32px;
    }

    #author-box .row-2 .social-item > span {
    display:block;
    text-align:center;
    margin:auto;
    }

    #author-box .row-2 .social-item .label {
    font-weight:700;
    font-size:13px;
    }

    #author-box .row-2 .social-item .click {
    font-size:11px;
    color:#EAEAEA;
    line-height:1;
    }

    #author-box .row-2 a.social-item:hover {
    background:#1BA1E2!important;
    }

    #author-box .row-3 {
    background:#1BA1E2;
    }

    #author-box .row-3 form,#author-box .row-3 a.donation-button {
    display:block;
    float:left;
    }

    #author-box .row-3 .donation-button {
    background:#1BA1E2;
    border:none;
    font-family:Impact;
    font-size:30px;
    color:#FFF;
    line-height:1.2em;
    margin:0;
    padding:10px;
    }

    #author-box .row-3 .donation-button:hover {
    background:#000;
    cursor:pointer;
    }

    #author-box .row-3 .register-button {
    display:block;
    color:#FFF;
    border:none;
    font-family:Impact;
    font-size:30px;
    text-align:right;
    line-height:1.2em;
    margin:0;
    padding:10px;
    }

    #author-box .row-3 .register-button:hover {
    color:#000;
    cursor:pointer;
    }

    #author-box .row-2 .social-item.twitter .icon {
    background-position:0 -32px;
    }

    #author-box .row-2 .social-item.facebook .icon {
    background-position:0 -64px;
    }

    #author-box .row-2 .social-item.gplus .icon {
    background-position:0 -96px;
    }

    #author-box .row-2 .social-item.linkedin .icon {
    background-position:0 -128px;
    }

    #author-box .row-2 .social-item.youtube .icon {
    background-position:0 -160px;
    }

    #author-box .row-2 .social-item.pinterest .icon {
    background-position:0 -192px;
    }

    #author-box .social-item .icon {
    background-image:url(https://lh5.googleusercontent.com/--PQVoN23nrI/UYHHvhtNSxI/AAAAAAAAJPA/5weO87qvER4/s224/ausocial.png)!important;
    background-repeat:no-repeat;
    }

• Setelah Itu, Temukan Lagi Kode  <div class='post-footer-line post-footer-line-1'> dan pastekan Kode berikut ini, tepat dibawahnya:

     <div id='author-box'>
                <div class='row row-1'>
                    <div class='avatar'>
                        <a href='https://plus.google.com/102119942918729543948'><img alt='author-avatar' class='avatar avatar-90 photo' height='90' src='https://lh5.googleusercontent.com/-feAaYQJRGhg/AAAAAAAAAAI/AAAAAAAAACo/B3tNfDtan_Q/s120-c/photo.jpg' width='90'/></a>
                    </div>
                    <div class='info'>
      <h6>Posted By: Kgenzaru Khusnul Khuluq <span>Admin and Author</span></h6>
        <p><strong><a href='https://plus.google.com/10211994291872954394'>Kgenzaru Khusnul Khuluq </a>Adalah seorang Bloggers Sejati, yang memberikan motivasi pada setiap pembaca artikelnya.</strong> <strong>Dengan Blog ini, Saya bertujuan untuk membuat perdamaian Di Dunia Ini.</strong></p>
                    </div>
                    <div class='clear'/>
                </div>
                <div class='row row-2'>
                    <a class='social-item website' href='http://utility-share.blogspot.com/' meta='website' target='_blank'>
                        <span class='icon'/>
                        <span class='label'>Website</span>
                      <span class='click'><span class='val'>113576 Visitors</span> </span>
                    </a>
             
                    <a class='social-item twitter' href='https://twitter.com/YOUR-ACCOUNT-NAME' meta='twitter' target='_blank'>
                        <span class='icon'/>
                        <span class='label'>Twitter</span>
                        <span class='click'><span class='val'>200 Followers</span></span>
                    </a>
             
                    <a class='social-item facebook' href='http://www.facebook.com/YOUR-ACCOUNT-NAME' meta='face' target='_blank'>
                        <span class='icon'/>
                        <span class='label'>Facebook</span>
                        <span class='click'><span class='val'>500 Likes</span></span>
                    </a>
             
                    <a class='social-item gplus' href='https://plus.google.com/YOUR-ACCOUNT-NUMBER' meta='gplus' target='_blank'>
                        <span class='icon'/>
                        <span class='label'>Google+</span>
                        <span class='click'><span class='val'>70 Joined</span></span>
                    </a>
             
                    <a class='social-item linkedin' href='http://ph.linkedin.com/YOUR-ACCOUNT-NAME' meta='linkedin' target='_blank'>
                        <span class='icon'/>
                        <span class='label'>LinkedIn</span>
                        <span class='click'><span class='val'>40 Links</span></span>
                    </a>
             
                    <a class='social-item youtube' href='https://www.youtube.com/user/YOUR-ACCOUNT-NAME' meta='youtube' target='_blank'>
                        <span class='icon'/>
                        <span class='label'>Youtube</span>
                        <span class='click'><span class='val'>30 Followers</span></span>
                    </a>
             
                 
                <div class='clear'/></div>
                <div class='row row-3'>
                <form action='https://www.paypal.com/cgi-bin/webscr' class='author-donation' method='post'>
                    <input name='cmd' type='hidden' value='_donations'/>
                    <input name='business' type='hidden' value='vhemant03@gmail.com'/>
                    <input name='lc' type='hidden' value='US'/>
                    <input name='item_name' type='hidden' value='Donate Blogger'/>
                    <input name='no_note' type='hidden' value='0'/>
                    <input name='currency_code' type='hidden' value='USD'/>
                    <input class='donation-button' name='submit' type='submit' value='+Donate to Author'/>
                </form><a class='register-button' href='http://blogger.com/'>Become a Blogger</a><div class='clear'/></div>
        </div> 

• Ket :
• Ganti Teks Berwarna Orange Menjadi Link Profil Google Anda.
• Ganti Teks berwarna Kuning menjadi Foto/Gambar Profil Anda
• Ganti Teks Hijau Menjadi Biodata Singkat Anda
• Ganti Teks Warna Biru Menjadi Nama/ User Account Anda
• Ganti Teks Warna Ungu menjadi Link Blog Anda, 
• Teks Warna Pink merupakan account sosial media anda, ubahlah sesuai milik anda.

Nah, Itulah Tutorial "Membuat Widget Pro-Advanced Author Blog" Semoga Bermanfaat. Terima Kasih.

Motivation_2014Arsip