Cara Membuat Author Profile Responsive di Bawah Postingan Blogger


TongkolPedia - Author Profile merupakan salah satu widget di Blogger yang berfungsi untuk menampilkan penjelasan singkat mengenai pemilik atau penulis pada blog tersebut. Kini sudah banyak author blogger yang menggunakan widget author profile ini pada blog mereka masing-masing.

Bagi kamu yang belum memasang widget ini pada blognya, saya sarankan untuk memasangnya. Hal ini karena agar para pembaca mengetahui bahwa kamulah pemilik atau penulis artikel pada blog tersebut. Bagi kamu yang penasaran bagaimana cara memasang widget author profile ini di bawah postingan blogger, silahkan cek tutorial yang akan dibahas TongkolPedia kali ini.

Cara Membuat Author Profile Responsive di Bawah Postingan Blogger

  • Silahkan masuk ke akun Blogger kamu masing-masing.
  • Klik Tata Letak - Blog Posts - Edit.
  • Scroll kebawah hingga menemukan pilihan Tampilkan Profil Pengarang Di Bawah Post. Silahkan klik Centang pada kotak tersebut. Klik Simpan dan jangan lupa juga klik Simpan setelan.
  • Masuk ke halaman Tentang Saya di Google+.
  • Klik tombol Plus (+) pada pojok kanan bawah halaman tersebut. Kemudian, klik pilihan Cerita.
  • Silahkan isi Semboyan dan Perkenalan kamu. Setelah itu klik Oke.
  • Pada keadaan default, perkenalan yang sudah kamu tulis itu bersifat Pribadi. Silahkan klik icon gembok, kemudian pilih Publik
  • Silahkan kamu cek blog kamu, apabila masih belum tampil silahkan buka Blogger - Tema - edit HTML.
  • Salin kode dibawah ini.
<b:if cond='data:post.authorAboutMe'>
<div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<b:if cond='data:post.authorPhoto.url'>
<img alt='author profile' expr:src='data:post.authorPhoto.url' itemprop='image' title='author profile' 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>
<span itemprop='description'><data:post.authorAboutMe/></span>
</div>
</b:if> 
  • Tempelkan kode ini tepat dibawah kode <data:post.body/>. Biasanya ada 1 hingga 3 kode yang seperti ini. Silahkan kamu tempelkan kode tadi pada <data:post.body/> yang pertama. Apabila belum muncul, tempelkan kode tadi ke <data:post.body/> yang terakhir. 
  • Agar tampilannya tampak lebih bagus, silahkan salin kode ini dan tempelkan diatas kode ]]></b:skin> atau </style>.
/* Author Profile */
.author-profile {
    overflow: hidden;
    margin: 30px 0;
    line-height: 1.5;
}
.author-profile img {
    border: none;
    float: left;
    margin-right: 15px;
    border-radius: 46px;
}
.author-profile > span {
    font-size: 14px;
    color: #888;
}
.author-profile a.g-profile {
    font-weight: 500;
    color: #444444;
    font-size: 18px;
    margin-bottom: 5px;
    display: inline-block;
}
.author-profile a.g-profile:hover {
    color: #49ACE1;
}
.author-profile a.g-profile:after {
    content: "f058";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    padding-right: 4px;
    color: #49ACE1;
}
  • Klik Simpan tema.
  • Silahkan kamu ke halaman blog kamu. Apabila tanda centang biru tidak muncul, silahkan tambahkan kode Font Awesome ke Blog kamu. Caranya, salin kode dibawah ini dan tempelkan di atas </body>.
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

  • Klik Simpan tema.
  • Jika sudah, maka tampilannya akan menjadi seperti ini.



Penutup

Demikianlah pembahasan mengenai cara untuk membuat Author Profile pada bawah postingan kmau di Blogger dengan mudah. Apabila ada yang ingin ditanyakan, silahkan tanyakan langsung di kolom komentar dibawah ini atau melalui Live Chat. Semoga infromasi kali ini bermanfaat bagi kamu.

0 Response to "Cara Membuat Author Profile Responsive di Bawah Postingan Blogger"

Post a Comment

- Mohon Berkomentar Dengan Wajar
- Dilarang Menyertakan Link Aktif Maupun Tidak Aktif
- Dilarang Berkomentar Dengan Unsur Pornografi, Sara, Promosi Dan Hal-Hal Yang Bertentangan Dengan Hukum Yang Berlaku


Jika ada hal-hal yang tidak pantas atau bertentangan, Saya selaku pengurus Blog ini tidak segan segan menghapus Komentar Anda.
Terima Kasih!!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel