INDIANA NET

Template Toko Online Gratis

10.54 Diposting oleh Unknown

Bagi anda yang ingin membuat Toko Online dengan menggunakan blog, pastinya anda memerlukan template blog yang cocok untuk tampilan blog toko online anda tersebut. Seperti pada postingan saya kali ini, saya akan berbagi sebuah Template Blogger yang saya design khusus untuk Toko Online, pada template ini sudah saya sertakan juga beberapa kode CSS dan Script untuk Menu Dropdown atau Accordion, Vertikal Menu, kotak komentar yang lumayan keren lengkap dengan emoticonnya dan Slider otomatis untuk Tampilan Postingan Product anda, untuk screen shotnya bisa anda lihat pada gambar dibawah ini...

Bila anda tertarik untuk mencoba menggunakan template ini untuk blog toko online anda bisa anda klik Link download dan Link Demo untuk melihat dulu template tersebut dibawah ini.

DEMO DOWNLOAD

Untuk cara pemasangan widgetnya agar blognya terlihat seperti pada gambar screen shot diatas bisa anda copy Kode HTML dibawah ini dan masukan pada widget HTML Javascript pada blog anda.

Kode HTML untuk Menu Bar yang terletak paling atas :

<ul id="menubar">
<li><a href="http://tips-design-template.blogspot.com"><span>Wellcome</span>TO HOME</a></li>
<li><a class="trigger" href="#"><span>CATEGOTY 1</span>PRODUCT 1</a><ul>
<li>
</li>
<li><a href="#">PRODUCT 1</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 2</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 3</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 4</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 5</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 6</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 7</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 8</a></li>
</ul>
</li>
<li><a class="trigger" href="#"><span>CATEGOTY 2</span>PRODUCT 2</a><ul>
<li>
</li>
<li><a href="#">PRODUCT 1</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 2</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 3</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 4</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 5</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 6</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 7</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 8</a></li>
</ul>
</li>
<li><a class="trigger" href="#"><span>CATEGOTY 3</span>PRODUCT 3</a><ul>
<li>
</li>
<li><a href="#">PRODUCT 1</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 2</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 3</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 4</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 5</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 6</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 7</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 8</a></li>
</ul>
</li>
<li><a class="trigger" href="#"><span>CATEGOTY 4</span>PRODUCT 4</a><ul>
<li>
</li>
<li><a href="#">PRODUCT 1</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 2</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 3</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 4</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 5</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 6</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 7</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 8</a></li>
</ul>
</li>
<li><a class="trigger" href="#"><span>CATEGOTY 5</span>PRODUCT 5</a><ul>
<li>
</li>
<li><a href="#">PRODUCT 1</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 2</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 3</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 4</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 5</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 6</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 7</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 8</a></li>
</ul>
</li>
<li><a class="trigger" href="#"><span>CATEGOTY 6</span>PRODUCT 6</a><ul>
<li>
</li>
<li><a href="#">PRODUCT 1</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 2</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 3</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 4</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 5</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 6</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 7</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 8</a></li>
</ul>
</li>
<li><a class="trigger" href="#"><span>CATEGOTY 7</span>PRODUCT 7</a><ul>
<li>
</li>
<li><a href="#">PRODUCT 1</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 2</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 3</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 4</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 5</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 6</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 7</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 8</a></li>
</ul>
</li>
</ul>

Kode HTML untuk Dropdown Menu :

<div class='arrowlistmenu'>
<h3 class='menuheader expandable'>Dropdown Menu 1</h3>
<ul class='categoryitems'>
<li><a href="Link Here" title="Title-Here">Product 1</a></li>
<li><a href="Link Here" title="Title-Here">Product 2</a></li>
<li><a href="Link Here" title="Title-Here">Product 3</a></li>
<li><a href="Link Here" title="Title-Here">Product 4</a></li>
<li><a href="Link Here" title="Title-Here">Product 5</a></li>
<li><a href="Link Here" title="Title-Here">Product 6</a></li>
<li><a href="Link Here" title="Title-Here">Product 7</a></li>
<li><a href="Link Here" title="Title-Here">Product 8</a></li>
<li><a href="Link Here" title="Title-Here">Product 9</a></li>
</ul>
<h3 class='menuheader expandable'>Dropdown Menu 2</h3>
<ul class='categoryitems'>
<li><a href="Link Here" title="Title-Here">Product 1</a></li>
<li><a href="Link Here" title="Title-Here">Product 2</a></li>
<li><a href="Link Here" title="Title-Here">Product 3</a></li>
<li><a href="Link Here" title="Title-Here">Product 4</a></li>
<li><a href="Link Here" title="Title-Here">Product 5</a></li>
<li><a href="Link Here" title="Title-Here">Product 6</a></li>
<li><a href="Link Here" title="Title-Here">Product 7</a></li>
<li><a href="Link Here" title="Title-Here">Product 8</a></li>
<li><a href="Link Here" title="Title-Here">Product 9</a></li>
</ul>
<h3 class='menuheader expandable'>Dropdown Menu 3</h3>
<ul class='categoryitems'>
<li><a href="Link Here" title="Title-Here">Product 1</a></li>
<li><a href="Link Here" title="Title-Here">Product 2</a></li>
<li><a href="Link Here" title="Title-Here">Product 3</a></li>
<li><a href="Link Here" title="Title-Here">Product 4</a></li>
<li><a href="Link Here" title="Title-Here">Product 5</a></li>
<li><a href="Link Here" title="Title-Here">Product 6</a></li>
<li><a href="Link Here" title="Title-Here">Product 7</a></li>
<li><a href="Link Here" title="Title-Here">Product 8</a></li>
<li><a href="Link Here" title="Title-Here">Product 9</a></li>
</ul>
<h3 class='menuheader expandable'>Dropdown Menu 4</h3>
<ul class='categoryitems'>
<li><a href="Link Here" title="Title-Here">Product 1</a></li>
<li><a href="Link Here" title="Title-Here">Product 2</a></li>
<li><a href="Link Here" title="Title-Here">Product 3</a></li>
<li><a href="Link Here" title="Title-Here">Product 4</a></li>
<li><a href="Link Here" title="Title-Here">Product 5</a></li>
<li><a href="Link Here" title="Title-Here">Product 6</a></li>
<li><a href="Link Here" title="Title-Here">Product 7</a></li>
<li><a href="Link Here" title="Title-Here">Product 8</a></li>
<li><a href="Link Here" title="Title-Here">Product 9</a></li>
</ul>
<h3 class='menuheader expandable'>Dropdown Menu 5</h3>
<ul class='categoryitems'>
<li><a href="Link Here" title="Title-Here">Product 1</a></li>
<li><a href="Link Here" title="Title-Here">Product 2</a></li>
<li><a href="Link Here" title="Title-Here">Product 3</a></li>
<li><a href="Link Here" title="Title-Here">Product 4</a></li>
<li><a href="Link Here" title="Title-Here">Product 5</a></li>
<li><a href="Link Here" title="Title-Here">Product 6</a></li>
<li><a href="Link Here" title="Title-Here">Product 7</a></li>
<li><a href="Link Here" title="Title-Here">Product 8</a></li>
<li><a href="Link Here" title="Title-Here">Product 9</a></li>
</ul>
<h3 class='menuheader expandable'>Dropdown Menu 6</h3>
<ul class='categoryitems'>
<li><a href="Link Here" title="Title-Here">Product 1</a></li>
<li><a href="Link Here" title="Title-Here">Product 2</a></li>
<li><a href="Link Here" title="Title-Here">Product 3</a></li>
<li><a href="Link Here" title="Title-Here">Product 4</a></li>
<li><a href="Link Here" title="Title-Here">Product 5</a></li>
<li><a href="Link Here" title="Title-Here">Product 6</a></li>
<li><a href="Link Here" title="Title-Here">Product 7</a></li>
<li><a href="Link Here" title="Title-Here">Product 8</a></li>
<li><a href="Link Here" title="Title-Here">Product 9</a></li>
</ul>
<h3 class='menuheader expandable'>Dropdown Menu 7</h3>
<ul class='categoryitems'>
<li><a href="Link Here" title="Title-Here">Product 1</a></li>
<li><a href="Link Here" title="Title-Here">Product 2</a></li>
<li><a href="Link Here" title="Title-Here">Product 3</a></li>
<li><a href="Link Here" title="Title-Here">Product 4</a></li>
<li><a href="Link Here" title="Title-Here">Product 5</a></li>
<li><a href="Link Here" title="Title-Here">Product 6</a></li>
<li><a href="Link Here" title="Title-Here">Product 7</a></li>
<li><a href="Link Here" title="Title-Here">Product 8</a></li>
<li><a href="Link Here" title="Title-Here">Product 9</a></li>
</ul>
<h3 class='menuheader expandable'>Dropdown Menu 8</h3>
<ul class='categoryitems'>
<li><a href="Link Here" title="Title-Here">Product 1</a></li>
<li><a href="Link Here" title="Title-Here">Product 2</a></li>
<li><a href="Link Here" title="Title-Here">Product 3</a></li>
<li><a href="Link Here" title="Title-Here">Product 4</a></li>
<li><a href="Link Here" title="Title-Here">Product 5</a></li>
<li><a href="Link Here" title="Title-Here">Product 6</a></li>
<li><a href="Link Here" title="Title-Here">Product 7</a></li>
<li><a href="Link Here" title="Title-Here">Product 8</a></li>
<li><a href="Link Here" title="Title-Here">Product 9</a></li>
</ul>
</div>

Kode HTML untuk Vertikal Menu :

<div id="VMenu">
<ul>
<li><a href="Your Link Here" title="Tittle Here">Item 1</a></li>
<li><a href="Your Link Here" title="Tittle Here">Item 2</a></li>
<li><a href="Your Link Here" title="Tittle Here">Item 3</a></li>
<li><a href="Your Link Here" title="Tittle Here">Item 4</a></li>
<li><a href="Your Link Here" title="Tittle Here">Item 5</a></li>
<li><a href="Your Link Here" title="Tittle Here">Item 6</a></li>
<li><a href="Your Link Here" title="Tittle Here">Item 7</a></li>
<li><a href="Your Link Here" title="Tittle Here">Item 8</a></li>
<li><a href="Your Link Here" title="Tittle Here">Item 9</a></li>
<li><a href="Your Link Here" title="Tittle Here">Item 10</a></li>
<li><a href="Your Link Here" title="Tittle Here">Item 11</a></li>
<li><a href="Your Link Here" title="Tittle Here">Item 12</a></li>
<li><a href="Your Link Here" title="Tittle Here">Item 13</a></li>
<li><a href="Your Link Here" title="Tittle Here">Item 14</a></li>
<li><a href="Your Link Here" title="Tittle Here">Item 15</a></li>       
</ul>
</div>

Bila ada kekurangan pada template ini baik itu dari design tampilan dan sebagainya, silahkan anda berikan komentar anda pada kotak komentar yang tersedia dibawah ini dan nanti saya akan memodifikasi templatenya agar sesuai dengan yang anda inginkan, selamat mencoba dan semoga bermanfaat, terima kasih.

Membuat Kotak Komentar Keren

14.27 Diposting oleh Unknown

Untuk Postingan kali ini saya akan membahas tentang cara membuat kotak komentar pada blog agar terlihat keren dan tampilannya seperti pada contoh gambar dibawah ini.

Untuk membuat kotak komentar seperti pada gambar diatas caranya sangatlah mudah,
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 Hapus semua kode CSS Comment anda
5, Lalu copy dan pastekan kode CSS dibawah ini untuk mengganti kode yang dihapus tadi

/*COMMENTS*/
#comments h4{color:#fff;font-size:16px;font-family:Tahoma, Arial, Verdana;font-weight:400;margin:0 0 5px;padding:0}
#comments{background:#111;border:1px solid #666666;margin:0 0 10px;padding:10px}
.deleted-comment{font-style:italic;color:gray}
#comments-block .comment-author,.profile-datablock{margin:.5em 0}
.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: trasnparent;position: relative;border-radius: 0px 100px 120px;padding:5px;}
span.comment-actions, .continue {width:120px;background: #555555;border-radius: 20px 20px;text-align:center;font-weight:bold;text-decoration:none !important;}
span.comment-actions:hover, .continue:hover {background: #de00ff;text-decoration:none !important;}
.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .thread-toggle {background: #c30000;border-radius: 20px;padding: 6px 12px 6px;font-weight: bold;}
.comments .thread-toggle:hover {background: #48ff00;}
.comments .comment-block {padding: 11px !important;margin-left: 28px;position: relative;left: 40px;background:#c30000;border-radius: 10px;width: 420px;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:40px !important;background: #c30000;padding: 3px;border-radius: 100px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {border-radius:20px;position:relative;height:40px;width:40px;background-clip:padding-box;}
.comments .avatar-image-container {max-height:50px !important;}
.comments .comments-content .comment-header {width: 460px;background:#c30000;position: relative;left: -38px;}
.comments .comments-content .user {font-style: normal;font-weight: bold;position: relative;left: 80px;}
.comments .comments-content .datetime {position: absolute;left: 270px;}
.comment-thread ol div.continue {display:none !important;}
-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
/*End Of COMMENTS*/

Keterangan :
Untuk Kode diatas yang berwarna merah diatas adalah ukuran lebar comment block sama comment header.
bila anda ingin menyesuaikan lebarnya agar sesuai dengan ukuran kotak komentar anda cukup merubah kode tersebut dengan ditambah atau dikurangi dengan ukuran yang sama. misa;nya yang tadinya ukuran pada comment block yaitu 420px terus ditambah 50px jadi 470px.nah pada comment headr juga harus ditambah 50px juga misalnya 460px + 50px = 510px. cara ini agar tampilannya terlihat kompak aja.

Selamat mencoba dan Semoga Artikel ini bermanfaat bagi anda, bila ada yang kurang jelas mengenai Artikel ini silahkan anda berikan komentar anda. Terima kasih

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.

Text Area Dengan Tombol Select All Versi 2

12.44 Diposting oleh Unknown

Sebelumnya saya telah posting tentang bagaimana caranya membuat Text Area baik yang dengan tombol select all ataupun yang tanpa tombol select all. nah sekarang saya akan membahas cara membuat Text Area Versi 2, dimana pada Text Area versi ini akan terlihat lebih menarik lagi, karena pada Text Areanya akan bisa kita tambahkan background dan juga border yang cukup tebal seperti pada contoh dibawah ini.

Untuk membuat text area seperti diatas, anda cukup mengcopy code dibawah ini dan masukan pada bagian

postingan anda, atau bisa juga anda masukan pada widget HTML anda.

Masukan apapun yang anda ingin tampilkan pada Text Area ini, baik itu berupa

Text,Link ataupun Source gambar pada Text Area ini

</textarea></div>

</form>

Keterangan :

- Teks yang berwarna biru merupakan teks yang nantinya muncul pada kotak tersebut. Silahkan anda ganti dengan teks atau kode yang ingin anda tampilkankan dalam kotak tersebut.

- center yaitu menunjukkan posisi text dalam kotak tersebut di posisi tengah. Bila anda ingin meletakkan text tersebut dikanan. Anda cukup menggantinya dengan right dan Left bila anda ingin meletakkannya diposisi sebelah kiri.

- Width yaitu untuk ukuran lebar kotak dan Height untuk ukuran tinggi kotak. Silahkan anda ganti sesuai keinginan keinginan anda.

Ok mungkin cukup sampai disini dulu postingan saya mengenai cara membuat kotak teks area dengan tombol select all Versi 2 ini. semoga bermanfaat bagi anda.

Membuat Teks Area dengan Tombol Select All

12.27 Diposting oleh Unknown

Mungkin anda pernah berkunjung ke suatu blog ataupun website dimana pada halaman blog ataupun dalam postingan mereka terdapat sebuah text area dengan tombol select all. Contohnya seperti pada gambar dibawah ini.

Sekarang pertanyaannya adalah bagaimana kita bisa membuat kotak Teks area seperti itu, untuk membuat Teks Area dengan Tombol Select All tersebut caranya adalah seperti keterangan berikut ini.

Text area adalah sebuah perintah HTML yang berfungsi untuk membuat sebuah kotak ataupun bidang dimana dalam kotak tersebut bisa kita masukan beberapa text yang kita inginkan, seperti pada contoh diatas.

Kotak ini biasa kita gunakan untuk mengisi beberapa kata, kode-kode pada postingan maupun untuk membuat kotak link exchange. bagi anda yang ingin membuat sebuah kotak seperti tersebut caranya sangatlah mudah. Anda cukup copy kode dibawah ini lalu letakkan ke blog ataupun postingan anda.

<div style="text-align: center;"><textarea style="width: 300px; height: 40px; padding:5px">Tulis text ataupun kode yang ingin anda tampilkan pada Text Area ini</textarea></div>

Keterangan :

- Teks yang berwarna biru merupakan teks yang nantinya muncul pada kotak tersebut. Silahkan anda ganti dengan teks atau kode yang ingin anda tampilkankan dalam kotak tersebut.

- Width yaitu untuk ukuran lebar kotak dan Height untuk ukuran tinggi kotak. Silahkan anda ganti sesuai keinginan keinginan anda.

Membuat kotak teks/text area dengan tombol Select All

Tadi yang kita bahas adalah tentang cara membuat text area. Nah sekarang kita akan membahas tentang kelanjutannya yaitu text area dengan tombol select all. Tombol select all adalah sebuah tombol yang digunakan untuk menghighlight seluruh teks yang berada didalam text area tersebut, sehingga kita atau pengunjung bisa lebih mudah untuk mengcopy seluruh teks atau kode yang berada dalam text area tersebut. Contohnya seperti dibawah ini, coba anda tekan tombol select all yang ada dibawah ini.maka semua teks yang ada dalam kotak tersebut akan terhighlight atau terblok semua dengan mudah.

Untuk membuat teks area dengan tombol select all seperti diatas caranyan adalah seperti berikut, copy semua kode dibawah ini ke blog ataupun postingan anda.

<form name="copy"><div align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></div><p style="text-align: Center;"><textarea style="padding: 3px; Width: 300px; Height: 50px;" name="txt">Tulis text ataupun kode yang ingin anda tampilkan pada Text Area ini</textarea></p></form>

Dan hasilnya akan terlihat seperti pada contoh dibawah ini:

Catatan :

- Teks yang dicetak tebal dan berwarna kuning adalah teks yang muncul pada tombol. Silahkan anda bisa menggantinya dengan nama lain, misalnya pilih semua, copy semua ataupun yang lainnya.

- Teks berwarna biru adalah teks muncul didalam kotak. Silahkan anda ganti dengan teks ataupun kode yang ingin anda tampilkan dalm kotak tersebut.

- Teks yang di cetak tebal dan berwarna hitam seperti Center, Width dan Height. silahkan anda ganti juga sesuai keinginan anda.

Ok mungkin cukup sampai disini dulu postingan saya mengenai cara membuat kotak teks area dengan tombol select all ini semoga bermanfaat.