Memberi Harapan

Selasa, 27 Juli 2010

Pelajaran Programmer

CSS,PHP,HTML,JAVASCRIPT dan ASP

Memanfaatkan situs penyedia ilmu programming dalam belajar cara membuat blog/web,pasti tidak lepas dari CSS,PHP,HTML,Javascript maupun yang lain,meskipun sekarang sudah sebagaian besar didukung oleh WYSWYG (what you see what you get) seperti pada blogger.
Ya..paling tidak kita harus menguasai salah satunya khan?

Jika sebelumnya Pelajaran Blog membahas tentang Apa itu CSS?,Apa itu Javascript?,Apa itu HTML? dan yang lain,tapi kali ini kita membahas situs-situs penyedia ilmu gratis tetang hal-hal tersebut di atas,

Situs Penyedia Ilmu Programming Gratis

Pelajaran Blog merekomendasikan situs-situs di bawah ini untuk media pembelajaran,karena mudah dipahami,akurat dan lengkap,terutama untuk pemula.

#1 Belajar CSS

Anda bisa kunjungi :

#2 Belajar PHP

Anda bisa kunjungi :

#3 Belajar HTML

Anda bisa kunjungi :

#4 Belajar Javascript

Anda bisa kunjungi :

#5 Belajar ASP

Anda bisa kunjungi :

**uNTUK YaNg LaIn,gOOGLInG aJa Ya..

Semoga bermanfaat..
**bocoran artikel selanjutnya..'Membuat Dropcaps Pada Artikel di Blog',tapi rencana..khan bisa berubah,so..update truz yach.. Pelajaran Blog

Membuat Popup Windows

Membuat Popup dengan Ukuran Tertentu: "

Membuat Popup? nggak ah!

Tunggu dulu,pelajaran ini tidak ada kaitannya dengan Membuat Popup Iklan yang sering membuat orang jengkel dan bahkan tak jarang visitor enggan untuk berkunjung kembali.

Tapi,kali ini kita mencoba iseng belajar menghias blog dengan tampilan jendela baru dengan ukuran sesuai yang kita inginkan.

Jika Iklan popup kebanyakan memaksa visitor untuk melihat suatu pesan dari author,tapi disini kita hanya menawarkan visitor untuk melihatnya.

**Ukh! beberapa hari terakhir,aku lagi nggak semangat memposting artikel tentang blog (lg ga enak badan dan ga ada bahan,he..)so,..#%#$!

OK! Langsung ke topik,popup dengan ukuran yang kita tentukan sendiri,meskipun sekali lagi,ini berfungsi di Mozilla Firefox dan Opera :D.

So,yang minat untuk membuat jendela munculan dengan ukuran yang kita inginkan,coba ikuti langkah berikut:

Pertama,tentukan alamat URL yang ingin di tampilkan,selanjutnya anda bisa meletakkan kode ini pada halaman HTML anda maupun saat anda hendak mempublikasikan pada suatu artikel.

Saya ambil contoh dengan menambahkan Element Baru pada blog,seperti biasa,Dashboard,lalu pilih Tata Letak, selanjutnya Tambah Element Baru/Add New Widget.

Pilih HTML/Javascript,dan letakkan kode berikut:

<center><form onsubmit="window.open('http://URLYANGDITAMPILKAN/','popupwindow','scrollbars=no, width=250,height=250');return true"><input type="submit" value="TEXT YANG TAMPIL PADA BUTTON"></form></center>

Tulisan kapital dan angka yang berwarna merah,pada kode diatas,ganti sesuai perintah yang dituliskan dan rubah sesuai ukuran pilihan anda.
Setelah kode di letakkan Simpan,dan Selesai.

Cara Membuat Kotak Blogroll

Cara Membuat Kotak Blogroll: "

Beberapa hari nggak online/update blog,saat lihat komentar ada temen kita menanyakan sambil belajar bagaimana membuat fungsi scroll seperti pada sidebar seperti disamping blog ini.
Kira-kira komentar itu seperti ini :

mas, salam kenal. aku penasaran gimana cara buat kotak yang kayak the most popular post, membuat blog di blogger yang ada di kanan postingan itu lho. mohon bimbingannya.

