16 April 2015

Membuat Kotak Author Blog Dibawah Postingan


Siomponk.Com - Dalam sebuah blog, khususnya blog organisasi atau sekolah kadang terdapat beberapa penulis dalam blog tersebut, tetapi ada beberapa blog yang hanya ditulis manual tentang si penulis.
Misalkan:
- Ditulis oleh Anu
- Posted by Anu

Ada baiknya terdapat widget dimana menerangkan tulisan tersebut ditulis oleh siapa, beserta avatar atau photo profilnya. Seperti pada gambar diatas tersebut atau dibawah ini.







Sebelumnya settinglah seperti pada gambar dibawah ini pada blog anda.
1. Menuju menu Tata Letak


2. Pilih Edit pada Blog Post, lalu tandai pada bagian "Tampilkan Profil Pengarang..."


Adapun cara Membuat Kotak Author Blog Dibawah Postingan adalah sebagai berikut.
  1. Menuju ke Dashboard > Template
  2. Pilih Edit HTML
  3. Backup template blog anda terlebih dahulu
  4. Cari kode ]]></b:skin>
  5. Letakkan kode berikut ini tepat DIATAS kode ]]></b:skin>
    /* Kotak Author */
    .aadmin{display:block; width:auto; background:#d14836; border:5px solid #983f33; padding:0; margin:10px 0 0px; font:normal 12px Arial,Sans-Serif; color:#efedfa} .aadmin .isi{padding:5px} .aadmin .isi a{color:#eee} .aadmin .isi a hover{color:#222} .aadmin h4{ border-bottom:1px dashed #d4cffd; color:#ddd; text-transform:normal; text-shadow:0 1px 0 rgba(0,0,0,0.4); font:16px Oleo Script Swash Caps; padding:3px 0; margin:0 10px; display:block} .aadmin h4 a{color:#eee} .aadmin img{width:70px; height:70px; margin:0 10px 0 0; float:left; padding:4px; background:#fccbc5;}
    Keterangan:
    Warna diatas bisa anda rubah sesuai keinginan anda
  6. Kemudian cari kode <data:post.body/>
  7. Letakkan kode berikut ini DIBAWAH kode <data:post.body/>
    <div class='aadmin'>
    <h4>Written by : <span class='author-name'><a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><data:post.author/></a></span> - Part Time Blogger </h4>
    <div class='isi'>
    <img alt='author-photo' expr:src='data:post.authorPhoto.url' itemprop='image'/>
    <span itemprop='description'><data:post.authorAboutMe/></span>
    <p><span style='float:left;text-align:left;'>
    <b>Follow On :</b> <a href='http://www.facebook.com/SiomponkCom' rel='nofollow'>Facebook</a> | <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>Google+</a> | <a href='http://www.blogger.com/follow-blog.g?blogID=3326723616985932221' onclick='window.open(this.href, &apos;&apos;, &apos;toolbar=O,scrollbars=1, titlebar=1, location=0,statusbar=1,menubar=0,resizable=0,width=530,height=520,top=150,left=300&apos;); return false;' title='Follow this blog'>Blogger</a></span>
    <span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://www.siomponk.com/2015/04/membuat-kotak-author-blog-dibawah.html' target='_blank'>- Get This Widget -</a></span></p>
    <div style='clear:both;'></div>
    </div>
    </div>
    Keterangan:
    - http://www.facebook.com/SiomponkCom = ganti dengan alamat facebook anda
    - blogID=3326723616985932221 = ganti dengan ID blog anda
    - Untuk merubah diskripsi dan foto, anda harus meng-edit profil Google+ anda
Untuk berubah warna, anda bisa menuju halaman HTML Color pada blog ini.

Demikianlah postingan saya kali ini tentang Cara Membuat Kotak Author Blog Dibawah Postingan, dan semoga postingan ini dapat bermanfaat untuk anda.
Salam...
Previous Post
Next Post

Hal terpenting dalam pacaran adalah bukan dari Perbedaan Umur...
Tapi yang terpenting adalah Perbedaan Kelamin...

0 komentar:

PERATURAN BERKOMENTAR:

- Gunakan BAHASA yang baik dalam berkomentar
- Dilarang SPAM dalam berkomentar
- Dilarang SARA dan SARU dalam berkomentar
- Dilarang OOT dalam berkomentar

Jika terdapat hal demikian pada komentar anda, kami akan menghapus komentar anda tersebut.