Jurus Jitu Meningkatkan Traffic Blog

Sebenarnya materi ini pernah saya baca dan praktekkan mungkin 6 bulan yang lalu dari dibuatnya posting ini. Tapi karena waktu itu masih sangat pemula saya tidak paham sepenuhnya. Hingga akhirnya saya berkunjung ke blog teman, saya pelajari lagi dan saya coba review, mudah-mudahan bermanfaat bagi teman-teman yang berkenan mampir dan membaca artikel saya.
Meningkatkan jumlah pengunjung dengan traffic gratis tanpa harus pasang iklan sana-sini adalah hal yang diinginkan oleh para blogger atau webmaster. Materi yang saya uraikan merupakan sistem kerjasama, saling klik, atau sering diistilahkan seperti MLM.
Dengan bantuan sebuah situs bisa meningkatkan trafik blog, dengan cara memberitahukan link afiliasi situs Anda kepada orang lain.
Langsung saja kita pelajari bersama, supaya lebih mudah saya jelaskan dengan menggunakan gambar.

1 Silahkan klik link Fweb Traffic
2 Kemudian cari gambar di bawah ini.

Ada 6 link yang harus anda klik. Klik satu-satu, maka akan terbuka situs member lain. Lihat dibagian atasnya, akan muncul kode yang harus anda copy. (Kode muncul dalam beberapa detik).



Copy kode dari tiap halaman website member lain ke dalam 6 kolom yang ada di bawah ini sesuai urutan.



* Kemudian isi nama, email, judul situs anda, alamat situs, password. Kemudian klik Submit, jangan lupa Checklis dulu check box I have read and Agree…
* Kemudian akan muncul halaman seperti di bawah ini. Sebagai bukti bahwa proses Sign Up atau pendaftaran anda sudah berhasil.

* Buka email anda. Klik link untuk konfirmasi pendaftaran anda.

* Kemudian muncul halaman di bawah ini, yang memberitahukan proses pendaftaran sudah disetujui. Klik link dengan teks here.


* Muncul halaman Log In. Masukkan User Id dan Password. Mungkin anda bingung apa User Id anda? Anda buka lagi email anda, lihat link konfirmasi dibelakang lambang sama dengan ada angka-angka, itulah User Id Anda.


* Setelah Submit, anda masuk ke Member Area. Lihat Anda diberi link afiliasi untuk diberitahukan kepada orang lain.

Silahkan copy artikel ini, kemudian posting di blog Anda dengan menggunakan link Anda. Tapi ingat, kita harus saling kerjasama untuk mendapatkan hasil yang maksimal. Anda harus mau mengklik link situs orang lain, supaya orang lain juga mau mengklik link situs Anda.

Mudah-mudahan materi yang saya berikan bisa membantu Anda yang sedang dalam tahap belajar meningkatkan trafik blog atau situs.

Cara Membuat Tab View Link

Halo para sobat blogger semua selamat sore dan selamat ngeblog. Setelah tiga hari saya tidak posting karena kondisi internetnya bermasalah kali ini saya Alhamdulillah sebelum jalan-jalan ke tempat kawan semua nyempetin untuk posting dulu.

Sebelumnya saya pernah posting Cara Membuat Multitab Level Dropdwon Menu JQuery dan membuat Menu Tab Widgetkali ini saya akan mengetengahkan Cara Membuat Tab View Link. Tab View Link adalah salah satu Widget (tempat) menyimpan Link Kawan-Kawan kita, apalagi sobat yang suka tuker link, selain itu juga Widget ini sangat rapih enak dipandang dan juga membuat blog kita tambah cantik hehehe, itu menurut saya entah low menurut sobat, tapi mudah mudahan berkata gitu juga wkwkwk.

OK kalau sobat kurang puas dan pingin tahu seperti apa itu Tab View Link, di bawah ini contoh gambar Tab View Link :



Nah gimana?? Sobat tertarik?? OK kalau tertarik gita langsung ke tahap pembuatan.

Langkah Pertama

1. Seperti biasa Login ke blogger dengan id Sobat
   
2. Tuju menu Tata Letak
   
3. Pada tab menu, klik Edit HTML
   
4. Backup template anda, klik Download Template Lengkap untuk berjaga jaga
   
5. Kemudian cari kode ini </head> seletah ketemu paste kode berikut diatas kode </head>

<script src='http://kangfatur.googlecode.com/files/tabview.js'
type='text/javascript'/>

Langkah Kedua
Setelah langkah pertama sobat jalankan sekarang kita ke langkah kedua

1. Cari kode </b:skin>
   
2. Kalau sudah ketemu paste kode di bawah ini tepat di atas kode </b:skin>
   

