Cara Memasang Author Box Keren Di Blog

Cara Memasang Author Box Keren Di Blog – Halo Temen-Temen Apa Kabarnya Baik-Baik Saja Kan? Kali Ini Usamah Akan Memberikan Tutorial Cara Membuat Author Box Apa Sih Itu Author Box Dan Bagaimana Cara Memasang Author Box Yang Keren Dibawah Postingan Blog ? Author Box Merupakan Sebuah Widget Yang Mendekripsikan Riwayat Diri Seorang Admin Blog Atau Biasanya Disebut Dengan Kotak Admin ,  Untuk Cara Pemasangan Author Box Sendiri Sangat Mudah , Paling Tidak Anda Harus Sedikit Menguasai Html .

     Emang Apa Gunanya Mas Masang Author Box?

Fungsinya Adalah Agar Anda Dapat Memperkenalkan Tentang Diri Anda Terhadap Pengunjung , Sehingga Nama Anda Akan Di Kenal Banyak Orang Di Dunia Maya Ini, Hihihihi , Nah Begitulah Fungsi Author Box Menurut Saya Sendiri.

     Cara Buat Nya Gimana Mas?

Oke, Tenang Aja Ada Di Bawah Kok, Nah Tampilan Nya Akan Seperti Ini Nih

Berikut Cara Pemasangan Nya :

1. Buka Blogger>Template>Edit Html>(Ctrl+F)>Cari Kode <data:post.body/>, Letakan Kode Dibawah, Dibawah <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='authorboxwrap'> <div class='authorboxfull'> <div class='avatar-container'> <a href=''> <img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='110' width='110'/> </a> </div> <div class='author_description_container'> <h4><a href='#' rel='author'><data:post.author/></a></h4> <p> <data:post.authorAboutMe/> </p> <div class='authorsocial'> <a class='img-circle1' href='https://www.facebook.com/SAMDESIGNProduction/' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a> <a class='img-circle2' href='https://twitter.com/usamah_hamzah' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a> <a class='img-circle3' href='https://plus.google.com/u/0/114421681500248185904' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a> <div class='clr'/> </div> </div> </div> </div> <div style='clear:both'/> </b:if>

Penting :
Ganti Code Link Warna Merah Diatas, Menjadi Link Socmed Anda

2. Selanjutnya Cari Kode ]]></b:skin> atau </style> Dengan Menekan (Ctrl+F), Lalu Masukan Kode Di bawah, Di atas Kode ]]></b:skin>

/* CSS Multi Author Box */ .authorboxwrap{background:#fff;margin:0 auto 20px;padding:20px;overflow:hidden;border:1px solid #ccc;} .avatar-container {float:left;margin-right:20px;} .avatar-container img{width:110px;height:auto;} .author_description_container h4{font-weight:700;font-size:16px;display:block;margin:0;margin-bottom:2px} .author_description_container h4 a{color:#ef4824} .author_description_container h4 a:hover{color:#404040} .author_description_container p{margin:0;color:#888;font-size:95%;margin-bottom:8px} .authorsocial a{display:inline-block;text-align:center;margin-right:10px} .authorsocial a i{font-family:Fontawesome;width:20px;height:20px;line-height:20px;padding:5px;display:block;opacity:1;border-radius:2px;transition:all .3s;} .authorsocial a:nth-child(1) i {background:#2d609b;color:#fff;} .authorsocial a:nth-child(2) i {background:#19bfe5;color:#fff;} .authorsocial a:nth-child(3) i {background:#eb4026;color:#fff;} .authorsocial a:hover:nth-child(1) i,.authorsocial a:hover:nth-child(2) i,.authorsocial a:hover:nth-child(3) i {opacity:0.90;}

3. Simpan Template

Penting :
1. Untuk Memunculkan Deskripsi Penulis, Pastikan Anda Sudah Mengisi Keterangan Di Google+, Cara Nya Buka Profil Google+ Anda Klik Tentang atau About, Lalu Sunting Cerita Anda

2. Pergi Ke Tata Letak>Klik Edit Pada Widget Postingan Blog>Lalu Centang Pada Tampilkan Profil Pengarang Di Bawah Pos

3. Simpan Widget

Oke Mungkin Segini Saja Yang Bisa Saya Berikan Jangan Lupa Letak Comentar Anda Dibawah, dan Seperti Biasa Wassalam

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: