Kaya Dari Internet Marketing

Sunday, December 26, 2010

Tutorial Blog Pemula

5:45 PM

Husni

No comments

Read more »

Posted in: Tutorial

Cara Merubah Lebar Halaman dan Kolom Blog

5:43 PM

Husni

No comments

Merubah lebar halaman dan kolom blog yang paling mudah akan terasakan ketika desain blog yang kita rubah tanpa menggunakan background image, seperti halnya Template Minima bawaan Blogger atau template-template yang lain dimana background image yang digunakan tidak harus dirubah baik tinggi (height) ataupun lebarnya (width) ketika semua bagian kolom dirubah ukurannya. Meskipun demikian, janganlah mengendorkan semangat kita apabila perubahan desain blog mengharuskan kita juga harus membuat background image yang baru guna disesuaikan dengan perubahan yang kita lakukan. Percayalah bahwa tuntutan dan keharusan membuat background image yang baru tersebut akan semakin meningkatkan pemahaman kita baik terhadap desain sebuah blog maupun pengetahuan kita akan desain gambar/image karena secara otomatis kita akan termotivasi untuk belajar tentang desain background image dengan mempelajari cara membuatnya menggunakan software yang sebelumnya tidak pernah kita sentuh, seperti Adobe Photoshop ataupun software yang lain.

Untuk melangkah lebih jauh pada bagian ini sebaiknya anda baca terlebih dahulu posting sebelum ini (Memperlebar Kolom dan Halaman Blog), atau anda bisa membukanya di sini !. Pada posting tersebut kita bisa belajar tentang dasar merubah kolom blog pada Template Minima yang akan menjadi dasar untuk lebih memahami cara merubah lebar kolom dan lebar halaman blog pada template bawaan blogger yang lain.

Sebelum mencoba melakukan perubahan pada template silahkan untuk mengikuti prosedur di bawah ini :

1. Login ke Blogger.
2. Dasbor (Dasboard).
3. KLIK TataLetak (Layout).
4. KLIK Edit HTML.
5. Amankan template. Lihat caranya di sini !.
6. Untuk mempercepat kerja, cari setiap KODE HTML menggunakan Ctrl+F. Untuk mengetahui lebih lanjut silahkan lihat di sini !.
7. KLIK Simpan Template pada setiap akhir proses (SAVE Template).
8. Lihat hasilnya dengan membuka blog.

I. Template Denim

KODE CSS yang harus di rubah :

#header {
      width: 760px; 
      margin: 0 auto;
      background-color: #336699;
      border: 1px solid #336699;
      color: #ffffff;
      padding: 0;
      font: normal normal 210% Verdana, Arial, Sans-serif;;
      }
#content-wrapper {
      width: 760px; 
      margin: 0 auto;
      padding: 0 0 15px;
      text-align: left;
      background-color: #ffffff;
      border: 1px solid #cccccc;
      border-top: 0;
      }
#main-wrapper {
      margin-left: 14px;
      width: 464px; 
      float: left;
      background-color: #ffffff;
      display: inline; /* fix for doubling margin in IE */
      word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
      overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
      }
#sidebar-wrapper {
      margin-right: 14px;
      width: 240px; 
      float: right;
      background-color: #ffffff;
      display: inline; /* fix for doubling margin in IE */
      word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
      overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
      }

Kunci Perubahan :

#header (width) = #content-wrapper (width) = A ,#main-wrapper (width) = B, #sidebar-wrapper (width) = C

A = B + C + 56px

Keterangan : Setiap perubahan pada B atau C atau ke dua-duanya, maka width pada #header dan #content-wrapper anda tinggal menjumlahkan keduanya kemudian ditambah 56px.

II. Template Rounders

#header-wrapper {      
/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #outer-wrapper, background orisinil --> W=740px   H=8px  */
      background:#445566 url("http://www2.blogblog.com/rounders/corners_cap_top.gif") no-repeat left top;
      margin-top:22px;
      margin-right:0;
      margin-bottom:0;
      margin-left:0;
      padding-top:8px;
      padding-right:0;
      padding-bottom:0;
      padding-left:0;
      color:#ffffff;
      }
/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #outer-wrapper yang baru, background orisinil --> W=740px   H=8px  */
#header {
      background:url("http://www.blogblog.com/rounders/corners_cap_bot.gif") no-repeat left bottom;
      padding:0 15px 8px;
      }
/* #outer-wrapper (width) = A */

#outer-wrapper {
      width: 740px;
      margin:0 auto;
      text-align:left;
      font: normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif;
      }
/* #main-wrap1 (width) = B */
/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #main-wrap1 yang baru, background orisinil --> W=485px   H=50px  */
#main-wrap1 {
      width:485px;
      float:left; 
      background:#ffffff url("http://www1.blogblog.com/rounders/corners_main_bot.gif") no-repeat left bottom;
      margin:15px 0 0;
      padding:0 0 10px;
      color:#333333;
      font-size:97%;
      line-height:1.5em;          
      word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
      overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
      }
/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #main-wrap1 yang baru, background orisinil --> W=485px   H=50px  */
#main-wrap2 {
      float:left;
      width:100%; 
      background:url("http://www1.blogblog.com/rounders/corners_main_top.gif") no-repeat left top;
      padding:10px 0 0;
      }

/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #main yang baru, background orisinil --> W=485px   H=10px  */
/* #main (width) = C */
#main {
      background:url("http://www.blogblog.com/rounders/rails_main.gif") repeat-y left;
      padding:0;
      width:485px;
      }
/* #sidebar-wrap (width) = D */
#sidebar-wrap {
      width:240px;
      float:right;
      margin:15px 0 0;
      font-size:97%;
      line-height:1.5em;
      word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
      overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
      }

/* .main .widget (width) = E */

.main .widget {
      margin-top: 4px;
      width: 468px;
      padding: 0 13px;
      }

/* .main-blog (width) = F */

.main .Blog {
      margin: 0;
      padding: 0;
      width: 484px;
      }

/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #sidebar-wrap yang baru, background orisinil --> W=240px   H=8px  */

#sidebartop-wrap {
      background:#ccddcc url("http://www.blogblog.com/rounders/corners_prof_bot.gif") no-repeat left bottom;
      margin:0px 0px 15px;
      padding:0px 0px 10px;
      color:#334455;
      }

/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #sidebar-wrap yang baru, background orisinil --> W=240px   H=8px  */
#sidebartop-wrap2 {
      background:url("http://www2.blogblog.com/rounders/corners_prof_top.gif") no-repeat left top;
      padding: 10px 0 0;
      margin:0;
      border-width:0;
      }

/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #sidebar-wrap yang baru, background orisinil --> W=240px   H=30px  */
#sidebarbottom-wrap1 {
      background:#ffffff url("http://www.blogblog.com/rounders/corners_side_top.gif") no-repeat left top;
      margin:0 0 15px;
      padding:10px 0 0;
      color: #333333;
      }

/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #sidebar-wrap yang baru, background orisinil --> W=240px   H=30px  */
#sidebarbottom-wrap2 {
      background:url("http://www1.blogblog.com/rounders/corners_side_bot.gif") no-  repeat left bottom;
      padding:0 0 8px;
      }

/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #outer-wrapper yang baru, background orisinil --> W=740px   H=8px  */
#footer-wrap2 {
      background:#445566 url("http://www2.blogblog.com/rounders/corners_cap_top.gif") no-repeat left top;
      color:#ffffff;
      }

/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #outer-wrapper yang baru, background orisinil --> W=740px   H=8px  */
#footer {
      background:url("http://www.blogblog.com/rounders/corners_cap_bot.gif") no-repeat left bottom;
      padding:8px 15px;
      }

Kunci Perubahan Width (lebar):



1. #outer-wrapper (width) = A

2. #main-wrap1 (width) = B 

3. #main (width) = C

4. #sidebar-wrap (width) = D

5. .main .widget (width) = E

6. .main-blog (width) =  F



A = B + D + 15px, atau A = C + D + 15px



E = B - 17px, atau E = C - 17px



F = B - 1px, atau F = C - 1px

Kunci Perubahan Background Image:



1. Background Image pada syntax #main-wrap1, lebarnya disesuaikan dengan lebar pada syntax #main-wrap1 yang baru (B).

2. Background Image pada syntax #main-wrap2, lebarnya disesuaikan dengan lebar pada syntax #main-wrap1 yang baru (B).

3. Background Image pada syntax #main, lebarnya disesuaikan dengan lebar pada syntax #main yang baru (C).

4. Background Image pada syntax #header-wrapper dan syntax #footer-wrap1 (background sama), lebarnya disesuaikan dengan lebar pada syntax #outer-wrapper yang baru (A).

5. Background Image pada syntax #footer, lebarnya disesuaikan dengan lebar pada syntax #outer-wrapper yang baru (A).

Untuk sementara cukup dua template terlebih dahulu supaya nggak tambah pusing (karena aku juga jadi pusing saat nyusun postingnya ! Habis panjang juga, sih ...).

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Selamat Mencoba

Read more »

Posted in: Tutorial Blog

Pengecekan Kerusakan Software Hp

5:29 PM

Husni

No comments

Label: Battery, Flash, JAF, Reblow, short, Software, Soldering, Spiderman, UFS Tornado

Ada beberapa pilihan Tools untuk memperbaiki kerusakan Software, diantaranya:
Software Standalone (tanpa Box Repair) dan Software yang memerlukan Box Repair seperti: UFS Tornado, JAF, Spiderman, dll.

Ulasan berikut ini akan menggunakan UFS-3 Tornado karena banyak digunakan oleh teknisi.

Perhatikan sebelum melakukan pengecekan secara Software maka HP yang akan dicek harus memenuhi syarat-syarat berikut ini:

a. tegangan battery sebaiknya dalam kondisi full atau setidaknya ada pada tegangan 3,7 Volt (bila Hp siemens, Samsung,Motorola, dan sony ericsson sebab untuk type tersebut tegangan tidak diberikan langsung oleh UFS).

b. tidak terjadi Short/konslet pada tegangan masukan. Bila terjadi short maka Hp harus diperbaiki terlebih dahulu secara Hardware.

c. interface flash pada PWB harus bersih. Bila kotor maka bisa dibersihkan terlebih dahulu memakai kuas dan sedikit tiner lalu keringkan.

d. setelah Hp dihubungkan ke Box UFS tornado, klik “Check” maka Hp harus terdeteksi, walaupun di LCD Hp tidak muncul tulisan test mode atau local mode (khusus Nokia).

e. bila “Check” gagal, maka kerusakan kemungkinan Hp masih secara hardware.

Adapun detail Teknik pengecekannya seperti dibawah ini:
- Open software UFS Tornado: DCTx (untuk HP Nokia).

- Koneksikan Hp ke Box UFS tornado

- Pilih type Hp (di kolom Product) sesuai dengan type Hp yang akan dicek, seperti gambar dibawah ini:

- Klik menu “Check” (di barisan menu paling atas software UFS Tornado). Seharusnya DCTx tools akan menampilkan “1st Boot OK, WD2 / DCT4, UPP:0……”, hal ini berarti Hp terdeteksi oleh software. Dan bisa dilanjutkan dengan proses perbaikan kerusakan software berikutnya misalnya Flashing.

Tetapi bila hasil “Check” ternyata tampil "error" maka Hp tidak dapat terdeteksi oleh DCTx tools dan kerusakan Hp kemungkinan masih secara hardware sehingga perlu dilakukan perbaikan kerusakan hardware seperti solder ulang / reblow / ganti komponennya.

Demikian semoga bermanfaat.

Read more »

Posted in: Service

Thursday, December 16, 2010

Cara menampilkan link di sidebar

8:49 PM

Husni

No comments

Setelah kita membuat link blogroll tersebut, langkah selanjutnya kita akan mengaktifkan atau menampilakan link-link blogroll tersebut pada blog kita, tepatnya di bagian sidebar.
Berikut cara mengaktifkan atau menampilkan link-link blogroll di sidebar :

Login ke Admin WordPress anda.
Pada sisi kiri halaman klik tanda [ ▼ ] pada menu ‘Appearance’.
Kemudian klik sub menu ‘Widgets’.
Pada halaman ‘Widgets’ pilih widgets ‘Links’ yang belum dipasang atau diaktifkan pada sisi sebelah kiri pada menu ‘Available Widgets’.
kemudian tahan dan geser ke samping kanan pada menu ‘Current Widgets’.

SELAMAT MENCOBA…

Read more »

Posted in: Tutorial Blog

Membuat Menu Horizontal Wordpress

8:45 PM

Husni

No comments

Membuat Menu Horizontal

Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header.

Berikut langkah membuat menu horizontal dalam blog kamu :

Login ke account blogger kamu.
Pilih Tata Letak –> Edit HTML –> centang “Expand Template Widget”.
Cari Kode kode ]]> dan Copy-Paste (copas) kode berikut di atasnya.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

/* navbar
================== */
#bg_nav {
background: #ffffff;
width: 850px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #ffffff;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #000000;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#bg_nav a:hover {
color: #000000;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}
#navleft {
width: 500px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav a, #nav a:visited {
background: #ffffff;
color: #000000;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #ffffff;
}
#nav a:hover {
background: #c06000;
color: #000000;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}
#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
background: #c06000;
padding: 7px 30px 7px 10px;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}
#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

Catatan :

Agar menu horizontal sesuai dengan template blog, kamu perlu mengganti kode-kode yang berwarna hijau dan merah.
Khusus untuk kode yang berwarna hijau, sangat penting disesuaikan dengan lebar blog kamu.

Kemudian cari kembali kode seperti di bawah ini.

showaddelement=’no’>
(Header)’ type=’Header’/>

… dan seterusnya …

Copas kode berikut tepat di bawah kode yang berwarna hijau atau berwarna merah (sesuaikan dengan template blog kamu).

http://Alamat_Blog_Kamu.blogspot.com/‘>home

http://Link_yang_dituju‘>Add Link

http://Link_yang_dituju‘>Add Link

http://Link_yang_dituju‘>Add Link

http://Link_yang_dituju‘>Add Link

http://Alamat_Blog_Kamu.blogspot.com/search’ id=’searchform’ method=’get’ name=’searchform’>

Klik tombol SIMPAN TEMPLATE.
Selesai.

Jika kita menerapkan pada template kita, ada beberapa yang perlu disesuaikan. Beberapa di antaranya yaitu lebar dari navigasi, link, keyword yang di inginkan serta yang lainnya. beberpa contoh di antaranya :

/* navbar
================== */
#bg_nav {
background: #000000;
width: 660px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFFFFF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
overflow: hidden;
}

Kita harus mengubah nilai lebar 660px menjadi nilai yang sesuai dengan template anda. misal : width:990px.

#navleft {
width: 440px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 200px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}

Yang inipun sama, kita harus mengubahnya sesuai dengan nilai yang pas untuk template kita.

http://kiddevilz.blogspot.com/‘>home

http://rohm4n.wordpress.com/‘>My Notes

http://geoweek.wordpress.com/‘>Free Template

http://hestydiana.blogspot.com/‘>Electronic Rubric

Kita harus mengubah link yang ada dengan link yang kita inginkan, Misalkan http://kiddevilz.blogspot.com di ubah menjadi http://contoh.blogspot.com. Untuk keywordnya pun kita bisa ganti sesuai dengan keinginan, misal “home” di ubah menjadi “Depan”.

Selamat mencoba!

Sumber : kolom-tutorial.blogspot.com

Read more »

Posted in: Tutorial Blog

Cara Membuat Menu Horizontal Pada Blogspot

8:38 PM

Husni

No comments

Menu yang terdapat pada sebuah web selain berguna untuk memudahkan pengunjung membuka halaman-halaman tertentu, juga bisa menambah estetika. Begitu pula dengan menu horizontal yang bisa membuat web kita menjadi lebih ergonimis dan keren. Nah, bagaimana dengan blogspot? Harus diakui bahwa pada template blogspot standart, fasilitas menu horizontal tidak ada didalamnya. Namun, kita tidak perlu berkecil hati sebab seperti yang telah saya katakan pada postingan sebelumnya bahwa kita bisa membuat menu termasuk menu horizontal pada blogspot. Berikut saya ulas langkah-langkah membuat menu horizontal pada Blogspot. Sebagai contoh kita akan membuat menu horizontal dibawah header

Login ke akun Blogspot pembaca
Klik link menu Tata Letak, kemudian pilih Edit HTML.
Back up terlebih dahulu template pembaca dengan mengklik link Download Template Lengkap agar jika terjadi kesalahan saat mengedit, pembaca bisa mengembalikannya dengan menguploadnya kembali.
Silahkan beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
Cari kode seperti dibawah ini pada template pembaca:

<code><b:includable id='description'> <div class='descriptionwrapper'> <data:description/> </div> </b:includable> </b:widget> </b:section> </div></code><code>

Jika sudah ketemu, silahkan copy struktur berikut tepat dibawah kode-kode pada langkah 5

Setelah itu klik tombol SIMPAN TEMPLATE, lalu lihat hasilnya

Pembaca akan melihat bahwa menu-menu tersebut muncul sebagai list vertikal, bukan horizontal. Oleh karena itu, kita perlu mengatur tampilannya agar muncul berjejer secara horizontal dengan menggunakan CSS. Selain itu, kita juga bisa mengatur tampilan dari menu tersebut agar terlihat lebih menarik dengan CSS.

Buka kembali bagian Edit HTML pada blogspot pembaca, kemudian cari kode ]]>.

Silahkan copy struktur berikut diatas kode ]]>

/*CSS untuk menu horizontal*/



.menuhor ul{

font: bold 13px arial;

padding-left: 0;

margin-left: 0;

height: 20px;

}



.menuhor ul li{

list-style: none;

display: inline;

}



.menuhor ul li a{

padding: 2px 0.5em;

text-decoration: none;

float: left;

color: black;

background-color: #33FFCC;

border: 2px solid #33FFCC;

}



.menuhor ul li a:hover{

background-color: #33CCFF;

border-style: outset;

}

.menuhor ul merupakan atribut class yang berfungsi untuk mengatur tampilan parent dari list menu horizontal tersebut.
.menuhor ul li berfungsi untuk mengatur tampilan anak menu horizontal yang kita buat.
.menuhor ul li a berfungsi untuk mengatur tampilan link dari anak menu tersebut.
.menuhor ul li a:hover berfungsi untuk mengatur tampilan link anak menu ketika pointer digerakkan diatasnya.

Kemudian ubah struktur yang Anda copy pada langkah 6 diatas sehingga menjadi seperti berikut:

Silahkan ganti URL 1 dengan URL halaman yang akan dituju jika menu "Home" diklik. URL 2 diganti dengan URL halaman yang akan dituju jika menu "Tutorial Website" diklik, dan seterusnya.

Klik tombol SIMPAN TEMPLATE.

Untuk melihat hasilnya silahkan buka disini. Seperti yang telah saya katakan, bahwa CSS tersebut berfungsi untuk mengatur tampilan menu yang kita buat tadi. Silahkan pembaca menambah atau merubah atribut CSS tersebut untuk memodifikasi tampilannya, misalnya warna tulisan, background, lebar menu, dan lain-lain. Jika pembaca ingin mengerti cara memodifikasi atau membuat CSS tersebut, silahkan klik disini. Saya yakin pembaca akan lebih mengerti bagaimana CSS tersebut bekerja. Dengan adanya menu horizontal tersebut blog pembaca pasti menjadi lebih keren dan ergonomis.

Selamat mencoba dan jangan lupa meninggalkan komentar ya

Read more »

Posted in: Tutorial Blog

Membuat menu Vertical dan Horizontal pada Blog

8:33 PM

Husni

No comments

Membuat menu Vertical dan Horizontal pada Blog

A. Menu Horizontal

Ada yang ingin membuat menu horizontal untuk blognya? ini adalah salah satu caranya, tapi sebelumnya apasih menu horizontal itu? Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping). seperti ini :

Contohnya bisa dilihat disini . Untuk membuatnya ikuti cara berikut ini:

pertama-tama siapkan dulu gambarnya, contohnya seperti ini :

dan

kalo nggak punya gimana? kalo nggak punya pake gambar yang ini juga boleh.


blackleft.gif	blackright.gif

greenleft.gif	greenright.gif

redleft.gif	redright.gif

unguleft.gif	unguright.gif

yellowleft.gif	yellowright.gif

blueleft.gif	blueright.gif

whiteleft.gif	whiteright.gif

Ok, bahan-bahannya sudah ada, mari kita mulai meraciknya:

1. Login ke blogger terus pilih Layout --> Edit HTML, jangan lupa template di backup dulu.

2. Cari script seperti ini ]]>, kalo udah ketemu copy script dibawah ini dan taruh diatasnya

/*credits : http://trik-tips.blogspot.com */

#tabshori {

float:left;

width:100%;

font-size:13px;

border-bottom:1px solid #2763A5;

line-height:normal;

}

#tabshori ul {

margin:0;

padding:10px 10px 0 50px;

list-style:none;

}

#tabshori li {

display:inline;

margin:0;

padding:0;

}

#tabshori a {

float:left;

background: url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;

margin:0;

padding:0 0 0 4px;

text-decoration:none;

}

#tabshori a span {

float:left;

display:block;

background: url("http://kendhin.890m.com/menu/blackright.gif") no-repeat right top;

padding:5px 14px 4px 4px;

color:#fff;

}

/* Commented Backslash Hack hides rule from IE5-Mac \*/

#tabshori a span {float:none;}

/* End IE5-Mac hack */

#tabshori a:hover {

background-position:0% -42px;

}

#tabshori a:hover span {

background-position:100% -42px;

}

Tulisan yang dicetak tebal bisa kamu ganti dengan gambar-gambar (text dibawah gambar) diatas tadi. Misalnya, jika kamu pilih yang warna merah maka scriptnya menjadi seperti ini;

background: url("http://kendhin.890m.com/menu/redleft.gif") no-repeat left top;

background: url("http://kendhin.890m.com/menu/redright.gif") no-repeat right top;

3. Copy script berikut ini

4. Ganti http://trik-tips.blogspot.com dengan link yang kamu tuju. Link tersebut bisa berupa alamat blog lain atau link postingan km. Untuk mendapatkan link postingan caranya klik kanan pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox).

Kemudian text yang dicetak tebal bisa kamu ganti dengan text yang kamu suka. Text tersebut adalah text yang muncul di tombol/menu.

5. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan, salah satu contoh memasangnya yaitu begini

cari kode berikut ini :

caranya nyari biar gampang, copy script diatas lalu tekan Ctrl-f kemudian paste di kotak find, nha langsung ketemu kan. Kalo sudah ketemu copy script yang tadi diatasnya

6. Simpan hasil pengeditan.

7. Lihat hasilnya.

8. kalo hasilnya kurang bagus/acak-acakan coba script tadi dipindah tempatnya, misalnya pindah keatasnya yaitu diatas kode

. kalao nggak cocok juga tempatnya dicoba lagi yang diatasnya atau juga dibawahnya, begitu terus sampai ketemu tempat yang cocok.

9. Kalo masih belum berhasil juga coba cara ini:

- Cari kode berikut ini :





maxwidgets='1' showaddelement='no'>







title='your blog title (Header)' type='Header'/>

terus ganti text yang berwarna hijau sehingga menjadi seperti ini:





maxwidgets='2' showaddelement='yes'>







title='your blog title (Header)' type='Header'/>

terus di Save

Klik tab Page Elements, kemudian di daerah header klik Add a page element lalu pilih HTML/JavaScript paste script link tadi di dalam kotak content terus simpan, coba drag kebawah dikit, terus simpan dan lihat hasilnya.

hasilnya pasti akan berbeda-beda di setiap template.

kalo gagal berarti coba diteliti lagi langkah-langkahnya dan dipahami maksudnya, Good luck.....

A. Menu Vertical

Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal. Contohnya seperti gambar disamping itu. Cara membuatnya :

1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kede berikut sebelum kode

Read more »

Membuat menu horizontal blog

8:18 PM

Husni

No comments

Salah satu cara menghemat ruang di dalam blogger adalah dengan membuat menu, yang biasanya terletak di atas

Pembuatan menu ini berlaku untuk semua template blogger, dikarenakan kode terlampir di bawah ini akan membuat area widget sendiri, yang terletak di bawah head.

langsung aja... caranya coba cari kode ]]> kemudian copy kode css di bawah ini tepat diatasnya.

Selanjutnya carilah kode di bawah ini

lalu copy kode di bawah ini tepat di bawah kode di atas..

apabila telah selesai kemudian simpan dan lihat di menu setting kemudian page element, coba perhatikan dibawah head akan ada area widget baru... langkah selanjutnya klik add widget , dan pilih HTML/JavaScript, kemudian copy kode di bawah ini ke dalamnya.

Ganti link sesuai dengan link anda... beres. .

Read more »

Posted in: Tutorial Blog

Membuat kotak Shoutbox

7:52 PM

Husni

No comments

Y
Membuat kotak Shoutbox atau tempat Cuap2 di blog caranya cukup mudah, n ga perlu belajar bahasa HTML yang rumit2 cukup ikuti langkah2 ini…..
1. Buka situs Shoutmix Kamu harus mendaftar di situs tersebut, cara daftarnya gampang kok.
2.Jika pendaftarannya berhasil kamu langsung disuruh milih type shoutboxyang disediakan, terserah kamu milih bentuknya yang gimana. Klik tombolContinue
3. Setelah itu kamu akan mendapat ucapan “Terima Kasih”

lalu klik link Go to My Control Panel Now
4. Disitu kamu bisa mensetting terlebih dahulu shoutbox kamu, misalnya Style & Color, Date & Time, dan lain-lain.
5. Jika sudah selesai klik menu Get Codes
6. Jika kamu pingin menaruh shoutbox di blog kamu pilih “Place Shoutbox on Webpage”
7. Atur lebar dan tinggi shoutbox di kolom widht dan hight
8. Kemudian Copy kode yang ada di dalam kotak “generated Codes”
9. Login ke blogger.com lalu pilih Layout kemudian Add Page Elements
11. Tambahkan element HTML/Javascript.
12. Paste Kode yang telah kamu copy dari shoutbox.com tadi di kotak “Content” lalu simpan.
13. Jadi deh…..

Read more »

Posted in: Tutorial Blog

Search This Blog

AutoBacklink

Do Follow

Popular Posts

Archives

Sunday, December 26, 2010

Tutorial Blog Pemula

Cara Merubah Lebar Halaman dan Kolom Blog

I. Template Denim

Kunci Perubahan :

II. Template Rounders

Kunci Perubahan Width (lebar):

Kunci Perubahan Background Image:

Pengecekan Kerusakan Software Hp

Thursday, December 16, 2010

Cara menampilkan link di sidebar

Membuat Menu Horizontal Wordpress

Membuat Menu Horizontal

Cara Membuat Menu Horizontal Pada Blogspot

Membuat menu Vertical dan Horizontal pada Blog

Membuat menu horizontal blog

Membuat kotak Shoutbox

Waktu Anda

Categories

Feedjit