Home » » Cara membuat author dibawah posting blog

Cara membuat author dibawah posting blog

Posted by Marinir seo

Cara membuat author dibawah posting blog. Dengan menambahkan author atau profil penulis blog. Maka pengunjung akan lebih mudah untuk mengenali pemilik/penulis dari blog yang sedang dibacanya. Contoh gambar bisa lihat dibawah ini.

Cara membuat author dibawah posting blog
Untuk lebih jelasnya tentang cara membuat author dibawah posting blog. Ikuti langkah-langkah dibawah ini.

    Login keblogger, pilh pengaturan template.
    Klik edit HTML dan cari kode <data:post.body/> lalu masukan kode ini dibawahnya.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='gambar'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLL-dIjuQ1Gmtn1Tr7K8xSZ9SGERG4VvogkbEFBHb9-rsY4a3830KI0wifgZxXb-WU_TMK-sAfIW86wPQZgaZvh4xOoBtBs0EGYCh9SYduqihdN2DmwysvIn5cuTDFJg-Y7J9OpXlJ8l0e/s361/Fandra%2520Juani.jpg'/>

    <div class='Penulis'>
    <span>Penulis : <a href='http://fandrajuani.blogspot.com/p/blog-page_25.html'><d>F</d><g>a</g><h>n</h><i>d</i><j>r</j><k>a</k> <l>J</l><m>u</m><n>a</n><o>n</o><r>i</r></a></span>

    <div class='keterangan'>
    <span>Ada Pertanyaan tentang artikel diatas, silakan masukan komentar dibawah. </span>

    <div class='terimakasih'>
    <span>Terima Kasih Atas Kunjungannya. Assalamualaikum wr.wb.</span>
    <div style='clear:both;'/>
    </div></div></div></div></b:if>
    <div style='clear: both;'/>
    </div>
    Kode <data:post.body/> di template blog, biasanya ada 3, masukan kode langkah 2, di bawah kode <data:post.body/>, ketiga2nya.
    Selanjutnya, cari kode ]]></b:skin> lalu masukan kode ini didalamnya.
    .gambar {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRH9ivZg03qeDV4OOrEn-z25FIU8RyZ6D4VyTOIJYaDbrujS9NACC9mhxNY8zZ4asNK5FxhHANaNR2y_wf0_jaWXcNZHBwEMyOo9XEtv896c5izMspW3XG2gTpvR95NPMDt47S73IpyNEc/s1600/gt.jpg) repeat-x top center;
    box-shadow:0px 1px 10px #aaaaaa;
    border:2px solid #eeeeee;
    padding:0;
    margin:10px 0;
    font:bold 12px Arial,Sans-Serif;height:100px;}

    .gambar img{
    width:70px;
    height:70px;
    margin:10px;
    float:left;
    padding:4px;
    background:#ffffff;
    border:1px solid #dddddd;
    position: relative;
    -moz-transition:all .4s ease-in-out;;
    -ms-transition:all .4s ease-in-out;;
    -o-transition:all .4s ease-in-out;;
    -webkit-transition:all .1s ease-in-out;
    transition:all .4s ease-in-out;}

    .gambar img:hover{
    -o-transform: scale(1) rotate(720deg);
    -moz-transform: scale(1) rotate(720deg);
    -webkit-transform: scale(1) rotate(720deg);}

    .Penulis{
    float:left;
    margin:10px 0px 0px 0px;
    text-shadow: 2px 2px 5px #107cde;
    font-weight:bold;color:white;}
    d{font-size:180%;color:DarkCyan}
    g{color:red}
    h{color:blue}
    i{color:#ee3e80}
    j{color:pink}
    k{color:black}
    l{font-size:180%;color:violet}
    m{color:DarkCyan}
    n{color:blue}
    o{color:pink}
    r{color:red}

    .Penulis a{
    text-transform:uppercase;
    font-family:Ravie;
    font-size:12px;
    text-shadow:2px 2px 5px #1780dd;
    font-weight:bold;padding:0}

    .keterangan{
    padding:15px 0px 0px 0px;
    color:white;font:italic 12px Arial, Sans-Serif;
    text-shadow: 2px 2px 5px #107cde;font-weight:bold;}

    .terimakasih{
    margin:13px 0px 0px 150px;
    font:italic 12px Arial, Sans-Serif;color:black;
    text-shadow: 2px 2px 5px #ffffff;}
    Save template, selesai.

Keterangan kode langkah 2:

    Gambar untuk memasukan foto yang akan kita gunakan sebagai profil author.
    Penulis isi dengan nama kamu, tulisannya saya buat dengan warna yang berbeda disetiap hurufnya. Untuk penjelasannya baca diartikel tulisan dengan warna yang berbeda.

Keterangan kode langkah 4:

    Gambar untuk memberikan background disemua tulisan. Height nya saya atur 100px bisa anda ganti sesuai dengan keinginan anda.
    .gambar img{ untuk mengatur ukuran gambar profil author dan juga tambahan kode gambar berputar.
    .gambar img:hover{ gambar akan berputar ketika disentuh mouse. Penjelasannya baca di artikel cara membuat gambar berputar diblog
    .Penulis a{ untuk mengatur font atau jenis tulisan nama author.
    .keterangan{ jika menggunakan keterangan yang panjang. Hapus kode float:left; yang ada di kode .Penulis{ agar keterangan tetap berada disamping gambar profil.

Silakan diubah sesuai dengan keinginan anda sendiri. Dan baca juga artikel tentang cara membuat tanda penulis dikotak komentar blog, agar terlihat berbeda dengan komentar dari pengunjung, sehingga orang bisa membedakan mana pengunjung, mana penulis blog. Semoga Bermanfaat.


0 komentar:

Posting Komentar

KONTAK KAMI
Call me Please 24 Hours Nonstop :

085.635.945.40 | 0822.3015.1650

Call me Please 24 Hours Nonstop : 085 635 945 40


mr.ghendoet@gmail.com mrghendoet@yahoo.com
Diberdayakan oleh Blogger.

Alamat

Jl. Imam Bonjol Rt 14/Rw 3 Ds Sukonolo Kec. Bululawang Kab. Malang – Jawa Timur – Indonesia

Bantal Silikon

Promo BANTAL GULING SILIKON MURAH :

Dari Harga Normal,
DISKON 5rb /pcs Bila ambil 15-30 Bantal,
DISKON 10rb /pcs Bila Ambil 30-50 Bantal

klik disini