Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan

Cara Membuat Banner Animasi

Cara membuat banner animasi – banner animasi terkadang lebih menarik perhatian bila di bandingkan dengan banner biasa yang diam dan statis. Oleh karenanya banyak para pebisnis online lebih suka menggunakan banner animasi untuk sarana promosi produk ataupun jasa yang mereka miliki. Bagi mereka yang terlatih dalam menggunakan berbagai software design grahic tentu tidak ada masalah untuk membuat banner animasi, namun akan berbeda keadaannya bagi yang awam termasuk kang rohman.

Akan tetapi tentu banyak cara untuk mencapai sesuatu termasuk masalah pembuatan banner animasi. Untuk kita yang awam, banyak layanan online baik gratis ataupun berbayar yang bisa kita pergunakan. Banner animasi umumnya dibuat dalam file gambar berekstensi gif serta gambar dalam bentuk banner flash. Berikut beberapa contoh website yang menyediakan layanan membuat banner animasi : Gif Banner

  • http://picasion.com
  • http://www.loogix.com
  • http://www.createagif.net
  • http://gickr.com

Flash banner
  • http://www.123-banner.com
  • http://bannersabc.com
  • http://www.flashbannernow.com
  • http://www.quickbanner.com
  • http://www.flash-banner-maker-online.com

Cara membuat banner animasi

Sebagai contoh, kami akan bahas bagaimana cara membuat banner animasi berupa banner gif di http://picasion.com. Berikut adalah langkah-langkahnya :
  1. Buatlah 2 atau 3 buah banner misal ukuran 125x125 px. Contoh :
    banner animasi banner animasi banner animasi
  2. Silahkan kunjungi website http://picasion.com
  3. Klik tombol browse untuk memasukkan file banner membuat banner animasi
  4. Pilih ukuran banner yang sesuai dengan keinginan pada opsi Size.
  5. Pilih kecepatan animasi pada opsi Speed
  6. Klik tombol Create Animation
  7. Banner animasi anda telah dibuat. Contoh hasilnya :
  8. Anda dapat menyimpan file banner animasi tersebut, atau bisa juga menggunakan link yang di berikan.
  9. Selesai
Ah ternyata sangat mudah membuat banner animasi. Untuk selanjutnya anda dapat memasang gambar tersebut di blog anda. Semoga artikel tentang cara membuat banner animasi ini dapat bermanfaat bagi anda.
0 komentar
Label: , , ,

Membuat Artikel Terkait dengan Gambar / Thumbnail

Membuat Artikel Terkait dengan Gambar / Thumbnail. Artikel terkait atau related post atau mungkin artikel yang berhubungan, sama aja yah hehehe. Kali ini Blog Bamz akan sharing cara membuat artikel terkait dengan thumbnail setelah sebelumnya sudah posting cara membuat artikel terkait di sidebar blog. Ada 2 cara membuat artikel terkait dengan thubnail atau gambar, yang pertama menggunakan layanan online seperti linkwithin dll. Sedangkan yang ke 2 yaitu membuat artikel terkait dengan thumbnail secara manual. Disini saya akan sharing cara membuat artikel terkait dengan gambar secara manual.

Membuat Artikel Terkait dengan Gambar / Thumbnail

Membuat Artikel Terkait Dengan Thumbnail

  • Langkah pertama yaitu login ke blog anda > Design > Edit HTML > Centang expand widget templates.
  • Cari kode </head> dan kalau sudah ketemu silahkan paste kode di bawah ini tepat di atas kode </head>
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk-r1cfCKIpDAtfE2mSS5VhV1eofhO79n4uQE-m7Bvo4-3kgWl4zRnPODkSqtpYxkX-QyCiJQf7i94yaztu3JxEUsO5bJB3DncBpUpGkHJWWygDft64XJOVHekNkyt8sO8UvsVFIaqjC4/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Artikel Terkait Yang Mungkin Anda Cari";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Sekarang anda cari kode ini
<div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>
Nah kalau sudah ketemu, sekarang paste kode berikut di di bawah kode tadi
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>

Berikut ini adalah kode yang bisa anda ganti sebelum menyimpan template (ganti tulisan yang berwarna merah)

jumlah artikel terkait muncul
var maxresults=5;

Jumlah artikel terkait / label
max-results=6

Judul artikel terkait
var relatedpoststitle="Artikel Terkait Yang Mungkin Anda Cari";

Warna tulisan pada artikel yang terkait, silahkan anda ganti sesuai keinginan anda. Cari kode warna
var splittercolor="#d4eaf2";

Nah kalau sudah selesai anda bisa klik save template dan selesai :).

Artikel Terkait dengan Gambar / Thumbnail ini hanya muncul pada halaman posting, jika anda ingin Artikel Terkait dengan Gambar / Thumbnail ini muncul di semua halaman blog, anda bisa menghapus kode
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> dan <!-- remove --></b:if>