Untuk itu mumpung lagi ada waktu,sekarang kita kita bahas menghias blog dengan memanfaatkan fungsi scrollbar ya..:)
Untuk lebih relevan,sebaiknya diletakkan pada sidebar.Untuk hasil contohnya seperti ini:

TENTUKAN JUDUL KOLOM

>> TEXT YANG AKAN TAMPIL

>> TEXT YANG AKAN TAMPIL

>> TEXT YANG AKAN TAMPIL

>> TEXT YANG AKAN TAMPIL

>> TEXT YANG AKAN TAMPIL

Untuk langkah pertama,pergilah ke Dashboard---->Tata Letak----->Edit html.
Selanjutnya cari kode : </head>
Jika sudah ketemu,tepat diatasnya,letakkan kode ini:

<style type='text/css'>
#fungsiscroll {
float: left;
width: 100%;
font-family:arial;
font-size:12px;
margin: 6px 0px 6px 0px;
padding:0px;
line-height: 18px;
display:;
}
#fungsiscroll p {
padding: 0px;
margin: 0px;
}
#fungsiscroll a:hover {
color: green;
padding: 0px;
}
#fungsiscroll a {
text-decoration:none;
color:black;
}
#fungsiscroll a img {
border: none;
margin: 0px;
padding: 0px 0px 15px 0px;
}
#fungsiscroll h2 {
color: #000000;
font-size: 14px;
font-family: Arial;
text-align:center;
color:white;
font-weight: bold;
margin: 0px 0px 7px 0px;
padding: 7px 5px 3px 13px;
letter-spacing:0em;
text-transform:normal;
background: #222222;
}
#fungsiscroll ul {
list-style-type:none;
margin: 0px 0px 10px 0px;
padding: 0px;
}
#fungsiscroll li {
list-style-type: none;
margin: 0px 0px 5px 0px;
padding: 0px;
border-bottom : 1px dashed #ccc;
}
#fungsiscroll ul ul {
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px;
}
#fungsiscroll ul li li {
background: #FFFFFF url(images/icon.png) no-repeat top left;
padding: 0px 0px 5px 18px;
margin: 0px 0px 0px 0px;
border-bottom:1px solid #ddd;
}
#fungsiscroll ul li ul li {
background: #FFFFFF url(images/icon.png) no-repeat top left;
padding: 0px 0px 5px 18px;
margin: 0px 0px 0px 0px;
border-bottom:1px solid #ddd;
}
#l_fungsiscroll {
background: #FFFFFF;
float: left;
width: 135px;
margin: 0px;
padding: 9px 9px 0px 9px;
line-height: 20px;
display: inline;
border: 1px solid #C0C0C0;
}
#l_fungsiscroll p {
margin: 0px;
padding: 0px 0px 15px 0px;
}
#l_fungsiscroll a img {
border: none;
margin: 0px;
padding: 0px 0px 15px 0px;
}
#l_sidebar ul {
list-style-type: none;
margin: 0px 0px 10px 0px;
padding: 0px;
}
#l_sidebar ul ul {
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px;
}
#l_fungsiscroll ul li li {
background: #FFFFFF url(images/icon.png) no-repeat top left;
padding: 0px 0px 5px 18px;
margin: 0px 0px 0px 0px;
}
#l_fungsiscroll ul li ul li {
background: #FFFFFF url(images/icon.png) no-repeat top left;
padding: 0px 0px 5px 18px;
margin: 0px 0px 0px 0px;
}
#r_fungsiscroll {
background: #FFFFFF;
float: right;
width: 135px;
margin: 0px;
padding: 9px 9px 0px 9px;
line-height: 20px;
display: inline;
border: 1px solid #C0C0C0;
}
#r_fungsiscroll p {
padding: 0px 0px 15px 0px;
margin: 0px;
}
#r_fungsiscroll a img {
border: none;
margin: 0px;
padding: 0px 0px 15px 0px;
}
#r_fungsiscroll ul {
list-style-type: none;
margin: 0px 0px 10px 0px;
padding: 0px;
}
#r_fungsiscroll ul ul {
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px;
}
#r_fungsiscroll ul li li {
background: #FFFFFF url(images/icon.png) no-repeat top left;
padding: 0px 0px 5px 18px;
margin: 0px 0px 0px 0px;
}
</style>

Setelah itu simpan.

Lalu pada Tata Letak blog,tambah element baru dan pilih HTML/Javascript,lalu letakkan kode berikut:

<script type="text/javascript"></script>

<div id="fungsiscroll" class="sidebar section">
<h2 class="title" align="left">TENTUKAN JUDUL KOLOM</h2>
 <div style="OVERFLOW: auto; WIDTH: 95%; HEIGHT: 120px">

<

ul>
  <li>>>

<a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a><

/li>

<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>

<

/ul>

</div>


<div id="fungsiscroll" class="sidebar section">
<h2 class="title" align="left">TENTUKAN JUDUL KOLOM</h2>
 <div style="OVERFLOW: auto; WIDTH: 95%; HEIGHT: 120px">

<

ul>
  <li>>>

<a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a><

/li>

<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>

<

/ul>

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

<div id="fungsiscroll" class="sidebar section">
<h2 class="title" align="left">TENTUKAN JUDUL KOLOM</h2>
<div style="overflow:auto;width:95%;height:120px;">
<ul>

<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>

</ul>
</div></div>

Lalu Simpan. Selesai.

**Jika anda ingin membuat satu kolom saja,tinggal hapus kode yang berwarna hijau di atas.

CSS,memang sangat membantu ya.. :)

Menambah Gambar Sebelum Judul Postingan

Meletakkan Gambar Sebelum Judul Posting: "

Pelajaran Blog,beberapa hari setelah Pesta Demokrasi Pemilihan Wakil Rakyat untuk 2009,pada setiap artikel,sebelum judul posting,dihiasi dengan gambar,(ganti suasana,he..)

Bagi temen-temen yang ingin meletakkan gambar sebelum judul artikel,seperti pada blog ini,bisa ikuti langkah-langkah berikut ini:

Sebelumnya,siapkan bahan yang akan digunakan,bawang merah,telur,..Hus! maksudnya gambar yang ingin anda letakkan.

Setelah bahan sudah ada,anda tinggal upload ke hosting anda,atau bisa ke blog anda sendiri,setelah itu copy alamat URL gambar tersebut.

Contoh,alamat URL gambar yang saya punya:

http://iklandenpasar.cn/images/1398_Loggo-pelajaran-Blog.gif

Rubahlah menjadi seperti ini:

<img src="http://iklandenpasar.cn/images/1398_Loggo-pelajaran-Blog.gif"></img>

Warna merah,ganti dengan alamat URL gambar yang telah anda siapkan tadi.

Simpan di Notepad dulu,jangan disimpan dan jangan pula di hapus,aaaaalah!

Setelah itu,pergilah ke Dashboard Blog anda,lalu pilih Tata Letak,selanjutnya pilih tab Edit HTML.
Contreng Expand Widget Templates,lalu cari kode berikut :

<a expr:href='data:post.url'><data:post.title/></a>

Untuk mempermudah pencarian,Tekan Ctrl+F pada keyboard,dan tuliskan kode tersebut,nantinya kode akan terdeteksi secara otomatis!

Setelah ketemu,sisipkan alamat URL gambar anda (yang sudah anda simpan di notepad tadi),di antara kode tersebut.

Setelah kode URL alamat gambar anda disisipkan,akan menjadi seperti ini :

<a expr:href='data:post.url'>
<imgsrc="http://iklandenpasar.cn/images/1398_Loggo-pelajaran-Blog.gif"></img>
<data:post.title/></a>

Setelah itu klik Preview/Pratinjau untuk melihat hasil contohnya,jika sudah merasa OK,klik Simpan Templates.

**Untuk membuat jarak antara gambar dan Judul,anda bisa menuliskan tanda   
sebelum kode

 <img src="http://...

Meta y_key

Membuat Meta y_key: "

Apakah anda sudah mempunyai meta y_key?

Meskipun saat ini meta sudah tidak begitu vital diterapkan sebagai langkah untuk Search Engine Optimation(SEO),tapi masih banyak blogger-blogger papan atas menggunakan langkah ini.

