INDIANA NET

Cara Memperbaiki Hardisk Yang Rusak

22.00 Diposting oleh Unknown

Sudah lama sekali saya tidak pernah sharing tips-tips komputer buat sobat semua, dan kali ini postingan saya akan membahas tentang bagaimana cara memperbaiki HardDisk PC/Laptop yang rusak/error/bad sector baik disengaja ataupun yang tidak disengaja, tips ini bukan murni dari hasil percobaan saya karena belum ada korban HDD yang rusak untuk diperbaiki dan menurut sumber dari yang punya tips ini sudah pernah dicoba dan work 100% walaupun saya sendiri belum menguji coba, paling tidak informasi tips ini sebagai pegangan buat kita semua bilamana suatu saat nanti kita mendapatkan masalah yang sama pada HDD kita. dan tidak banyak bicara untuk segera masuk kepembahasannya mari kita simak penjelasan dibawah ini.

Salah satu penyebab dari komputer sering hang, komputer restart sendiri dan terjadinya tampilan bluescreen adalah terdapatnya masalah / kerusakan pada hardisk komputer.

Kerusakan pada hardisk ini diantaranya disebabkan karena sering dimatikannya komputer tanpa perintah shutdown dan karena gangguan pada aliran listrik seperti matinya listrik secara tiba-tiba atau terjadinya lonjakan pada tegangan listrik seperti yang biasa terjadi ketika adanya petir saat hujan.

Selain itu faktor usia (lifetime) dari hardisk itu sendiri juga merupakan hal yang dapat mempengaruhi performa dari hardisk. Dalam kesempatan ini saya akan berbagi informasi mengenai Cara Memperbaiki Hardisk menggunakan Perintah {run=windows+R}Checkdisk/ CHKDSK.EXE.

Checkdisk merupakan tool bawaan Windows yang dapat kita gunakan untuk menguji dan memperbaiki kondisi hardisk. Menjalankan perintah Checkdisk secara rutin juga merupakan salah satu cara untuk merawat dan meningkatkan kinerja komputer. Umumnya cukup dengan perintah Checkdisk / CHKDSK ini kita sudah dapat memperbaiki keruksakan pada hardisk seperti bad sector, lost clusters, cross-linked files, dan directory errors. Perintah Checkdisk dapat kita jalankan dengan 2 cara yaitu lewat Command Promt dan lewat My Computer atau Windows Explorer.

1. Menjalankan perintah CHKDSK pada Command Prompt.
•    Pada tampilan Command Prompt [cmd]ketik perintah: CHKDSK D:
•    Perintah tersebut akan menjalankan CHKDSK pada Drive D dalam mode read-only.
•    Ketikkan perintah: CHKDSK D:/F
•    Perintah tersebut digunakan untuk merepair error tanpa melakukan scanning bad sector.
•    Ketikkan perintah: CHKDSK D:/R
•    Perintah tersebut digunakan untuk merepair error, menemukan bad sector dan me-recover data.

2. Menjalankan perintah CHKDSK pada My Computer atau Window Explorer.
•    Buka Windows Explorer, atau My Computer.
•    Klik kanan pada hardisk yang akan di-cek, klik Properties.
•    Klik tab Tools, pada pilihan Error Checking klik Check Now..
•    Jendela Check disk option akan tampil.

•    Untuk menjalankan Chkdsk pada mode read-only mode, klik Start.
•    Untuk merepair error pada file system, check Automatically fix file system errors,
•    Untuk merepair error, menemukan bad sector dan me-recover data pilih Scan for and attempt recovery of bad sectors,
•    Anda juga dapat mencentang kedua pilihan tersebut apabila diperlukan.
•    Apabila muncul pesan : Chkdsk cannot run because the volume is in use by another process. Chkdsk may run if this volume is dismounted first. ALL OPENED HANDLES TO THIS VOLUME WOULD THEN BE INVALID. Would you like to force a dismount on this volume? (Y/N) ketik Y dan Enter.
•    Apabila muncul pesan: Chkdsk cannot run because the volume is in use by another process. Would you like to schedule this volume to be checked the next time the system restarts? (Y/N) Ketik Y, dan ENTER lalu restart komputer untuk menjalankan Scandisk.

Untuk memperbaiki hardisk menggunakan utility Checkdisk/perintah CHKDSK ini ada beberapa metode yang bisa kita lakukan, yaitu:

1.    Apabila komputer masih bisa booting dan login ke windows maka kedua cara untuk menjalankan CHKDSK.EXE tersebut diatas (melalui command prompt maupun Windows Explorer) dapat kita lakukan.
2.    Apabila Hardisk tidak bisa booting, maka kita harus mengambil hardisk tersebut dan memasangnya pada komputer yang lain, baru kemudian menjalankan perintah Checkdisk/CHKDSK.
3.    Menggunakan CD Setup Windows dan jalankan perintah CHKDSK melalui Menu Recovery Console..
4.    Menggunakan CD UBCD4WIN. Caranya klik Start - Program - Disk Tools - Diagnostic, klik Check Disk.

Demikianlah Postingan saya kali ini mengenai Cara memperbaiki hardisk yang rusak atau bad sector menggunakan utility bawaan Windows: Checkdisk/CHKDSK.EXE ini, Semoga bermanfaat dan teri kasih atas kunjungannya...

Backlink Berkualitas Menurut Google

21.45 Diposting oleh Unknown

