Membuat Related Post di blogger

Related Post merupakan sesuatu yang simple kelihatannya tapi mempunyai efek yang cukup bagus bagi blog kita. Dengan Related Post, pageview terhadap blog kita akan meningkat. Selain itu pengunjung bisa dengan mudah mengeksplore konten-konten yang ada dalam blog kita. Untuk cara membuat related post ini, tentu sudah banyak yang memberikan tutorial dan trik untuk ini. Dan salah satunya bisa dengan cara :

• Silahkan menuju ke mode Edit HTML anda melalui Dashboard blogger ► Layout ► Edit HTML
• Beri tanda centang pada kotak kecil bertuliskan 'Expand Widget Templates'
• Cari tag atau kode </head> dan copy- paste kode di bawah ini sebelum kode </head> atau tepat di atas kode </head> .

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("http://1.bp.blogspot.com/_cNpXRtRph18/SpbSRYurg2I/AAAAAAAAD7Q/ GbYNm2feyIQ/rss.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } #related-posts ul li:hover { background-color:#E2EBF8; border-top:1px dotted #cccccc; } </style> <script src='http://oemar.googlecode.com/files/Related_post _hack.js' type='text/javascript'/>

Cari kode <p><data:post.body/></p> . Kode setiap template berbeda - beda. Biasanya kodenya bisa berupa seperti berikut <div class='post-body> atau ada juga yang seperti ini <p><data:post.body/></p> . Sebenarnya kode ini bisa ditempatkan dibagian template yang anda sukai bila anda cukup mengerti tentang coding. Tapi yang pasti cari kode <p><data:post.body/></p> saja dulu. Untuk cara termudah anda bisa menggunakan perintah dengan menekan tombol CTRL+F di keyboard anda dan masukkan kode yang ingin dicari di kotak yang tersedia.

Setelah mendapatkan kode <p><data:post.body/></p> . Copy-paste kode dibawah ini tepat dibawah kode tersebut.

<b:if cond='data:blog.pageType == "item"'> <div id="related-posts"> <font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div> </b:if>

Simpan Template anda .

► Untuk menempilkan link related post sebanyak mungkin ganti angka yang berwarna biru diatas dengan yang anda inginkan.
► Untuk mengganti icon di samping kiri link related post, anda harus mengganti kode URL  gambar yang berwarna merah dengan URL gambar yang anda kehendaki. Anda bisa menggunakan situs penyedia jasa hosting gambar gratis seperti photobucket dan imageshack atau di blogger sendiri di sini.
► Untuk mengganti warna atau style hover ( warna atau style yang muncul di related post ketika disorot oleh mouse ) anda bisa mengutak - atik kode css nya. Tepatnya di kode

#related-posts ul li:hover { background-color:#E2EBF8; border-top:1px dotted #cccccc; }

Bila ingin mengganti warnanya, anda tinggal mengganti kode #E2EBF8 dengan kode warna HTML yang anda kehendaki.
 
TERIMA KASIH
SEMOGA BERMANFAAT

Read more »

Membuat Tombol Melayang Dengan Tombol Close

Objek melayang atau sering juga di sebut dengan Float Top Bar, sebuah jendela kecil yang muncul dari atas halaman setiap kali kita mengunjungi Website atau Blog. Float Top Bar ini biasanya berisi Content Iklan ataupun sebuah Form SubScribe sehingga pasti terlihat oleh pengunjung Website atau Blog kita. Untuk membuat Iklan melayang seperti ini sangatlah mudah, hanya dengan beberapa langkah, maka Iklan Melayang tersebut sudah bisa terpasang pada Website atau Blog Anda.

Oke, berikut ini adalah langkah-langkah pembuatannya :

1. Login Ke www.Blogger.com dengan Akun anda masing-masing Pastinya
2. Masuk ke Tab Tata Letak
3. Pilih Tambah Gadget
4. Tambah Gadget Pilih HTML / JAVASCRIPT
5. Dan copy kode di bawah ini kedalamnya.

<a onblur="try {parent. deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJXmzAHj1HeaKDLRBvkPs-0HiayeXbycXHUJONg3uhQvw9WG-7Epey8naW9hrDnOyze7frMAiaqwW4vae_MjR1tOU_x1GZJiAAEDOYpO-YwuyJbCVdYX-jKhgGQo116h3MCQul31pij2U/s1600-h/Widget.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJXmzAHj1HeaKDLRBvkPs-0HiayeXbycXHUJONg3uhQvw9WG-7Epey8naW9hrDnOyze7frMAiaqwW4vae_MjR1tOU_x1GZJiAAEDOYpO-YwuyJbCVdYX-jKhgGQo116h3MCQul31pij2U/s400/Widget.JPG" alt="" id="BLOGGER_PHOTO_ID_5433478876639914642" border="0" /></a> <style type="text/css"> #gb{ position:fixed; top:10px; z-index:+1000; } * html #gb{position:relative;} .gbcontent{ float:right; border:2px solid #A5BD51; background:#ffffff; 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.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> <div style="text-align:right"> <a href="javascript:showHideGB()"> .:[Close][Klik 2x]:. </a> </div> <center> Masukan Kode iklan atau Gambar yang anda inginkan di sini </center> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.center = (30-gb.offsetWidth).toString() + "px"; </script></center> </div> </div>

     6. Simpan

TERIMA KASIH
SEMOGA BERMANFAAT

Read more »

Menghilangkan Langgan : Entri (Atom) dan Subscribe to : Poskan Komentar (Atom)

Dalam membuat sebuah blog, kita pasti ingin blog kita tampil lebih rapi. Tulisan-tulisan yang mungkin tidak diperlukan atau mengganggu kerapian blog kita, lebih baik kita hilangkan atau digantikan oleh fungsi dari tool lain. Salah satunya adalah Langgan : Entri (Atom) dan Subscribe to : Poskan Komentar (Atom), ada yang merasa kerapian blog kita terganggu dengan adanya tulisan di "Langgan: Entri (Atom)"? Mungkin itu yang pernah kita alami, dengan tulisan itu yang menurut kita tidak penting dan tempatnya juga kurang sesuai, maka kita bisa hilangkan atau kita ganti tempatnya agar lebih rapi. Sesuai dengan namanya Langgan: Entri (Atom) adalah fasilitas untuk berlangganan artikel/posting, sedangkan Subscribe to: Poskan Komentar (Atom) adalah fasilitas berlangganan bagi pengunjung untuk mengetahui komentar-komentar atas posting/artikel dari blog yang bersangkutan.

Namun demikian sebagian blogger tidak menyukai fitur-fitur tersebut, karena selain terlalu sederhana, juga telah tersedia fasilitas berlangganan yang lebih canggih seperti FeedBurner.Com, maka dari itu sebagian blogger lebih suka menghapus/menghilangkan fitur Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) dari blog mereka.

Nah jika Anda ingin mengikuti jejak sebagian blogger tersebut, berikut ini cara menghilangkan Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) di Blogspot :

A. Cara Menghapus Langgan: Entri (Atom):

1. Login ke Blogspot => klik Rancangan/Design => pilih Edit HTML, kasih centang pada kotak Expand Template Widget dan gunakan tombol Find untuk memudahkan pencarian kode;
2. Cari kode di bawah ini:

<b:include data='feedLinks' name='feedLinksBody'/>

     3.   Hapus/delete semua kode di atas, lalu Save Template, selesai.

B. Cara Menghapus Subscribe to: Poskan Komentar (Atom):

1. Login ke Blogspot => klik Rancangan/Design => pilih Edit HTML, kasih centang pada kotak Expand Template Widget dan gunakan tombol Find untuk memudahkan pencarian kode;
2. Cari kode di bawah ini:

<div class='feed-links'> <data:feedLinksMsg/> <b:loop values='data:links' var='f'> <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a> </b:loop> </div>
      
       3.  Hapus/delete semua kode di atas, lalu Save Template, selesai.


TERIMA KASIH
SEMOGA BERMANFAAT

Read more »

Animasi Teks Efek Sparkle

Langsung saja gak perlu panjang lebar .

PREVIEW

Step 1: Buat Dokumen Baru

Klik File> New> Buat dokumen Flash baru ActionScript 2 atau 3.
Pada jendela Properties, atur ukuran stage dengan width 590 dan Height 300.
Atur juga ukuran fps(frames per second)menjadi 30 fps. 

---

Step 2: Gradient Shape

Gunakan Rectangle tool (R),Letakkan persegi pada stage dengan warna gradient radial hitam putih.

 

Ganti nama layer menjadi gradient.

---

Langkah 3: Ubah Ukuran dan Align

Pilih persegi gradient Anda, dan buka Align Pilihan menggunakan CTRL + K.

Pastikan bahwa "Align to stage" dicentang.

Pilih Align top edge, lihat pada gambar.

Anda akan menghasilkan gambar seperti ini :

---

Langkah 4: Edit Ukuran dan Warna

Pilih gradient transform tool (F).

Klik gradient yang ada di stage.

 Dengan menggunakan control gradient, ubah ukuran dan bentuk gradient sehingga lebih merata di seluruh stage.

Buka Color window (Alt+Shift + F9).

Ubah warna putih pada gradien ke # 333333 abu-abu, dan geser warna ke kanan sehingga ada lingkaran abu-abu di tengah gradien.

Hasilnya :

 

---

Langkah 5: Tambahkan Garis Horizontal

Buat layer baru diatas layer gradient, dan beri nama “lines”.

 

Gunakan Rectangle tool (R), letakkan rectangle pada stage, dan a 9% opaque white fill.

 

Read more »

Animasi Teks Berputar

Pada tutorial flash kali ini kita akan membuat teks efek berputar searah jarum jam dengan menggunakan Action Script 3.0.

PREVIEW :

Untuk Lebih Jelasnya Silahkan Kunjungi http://active.tutsplus.com/tutorials/design/go-round-the-bend-with-text-on-a-path-in-flash/

Read more »