Monday, May 27, 2013

Widget Author box keren untuk blog

Hai tema-teman semua kali ini haris715 akan posting tentang Widget Author box keren untuk blog, Sekarang sudah jam 01: 30 Saya sudah ngantuk bangat ni :), Tanpa basa basi Mari kita langsung saja pada tutorialnya di bawah ini

Ikuti langkah di bawah ini :
  1. Login Ke Blogger> Dashborad 
  2. Klik pada Drop Down Menu dan pilih Template 
  3. Jangan Lupa Backup Template Anda terlebih dahulu sebelum membuat perubahan ke blog Anda 
  4. Sekarang Klik Edit HTML> Lanjutkan> 
  5. Tekan Ctrl + F dan cari kode  ]]></b:skin> 
  6. Kemudian pastekan Kode di bawah ini di atas kode ]]></b:skin>

    /*athour haris715*/
    #wg-authorbox {
    background : #88C5D9;
    width:auto;
    overflow:hidden;
    color:#fff;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    margin:5px auto;
    padding:40px 10px 10px 20px;
    }
    #wg-authorbox:hover {
    -webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
    -moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
    box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
    }
    #wg-authorbox h4 {
    font-size:16px;
    color:#fff;
    clear:none;
    margin:0;
    padding:10px 10px 5px;
    }
    #wg-authorbox .author_small {
    font-style:italic;
    }
    #wg-authorbox img {
    -webkit-transition:  -webkit-transform .15s linear;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    padding: 5px 5px 5px 5px;
    -webkit-transform:  rotate(+2deg);
    -moz-transform: rotate(+2deg);
    float:left;
    border:4px solid #F9780E;
    margin:10px;
    padding:0;
    }
    #wg-authorbox img:hover {
    -webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
    -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
    -webkit-transform:  rotate(-1deg);
    -moz-transform: rotate(-1deg);
    }
    #wg-authorbox p {
    color:#F9EAD4;
    margin:0;
    padding:0 10px 10px;
    }
    #wg-authorbox a {
    color:#F9780E;
    }

  7. Setelah itu Cari Kode <data:post.body/> 
  8. Pastekan kode di bawah ini tepat di bawah kode <data:post.body/> 
    <b:if cond='data:blog.pageType == &quot;item&quot;'>   
    <br/>
    <br/>
    <div id="wg-authorbox">      
    <img alt="About Author" src="http://4.bp.blogspot.com/-eZudnet8Zlg/UZ3nPrWsKjI/AAAAAAAAARA/4PBjG7bE9Yo/s1600/photo.jpg" height="100" width="100"/>
    <h4><a href="https://plus.google.com/117897706302482350132" title="Posts by Hemant Verma" rel="author">Posted by Haris</a></h4>
     <p> hai! nama saya haris selamat datang di blog saya yang isinya tentang Dunia kesehatan dan Bloging. </p> <p>Lihat Blogku <a href="http://haris715.blogspot.com">haris715</a></p> | Follow Me On <a href="http://www.twitter.com/@rati_haris">Twitter</a> Or <a href="http://www.facebook.com/ryez lante">Facebook</a></div>
    </b:if>   

  9. Sesuaikan kode yang saya warnai di atas dengan kebutuhan anda 
  10. Setelah semuanya sudah beres SAVE template anda dan lihat hasilnya
Demikian Tutorial pemasangan Widget Author box keren untuk blog ini semoga bermanfaat jika ada yang kurang jelas silahkan sampaikan lewat komentar di bawah, ya udah saya juga mau tidur nie, wassalam
Disqus Comments