Selain meta diskripsi dan keyword yang sering diterapkan (meta ini di letakkan di antara <head> dan </head>)seperti:

Contoh meta untuk diskripsi di pelajaran-blog.blogspot.com:

<meta content='Pelajaran tentang cara membuat blog di blogspot,juga belajar tentang menghias blog,membuat sambil blogging belajar menghias blogger khusus untuk pemula' name='description'/>

**Untuk menjelaskan diskripsi dari blog tersebut

Contoh meta untuk keyword di pelajaran-blog.blogspot.com:

<meta content='pelajaran blog,cara membuat blog,belajar menghias blog,untuk pemula,blogspot,blogger,blogging' name='keywords'/>

**Untuk menjeaskan kata kunci untuk menuju blog tersebut

Nah!yang akan kita bahas kali ini,adalah meta y_key.

Bagaimana saya bisa mendapatkan meta y_key?

Meta y_key adalah meta yang dimiliki oleh Yahoo,maka kita harus mempunyai account di Yahoo,sebelum mensubmit blog kita ke directory mereka.

Contoh bentuk meta yang di berikan,nantinya akan seperti ini :

<meta content='32bf6291ec6ec61f' name='y_key'/>

Langkah pertama,masuk Yahoo dengan ID Yahoo anda yang masih valid tentunya,untuk lebih cepat anda bisa kunjungi di https://siteexplorer.search.yahoo.com/.

Selanjutnya,masukkan alamat URL blog anda,lalu klik Add My Site.

Setelah itu,anda di hadapkan halaman bahwa anda telah mensubmit URL blog anda,pada tabel keterangan nya disitu ada kolom Sites,Feeds,Action dan Status pada kolom terakhir.

Nah! pada kolom Status,hanya diperlihatkan sebuah object berbentuk bulat,klik tanda bulat tersebut untuk melihat status.
Selanjutnya anda akan di hadapkan 2 pilihan.

By uploading a verification file to my site.
By adding a META tag to my home page

Pilih tanda segitiga pada tulisan 'By adding a META tag to my home page' dan copy kode y_key nya,yang mana ya?
Yang mirip seperti ini:

<META name="y_key" content="xxxxxxxxxxxxxxxx">

Kode diatas hanya contoh kodenya,tulisan 'x' diatas adalah nomor key blog anda.
Copy kode tersebut dan letakkan di bawah kode <head> pada halaman HTML anda lalu Simpan Template anda.
Setelah anda berhasil meletakkan kodenya,kembali ke halaman account Yahoo dimana anda baru saja mengcopy kode tadi,setelah itu klik Tombol 'Ready to Authenticate',dan tunggu sampai muncul halaman yang memberi tahu bahwa y_key anda telah berhasil untuk difungsikan.

Contoh tulisan jika sudah berhasil kurang lebih seperti ini :

Your site has been authenticated

If you have added the META tag <META name="y_key" content="<meta name="y_key" content="xxxxxxxxxxxxxxxx" >, please keep the tag in your site's home page. We will revalidate your site ownership by checking this META tag regularly.

If you have uploaded the verification file, please keep the file y_key_xxxxxxxxxxxxxxxx.html on your site root http://alamat-blog-anda.com and do not change the content (xxxxxxxxxxxxxxx). We will revalidate your site ownership by checking this file regularly.

Saat saya meletakkan y_key, koq Error ya?

Error,mungkin hanya disebabkan kode yang tidak ditutup dengan benar.Memang dari Yahoo sendiri,memberikan kode yang seperti ini:

<META name="y_key" content="xxxxxxxxxxxxxxxx">

Anda tinggal disuruh menyisipkan tanda '/' pada akhir kode,yang nantinya menjadi seperti ini:

<META name="y_key" content="xxxxxxxxxxxxxxxx'/>

Dalam waktu kurang lebih 24 jam,Bibi Yahoo akan segera mengindex anda. :)

Sabtu, 24 Juli 2010

Membuat Sidebar Berada di Kanan Kiri Posting / Posting Di Tengah - Tengah

Membuat Sidebar Diantara Posting: "

