Cara Membuat Author Box Simple Dibawah Postingan

Cara Membuat Author Box Simple Dibawah Postingan - Hai sob kali ini admin akan memberikan sebuah Tutorial Blogging untuk mempercantik blog kalian dengan menambahkan Author Box dibawah postingan atau artikel kalian.

Sebenarnya saya terinspirasi oleh Author Box buatan mbak Arlina Design yang mempunyai tampilan ciamik tapi simple. Dan sukses saya ambil script nya untuk ditambahkan ke blog saya (bukan blog ini) dan sedikit redesign dari saya agar lebih mudah cara penerapannya.

Baiklah buat kalian yang sudah tidak sabar ingin mencoba sendiri ke blog kalian masing-masing, silahkan ikuti tahap-tahap yang akan saya berikan berikut ini. Dan jika kalian kesulitan silahkan bertanya pada kolom komentar Disqus yang sudah tersedia dibawah artikel ini.

Contoh Tampilan Author Box Simple Ala Arlina Design

Pemasangan

1. Login ke akun Blogger kalian, lalu masuk ke Dasboard blog yang akan kalian eksekusi.
2. Tambahkan CSS dibawah ini, dan sisipkan diatas tag </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> /* CSS Multi Author Box By Arlina Design */ .authorboxwrap { background:#f9f9f9; margin:-15px 0 25px 0; padding:20px; overflow:hidden; border:1px solid #e6e6e6; } .avatar-container { float:left; margin-right:20px; } .avatar-container img { background:#fff; width:90px; height:auto; padding:5px; border:1px solid #ccc; } .author_description_container {} .author_description_container h4 { font-weight:600; font-size:16px; display:block; margin-bottom:10px; } .author_description_container h4 a { font-family:Oswald,arial; border-bottom:1px solid #0099cc; text-transform:capitalize; color:#333; } .author_description_container p { font-size:12px; line-height:1.6; margin-bottom:15px; } .authorsocial a { display:inline-block; text-align:center; float:left; margin-right:2px; } .authorsocial a i { width:30px; height:30px; padding:8px 9px; display:block; background:#E9E9E9 !important; color:#555; } </style> </b:if>

3. Lalu sisipkan tag kondisional yang akan saya berikan dibawah ini, agar selalu tampil dibawah postingan saja dan tidak membebani homepage, silahkan cari kode yang hampir mirip seperti ini.

<data:post.body/> <div style='clear: both;'/> <!-- clear for photos floats --> </div>

4. Tambahkan kode berikut tepat dibawah kode yang kalian temukan tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='authorboxwrap'> <div class='authorboxfull'> <div class='avatar-container'> <a expr:alt='data:post.author'> <img class='author_avatar img-circle' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='96' width='96'/></a></div> <div class='author_description_container'> <h4><a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'> <span itemprop='name'><data:post.author/></span></a></h4> <p><data:post.authorAboutMe/></p></div></div></div> </b:if>

5. Selanjutnya kalian tinggal Save Template

Author Box diatas tanpa harus edit-edit lagi, jadi tinggal kalian pasang saja sesuai perintah diatas!

Semua sudah saya setting secara otomatis seperti yang telah dilakukan oleh mbak Arlina Design jadi kalian tinggal copas saja kode-kode diatas ke template kalian lalu simpan hasilnya.

Untuk lebih lengkapnya kalian bisa cek artikel Tutorial Blogging keren-keren yang telah diberikan oleh beliau, link sudah saya sematkan disela-sela artikel ini.

Mungkin sekian dulu artikel dari Cara Membuat Author Box Simple Dibawah Postingan, jika ada salah-salah penulisan yang membuat kalian sulit mengerti mohon dimaafkan dan silahkan kalian tanyakan saja.
Terima Kasih