tipsfaenblog

Software untuk membuat template web dan blog dengan WebSite X5 8.0.0.11

noreply@blogger.com (PHOTOGRAPHY) — Sat, 1 Sep 2012 23:43:00 -0700

Software untuk membuat template web dan blog dengan WebSite X5 8.0.0.11-Software ini tidak jauh berbeda dengan postingan saya yang sebelumnya Software / aplikasi untuk membuat template web / blog dengan WebSiteX5 Smart8. Jadi untuk website x5 evolution saya tidak perlu panjang lebar membahasnya, tetapi secara garis besar software ini terbilang lebih lengkap dari yang sebelumnya.

berminat? kalian bisa DOWNLOAD HERE

jika mau review lengkap kalian bisa berkunjung ke websitenya langsung disini websitex5.com

>>Semoga Bermanfaat<<

Software / aplikasi untuk membuat template web / blog dengan WebSiteX5 Smart8

noreply@blogger.com (PHOTOGRAPHY) — Wed, 22 Aug 2012 08:10:00 -0700

software atau aplikasi untuk membuat template web atau blog dengan mudah. Aplikasi ini terbilang cukup mudah dari menu tampilannya walaupun saya rasa untuk pilihan templatenya terbilang masih kurang lengkap dan masih cukup standar. Tetapi apabila kalian lebih kreatif kalian bisa membuat template yang lumayan bagus dan mudah. Tinggal buat lalu kalian bisa save langsung ke komputer atau upload. mungkin saya bisa memberi gambaran untuk tampiulannya seperti dibawah ini:

Jika berminat kalian bisa download here

jika mau review lengkap kalian bisa berkunjung ke websitenya langsung disini websitex5.com

>>Semoga Bermanfaat<<

Cara Mudah Membuat Info Panel Auto/Hide Slide Vertikal dengan jQuery

noreply@blogger.com (PHOTOGRAPHY) — Sun, 19 Aug 2012 22:21:00 -0700

Saat nya saya akan melanjutkan tips / tutorial dari saya mengenai Cara Membuat menu Beautiful Slide Out Navigation. Kali ini saya akan melajutkan tips / tutorial yang tidak jauh berbeda yaitu

Cara Mudah Membuat Info Panel Auto/Hide Slide Vertikal dengan jQuery - Cara mudah menjadikan / membuat / mengubah / blogspot / menyembunyikan / web menjadi / mempercantik tampilan menu / dengan mudah / untuk pemula / dengan menu yang melayang di atas dan samping blog / dengan efek slide out vertikal

Perbedaan dari Tutorial kali ini pada dasarnya sama, yaitu kita menyembunyikan panel ini dengan tombol. Hanya disini yang kita sembunyikan adalah informasi tentang blog kita atau seputar tentang penulis blog. Seperti gambar diatas kalian bisa memperindah tampilan mengenai kalaian secara buka tutup setelah ditekan tombolnya. Nah, pada tutorial blog kali ini saya akan memberikan cara dalam membuat info panel slide vertikal dengan jQuery.

Apabila kalian tertarik langsung aja ikuti langkah-langkahnya sebagai berikut:

1.Login ke Blogger
2.Masuk ke "Rancangan - Edit HTML"
3.Seperti biasa klik Download Template Lengkap biar aman
4.Jangan lupa centang Expand Template Widget
5.Selanjutnya cari kode ]]></b:skin>, Jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode ]]></b:skin> tersebut:

.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

6.Setelah itu cari kode </head> setelah itu copas kode dibawah ini dan taruh diatasnya.

note: Jika kalian sudah memasang script Jquery yang diatas kalian dapat meninggalkan langkah diata.

7.Masukan kode Javascript berikut dibawah script jQuery tadi:

<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>

8.Aari lagi kode berikut </body> setelah itu copas kode dibawah ini dan taruh diatasnya. (apabila kalian ingin mengisi tentang kalian)

<div class='panel'>
<h3>Selamat Datang bahasa inggrisnya welcome</h3>
<p style='text-align:justify'>Selamat datang di Tips-Trick, saya harap anda senang berada diblog sederhana ini. Blog ini saya tulis dengan komputer yang sederhana dan koneksi internet yang juga sederhana. Saya berharap Anda sering datang kembali. Silahkan anda mencari hal-hal yang baru di blog saya ini <a href='http://tipsfaenblog.blogspot.com/' title='creating website'>Selengkapnya tentang blog ini</a></p>

<h3>Sekilas tentang Pendiri Gould Tips-Trick</h3>
<img height='73px' src='isi alamat foto kalian' width='73px'/>
<p>Nama saya fandy saya seorang yang ingin belajar blogger. Saya pemula</p>

<div style='clear:both;'/>

<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
<li><a href='#' title='home'>Home</a></li>
<li><a href='#' title='about'>About</a></li>
<li><a href='#' title='portfolio'>Portfolio</a></li>
<li><a href='#' title='contact'>Contact</a></li>
<li><a href='#' title='blog'>Blog</a></li>
</ul>
</div>

<div class='colright'>
<h3>Social Stuff</h3>
<ul>
<li><a href='http://twitter.com/faencool' title='Twitter'>Twitter</a></li>
<li><a href='http://www.blogger.com/profile/00286702234337315654' title='About Me'>About Me</a></li>
<li><a href='mailto:fandy.efendi@gmail.com' title='Gmail'>Gmail</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>

8.Nah kalau kalian ingin mengisi iklan cbox atau yang lainnya kalian cari lagi kode berikut </body> setelah itu copas kode dibawah ini dan taruh diatasnya.

<div class="panel">

Script ChatBox Anda/ Bisa Diganti Dengan Tulisan Dan Widget Lain

</div>
<a class="trigger" href="">ChatBox</a>

9. Akhirnya Selesai juga, Lalu jangan lupa simpan / save ya teman-teman.

sekian dulu tutorial membuat Cara Mudah Membuat Info Panel Auto/Hide Slide Vertikal dengan jQuery, Semoga tips n tutorial langkah-langkahnya mudah dimengerti dan mudah untuk diterapin.

yang pastinya selamat mencoba dan jangan menyerah....

>>SEMOGA BERMANFAAT<<

Cara Membuat menu Beautiful Slide Out Navigation

noreply@blogger.com (PHOTOGRAPHY) — Sat, 18 Aug 2012 20:15:00 -0700

>>>halaman DEMO

Cara Membuat menu Beautiful Slide Out Navigation - Cara mudah menjadikan / membuat / mengubah / blogspot / web menjadi / mempercantik tampilan menu / dengan mudah / untuk pemula / dengan menu yang melayang di atas dan samping blog / dengan efek slide out.

baiklah jika sebelumnya saya memberikan tips mengenai Tutorial Keren Cara Membuat Widget Tab View menu jQuery, kali ini saya memberikan tampilan menu yang sedikit berbeda. mungkin kalian bisa melihat DEMO nya blog saya yang dibuat khusus contoh. berbeda kan....???

Baik untuk kalian yang ingin memasang menu Beautiful Slide Out Navigation ini kalian dapat mengikuti langkah-langkah sebagai berikut:

1. Masuk ke dashboard blogger
2. Pilih Rancangan --> Edit HTML

3. Jangan lupa centang Expand Widget Templates dan backup dulu templete anda (untuk menghindari apabila terjadi kesalahan)
4. Lalu kalian dapat mencari Cari kode ]]></b:skin> dan letakkan kode CSS berikut diatasnya.