/* Awal TAB VIEW 1*/
div.TabView div.Tabs
{
overflow: hidden;
}
div.TabView div.Tabs a
{
background: #0101DF ;
background-repeat: no-repeat;
float: left;
display: block;
width: 20px; /* Lebar Menu Utama Atas */
text-align: center;
height: 20px; /* Tinggi Menu Utama Atas */
padding-top: 0px;
vertical-align: middle;
border: 1px solid #eeeeee;
margin-top: 4px;
margin-left: 6px;
margin-right: 6px;
border-bottom: 2px solid #999999;
border-bottom-width: 2px;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama

Atas */
font-weight: 800;
color: #fff; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFFFF; /* Warna background Menu Utama Atas */
background: #0101DF; /* Warna Background Mouse Hover */
background-repeat: no-repeat;
}
div.TabView div.Pages
{
clear: both;
margin-top: 6px;
padding: 5px;
border: 2px double #999999; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #091a9f; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 200%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 4px 2px;
}
/* Akhir TAB VIEW 1*/

3. Kemudian klik Save Template

Setelah langkah-langkah diatas terpenuhi, kini kita lanjut ke babak penentuan hehe

1. Pergi ke Tataletak (Rancangan)
   
2. Tambah Gadget (HTML/Javascript)
   
3. Setelah itu masukan kode di bawah ini:

<left> <table border="0"><tbody>
<tr><td><form action="tabview.html" method="get">

<div id="TabView"
class="TabView">
<div style="width: 340px;" class="Tabs">
<a
href=""><font color="#ffffff"><b>A</b></font></a> <a href=""><font
color="#ffffff"><b>B</b></font></a> <a href=""><font
color="#ffffff"><b>C</b></font></a> <a href=""><font
color="#ffffff"><b>D</b></font></a> <a href=""><font
color="#ffffff"><b>E</b></font></a> <a href=""><font
color="#ffffff"><b>F</b></font></a> <a href=""><font
color="#ffffff"><b>G</b></font></a> <a href=""><font
color="#ffffff"><b>H</b></font></a> <a href=""><font
color="#ffffff"><b>I</b></font></a> <a href=""><font
color="#ffffff"><b>J</b></font></a> <a href=""><font
color="#ffffff"><b>K</b></font></a> <a href=""><font
color="#ffffff"><b>L</b></font></a> <a href=""><font
color="#ffffff"><b>M</b></font></a> <a href=""><font
color="#ffffff"><b>N</b></font></a> <a href=""><font
color="#ffffff"><b>O</b></font></a> <a href=""><font
color="#ffffff"><b>P</b></font></a> <a href=""><font
color="#ffffff"><b>Q</b></font></a> <a href=""><font
color="#ffffff"><b>R</b></font></a> <a href=""><font
color="#ffffff"><b>S</b></font></a> <a href=""><font
color="#ffffff"><b>T</b></font></a> <a href=""><font
color="#ffffff"><b>U</b></font></a> <a href=""><font
color="#ffffff"><b>V</b></font></a> <a href=""><font
color="#ffffff"><b>W</b></font></a> <a href=""><font
color="#ffffff"><b>X</b></font></a> <a href=""><font
color="#ffffff"><b>Y</b></font></a> <a href=""><font
color="#ffffff"><b>Z</b></font></a> <a href=""><font
color="#ffffff"></font></a></div>
<div style="width: 330px; height: 200px;" class="Pages">
<div class="Page">
<div class="Pad">

<table>
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
</div>
</div>
</form>
</td></tr>
</tbody></table>
</left>

4. Klik Tombol Simpan/Save. Selesai deeh

PENTING
Buat Para sobat yang suka utak atik CSS nya atau mau mengganti warna background atau warna bordernya untuk bantuan kode warna silahkan klik disini.

