Cara Edit / Mengganti Template Wordpress
Pasang Iklan di Blog ini
1. Rp.60.000/Bulan untuk Iklan banner ukuran 125x125 pixel (Dipasang di sidebar).
2. Rp.80.000/Bulan untuk iklan banner ukuran 420x70 pixel (Dipasang di Header).
Bagi yang berminat silahkan kirim email ke : kendhin@gmail.com
Web Hosting Reviews and Rating
Download a Powerful Multimedia Software
Blaze Media Pro's unique Media Manager makes it easy to work with all your audio and video creations - playback at your fingertips. Even rename, copy, move, or tag files instantly. You can convert DVD to AVI, MPG, WMV with this software. You also don't need another CD burning software and DVD burning software anymore, because you will get it all in one software. You can download the powerfull software HERE and then you can try it.
Setting Domain dan Hosting Untuk Wordpress
Edisi perdana tutorial wordpress kali ini akan aku coba jelaskan tentang bagaimana cara setting domain dan hosting untuk wordpress. Untuk domain bisa menggunakan sub domain atau bisa menggunakan domain gratis dari co.cc atau bisa juga beli domain murah di www.dodoldomain.com. Sedangkan untuk hostingnya bisa menggunakan hosting gratisan dari 000webhost atau bisa juga membeli hosting murah dari superinhost.com
Ok mari kita mulai saja tutorialnya.
* SETTING DOMAIN
Kita harus memiliki domain terlebih dahulu. Kemudian mengarahkan domain kita ke hosting yg kita pilih. Caranya yaitu dengan mengganti name server domain kita. Bagi yang memakai hosting dari 000webhost biasanya name servernya adalah ns01.000webhost.com dan ns02.000webhost.com sedangkan bagi yang menggunakan hosting dari superinhost.com maka name servernya adalah ns1.superinhost.com dan ns2.superinhost.com
* SETTING HOSTING DAN INSTALL WORDPRESS
1. Masuk ke cpanel Hostingmu lalu cari dan pilih icon fantastico
kalo di 000webhost iconnya ini
2. Setelah itu pilih "wordpress" dan lalu "new installation"
3. Kemudian isikan data-data pada form yg muncul. Kosongkan kolom "Install in directory" jika pingin install wordpress di domain pokok.
4. Kemudian klik tombol "Install Wordpress". Tunggu sebentar kemudian klik tombol "Finish Installation".
5. Untuk untuk masuk ke administrator wordpressnya biasanya melalui URL http://namadomainmu.com/wp-admin. DIsitu km bisa posting2 dan macem.
OK jadi deh wordpressnya. Oh ya, kalo pake hosting sendiri kita bisa ngedit2 template wordpressnya lho.
Selamat Mencoba....
Menampilkan Recent Comments (Komentar Terbaru)
Beginilah cara membuat Recent Comments (Komentar Terbaru):
1. Login ke blogger lalu pilih menu "Layout"
2. Kemudian copy script berikut ini :
<script style="text/javascript" src="http://superinhost.com/blog/comments.js"></script>
<script style="text/javascript">
var numcomments = 8;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://trik-tips.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
- Angka 8 merupakan jumlah komentar yang mau ditampilkan.
- Ganti trik-tips.blogspot.com dengan nama blogmu.
3. Untuk menampilkanya di sidebar maka pilih "Add a Gadget --> HTML/Javascript" Lalu masukkan script diatas kedalam kotak yg disediakan.
Coba dilihat blogmu, langsung jadi deh. Oh ya recent comments ini bisa juga dipasang didalam "Tab View" seperti punyaku itu.
Membuat Menu Vertikal (Vertical)
1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS deh.
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/blue2.gif');
}
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini :
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/red1.gif') repeat-x bottom left;
dan
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/red1.gif');
Pilihan Warna menu vertikal :
blue1.gif blue2.gif | |
green1.gif green2.gif | |
red1.gif red2.gif | |
pink1.gif pink2.gif | |
black1.gif black2.gif |
3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:
<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
</li>
</ul>
Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang ditampilkan. Kalau mau menambahkan menu tingal buat lagi kode seperti yg berkedip2 dibawahnya.
Dah gitu aja. Gampang kan???? :D
Cara Membuat Menu Tab View
Tab view itu contohnya seperti ini :
Beginilah cara untuk membuat menu tab view tersebut
1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS.
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. Untuk mengetahui kode2 warna silahkan lihat DISINI
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>
<script src='http://kendhin.googlepages.com/tabview.js' type='text/javascript'/>
6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.