/*----------------
Beautiful Slide Out Navigation
-------------------------------*/
.headerfixed
{
width:600px;
height:56px;
position:absolute;
top:50%;
left:10px;
background:#fff url(title.png) no-repeat top left;
}
ul#navixed {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 10px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navixed li {
width: 103px;
display:inline;
float:left;
}
ul#navixed li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#000;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navixed li a:hover{
background-color:#000;
}
ul#navixed li a span{
letter-spacing:2px;
font-size:11px;
color:#FFF;

}
ul#navixed .home a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwVAQNwNcSKw2JeFN-4hsFNL36nV5B5Cp7uLA79AwzTonS0vQfYStU_HTEeDG7mpnWd42lVwCpURsM5oG-WGRXWQAq60xct2-VTN9_jzz5IEMMJ6JtM5YltNV8LOVbl7SIK-TSe9IBcLQ/s1600/home.png);
}
ul#navixed .about a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb77ERt1ry3LAxgCBR_Wvg9P0TRTyuZ7HFsZOh_dHt9IBneK4yZBrpm0tROMQhMYWPJEKnDogG3eqjDLaFbwB8VqZktvWMMLH0gBo-n1DJpVhSKpG8ctXqgd95J0eGwxNfq2zpw2hKXIA/s1600/id_card.png);
}
ul#navixed .search a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6zxLlOP74I6ISPbu1rlcuBCD3tNZ3_zQfzHvyy0Ra8wYBOdrqFtnEw6BPHIbIOCDPnO3bgzU9XSaed_GEuY68inDsosh3KOP3-ywflxc-QYPH_9loUqJf3z45MfI9h97Y7FLPi7fC-h4/s1600/search.png);
}
ul#navixed .podcasts a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiOM4Z-H9OiGEX9Cb-K-9yRNn_OH__P6Z2zazBultnuCL0xcJW1EZt2aZJQz8_PQYHZVPzyTHbSXgSRn9F8P0j_MpKIxuPw89U45esfj761bevo2j5iPUDQ0t-5vi59JnOXlAJGAXI3iA/s1600/ipod.png);
}
ul#navixed .rssfeed a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNL7z6Htvs2hiC5iHAxAgrr15sNElbp01LzhKPk5aYarfvVFjtCLKLeS2to1foLd8EhFfnpmSevZqz6RWUZ7ANAdaDZxzE3UF7S4C6ahW_8WzkcishO7A7MZE7huvVvNfibCCKkgO66M0/s1600/rss.png);
}
ul#navixed .photos a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7TsUVpI3Bc6VJh-5qJYcVSrUV0FWnbZm6Q1ec_ytGps0hye2bSW4dbe2DcA9lIRk1iXx1_YaqAj6_7Xtzd4zZLy3Fk7avPgP2hnDu2f5Nc57y7VoV0DXHVOK2VRkgfh1bBPfxwXHTFVg/s1600/camera.png);
}
ul#navixed .contact a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJpVL8yIB1odGRkPYocdGPZrdA__mMmUtimn4IW9B4byDG2HJD7RC2LG3bwU47PoaVl27FaL3RxDntDKGHDbGqbrp-joCRlxoupiZryDK9MkaxN_pbUti3obqnDk3ir9jRAxeTx4xGpD4/s1600/mail.png);
}

5. Jika sudah, cari lagi kode </head>, kemudian script berikut ini diatasnya

6. Baiklah yang terakhir Untuk menampilkan menu navigasi horizontalnya, simpan kode CSS berikut sebelum <body>

<ul id='navixed'>
<li class='home'><a href='#'><span>Home</span></a></li>
<li class='about'><a href='#'><span>About</span></a></li>
<li class='search'><a href='#'><span>Search</span></a></li>
<li class='photos'><a href='#'><span>Photos</span></a></li>
<li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li>
<li class='podcasts'><a href='#'><span>Podcasts</span></a></li>
<li class='contact'><a href='#'><span>Contact</span></a></li>
</ul>

7. Akhirnya Selesai juga, Lalu jangan lupa simpan / save ya teman-teman.

sekian dulu tutorial membuat menu Beautiful Slide Out Navigation, Semoga tips n tutorial langkah-langkahnya mudah dimengerti dan mudah untuk diterapin.

yang pastinya selamat mencoba dan jangan menyerah....

>>SEMOGA BERMANFAAT<<

Cara Membuat Permalink Di Bawah postingan blog

noreply@blogger.com (PHOTOGRAPHY) — Fri, 17 Aug 2012 00:09:00 -0700

Cara Membuat Permalink Di Bawah Postingan Blog - Cara mudah menjadikan / membuat / mengubah template blog / blogspot / web menjadi / lebih SEO friendly / mudah diindex oleh google / mesin pencari / search engine dengan Permalink DIbawah Postingan Blog.

Akhirnya setelah sekian lama tidak menyentuh blog sama sekali dikarenakan sibuk kerja di kantor. akhirnya pada liburan 17 agustus ini saya menyempatkan diri untuk membuat tips bagi temen-temen blogger yang masih belum bisa Membuat Permalink Di Bawah Postingan blog kalian.

Seperti yang anda lihat pada blog ini,setiap anda membuka suatu posting,diakhir posting akan tertera permalink yang mampu dibaca oleh mesin pencari,Google pada khususnya. Sehingga Tips ini bisa membantu temen-temen blogger yang pemula seperti saya dalam hal meningkatkan pengunjung atau sering disebut dengan SEO Friendly.

Baiklah nggak usah basa basi lagi, saya akan langsung aja ke langkah membuat permalink dibawah postingan blog dengan mudah:

Pertama, Pastikan kalian sudah masuk ke layar pengaturan template seperti gambar dibawah ini. setelah itu kalian dapat meng-klik edit html

kedua, kalian dapat pilih tombol LANJUTKAN / Next

dan Seperti biasa,jangan lupa contreng tulisan Expand Widget Templates ya :-)

Berikutnya,cari kode ]]></b:skin> (gunakan Ctrl+F untuk membantu pencarian),setelah ketemu kode tersebut,persis diatasnya letakkan kode css berikut :