Pada Postingan kali ini saya akan membahas sedikit tentang Backlink yang berkualitas menurut google, tahukan Anda mengenai Backlink Yang Berkualitas Menurut Google,? awalnya memang saya akui kalau hal ini sedikit membingungkan namun setelah membaca beberapa artikel mengenai SEO dari para master SEO akhirnya sekarang saya pun mengerti.

Untuk seorang pemula perlu di ketahui bahwa backlink yang berkualitas menurut google ini ialah backlink dari situs lain yang berkonten sama atau bertema sama dimana halaman dari situs tersebut telah menggiring pengunjung ke situs kita melalui link yang telah kita pasang, menurut google bila ada sebuah backlink yang mengarah ke situs bertema Tutorial Blog dari sebuah situs bertema Panduan Pembuatan Blog maka itu akan di anggap backlink yang berkualitas, di mata search engine google karena tema dari kedua situs tersebut relevan, dan jika tema dari kedua situs tersebut berbeda maka kemungkinannya tidak akan relevan dan tidak di anggap sebuah backlink yang berkualitas oleh Google, namun masih ada kemungkinan itu terjadi bila backlink kita buat dari sebuah komentar yang kita berikan di sebuah halaman website. dengan komentar yang berkualitas yang artinya komentar kita membahas atau benar-benar mengomentari situs, tersebut atau dapat di katakan komentar dan isi halaman situs itu relevan atau sesuai dan saling berhubungan lalu sertakanlah link kita yang nantinya akan jadi sebuah backlink yang berkualitas pula.

Tempat untuk berkomentar dimana kita bisa menyertakan link atau membuat link di situs tersebut yaitu di situs dofollow yang mengijinkan penulisan link di halamannya jika nofollow akan di anggap sebuah spam. Itulah yang saya pahami dari beberapa pemahaman saya setelah membaca banyak artikel dari berbagai Master SEO. semoga postingan saya kali ini tentang Backlink yang berkualitas menurut Google ini bisa bermanfaat bagi anda dan terima kasih atas kunjungannya.

Vertikal Hover Menu Keren

19.48 Diposting oleh Unknown

Pada Postingan kali ini saya akan membahas bagaimana caranya membuat Vertikal Hover Menu, kalau dilihat tampilannya mungkin sama dengan Vertikal Menu yang ada pada postingan saya sebelumnya. Perbedaan Vertikal Hover Menu ini yaitu bila kita menggerakan Cursor mouse kita kesebuah Link yang ada didalam Menu tersebut maka akan keluar gambar baik itu gambar animasi atau bukan terserah kita sendiri yang mengaturnya. untuk Screen Shotnya bisa anda Lihat pada gambar dibawah ini :

Screen Shot Vertikal Hover Menu :

Screen Shot Vertikal Hover Menu ketika kita menggerakan mouse kita pada Link yang ada :

Seperti pada screen shot diatas ketika kita menggerakan mouse kita pada Link yang ada pada menu tersebut maka akan keluar gambar seperti gambar robot gundam diatas.

Bila anda berminat untuk membuat Vertikal Hover Menu ini caranya yaitu sebagai berikut :

1. Anda login dulu ke blogger dengan menggunakan Account anda

2. Setelah anda login anda langsung masuk ke menu Template dan klik Edit HTML

3. Sebelum anda memodifikasi Template anda ada baiknya anda backup dulu template anda

4. Pada bagian Edit HTML anda cari kode seperti ini ]]></b:skin>

5, Lalu copy dan pastekan kode CSS dibawah ini tepat diatas kode ]]></b:skin>

Kode CSS :

/*----------------Start CSS Hover Menu-------------------------------*/
#bullethover{
list-style-type:none;
margin:0;
background: -moz-linear-gradient(top, #000950, #0012ff, #000950);
background: -webkit-gradient(linear, 0% top, 0% bottom, from(#0012ff), to(#000950));
padding:0px;
border-top:10px solid #ff0000;
border-bottom:10px solid #ff0000;
border-left:5px solid #470000;
border-right:5px solid #470000;
text-shadow:0px 1px 1px #000;
}
#bullethover li{
font-family:Verdana;
font-size:12px;
font-weight:700;
padding:10px 0px 10px 0px;
background: -moz-linear-gradient(top, #000950, #0012ff, #000950);
background: -webkit-gradient(linear, 0% top, 0% bottom, from(#0012ff), to(#000950));
}
#bullethover li a{
padding:10px 10px 10px 20px;
text-decoration:none;
color:#fff;
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
-ms-transition:1s;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir-F2-iKhOg0E8tUCGn3WQ9RkwovHj-I5ANMFQtdO8QvNSjPtSJrNAeKyhcgGDnQYmwnLGFlCGWUhIPQsI-84CvqeKn_5Dhjmw3YZQmU1EnBbupzOh7cMsnYKsdk4aGsI_XYT_cGPTKus/s1600/bullet-arrow-red-001-1.png") no-repeat center left;
background-size:20px 20px;
background-repeat:no-repeat;
}
#bullethover li:hover a{
color:yellow;
padding-left:70px;
}
.bulletimagestyle{
position:absolute;
}
/*----------------end CSS Hover Menu -------------------------------*/

6. Setelah anda copy dan paste kode diatas Selanjutnya Masih pada Edit HTML sekarang anda cari kode seperti ini </head>

7, Bila sudah anda temukan kode tersebut lalu anda copy dan paste kode javascript dibawah ini tepat diatas kode </head> tersebut.

Kode Javascript :

//<![CDATA[

var bulletimg1 = ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUxd157XTQOp2HJyPlXURWN7dONj39FEBxB49CgEcQ_teS1Jc6-gTPm3VuUcompXp6VSAyvCbMneaZG9slVnjLCoN5453D-wTxSj1fXeOD-ioAXWFSJJUc_kvi-_e2J61mvzTVPLHixcc/s1600/2-1.gif", 40, 2, 30]

var bulletimg2 = ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5YwHSUjDcaH6jcgeP2tA3jvt5E1AQgriN1eJN5oeAtfWn2PL8OFByrus0SUHaaLBM9H0pylKAZh8jQMJSr782JJcS0QT7SgSSeCjDCydZVGoftLNviuhIF1E2CDqClnKD-FzVWj7TPAQ/s1600/017.gif", 40, 2, 30]

var bulletimg3 = ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9APr495nGwShzAcTJOpRGsYsRO5Jo7D8NRwLR0qFOB2KIooChCTOPm-s0XXIaJpJOf1NHmSzFtHtrt9jC-hifMXPnqryzUqMoLE7ASmPTrrIPHXvthGOE71UI9odFRnfFrRZ23K1GVbM/s1600/1-1.gif", 40, 2, 30]

var bulletimg4 = ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2_aG4PiJwv9A1zW0cUxRPLbNC1cdj22Hyn6sOXvChDlsxrmz8PvGPtIfQRzoaJRx82Glu_C8B0Tw2oO3tKMobXclgiYOdt-gZ4EUFXLHOqsrvGnUos-K-tbgpDpmfWvGkhtyjjAceWO0/s1600/3-1.gif", 40, 2, 30]

var bulletimg5 = ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyTAusT4kk7VCVnpqHFhRStgdn_aPDlTUdEXJpKnE1K0E271IWYugEducY2gvmZkO9nQYtVntfx5PJGsX809y1dOgIayUadUHzImisD4XehqG1ZUpa4-FxZzlvw9sf_mWtGRGWamM5J1w/s1600/8-1.gif", 40, 2, 30]

var bulletimg6 = ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikm3skiQ2j1gtZs-Pt4oE8-5jGvXMjFqHZhDSI7caHsFpVwftWubbEpg39J44V2JE3Fpfs0vUFow0jSr8p8Si-BWH2R_PUVT0ceuPrHfMNuW7yjVD5FKAAFMBBgZtaL3182T4B-iGGSDY/s1600/15-1.gif", 40, 2, 30]

var classnameRE = /(^|\s+)BM($|\s+)/i

function caloffset(what, offsettype) {

var totaloffset = (offsettype == "left") ? what.offsetLeft: what.offsetTop;

var parentEl = what.offsetParent;

while (parentEl != null) {

totaloffset = (offsettype == "left") ? totaloffset + parentEl.offsetLeft: totaloffset + parentEl.offsetTop;

parentEl = parentEl.offsetParent;

}

return totaloffset;

}

function displaybullet(linkobj) {

var reltovar = window[linkobj.getAttribute("rel")]

bulletobj.setAttribute("src", reltovar[0])

bulletobj.style.left = caloffset(linkobj, "left") - reltovar[1] - reltovar[2] + "px"

bulletobj.style.top = caloffset(linkobj, "top") - reltovar[3] + "px"

bulletobj.style.visibility = "visible"

}

function modifylinks() {

bulletobj = document.createElement("img")

bulletobj.setAttribute("id", "bulletimage")

bulletobj.className = "bulletimagestyle"

document.body.appendChild(bulletobj)

for (i = 0; i < document.links.length; i++) {

if (typeof document.links[i].className == "string" && document.links[i].className.search(classnameRE) != -1) {

document.links[i].onmouseover = function () {

displaybullet(this)

}

document.links[i].onmouseout = function () {

bulletobj.style.visibility = "hidden"

}

if (window.addEventListener) window.addEventListener("load", modifylinks, false)

else if (window.attachEvent) window.attachEvent("onload", modifylinks)

else if (document.getElementById || document.all) window.onload = modifylinks

//]]>

</script>

Keterangan kode Javascript diatas :

Tulisan yang berwarna kuning pada kode Javascript diatas yaitu Link dari gambar yang nanti akan keluar pada Vertikal Hover Menu bila kita menggerakan mouse kita pada link yang ada pada kotak Vertikal Hover Menu tersebut. silahkan anda ganti dengan Link gambar yang sesuai dengan keinginan anda.

8. Setelah itu anda klik save untuk menyimpan Template anda.

9. Sekarang anda masuk ke Menu Tata Letak dan anda klik Add Gadget atau tambah gadget pada bagian sidebar template anda, selanjutnya anda pilih gadget yang HTML Javascript. Setelah anda pilih gadgetnya sekarang anda copy dan paste kode XHTML dibawah ini pada gadget HTML Javascript tersebut kemudian klik sava atau simpan.

Kode XHTML :

<ul id="bullethover">

<li><a class="BM" href="http://www.blogger.com/Link%20Posting%20Anda%20disini" rel="bulletimg1" title="menu title Disini">Judul Posting Disini</a></li>

<li><a class="BM" href="http://www.blogger.com/Link%20Posting%20Anda%20disini" rel="bulletimg2" title="menu title Disini">Judul Posting Disini</a></li>

<li><a class="BM" href="http://www.blogger.com/Link%20Posting%20Anda%20disini" rel="bulletimg3" title="menu title Disini">Judul Posting Disini</a></li>

<li><a class="BM" href="http://www.blogger.com/Link%20Posting%20Anda%20disini" rel="bulletimg4" title="menu title Disini">Judul Posting Disini</a></li>

<li><a class="BM" href="http://www.blogger.com/Link%20Posting%20Anda%20disini" rel="bulletimg5" title="menu title Disini">Judul Posting Disini</a></li>

<li><a class="BM" href="http://www.blogger.com/Link%20Posting%20Anda%20disini" rel="bulletimg6" title="menu title Disini">Judul Posting Disini</a></li>

</ul>

10. klik Simpan dan buka blog anda untuk melihat hasilnya. Keterangan Kode XHTML :

Silahkan anda Ganti Tulisan warna biru diatas dengan Link postingan anda serta Judul dari Postingan anda, dan untuk tulisan bulletimg1 sd bulletimg6 adalah Link Gambar yang akan keluar bila anda menggerakan mouse anda pada Link tersebut. Contohnya pada Link 1 kita memakai Bulletimg1 maka yang keluar adalah gambar yang tertera pada kode Javascript diatas yaitu :

Silhkan anda ganti pilihan kode bulletimg nya pada setiap Link posting anda sesuai dengan Link gambar yang anda sukai.Selamat mencoba dan semoga postingan saya kali ini tentang cara membuat Vertikal Hover Menu ini bermanfaat bagi anda.

Vertikal Menu Keren Ala Indiana-net

18.56 Diposting oleh Unknown

Akhirnya kelar juga saya utak atik template hari ini dengan tujuan membuat menu vertikal untuk daftar postingan yang saya rasa penting, menu vertikal seperti ini mungkin sudah tidak aneh lagi bagi para sobat blogger yang mungkin sudah sering anda lihat pada blog" lainnya.yang berbeda mungkin hanya dari warna dan tampilan saja. Contoh menu vertikal yang saya buat bisa anda lihat pada gambar dibawah ini.

Bila anda berminat untuk membuat Menu vertikal ini caranya cukup mudah yaitu :

1 Anda login ke Blogger terlebih dulu dengan menggunakan account anda

2 Setelah itu anda masuk ke menu template dan klik edit HTML

3 Pada Edit HTML anda cari kode seperti ini ]]></b:skin>

4 Bila sudah anda temukan kode tersebut selanjutnya anda copy kode CSS dibawah ini dan pastekan tepat

diatas kode ]]></b:skin>

Kode CSS :

#VMenu {
 width: 280px;
margin:5px;
}
#VMenu ul{
background:#6b0101;
padding:3px;
list-style:none;
}
#VMenu li{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir-F2-iKhOg0E8tUCGn3WQ9RkwovHj-I5ANMFQtdO8QvNSjPtSJrNAeKyhcgGDnQYmwnLGFlCGWUhIPQsI-84CvqeKn_5Dhjmw3YZQmU1EnBbupzOh7cMsnYKsdk4aGsI_XYT_cGPTKus/s1600/bullet-arrow-red-001-1.png") no-repeat center left;
background-size:20px 20px;
background-repeat:no-repeat;
list-style:none;
margin:0;
padding:0;
background: -moz-linear-gradient(top, #000950, #0012ff, #000950);
background: -webkit-gradient(linear, 0% top, 0% bottom, from(#0012ff), to(#000950));
}
#VMenu li a {
height: 27px;
text-decoration: none;
color:#fff;
font-family:Arial narrow;
font-size:14px;
font-weight:700;
text-shadow:1px 1px 1px #000;
}
#VMenu li a:link, #VMenu li a:visited {
background-position:0px 4px;
color:#fff;
display: block;
padding: 8px 0 0 22px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir-F2-iKhOg0E8tUCGn3WQ9RkwovHj-I5ANMFQtdO8QvNSjPtSJrNAeKyhcgGDnQYmwnLGFlCGWUhIPQsI-84CvqeKn_5Dhjmw3YZQmU1EnBbupzOh7cMsnYKsdk4aGsI_XYT_cGPTKus/s1600/bullet-arrow-red-001-1.png") no-repeat center left;
background-size:20px 20px;
background-repeat:no-repeat;
}
#VMenu li:hover{
background: -moz-linear-gradient(top, #470000,#ff0000, #470000);
background: -webkit-gradient(linear, 0% top, 0% bottom, from(#ff0000), to(#470000));
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir-F2-iKhOg0E8tUCGn3WQ9RkwovHj-I5ANMFQtdO8QvNSjPtSJrNAeKyhcgGDnQYmwnLGFlCGWUhIPQsI-84CvqeKn_5Dhjmw3YZQmU1EnBbupzOh7cMsnYKsdk4aGsI_XYT_cGPTKus/s1600/bullet-arrow-red-001-1.png") no-repeat center left;
background-size:30px 30px;
background-repeat:no-repeat;
margin-left: 20px;
}

5 Setelah anda copy kode diatas dan meletakannya diatas kode ]]></b:skin> selanjutnya anda klik save

6 Setelah anda save template anda langkah selanjutnya anda ke menu tata letak dan pada menu tata letak

anda klik tambah add gadget atau tambah gadget dan pilih gadget yang HTML Javascript.

7 Bila sudah anda pilih gadget HTML Javascriptnya sekarang anda copy dan paste kode" XHTML dibawah

ini pada gadget HTML Javascript tersebut.

Kode XHTML :

<div id="VMenu">
<ul>
<li><a href="LINK 1" title="Title 1">JUDUL 1</a></li>
<li><a href="LINK 2" title="Title 1">JUDUL 2</a></li>
<li><a href="LINK 3" title="Title 1">JUDUL 3</a></li>
<li><a href="LINK 4" title="Title 1">JUDUL 4</a></li>
<li><a href="LINK 5" title="Title 1">JUDUL 5</a></li>
</ul>
</div>

8 Klik simpan atau save dan buka blog anda untuk melihat hasilnya

Keterangan :

Untuk tulisan LINK 1 sd LINK 5 silahkan anda ganti dengan Link postingan anda.

Untuk tulisan JUDUL 1 sd JUDUL 5 silahkan anda ganti dengan Judul Postingan anda

dan bila anda ingin memperbanyak isi dari menu Vertikal tersebut, anda cukup memperbanyak kode seperti ini saja dengan cara copy paste.

<li><a href="LINK 1" title="Title 1">JUDUL 1</a></li>

Silahkan anda coba dan semoga postingan saya tentang cara membuat menu vertikal kali ini bisa bermanfaat bagi anda. Terima kasih atas kunjungannya

Membuat Buku Tamu Melayang untuk CBOX atau Shoutbox

06.40 Diposting oleh Unknown

Untuk posting kali ini saya akan membahas tentang bagaimana caranya membuat buku tamu yang kalau kita klik melayang ketengah screen, yang biasanya digunakan oleh para sobat blogger untuk widget CBOX atau Shoutbox, untuk Screen Shootnya bisa anda lihat pada gambar dibawah ini...

Untuk membuat Widget buku tamu melayang tersebut caranya sangatlah mudah, yaitu anda cukup mengcopy code dibawah ini ke widget Html yang disediakan oleh blogger. atau lebih jelasnya yaitu dengan cara :

1 Snda masuk atau login dulu ke blogger menggunakan account google anda

2 Setelah itu anda masuk ke menu tata letak halaman

3 klik add gadget atau tambah gadget terus anda pilih gadget yang Html

4 bila anda telah pilih gadget html terus anda copy dan paste code dibawah ini pada gadget tersebut.

Codenya adalah :

<!-- Script Buku Tamu Melayang-->

<style type="text/css">

#gb{

position:fixed;

top:10px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:100px;

width:30px;

float:left;

cursor:pointer;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi81eEDq5GiQKxHtGLB5uKuP5OpSl9eOdC0wexccqE7e4iAEoGMDFDBBgqHNhPbLGJPr_LnG-Y2CaGPqDvJ2LqhG6XCpONRzdK2GqNmwGU05UJ34qq_s04GcUlXVy3dvNcIiUimg_S0rI8/s1600/CBOX-ICON.gif') no-repeat;

}

.gbcontent{

float:left;

height:560px;

width:310px;

background: -moz-linear-gradient(top, #6b0101, #c30000, #6b0101);

background: -webkit-gradient(linear, 0% top, 0% bottom, from(#c30000), to(#6b0101));

padding:10px;

border-top:10px solid #6b0101;

border-bottom:10px solid #6b0101;

border-left:10px solid #c30000;

border-right:10px solid #c30000;

}

</style>

<script type="text/javascript">

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

gb.style.right = x.toString() + "px";

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

}

</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()">

 </div>

<div class="gbcontent">

Masukan Kode CBOX atau Shoutbox anda disini..

<div style="text-align:right">

<a href="javascript:showHideGB()">

</a>

</div>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script>

<!-- End Script Buku Tamu Melayang-->

Silahkan anda copy dan paste kode diatas pada gadget html dan jangan lupa untuk memasukan kode CBOX anda sendiri pada gadget tersebut setelah itu kemudian klik save, buka blog anda untuk melihat hasilnya.

Keterangan :

ganti tulisan Masukan Kode CBOX atau Shoutbox anda disini.. yang ada pada kode diatas dengan kode CBOX atau Shoutbox anda sendiri, Bila anda ingin merubah besar dan kecilnya ukuran buku tamu tersebut sesuai dengan yang anda inginkan, anda cukup mengganti kode yang suda saya tandai dengan warna merah seperti dibawah ini,

Bila anda ingin mengganti ukuran tinggi buku tamunya anda tinggal mengganti kode height:560px;

dan untuk memperlebarnya anda ganti angka seperti pada kode ini width:310px; dan untuk Link gambar yang berwarna kuning pada kode diatas silahkan anda ganti dengan link gambar yang anda inginkan dengan ukuran tinggi = 100 px dan lebar = 30px

Selamat mencoba dan semoga bermanfaat.

Cara simple membuat menu Tab View Tiga kolom

01.30 Diposting oleh Unknown

Berawal dari blogwalking secara tidak sengaja mempunyai ide "bagaimana menghemat space di sidebar agar bisa leluasa tapi juga simple". Nah akhirnya dengan iseng-iseng ketemu mengenai Cara simple membuat menu Tab View Tiga kolom di sidebar blog .

Mungkin dengan menggunakan menu Tab view pada blog kita, akan memperluas space blog kita sehingga semua yang kita suguhkan di blog akan bisa terexsplore sesuai dengan keinginan kita. Selain lebih menambah ruang (space) mungkin juga menjadi suatu hal yang termasuk menarik buat suatu blog. Langsung saja ke pembahasan mengenai nagaimana Cara simple membuat menu Tab View Tiga kolom di sidebar blog seperti pada contoh gambar dibawah ini :

Langkah membuat menu Tab View 3 kolom :
1.Masuk pada blogger
2.Pilih Rancangan =>> klik edit html =>> centang exspand template widget
3.Pada edit html Tekan ( Ctrl + F ) untuk mencari kode, kemudian ketikan (cari kode) ]]></b:skin>, dan letakkan kode dibawah ini di atas kode ]]></b:skin>

4.Cari kode </head>
5.Setelah ketemu letakkan kode di bawah ini di atas kode </head>

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

6.Klik Save Template

Lanjut langkah berikutnya :
1.Masuk ke Rancangan (edit tata letak)
2.Klik "Tambah Gadget" =>> pilih "HTML Java Script".
3.Copy Paste kode dibawah ini dan masukkan ke dalam gadget HTML Javascript tersebut

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

<div class="Page">
<div class="Pad">
<li><a href="URL POST DISINI">JUDUL POST DISINI</a></li><br />
<li><a href="URL POST DISINI">JUDUL POST DISINI</a></li><br />
<li><a href="URL POST DISINI">JUDUL POST DISINI</a></li><br />
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href="URL POST DISINI">JUDUL POST DISINI</a></li><br />
<li><a href="URL POST DISINI">JUDUL POST DISINI</a></li><br />
<li><a href="URL POST DISINI">JUDUL POST DISINI</a></li><br />
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href="URL POST DISINI">JUDUL POST DISINI</a></li><br />
<li><a href="URL POST DISINI">JUDUL POST DISINI</a></li><br />
<li><a href="URL POST DISINI">JUDUL POST DISINI</a></li><br />
</div>
</div>

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

<script type="text/javascript">
tabview_initialize('TabView');
</script><noscript><a href="http://indiana-net.blogspot.com/" title="Blog Tips And Trick"><strong>Blog Tips And Trick</strong></a></noscript>

Catatan :
Warna Merah adalah Judul Tab nantinya
Warna Biru adalah Isi dari Tab View nantinya
Pada isi Tab view, isikan sesuai dengan link, gambar, ataupun lainnya sesuai dengan keinginan.

4.Klik Save.

Silahkan mencoba dan semoga bermanfaat dan Terima kasih banyak atas kunjungannya.

Cara Membuat Menu Slide vertikal

01.13 Diposting oleh Unknown

Dilihat dari tampilan dan efek slidding yang muncul, Slide Menu vertikal ini tidak beda dengan tampilan menu accordion. Efek slidding pada menu vertikal ini menampilkan sebuah ikon sesuai dengan menu yang dituju. Sehingga akan tampak lebih indah bila anda menggunakan Slide Menu vertikal ini pada web ataupun blog anda. Cara pembuatannya sangat mudah, yaitu menggunakan fitur CSS dan beberapa kode HTML. Dan anda tinggal menyisipkan sedikit kode CSS tersebut pada template blog anda, dan sedikit kode HTML pada sidebar blog anda.

OK..., bila anda berminat memasang Slide Menu vertikal ini pada blog anda, silahkan anda bisa ikuti langkah - langkah berikut :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.
4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.
5. Jangan lupa Klik tombol "Expand Widget Templates"
6.Cari kode di bawah ini atau yang mirip dengan kode ini : </head>
7. Copy kode dibawah ini dan paste sebelum kode </head>:

/*widget Slide Menu vertikal by noer cara buat web gratis.com*/

ul#Slide-Menu-vertikal-cbwg {

list-style: none;

z-index:999999;

margin:0;

padding:0;

}

ul#Slide-Menu-vertikal-cbwg li {

width: 200px;

display:inline;

margin:0;

padding:0;

}

ul#Slide-Menu-vertikal-cbwg li a {

display: block;

position:relative;

width: 200px;

height: 25px;

background-color:#aaa;

background-repeat:no-repeat;

background-position:50% 10px;

border:1px solid #aaa;

text-decoration:none;

text-align:center;

-moz-border-radius: 5px;

border-radius: 5px;

margin:0;

padding:0;

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

}

ul#Slide-Menu-vertikal-cbwg li a:hover{

background-color:#fff;

border:1px solid #bbb;

padding-top: 80px;

}

ul#Slide-Menu-vertikal-cbwg li a span{

background: -moz-linear-gradient(center top, #fff 0%,#bbb 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #bbb),color-stop(1, #fff));

border-top:2px solid #bbb;

-moz-border-radius: 5px;

border-radius: 5px;

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

opacity: 0.7;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

display: block;

width: 200px;

height: 25px;

font-size:14px;

font-weight:bold;

color:#000;

margin:0;

padding:0;

}

ul#Slide-Menu-vertikal-cbwg li a span:hover{

text-decoration:none;

text-align:center;

font-size:14px;

font-weight:bold;

color:#40954E;

background-color:#eee;

opacity: 0.7;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

}

</style>

8. Copy kode dibawah ini dan paste setelah kode diatas :

ul#Slide-Menu-vertikal-cbwg .ITEM 1 a:hover     { background-image: url(<b>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI9m1AURA3749bhE5H-L1ETXQRzBWThc1Q9-tsoqa8E-KMjKK55AuMQc9eyTBN-qmyy9Co0F16EboJ1TL_eK6MuIGCoDeZUQpL_ik8jYaNvUVDyrOJjgBBC1SAU4YYfVh40wj9eX5A_xVT/s104/home+2.png</b>);}

