Penulis: Moch Adnan dipublikasikan: 1 Mei 2019
Cara Menampilkan Profil Penulis Di Setiap Posting Blog Blogger
Cara Menampilkan Profil Penulis Di Setiap Posting Blog Blogger


Cara Menampilkan Profil Penulis Di Setiap Posting Blog Blogger - Ingin mencoba custom profil penulis ini disetiap postingan blog? Mari kita praktek bersama, hingga sampai terpasangnya widget custom profil penulis pada setiap postingan blog blogger sobat.

Sebenarnya banyak sekali template - template gratisan yang bisa dicari lengkap dengan kolom profil penulisnya, contoh seperti yang terdapat dalam template berikut: MINI BOX
Dengan menggunakan template seperti itu, maka hanya dengan mengedit sedikit halaman profil penulis blog, lalu bisa langsung narsis profil penulis disetiap akhir artikel blog.

Namun karena ingin belajar serta coba untuk lebih memahami HTML akhirnya lebih baik buat sendiri saja ya ! Bagus dan tidaknya bisa ditentukan saat akhir pengerjaannya nanti.

Cara Menampilkan Profil Penulis Di Setiap Posting Blog Blogger


Login kedalam dashboard blog. Setelah itu pilih menu "Tema"
Lakukan backup/mendownload terlebih dulu template blog sobat, cara ini bertujuan guna mengantisipasi jika terjadi error' pada hasil editan dan anda masih memiliki template yang aslinya.
dan lanjutkan dengan memilih menu "Edit HTML" 

Cara Menampilkan Profil Penulis Di Setiap Posting Blog Blogger
Gambar01

Jika sudah terbuka keseluruhan kode html pada template sobat, seperti yang terlihat dalam gambar di atas, selanjutnya adalah mencari kode yang mirip-mirip seperti ini dalam template blog :
]]></b:skin>

Copy dan paste kan kode dibawah ini tepat di atas kode tadi. 

/* Custom Author Profile by www.superwebtricks.com
----------------------------------------------- */
.swt-author {
margin: 1em 0;padding: .5em .25em;
background-color: #f1f4f8;
border: 5px solid #192a3e;
border-style: groove;
overflow: auto;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
transition:all .4s ease-in-out;
}
.swt-author:hover {
color:#ffffff;background-color: #192a3e;
border: 5px solid #1ABC9C;
border-style: outset;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
transition:all .4s ease-in-out;
}
.swt-author:hover img {
border: 2px solid #1ABC9C;
border-radius:100px;
opacity:0.8;
filter:alpha(opacity=80);
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
transition:all .4s ease-in-out;
}
.swt-author profile {
font-family:"Times New Roman", Times, serif;
font-weight: normal;
padding:5px 0;
margin:0;
text-transform:auto;
line-height:24px;
word-wrap:break-word;
}
.swt-author profile info {
font-size: 12px;
text-align: justify;
font-family: 'Droid Serif', serif;
}
.swt-author profile img {
float: left;
margin: 5px;
width:100px;
border: 2px solid #192a3e;
border-radius:50px 0;
opacity:1.0;
filter:alpha(opacity=100);
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
/* Tutorial at: http://www.superwebtricks.com/?p=321 */}

Klik "Simpan" template.

Kedua, masih dalam menu edit HTML sekarang coba cari lagi kode yang mirip - mirip seperti ini :

<div class='post-footer-line post-footer-line-1'>

(Gunakan tombol ctrl + f untuk pencarian cepat)

Baca juga :

Jika sudah menemukannya sekarang copy lagi kode HTML dibawah ini, dan pastekan tepat dibawah kode: <div class='post-footer-line post-footer-line-1'> 

<b:if cond='data:blog.pageType == "item"'>
&lt;!—Custom Author Profile by www.superwebtricks.com --&gt;
<div class='swt-author'>
<b><u>About Author:</u></b>
<profile>
<img alt='author' src='https://lh6.googleusercontent.com/-LofL3EnbELo/AAAAAAAAAAI/AAAAAAAADvU/ED8fSbGJZT4/s120-c/photo.jpg'/>
<info> Write here the author short Bio or introduction. The author profile may be maximum 250-300 characters with spaces or 40-55 words long. <i><a href='#'>Read More</a></i>...</info>
&lt;/br&gt;&lt;hr&gt;
Join him on<a href='replace it with Google Plus profile url'>Google+</a> |
<a href=' replace it with Facebook profile url'>Facebook</a> |
<a href=' replace it with Twitter profile url'>Twitter</a>
</profile></div>
</b:if>


Catatan: Silahkan ganti pada masing-masing tulisan yang berwarna merah, dengan menggunakan photo serta link media sosial Anda.


Klik "Simpan" Template 
Demikian saja cara menampilkan profil penulis disetiap postingan blog blogger, selamat mencoba

Sumber kode : https://www.superwebtricks.com