Kemudian cari tulisan Letak Link Kawan Sobat Disini ganti dengan Alamat Link Kawan Sobat misalnya (http://ineufadla.blogspot.com/), treus tulisan Nama Kawan ganti dengan Nama Kawan Sobat misalnya Kang Fatur.

Selamat mencoba semoga berhasil bermanfaat bagi sobat semua Amiiin.

7 bidikan kamera terindah

Posting ini menyoroti beberapa dari gambar yang paling menakjubkan fotografi alam. Ada sejumlah besar tempat-tempat dan pemandangan di bumi ini kita harus setidaknya melihat sekali. Alam fotografi cenderung menempatkan lebih mementingkan nilai estetika gambar dari jenis lain fotografi. fotografer alam Kebanyakan manusia lebih memilih tidak hadir di foto mereka, mereka ingin mencapai murni, tak bernoda lanskap yang bebas dari pengaruh manusia. Di bawah ini kami hadir untuk Anda koleksi gambar fotografi alam yang benar-benar akan mengambil napas Anda pergi.Ini mungkin adalah tempat-tempat terindah dan paling spektakuler di dunia yang sangat jarang dilihat sebelumnya. Dari keindahan Antartika, kota-kota diatas awan, pantai-pantai tersembunyi yang spektakuler, dan tempat-tempat lainnya, yang bahkan lebih mengagumkan.

1.Puncak Himalaya Tibet

Ini adalah titik tertinggi di seluruh Planet Bumi. Dengan foto dan cahaya seperti ini Himalaya tampak seperti sebuah tempat di planet lain.

2.Sinar Aurora Borealis

Sinar Aurora Borealis yang “spektakuler” di langit Alaska (ujung utara Amerika, dekat Kutub Utara). Aurora sebenarnya adalah cahaya natural di angkasa yang terjadi akibat tabrakan partikel-partikel medan magnet bumi dengan atom dan molekul dari atas atmosfir bumi. Warnanya yang paling umum ada dua, hijau dan merah dan dapat dilihat pada waktu malam.



3.Benteng Chittogarh , India

4. cinque Terre, riviera

Cinque Terre , Riviera , adalah salah satu tujuan wisata paling populer di Italia. Kota yang terkenal keindahannya ini dibangun selama ratusan tahun, dan keunikannya tetap terjaga.. Makanan laut disini juga sangat istimewa, tentu karena letaknya yang di pinggir laut Mediterania (Bagian dari UNESCO World Heritage Site).

5.College the Valleyfield

Sebuah universitas pendidikan di Quebec , Kanada, dengan pemandangan kampus yang tidak ada duanya di dunia.

6.Machu Picchu

Inilah Machu Picchu, kota dari peradaban Inca yang hilang. Letaknya di Lembah Urumba, Peru , di puncak gunung, 2430 meter diatas permukaan laut. Tempat ini dibangun pada puncak kejayaan peradaban mereka, tahun 1460-an.

7.Massif De La Chartreuse

Formasi bebatuan yang super unik di pegunungan di timur Perancis.

Tulisan Terbalik di Facebook

˙˙˙ ɹǝ-ʞooqǝɔɐɟ ıƃɐd ʇɐɯɐןǝs ??? (Selamat pagi facebook-er ...) Hehehe. Bagaimana cara pasang tulisan terbalik tersebut di facebook? Mudah! Untuk itu, Neng Ine akan menjelaskan cara membuat tulisan terbalik di facebook. Tulisan terbalik ini juga bisa di pakai selain di facebook. Tulisan terbalik ? Penasaran ? Mau ?

Untuk membuat tulisan terbalik di facebook caranya begini :

1. Buka situs berikut ini :

http://www.sevenwires.com/play/UpsideDownLetters.html

2. Buatlah suatu tulisan yang ingin anda buat terbalik. Nanti secara otomatis tulisan terbalik tersebut akan muncul di bawah tulisan yang anda ketik.

4. Copy tulisan terbalik tersebut. Paste-kan di facebook anda.

NB : Anda bisa menggunakan tulisan terbalik ini untuk status facebook, komentar antar dinding facebook, atau pada saat chating di facebook. DLL.

Selamat mencoba !

Membuat Page Feel Efect Bloger Dengan JQuery

Salam sobat blogger, di hari Rabu yang cerah ini tepat di Hari raya Idul Adha 1431 H. Saya akan posting satu buah tips yang bagus (menurut saya). Postingan kali ini saya ingin berbagi lagi kepada para sahabat semua tentang cara Membuat Page Feel Efect Blogger Dengan JQuery untuk Template Blogger. Apa yang dimaksud dengan Page Feel Efeck?? Mungkin sobat pernah mengunjungi suatu blog dan ketika kursor pointer menunjukan ke sudut kanan atas blog, tiba tiba halaman tersebut terlipat?? Itulah yang di sebut dengan Page Feel Efeck, untuk lebih jelasnya adalah seperti pada gambar di bawah ini :

Sebelum tersentuh pointer :



Ketika tersentuh pointer Sudut Halaman Blog terlipat seperti pada gambar berikut :



Nah gimana sahabat tertarik?? berikut langkah-langkah pembuatannya :

1. Seperti biasa Login ke-bloger sobat
2. Tataletak --->> Edit HTML
3. Kemudian cari kode </head> kemudian letakkan kodoe di bawah ini tepat diatas kode tadi

<style type='text/css'>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://www.wallheaven.com/subscribe.png) no-repeat right top;
}
</style>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Page Flip on hover

$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});


});
</script>

4. Sekarang tambahkan kode berikut setelah kode <body>

<div id='pageflip'>
<a href='http://feeds.feedburner.com/Indahnya-Berbagi'><img alt='' src=http://sites.google.com/site/amatullah83/gambar-untuk-tutorialku/page_flip.png'/></a>
<div class='msg_block'></div>
</div

5. Kemudian klik Simpan Template, Selesai

Mudah kan?? Selamat mencoba semoga berhasil dan bermanfaat.

Create Featured Content Slider Using jQuery UI

Banyak hal yang kita dapatkan dari dunia maya ini, baik yang positif maupun yang negatif tinggal bagai mana kita memfilter diri. Alhamdulillah saat blogwalking kesuatu web site, Ine melihat featured content slider ini, rasa keingintahuan saya mengantarkan saya tuk search digoogle bagaimana cara pembuatannya. Dan Ine menemukan tutorial yangIne cari dari Web Developer Plus. Di bawah ini adalah gamar yang akan kita bahas kali ini :



Nah disini Ine ingin berbagi bagaimana caranya agar tutorial tadi bisa diterapkan khusus untuk template blogger.

Berikut tutorial menambahkan Create Featured Content Slider Using jQuery UI ini pada template blogger.

1. Seperti biasa Login ke blogger dengan id Sobat
   