ul#Slide-Menu-vertikal-cbwg .ITEM 2 a:hover      { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeKmYKuPIsSs0RbF8GrGsRZDuLrH-MdGZaiWnUKKDQhpRPjr51DPOtUhlQu25zCqm3dwNv6gSHjKg5Kq3ZRQeOkFaLgPhfAlwJ_TwbP3d7-OSjBi7rqi-jmo7EA03-KZUp9sQzdTRxOmqH/s104/id_card.png);}

ul#Slide-Menu-vertikal-cbwg .ITEM 3 a:hover      { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfzgxypoERmAheHN8pItfsgXStEmmWLF6Z_wWgV-TfsNMUG9RTWycJqvxWM6uGli4ihW1-Hk3AkkvM4Ykfo-n_aXO5THKtfXt-7w5kSWuE1FgQOxzZM8bKpuXgIo-_H64MN2lW0JE7UFkH/s104/html_file.png);}

ul#Slide-Menu-vertikal-cbwg .ITEM 4 a:hover  { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-NDVNr974t9TYr3d8FfP-EU9PDX46c5Kps7hb8biRfUUo1kjfx5FmeFXVA_0IZ8UWGnLN5swp9wGYR0LKMiVxDDtzCgcAkqoHJdmciIQSWv6GRhJqf_50s6lVYBAlFn96dpONNB45tlyR/s104/css_file.png);}

ul#Slide-Menu-vertikal-cbwg .ITEM 5 a:hover  { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwsFFj-PFEIJsKe3TwAGVk7JkNs5PDo6qHyg7isMqiD_AmQ-DOPqvWuJ53fCJbCQx-kNr77Doi7q4aGa58L7M8vL6Yd38Wc8HtVXL8NsXAZUmKyqPd-RUXuwmdUExdvklLQRWaNOHZ3WhM/s104/js_file.png);}

ul#Slide-Menu-vertikal-cbwg .ITEM 6 a:hover  { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0CBocS5YUiWTe_hCFPHkLnoX-JnwQYS9GVYSAcy4I9trguO5TDpUumLW6KqEj_tHQuPM9sfObmjrCU4ZRgOdoeyprPsv3V5etvOkz6bAQrbRf_amlHn4Tv1iUZTlY7DkTYKDSWVpDHW2w/s104/edit_page.png);}

ul#Slide-Menu-vertikal-cbwg .ITEM 7 a:hover  { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUPSq_tBMi7RA-WN9-mnQzQ8WIYvtFJ_K0cjq8qzdGU2VVqCVOfu8wz3kOiwWp40vhBIYpVrQK9o_13f3efC-vE3VA8PC1I5xRIPLBgwCKK4LM24tzUfCp7XxU_6X8ZbgiicAtJeRUWfhC/s104/book_accept.png);}

ul#Slide-Menu-vertikal-cbwg .ITEM 8 a:hover  { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUPz51N8fVnRORx03vVD10a7hf0ttiyzGV6dgqsIsZ4CmfpYbRqVAqIdmIct7yTONDv_DvX44ynL1mLBuIz7ciUd7UdsSuAc6f1gB_D9YMZARZj19U6DCLaBvyYhjgI9UEB9d_MlElgQBE/s104/mail.png);}
</style>

Catatan :

•    Teks ULR Icon yang ada pada setiap kode menu diatas. Silahkan anda bisa ganti dengan ULR Iconnya yang sesuai dengan menu yang anda buat.
•    Sebagai refrensi, anda bisa dapatkan macam - macam bentuk icon di http://dryicons.com/free-icons/
•    Anda bisa menambah dan mengurangi jumlah item menu, sesuai kebutuhan anda, tapi disesuaikan dengan lebar area yang ada.

9. SIMPAN TEMPLATE.

Langkah selanjutnya tinggal menaruh Slide Menu vertikal pada sidebar. Ikuti langkah berikut :
1. Klik Rancangan dan pilih Elemen Laman
2. Tambah Gadget
3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript
4. Copy dan paste kode dibawah ini pada gadget tersebut :

<ul id="Slide-Menu-vertikal-cbwg">
<li class="ITEM 1">
<a href="ULR HALAMAN"><span>JUDUL MENU 1</span></a></li>

<li class="ITEM 2">
<a href="ULR HALAMAN"><span>JUDUL MENU 1</span></a></li>

<li class="ITEM 3">
<a href="ULR HALAMAN"><span>JUDUL MENU 1</span></a></li>

<li class="ITEM 4">
<a href="ULR HALAMAN"><span>JUDUL MENU 1</span></a></li>

<li class="ITEM 5">
<a href="ULR HALAMAN"><span>JUDUL MENU 1</span></a></li>

<li class="ITEM 6">
<a href="ULR HALAMAN"><span>JUDUL MENU 1</span></a></li>

<li class="ITEM 7">
<a href="ULR HALAMAN"><span>JUDUL MENU 1</span></a></li>

<li class="ITEM 8">
<a href="ULR HALAMAN"><span>JUDUL MENU 1</span></a></li>
</ul>

Catatan :

•    Teks warna BIRU pada kode ini harus sama dengan teks warna BIRU yang ada pada kode diatas.
•    Teks warna MERAH ganti dengan ULR HALAMAN anda.
•    Teks warna KUNING ganti dengan JUDUL MENU milik anda.

