Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Author Box Simple Blogger by Rian SEO

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.
Cara Membuat Author Box Simple Blogger by Rian SEO
Author Box Wordpress by Newspaper

Untuk versi Blogspot kamu bisa lihat contoh gambar dibawah ini.
Cara Membuat Author Box Simple Blogger by Rian SEO
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

Cara Membuat Author Box Simple Blogger by Rian SEO

Untuk menggatur atau menambah kata-kata ringkas di Profil Blogger, bisa kamu buka Pengaturan > User > Blogger


Cara Membuat Author Box Simple Blogger by Rian SEO
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"

  1. request cara membuat kolom kebijakan dalam berkomentar seperti boshjn.id dong

    BalasHapus
    Balasan
    1. Setelan > Postingan, komentar, dan berbagi > Pesan Formulir Komentar

      Isi dengan tulisan yang kamu inginkan.

      Lalu klik " SIMPAN "

      Hapus

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