Cara Membuat Banner Animasi Online

Selamat malam kawan-kawan semua, pada kesempatan kali ini  akan share Cara Membuat Banner Animasi Online, setelah sebelumnya saya telah shareCara Menambahkan Add Gadget diatas/bawah Header, kemarin saya mencari-cari cara membuat banner di google setelah beberapa saat saya menemukan situs online yang menyediakan fasilitas pembuatan banner secara gratis. Wah, pastinya seneng dong, siapa yang gak suka sama yang namanya gratis. Oke dah kawan dari pada buang-buang waktu langsung aja simak berikut ini.

Cara membuat banner animasi :

• Kunjungi dahulu situs picasion.
• Maka tampilannya akan seperti berikut.

 

No 1 adalah untuk memasukkan gambar kalian.
No 2 adalah untuk mengatur kecepatan banner.
No 3 adalah untuk mengatur ukuran banner.
No 4 adalah untuk menambahkan kolom jika anda ingin memperbanyak gambar.
No 5 adalah untuk membuat banner.

• Jika anda telah memasukkan gambar yang berbeda. Contohnya saya memasukkan gambar seperti berikut.

 

• Jika anda telah mengaturnya lalu klik No 5 (*keterangan diatas). Jika sudah maka tampilannya akan seperti di bawah.

No 1 adalah link halaman itu sendiri.
No 2 adalah link banner animasi anda.
No 3 adalah kode HTML banner yang telah anda buat.
No 4 adalah kode untuk forum
No 5 adalah untuk menghapus banner yang telah dibuat.
No 6 adalah untuk mendownload banner anda.

• Jika sudah maka hasilnya akan seperti banner saya berikut.

sumber : anakgilaonline.com

Free | Gratis | Kalau Mau tinggal Download | Terima kasih ^_^

10/25/2012 04:43:00 PM | 0 komentar | Read More

Cara Menambahkan Add Gadget diatas/bawah Header

Pada kesempatan kali ini Akan Share Cara Menambahkan Add Gadget diatas/bawah Header. Pada umumnya blog bawaan dari blogger tidak terdapat gadget yang berada diatas header. Tapi kita sering melihat web maupun blog yang meletakkan gadget diatas header, seperti iklan baris, baner, gambar, teks berjalan, animasi, atau apa saja sesuai selera atau kebutuhan blog. Lalu bagaimana cara menambah gadget diatas heade.

Silahkan ikuti langkah - langkah berikut ini :

• Login ke Blogger. 
• Klik Tata Letak/layout/rancangan. 
• Klik Edit HTML. 
• Lalu cari kode berikut.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Catatan : 

Setiap template mempunyai kode yang berbeda-beda, cari saja yang mirip seperti kode diatas.

• Ganti kode diatas dengan kode berikut ini :

<b:section class='header' id='header' preferred='yes'>

• Klik Save Template 
• Klik Page Element

Lihat perubahan yang terjadi, sudah terdapat penambahan add a gadget diatas header yang dapat anda isi sesuai kebutuhan blog anda.

Maka hasilnya akan seperti berikut.

Selamat mencoba dan Semoga bermanfaat

Free | Gratis | Kalau Mau tinggal Download | Terima kasih ^_^

10/25/2012 04:26:00 PM | 0 komentar | Read More

Cara Membuat Komentar Facebook dan Blogger Berdampingan Pada Semua Template

Cara Membuat Komentar Facebook dan Blogger Berdampingan Pada Semua Template

den zuaz | 02:17 | 61comments

Salam Blogger, Melengkapi permintaan salah satu sahabat Zuaz'Z Creator yang meminta saya menjelaskan tentang cara memasang komentar facebook dan blogger berdampingan.

Mungkin tutorial ini sudah usang dan tidak asing lagi bagi Sobat semua, akan tetapi tutorial yang sudah ada saya coba tidak berhasil pada semua template, dan kemungkinan banyak berhasil pada template premium saja.

Disini saya sedikit mengulas lagi agar tutorial ini berhasil di semua template, karena pada saat saya coba pada blog uji coba saya yang bertemplate standar, tuorial yang lama tidak berhasil, hanya berhasil pada template premium saja, berikut cara yang saya dapatkan dari salah satu blog yang sudah lama bergelut di dunia blogger.

Cara Membuat Komentar Facebook dan blogger Berdampingan Pada semua template: DEMO

