Home » » Widget Author box keren untuk blog

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
Description: Widget Author box keren untuk blog
Rating: 4.5
Reviewer: haris rati
ItemReviewed: Widget Author box keren untuk blog

1 komentar:

  1. Mari bergabung bersama kami untuk penghasilan yang tidak terbatas dan Anda berkesempatan menjadi JUTAWAN. kerja online di infodahsyat.com/nazar sangat mudah dan caranya pun bisa Anda baca di E-book yang bisa Anda download setelah Anda mendaftar. Untuk informasi lebih lanjut dan pendaftaran gratis langsung aja KLIK DISINI

    ReplyDelete
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Mohon Berkomentarlan dengan baik sesuai dengan tema / isi posting di atas
Serta tidak mengandung PORNO,SARA,KATA2 KASAR DAN JOROK
Terima kasih atas perhatianya :)