.membuatpermalinkblogger {border: 1px solid #EFF0F1; padding: 5px; background: #ffffff;-moz-border-radius:5px;} .membuatpermalinkblogger a {background:none;} img.float-right {margin: 5px 0px 0 10px;} img.float-left {margin: 5px 10px 0 0px;}

Selanjutnya,cari kode berikut:

<data:post.body/>
atau <p><data:post.body/></p>

Jika sudah ketemu,hapus kode tersebut dan gantilah dengan kode berikut:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p><data:post.body/></p>
<div class='membuatpermalinkblogger'>
<center><small>Anda
 sedang membaca artikel tentang 
<strong><u><data:blog.pageName/></u></strong>
 dan anda bisa menemukan artikel <data:blog.pageName/> ini dengan 
url <strong><data:post.url/></strong>,anda boleh 
menyebar luaskannya atau mengcopy paste-nya jika artikel 
<strong><data:blog.pageName/></strong> ini sangat 
bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link
 <u><a 
expr:href='data:post.url'><data:blog.pageName/></a></u>
 sumbernya.</small></center></div>
<b:else/>
<p><data:post.body/></p>
</b:if>

Lalu, simpan/save template kalian dan lihat hasilnya.

Sekian dulu tutorial Membuat Permalink Di Bawah Postingan,semoga hasilnya memuaskan dan terus mencoba.

>>>>>....SEMOGA BERMANFAAT....<<<<<

Tutorial mudah Cara mendaftar di BETAZONE

noreply@blogger.com (PHOTOGRAPHY) — Sun, 24 Jul 2011 02:29:00 -0700

Mungkin dari beberapa temen-temen ada yang belum mengetahui cara Cara mendaftar di BETAZONE. Postingan ini juga melanjutkan dari beberapa postingan saya sebelumnya yaitu BlackBerry Messenger BBM V 6.0.0.111 BETA untuk OS 5 dan 6
yang mencari key untuk semua aplikasi blackberry versi BETA tutorial ini dapat kalian gunakan.
jadi perhatikan baik-baik step-step dibawah ini:

1. pertama tama kalian bisa membuka link ini : http://getbynow.com atau http://vidproxy.com atau http://webproxy.tw atau http://www.freeproxy.ca
tampilannya bisa kalian lihat dibawah ini:

lalu pada kotak link url kalian isikan : www.blackberry.com/beta

2. Selanjutnya kalian pilih "Register Now"

3. Lalu kalian bisa isikan data-data kalian, menurut saya isinya asal saja kecuali email, Pin bb kalian. jangan lupa untuk option Negara kalian pilih USA/UK (Jangan diisi INDONESIA)
Untuk pengisian Password yang masih bingung: isi dengan Huruf besar, huruf kecil, angka
Contoh (Faen_Cool12345) ingat jangan lupa huruf besarnya.

4. Setelah kalian register maka ada pilihan seperti gambar dibawah:
kalian bisa Pilih "Agree" → Submit!

5. Jika kalian melakukan langkah diatas dengan benar maka kalian tinggal menunggu kiriman dari RIM ke Email kalian (cek folder spam jika tidak ada di inbox).

6. Apabila kalian sudah menerima email dari RIM maka tampilannya akan seperti berikut:

7. Setelah mendapatkan email kalian buka [DARI BB] : www.blackberry.com/beta (ga pake proxy!)
lalu LOGIN sesui data yang kalian masukan sebelumnya pada pendaftaran (pastikan account sudah verified!)

8. Jika sudah LOGIN kalian Cek bagian "Eligible Program" disana ada pilihan program yang ingin kalian gunakan.
Jika kalian ingin mendapatkan KEYCODE, kalian harus download APP BETA yang kalian inginkan dati balackberry kalian

(jadi PERCUMA JIKA KALIAN TIDAK MENGGUNAKAN PAKET BIS UNLIMITED/BIS Irit+WIFI)

KETERANGAN :
Jika program yang kalian cari tidak ada jangan tanyakan kenapa KARENA :
tidak semua member betazone mendapatkan aplikasi yang kalian inginkan.

TIPS!!
Untuk mendapatkan aplikasi yang kalian inginkan maka lebih baik cepatlah daftar agam mendapatkannya. karena biasanya program akan ditutup setelah target jumlah user tercapai.

Untuk mendapatkan KEY
akan kalian dapatakan setelah kalian sudah mengikuti langkah diatas dan sudah mendownload aplikasi dari betazone maka otomatis key akan dikirimkan ke email anda.

seperti tampilan dibawah:

Sekian dari tutorial dari saya jika ada pertanyaan silahkan saja memberikan komentar di bawah untuk berbagi. terima kasih.

BlackBerry Messenger BBM V 6.0.0.111 BETA untuk OS 5 dan 6

noreply@blogger.com (PHOTOGRAPHY) — Sun, 24 Jul 2011 01:21:00 -0700

Apa yang terbaru dari BlackBerry Messenger BBM V 6.0.0.111 BETA, saya akan menjelaskan beberapa fitur yang baru dari BlackBerry Messenger V 6.0.0.111 BETA ini.
awalnya saya kira BBM V 6.0.0.111 BETA ini hanya untuk OS 6 keatas, ternyata saya salah BBM V 6.0.0.111 BETA ini bisa kalian nikmati di blackberry anda yang masih OS 5. dan akhirnya saya putuskan untuk mencoba BBM V 6.0.0.111 BETA ini di blackberry saya.

menurut saya kelebihan dari BBM V 6.0.0.111 BETA ini selama 1 hari pemakaian:

1. terdapat fasilitas (NEW CONTACT CATEGORY) jadi kita bisa mengkategori teman bbm kalian dengan nama yang kalian inginkan.

2. Tersedia fasilitas (NEW MULTY PERSON CHAT) : kelebihan yang satu ini sama seperti yahoo messenger kita bisa membuat diskusi beberapa orang dalam satu Chat.

Sementara hanya itu yang saya dapatkan selama pemakaian 1 hari, mungkin kedepan saya akan memberikan informasi yang lebih lagi tentang kelebihan BBM V 6.0.0.111 BETA ini. Jika kalian ada informasi yang lebih tentang BM Versi 6.0.0.111 BETA ini, silahkan kalian memberikan komentar dibawah untuk berbagi kepada temen- yang lain.

Untuk informasi yang sedang dikembangkan dari BBM Versi 6.0.0.111 BETA ini:

under investigation:
-old messages pop up during chat
-messages don't appear to send/enter doesn't send messages
-contacts hidden after reboot
-group chats aren't showing in message list
Jika kalian mau download-nya :

Untuk Os 5.0

BBM 6.0.0.111 BETA OS 5.0

Untuk Os 6.0
BBM 6.0.0.111 BETA OS 6.0

Keterangan:
Pada saat kalian menginstall BBM Versi 6.0.0.111 BETA ini akan diminta key
maklum BBM V6 ini masih versi beta....
jika kalian ingin mengambil key tersebut kaliana bisa mampir di postingan saya yang
Tutorial mudah Cara mendaftar di BETAZONE

10 situs yang berguna untuk Menganalisa berat dan loading blog anda

noreply@blogger.com (PHOTOGRAPHY) — Thu, 21 Jul 2011 12:42:00 -0700

tips kali ini saya mau share 10 situs yang berguna untuk menganalisa berat dan loading blog dengan mudah dan lengkap.

saat ini ukuran size sebuah blog merupakan hal yang penting selain mempermudah pengunjung blog kita untuk tidak menunggu loading yang terlalu lama, maklum di indonesia kecepatan internet masih belum secepat negara tetangga. selain belum meratanya sarana yang cukup untuk internet hingga ke plosok menyebabkan tidak semua pengunjung mendapatkan akses yang cepat.

Saat ini juga SEO atau Search Engine Google salah satunya ditentukan oleh ukuran dan waktu loading sebuah blog yang cepat. Sehingga menjadi suatu keharusan bagi temen-temen yang merasa blognya size nya terlalu berat maka sebaiknya lebih diperingan lagi, sehingga hasil serp (search engine result page) lebih maksimal. jika kalian ingin mengetahui seberapa berat blog kalian bisa mampir ke postingan saya sebelumnya Cara mengetahui berat dan loading blog anda.

Mungkin penjelasan diatas cukup untuk blogger memiliki pandangan tentang bagaimana supaya blog atau hasil posting yang kita lakukan mampu terindex google dengan cepat.

nah kali ini saya akan memberikan beberapa situs garatis yang menurut saya cukup berguna bagi temen-temen blogger yang ingin mengatur blog kalian untuk membuat lebih ringan sehingga loading pada blog kita menjadi lebih cepat, diantaranya adalah :

1. http://tipsfaenblog.blogspot.com

tool yang satu ini sangat mudah sekali untuk menganalisa berat pada blog kita, tinggal masukkan URL lalu tekan tombol check lalu akan keluar hasil sizenya dan lama loading pada blog kita. tools ini saya dapat dari http://www.iwebtool.com

2. http://tools.pingdom.com

Tools yang satu ini cukup menarik untuk dicoba kelebihan dari tools ini selain mudah menggunakannya tools ini bisa memberikan informasi grafik tentang lamanya loading dari semua objek link yang ada dalam blog kita, sehingga kita mengetahui link mana yang membuat blog kita loadingnya lebih lama sehingga kita bisa melakukan tindakan apakah tetap mempertahankan atau tidak.

3. http://www.numion.com/Stopwatch

dari namanya sudah terlihat "STOPWATCH" jadi tools ini untuk mengetahui total waktu yang dibutuhkan untuk membuka blog kalian.

4. http://websiteoptimization.com/services/analyze

Tools kali ini memberikan pilihan pengecekan berupa URL blog tau kode HTML blog kalian. Dan analisisnya juga lebih lengkap, disini memberikan informasi dan mengukur seberapa cepat loading blog/website apabila diakses menggunakan 6 kecepatan koneksi internet. tools ini juga memberikan Analysis and Recommendations untuk acuan kita mengoptimasi bolog/website kalian.

5. http://internetsupervision.com

Tools ini berfungsi untuk mengetahui ukuran blog/website jika diakses dari beberapa negara. jadi menurut saya tools ini cukup menarik untuk dicoba.

6. http://www.webslug.info

Kali ini apabila temen-temen ingin compare blog kalian dengan blog yang lainnya kita bisa menggunakan fasilitas tools ini.

7. http://www.octagate.com/service/SiteTimer

Kegunaan dari tools ini tidak jauh berbeda dengan PINGDOM secara keseluruhan sudah saya jelaskan di tools pingdom nomor 2.

8. http://site-perf.com

Tools ini hampir sama dengan internetsupervision yang sudah saya jelaskan diatas, tetapi tools ini mempunyai kelebihan yaitu kita bisa memilih negara yang kita inginkan. dan hasil analisisnya sama dengan analisis PINGDOM.

9. http://www.linkvendor.com/seo-tools/speedtester.html

untuk tools yang satu ini hampis sama dengan internetsupervision, tetapi disini memberikan informasi berdasarkan ukuran size image dan javascript yang kalian gunakan secara terpisah.

10. http://webwait.com

tools yang terakhir ini dapat memberikan informasi belama lama waktu loading/kecepatan blog/website secara berkali-kali sesuai keinginan kita. dan tools ini informasi analisis average blog/website sampai median dan standar deviasi blog/website.

Sekian dulu saran dari saya, Mungkin masih banyak lagi situs yang dapat berguna untuk membantu mengukur dan menganalisis blog/website. Karena saya juga masih dalam tahap belajar maka kita sama2 saling belajar bersama. Dan semoga postingan kali ini dapat bermanfaat bagi blogger yang ingin mengetahui berat blog kalian.

Cara mengetahui berat dan loading blog anda

noreply@blogger.com (PHOTOGRAPHY) — Thu, 21 Jul 2011 06:53:00 -0700

Mungkin beberapa temen-temen blogger ingin mengetahui seberapa besar berat dan loading blog kalian. Disini saya menyediakan tool untuk mengetahui masalah berat dan loading blog kalian. Kalian dapat mengetes-nya dibawah ini:

silahkan masukan URL (max.10) anda di bawah ini kemudian tekan tombol CHECK

Your domain(s): Enter each address on a new line (Maximum 10)

	(eg. iwebtool.com)

&lt;p&gt;&amp;amp;amp;amp;lt;p&amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br /&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;gt;&lt;/p&gt;

Keterangan :
Biasanya untuk ukuran normal untuk sebuah blog biasanya size-nya sekitar 100kb atau jika dibawah itu maka blog kalian bisa dikatakan ringan, tetapi jika lebih dari 100kb sebaiknya segera kurangin sampai batas normal. untuk screenshotnya bisa kalian lihat dibawah:

terlihat diatas blog saya masih terasa berat....hehehe, sebenernya saya ingin meringankan lebih rendah lagi tapi saya tidak tega untuk menghapus beberapa widget yang ada jadinya saya pertahankan deh....aduh jadi curhat nih....oke kembali lagi ke topik....
Apabila dari temen-temen blogger sudah mengukur blog kalian, apabila blog kalian terasa berat silahkan kalian kurangi widget yang tidak perlukan. Apalagi bagi blog temen-temen yang sizenya masih diatas 150kb, jadi saran saya lebih baik untuk menguranginya atau kalian bisa menggunakan template yang ringan saja sehingga kalian bisa menggunakan widget yang lebih banyak.

Mungkin apabila kalian ingin Menganalisa seberapa berat blog kita kalian bisa mampir ke postingan saya yang selanjutnya 10 situs yang berguna untuk Menganalisa berat dan loading blog anda 10 situs yang berguna untuk Menganalisa berat dan loading blog anda
atau kalian ingin meringankan blog kalian bisa mampir ke sini

sekian dolo tips dari saya apabila masih ada yang kurang kalian bisa menambahkan dengan posting dibawah. Karena saya juga masih dalam tahap belajar maka kita sama2 saling belajar bersama. Dan semoga postingan kali ini dapat bermanfaat bagi blogger.

Membuat Kotak Komentar Blogger Bergambar

noreply@blogger.com (PHOTOGRAPHY) — Mon, 23 May 2011 02:26:00 -0700

Hallo All.....
kali ini saya akan memberiakan trik membuat kotak komentar blogger bergambar. untuk contohnya kalian bisa liat gambar diatas. Beberapa temen2 mungkin sudah banyak yang membuat trik ini tetapi mungkin saya dapat menjelaskan lagi dengan mudah....

oke sekarang kita langsung aja mengikuti langkah-langkahnya:

Seperti biasa anda Log In dulu ke Blogspot

Klik Rancangan / Tata Letak--> Edit HTML

Jangan lupa untuk memberikan tanda chacklist pada tulisan "Expand Template Widget"

Cari Kode berikut :

Setelah anda menemukan kode tersebut, anda dapat menggantinya dengan Kode dibawah ini.

Selanjutnya anda menambahkan kode dibawah ini dan letakkan sebelum kode ]]></b:skin>

