selamat datang di blog saya trimakasi bwad kawan-kawan yang uda mau mampir ke blog saya ini maaf blog nya masi banyak kekurangan maklum masih blajar mohon kasi kritik dan sarannya ------------------------------- <>**THNKS**<>
membuat blog itu sebenarnya mudah asalkan kita mau berkreasi. pasti blog kalian akan kelihatan bagus ^_^..selain membuat blog dengan blogger.com saya ingin mencoba berbagi ilmu yaitu membuat blog dengan Wordpress ok langsung aja saya akan menjelaskan bagai mana cara membuat blog menggunakab Worpress bagi pemula ::
1. Buka www.wordpress.com 2. Klik Sign Up 3. Isi form a. Username: -> isi nama blog sesuai dengan keinginan (paling sedikit empat huruf/angka) b. Password: Isi password/kata sandi (sedikitnya enam huruf/angka) c. Confirm: Ulangi password yang sama dengan di atas. d. Email Address: Isi email Anda (apabila belum punya email, buat dulu di gmail.com atau yahoomail.com) e. Legal flotsam: beri tanda tik di kotak yang tersedia sebagai tanda “setuju” dengan perjanjian. f. Beri tanda tik pada menu “Gimme a blog” (biasanya sudah otomatis ada tanda tik di sini). g. Klik “Next” h. Blog Title -> Isi judul yang sesuai. i. Language -> Pilih Bahasa Indonesia. j. Privacy -> Kasih tanda tik (biasanya sudah ada otomatis).
4. Klik Sign Up. Buka Email dari wordpress.com dan klik link di email tsb untuk verifikasi. 5. Akan muncul pesan sebagai berikut:
Your account is now active! You are now logged in as (username Anda). An email with your username, password, Akismet API key and important links has been sent to your email address. Write a post, change your template or visit the homepage.
5. Itu berarti Anda sudah berhasil membuat blog. Silahkan login ke blog Anda. Berikut alamat penting untuk Anda: a. Untuk login, buka: http://namabloganda.wordpress.com/login.php b. Isi username (=nama blog) dan password. c. Klik “Write” atau “Tulis” untuk mulai membuat posting. d. Klik “Publish” atau “Tampilkan”
6. Selesai (kalau mau keluar, klik “Log Out”).
nah langsung saja kalian coba smoga berhasil ..tnks..^_^
hmm..bosan gg si..icon logo blog kalian itu-itu aja (huruf B), nah sekarang saya akan membahas mengenai
mengganti logo blog dengan icon yang kalian inginkan seperti ini contohnya...
langsung aja ya.
pertama-tama buat terlebih dahulu gambar yang kalian ingin kan atau dowload juga bisa, gambar apa aja deh asal tidak melanggar
undang-undang :D ...nah setelah anda selesai membuat gambar atau mendownload berbentuk JPEG,GIF ..sekarang
coba anda upload di www.photobucket.com
setelah di upload kemudian ambil Direc link nya, seperti ini contoh direct link nya : http://i423.photobucket.com/albums/pp313/triengel/album%20cucky/alun.jpg
kemudian login ke blog, masuk ke tataletak kemudian edit HTML, tekan Ctrl + f cari kode seperti dibawah ini <title><data:blog.pageTitle/></title>
Sebelumnya saya sudah memposting tentang membuat menu horizontal, sekarang mari kita mencoba membuat menu vertikal. . Contohnya seperti gambar di bawah ini
berikut ini membuatnya :
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:
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.
Ada yang pingin buat menu horizontal tapi nggak tahu caranya?
Gini nih caranya, eh tapi tunggu dulu, apasih menu horizontal itu? Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping). Kayak gini ini lho:
Contohnya bisa kamu lihat disini .Nha pingin nggak? kalo pingin ikuti cara berikut ini:
pertama-tama kamu harus punya gambar kayak gini nih:
dan
kalo nggak punya gimana? kalo nggak punya pake gambar yang aku sediain ini aja deh.
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 sudha ada, mari kita mulai maraciknya:
1. Login ke blogger terus pilih Layout --> Edit HTML, trus beri tanda centang pada kotak "Expand Widget Templates". jangan lupa template di backup dulu.
2. Cari script seperti ini ]]></b:skin>, 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; /* Garis Bawah*/
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /*Posisi Menu*/
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;
Mudeng nggak loe :D
Kalo sudah selesai mari kita lanjutkan, sampai angka berapa tadi? oh ya sampai angka ketiga ya.
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 :
<div id="content-wrapper">
caranya nyari biar gampang, copy script diatas lalu tekan Ctrl-f kemudian paste di kotak find, nha langsung ketemu kan. Kalo udah 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 </div>. 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 :
<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>
teru ganti text yang berwarna hijau sihingga menjadi seperti ini:
<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>
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, nha itu kan tempatnya diatas, coba drag kebawah dikit, nha gitu, terus simpan dan lihat hasilnya.
Setiap tabel minimal tersusun dari tiga tag dasar yaitu tag <TABLE> yang menandai sebuah tabel, tag <TR> yang membentuk baris dan tag <TD> yang membentuk kolom. Masing-masing tag tersebut harus memiliki tag penutup.
Untuk lebih jelasnya berikut contohnya :
<TABLE>
<TR>
<TD>kolom 1 dari baris 1</TD>
</TR>
</TABLE>
Susunan tag-tag di atas memerintahkan kepada browser untuk menampilkan sebuah tabel yang terdiri dari satu baris dan satu kolom yang diisi dengan tulisan: kolom 1 dari baris 1.
kolom 1 dari baris 1
Mana tabelnya? Sesungguhnya, tabelnya ada, hanya saja tanpa bingkai (border). Ternyata, secara default, tabel menggunakan nilai border = 0 (nol) alias tanpa bingkai. Jadinya yang tampak hanya tulisan semata. Untuk membuat bingkai dari tabel tersebut, kita harus menyertakan atribut BORDER.
<TABLE BORDER=1>
<TR>
<TD>kolom 1 dari baris 1</TD>
</TR>
</TABLE>
Sehingga tabelnya tampak sebagai berikut:
kolom 1 dari baris 1
Semain besar nilai BORDER ( Bingkai ) yang di masukkan otomatis semakin besar juga Bingkai tabel yang di tampilkan seperti contoh berikut :
<TABLE BORDER=10>
<TR>
<TD>kolom 1 dari baris 1</TD>
</TR>
</TABLE>
Hasilnya akan seperti ini :
kolom 1 dari baris 1
Pada contoh di atas kita coba masukkan Nilai BORDER 10 ( Bingkai ) Maka otomatis bingkai tabel akan berubahkan....? seperti contoh di atas
Nah Silakan coba sendiri mengganti ukuran bingkai menjadi 2, 3 dan seterusnya lalu bandingkan hasilnya. Sekarang mari kita membagi tabel sebaris tersebut menjadi dua kolom. Artinya kita menambah sepasang tag TD lagi.
Seperti contoh berikut:
<TABLE BORDER=1>
<TR>
<TD> kolom 1 dari baris 1</TD>
<TD> kolom 2 dari baris 1</TD>
</TR>
</TABLE>
Beginilah hasilnya :
kolom 1 dari baris 1
kolom 2 dari baris 1
Nah, bila anda ingin menambah sekian baris ke bawah, cukup menyalin ulang dari tag <TR> sampai </TR>. Sorot (blok) dari tag <TR> hingga </TR> lalu Copy (Ctrl+C). Tempatkan kursor di bawah tag </TR> lalu Paste (Ctrl+V). Sekian baris yang ingin anda buat, sekian kali pula anda harus menyalinnya (melakukan perintah Paste). Setelah itu tinggal meng-edit tulisan sesuai keinginan anda. Begini contohnya:
<TABLE BORDER=1>
<TR>
<TD>kolom 1 dari baris 1</TD>
<TD>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris 2</TD>
<TD>kolom 2 dari baris 2</TD>
</TR>
</TABLE>
Tampilannya Akan menjadi:
kolom 1 dari baris 1
kolom 2 dari baris 1
kolom 1 dari baris 2
kolom 2 dari baris 2
Setelah atribut BORDER, atribut selanjutnya yang perlu kita ketahui adalah atribut CELLSPACING yang mengatur jarak antar sel dan CELLPADDING yang mengatur jarak antara sel dan tulisan di dalamnya. Misalnya:
<TABLE BORDER=1 CELLSPACING=10>
<TR>
<TD>kolom 1 dari baris 1</TD>
<TD>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris 2</TD>
<TD>kolom 2 dari baris 2</TD>
</TR>
</TABLE>
Dengan penambahan atribut CELLSPACING=10 dalam tag TABLE berarti akan dihasilkan sebuah tabel dengan jarak antar sel adalah 10 pixel.
Beginilah tampilannya :
kolom 1 dari baris 1
kolom 2 dari baris 1
kolom 1 dari baris 2
kolom 2 dari baris 2
Sekarang mari kita coba bandingkan bila atribut CELLSPACING tersebut diganti dengan CELLPADDING.
<TABLE BORDER=1 CELLPADDING=10>
<TR>
<TD>kolom 1 dari baris 1</TD>
<TD>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris 2</TD>
<TD>kolom 2 dari baris 2</TD>
</TR>
</TABLE>
Beginilah hasilnya :
kolom 1 dari baris 1
kolom 2 dari baris 1
kolom 1 dari baris 2
kolom 2 dari baris 2
Sedangkan kalau kedua tag tersebut dipakai bersama-sama seperti ini:
<TABLE BORDER=1 CELLSPACING=10 CELLPADDING=10>
<TR>
<TD> kolom 1 dari baris 1</TD>
<TD> kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD> kolom 1 dari baris 2</TD>
<TD> kolom 2 dari baris 2</TD>
</TR>
</TABLE>
Akan menghasilkan tabel seperti ini:
kolom 1 dari baris 1
kolom 2 dari baris 1
kolom 1 dari baris 2
kolom 2 dari baris 2
Ternyata mudah, kan membuat tabel? Bila kita lihat tabel-tabel pada contoh di atas, tampak bahwa secara default, lebar kolom dan tinggi baris mengikuti lebar dan tinggi tulisan di dalamnya. Kita bisa mengatur sendiri lebar dan tinggi tabel, kolom dan barisnya dengan menggunakan atribut WIDTH (lebar) dan HEIGHT (tinggi). Misalnya:
<TABLE BORDER=1 WIDTH=100%>
<TR>
<TD>kolom 1 dari baris 1</TD>
<TD>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris 2</TD>
<TD>kolom 2 dari baris 2</TD>
</TR>
</TABLE>
Bagaimana jadinya tabel dengan lebar 100% ?
kolom 1 dari baris 1
kolom 2 dari baris 1
kolom 1 dari baris 2
kolom 2 dari baris 2
Kesimpulannya, lebar tabel 100% artinya tabel tersebut akan melebar hingga memenuhi lebar tampilan halaman. Bila lebar setiap kolom tidak ditentukan, maka lebar 100% itu akan terbagi sejumlah kolomnya. Seperti dalam contoh di atas, karena terdiri dari dua kolom maka lebar masing-masing kolom adalah 50%. Nah, bagaimana bila kita ingin membagi lebar kolom tidak sama? Ya, caranya sama saja, yaitu dengan memasukkan atribut WIDTH dalam tag kolom.
<TABLE BORDER=1 WIDTH=100%>
<TR>
<TD WIDTH=25%>kolom 1 dari baris 1</TD>
<TD WIDTH=75%>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD WIDTH=25%>kolom 1 dari baris 2</TD>
<TD WIDTH=75%>kolom 2 dari baris 2</TD>
</TR>
</TABLE>
Bagaimana jadinya?
kolom 1 dari baris 1
kolom 2 dari baris 1
kolom 1 dari baris 2
kolom 2 dari baris 2
Bagaimana halnya dengan atribut HEIGHT (tinggi)? Atribut ini juga bisa disisipkan dalam tag TABLE dan tag TR (baris). Selain menggunakan persen untuk menentukan ukuran tabel, kita bisa pula menggunakan satuan pixel. Bila angka sesudah WIDTH dan HEIGHT tidak menggunakan persen (%), berarti satuannya adalah pixel. Contoh:
<TABLE BORDER=7>
<TR HEIGHT=40>
<TD WIDTH=150> kolom 1 dari baris 1</TD>
<TD WIDTH=250> kolom 2 dari baris 1</TD>
</TR>
<TR HEIGHT=80>
<TD WIDTH=150> kolom 1 dari baris 2</TD>
<TD WIDTH=250> kolom 2 dari baris 2</TD>
</TR>
</TABLE>
Ukuran border tabel kita ubah menjadi 7. Tinggi baris pertama adalah 40 pixel sedang baris kedua 80 pixel. Adapun lebar kolom pertama adalah 150 pixel sedang kolom kedua 250 pixel. Perhatikanlah bagaimana atribut-atribut di atas, menghasilkan tampilan tabel menjadi:
Auto read more adalah read more yang otomatis memotong artikel kita tanpa harus memasang tag <div class="fullpost">..</div> ataupun <span id="fullpost">..</span> sangat praktis bukan? Nah, untuk membuatnya ikuti langkah berikut.
1. Login ke Blogger.com
2. Masuk ke Layouts -> Edit HTML jangan centang expand widget template.
3. Cari kode </head> bisa menggunakan F3, kalau sudah ketemu langsung copy paste kan script dibawah ini tepat di atas kode </head> tadi.
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
5. Simpan pekerjaanmu
6. Masih pada Edit HTML centang Expand Widget Template
7. Cari kode seperti ini <data:post.body/> kemudian ganti dengan semua kode dibawah ini
var thumbnail_mode = "float"; (kita dapat memutuskan apakah
letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float) summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan
di posting tanpa gambar / thumbnail) summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di
posting dengan gambar / thumbnail) img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel) img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
source:http://www.o-om.com/2009/04/cara-pasang-auto-read-more-terbaru-part.html
dan 