Sering saya jumpai situs-situs yang mempunyai sidebar di sebelah kanan dan kiri .Atau lebih gampang nyebutnya Posting terletak diantara sidebar ,berarti posting berada di tengah-tengah.
Sedangkan dari blogger tak menyediakan template yang seperti itu.Untuk memodifikasi template anda,cobalah langkah-langkah seperti di bawah ini :
Pergi ke Dashboard------>Tata Letak----->Edit Html .
Cari kode / yang hampir sama dengan kode di bawah ini :

#sidebar-wrapper {
width: 220px;
float: right;
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 */

Jika sudah ketemu,letakkan kode di bawah ini tepat dibawah kode tersebut :

#newsidebar-wrapper {
width: 180px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}

Selanjutnya,cari kode seperti di bawah ini :

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

Jika sudah ketemu,letakkan kode di bawah ini,tepat diatas kode tersebut :

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'/>
</div>

Simpan Template .Lihat Hasilnya!!! Kode yang berwarna hijau,menunjukkan ukuran lebar sidebar nantinya,anda bisa merubahnya sendiri,sampai anda mendapatkan ukuran yang anda inginkan.
Untuk lebih jelasnya baca artikel Kang rohman di sini

Cara Merubah / Mengubah Format Judul Agar Seo Friendly

Cara Merubah / Mengubah Format Judul Agar Seo Friendly: "

Salah satu langkah SEO(Search Engine Optimation),adalah mengubah format pada Judul Blog.
Sebelumnya,Pelajaran Blog,minta maaf karena tidak adanya Ilustrasi berupa Gambar/Image pada setiap artikelnya.

Ya,benar,hanya penalaran saja,klo baca khan lebih Fokus..

(ngomong aja ga ada gambar yang bisa dipostingin,he..)

Langsung ke Topik.Maksud mengubah Format Judul pada Blog,misal Judul Blog saya:

Pelajaran Blog|Belajar Membuat Blog

Biasanya,nanti setelah membuka halaman,contoh tentang artikel :

'SEO,Mengatur / Mengubah Format Title'

Judul pada Menu bar akan menjadi seperti ini :

Pelajaran Blog|Belajar Membuat Blog:SEO,Mengatur / Mengubah Format Title

Ya,khan?

Nah,agar SEO Friendly,kita ubah susunan Judul menjadi hanya seperti ini:

SEO,Mengatur / Mengubah Format Title

Maka,jika berhasil diindex sama paman Google ya..akan terindex seperti itu.
Untuk kodenya,sebenarnya anda tinggal merubah format Title nya.

Pergi ke Dashboard,lalu pilih Tata Letak,selanjutnya pilih Edit HTML.
Cari kode seperti di bawah ini:

<title><data:blog.pageTitle/></title>

Setelah ketemu,hapus kode tadi,dan ganti dengan kode dibawah ini

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

Lalu Simpan Template.
Dan,baca salah satu artikel anda sekarang,dan lihat tampilan Judul Bar atas.
Berhasil khan?

Memberi Harapan

Selasa, 27 Juli 2010

Pelajaran Programmer

CSS,PHP,HTML,JAVASCRIPT dan ASP

Situs Penyedia Ilmu Programming Gratis

#1 Belajar CSS

#2 Belajar PHP

#3 Belajar HTML

#4 Belajar Javascript

#5 Belajar ASP

Baca Juga Yang Ini..

Membuat Popup Windows

Membuat Popup? nggak ah!

Baca Juga Yang Ini..

Cara Membuat Kotak Blogroll

TENTUKAN JUDUL KOLOM

Baca Juga Yang Ini..

Menambah Gambar Sebelum Judul Postingan

Baca Juga Yang Ini..

Meta y_key

Apakah anda sudah mempunyai meta y_key?

Bagaimana saya bisa mendapatkan meta y_key?

Saat saya meletakkan y_key, koq Error ya?

Baca Juga Yang Ini..

Sabtu, 24 Juli 2010

Membuat Sidebar Berada di Kanan Kiri Posting / Posting Di Tengah - Tengah

Baca Juga Yang Ini..

Cara Merubah / Mengubah Format Judul Agar Seo Friendly

Baca Juga Yang Ini..