Skip to content Skip to sidebar Skip to footer

Cara Menciptakan Author Box Dan Ikon Media Umum Di Bawah Postingan Blogger

Hari ini saya akan menyebarkan tutorial perihal cara menambahkan kotak penulis lanjutan dengan ikon media umum di bawah setiap posting di blog blogger . Selalu baik membiarkan pembaca Anda lebih mengenal Anda, ini sanggup dilakukan dengan santunan kotak penulis ini .
Cara Membuat Author Box Dan Ikon Media Sosial Di Bawah Postingan Blogger

Kotak penulis ini menghemat stres untuk menambahkan avatar Anda secara manual alasannya yaitu mengekstraknya pribadi dari profil Google Plus Anda , deskripsi juga. Datang terang bagi pembaca konten Anda yaitu sebuah kebutuhan bagi seorang blogger yang sukses alasannya yaitu membangun keyakinan antara Anda dan pembaca Anda. Pembaca Anda sanggup dengan gampang menyusul Anda di media sosial dengan santunan lingkaran ikon media umum yang tersedia. Anda sanggup dengan gampang menambahkan profil facebook, googleplus, dan twitter Anda ke profil penulis Anda . 

Mohon ikuti mekanisme di bawah ini untuk mempelajari cara menambahkan kotak penulis bergayadengan bulat ikon media umum di bawah setiap posting di blogger. Apakah tipe saya yang suka menjaga blog tetap higienis dan elok ? Maka tutorial ini untuk anda. Menambahkan kotak penulis di bawah setiap posting akan menciptakan blog Anda terlihat lebih profesional dan higienis juga. Ini yaitu kotak penulis yang tepat untuk sebuah blog yang dijalankan oleh banyak penulis alasannya yaitu memperlihatkan deskripsi masing-masing penulis di bawah goresan pena yang diterbitkan olehnya.

Cara Menambahkan Author Box Dan Ikon Media Sosial di Bawah Setiap Postingan Blogger

Widget ini membuatnya sangat gampang untuk menginstalnya ketika mengambil gambar dan deskripsi pribadi dari profil Google Anda. Bisa ditambahkan secara manual juga. Untuk memasang widget ini , kita akan menambahkan sedikit CSS dan HTML ke instruksi blog anda. Mohon ikuti mekanisme di bawah ini :

Langkah 1

Masuk ke Dashboard Blogger Anda >> Template >> Edit HTML . Sekarang cari </ style> dan paste instruksi di bawah ini tepat di atasnya. 
/* CSS Author Bio Box by TombolBlogger */ .authorboxwrap{Font-family: Open Sans;background:#fff;margin:10px auto 20px;padding:20px;overflow:hidden;border:1px solid #ccc;} .avatar-container {float:left;margin-right:20px;border: 1px solid silver;padding: 3px;} .avatar-container img{width:110px;height:auto;} .author_description_container h4{font-family:Open Sans; 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;font-family: Open Sans;} .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:50%;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;} 

Langkah 2

Cari  <data: post.body /> kemudian paste berikut instruksi html  dibawahnya . <data: post.body /> mungkin muncul berkali-kali di blog Anda, namun manfaatkan hasil pencarian kedua.
<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>Author: <a href='#' rel='author'><data:post.author/></a></h4> <p> <data:post.authorAboutMe/> </p> <div class='authorsocial'> <a class='img-circle1' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a> <a class='img-circle2' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a> <a class='img-circle3' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a> <div class='clr'/> </div> </div> </div> </div> <div style='clear:both'/> </b:if> 

Langkah 3

Ubah semua tag hash (#) dengan alamat media umum Anda . Simpan Template anda

Pengaturan lainnya 

Pastikan Anda  menambahkan deskripsi dan gambar profil ke profil Google plus   di bab tentang. Anda cukup masuk ke ( https / // www.plus.google.com/u/0/USER-NAME/about  ) dan tambahkan juga detailnya ke dalamnya.

Sekarang inilah langkah terakhir, Pergi ke Dasbor Blogger Anda >> Layout >> Edit widget Blogpost dan centang show author profile di bawah tulisan.

Apa pendapat Anda perihal kotak penulis ini ? Atau Anda mengalami persoalan ketika menginstalnya? Beri tahu saya melalui bab komentar dan jangan lupa untuk tetap menyebarkan dengan teman di media sosial.
Sumber https://www.tombolblogger.com/