Tutorial Gratis | Tips Gratis

Software Gratis Untuk Membuat Banner

Software gratis untuk membuat banner memang sangat banyak dan salah satunya yang akan kita bahas kali ini adalah softaware Easy GIF Animator. Software pembuat banner gratis ini memang sangat banyak kelebihannya di banding dengan software pembuat animasi yang lain.

Jadi jika sobat ingin membuat banner atau ingin membuat animasi yang keren, software Easy GIF Animator ini bisa menjadi salah satu pilihan. Adapun beberapa kelebihan dari Easy GIF Animator ini:

Mudah dalam membuat banner, animasi, gambar dan tombol.
Bisa membuat gambar GIF animasi dari awal.
Bisa mengedit dan memodifikasi gambar animasi GIF sobat.
Dapat menambahkan efek visual animasi GIF sobat.
Dapat membuat efek teks bergerak.
Dapat di pakai untuk mengoptimalkan animasi gambar GIF.
Gambar GIF animasi di web browser.
Bisa meresize seluruh animasi sekaligus.
Kita dapat mengelola frame animasi kita.
Kita bisa mengatur jumlah loop animasi dan durasi frame.
Ekstrak frame animasi terpisah.
Reverse GIF animasi atau hanya sebagian saja darinya.
Mudah dalam mengatur transparansi.
Bisa kita tambahkan suara ke animasi kita.
Simpan animasi dalam format Flash SWF.
Kita bisa mencari gambar dari Web untuk kita gunakan dalam animasi kita.
Kita bisa mengekspor GIF animasi kita ke dalam format AVI.
Kita bisa menggunakan gambar GIF, JPG, PNG dan BMP dalam animasi.
Setelah siap, akan menghasilkan HTML kode untuk animasi penerbitan di web atau blog kita.

Nah jika sobat sekarang ingin membuat banner atau animasi, softaware gratis untuk membuat banner dan animasi Easy GIF Animator ini bisa menjadi pilihan. Untuk mendapatkannya, silahkan download di sini.

Cara Membuat Menu Icon Social Media Melayang

04.39 Cara membuat menu icon social media melayang , Tutorial blogger No comments

Menu icon social media melayang yang sering kita lihat di blog-blog para mastah kita, kadang membuat kita iri melihatnya dan gimana cara membuatnya. Pengen rasanya menampilkan yang seperti itu di blog kita tapi kita gak tau cara membuatnya.
Untuk itu kali ini kita akan bahas cara membuat menu icon social media melayang yang bisa kita praktekkan di blogspot kita. Caranya:

Login ke dasbor blog sobat dulu.
Klik menu Rancangan.
Klik Edit HTML
Jangan lupa centang Expand Template Widget.
Lalu cari kode ]]></b:skin>
Terus copy kode di bawah ini dan taruh tepat di atas kode ]]></b:skin>

#socialLinks { float:right; height:151px; margin:0; padding:26px 0 0 8px; position:fixed; right:0; text-align:right; top:40%; width:50px; } #socialLinks a { display:block; float:left; padding-right:10px; border:none; } #socialLinks a img { border:medium none; margin:0 0 10px; }

Setelah itu cari lagi kode <body>, lalu copy paste kode di bawah ini tepat di bawah kode <body>

Keterangan:

Kode link yang berwarna pink di atas silahkan tukar dengan user name yang sobat pakai di masing-masing media tersebut.
Dan yang berwarna merah silahkan di tukar dengan alamat feed blog sobat.

Nah begitu dia cara membuat menu icon social media melayang yang bisa kita pasang di blog kita agar blog kita bisa bersaing dengan blog para mastah kita. Hahahahahahhhh...... :)

Cara Membuat Text Area Di Blog

08.22 Cara membuat text area di blog , Tutorial blogger No comments

Cara membuat text area di blog sebenarnya sangat gampang (bagi yang sudah tau), namun bagi blogger yang masih newbie pasti bingung tujuh keliling. :)

Oke kita gak usah berpanjang lebar lagi, langsung aja kita bahas tentang cara membuat text area di blog yang bisa di terapkan baik dalam postingan maupun di widget.

Cara pertama:

<p align="center"><textarea name="code" rows="5" cols="20"> ISI TEXT AREA </textarea></p>

Keterangan:
rows="5" adalah merupakan tinggi text area yang bisa dirubah dengan angka yang lebih besar atau lebih kecil.

cols="20" adalah merupakan lebar text area yang juga bisa dirubah lebih besar atau lebih kecil.

Cara Kedua
Cara kedua ini adalah merupakan cara membuat text area di blog dengan memakai HighLight

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55"> ISI TEXT AREA </textarea></p></div></form>

Keterangan:

<input onclick="javascript:this.form.txt.focus();this.form.txt.selec()"> ketika tombol highlight di klik, maka seluruh text yang ada di dalamnya akan di highligt (di tandai atau di blok), jadi tulisan ini gak boleh di rubah.
Value="Highlight All" kata Highlight All adalah kata yang akan muncul di dalam kotak tombol, jadi jika anda ingin merubah kalimat ini silahkan ganti dengan kata yang anda inginkan misalnya Klik di sini untuk mengcopy, dll.
Ukuran text areanya boleh di tukar sesuai keperluan.

Sekian dulu tutorial cara membuat text area di blog yang bisa di pakai baik dalam postingan maupun di widget blog kita.

Cara Menampilkan Judul Posting Saja Ketika Label Di Klik

07.25 Menampilkan judul postingan saja ketika label di klik , Tutorial blogger No comments

Di blogspot kadang kita direpotkan kala kita mengklik label atau kategory blog karena semua postingan dalam label tersebut akan di urai dalam satu halaman yang panjang sekali. Dan tentu ini sangat menggangu loading blog yang begitu lama. Selain itu user juga bingung artikel mana yang di pilih karena banyak dan panjang sekali.

Nah untuk menghindari hal tersebut dan agar tampilan blog kita nampak rapi dan enak di pandang mata, maka kita bisa mengakali dengan hanya menampilkan judul postingan saja ketika label atau kategori di klik.

Berikut cara menampilkan judul postingan saja ketika label atau kategori di klik:

Pertama login dulu ke dasbor blog sobat.
Klik menu Rancangan.
Klik Edit HTML.
Dan jangan lupa centang Expand Template Widget.
Lalu cari kode <b:include data='post' name='post'/>
Kemudian ganti kode tersebut dengan kode di bawah ini.

<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>

<br/><br/>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

Simpan template dengan mengklik SIMPAN TEMPLATE.

Begini dia cara menampilkan judul postingan saja ketika label atau kategori di klik dan sekarang coba cek blog sobat dan silahkan klik salah satu label/category sobat dan lihat hasilnya.

Cara Mematikan Klik Kanan Pada Blog

07.00 Mematikan klik kanan , Menonaktifkan klik kanan , Tutorial blogger No comments

Cara mematikan klik kanan pada blog, ini adalah merupakan salah satu cara untuk menghindari blog kita dari copas (copy paste). Sehingga isi artikel kita gak bisa di curi alias dicopy paste.

Namun untuk memasang sistem ini di blog kita mastinya kita harus perhatikan dulu isi blog kita. Maksudanya kalau blog kita berisi tips-tips blog yang ada html-nya rasanya gak mungkin kita mematikan klik kanan di blog kita karena user gak bisa mengcopy html yang kita tulis tersebut. Tapi kalau blog kita berisi tutorial dan tips-tips yang tidak perlu di copy paste maka klik kanan boleh di matikan.

Nah, jika sobat ingin mematikan klik kanan pada blog sobat, berikut caranya:

Pertama login dulu ke dasbor blogspot Anda.
Klik menu Rancangan.
Klik Elemen Laman.
Pilih Tambah Gadget.
Cari HTML/JavaScript dan klik tanda +.
Lalu copy co de di bawah ini dan paste di gadget tadi.

<script language="JavaScript">

</script>

Catatan:

Ganti kalimat yang berwarna pink di atas dengan kalimat keinginan sobat sendiri, misalnya ”dilarang klik kanan”, "dilarang Copas" dan lain-lain.
Kadang script di atas juga gak berfungsi karena di blokir oleh script template yang kita pakai (namun itu sangat jarang terjadi).

Setelah itu silahkan klik Simpan. Sekarang buka blog sobat dan coba klik kanan.

Nah itu dia script cara mematikan klik kanan pada blog atau cara menonaktifkan klik kanan pada blog, dan mudah-mudahan tutorial ini bisa membantu.

Cara Membuat Page Number Di Blogspot

07.39 Membuat halaman blog , Membuat page number , Tutorial blogger No comments

Untuk mempercantik blog kita di blogspot memang kita melakukannya secara manual. Dan kali ini untuk mempercantik tampilan blog kita, kita akan membahas cara membuat page number di blogspot atau cara membuat halaman blog di blogspot.

Sobat pasti tau sendiri kalau pada template Blogspot umumnya hanya menggunakan navigasi Previous dan Next atau Posting lebih baru dan Posting Lama yang di selipkan dibagian bawah postingan blog, dimana fungsinya adalah untuk membantu pembaca/pengunjung berganti halaman postingan menuju tulisan sebelum atau setelah dari tulisan yang sedang dibaca tanpa ada keterangan nomor halaman berapa kita berada. Contohnya perhatikan pada bagian bawah blog sobat yang hanya ada tulisan Previous dan Next atau Posting lebih baru dan Posting Lama.

Tapi kalau page numbernya sudah di pasang maka tampilannya akan berubah seperti gambar di bawah ini:

Nah, cara membuat page number di blogspot atau blogger, ikuti langkah-langkah berikut ini:

Seperti biasa, Login ke dasbor blogger sobat.
Klik menu Rancangan.
Klik Edit HTML.
Lalu klik Expand Template Widget.
Cari kode ]]></b:skin>
Kemudian masukan kode script yang ada di bawah ini tepat di atas kode: ]]></b:skin>

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

Selanjutnya cari lagi kode </body>
Lalu masukan kode script berikut tepat di atas kode: </body>

<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>

Keterangan :

Kode pageCount di atas adalah menunjukkan jumlah tulisan/posting/artikel yang akan ditampilkan dalam satu halaman.
Kode displayPageNum adalah menunjukkan jumlah nomor halaman yang ditampilkan (jika diisi dengan angka 7 berarti nomor halaman yang muncul ada 8, ditambah satu untuk halaman satu).
Kode upPageWord adalah untuk mengarahkan kita ke halaman yang lebih baru (tulisan Previous bisa diganti sesuai dengan keinginan).
Kode downPageWord adalah untuk mengarahkan ke halaman yang lebih lama (tulisan Next bisa diganti sesuai dengan keinginan).

Terakhir kita cari kode script berikut: 'data:label.url'
Gantilah kode script di atas dengan kode dibawah ini:

'data:label.url + "?&max-results=5"'

Setelah selesai maka silahkan simpan template sobat dengan mengklik SIMPAN TEMPLATE.

Keterangan :
Fungsi dari script di atas adalah untuk mengganti tampilan default Blogspot yang akan menampilkan 20 postingan setiap halamannya. Namun karena pada pageCount di atas kita isi angka 5, maka pada script ini juga kita harus isi dengan dengan angka 5 (menampilkan 5 posting per halaman). Dan kalau kita ganti dengan angka lain, maka kita juga harus mengganti semua angka 5 di atas.

Nah, inilah dia tutorial atau tips cara membuat page number di blogspot atau cara membuat halaman blog di blogspot.

Cara Menambah Emoticon Di Komentar Psotingan Blogspot

08.33 Menambah emoticon di comentar , Tutorial blogger No comments

Mempercantik blog memang sangat banyak caranya dan salah satunya adalah dengan menambah emoticon di komentar postingan blogspot sobat. Karena emoticon di komentar ini gak pernah ada di semua template kecuali kalau si empunya blog menambahnya secara terpisah.

Nah, jika sobat tertarik juga menambah emoticon di komentar postingan blogspot sobat, berikut caranya:

Login ke dasbor blogger Sobat.
Klik menu Rancangan.
Klik Edit HTML.
Jangan lupa centang Expand Widget Template.
Cari kode </body>

Lalu letakan kode css berikut, dan taruh di atas kode: </body>

<script src='https://sites.google.com/site/kodeblogger/javascript/smiley.js' type='text/javascript'/>

Selanjutnya cari kode berikut, Lengkapnya perhatikan kode sibawah ini, (pehatikan kode yang berwarna pink) :

<p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>

<b:include data='post' name='comment-form'/>

<b:else/>

Kalau sudah ketemu, lalu copy dan pastekan kode di bawah ini tepat dibawah kode: <p class='comment-footer'>

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>

:))

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>

:)]

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>

;))

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>

;;)

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>

;)

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>

:((

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>

=((

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>

:-o

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>

:-/

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>

:-*

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>

8-}

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>

~x(

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>

:-t

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>

b-(

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>

:-L

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>

=))</b>

Terus kadang juga ada template yang sudah di optimasi sehingga emoticon-nya gak muncul. Nah untuk mengatasinya silahkan perhatikan cara di bawah ini:

Coba cari kode dibawah ini :
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>

Kalo sudah ketemu, taruh kode emoticon di atas tadi tepat di atas kode: <b:include data='post' name='comment-form'/>

Dan taruh java script berikut, tepat di atas kode: </body>
<script src='https://sites.google.com/site/kodeblogger/javascript/smiley.js' type='text/javascript'/>

Setelah itu silahkan klik Simpan Template, dan lihat hasilnya.

Nah, begini dia cara menambah emoticon di komentar postingan blogspot, dan kode di atas juga masih bisa di tambah dengan emoticon yang lain yang sobat sukai.

Langganan: Postingan ( Atom )

Tags

Arsip Blog

Software Gratis Untuk Membuat Banner

Cara Membuat Menu Icon Social Media Melayang

Cara Membuat Text Area Di Blog

Cara Menampilkan Judul Posting Saja Ketika Label Di Klik

Cara Mematikan Klik Kanan Pada Blog

Cara Membuat Page Number Di Blogspot

Cara Menambah Emoticon Di Komentar Psotingan Blogspot

Pages