Cara Membuat Author Box Simple Blogger by Rian SEO
Wigdet Blogger Author Box - Ini adalah post pertama saya dalam membuatkan tutorial di blogspot, Sengaja domain ini gak saya ubah menjadi TLD karena tujuan blog ini hanya berbagi tips saja seputar desain template. Mungkin sebagian dari kamu sudah tahu siapa dibalik penggeola blog gratisan ini.
Dalam halaman ini, saya akan membagikan tutorial desain kusus blogspot, dimana tutorial saya ini berhubungan wigdet Author Box yang fungsinya adalah untuk menampilkan ringkasan data profil Admin dibawah postingan blog.
Wigdet ini terinfirasi dari tema Newspaper Wordpress, dimana tampilanya bisa kamu lihat contoh gambar dibawah ini.
![]() |
Author Box Wordpress by Newspaper |
Untuk versi Blogspot kamu bisa lihat contoh gambar dibawah ini.
![]() |
Author Box Blogger by Rian SEO |
Cara Menampilkan profil Author dibawah Postingan
Buka Blogger > Tata Letak > Post > Beri tanda ceklis > Tampilkan Profil Pengarang Di Bawah Pos
Untuk menggatur atau menambah kata-kata ringkas di Profil Blogger, bisa kamu buka Pengaturan > User > Blogger
Google+ sudah di hilangkan di tahun 2019 ini, jadi ini adalah cara terbaru untuk menampilkan semboyan atau kata-kata ringkas di dalam Profil blog
Cara Membuat Author Box Simple
Buka Blogger > Dashbord > Theme > Edit HTML
Salin kode script ini dan letakan dibagian kode penutup diatas </body>
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
Apabila sudah terpasang kode FontAwosome didalam template kamu, bisa lewati cara diatas tadi.Salin Kode CSS dibawah ini
/* AUTHOR POST PROFILE BY RIANSEO */
.author-profile {
overflow: hidden;
margin-bottom: 10px;
padding: 24px;
line-height: 1.5;
border: 1px solid #ededed;
}
.author-profile-url {
font-size: 11px;
font-style: italic;
line-height: 21px;
margin-bottom: 6px;
}
.author-profile-url a {
color: #444444;
}
.author-profile-url a:hover {
color: #2ec4f2;
}
.author-profile img {
border: 0;
padding: 2px;
width: 96px;
float: left;
margin-right: 15px;
}
.author-profile > span {
font-size: 14px;
color: #222;
}
.author-profile a.g-profile {
font-weight: 500;
color: #333333;
font-size: 15px;
margin-bottom: 5px;
display: inline-block;
}
.author-profile a.g-profile:after {
content: "\f058";
font-family: FontAwesome;
font-style: normal;
font-weight: 700;
font-size: 12px;
text-decoration: inherit;
padding-right: 4px;
color: #55ACEE;
}
.web-author-url a:hover, .author-profile a.g-profile:hover {
color: #0066cc;
}
.web-author-url {
font-size: 11px;
font-style: italic;
line-height: 21px;
margin-bottom: 6px;
}
.web-author-url a {
color: #444;
}
.author-social {
margin-bottom: -5px;
}
.social-links li {
list-style: none!important;
float:left;
}
.social-links a {
border-bottom:none;
}
.social-links li a {
font-size: 18px;
color: #222;
width: auto;
min-width: 18px;
height: auto;
margin-right: 15px;
}
.social-links li a:hover {
color: #666666;
}
.social-links li a.fcb:hover {
color:#3b5998;
}
.social-links li a.twt:hover {
color:#1BB2E9;
}
.social-links li a.ytb:hover {
color:#ED3F41;
}
.social-links li a.wa:hover {
color:#25d366;
}
.social-links li a.igicon:hover {
color:#527fa4;
}
@media only screen and (max-width:800px) {
.author-profile img {
width: 76px;
float: none;
margin: 0;
text-align: center;
}
.author-social, .author-profile {
text-align: center;
}
.social-links li {
display: inline-block;
float: none;
}
Letakan kode CSS tadi tepat dibagian atas kode </style> atau <b/skin>Setelah itu, salin lagi kode HTML dikotak bawah ini.
<div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'> <b:if cond='data:post.authorPhoto.url'> <img expr:src='data:post.authorPhoto.url' itemprop='image' width='90px'/> </b:if> <div> <a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'> <span itemprop='name'><data:post.author/></span> </a> <div class="web-author-url"><a href="https://www.blogger.com">https://www.blogger.com</a></div> </div> <span itemprop='description'><data:post.authorAboutMe/></span> <div class='author-social'> <span class='social-links'> <li><a class='fcb' href='https://www.facebook.com/#' rel='nofollow' target='_blank' title='Facebook'><i class='fa fa-facebook'/></a></li> <li><a class='twt' href='https://twitter.com/#' rel='nofollow' target='_blank' title='Twitter'><i class='fa fa-twitter'/></a></li> <li><a class='wa' href='https://fortal123.blogspot.com' rel='nofollow' target='_blank' title='Vimeo'><i class='fa fa-vimeo'/></a></li> <li><a class='igicon' href='https://google.com' rel='nofollow' target='_blank' title='VKontake'><i class='fa fa-vk'/></a></li> <li><a class='ytb' href='https://www.youtube.com/#' rel='nofollow' target='_blank' title='Youtobe'><i class='fa fa-youtube'/></a></li> </span> </div> </div>
Letakan kode HTML ini dibagian <div class='post-footer'>, biasanya setiap template blogger berbeda-beda cari saja yang mirip seperti kode <div class='post-footer'>.
Pengaturan Wigdet Author Box Blogger
- Ubah alamat link yang sudah saya beri tanda dengan alamat kamu
- Untuk menggubah icon sudah saya beri tanda merah, dan kamu bisa gunakan ikon FontAwosome
Selanjutnya tinggal kamu klik SIMPAN dan lihat hasilnya.
Demikian tips singkat yang bisa saya sampaikan dalam tulisan kali ini yang berjudul Author Box Simple Blogger, Jika ada pertanyaan maupun langkah yang kurang kamu mengerti silahkan tinggalkan komentarnya.
4 komentar untuk "Cara Membuat Author Box Simple Blogger by Rian SEO"
Kami memiliki kebijakan dalam berkomentar di Blog ini :
— Dilarang promosi suatu barang
— Dilarang jika memasang link aktif di komentar
— Dilarang keras melakukan promosi iklan
— Dilarang menulis komentar yang berisi sara, bully atau cemuhan
NB :Komentar yang melanggar tidak akan ditampilkan
Kebijakan komentar yang bisa Anda temukan selengkapnya disini
Dukungan :
Jika menyukai dengan artikel blog kami, silahkan Ikuti blog ini
cek
BalasHapusrequest cara membuat kolom kebijakan dalam berkomentar seperti boshjn.id dong
BalasHapusSetelan > Postingan, komentar, dan berbagi > Pesan Formulir Komentar
HapusIsi dengan tulisan yang kamu inginkan.
Lalu klik " SIMPAN "
Cool
BalasHapus