• pasang iklan

Cara membuat author Text dibawah posting blog

2017/2/9
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://lh4.googleusercontent.com/-n-7Ujm1j6nk/UYqhfNgBZcI/AAAAAAAAAQQ/nAaz8oHf4CM/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(http://3.bp.blogspot.com/-XQpNUW9Y0BQ/Und_bxqAsyI/AAAAAAAABKI/0xTMRKYDggw/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 评论:

发表评论


Pasang Iklan Baris Gratis Tanpa Daftar

Iklan Baris Gratis ini disediakan untuk anda sebagai pemilik usaha, barang dan jasa serta berbagai peluang bisnis dan peluang usaha supaya anda bisa menunjukkan - mempromosikan produk jasa anda kepada seluruh dunia di internet. Promosi merupakan darah bagi kelancaran bisnis anda... untuk itu silahkan datang sesering mungkin untuk mempromosikan dan pasang "Iklan Baris Gratis" anda di website ini.

Pasang Iklan Baris Gratis disini bisa untuk jenis iklan apa saja, misalnya: iklan rumah, properti, jasa, domain hosting, laptop komputer, villa, kendaraan motor mobil, handphone hp bekas baru, bisnis mlm, segala jenis barang dan jasa.

Pasang iklan Anda, Gratis sepuas-puasnya di seluruh network Kami yg lain:



Pelatihan Internet Marketing Malang dan sekitarnya akan mengajarkan Anda tentang peluang untuk memasarkan apapun secara online, dengan teknik yang paling sederhana.

Pasang IKLAN Yang SEGMENTED dan TARGETED
  • Iklan KHUSUS ke TARGET dan bahkan sampe target ke LINGKUNGAN/KELURAHAN.
  • Iklan Baris GRATIS Tanpa Daftar,alias GRATISSSSSS
  • iklan GRATIS Daftar
  •