Sunday, March 31, 2013

Cara Membuat Recent Post Berjalan di Blog

Cara Membuat Recent Post Berjalan di Blog - Recent post atau dalam bahasa indonesianyaposting terakhir atau artikel terkini adalahwidget yang bisa sobat pasang di blog dengan tujuan memberikan informasi tentang postingan atau artikel terkini.
Recent post biasanya menampilkan sejumlah judul artikel yang belum lama sobat posting dalam deretan ke bawah dan tak jarang juga ada yangbergerak ( animasi ) ke bawah. Contohnya sobat bisa lihat di sidebar blog ini.

Kali ini saya akan kasih tahu bagaimana cara memasang recent post di blog. Sobat yang berminat silahkan ikuti tutorial berikut.

1. Log in ke akun blog sobat.
2. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
3. Masukkan kode berikut ke dalam konten.

get this widget here

4. Klik save dan lihat hasilnya.

CARA MEMBUAT POS POPULER BERGERAK

Fungsi Membuat Popular Posts Bergerak Otomatis yaitu agar pengunjung bisa melihat seluruh
artikel yang populer tanpa memakan banyak tempat diblog. atau hanya untuk memperindah & mempercantik tampilan, agar pengunjung betah berlama-lama di blog kita.
Jika anda tertarik silahkan simak Tutorial dibawah ini:

Cara Membuat Popular Posts Bergerak Sendiri kebawah
1.Log in ke blog
2.Pilih Tata Letak
3.Tambah Gadget
4.Klik tanda + disebelah tulisan Entri Populer

5.Simpan

6.Pilih Tambah Gadget lagi

7.Klik tanda + disebelah tulisan HTML/JavaScript

8.Copy kode dibawah ini dan paste dikotak HTML/JavaScript

9.Simpan
10.Geser Widget kode diatas lalu taruh diatas atau dibawah letak widget Popular Posts

11.Simpan Setelan

Silahkan cek pada blog anda apakah sudah berhasil atau belum ?
jika sudah berhasil saya ucapkan SELAMAT

Cara Copy Paste Microsoft Office ke Komputer Lain

Hallo Sobat ! senang bisa posting lagi, kali ini saya akan memposting tentang MS Office nih.
Kalau Ms Office di copy dari Program Files nya langsung kan tidak bisa dijalankan, oleh karena itu kita harus menginstallnya dengan cara copy setupnya ke Flashdisk atau lainnya, jadi kita tidak usah download lagi kan kelamaan mending copy setupnya orang jadi deh!! oke ini langkah langkahnya :

1. Buka komputer yang sudah terinstall MS officenya
2. Pergi ke My Computer > C:
3. Setelah sampai di C: ikuti petunjuk gambar berikut

4. Lalu seperti ini

5. Lalu langkah selanjutnya seperti ini

6. Setelah dicopy colokkan flashdisk atau sejenisnya ke komputer yang ingin diambil setup ms nya
7. Lalu paste di flashdisk atau sejenisnya tunggu hingga pengcopyan selesai
8. Setelah selesai di copy ubah attribut folder MSOCache menjadi tidak Hidden (ga diubah juga tidak apa apa sih)
9. Lalu colokkan flashdisk yang sudah terdapat folder MSOCachenya ke komputer yang mau diinstall Ms Office
10. Buka folder MSOCache yang baru dicopy
11. Buka folder urutan kelima dari bawah atau folder yang ukurannya paling besar
12. Klik setup.exe masukkan serial number berikut
- MS Office 2007 : VB48G-H6VK9-WJ93D-9R6RM-VP7GT
=============================================
- MS Office 2010 : 6QFDX-PYH2G-PPYFD- C7RJM-BBKQ8
PYMDW-8DFY2-Y68BB-XHDGD-CT443
=============================================
- MS Office 2013 : NTQV7-XR4TC-69RMT-HXFM7-94MP8
Y86N6-KWWJX-YHFVP-DWMGK-XKR9J
=============================================
13. Tunggu hingga instalasi selesai waktunya ±15-30 Menit

Memperbaiki sistem Windows 7 yang rusak tanpa melakukan install ulang

Kali ini saya akan memberikan sedikit ilmu tentang bagaimana cara memperbaiki atau Merepair system windows 7 yang rusak, mungkin teman-teman pernah mengalami kerusakan pada system windows 7, di sebabkan oleh virus yang menyerang dan menghapus beberapa file pada system windows, jika teman2 mengalami hal seperti itu , tidak perlu teman2 melakukan install ulang windows, hanya saja teman2 tinggal melakukan repair atau memperbaikinya. Pengen tahu cara nya, silakan ikuti langkah2 di bawah ini :

# Siapkan CD/DVD Boot Windows 7

# Hidupkan komputer kemudian Masukkan CD/DVD windows 7

# Setelah masuk pada menu Bios dengan menekan tombol F2 atau DEL ketika komputer pertama kali di nyalakan.

# Pertama masuk ke menu bios dengan cara menekan tombol F2 pada laptop atau tombol Delete pada PC, untuk melakukan settingan booting

# Setelah masuk – pilih menu boot,, lalu pada boot pertama kita tempatkan Nama Drive Flashdisk yang sudah di tetapkan, setelah itu tekan tombol F10, kemudian tekan tombol enter untuk melakukan penyimpanan booting yang telah di buat.

# Pada saat melakukan Restart, muncul sebuah pesan Press any key…silakan anda tekan sembarang tombol pada keyboard,
# ketika muncul seperti pada gambar di bawah ini :

# Klik Next untuk melanjutkan, maka akan muncul seperti pada gambar di bawah ini :

# Kemudian Klik pada Repair Your Computer, maka muncul gambar di bawah ini :

# Pilih Startup Repair,setelah itu restart komputer

Memperbaiki CPU Usage 100% Windows

Beberapa hari ini saya dijengkelkan dengan laptop yang sering not responding dan lemot. Pada saat saya lihat di task manager cpu usage menunjukkan angka 100% padahal saya hanya menggunakan software standar di windows 7 saya.

Beberapa cara seperti disable beberapa servis, edit registry, bahkan sampai inul (instal ulang) telah saya lakukan tetapi hasilnya masih sama. Komputer sering "Cpu Usage 100%" terutama ketika saya gunakan mutar video full HD (1080p).

Akhirnya saya menemukan sebuah cara di forum dengan menggunakan software bernama Process Tammer untuk mengatasi CPU Usage 100%. Hasilnya lumayan bisa nurunin CPU usage dan buat mutar video full HD bisa jalan lancar tanpa putus dan CPU Usage tidak 100% lagi.

Jika anda memiliki masalah yang sama pada komputer anda, silakan coba atasi dengan software Process Tammer. SOftware ini 100% free dan tidak nulled.

Download software: Link 1 | Link 2

Cara Otomatis Merubah Warna Background Blog Sesuai Keinginan Pembaca

Mungkin aja ada pembaca yang tidak suka dengan warna background Template kita (Ini Khusus blog yang warna backgroundnya memakai warna dari HTML bukan yang memakai image/gambar), klo image saya belum nyoba masih, silahkan sobat coba sendiri jika template blog sobat memakai image. Baiklah sekarang saya ingin membuat tutorial temtang Merubah Warna Background Blog Sesuai Keinginan Pembaca.berikut langkah langkah-langkahnya:

1. Login ke Blog Sobat (www.blogger.com)

2. Design (Rancangan)

3. Akan langsung active di menu elemen laman, klik Add a Gadget (Tambah Gadget)

4. Cari dan pilih HTML/JavaScript

5. Copykan Kode Script di bawah ini

Silahkan pilih warna Background kesukaan sobat

#8B008B')" bgcolor="#8B008B">

#9400D3')" bgcolor="#9400D3">

#008080')" bgcolor="#008080">

#808080')" bgcolor="#808080">

CD853F')" bgcolor="#CD853F">

#2F4F4F')" bgcolor="#2F4F4F">

#DC143C')" bgcolor="#DC143C">

#4B0082')" bgcolor="#4B0082">

'#A52A2A')" bgcolor="#A52A2A">

6. Simpan

7. Silahkan sobat drag atau pindahankan dimana letak/posisi gadget ingin di lestakkan.

keterangan :

Teks yang berwarna biru bisa sobat ganti dengan kata-kata kesuakaan sobat.
Teks yang berwarna merah silahkan sobat ganti dengan warna yang ingin sobat sediakan di Blog sobat (disarankan memilih warna-warna yang cocok atau sesuai dengan template), misalkan warna tulisan di blog sobat warna hitam, maka jangan membuat pilihan warna hitam juga), ntar malah ga keliatan tulisannya.. hehehe.
Jika ingin mangurangi pilihan warna, sobat hapus saja baris-baris pilihan warnanya warna, '#A52A2A')" bgcolor="#A52A2A">

, dan misalkan sobat ingin menghapus 1 warna, hapus saja baris '#A52A2A')" bgcolor="#A52A2A"> , dan jika ingin menambah pilihan warna silahkan copykan baris codeSelesai deh, gampang aja kan, Ga ada salahnya kita menyiapkan suatu menu yang bisa membuat para pembaca senang dengan memilih warna kesukaan mereka. demikian sedikit tips dari saya.

Cara Membuat Efek Spoiler Auto Hide di Blog, auto hide

Cara Membuat Efek Spoiler Auto Hide di Blog, auto hide pada postingan, widget maupun yang lainnya pada blog sanyatlah menarik dan membuat tampilan blog kita makin simple dan keren. untuk blogger pemula tentunya ini sangat membuat bingung dan terkagum-kagum, spoiler atau auto hidetentunya tidak asing, karena banyak yang sudah menggunakan efek auto hide.

Karena banyak teman yang tanya tentang spoiler auto hide, maka kali ini saya share Cara Membuat Efek Spoiler Auto Hide di Blog. jadi sobat-sobat dapat langsung mencobanya. jika tertarik sobat bisa mncobanya diblog sobat, asalkan tidak diblog kang zain. hehhehe namun sebelumnya saya kasihcontoh dibawah ini :

Gambar Jamur 3D:

HUMOR (Guru bertanya cita – cita kepada muridnya):

Nah,,, gmana sudah coba contoh diatas? jika sobat tertarik, ikuti langkah berikut ini Cara Membuat Efek Spoiler Auto Hide di Blog :

Login ke akun blogger dahulu.
Buat Entri Baru/New Post = Membuat postingan
Jika sudah, pada menu Entri, Pilih mode penulisan HTML (Bukan Compose) jika ingin menerapkan Spoiler/AutoHide. Jika dipasang pada Mode Compose maka tidak akan berfungsi code scriptnya.
Lalu copas Script dibawah ini pada postingan yang akan dipasang autohide.

Judul Spoiler: Tutup

'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button">

Catatan :

Judul Spoiler : Silahkan sobat ganti sesuai keinginan sobat
Tutup dan Buka : petunjuk untuk melihatnya (bisa sobat ganti sesuai keinginan)
Letakkan teks atau kode script (gambar atau video), link di sini :sobat ganti tulisan tersebut dengan kata-kata sobat atau dengan kode script gambar atau viveo.

Membuat Efek Lipatan Kertas Diblog

Mungkin sobat blogger sudah sering melihat efek lipatan kertas ketika sedang menjelajah website ataupun blogwalking, namun masih bingung tentang cara pemasangannya di blog... nah kebetulan jika ya berarti sobat telah mendarat dengan tepat karena pada postingan artikel ini akan membahas cara pemasangan efek lipatan kertas untuk digunakan di blog. Oke sob jika tertarik untuk mencoba memasang efek lipatan kertas ini monggo disimak tutorialnya...

Contoh :

Cara Pemasangan :

Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.

Cari kode ]]>

pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode ]]> tersebut.

#pageflip {
position: relative;
}
#pageflip img {
border: none;
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(http://lh3.googleusercontent.com/-BFy8oqoYLgM/T048MJSYmpI/AAAAAAAABO0/RHVBBWIoeSY/s288/Facebook-logo.png)
no-repeat right top;
text-indent: -9999px;
}

- Keterangan :

Kode yang berwarna biru merupakan URL Link Gambar.

Cari kode

pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode tersebut.

Cari kode pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di bawah kode tersebut.

- Keterangan :

Kode yang berwarna merah merupakan URL Link yang akan dituju.
Kode yang berwarna biru merupakan URL Link gambar kertas.

Klik "Save" dan lihat hasilnya...

Cara membuat ucapan selamat datang pada blog

Bismillah, selamat datang kembali di blog saya. Kali ini saya akan share tentang Cara membuat ucapan selamat datang pada blog. Cara ini sudah banyak yang menerapkannya, selain itu prosesnya juga tidak terlalu sulit. Langsung saja kita oprek cara pembuatannya.

1. Login ke akun Blogger

2. Klik Template >> Edit HTML >> Lanjutkan (centang Expand Template Widget).

3. Cari kode

4. Pastekan kode di bawah ini tepat di atas kode nomor 3

5. Klik pratinjau untuk memastikan tidak terjadi kesalahan

6. Jika berhasil jangan lupa klik save template lalu jadi deh...

Selamat mencoba
.

Cara Membuat Buku Tamu Melayang Di Sisi Kanan Blog

Di postingan ini saya akan berbag
cara membuat buku tamu melayang di kanan blog

Langkah Pertama pergi ke Cbox
Lalu masuk akun Cbox atau jika belum punya daftar ke Sign Up Cbox
Jika Sudah mendaftar Cbox lalu pemirsa disuruh masuk Cbox
Setelah sudah masuk edit sendiri Cbox anda sendiri

dan Langkah berikutnya Copy-Paste HTML dibawah ini

Silakan Pasang Kode Buku Tamu yang sudah di copy tadi Di Sini

[get this widget]>
[Tutup]

Cara menaruh html di atas

Masuk akun blogger siapa ajah boleh
Ke tata letak
Add gadget atau Tambah gadget
Edit html/javascript
Masukan html di atas
Selesai

Cara Membuat / Memasang Burung Twitter Terbang di Blog

Cara Membuat Burung Twitter Terbang di Blog - Lebih suka mana?? ngetweet apa ngeblog?? kalo ane sih kedua - duanya.. Kali ini ane akan kasih tahu bagaimana cara memasang burung twitter terbang atau melayang - layang atau mondar - mandir di blog sobat. Bagi sobat yang tertarik untuk memasang burung twitter terbang atau melayang - layang ini, silahkan ikut tutorial berikut .

1. Log in ke akun blog sobat.
2. Klik Rancangan --> Elemen Laman --> Tambah Gadget --> Pilih HTML/Javascript

Masukkan Script berikut ke dalam kotak yang telah di sediakan.

3. Klik save / simpan.

Tambahan:
Ganti tulisan yang berwarna merah dengan warna icon twitter kesukaan sobat.

Warna Kuning

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1U7ozrIY6DEqPhEzkUGxrFJVLNyhYH5WAYtFkkwhipZHnOpqc2YB9SGsiTlwWbFpp1EzcdGjUtDHDzXQbYIfbGsgplmeDKWyHAx0e3IXN-BnNatTxkgNsjSygj7dZyeFf3L5gWj5uR3I/s1600/yellow+bird.png

Warna Hitam

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtNgKIczIiQZ7nK88qp0o1CSd9RrQ6rFugA9g7f2I3uzy9waMr9SvakJRahPjNR39vgmiAu6VUpxhSKZadqMVWJdO9BwDgKipUSJugEEs1kge4IpfbZk6hWqXguPArEvkVFSqn48bWfwM/s1600/black+bird.png

Warna Biru

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJLsJ7uU38nUUrwameG6wfs5DOjzgVt6x1HVDFpH9BZdc9zLSulcTZkQlOjQqEYDcvSHIOmLcEcwmr1oRQe3WQQyiMjoS0mOvofx51lAW1ExXUrYBrFtSOyXq4Q5YVn32d62giqoeI9a8/s1600/Blue+bird.png

Warna Coklat

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeeAD6ypCo-HaHCi15nyS7zQTTcVxqLelsEU1P-n8Q-pHTfKB3CVAwCSj5eF41ZQBTsxqtXTSvchrOvhMGvwGC90fXdL6mz1jsIhifLGMyxCFzKIrHJAksCvkPN_8Na9shnLCxANkcDeU/s1600/brown+bird.png

Warna Hijau

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikryXB5HHYTkvloSiiCiQkGHCd3Ar8CfiOiBSWBB6_QBQrim0bsWZ6HNO24uRFdDhe9d3ytqMLqQsqgFdcAHFylGKgCu5j7o54TV-5rBj_MoWxce4fZR6LZGBrIzYBtstVcOfE8KRyMPs/s1600/Green+bird.png

Warna Ungu

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJINKY9Qn9rrj1p0lBiVMuyu7UELxYfWCt5CrAMwrhx8FQt0W_G9tye9cYTDd42DRw7NBjQhu55bFSePu4Z_9xztp2GKcFSSGJr-Y_WP5FbiB8TF5N4rPAXhPZijERx1B4ccWtRvF75II/s1600/purple+bird.png

Warna Putih

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ1dPER_nYghWv_EcXMGvMY3SKmCfc_p_Xw9-L2rMyyqHtgpNUmsiIUEmWyNMiB9q9Gv-qaGir3Aiw1SlbVkVRPkLk58qs2CwgIY-sO28hxxxdm8egQsHNgy4AABvElBY08kGB8Ivx-5Y/s1600/white+bird.png

Warna Merah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-AlclIfn7l1UoxXTMTckJw4E4N32amECUGEze1BUl8Ra-ocLeXZAfqTywj_xC84hBsh0AIaKSsy3dRgfTYZOyFaDn_SW_XZOrFLOhNBboXelo43yBHvxGXR-NmrC7A4s7oor8VmgLO9Y/s1600/red+bird.png

Ganti Tulisan yang berwarna biru dengan username twitter sobat.

Friday, March 29, 2013

Cara Membuat Multi Level Drop Down dengan jQuery

Membuat Multi Level Drop Down dengan jQuery

Saya sebelumnya ucapkan terima kasih kepada temen-temen yang telah setia mengunjungi blog ini. Saya akan terus berikan apa yang saya tahu tentang tutorial membuat website kepada anda semua. Nah, kali ini saya akan memberikan satu lagi tutorial blog mengenai cara membuat multi level drop down menu dengan jQuery. Memang sebelumnya saya sudah pernah posting cara membuat menu drop down yang sederhana, kali ini saya akan berikan lagi cara membuat menu drop down lagi, bedanya kali ini lebih menarik karena terdapat beberapa sub menu yang dapat ditampilkan setelah menu utama. Jika anda penasaran silahkan lihat gambar di bawah ini atau langsung saja klik disini.

Gimana, menarik kan? Nah, jika temen-temen berminat membuatnya simak langkah-langkah pembuatannya :

Login ke Blogger dengan akun
Kemudian pada dasbor klik Tata Letak >> Edit HTML centang expand template widget
Jangan lupa untuk download template anda, berjaga-jaga jika nanti ada kesalahan.
Letakkan script JQuery berikut sebelum tag

view plainprint?
  

Catatan : bagi anda yang sudah pernah menambahkan atau pada templatenya sudah terdapat scrip Jquery maka langkah ini abaikan saja

Tambahkan juga script berikut setelah script JQuery yadi

view plainprint?
"stylesheet" type="text/css"  href="jqueryslidemenu.css" />         
  

Selanjutnya tambahkan kode CSS berikut diatas tag ]]>

.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

Setelah itu tambahkan kode HTML berikut diatas
(menu drop down diatas header), jika ingin meletakkan di bawah header cari kode penutup header seperti ini

kemudian letakkan dibawahnya :