11.SIMPAN TEMPLATE.

Selamat mencoba dan Semoga bermanfaat....

Cara Membuat Menu Accordion Keren

00.19 Diposting oleh Unknown

Pada Posting kali ini saya akan membahas tentang cara membuat menu Open Close yang kalau kita klik maka akan keluar menu lainnya atau biasanya disebut juga dengan Accordion Menu, Menu seperti ini sangat cocok bila anda pasang atau simpan pada sidebar blog anda dan biasanya menu seperti ini digunakan untuk Menu Category, Contohnya bisa anda lihat pada gambar dibawah ini :

Untuk membuat Menu Accordion tersebut caranya adalah sebagai berikut :

1. Silahkan anda Login Ke Blogger dengan menggunakan account anda

2. Setelah anda login terus anda masuk ke menu Template

3. Setelah itu anda klik Edit Html tapi jangan lupa sebaiknya anda backup dulu Template anda.

4. Bila anda sudah membackup Template anda dan masuk ke Edit Html, selabjutnya pada Tab Html anda

cari kode Seperti ini : ]]></b:skin>

5. Kalau sudah ketemu maka langkah selanjutnya anda copy dan paste kode CSS dibawah ini tepat diatas

kode ]]></b:skin>.

Kode CSS :

.arrowlistmenu{
width: auto; /*width of accordion menu*/
}
.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Georgia;
color: cyan;
background: #181818 ;
border:3px solid #1E90FF;
-all-border-radius:10px 0 10px 0;
-moz-border-radius:10px 0 10px 0;
-webkit-border-radius:10px 0 10px 0;
margin-bottom: 2px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 5px 0 5px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}
.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
border:3px solid #FF1493;background:#1E90FF;font-color:white;
-all-border-radius:10px 0 10px 0;
-moz-border-radius:10px 0 10px 0;
-webkit-border-radius:10px 0 10px 0;
}
.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom:4px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul li{
padding-bottom: 1px; /*bottom spacing between menu items*/
}
.arrowlistmenu ul li a{
color: red;
background: url() no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 0px dotted red;
font-size: 90%;
}
.arrowlistmenu ul li a:visited{
color: #A70303;
}
.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}

Setelah Anda Copy semua Code diatas dan meletakkannya di atas kode ]]></b:skin>, langkah selanjutnya yaitu anda copy Code Javascript dibawah ini dan anda paste tepat dibawah kode ]]></b:skin>

Kode Javascript :

Bila anda meletakkan kedua Kode" diatas kemudian anda klik Save untuk menyimpan Template anda.

Langkah Selanjutnya yaitu penempatan menu tersebut, entah itu mau anda pasang pada sidebar, Lowerbar, Footerbar terserah anda. aranya yaitu anda masuk pada bagian tata Letak kemudian anda klik tambah element terus anda pilih yang HTML, setelah itu anda copy kode XHTML dibawah ini pada element HTML tersebut terus anda klik Save.

Kode XHTML :

<div class='arrowlistmenu'>
<h3 class='menuheader expandable'>Blogger Tips</h3>
<ul class='categoryitems'>
<li><a href="Masukan Link Posting Dsb Disini" target="_blank" title="Author Comments with different style">Masukan Judul Posting Dsb Disini</a></li>
<li><a href="Masukan Link Posting Dsb Disini" target="_blank" title="Author Comments with different style">Masukan Judul Posting Dsb Disini</a></li>

</ul>
<h3 class='menuheader expandable'>Template</h3>
<ul class='categoryitems'>
<li><a href="Masukan Link Posting Dsb Disini" target="_blank" title="Author Comments with different style">Masukan Judul Posting Dsb Disini</a></li>
<li><a href="Masukan Link Posting Dsb Disini" target="_blank" title="Author Comments with different style">Masukan Judul Posting Dsb Disini</a></li>

</ul>
<h3 class='menuheader expandable'>HTML</h3>
<ul class='categoryitems'>
<li><a href="Masukan Link Posting Dsb Disini" target="_blank" title="Author Comments with different style">Masukan Judul Posting Dsb Disini</a></li>

<li><a href="Masukan Link Posting Dsb Disini" target="_blank" title="Author Comments with different style">Masukan Judul Posting Dsb Disini</a></li>

</ul>
<h3 class='menuheader expandable'>Software</h3>
<ul class='categoryitems'>
<li><a href="Masukan Link Posting Dsb Disini" target="_blank" title="Author Comments with different style">Masukan Judul Posting Dsb Disini</a></li>
<li><a href="Masukan Link Posting Dsb Disini" target="_blank" title="Author Comments with different style">Masukan Judul Posting Dsb Disini</a></li>

</ul>
</div>

Keterangan :

Text yang berwarna Kuning adalah text Judul dari kategori dan text yang berwarna biru adalah Link dan Judul Postingan anda, silahkan anda ganti sesuai dengan yang anda inginkan, bila anda ingin memperbanyak isi dari kategori mmenu tersebut, anda tinggal memperbanyak kode seperti dibawah ini dan kemudian ganti text yang berwarna biru dan kuning sesuai keinginan anda.

<li><a href="Masukan Link Posting Dsb Disini" target="_blank" title="Author Comments with different style">Masukan Judul Posting Dsb Disini</a></li>

Silahkan mencoba dan semoga bermanfaat.