2. Tuju menu Tata Letak
   
3. Pada tab menu, klik Edit HTML
   
4. Backup template anda, klik Download Template Lengkap
   
5. Kemudian Tambahkan Script JQuery berikut sebelum kode </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
6. Tambahkan juga Script berikut di bawah kode Script di atas
<script>$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});</script>

CATATAN : 5000 adalah kecepatan link hover berpindah dari satu content ke content berikutya, sobat bisa mengganti angka itu sesuai selera sobat masing-masing.

7. Selanjutnya tambahkan kode CSS berikut diatas kode ]]></b:skin>

#featured{
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
overflow:hidden;
}
#featured .ui-tabs-hide{
display:none;
}
#featured li.ui-tabs-nav-item a{/*On Hover Style*/ display:block; height:60px; color:#333; background:#fff; line-height:20px; outline:none; } #featured li.ui-tabs-nav-item a:hover{ background:#f2f2f2; } #featured li.ui-tabs-selected{ /*Selected tab style*/ background:url('images/selected-item.gif') top left no-repeat; } #featured ul.ui-tabs-nav li.ui-tabs-selected a{ background:#ccc; }
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px; width: 400px;
background: url('images/transparent-bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}

CATATAN : Silahkan edit CSS di atas dengan menambahkan image selected item, image transparent, atau jika sobat ingin mengganti ukuran dari widget dan mengganti warna dari hover link dll. Untuk untuk kode warna silahkan klik disini.

8. Setelah semua langkah di atas selesai Simpan Template Sobat.
Sekarang kita ke tahap LANGKAH TERAKHIR
9. Pergi ke Tataletak (Rancangan)
10. Tambah Gadget (HTML/Javascript)
11. Setelah itu masukan kode di bawah ini:

<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
</ul>
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="images/image1.jpg" alt="" />
<div class="info" >
<h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
</div>
</div>
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image2.jpg" alt="" />
<div class="info" >
<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
</div>
</div>
<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image3.jpg" alt="" />
<div class="info" >
<h2><a href="#" >35 Amazing Logo Designs</a></h2>
<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
</div>
</div>
<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image4.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
</div>
</div>
</div>

CATATAN : Silahkan edit kode diatas dengan mengganti judul, deskripsi dan link content
12. Kemudian klik Simpan, Selelsai

Selamat Mencoba semoga berhasil dan bermanfaat.

Recent Post Slide Show

Salam blogger, sebelumnya Neng Ine akan berterimakasih kepada pengunjung dan pencinta blogger sekalin khususnya shabat - sahabat blogger, pada kesempatan malam ini Neng akan bagi bagikan satu buah trik yang sederhana, simpel tampi mengasikan hehe cara pemasangannyapun sangat simpel.

OK, trik yang akan Neng berikan adalah cara membuat "Recent Post Slide Show" dengan yang namanya "Recent Post Slide Show" ini blog kita akan lebih cantik dan menarik, mudah mudahan pengunjung kita pun juga merasa betah AMIIIN.

OK, berhubung waktu udah malam, gorengan plus kopi udah kering dan dingin kita langsung aja ke Pembahasan :

1. Seperti biasa Masuk ke account Blogger sobat, pilih "Layout" kemudian "Page Elements",
2. Klik "Add a Gadget" (yang mana aja oke), kemudian pilih "HTML/JavaScript",
3. Copy-paste kode di bawah ini:

<script src="http://kangfatur.googlecode.com/files/recentpostslide.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language='javascript'>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://www.coretan-guru-komputer.co.cc/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://kangfatur.googlecode.com/files/recentpostslide2.js' type='text/javascript'></script>
</div>

PERHATIAN
Kode yang berwarna orange ganti dengan alamat link sobat OK

Setelah semua langkah - langkah terlewati, simpan dan lihat hasilnya??

Selamat mencoba semoga bermanfaat dan jangan lupa comennya,

Efek Keren di Template FB Anda

Tips Facebook ingin selalu memberikan informasi, tips dan trik facebook terbaru dan terbaik bagi kawan-kawan Facebook Maniak di Indonesia. Maaf karena ane sudah terperangkap dalam persaingan kontes SEO semacam Kontes SEO Aristia Wida dan Kontes SEO Anak Salatiga Belajar SEO. Maklumlah lagi tertarik belajar SEO nih.. Beruntung pagi ini saya dapat pencerahan dari "atas" sana, saatnya memberikan tips-tips Facebook lagi.

Berikut ini Tips Facebook yang menurut saya sangat unik dan keren. Efek sinar 3D berbentuk bulatan yang muncul di Template Facebook anda. Asyik pokoknya. Mau tahu caranya? Ikuti Trik Facebook berikut ini.

1. Masuk dulu di account Facebook anda.
2. Klik dimana saja di halaman facebook yang sudah terbuka.
3. Nah tolong ikuti perintah ini sesuai urutan dengan cepat. Tekan tombol pada keboard anda berurutan. Atas-atas-bawah-bawah-kiri-kanan-kiri-kanan-B-A-Enter.
4. Tunggu beberapa saat sebelum efeknya muncul.
5. Coba gerakkan mouse anda, apakah ada perbedaan yang muncul? Kalo belum ulangi lagi instruksinya.

Gimana? Keren kan Tips Facebook-nya? Tunggu Tips dan trik berikutnya.

Membuat Tab View di Bawah Postingan

Assalamu'alaikum semua sahabat blogger tanpa terkecuali. Setelah jauh jauh terbang di dunia maya akhirnya saya nemuin sesuatu yang unik yaitu Membuat Menu Tab View di Bawah postingan.

Pastinya uda pada kenal kan sama widget Tab View menu? Penggunaan dan pemasangan menu Tab View bisa bermanfaat sekali dan sangat cocok digunakan pada ruang yang terbatas. Cara pasang menu Tab View tersebut juga cukup simpel.

Biasanya menu Tab View ini dipasang pada menu sidebar ato footer, widget tersebut bisa dipasang di mana saja.

Memasang widget di akhir postingan sepertinya adalah salah satu hal favorit dari banyak pemilik blog. Biasanya kita menaruh iklan, artikel terkait, dll di akhir postingan. Nah dengan memasang widget TabView di akhir postingan, kita bisa pasang banyak widget tanpa harus menuh-menuhin tempat. Berikut ini langkah-langkahnya.

Cara Pasang Menu TabView di Akhir Postingan
Pertama, pilih menu Layout -> Edit HTML, beri centang pada pilihan Expand Widget Templates.. Lalu copy dan paste kode di bawah ini sebelum kode]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 160px; /* Lebar Menu Utama Atas */ text-align: center;
height: 26px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Georgia", Serif; /* Font Menu Utama Atas */
font-size: 12px;
font-weight: 900;
background-color: #ccc;
color: #233e45; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #1A3300; /* Warna background Menu Utama Atas */
color: #fff;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #000000; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #fff; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