#ib-form iframe{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaxj7tqUg10ggo49EZ4SQ0wVyCaflCl5NAbv5YSQqWMa-mVOaK4heusuCRYTPvqHozXW1_iTvJ4EYb0YsUBd5iHeO8ypz2Bkvmas_YlGwhQZsDUFZCchT9cxRaMr0ELCK6AodcACJOD3ZA/s1600/Komentar+Lora+Malunk.jpg) no-repeat bottom right;
border:7px solid #C7C7C7;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#7EB2AC;
width:95%;height:250px;}
#ib-form iframe:hover{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaxj7tqUg10ggo49EZ4SQ0wVyCaflCl5NAbv5YSQqWMa-mVOaK4heusuCRYTPvqHozXW1_iTvJ4EYb0YsUBd5iHeO8ypz2Bkvmas_YlGwhQZsDUFZCchT9cxRaMr0ELCK6AodcACJOD3ZA/s1600/Komentar+Lora+Malunk.jpg) no-repeat bottom right;
border:7px solid #7EB2AC;}
#ib-form a{
color:#7EB2AC;}

Mudah kan?silahkan mencoba langkah2 diatas, apabila menarik silahkan temen2 follow blog ini atau langganan feed blog ini....

>>>>>....SEMOGA BERMANFAAT....<<<<<

5 Add-ons Mozilla Firefox yang Membantu Untuk Web Development

noreply@blogger.com (PHOTOGRAPHY) — Sun, 22 May 2011 14:24:00 -0700

Selajutnya pada kesempatan kali ini saya akan memberikan saran aja bagi temen2 yang kebiasaan sering online didepan komputer dan aktifitasnya banyak dihabiskan dengan membongkar script untuk mendapatkan tampilan template yang menarik. Mungkin dari beberapa temen2 rata2 menggunakan Mozilla Firefox? karena memang merupakan salah satu browser terpopuler saat ini, kemudahan untuk menambah berbagai macam add-ons menjadi salah satu kelebihan Mozilla Firefox dibandingkan browser-browser yang lainnya. Buat saya sendiri browser keluaran Mozilla seperti Firefox dan Flock masih menjadi favorit saya karena banyak sekali add-ons mozilla yang sangat membantu pekerjaan saya. mungkin add-ons yang saya berikan berguna bagi temen2 yang sedang mengmbangkan template web kalian maupun blog.

1. ColorZilla

add-ons ColorZilla ini bagi saya merupakan salah satu dari beberapa add-on, karena add-on ini memudahkan saya dalam mengetahui kode warna pada sebuah tampilan web.dan add-on ini penggunaanya sangat mudah. Kita tinggal memilih tombol yang berada pada kiri bawah lalu kita plih -Eyedropper seperti tampilan dibawah: lalu Kita cukup mengarahkan cursor kesebuah objek ataupun text untuk mengetahui kode warna yang digunakan.

2. Firebug

add-ons Firebug kali ini berfungsi untuk dapat melihat coding dibalik sebuah halaman web ataupun blog. Jadi apabila kita ingin melihat informasi mengenai CSS web atau blog lain kita dapat dengan mudah mengetahuinya. Biasanya kita sering terbiasa apabila kita ingin melihat CSS blog atau web lain kita penggunakan bantuan PageSource yang ada pada Mozilla, Tetapi menurut saya Firebug ini dapat memberikan informasi yang lebih mendetail seperti kode CSS yang digunakan dan sebagainya.

3. MeasureIt

Selanjutnya add-ons MaesureIt yang ini berfungsi untuk mengukur tinggi dan lebar sebuah objek, dengan menggunakan add-ons ini kita dapat dengan mudah mengetahui ukuran sebuah objek seperti sidebar, footer, content, gambar dan sebagainya. Jadi Add-on kali ini sangat berguna bagi temen2 yang membuat gambar tapi ga tau berapa ukuran dari ukuran yang mau kita letakkan gambar.

4. Screengrab

untuk add-ons MeasureIt ini berfungsi apabila kita ingin melakukan screen capture pada browser. Kelebiha dari add-on kali ini kita dapat menyimpan tampilan web secara penuh dari atas hingga ke bawah. dan kita dapat menyimpannya dalam format PNG maupun JPG. selain itu kita juga dapat langsung mengcopy-kan kedalam photoshop.

4. Window Resizer

Lalu Windows Resizer yang ini berfungsi untuk membantu mengecek tampilan web atu blog kita pada revolusi yang berbeda2. Mungkin sebagian tampilan Web atu Blog yang kalian gunakan hanya rapih pada ukuran tertentu misalnya pada tampilan 1024x768 tetapi tampak berantakan pada resolusi 1600x1200.
Karena tidak semua temen2 menggunakan screen resolusi yang sama. Nah disinilah kita dapat memanfaatkan add-on ini sehingga kita tidak melihat tampilan web atau blog kita pada satu tampilan saja tetapi

Sekian dulu saran dari saya, Mungkin masih banyak lagi add-on yang dapat berguna untuk membantu Web Development dalam berkreasi. Karena saya juga masih dalam tahap belajar maka kita sama2 saling belajar bersama. Dan semoga postingan kali ini dapat bermanfaat bagi blogger.

Cara Membuat Efek Fade In pada Kotak Text dan Gambar

noreply@blogger.com (PHOTOGRAPHY) — Sun, 22 May 2011 14:06:00 -0700

Selamat dateng teman2 sekarang saya akan memberikan tutorial memberikan efek fade in pada gambar maupun kotak text. mungkin dari beberapa temen2 udah pada tau fungsi dari efek ini. tapi apabila belum tau efek ini memberikan efek blur pada gambar dan apabila panah mause mengarah ke gambar maka efek blurnya akan hilang, klo masih bingung mungkin kalian bisa liat demo dibawah:

Demo efek fade in pada gambar :

Demo efek fade in pada kotak text :

Demo fade in
semoga berminat

Bagaimana demo diatas? apabila kalian tertarik makna temen2 bisa mengikuti langkah2 dibawah:

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Tempatkan Kode berikut di atas kode </head>

<script type="text/javascript" src="http://h1.ripway.com/faencool/untuk blog/FADEIN.JS"></script>

Masukkan kode berikut di atas kode </body>

<script type="text/javascript">
gradualFader.init() //activate gradual fader</script>

Simpan Template

Selanjutnya kalau anda ingin memberikan efek fade in pada gambar silahkan masukkan kode berikut pada gambar anda.

Kode untuk membuat kolom tulisan dengan efek fade in

<div style="width: 300px; /* lebar kolom tampilan */ border: 1px solid gray; /* warna border */ background: grey" /* warna bacground */ class="gradualfader">

Masukkan tulisan anda di sini

</div>

Kalau anda ingin posisi gambar di tengah tinggal masukkan kode merah di bawah ini

Ok selesai

silahkan mencoba langkah2 diatas, apabila menarik silahkan temen2 follow blog ini atau langganan feed blog ini....

>>>>>....SEMOGA BERMANFAAT....<<<<<

Daftar Isi

noreply@blogger.com (PHOTOGRAPHY) — Mon, 9 May 2011 03:21:00 -0700

Tutorial Keren Cara Membuat Widget Tab View menu versi 2 (abu farhan)

noreply@blogger.com (PHOTOGRAPHY) — Thu, 14 Apr 2011 00:46:00 -0700
Akhirnya setelah beberapa lama mencoba membuat tab menu versi abu farhan. kelebihan tab ini dari sebelumnya yaitu pada versi ini kita dapat menyisipkan widget yang telah disediakan oleh blog itu sendiri, misalnya seperti Popular Post, Blog Arcive, adsense dan lain-lain.contohnya bisa aga liat diblog ini....
baik mungkin saya langsung aja memberikan langkahnya cukup mudah koq asal sesuai dengan intruksi dibawah.

Langkah awal, pasang kode CSS dibawah ini dengan meng-copy paste kode di bawah tepat di atas ]]></b:skin>.

/* Tabbed Sidebar Widgets
--------------------------------- */
.widget-wrapper2{
border:1px solid #494e52;
background-color:#636d76;
padding:8px;
}

.widget-tab {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabcontentbg.gif) repeat-x scroll left bottom !important;
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}