Artikel ini dipelajari dari Bloggerplugins dengan sedikit modifikasi
0 komentar
Label: , ,

Cara Mengubah Tampilan Kursor Blog

Secara default, tampilan cursor pada blog adalah berbentuk panah namun bagi anda yang merasa bosan dengan tampilan tersebut atau ingin memberi decak kagum bagi pengunjung. Anda bisa menggantinya dengan icon gambar sehingga jika ada pengunjung yang datang ke blog anda, tampilan kursornya akan berubah sesuai dengan icon yang anda gunakan. Agar lebih jelas anda bisa lihat disini.

Untuk mengubah tampilan kursor menjadi icon gambar, caranya sangat mudah. Berikut langkah-langkahnya:

1. Login ke Blogger. Masuk ke menu Design->Edit HTML
2. Cari kode </head>
3. Letakkan kode css berikut diatasnya


<style type="text/css">
HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/thumbnails/cool1.gif"), auto;}
</style>


Keterangan :
Teks yang berwarna merah adalah alamat url kursor. Silahkan ganti dengan alamat url kursor yang ingin anda gunakan.

4. Setelah itu, simpan template anda. Selesai

Jika anda tidak memiliki icon kursor, coba kunjungi http://www.totallyfreecursors.com. Situs tersebut menyediakan ratusan hingga ribuan icon kursor menarik yang bisa anda pilih sesuai selera.

Baca Juga Artikel Terpopuler :
0 komentar
Label: ,

Situs Edit Foto Online Yang Menarik

1. Photofunia
Kita bisa mengedit foto suka-suka di website ini dengan fitur-fitur yang ada. Disediakan banyak bingkai/frame yang dapat dipilih menurut keinginan. Dengannya kita dapat membuat efek seolah-olah foto kita dipasang di sebuah gedung, papan reklame, majalah, botol dan lain-lain.

2. Faceinhole
FACEinHOLE menyediakan layanan web yang membuat foto penggunanya dapat menjadi tokoh-tokoh yang disukai. Setelah jadi hasilnya dapat kita posting ke berbagai situs sosial network atau blog semacam friendster, myspace, blogger dan lain-lain.

3. Pizap
Pizap merupakan salah satu situs edit photo yang paling gokil menurutku. Pilihan frame yang disediakan lucu-lucu.Di situs ini kita bisa edit dan menambah effect, pernak pernik, teks bahkan menambahkan ekspresi wajah.

4. Picnik
Situs ini menyediakan layanan gratis maupun yang berbayar.Untuk yang versi gratis kita bisa memanfaatkan fitur-fitur seperti tools efek, shapes, fonts, frames dan touch up.Sedang untuk yang premium atau yang berbayar selain dapat menikmati semua fasilitas dari versi gratisan dan bebas iklan, juga dilengkapi dengan tool spesial baru bernama Advanced Editing, koneksi tanpa batas ke semua situs photo sharing favorit, dukungan prioritas, memori foto dan photo histori tanpa batas, serta konten eksklusif dan preview dari fitur-fitur baru.

5. Pixenate
Memiliki fitur zooming, enhancing dan cropping, resizing, whitening, red eye, sepia, fun effect dan banyak lagi.

6. Festisite
Mampu menaruh wajah kita pada mata uang dari berbagai negara.

7. Funny pho.to
Mirip dengan photofunia hanya dengan template yang berbeda yang lebih lucu.

8. Fakemagazinecover
Template yang disediakan untuk mengedit foto kamu adalah cover majalah dengan beraneka pilihan.

9. Makemebabies
Situs karena bisa memprediksi wajah bayi yang akan dilahirkan oleh sepasang suami istri. Jika kamu berniat akan memiliki anak tak ada ruginya mengupload foto kamu dan pasangan lalu lihatlah seperti apa wajah bayi yang akan kalian lahirkan nantinya.

10. Hairmixer
Sebelum pergi ke salon coba dulu bagaimana penampilanmu jika memakai potongan rambut seperti yang dimiliki para selebriti.
0 komentar
Label: ,

Hanya Menampilkan Judul Posting ketika Label di klik

Login ke Blogger klik Rancangan klik Edit HTML klik tulisan Download Template Lengkap
Beri tanda centang pada kotak di samping tulisan Expand Template Widget
lalu cari kode berikut ini:

<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
</div>

Kalau sudah ketemu ganti kode yang berwarna biru dengan kode berikut

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya
Baca Juga Artikel Terpopuler :
0 komentar
Label: ,

Hilangkan Tulisan Tampilkan entri lawas

Login ke Blogger klik Rancangan klik Edit HTML

Beri tanda centang pada kotak di samping tulisan Expand Template Widget.
Kemudian cari kode berikut ini:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Kalau sudah ketemu ganti kode di atas dengan kode berikut

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya
Baca Juga Artikel Terpopuler :
0 komentar
Label:

Menampilkan postingan hanya judulnya saja

Login ke Blogger klik Rancangan klik Edit HTML klik tulisan Download Template Lengkap.

beri tanda centang pada kotak di samping tulisan Expand Template Widget.
Lalu anda cari kode ]]></b:skin>

Kalau sudah ketemu copy kode berikut, lalu paste di bawah kode ]]></b:skin>

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body{display:none;}
</b:if>
</b:if>
</style>

Jika sudah selesai SIMPAN TEMPLATE.
Tapi kode diatas masih menyisakan beberapa elemen seperti tanggal posting, komentar dan yang lainnya.  Jika anda ingin menghilangkan semuanya dan yang tersisa hanya judul postingnya saja, gunakan kode berikut :

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body, .post-footer, .jump-link,
.post-timestamp, .reaction-buttons,
.star-ratings, .post-backlinks,
.post-icons, .date-header{display:none;}
</b:if>
</b:if>
</style>

Jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya.
Baca Juga Artikel Terpopuler :
0 komentar
Label:

Cara Memasang Scroll pada Arsip

Berikut cara membuatnya :

Login ke Blogger
Klik Rancangan → Edit HTML
Klik tulisan Download Template Lengkap
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula

Beri tanda centang pada kotak di samping tulisan Expand Template Widget

Kemudian cari kode seperti berikut :
Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3)


<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>

Jika sudah ketemu hapus semua kodenya dan ganti dengan kode dibawah ini :

<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' style='overflow: auto; width: 100%px; height: 200px; padding: 10px; border: 1px solid #000000; background-color: #ffffff;'>
<div id='ArchiveList'>

Keterangan : kode yang berwarna biru bisa sobat ganti sesuai dengan Template sobat.
jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya
Baca Juga Artikel Terpopuler :
0 komentar
Label:

Cara Menampilkan Judul Postingan Saja di Homepage

Cara Menampilkan Judul Postingan Saja di Homepage dengan Auto Read More,
Judul panjang tak masalah lah ^_^) . . . masih ingat cara membuat Auto Readmore ?

Baca dulu Gan : Cara Membuat Auto Read More 
yuk mari ke ide postingan saya ( tutorial bagi yang sudah pasang AUTO READMORE )
  • Masuk ke blogger
  • Pilih Design/Rancangan
  • Pilih Edit HTML
  • Cari kode noimg , misalnya ketemunya seperti ini
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height =120;
img_thumb_width =120;
</script>
  • Nah, ketemu noimg , terus jadikan nol semua, seperti ini,
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 0;
summary_img = 0;
img_thumb_height =0;
img_thumb_width =0;
</script>
  • Simpan, dan selesai. 
Nah, untuk menghilangkan tulisan "READMORE" :
  • Centang expand Widget template
  • Cari kode <data:post.body/>
  • Nanti akan ada 2 kode tersebut, misalnya kodenya seperti ini
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
  • Hapuslah kode biru nya. Sehingga tulisan "READMORE" akan hilang
Untuk menghilangkan ( . . . )
  • Cari saja ... (tiga titik), misal kodenya seperti ini nanti,
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
  • Titil-titik yang warna kuning dihapus
  • Selesai 
Untuk Judul Rata Tengah
  • Cari Kode h3 ,misal 
h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color);
}
  • Tambahkan kode text-align:center; dalam kode di atas, seperti ini, 

h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color); text-align:center; 
}
  • Simpan
0 komentar
Label:

Cara Membuat Daftar Isi di Blogspot

Cara Membuat Daftar Isi di Blogspot
Baiklah, tanpa banyak basa-basi langsung saja kita ke pokok pembahasannya yaitu Cara Membuat Daftar Isi di Blogspot, mudah-mudahan tips ini bisa bermanfaat buat sobat-sobat semuanya yang sedang mencari tutorial untuk membuat daftar isi di blogspot.

1. Login ke account blogger
2. Pilih "Rancangan" kemudian pilih "Tambah Gadget"
3. Pilih Html/Javascript
4. Masukkan judul yang ingin anda buat misalnya "Daftar Isi" pada kolom "Judul"
5. Copy kode dibawah ini, kemudian masukkan ke dalam kolom "konten".

<div style="overflow:auto;width:430px;height:120px;padding:10px;border:1px solid #eee"><script style="text/javascript" src="http://sites.google.com/site/barajajs/listofcontent/contents.js"></script><script src="http://namablog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
</div>

6. Simpan.

Keterangan :
http://namablog.blogspot.com = ganti dengan nama blog anda
width;430px = ganti lebar sesuai dengan selera sobat masing-masing
height;120px = ganti tinggi sesuai dengan selera sobat masing-masing
0 komentar
Label:
 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Oke Google - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger