1.5.19

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
Cara Menampilkan Profil Penulis Di Setiap Posting Blog Blogger - Apakah template blog Anda saat ini masih default atau bawaan dari blogget? Jika ya, sudah barang tentu dalam template tersebut Anda hanya bisa menampilkan profil penulis secara default juga. Lalu bagaimana jika Anda ingin melakukan custom profil penulis ini disetiap postingan blog Anda? Slow...disini 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 anda cari lengkap dengan kolom profil penulisnya, contoh seperti yang terdapat dalam template berikut: MINI BOX
Dengan menggunakan template seperti itu, maka Anda hanya ditugaskan untuk mengedit sedikit halaman profil penulis blog, lalu bisa langsung narsis eksis tuh profil penulis disetiap akhir artikel blog Anda.

Namun karena ingin belajar serta coba untuk lebih memahami HTML akhirnya lebih baik anda buat sendiri saja ya ! Bagus dan tidaknya bisa ditentukan saat akhir pengerjaannya nanti. Ok, cukuplah basa - basinya sekarang ayo kita mulai praktek saja.

Cara Menampilkan Profil Penulis Di Setiap Posting Blog Blogger


Pertama, Login terlebih dahulu kedalam dashboard blog. Setelah itu pilih menu "Tema"
Sekali lagi saya ingatkan untuk membackup/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, maka langkah selanjutnya adalah mencari kode yang mirip-mirip seperti ini dalam template blog :
]]></b:skin>
Sudahkah menemukannya? Ok, selanjutnya copy dan paste kan kode dibawah ini tepat di bawah kode tadi. Sehingga urutannya menjadi seperti berikut:
/* 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)

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

1 komentar:

Pertamax....diamankan

Silahkan tinggalkan komentarnya
Mohon untuk tidak memasukkan link hidup dalam berkomentar

 
Kesabaran dan ketawakalan adalah minyak pelumas bagi roda kehidupan
-Brown