.widget-tab ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.widget-tab ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:10px;
padding-bottom:10px;
font-size:13px;
}
.widget-tab ul li:last-child {
border-bottom:none;
}
.widget-tab ul li a {
text-decoration:none;
color:#3e4346;
}
.widget-tab ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.tab-content ul li a:hover {
color:#a59c83;
}
.tab-content ul li a:hover small {
color:#baae8e;
}

.active-tab{
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabtopbg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;

}

ul.tab-wrapper {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
ul.tab-wrapper li {
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#191919 url(http://i195.photobucket.com/albums/z105/dantearaujo/tabinactivebg.gif) repeat-x scroll left top;
border:1px solid #464C54;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:2em;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin-right:1px;
padding:8px 14px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}

Keterangan: CSS diatas adalah untuk membentuk tampilan widget, jadi kalian bisa mengedit sesuai dengan keinginan kalian

Setelah itu, kita akan memasang script JQuery copy dan paste kode berikut tepat di atas </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

keterangan: Kalian tidak perlu memasang script ini jika script ini sudah ada di blog kalian. Kalau belum ada, copy dan paste kode diatas.

Yang terakhir, ini untuk menampilkan tab menu ini ke dalam blog kalian yaitu dengan meng-copy dan paste kode berikut juga di atas </head>.

<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar1";
</script>
<script type="text/javascript" src="http://www.yourjavascript.com/0293812025/bloggertabv1.0-min.js"></script>

Keterangan: coba kalian perhatikan kode yang bewarna merah
starttab : nomor widget yang akan masuk dalam tab pertama
endtab    : jumlah widget yang akan masuk ke dalam Tab Menu
sidebarname : nama id dari kolom yang akan di jadikan Tab Menu.

Untuk mencari tahu nomor widget yang akan dijadikan Tab Menu kalian bisa lihat gambar berikut:

Keterangan:

Kalau ingin membuat Tab Menu terdiri dari Video, Murottal, & Blog Archive maka atur agar "starttab=0" dan "endtab=2". Apabila ingin mengikutsertakan Label, maka atur agar "endtab=3".
Apabila ingin agar Tab Menu berada di bawah widget Video, atur agar "starttab=1", sehingga Tab Menu akan berisi Murottal, Blog Archive, dan Label.

Untuk mencari apa nama "id" dari sidebar, caranya cukup gampang, yaitu pada "Edit HTML" cari teks bertuliskan nama widget pertama. Contohnya seperti di atas, maka cari kata " 'Video' " maka akan tampil seperti berikut:

....<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Video' type='HTML'/>
<b:widget id='HTML2' locked='false' title='Murottal' type='HTML'/>...

Nah...!!! yang berwarna biru itu adalah "id" dari sidebar kalian. Perhatikan "id" dari <b:section.. yang merupakan "id" yang harus di atur pada kode Tab Menu. Dengan begitu, isi "sidebarname=sidebar".

selesai deh....mudah kan apabila ngikutin sesuai yang diatas mudah-mudahan berjalan normal...
apabila ada pertanyanya silahkan posting dibawah...akan ane bantu sebisa ane....

Tutorial Keren Cara Membuat Widget Tab View menu jQuery

noreply@blogger.com (PHOTOGRAPHY) — Wed, 6 Apr 2011 23:00:00 -0700
Sekedar sharing aja yang masih bingung dalam membuat seperti ini:

DEMO
DOWNLOAD <<<<< silahkan download javascriptnya disini

Saya akan berbagi tentang cara membuat tab menu diatas.
Adapun langkah-langkahnya sebagai berikut :

1.Seperti biasa anda harus log in dulu ke blogger
2.Pilih layout
3.Kemudian pilih edit HTML
4.centang Expand Widget Templates dan backup dulu templete anda (untuk menghindari apabila terjadi kesalahan)
5.Copy code dibawah ini dan pastekan diatas code </head> atau di bawah code ]]></b:skin>

<meta content='text/html; charset=utf-8' http-equiv='Content-Type'/>
<title>jQuery UI Tabs Demo</title>
<link href='style.css' rel='stylesheet' type='text/css'/>
<script src='http://h1.ripway.com/faencool/tab%20wedget%20blog/1/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://h1.ripway.com/faencool/tab wedget blog/1/jquery-ui-personalized-1.5.2.packed.js ' type='text/javascript'/>
<script src=' http://h1.ripway.com/faencool/tab wedget blog/1/sprinkle.js' type='text/javascript'/>

seperti gambar dibawah ini:

6.Untuk css code anda bisa menggunakan code css di bawah ini copy dan pastekan diatas ]]></b:skin>

* {
margin: 0;
padding: 0;
}

body {
font-size: 75%;
color: #222;
background: #ffffff;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.6em;
}

.widget {
width: 310px;
margin: 20px;
padding: 10px;
background: #f3f1eb;
border: 1px solid #dedbd1;
margin-bottom: 15px;
}

.widget a {
color: #222;
text-decoration: none;
}

.widget a:hover {
color: #009;
text-decoration: underline;
}

.tabnav li {
display: inline;
list-style: none;
padding-right: 5px;
}

.tabnav li a {
text-decoration: none;
text-transform: uppercase;
color: #222;
font-weight: bold;
padding: 4px 6px;
outline: none;
}

.tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected a {
background: #dedbd1;
color: #222;
text-decoration: none;
}

.tabdiv {
margin-top: 2px;
background: #fff;
border: 1px solid #dedbd1;
padding: 5px;
}

.tabdiv li {
list-style-image: url("star.png");
margin-left: 20px;
}

.ui-tabs-hide {
display: none;
}

seperti gambar dibawah ini:

7. Dan untuk kode html,letakan kode html dibawah ini dimana anda ingin menampilkan Tab Stuktur Menu tersebut:

lalu masukkan kode dibawah ini:

<div id="tabvanilla" class="widget">

<ul class="tabnav">
<li><a href="#popular">Popular</a></li>
<li><a href="#recent">Recent</a></li>
<li><a href="#featured">Featured</a></li>
</ul>

<div id="popular" class="tabdiv">
<ul>
<li><a href="#">Welsh Zombie Sheep Invasion</a></li>
<li><a href="#">Sheep Rising From The Dead</a></li>
<li><a href="#">Blogosphere Daily Released!</a></li>
<li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li>
<li><a href="#">U2 Rocks New York's Central Park</a></li>
<li><a href="#">TA Soldiers Wear Uniforms To Work</a></li>
<li><a href="#">13 People Rescued From Flat Fire</a></li>
<li><a href="#">US Troops Abandon Afghan Outpost</a></li>
<li><a href="#">Are We Alone? A Look Into Space</a></li>
<li><a href="#">Apple iPhone 3G Released</a></li>
</ul>
</div>

<div id="recent" class="tabdiv">
<p>Lorem ipsum dolor sit amet.</p>
</div>

<div id="featured" class="tabdiv">
<ul>
<li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li>
<li><a href="#">Are We Alone? A Look Into Space</a></li>
<li><a href="#">U2 Rocks New York's Central Park</a></li>
<li><a href="#">TA Soldiers Wear Uniforms To Work</a></li>
<li><a href="#">13 People Rescued From Flat Fire</a></li>
<li><a href="#">US Troops Abandon Afghan Outpost</a></li>
<li><a href="#">Sheep Rising From The Dead</a></li>
<li><a href="#">Blogosphere Daily Released!</a></li>
<li><a href="#">Apple iPhone 3G Released</a></li>
<li><a href="#">Welsh Zombie Sheep Invasion</a></li>
</ul>
</div>

</div>

<div style="font-size:15px;color:#888">Terimakasih Atas Kunjungannya</div>
<a href="collection-tipsfaen.blogspot.com/">collection-tipsfaen.blogspot.com/</a> | <a href="">Kembali Ke TUtorial</a>

silahkan mencoba.....
apabila ada pertanyaan silahkan posting aja dibawah....

Tutorial Keren Cara Membuat Widget Tab View menu jQuery 2

noreply@blogger.com (PHOTOGRAPHY) — Wed, 6 Apr 2011 19:55:00 -0700
Sekedar sharing aja yang masih bingung dalam membuat seperti ini:

DEMO
DOWNLOAD <<<<< silahkan download javascriptnya disini

Saya akan berbagi tentang cara membuat tab menu diatas.
Adapun langkah-langkahnya sebagai berikut :

1.Seperti biasa anda harus log in dulu ke blogger
2.Pilih layout
3.Kemudian pilih edit HTML
4.centang Expand Widget Templates dan backup dulu templete anda (untuk menghindari apabila terjadi kesalahan)
5.Copy code dibawah ini dan pastekan diatas code </head> atau di bawah code ]]></b:skin>

<script src='http://tab-menu.googlecode.com/files/jquery-1.3.1.min.js ' type='text/javascript'/>
<script src='http://tab-menu.googlecode.com/files/jquery.scrollTo.js' type='text/javascript'/>

<script>

$(document).ready(function() {

//Get the height of the first item
$('#mask').css({'height':$('#panel-1').height()});

//Calculate the total width - sum of all sub-panels width
//Width is generated according to the width of #mask * total of sub-panels
$('#panel').width(parseInt($('#mask').width() * $('#panel div').length));

//Set the sub-panel width according to the #mask width (width of #mask and sub-panel must be same)
$('#panel div').width($('#mask').width());

//Get all the links with rel as panel
$('a[rel=panel]').click(function () {

//Get the height of the sub-panel
var panelheight = $($(this).attr('href')).height();

//Set class for the selected item
$('a[rel=panel]').removeClass('selected');
$(this).addClass('selected');

//Resize the height
$('#mask').animate({'height':panelheight},{queue:false, duration:500});

//Scroll to the correct panel, the panel id is grabbed from the href attribute of the anchor
$('#mask').scrollTo($(this).attr('href'), 800);

//Discard the link default behavior
return false;
});

});
</script>

seperti gambar dibawah ini:

6.Untuk css code anda bisa menggunakan code css di bawah ini copy dan pastekan diatas ]]></b:skin>

#scroller-header a {
text-decoration:none;
color:#867863;
padding:0 2px;
}

#scroller-header a:hover {
text-decoration:none;
color:#4b412f
}

a.selected {
text-decoration:underline !important;
color:#4b412f !important;
}

#scroller-header {
background:url(http://tab-menu.googlecode.com/files/header.gif) no-repeat;
width:277px;
height:24px;
padding:35px 0 0 15px;
font-weight:700;
}

#scroller-body {
background:url(http://tab-menu.googlecode.com/files/body.gif) no-repeat bottom center;
width:277px;
padding-bottom:30px;
}

#mask {
width:250px;
overflow:hidden;
margin:0 auto;
}

#panel {

}

#panel div {
float:left;

}

/* Extra styling for each panel*/

#panel ul {
list-style:none;
margin:0 5px;
padding:0;
}
#panel ul li {
padding:5px;
color:#557482;
border-bottom:1px dotted #ccc;
}

#panel ul li.last {
border-bottom:none !important;
}
#panel a {
text-decoration:none;
color:#557482;

}

#panel a:hover {
text-decoration:none;
color:#282828;

}

kode diatas bisa anda edit sesuai kenginan tampilan yang anda mau

seperti gambar dibawah ini:

7. Dan untuk kode html,letakan kode html dibawah ini dimana anda ingin menampilkan Tab Stuktur Menu tersebut:

lalu masukkan kode dibawah ini:

<div id="scroller-header">
<a href="#panel-1" rel="panel" class="selected">Populars</a>
<a href="#panel-2" rel="panel">Comments</a>
<a href="#panel-3" rel="panel">Recents</a>
<a href="#panel-4" rel="panel">Categories</a>
</div>
<div id="scroller-body">
<div id="mask">
<div id="panel">

<div id="panel-1">
<ul>
<li><a href="http://bambangpage.blogspot.com/2009/12/cara-membuat-tab-stuktur-menu.html">Cara Membuat Tab Struktur Menu</a></li>
<li><a href="http://bambangpage.blogspot.com/2009/11/cara-membuat-menu-multi-kolom-dengan.html">Cara Membuat Menu Multi Kolom dengan Tab Slide mode</a></li>
<li><a href="http://bambangpage.blogspot.com/2009/12/cara-membuat-jquery-slideshow-dengan.html">Cara Membuat Jquery Slideshow Dengan Cycle Plug In</a></li>
<li>Cara Membuat Simple JQuery Image Slide Show dengan Semi Transparent Caption</li>
<li>Cara Menghindari Spasi Di atas Table Di Postingan Blogger</li>
<li>Cara Membuat Menu Multi Kolom dengan Tab Slide mode</li>

<li>Cara Membuat News Update dengan gAjax RSS Ticker Pada Blog Atau Website anda</li>
<li>Cara Menambahkan Icon Atau image Disamping Title Sidebar</li>
<li>Cara Membuat Facebox Image Viewer</li>
<li>Cara Membuat Tulisan Berjalan Pada Address Bar</li>
<li class="last">Mengganti Kotak Komentar Haloscan menjadi Comment box Blogspot</li>
</ul>

</div>
<div id="panel-2">
<ul>
<li>Mengganti Kotak Komentar Haloscan menjadi Comment box Blogspot</li>
<li>Cara Membuat Kotak Komentar Blogger Dibawah Postingan</li>
<li>10 jQuery and non-jQuery javascript Rich Text Editors</li>
<li class="last">Mengganti Tulisan "Older Post / Newer Post" atau "Posting Lama / Posting Baru"</li>

</ul>
</div>
<div id="panel-3">
<ul>
<li>Cara Mengganti Tanggal Postingan dg Icon Calendar</li>
<li class="last">Cara Menampilkan Postingan Terbaru Pada blogspot</li>
</ul>
</div>
<div id="panel-4">

<ul>
<li>ajax</li>
<li>browser</li>
<li>cms</li>
<li>css-html</li>
<li>design</li>

<li>font</li>
<li>freebies</li>
<li>graphic</li>
<li>icon</li>
<li>inspiration</li>
<li>javascript</li>

<li>logo</li>
<li>photography</li>
<li>photoshop</li>
<li>php</li>
<li>seo</li>
<li>template</li>

<li>tips</li>
<li>tools</li>
<li>trend</li>
<li>tutorial</li>
<li>usability</li>
<li>wallpaper</li>

<li class="last">wordpress</li>
</ul>
</div>
</div>
</div>
</div>

<div style="font-size:15px;color:#888">Terimakasih Atas Kunjungannya</div>
<a href="collection-tipsfaen.blogspot.com/">collection-tipsfaen.blogspot.com/</a> | <a href="">Kembali Ke TUtorial</a>

silahkan mencoba.....
apabila ada pertanyaan silahkan posting aja dibawah....

Tutorial Keren Cara Membuat Widget Tab View menu jQuery 3

noreply@blogger.com (PHOTOGRAPHY) — Wed, 6 Apr 2011 11:29:00 -0700
Sekedar sharing aja yang masih bingung dalam membuat seperti ini:

DEMO
DOWNLOAD <<<<< silahkan download javascriptnya disini

Saya akan berbagi tentang cara membuat tab menu diatas.
Adapun langkah-langkahnya sebagai berikut :

1.Seperti biasa anda harus log in dulu ke blogger
2.Pilih layout
3.Kemudian pilih edit HTML
4.centang Expand Widget Templates dan backup dulu templete anda (untuk menghindari apabila terjadi kesalahan)
5.Copy code dibawah ini dan pastekan diatas code </head> atau di bawah code ]]></b:skin>

<script src='http://tab-menu.googlecode.com/files/jquery-1.3.1.min.js' type='text/javascript'/>
<script type="text/javascript">

$(document).ready(function() {

//Get all the LI from the #tabMenu UL
$('#tabMenu > li').click(function(){

//perform the actions when it's not selected
if (!$(this).hasClass('selected')) {

//remove the selected class from all LI
$('#tabMenu > li').removeClass('selected');

//Reassign the LI
$(this).addClass('selected');

//Hide all the DIV in .boxBody
$('.boxBody div').slideUp('1500');

//Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
$('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');

}

}).mouseover(function() {

//Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest
$(this).addClass('mouseover');
$(this).removeClass('mouseout');

}).mouseout(function() {

//Add and remove class
$(this).addClass('mouseout');
$(this).removeClass('mouseover');

});

//Mouseover with animate Effect for Category menu list
$('.boxBody #category li').click(function(){

//Get the Anchor tag href under the LI
window.location = $(this).children().attr('href');
}).mouseover(function() {

//Change background color and animate the padding
$(this).css('backgroundColor','#888');
$(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
}).mouseout(function() {

//Change background color and animate the padding
$(this).css('backgroundColor','');
$(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
});

//Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
$('#.boxBody li').click(function(){
window.location = $(this).children().attr('href');
}).mouseover(function() {
$(this).css('backgroundColor','#888');
}).mouseout(function() {
$(this).css('backgroundColor','');
});

});

</script>

seperti gambar dibawah ini:

6.Untuk css code anda bisa menggunakan code css di bawah ini copy dan pastekan diatas ]]></b:skin>

body{font-family:arial;font-size:10px;color:#ccc;background-color:#555}
a {color:#ccc;text-decoration:none;}
a:hover {color:#ccc;text-decoration:none}
#tabMenu {margin:0;padding:0 0 0 15px;list-style:none;}
#tabMenu li {float:left;height:32px;width:30px;cursor:pointer;cursor:hand}

li.comments {background:url(http://tab-menu.googlecode.com/files/tabComment.gif) no-repeat 0 -32px;}
li.posts {background:url(http://tab-menu.googlecode.com/files/tabStar.gif) no-repeat 0 -32px;}
li.category {background:url(http://tab-menu.googlecode.com/files/tabFolder.png) no-repeat 0 -32px;}
li.famous {background:url(http://tab-menu.googlecode.com/files/tabHeart.png) no-repeat 0 -32px;}
li.random {background:url(http://tab-menu.googlecode.com/files/tabRandom.png) no-repeat 0 -32px;}

li.mouseover {background-position:0 0;}
li.mouseout {background-position:0 -32px;}
li.selected {background-position:0 0;}

.box {width:227px}
.boxTop {background:url(http://tab-menu.googlecode.com/files/boxTop.png) no-repeat;height:11px;clear:both}
.boxBody {background-color:#282828;}
.boxBottom {background:url(http://tab-menu.googlecode.com/files/boxBottom.png) no-repeat;height:11px;}

.boxBody div {display:none;}
.boxBody div.show {display:block;}

.boxBody div ul {margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(http://tab-menu.googlecode.com/files/arrow.gif)}
.boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer}
.boxBody div ul li.last {border-bottom:none}
.boxBody div li span {font-size:8px;font-style:italic; color:#888;}

seperti gambar dibawah ini:

7. Dan untuk kode html,letakan kode html dibawah ini dimana anda ingin menampilkan Tab Stuktur Menu tersebut:

lalu masukkan kode dibawah ini:

<div class="box">
<ul id="tabMenu">
<li class="posts selected"></li>
<li class="comments"></li>
<li class="category"></li>
<li class="famous"></li>
<li class="random"></li>
</ul>
<div class="boxTop"></div>

<div class="boxBody">

<div id="posts" class="show">

<ul>
<li><a href="http://bambangpage.blogspot.com/2009/12/cara-membuat-jquery-slideshow-dengan.html">Cara Membuat Jquery Slideshow Dengan Cycle Plug In</a></li>
<li>Cara Membuat Simple JQuery Image Slide Show dengan Semi Transparent Caption</li>
<li>Cara Menghindari Spasi Di atas Table Di Postingan Blogger</li>
<li>Cara Membuat Menu Multi Kolom dengan Tab Slide mode</li>
<li>Cara Membuat News Update dengan gAjax RSS Ticker Pada Blog Atau Website anda</li>
<li>Cara Menambahkan Icon Atau image Disamping Title Sidebar</li>
<li>Cara Membuat Facebox Image Viewer</li>
<li>Cara Membuat Tulisan Berjalan Pada Address Bar</li>
<li class="last">Mengganti Kotak Komentar Haloscan menjadi Comment box Blogspot</li>
</ul>
</div>

<div id="comments">
<ul>
<li>Mengganti Kotak Komentar Haloscan menjadi Comment box Blogspot</li>
<li>Cara Membuat Kotak Komentar Blogger Dibawah Postingan</li>
<li>10 jQuery and non-jQuery javascript Rich Text Editors</li>
<li class="last">Mengganti Tulisan "Older Post / Newer Post" atau "Posting Lama / Posting Baru"</li>
</ul>
</div>

<div id="category">
<ul>
<li>Cara Mengganti Tanggal Postingan dg Icon Calendar</li>
<li class="last">Cara Menampilkan Postingan Terbaru Pada blogspot</li>
</ul>
</div>

<div id="famous">
<ul>
<li>Simple JQuery Modal Window Tutorial.</li>
<li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
<li>Navigation List menu + Jquery Animate Effect Tutorial.</li>

<li class="last">Exclusive RSS Icons from Queness.</li>
</ul>
</div>

<div id="random">
<ul>
<li>50 Monochromatic Website Designs.</li>
<li>Breadcrumbs In Web Design: Examples And Best Practices.</li>
<li>Simple JQuery Modal Window Tutorial.</li>

<li>Navigation List menu + Jquery Animate Effect Tutorial.</li>
<li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
<li>Exclusive RSS Icons from Queness.</li>
<li>New Smashing Freebies For Designers and Bloggers.</li>
<li class="last">Food Plates and Creative Dishware Designs.</li>
</ul>
</div>

</div>

<div class="boxBottom"></div>

</div>

<div style="font-size:15px;color:#888">Terimakasih Atas Kunjungannya</div>
<a href="collection-tipsfaen.blogspot.com/">collection-tipsfaen.blogspot.com/</a> | <a href="">Kembali Ke TUtorial</a>

silahkan mencoba.....
apabila ada pertanyaan silahkan posting aja dibawah....

hello

noreply@blogger.com (PHOTOGRAPHY) — Tue, 5 Apr 2011 23:14:00 -0700
selamat datang di blogku....
semoga bermanfaat...