Cara Membuat Author Box di Blogger | Keterangan di Bawah Postingan Blog

Cara Membuat Author Box di Blogger | Keterangan di Bawah Postingan Blog - Author box atau kotak berisi tulisan atau keterangan di bawah postingan blog lagi ngetren. Bagaimana cara membuatnya?

1. Login ke blog anda
2. Masuk Layout, Edit HTML, centang Expand widget template.
3. Cari kode ]]></b:skin>
4. Masukkan kode di bawah ini sebelum kode ]]></b:skin>; tadi

.admin-tulisan{
display:block;
width:auto;
background:#CFE2E0;
border:2px solid #fff;
box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-

webkit-box-shadow:0 1px 3px #000;
padding:0;
margin:30px 0 10px 0;
font:normal 12px Arial, Sans-Serif;
color:#222;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#8A9C04;
border:none;
border-bottom:1px solid #699019;
color:#fff;
text-transform:normal;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
font:bold 12px Arial,Sans-Serif;
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#FEEA83;}
.admin-tulisan img{
width:70px;
height:70px;
margin:0 10px 0 0;
float:left;
border:1px solid #954B02;
padding:2px;
background:#C36702;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}

5. Cari kode <div class='post-footer-line post-footer-line-1'>
6. Masukkan kode di bawah ini setelah kode <div class='post-footer-line post-footer-line-1'> tadi.

<!—Author Box-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> Blogspotcorner</h4>
<div class='kontainer'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8UToEu5aH-r6Zk75ky9a5cMeylRapH3SvgDWzshM0GvqxRO7ZNyIMp2ZefDZi0ZYWkq8znWE-mZ4tkxOpOmQnEaYhrxJW7wbUH3-AAOL5T3qzpmQG66Y0qRaFBBaoTA80xuutV7LbZN2m/s400/banner.jpg'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> ini

diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>.

Jika artikel <a expr:href='data:post.url'><data:post.title/></a> ini dirasa menarik, anda bisa sebarluaskan lewat blog anda, tapi mohon mencantumkan sumbernya. Terimakasih. Happy blogging.

<p><span style='float:right;font:italic 10px Arial, Sans- Serif;'/></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!—Author Box -->

7. Simpan, selesai.

NB:
- Ganti Blogspotcorner dengan nama blog anda
- Anda bisa mengganti kalimat ‘Jika artikel ini dst…’ sesuai selera
- Ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8UToEu5aH-r6Zk75ky9a5cMeylRapH3SvgDWzshM0GvqxRO7ZNyIMp2ZefDZi0ZYWkq8znWE-mZ4tkxOpOmQnEaYhrxJW7wbUH3-AAOL5T3qzpmQG66Y0qRaFBBaoTA80xuutV7LbZN2m/s400/banner.jpg dengan URL foto/banner anda


Image and video hosting by TinyPic

Read More..


Cara Membuat Banner Animasi Online

Cara Membuat Banner Animasi Online - Sering lihat banner animasi dengan ekstensi gif? Banner seperti itu bisa dibikin secara online, gratis lagi. Cara membuat banner animasi sangat mudah.
Sebenarnya banyak website penyedia layanan pembuatan banner animasi. Tapi saya merekomendasikan Picasion.

Cara membuatnya:

1. Buat 2 atau 3 banner dengan Photoshop atau sejenisnya

2. Buka http://picasion.com

3. Klik ‘Pilih Berkas’ untuk mengupload gambar
.
4. Ulangi cara no.3 untuk upload gambar yang lain.

5. Pilih size dan tingkat kecepatan geraknya.

6. Klik ‘Create animation’.

7. Akan muncul kode HTML yang siap dipasang di blog.

Contoh: Saya bikin dua banner iklan keripik Mr. Bean





Setelah diupload dengan Picasion, hasilnya seperti ini:

make a gif online


Image and video hosting by TinyPic

Read More..