1. Login ke account blogger Sobat
2. Klik rancangan lalu klik Edit HTML
3. Download template Sobat dulu untuk berjaga-jaga jika nanti terjadi kesalahan
4. Beri centang atau ceklis pada kotak kecil yang bertuliskan Expand Template Widget
5. Jika sudah, cari kode  ]]></b:skin>  (gunakan ctrl + f untuk mempermudah pencarian)
6. Kalau sudah ketemu maka masukkan kode berikut ini di atas kode ]]></b:skin>


 .comments-page { background-color: #f2f2f2;}
    #blogger-comments-page { padding: 0px 5px; display: none;}
    .comments-tab { float: left; padding: 5px; margin-right: 3px;
    cursor: pointer; background-color: #f2f2f2;}
    .comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
    .comments-tab:hover { background-color: #eeeeee;}
    .inactive-select-tab { background-color: #d1d1d1;}


Hilangkan kode berwarna hijau bila ingin background kedua komentar transparan.

Cara di atas ini yang biasanya mewajibkan penempatan kode di bawah kode /* Comment atau#comments, Sebenarnya sama saja, mungkin para master terdahulu menyarankan begitu agar tampak lebih rapi.


7. Kemudian Sobat cari kode </head>
   Jika sudah ketemu, masukkan kode berikut ini tepat di atas kode </head>


 <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <meta content='ID FB Sobat disini' property='fb:admins'/>
    <script type='text/javascript'>
    function commentToggle(selectTab) {
    $(".comments-tab").addClass("inactive-select-tab");
    $(selectTab).removeClass("inactive-select-tab");
    $(".comments-page").hide();
    $(selectTab + "-page").show();
    }
    </script>


Perhatikan tulisan yang berwarna hijau di atas, ganti dengan ID facebook Sobat, misalkan https://www.facebook.com/nama Sobat maka ID Sobat berada pada tulisan yang berwana hijau. Namun jika Sobat belum merubah ID Sobat maka yang tertera adalah berupa angka. contohnya seperti ini: https://www.facebook.com/1234567890


8. Kemudian cari kode  <div class='comments' id='comments'>


Keterangan:  Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini di bawahkedua kode <div class='comments' id='comments'>.


    <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
    <img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
    <fb:comments-count expr:href='data:post.url'/> Comments
    </div>
    <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
    <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
    </div><div class='clear'/>
    </div>
    <div class='comments-page' id='fb-comments-page'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>


NB: Pada penempatan kode yang ke dua Sobat hapus kode yang berwarna ungu ya: <div class='comments comments-page' id='blogger-comments-page'> apabila kode di bawahnya sama.


Perhatikan angka yang berwarna biru dan hijau di atas, angka 2 merupakan jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 400 merupakan lebar kotak komentar facebook. Sobat dapat menyesuaikannya sesuka hati, tapi kalu boleh saya kasih saran, sesuaikanlah dengan lebar template Sobat agar kelihatan rapi.


Pada cara di atas yang biasanya menyarankan hanya menempatkan pada kode <div class='comments' id='comments'> yang kedua saja, saat saya coba pada template blog uji coba saya tidak berhasil, jadi harus menempatkan di bawah kedua kode tersebut.


9. Kemudian klik save, dan lihat hasilnya.

10/23/2012 04:58:00 PM | 0 komentar | Read More

Cara membuat gambar berjalan pada Blogspot (Marquee Image).

 

 

 

 

 

 Berikut  ini adalah langkah-langkah untuk membuat gambar berjalan di blogspot:

1. Masuk atau login ke http://imageshack.us/.

2. Kemudian anda mendaftar terlebih dahulu. Klik sign up pada pojok kanan atas untuk mendaftar.

3. Isi formulir yang telah disediakan. Kemudian klik sign up.

4. Setelah proses pendaftaran selesai, maka akan tampil seperti gambar berikut.

5. Kemudian cek email anda dan klik link yang sudah disediakan di email untuk melanjutkan.

6. Mulailah upload gambar satu persatu. Sebelum memulai upload gambar, terlebih dahulu tentukan Image Resize. Pilih 320×240 (for website and email).

Lanjutkan untuk upload. Jika tidak bisa mengupload, saya sarankan unuk klik Can’t Upload.

7. Klik Browse untuk memilih gambar yang akan di Upload, beri keterangan untuk gambar pada add tags (optional). Untuk tags bisa diisi bisa juga tidak. Klik Upload untuk proses berikutnya.

8. Jika proses Upload berhasil, maka gambar akan tampil dan ada keterangan Upload Successfull.

Copy link gambar yang ada pada kotak Direct Link. Contoh: http://img692.imageshack.us/img692/6128/fuzzymamdani.png

8. Silahkan  login pada Blogger anda, kemudian masuk ke Tata Letak.

9. Tambahkan Gadget dan pilih menu  HTML/JavaScript. Copy kode dibawah ini kedalam gadget:

<marquee align=”left” bgcolor=”#fff23” direction=”left” height=”240″ onmouseout=”this.start()” onmouseover=”this.stop()” scrollamount=”4″ width=”100%”>
<img src=”http://img692.imageshack.us/img692/6128/fuzzymamdani.png” /> <img src=”url gambar2″ /> url gambar3” /> <img src=”url gambar4” />
</marquee>

10. Kemudian klik simpan.

Catatan :

1. Text berwarna merah adalah kode HTML untuk Background. Anda bisa menganti warna backgorund sesuai keinginan anda.
2. Text berwarna hijau adalah kode HTML untuk arah gambar bergerak. Untuk mengganti arah ketika gambar berjalan, anda bisa mengganti kata “left” dengan “up”, “down”, dan “right”
3. Text berwarna ungu adalah kode untuk mengatur lebar dan tinggi gambar. Ganti lebar dan tinggi sesuai keinginan anda.
4. Ganti Alamat URL gambar dengan URL gambar Anda.
5. Gambar bergerak tersebut bisa juga ditampilkan pada postingan dan caranya sama persis dengan diatas.. Untuk contoh gambar berjalan yang ada pada gadget atau sidebar bisa dilihat disini. 

Free | Gratis | Kalau Mau tinggal Download | Terima kasih ^_^

10/23/2012 04:41:00 PM | 0 komentar | Read More

Cara Menghilangkan Readmore Blogger

Free | Gratis | Kalau Mau tinggal Download | Terima kasih ^_^

Readmore Blogger

Bismillah... pada kesempatan ini saya akah tulis tentang cara menghilangkan Readmore bawaan blogger. kalo istilah lainnya sering dikenal dengan istilahJump Break blogger. tapi meskipun beda kata kata yang penting tujuannya sama kesana. oke sekarang kita langsung saja ke cara menghilangkan jump breaktersebut.

langkah pertama yang harus sobat lakukan ialah :

• Login ke Blogger
• Setelah login sobat langussung ke area Design/Rancangan Blog
• Langkah selanjutnya sobat masuk are Edit HTML.
• Setelah itu Centang Tanda Expand Widget.
• Setelah reload sobat cari kode <data:post.body/>
• Setelah ketemu sobat geser ke bawah dan temukan kode di bawah ini

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

Langkah selanjutnya hapus kode tersebut dan save templatenya... semoga berhasil. sekian cara menghapus readmore bawan blogger

Free | Gratis | Kalau Mau tinggal Download | Terima kasih ^_^ 

10/23/2012 03:13:00 PM | 0 komentar | Read More

Cara Membuat Headline News di Blog dengan Mudah

 - Kabar gembira buat para blogger karena kali ini saya kembali update blog seputar tips trik blogger yaitu cara mudah membuat headline news di blog. Apa itu headline news? HeadLine News atau kabar terbaru, yang mana akan memudahkan pengunjung untuk mengetahui artikel-artikel baru milik kita. Sehingga pageviews blog kita pun menjadi rata dan meningkat. Cara kali ini dibilang sangat mudah tanpa edit-edit css/javascript di template. Kalau saya bilang tinggal copy paste selesai sudah.

Contoh jadinya bisa lihat paling bawah di blog saya ini. Tampilannya simpel tapi banyak manfaatnya. Yang ingin memasangnya di blog kalian ikuti step ringan berikut.

1. login ke blogger

2. masuk ke tata letak

3. lalu klik tambah widget diamana aja terserah

4. lalu pilih yang html/javascript

5. tinggal masukkan kode dibawah ini

<script type="text/javascript">
var hn_url_blog = "http://zamedaku.blogspot.com";
var hn_jumlah_post = 5;
var hn_warna_latar = "#FFEBCD";
var hn_warna_garis = "#7fff00";
var hn_posisi = "bottom";
var hn_tampilkan_judul = true;
var hn_backlink = true;
</script>
<script src="http://zame.googlecode.com/files/headlinenews.js">
</script>

6. Lalu simpan. lihat hasilnya..!!
Yang warna merah bisa diganti sesuai keinginan seperti jumlah post, warna, dan posisi. Mudah kan? :)

Free | Gratis | Kalau Mau tinggal Download | Terima kasih ^_^

10/23/2012 03:11:00 PM | 0 komentar | Read More

Cara Membuat Buku Tamu Dengan Shoutmix Box

Shoutmix Box Chatt

Melihat judul diatas Cara Membuat Buku Tamu Dengan Shoutmix Box mungkin sobat agak rancu membacanya,, he he saya juga pusing mau apa judulnya. tapi maksud nya adalah cara memasang box shoutmix gitu aja lah..

Untuk membuat box shoutmix ini mudah sekali, langkah pertama sobat kunjungi situs shoutmix di alamathttp://www.shoutmix.com/ jika sobat belum punya akun silahkan sobat daftar dulu. sobat tinggal mengisi user name, password dan alamat email.

Jika sudah sobat langsung login. dan dapatkan kode shoutmixnya di bawah tulisan shoutmix overview, lalu copy code tersebut.

Code Shoutmix Book

• Setelah di copy sobat login ke blogger dan masuk ke area Rancangan/Design Blog
• Tambahkan Gadget HTML/JavaScript
• Dan paste Kode tadi area HTML/JavaScript
• langkah terakhir Save dan lihat hasilnya

Jika sobat mau meletakan gadget tersebut di pinggir dengan posisi float, sobat tinggal tambahkan kode di bawah ini.

<style type="text/css">
#gb{position:fixed;top:50px;z-index:+1000;}

* html #gb{position:relative;}
.gbtab{height:100px;width:30px;float:left;cursor:pointer;background:url('http://lh4.ggpht.com/_NSa8I94a3wg/TJHDAQiJqSI/AAAAAAAAAGo/0LukH8E000Y/s800/tabs_asep.png') no-repeat;}
.gbcontent{float:left;border:2px solid #cd8c3d;background:#050505;padding:10px;}</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

Kode Shoutmix Disini

<div style="text-align:right">
<a href=""></a>|<a href="javascript:showHideGB()"></a></div></div>
<a href="http://lutfietutor.blogspot.com/" target="_blank" title="Lutfi Tutorial Blog">GADGET</a>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

Gaanti tulisan yang berwarna merah dengan code shoutmix yang tadi sobat copy. semoga berhasil

Free | Gratis | Kalau Mau tinggal Download | Terima kasih ^_^

10/23/2012 03:04:00 PM | 0 komentar | Read More

Cara Pasang Opi Yahoo! Mesengger Di Blog

 saya akan share Cara Pasang Opi Yahoo! Mesengger Di Blog atau istilah lainnya sering disebut pasang status offline dan online Yahoo, untuk apa kegunaannya gadget Yahoo mesenggger ini? kegunannya banyak sekali dan sangat bermanfaat bagi visitor,  jika blog sobat adalah sebuah web/blog yang di pakai untuk berbisnis online, maka seharunya dipasang gadget ini karena untuk memudahkan para pengunjung/visitor untuk menanyakan sesuatu hal yang tidak jelas dan rasa penasaran para visitor.

Style Opi Yahoo Mesengger

Sekarang kita langsung saja ke Tutorial Cara Pasang Opi Yahoo! Mesengger Di Blog,

CARA PASANG STATUS YAHOO MESENGGER

• Langkah pertama sobat login ke blogger
• Terus sobat masuk ke Tab Design Blog
• Setelah itu tambahkan gadget HTML/JavaScript
• Setelah terbuka gadgetnya, Copy kode gadget Yahoo Mesengger
• Lalu Sobat Vaste di gadget HTML/JavaScript
• Langkah terakhir Save. dan lihat hasilnya

Yahoo Mesengger mempunyai beberapa style, secara default stylenya menggunakan yang pertama,  kodenya adalah : <img src="http://opi.yahoo.com/online?u=IDYahooKamu&m=g&t=1" border="0"/>

KODE OPI YAHOO! MESENGGER

Style Pertama

<img src="http://opi.yahoo.com/online?u=IDYahooKamu&m=g&t=1" border="0"/>

Style Kedua

<img src="http://opi.yahoo.com/online?u=IDYahooKamu&m=g&t=2" border="0"/>  

Style Ketiga

<img src="http://opi.yahoo.com/online?u=IDYahooKamu&m=g&t=3" border="0"/>

Style Keempat  

<img src="http://opi.yahoo.com/online?u=IDYahooKamu&m=g&t=4" border="0"/>

Style Kelima  

<img src="http://opi.yahoo.com/online?u=IDYahooKamu&m=g&t=5" border="0"/>

Style Keenam  

<img src="http://opi.yahoo.com/online?u=IDYahooKamu&m=g&t=6" border="0"/>

Style Ketujuh  

<img src="http://opi.yahoo.com/online?u=IDYahooKamu&m=g&t=7" border="0"/>

Untuk style opi yang selanjutnya silahkan sobat ganti angka yang berwarna merah dengan setyle yang telah disediakan lihat dalam gambar dan jangan lupa ganti IDYahooKamu dengan id yang sobat miliki. Oke sobat semoga berhasil pasang gadget Yahoo Mesengger nya

Free | Gratis | Kalau Mau tinggal Download | Terima kasih ^_^

10/23/2012 03:01:00 PM | 0 komentar | Read More

Cara Mengganti Komen Di Blogspot Dengan IntenseDebate

IntenseDebate  Comment

Bismillah.... pada kesempatan ini saya akan tulis tentang tutorial cara mengganti tampilan komen di blogspot dengan menggunakan  IntenseDebate, tapi sebelumnya jika blog sobat sudah terkenal dan banyak yang komen maka sebaiknya template blogsobat di backup dulu, seperti apa tampilan comment IntenseDebate?  tapilannya seperti gambar di pinggir atau sobat bisa lihat dibawah kotak komentarnya.

Untuk membuat kotak komentar seperti itu pertama sobat kunjungi situs http://intensedebate.com/ terus sobat register/daftar jika sobat punya akun WordPress sobat langsung saja tinggal login. langkah pertama yang harus sobat lakukan adalah 

• Login ke Blogger 
• Terus masuk ke area Design/Rancangan Blog
• Terus masuk Edit HTML 
• Setelah itu sobat Download Full Template
• Setelah template blog sobat  di download, sobat login ke akun  IntenseDebate 
• Terus sobat klik Site dan Pilih Add Blog/Site terus masukan URL blog sobat

Add Url blog/site

Setelah itu sobat klik Next Step dan akan tampil seperti di bawah.

Instaling Coment IntenseDeate

Terus Geser ke bawah dan upload template yang tadi sobat download, setelah itu klik Upload. setelah upload selesai sobat copy kode yang ada pada form

Copy Template Blogspot Ctrl+A untuk Select

Free | Gratis | Kalau Mau tinggal Download | Terima kasih ^_^

10/23/2012 02:57:00 PM | 0 komentar | Read More

Cara Menyisipkan Tombol PDF Creator di Blogspot

Pdf Save Web Page

Bismillah.. pada kesempatan ini saya akan sedikit share cara meyisipkan button/tombol save as page to pdf di blogger. untuk menyisipkan tombol ini cukup mudah dan gampang. dalam tutorial blog kali ini saya akan akan cara menyispkan tombol save as pdf dengan menggunkan pihak ketiga. 

Sebenarnya cara menyisipkan pdf creator ini banyak sekali caranya. tapi jika sobat ingin mudah dan sudah terlanjur masuk ke blog tutorial ini silahkan sobat lanjutkan baca tutorial ini. langkah pertama yang harus sobat lakukan adalah :

• Kunjungi situs http://www.web2pdfconvert.com/
• Setelah terbuka sobat pilih PDF Button
• Lankah selanjutnya sobat pilih Website and allow visitor convert my web page.
• Sobat bisa memilih dengan menggunakan text atau gambar silahkan sobat pilih, terserah mau pilih yang mana
• Setelah di pilih, sobat copy code JavaScriptnya. 
• Langkah selanjutnya sobat login ke Blogger
• Terus masuk ke area design/tata letak blog, terus masuk ke area Edit HTML
• Jangan lupa sobat centang tanda Expand Widgets Templates. terus sobat cari tag <data:post.body/>
• Terus sobat Vaste (Ctrl + V) kode yang tadi sobat copy

Jika sobat mau meletakan button pdf tersebut di atas postingan maka sobat simpan kode tersebut di atas kode <data:post.body/>

Contoh  di Atas Postingan

kode JavaScript 

<data:post.body/>

Di bawah Postingan

<data:post.body/>

kode JavaScript  

Setelah selesai disimpan sobat klik save template dan lihat hasilnya, oke sobat demikian tutorial cara menyisipkan tombol print pdf pada blogspot

Free | Gratis | Kalau Mau tinggal Download | Terima kasih ^_^

10/23/2012 02:54:00 PM | 0 komentar | Read More

Membuat Halaman Blog Seperti Halaman Buku

... pada kesempatan ini saya akan tulis tutorial blog tentang halaman blog namun saya belum tau apa itu namanya yang jelas pada tutorial blog kesempatan ini saya memberi judul membuat halaman blog seperti halaman buku meskipun tidak sesuai dengan yang saya bahas, tapi mudah mudah postingan kali ini mirip lah dengan dengan tutorial yang yang saya akan bahas. he he

Ketika sobat akan membuka buku mungkin sobat akan memegang ujung kertas baik dari pojok bawah atau dari pojok atas buku tersebut. pada kesempatan ini saya akan sedikit share cara membuka blog dengan cara membuka buku, oke daripada pusing membaca tulisan yang tidak bermutu ini mendingan sobat langsung lihat gambar di bawah ini, atau sobat bisa lihat demonya.

Demo

Untuk membuat halaman blog seperti diatas caranya mudah sekali, langkah pertama yang harus sobat

 lakukan adalah :

• Login ke Blogger
• Setelah itu sobat masuk ke area design/rancangan blog,
• Terus sobat masuk ke area Edit HTML dan jangan lupa centang expand widget templates.
• Setelah itu sobat cari tag </head>,
• Setelah ketemu tag </head> sobat sisipkan kode dibawah ini diatas tag </head>.

<script type='text/javascript'>var tujuan =&#39;http://kaca-belakang.blogspot.com/&#39;</script>
<script src='http://bloggertutorial.googlecode.com/files/jendela.js' type='text/javascript'/>

• Oke sebelum di save sobat ganti tulisan yang berwana merah (http://kaca-belakang.blogspot.com/) dengan url milik soba

Free | Gratis | Kalau Mau tinggal Download | Terima kasih ^_^

10/23/2012 02:48:00 PM | 0 komentar | Read More

Free Download Yahoo Template Untuk Blogger

Download Template blogger dengan tema Yahoo Template Today

 Yahoo Template Today Untuk Blogger

- Download -

- Demo -

Free | Gratis | Kalau Mau tinggal Download | Terima kasih ^_^

10/23/2012 02:38:00 PM | 0 komentar | Read More

Cara Membuat Animasi Flash Untuk Web

Flash Web Design

 Pada kesempatan ini saya akan sedikit share cara membuat animasi Flash untuk Web atau untuk Blog.  oke sekarang kita langsung saja ke cara membuat animasi flash, caranya mudah banget dan simple, sobat tidak perlu belajar flash lebih dahulu, sobat tinggal masukan text dan ambil kodenya.

Langkah pertama untuk membuat animasi flash ini sobat kunjungi situs http://www.flashvortex.com/, setelah itu sobat tinggal memilih, disana di sediakan beberapa menu diantarnya :

• Flash Untuk menu Website/Blog
• Flash Text
• Flash Banner   
• Flash Button
• Flash Clock
• Flash Widget

Silahkan sobat tinggal memilih sesuai selara sobat, sobat tinggal konfigurasi background, text, gambar dan yang lainnya, 

Free | Gratis | Kalau Mau tinggal Download | Terima kasih ^_^

10/23/2012 02:32:00 PM | 0 komentar | Read More

Slide Box Animation di Blogger

Bismillah... pada postingan kali ini saya akan sedikit share cara membuat slide box di blogger/blogspot, pada postingan terdahulu saya pernah membuat artikel tentang slide box, namun pada kesempatan slide box nya aga sedikit berbeda, lumayan untuk untuk mempercantik dan memperindah blog sobat.

Slide Box

Slide box disini hampir mirip dengan related post namun disini sobat harus manual memasukan link (url) dan gambarnya. sebelum ke cara membuat slide box sebaiknya sobat lihat dulu contonya  di gambar atau sobat bisa lihat di blog ini, jika sobat tertarik dengan gadget seperti itu silahkan sobat di coba pada blog sobat.

• Langkah pertama untuk membuat slide box yaitu :
• Sobat login ke blogger dengan akun masing masing.
• Setelah itu sobat langsung menuju ke tab Design/Rancangan blog
• Langkah selanjutnya sobat masuk ke area edit HTML terus centang kotak Expand Widget
• Setelah itu sobat cari kode/tag <b:skin>, setelah ketemu sobat copy kode di bawah ini dan letakan di atas kode <b:skin>

CSS Unutuk Slide Box

<link href='http://tympanus.net/Tutorials/RelatedPostsSlideOuts/css/style.css' media='screen' rel='stylesheet' type='text/css'/>

• Jangan dulu di save langkah selanjutnya sobat cari lagi kode/tag </body>, terus sobat masukan kode JavaScript di bawah ini di atas kode/tag </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
  <script>//<![CDATA[
   $(function() {
    /**
    * the list of posts
    */
    var $list   = $('#rp_list ul');
    /**
    * number of related posts
    */
    var elems_cnt   = $list.children().length;
   
    /**
    * show the first set of posts.
    * 200 is the initial left margin for the list elements
    */
    load(200);
   
    function load(initial){
     $list.find('li').hide().andSelf().find('div').css('margin-left',-initial+'px');
     var loaded = 0;
     //show 5 random posts from all the ones in the list.
     //Make sure not to repeat
     while(loaded < 5){
      var r   = Math.floor(Math.random()*elems_cnt);
      var $elem = $list.find('li:nth-child('+ (r+1) +')');
      if($elem.is(':visible'))
       continue;
      else
       $elem.show();
      ++loaded;
     }
     //animate them
     var d = 200;
     $list.find('li:visible div').each(function(){
      $(this).stop().animate({
       'marginLeft':'-50px'
      },d += 100);
     });
    }
    
    /**
    * hovering over the list elements makes them slide out
    */
    $list.find('li:visible').live('mouseenter',function () {
     $(this).find('div').stop().animate({
      'marginLeft':'-220px'
     },200);
    }).live('mouseleave',function () {
     $(this).find('div').stop().animate({
      'marginLeft':'-50px'
     },200);
    });
   
    /**
    * when clicking the shuffle button,
    * show 5 random posts
    */
    $('#rp_shuffle').unbind('click')
        .bind('click',shuffle)
        .stop()
        .animate({'margin-left':'-18px'},700);
       
    function shuffle(){
     $list.find('li:visible div').stop().animate({
      'marginLeft':'60px'
     },200,function(){
      load(-60);
     });
    }
            });
  //]]></script>

Langkah terakhir sobat masukan kode HTML di bawah ini di atas kode/tag </body>   

<li>
<div>
<img height='72' width='72' alt='JUDUL GAMBAR' src='URL-GAMBAR'/>
<span class='rp_title'>JUDUL-POSTINGAN</span>
<span class='rp_links'>
<a href='URL-ARTIKEL' target='_blank'>Article</a>
<a href='URL-DEMO' target='_blank'>Demo</a>
</span>
</div>
</li>

Keterangan ganti lah kode di atas dengan url milik sobat

• JUDUL GAMBAR ="Judul gambar dalam artikel"
• URL-GAMBAR ="Alamat (url) gambar contoh 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhErF8Cq5OkEyg1lJUaIJsUmZaQW4GY1eMzBIWKFh8L700Cf0lPTL0iPOo5HuxKngTWPpEYzCYhOQcWvllI_C0vGcjYeqtNNyihcy8t9IDsGKi_Q0kn-3bD6aUHEqoLMlzxYkcdIdyFxo/s72-c/download-template-today.jpg' "
• JUDUL-POSTINGAN : "Judul artikel milik sobat blogger"
• URL-ARTIKEL ="Alamat artikel yang akan di tuju" contoh :http://lutfietutor.blogspot.com/2012/03/cara-download-file-pdf-dari-scribd.html
• URL-DEMO ="Alamat demo jika blog sobat memiliki demo/tutorial yang online"

Free | Gratis | Kalau Mau tinggal Download | Terima kasih ^_^

10/23/2012 02:29:00 PM | 0 komentar | Read More