div.TabView div.Pages div.Page div.Pad li {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhQNNmbKa1dNEpZTQ5iCbbqzL0iYZuCQ3baAIwUuJeKKIq6qqeSG4FPEeBuwQfgZNADj3oxycmhpF1GpLLuAkbPILFYeyFzGIHLzOFtq6Hue3HYTe_rPU0XpWWtU6Apn9vAMc4i-ey_UM/?imgmax=800') no-repeat;
list-style-type: none;
margin: 0 0 5px;
padding-left: 20px;
}

Silahkan Sobat edit kode CSS di atas mulai dari lebar, tinggi, warna dan lain lain. Untuk kode warna silahkan klik disini

Setelah kode di atas dimasukkan, lalu masukkan kode berikut di atas kode </head> atau tepat dibawa kode :]]></b:skin>

<script src='http://kangfatur.googlecode.com/files/tabviewpost.js' type='text/javascript'/>

Setelah semua langkah di atas selesai, klis Save (Simpan Template)

Setelah itu Save dulu.. Lalu cari kode <data:post.body/> dan letakkan kode berikut ini dibawah kode tersebut : (sebelumnya di parse dulu)

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 600px;" class="Tabs">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div style="width: 600px; height: 160px; overflow: auto;" class="Pages">

<div class="Page">
<div class="Pad">

KONTEN TAB 1

</div>
</div>

<div class="Page">
<div class="Pad">

KONTEN TAB 2

</div>
</div>

<div class="Page">
<div class="Pad">

KONTEN TAB 3

</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Setelah semua langkah di atas selesai, klis Save (Simpan Template)

PENTING
Teks yang diberi warna Kuning dan orange bisa diedit-edit sendiri ama sobat. Oya, jangan lupa konten yang ingin dimasukkan ke tab-tab tersebut, kodenya di parse dulu...

Saya hanya ingin berbagi saja. Karena tampaknya belum banyak yang mengimplementasikan widget ini untuk ditaruh di akhir postingan

Selamat Mencoba semoga berhasil dan bermanfaat.

Background Gambar di Belakang Postingan

Alangkah indahnya jika di posting kita terdapat background gambar yang terletak tepat dibelakang tulisan yang kita buat seperti yang ada pada postiingan ini. Setidaknya semakin menambah indah tampilan posting kita walaupun tulisanya tidak menarik sama sekali :-)

Adakalanya pengunjung kita manjakan dengan tampilan blog yang menarik. Bisa saja page view kita bertambah gara-gara pengunjung hanya cuma ingin melihat background apa saja yang ada di setiap posting kita.

Langsung saja saya berikan caranya untuk memasang background gambar di halaman posting.bootingskoBlog

1. Masuk ke admin WordPress anda.
   
2. Klik [Posts] > [Add New].
   
3. Copy kode dibawah dan paste-kan di area [HTML]:

<div style="padding: 5px; background-image: url(http://alamat_gambar_anda.jpg); background-repeat: repeat; background-position: center;">
Tulis disini...
</div>

4. Kemudian tulis artikel anda dan setelah selesai kembali ke mode [Visual].
5. Dan klik tombol [Publish].

Tips:

• Gunakan warna huruf yang lebih terang dari gambar backgroundnya agar mudah dibaca.
• Kalau bisa gunakan gambar yang lebih transparan.

sumber : gudang elmu

Cara membuat Daftar Isi Berdasarkan Label

Akhirnya bisa posting blog lagi nich... kali ini Neng Ine akan menjelaskan penemuan terbaru hasil jalan-jalan di dunia aneh... eh salah di dunia maya alias internet. disini saya akan membahas tentang cara membuat Daftar Isi Berdasarkan Label. Soalnya hampir kebanyakan bilangnya begitu. langsung aja ya... dari sekian banyak cara membuat daftar isi, seperti Disini, disana atau disitu, tips kali ini akan menerangkan bagaimana membuat daftar isi berdasarkan label atau kategori. biasanya daftar isi ini disimpan di sidebar ataupun di postingan. Tujuan dasar dari pembuatan daftar isi ini tidak lain agar pengunjung dipermudahkan mencari artikel yang mereka butuhkan.

Dibawah ini adalah contoh yang kita bahasa saat ini :

Artikel Islam

1. Aku Menyaksikan Tangismu
2. Allah dan Tuhan
3. Alnor: Cahaya Islam di Puncak Bola Dunia
4. Cat Steven: Islam Menyelamatkanku
5. Dulu Ulama Dirangkul, Kini Mereka Diburu
6. Eropa 2050: Benua Islam Terbesar di Dunia
7. Jabatan Adalah Amanah
8. Kaskus Jadi Situs Penghina Islam?
9. Keturunan Sitti Fathimah
10. Laskar Muslim Siap Hadang Pintu Dagang Israel Ke RI
11. Muallaf Kontroversi Jerman Menangkan Penghargaan Al-Quran
12. Murid-Murid Florida Berlomba "Setankan Islam"
13. Puluhan Ribu Umat Solo Serukan : Islam Bukan Teroris

Document

1. Allah dan Tuhan
2. Alnor: Cahaya Islam di Puncak Bola Dunia
3. Cat Steven: Islam Menyelamatkanku
4. Dulu Ulama Dirangkul, Kini Mereka Diburu
5. Eropa 2050: Benua Islam Terbesar di Dunia
6. Kaskus Jadi Situs Penghina Islam?
7. Keturunan Sitti Fathimah
8. Laskar Muslim Siap Hadang Pintu Dagang Israel Ke RI
9. Muallaf Kontroversi Jerman Menangkan Penghargaan Al-Quran
10. Murid-Murid Florida Berlomba "Setankan Islam"
11. Puluhan Ribu Umat Solo Serukan : Islam Bukan Teroris

Komputer

1. ILMU PENDIDIKAN DALAM PERSPEKTIF ISLAM
2. Macam macam Serial Number Windows
3. Pengenalan Hardware Komputer
4. Pengertian CPU
5. Pengertian Keyboard
6. Pengertian Mouse
7. Pengertian Processor
8. Peran TIK dalam pembelajaran
9. Portable Ms Office 2007
10. Sekarang Satu Komputer Untuk 2.000 Siswa
11. Televisi Pendidikan

Modul Office Excel

1. Contoh Diagram
2. Membuat 2 tabel sekaligus dalam excel
3. Membuat Garis Tabel pada Microsoft Office Excel
4. Membuat nomor urut di Excel
5. Membuat sebuah grafik dengan data yang di ambil dari tabel
6. Mengatur Default Directory Penyimpanan File Excel
7. Mengetahui Nilai Total, Rata-rata, Maksimal dan Minimal dalam Microsoft Office Excel
8. Menggabungkan Sel
9. Menggunakan Fungsi IF dan VLOOKUP Pada MS Excel
10. Mengubah Baris menjadi Kolom
11. Penggunaan Fungsi (Rumus) IF
12. Proteksi Sheet pada Microsoft Office Excel
13. membuat tabel pada Microsoft Office Excel

Modul Office Word

1. File Doc jadi Exe?
2. Format Font dalam Microsoft Office Word
3. Format pengaturan tata letak teks dalam satu alinea dalam microsoft office word
4. Fungsi Tabulasi
5. Membuat Daftar Isi
6. Membuat Nomor Halaman
7. Membuat Tabel pada Microsoft Office Word
8. Membuat dokumen baru dalam Microsoft Office Word
9. Membuka File .docx Tanpa Word 2007 atau Mengkonversikan ke Bentuk .doc
10. Menggunakan Microsoft Word Untuk Membuat Teks Lorem Ipsum
11. Menghapus huruf, kata dan kalimat dalam Microsoft Office Word
12. Menulis rumus-rumus matematika dalam microsoft office word
13. Merubah Format Huruf dengan cepat
14. Pengenalan Microsoft Excel 2003
15. Pengenalan Microsoft Office Word 2003
16. Shortcut Microsoft Office Word

Tips Trik Blogspot

1. Background Berbeda-beda Setiap Halaman
2. Blog Transparent
3. Cara Megnatur Judul Sidebar
4. Cara Membuat Drop Cap Pada Postingan
5. Cara Membuat Marque (Teks Berjalan)
6. Cara Membuat Menu Tab View
7. Cara Membuat Recent Comments
8. Cara Membuat Tab View Link - New !!
9. Cara Mengatur Judul Sidebar
10. Cara Mengganti Background Blogger
11. Cara Mengganti Icon Pada Adress Bar
12. Cara Pasang Flash di Blog
13. Daftar Isi Berdasarkan Label - New !!
14. Efek Kembang Api di Halaman Blog
15. Efek Tulisan Teks Pada Blog
16. Gambar Selalu Di Pojok
17. Hantu Berkeliaran di Halaman Blog
18. Judul Blog Menjadi Judul Postingan
19. Kursor Bermesraan Dengan Teks
20. Kursor Bersama Bintang Kecil
21. Membagi Header Menjadi Dua Kolom - New !!
22. Membuat "Tag Cloud" Widget
23. Membuat 3 Kolom/Elemen di Atas Footer
24. Membuat Buku Tamu Tersembunyi
25. Membuat Daftar Isi Blog
26. Membuat Efek Roaming Windows
27. Membuat Link Pelangi
28. Membuat Multi Level Drop-Down Menu Dengan CSS dan JQuery
29. Membuat Readmore Otomatis
30. Membuat Tab View di Bawah Postingan - New !!
31. Membuat teks Area Blog
32. Menambah 4 Kolom/Elemen Halaman di Atas Footer
33. Menambah Elemen di Atas 2 Kolom
34. Menambah Fitur Replay Pada Kotak Komentar
35. Menambah Kolom Elemen Sidebar Blogspot - New !!
36. Menghilangkan Navbar Blogspot
37. Menu Tab View Widget
38. Pasang TV Bagian 2
39. Pasang TV di blog
40. Pesta Kembang Api di Halaman Blog
41. Posting Blog Mengunakan MS Office Word2007
42. Recent Post Slide Show
43. Tabber tab dengan JQuery part 2
44. Translate Versi Google
45. Widget dari BlogCatalog

Tips Trik Facebook

1. Cara Bikin Status Facebook Lebih Menarik
2. Cara Memblokir Teman Di Facebook
3. Cara Membuat Catatan Facebook
4. Cara Mengembalikan Akun Facebook yang di Hack - New !!
5. Cara Menghapus Iklan Di Profil Facebook
6. Efek Keren di Template Facebook anda
7. Facebook Haram
8. Fitur Baru dari Facebook
9. Hack Foto Profil Facebook
10. Main Facebook Di Blog !?
11. Penyebab Kata Sandi Facebook Bisa Dicuri - New !!

Tips Twitter

1. Cara Mudah Daftar di Tuitter - New !!

Tips dan Trik Twitter

1. Cara Mudah Daftar di Tuitter - New !!

Tips dan Trik Wordpress

1. Background Gambar di Belakang Postingan - New !!
2. Cara Buat Pages atau Halaman Statis WordPress
3. Cara Buat Read More di WordPress
4. Memasang Favicon di Blog WordPress
5. Membedakan Komentar dari Penulis
6. Membuat Blog di WordPress Com
7. Menampilkan Related Post Berdasarkan Kategori
8. Mengaktifkan Widget di Sidebar
9. Tutorial Blog WordPress

Tutorial Twitter

1. Cara Mudah Daftar di Tuitter - New !!

Widget

1. Cara Membuat Menu Tab View
2. Cara Membuat Recent Comments
3. Cara Membuat Tab View Link - New !!
4. Cara Pasang Flash di Blog
5. Featured Content Slider Using JQuery
6. Main Facebook Di Blog !?
7. Membuat "Tag Cloud" Widget
8. Membuat Buku Tamu Tersembunyi
9. Membuat Link Pelangi
10. Membuat Tab View Model 2 - New !!
11. Mengaktifkan Widget di Sidebar
12. Menu Tab View Widget
13. Pasang TV Bagian 2
14. Recent Post Slide Show
15. Translate Versi Google
16. Widget dari BlogCatalog

Berikut ada 2 script, yang pertama tanpa scroll dan yang kedua menggunakan fasilitas scroll (biar ga kepanjangan)

1. Untuk yang biasa :

<script style="text/javascript" src="http://kangfatur.googlecode.com/files/daftar%20isi%20label.js"> </script>
<script src="http://www.coretan-guru-komputer.co.cc/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

2. Untuk yang menggunakan scroll

<div style="overflow:auto; border: 1px solid #CCC; margin: auto; padding: 3px; width: 95%; height: 400px; background-color: none; text-align: left;">
<script style="text/javascript" src="http://kangfatur.googlecode.com/files/daftar%20isi%20label.js"></script>
<script src="http://www.coretan-guru-komputer.co.cc/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
<p>
</div>

Catatan : Ganti kode warna orange dengan alamat URL Sobat.

3. Klik Simpan. Selesai

Naah setelah semua langkah langkah sobat jalani dan tanpa ada masalah apapun diperjalanan sekarang sobat tinggal lihat hasilnya pasti mantaaap. Semoga postingan kali ini bermanfaat bagi sobat semua, Selamat mencoba

Cara Mengembalikan Akun Facebook yang di Hack

Bagaimana jika FB kita di hack orang lain? pasword diganti,pasword emailpun diganti bahkan security question juga diganti oleh orang itu sehingga otomatis kita tidak bisa login ke email untukmenerima kode konfirmasi untuk merubah merebut kembali fb kita..

disini ada sebuah cara yang bisa sobat pakai dengan syarat email fb belum diganti dngn email yang lain.
caranya:

1.login ke fb masukin email dan pasword sebelumnya,nanti stelah klik login bakal ada tulisan incorect pasword..login terus sebnyak 2x lagi nanti akan muncul “kamu telah mengganti pasword pada tanggal sekian sekian” lalu pilih “I think Ive been hacked” nanti ada kotak dialog (isi aja kolom emailnya doank)

2.setelah itu akan ada muncul kotak dengan url Http://ssl.roadblock/…..
nah isi captchanya,,setelah diisi jngn dulu klik OK ataw next tapi kamu buka tab baru ataw jendela dengan browser yang sama masuk ke http://ssl.facebook.com/confirmphone.php isi dengan nomor indosat kamu,,,lalu ikuti petunjuknya nanti bakal ada konfirmasi dari fb masuk k hp mu…

3.masukan kode konfirmasi ke kotak konfirmasi facebook…setelah berhasil lanjut kamu kembali ke page yang tadi kamu isi capchanya,,,sekarang klik ok/next nah nanti setelah itu akan ada pilihan konfirmasi permintaan pengirimn kode,,nah kalo kamu ga pake cara masuk dulu ke link page confirm form tadi maka yang akan muncul adalah satu options yaitu pengiriman kode konfirmasi hanya melalui email sedangkan email kan ga bsa dibuka lagi..tapi karena udah masuk dulu ke page confim phone maka options skrng ada dua yaitu ke email dan nmr hp,,pilih options kirim kode ke nomor hp….setelah itu tinggal ikuti petunjuknya,,,udah dehhh fb kamu bisa balik lagi,,,,tinggal atur kembali aja paswordnya terserah kamu..
selamt praktek,,,,tingkat keberhasilan tergantung nomor hp yang digunakan,,,klo bisa pake indosat..kalo gagal dalam link confirm phone maka sehari kemudian baru kamu bisa coba kembali….

Sumber : http://yukiblogger.wordpress.com/

Membuat Readmore Otomatis

Fungsi Readmore/baca selengkapnya pada posting adalah untuk menghemat halaman depan website/blog agar tidak terlalu panjang, selain itu juga dapat merangsang pengunjung untuk membaca salah satu posting di halaman depan website/blog kita.

Nah jika berkeinginan untuk pasang readmore otomatis pada blogspot Sobat, silahkan ikuti langkah-langkahnya sebagai berikut:

Sebelum memulai memasang readmore otomatis pada blogspot/blogger Sobat, ada baiknya perhatikan hal-hal sebagai berikut :

1. Download dan simpan template Sobat terlebih dahulu, karena jika pemasangan gagal Sobat masih bisa mengembalikan blog Sobat seperti semula;

2. Jangan lupa untuk memberi tanda centang pada tulisan Expand widget template;

3. Untuk memudahkan pencarian code, gunakan tombol Find, caranya pada browser Sobat klik pada menu Edit lalu pilih Find atau melalui keyboard komputer Sobat, tekan Ctrl + F, lalu copy paste code yang mau dicari ke dalam kotak Find lalu Enter/Next;

4. Ini yang paling penting, apabila sebelumnya Sobat sudah menggunakan Readmore versi lama, maka hapus dulu codenya.

Adapun langkah-langkah Cara Pasang Readmore Otomatis adalah sebagai berikut:

1. Seperti biasa Login ke Account Blogger Sobat;

2. Masuk ke halaman Edit HTML, lalu diatas kode </head> letakkan script di bawah ini:

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

3. Cari dan ganti kode dengan semua kode dibawah ini:

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READMORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

# KETERANGAN:

Biasanya kode: <data:post.body/> berada di bawah kode:<data:post.body/>

, maka untuk memudahkan pencarian kode tersebut gunakan tombol Find seperti penjelasan di atas.

# Simpan/Save Template, selesai.

Keterangan:

Kita dapat menentukan letak tumbnail (gambar), jumlah karakter tulisan baik tanpa maupun dengan tumbnail serta tinggi dan lebar tumbnail pada postingan dengan cara merubah kode orange tebal di atas dan berikut penjelasannya :

1. var thumbnail_mode = "float";: Letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;

2. summary_noimg = 250;: Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail;

3. summary_img = 250;: Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail;

4. img_thumb_height = 120;: Tinggi thumbnail dalam ukuran piksel;

5. img_thumb_width = 120;: Lebar thumbnail dalam ukuran piksel;

6. READMORE-: Tulisan READMORE bisa diganti misalnya dengan “Baca Selengkapnya” dan apabila sobat tidak ingin menampilkan judul dibelakang Readmore, Sobat bisa menghapus code script ini .