Snippet
Showing posts with label tips blog. Show all posts
Showing posts with label tips blog. Show all posts

Nah, menu-menu diatas tergantung kebutuhan sobat, jika sobat merasa penting tidak salah kalau mencoba menggunakan cara dibawah ini, namun yang perlu diperhatikan agar berhasil adalah layout blog sobat harus sama atau mirip dengan template yang saya gunakan.


Langkah-langkah dibawah sudah saya uji coba di blog DEMO saya, dan berhasil. Sebelum memulai langkah-langkah dibawah backup terlebih dahulu template blog sobat.

Langkah - langkah membuat menu dibawah header blog adalah :

1. Masuk ke dashboard Blog sobat, lalu ke menu Rancangan >> Edit HTML,  centang '

2. Cari kode seperti dibawah atau cari yang mirip (CTRL+F , cara cepat untuk mencari kode).
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='x-Demo (Header)' type='Header'>
<b:includable id='main'>

ganti maxwidgets='1' menjadi 2 atau lebih dan showaddelement='yes'>

3. Jika sudah selanjutnya sobat cari kode ]]></b:skin>

4. Hapus kode tersebut dan ganti dengan kode dibawah ini.
a.navigation {
background: #3333ff ;
color: #ffffff ;
margin: 1px;
padding: 2px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #333333;
color: #ffffff;
text-decoration: none;
}

]]></b:skin>

Keterangan :

5. Save template lalu klik Elemen Laman atau klik rancangan.

6. kemudian klik tambah gadget >> pilih HTML/JavaScript

7. Copykan kode berikut kedalam kotak tersebut
<a href="http://www.masterendi.com " class="navigation">HOME</a>
<a href="http://www.masterendi.com/p/rekomendasi.html " class="navigation">CONTACT</a>
<a href="http://www.masterendi.com/p/buku-tamu.html " class="navigation">BUKU TAMU</a>
<a href="http://www.masterendi.com/2011/01/links-sahabat-master.html " class="navigation">LINKS</a>

Keterangan : Ganti yang dicetak tebal merah dengan URL menu, dan warna biru adalah nama menu.

8. SAVE lalu lihat hasilnya..
Cara mengetahui harga blog atau website
Perlukah anda mengetahui harga blog atau website anda, kalau menurut saya harus mengetahuinya kenapa? Jika anda sudah mengetahui harga blog atau website anda, dipastikan ini akan menjadi barometer untuk anda, menjadikan sebuah kebanggaan dan menjadikan sebuah motifasi untuk bebenah blog atau website anda menaikkan value blog atau website anda.

Harga blog atau website akan di hargai dengan mata uang Dollar (US$) kemudian penilaiannya berdasarkan analysis global.
Jika anda ingin melihat berapa dollar harga blog atau website anda, Ikuti cara mengetahui harga blog atau website di bawah ini :

1.  Silahkan anda masukkan url blog atau website anda pada �Search Box YourWebsiteValue.com� dibawah ini, kemudian klik �Get Estimate� :

2. Jika ingin memiliki widget Search Box YourWebsiteValue.com silahkan kunjungi Your Website Value kemudian cek ulang harga blog anda. 

3. Kemudian akan muncul harga blog atau website anda �This Website Value� di sebelah kiri detail blog atau website anda, silahkan masukkan alamat email anda di bawahnya lalu klik �Start Tacking� ini bertujuan untuk kiriman laporan setiap minggu melalui email anda berapa kenaikkan value blog atau website anda. Lihat screen shoot contoh harga �blogger.com� adalah $624,187,533 di bawah ini :


4. Disamping ditampilkannya harga blog atau website, ditampilkan juga blog detail, analysis, banner display, search box :
Worth Details, History Graph blog atau website - Lihat contoh gambarnya di bawah ini :


Analysis : Website Hisory, Popularity, Friendliness, Interest, Recognition, Depth Potential   - Lihat contoh gambarnya di bawah ini :


Display This Banner � Copypaste kode script dan pasang di blog atau website anda. Lihat contoh gambarnya di bawah ini :


Display This Search Boxes - Copypaste kode script dan pasang di blog atau website untuk pengunjung anda sebagai refferensi dari Blog atau website anda.  Lihat contoh gambarnya di bawah ini :


Cara memasang banner Your Website Value di blogspot :
1.Silahkan login ke Blogger.Com dengan akun anda kemudian pada Dasboard klik �Rancangan atau Lay Out�. Lihat gambar Dasboard di bawah ini :


2. Pada halaman Rancangan klik �Tambah Gadget�. Lihat gambar tambah gadget di bawah ini :


3. Kemudian akan muncul beberapa gadget silahkan pilih �HTML/JavaScript� klik pada tanda �+� nya. Lihat gambar html/javascript di bawah ini :


4. Dan akan terbuka menu �HTML/JavaScript� silahkan anda berikan judul jika perlu kemudian pada kolom konten paste kode script Your Website Value pada kolom tersebut kemudian klik 'Simpan'.  Lihat contoh gambar kode script yang sudah di paste di bawah ini :


Selesai. Dengan tips dan triks Cara mengetahui harga blog atau website ini mudah-mudahan bermanfaat.
Ingin tau Cara Membuat Tombol Home,Back To Top,Dan Bottom
Mari kita mulai saja Tutorial nya..
Eiiiit sebelum memulai Tutorial nya saya ingin menjelas kan dulu apa itu Tombol Home,Back To Top,Dan Bottom..?




Untuk lebih jelas nya coba sobat klik Tombol Home,Back To Top,Dan Bottom yang ada pada blog saya,.
sudah sobat klik,nah itu dia maksud nya dari Tombol Home,Back To Top,Dan Bottom..
Sobat tertarik untuk membuat nya di blog sobat..?
jika tertarik,mari kita mulai cara pembuatan nya..

1.Masuk Ke akun Blog Sobat
2.Pada Dasbor Pilih Rancangan-->Edit HTML Dan jangan Lupa Centang Kolo Expand Template Widget
3.Kemudian Cari Kode ]]></b:skin> ( gunakan CTRL F atau F3 untuk memudahkan pencarian )
4.Copy Paste Kode Dibawah Ini Tepat Diatas Kode Tadi
 
#mangetsu {
position:fixed;_position:absolute;bottom:0px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
#mangetsu a
{
filter:alpha(opacity=65);
-moz-opacity:0.65;
opacity:0.65;
border:0;
}
#mangetsu img
{
border:0;
}
#mangetsu a:hover
{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}

5.Selanjutnya cari kode </body> Dan Letak Kode Dibawah Ini Tepat Diatasnya
 
<a name='ngisor-dhewe'></a>

6.Langkah Terakhir Tinggal Memasukan Kode Dibawah  Ini Tepat Dibawah Kode <body>
 
<div id='mangetsu'>
<table border='0'>
<tr>
<td><a expr:href='data:blog.homepageUrl' title='Home'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-a7kdigJCbCMtfVASIkQ0bpMijetOwnruLqagoBIP_1eD1YMzfPxglUzPiQKmbUzmP5r9m2fcec6C3buIYLd-O5euCYi-9szDCkxh3Hdjtit3H-6_KRYVk4b9wz1TfSGSmr-dIcXWtf0/s320/home-icon2.png'/></a></td>
<td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNu1NH22UewiIXXuc1eN4OjDaL49jA7pikvFhYePBHe7NoKPzL-EYWrqSNU2ZvSoVqP4RDTHJqc-dknC7Xh-X4Wpqvr0-1KnVTJEPY96_ZIut_rN-xjOvV254G3lhRBnKTvF1QowekCmo/s320/pre-icon1.png'/></a></td>
<td><a href='#ngisor-dhewe' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQSAgsVfgWcf2TTi12sTKjiRtz8cQxgbBp-1r1gK6gwzrh0vxO_4Q__naAPJFomuUHbZ5DyyxCWyxqQb7k3ltCmlPywS8yxVsGAd9mJef8MPhk-Gk_AjT5RrrQbHnsZ6UQV0Dz69mCNHQ/s320/next-icon2.png'/></a></td>
</tr>
</table>
</div>
 
 7.Simpan

Mudah kan sobat cara membuat Tombol Home,Back To Top,Dan Bottom nya...
Semoga Bermanpaat dan selamat mencoba.

Cara Mengganti Background Blog Otomatis. Suatu hari kangsalman berkunjung keblog tetangga misel, dan pada saat itu saya melihat tampilan yang berbeda di blog ekspedisi net, dimana latar belakang blog tersebut bisa di ganti-ganti secara manual oleh kita sendiri. Karena merasa unik akhirnya disini kang salman mencoba untuk membuat tutorial membuat background blog.

Sebagai contoh, silakan klik warna yang ada di kotak berikut:


Silahkan Pilih Warna Latar Blog ini Sesuai Dengan kenyamanan Yang Anda Suka

























Bagaimana menurut Anda manarik bukan? Oke untuk menginstal widget ini caranya cukup mudah.
1.  Login ke Blogger
2.  Pilih Racangan
3.  Tambah Widget Baru
4.  Pilih HTML/Javascript
5.  Copy-Paste kan kode di bawah ini :

<center><script type="text/javascript">
    function bgChange(bg)
    {
    document.body.style.background=bg;
    }
    </script>

Silahkan Pilih Warna Latar Blog ini Sesuai Dengan kenyamanan Yang Anda Suka
    <table border="1" width="660" height="20">
    <tr> <td
    onclick="bgChange('#FFFFFF')" bgcolor="white">
     <td
    onclick="bgChange('#000000')" bgcolor="#000000">
     <td
    onclick="bgChange('#F0E68C')" bgcolor="#F0E68C">

     <td
    onclick="bgChange('#E0FFFF')" bgcolor="#E0FFFF">
     <td
    onclick="bgChange('#98FB98')" bgcolor="#98FB98">
     <td
    onclick="bgChange('#B0E0E6')" bgcolor="#B0E0E6">
     <td
    onclick="bgChange('#87CEFA')" bgcolor="#87CEFA">
     <td
    onclick="bgChange('#FFDAB9')" bgcolor="#FFDAB9">
     <td
    onclick="bgChange('#FFC0CB')" bgcolor="#FFC0CB">

     <td
    onclick="bgChange('#E6E6FA')" bgcolor="#E6E6FA">
     <td
    onclick="bgChange('#D3D3D3')" bgcolor="#D3D3D3">

     </td
></td
></td
></td
></td
></td
></td
></td
></td
></td
></td
></tr>
    </table>

<div class='clear'></div></center>
5.  Silakan simpan dan lihat hasilnya!
Nah sobat Informasi maya mudah mukan cara buatnya? Oke semoga Cara Mengganti Background Blog Otomatis bermanfaat
       Bagi kalian ingin memperindah blog, kalian pasti ingin blog kalian terlihat indah dan tidak membosankan.  Salah satu aksesoris blog yang bisa digunakan yaitu Link Pelangi (warna-warni), contohnya seperti ini http://boland-capzlock.blogspot.com  Jika kalian sentuh link itu, maka link itu akan berganti-ganti warna.  Link pelangi ini membuat link tidak biasa untuk dilihat, membuat menarik para pengunjung juga.

Yang mau pasang link pelangi ini, ikuti langkah-langkah berikut :

  1. Berdo'a sebelum melakukan perbaikan ini XD
  2. Login ke Blogger
  3. Klik 'Design' lalu 'edit HTML'
  4. Pasang kode berikut di bawah kode <head> :

    <script src='http://pamungkaz.googlepages.com/rainbow.js'>

    /*
    Want to uSe ? visit http://boland-capzlock.blogspot.com/2011/10/membuat-link-pelangi-di-blog.html
    */

    </script>

  5. Save template dan lihat hasilnya, kalau gak bisa.. silahkan kasih komentar artikel ini, thankz ;)
Sesuai dengan namanya. Widget ini berfungsi untuk menerjemahkan bahasa yang satu ke bahasa yang lain. Dengan memasang widget ini, maka pengunjung yang berasal dari negara lain juga bisa menikmati konten diblog anda. Selain itu, anda juga bisa memanfaatkan widget ini untuk belajar bahasa asing lho. Menarikkan?

Sebenarnya google translate ini sudah pernah saya bahas pada beberapa waktu yang lalu. Namun karena widget ini sudah mengalami perubahan yaitu menggunakan icon-icon bendera sehingga tampilannya menjadi lebih menarik.

Contohnya seperti ini yang dibuat oleh mad tomatoe








dan ini yang dibuat oleh kang rohman



Oleh sebab itu, pada postingan ini saya ingin membahas kembali dengan menyajikan widget buatan saya sendiri. Seperti yang dibawah ini








Widget ini saya buat dengan mengganti icon bendera yang berbentuk seperti pin dan diberi sedikit efek shadow sehingga hasilnya menjadi seperti diatas. Semoga tidak terlalu mengecewakan. sengihnampakgigi

Bagi anda yang tertarik, silahkan copy kode dibawah ini.

Untuk Google Translate 2 baris. Gunakan kode dibawah ini:








<style>
.translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
padding-left:0px;
}
.translate:hover img {
filter:alpha(opacity=50);
-moz-opacity: 0.50;
opacity: 0.50;
border:0;
}
</style>

<div style="text-align:center">
<a class="translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggN-d6Bn3mF4lnBlIwqf9M6mPsyFnXLotRADbqY3tkBY-dF4myYvnOoMHaXuKxZKkVuQ8AKaCKgR2I4YkBlFHzzfwyK1-bONvcwWKQp67q-KbixJU-ilDQeRpqg2aTLExZoT4i8I27Gzav/s144/uk-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQUDCOv4DfF5Mx_y_A2zjHMCu4OWCQsLsXqS3pbne1mqOlWXsVLD33H_MAKauaKtOiokjZfLZwEoJjwm1ow_TZ5k8G53RafxNkEM9-QBT3T-DXD2LeMBCSzxtlNKxKkwY21GVJuUCE_FKh/s144/france-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSH8pxfnxtQQ3T_UJ4FFeZXoIkBGkHkFfCAqNhyVLU1j8u-zqmfgzyARukuusfxgyBcecGHI4W6cdovXnbh4aQrIExY_DK4bAO6uAhTd73XM7x-fEbxvvHDLkqjuKgDC1rWkDA855F3FAT/s144/german-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI3fIOArQsEgoR7SsSDO2e5O2yiPuoOPs60v1ZPzfT8ceXoT7fEMzl__DGVIINlf0qJn76vvNOtcGJagHRMQhvYrZ0CiTpM7DFAlwTx_EtxWsfjvwFEUL_MpGdJ18z2rjcGd9sK-ggKueE/s144/spain-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlZDalZlPTnYw-HBeQ_U2Lkn8LcuKnB3ZZYed7iOmLNfKW2KMQjJCcAB3Gp650-PYeWOFZeLVpm2bfkqzXirmpJVj_7O7X5oKZd5juSUNKj9-5n4h4FIvkbxXsyw7h598fgSppGxg8Zyv-/s144/italy-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizLfnvlNjoUQp0ktt8YKJJQMwlA3zoHuF1I1FGFAkj9lusxJjQ6A9bHmneF2GQ0Kqt-o1DpoA48PJvafZMpvJcinls9Dlpgusty-_WmjmyPiKcmW5l-0yppFjkpp_RCPX5X7sCAMYV4Y1K/s144/dutch-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
<br/><br/>
<a class="translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK6BO8Vb5rdp29rvpA5-BSyCEwoOKPWEsyyFAW6pkmXqd6RAxjOcTEzFL0FM4OI-uPk1_MQDtEnkgcReom81rezBV3LtfzUMusz4h5EXYjOE6PITsNI9Gur7Nh9ayfozBfHxJnYySXeNyN/s144/russian-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="Brazil" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Brazil" border="0" align="absbottom" title="Brazilian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgroQAZsKgw0Bxhypk9wznQCrSIxNe_dN5BxVhYfmsC634vkoi15oyp4FdY4haJItA-YhEFN-W-azOfszdDe1QMzhEAA5zGTa-785tAS0bH1tGukC2lVFGOXKjpa-ndrZtTKCuPxbwdB4pW/s144/brazil-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpRQmQBwLwgs4nn5A4M4LqiqEaEnG5p6tUYHGyw6zbJFHl44brdDX9CKgexDoO1z3mHDqFY5TBO1AiNyfzzvarsuECpMpkGi5m7SLcmPxkM8liam50ldSIFsw7Ftf-n908MFEMlWQE1LV5/s144/japan-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTd-phcg5Kah4XNJoqncyJ3P1gBAOSH30BEyQCO9o4yqgcOGaadBuIe2Lza2U-ieXre4OfQm0Kt2XaSjEcoSovH1Yw1o7mzP_TCKgTmE2A_VmAcpPF4PBkeH6xB2wh4nXnE78rm-VIMV3Q/s144/korean-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwvEjPQt59NIRSY4Dy8NXjV1EQlxZqYyVqYoe2eYXcznS1LZcIKc1kc1I50uY31cADtXI8G9jqx8L8Au4LQgI69_eRuIfEQPJaVYovYz8j5BWlhyIOCyaA5dUtw_JZVsMsGi9d92_hFAGS/s144/arab-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjjr5gvAYyozpJUvDt8pVzLatjZTHiHbzubIAbdoTODkHKPr4TLb_yd8tzBpY_xU3mM2VHLkTTMTznPvfG1_s4Qe5wEhZ4tYCwUU3O9lMRyRy1F7sKItnCTsBtTIEV826XkLkD4qo5qnum/s144/china-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<div style="font-size:9px; padding:8px 0px 0px 0px">
<a href="http://boland-capzlock.blogspot.com/2011/10/memasang-widget-google-translate-pada.html" target="_blank">Translate Widget</a> by Google
</div></div>


Untuk Google Translate 3 baris. Gunakan kode dibawah ini:

google translate widget








<style>
.translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
padding-left:0px;
}
.translate:hover img {
filter:alpha(opacity=50);
-moz-opacity: 0.50;
opacity: 0.50;
border:0;
}
</style>

<div style="text-align:center">
<a class="translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggN-d6Bn3mF4lnBlIwqf9M6mPsyFnXLotRADbqY3tkBY-dF4myYvnOoMHaXuKxZKkVuQ8AKaCKgR2I4YkBlFHzzfwyK1-bONvcwWKQp67q-KbixJU-ilDQeRpqg2aTLExZoT4i8I27Gzav/s144/uk-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQUDCOv4DfF5Mx_y_A2zjHMCu4OWCQsLsXqS3pbne1mqOlWXsVLD33H_MAKauaKtOiokjZfLZwEoJjwm1ow_TZ5k8G53RafxNkEM9-QBT3T-DXD2LeMBCSzxtlNKxKkwY21GVJuUCE_FKh/s144/france-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSH8pxfnxtQQ3T_UJ4FFeZXoIkBGkHkFfCAqNhyVLU1j8u-zqmfgzyARukuusfxgyBcecGHI4W6cdovXnbh4aQrIExY_DK4bAO6uAhTd73XM7x-fEbxvvHDLkqjuKgDC1rWkDA855F3FAT/s144/german-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI3fIOArQsEgoR7SsSDO2e5O2yiPuoOPs60v1ZPzfT8ceXoT7fEMzl__DGVIINlf0qJn76vvNOtcGJagHRMQhvYrZ0CiTpM7DFAlwTx_EtxWsfjvwFEUL_MpGdJ18z2rjcGd9sK-ggKueE/s144/spain-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
<br/><br/>
<a class="translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlZDalZlPTnYw-HBeQ_U2Lkn8LcuKnB3ZZYed7iOmLNfKW2KMQjJCcAB3Gp650-PYeWOFZeLVpm2bfkqzXirmpJVj_7O7X5oKZd5juSUNKj9-5n4h4FIvkbxXsyw7h598fgSppGxg8Zyv-/s144/italy-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizLfnvlNjoUQp0ktt8YKJJQMwlA3zoHuF1I1FGFAkj9lusxJjQ6A9bHmneF2GQ0Kqt-o1DpoA48PJvafZMpvJcinls9Dlpgusty-_WmjmyPiKcmW5l-0yppFjkpp_RCPX5X7sCAMYV4Y1K/s144/dutch-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK6BO8Vb5rdp29rvpA5-BSyCEwoOKPWEsyyFAW6pkmXqd6RAxjOcTEzFL0FM4OI-uPk1_MQDtEnkgcReom81rezBV3LtfzUMusz4h5EXYjOE6PITsNI9Gur7Nh9ayfozBfHxJnYySXeNyN/s144/russian-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="Brazil" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Brazil" border="0" align="absbottom" title="Brazilian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgroQAZsKgw0Bxhypk9wznQCrSIxNe_dN5BxVhYfmsC634vkoi15oyp4FdY4haJItA-YhEFN-W-azOfszdDe1QMzhEAA5zGTa-785tAS0bH1tGukC2lVFGOXKjpa-ndrZtTKCuPxbwdB4pW/s144/brazil-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
<br/><br/>
<a class="translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpRQmQBwLwgs4nn5A4M4LqiqEaEnG5p6tUYHGyw6zbJFHl44brdDX9CKgexDoO1z3mHDqFY5TBO1AiNyfzzvarsuECpMpkGi5m7SLcmPxkM8liam50ldSIFsw7Ftf-n908MFEMlWQE1LV5/s144/japan-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTd-phcg5Kah4XNJoqncyJ3P1gBAOSH30BEyQCO9o4yqgcOGaadBuIe2Lza2U-ieXre4OfQm0Kt2XaSjEcoSovH1Yw1o7mzP_TCKgTmE2A_VmAcpPF4PBkeH6xB2wh4nXnE78rm-VIMV3Q/s144/korean-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwvEjPQt59NIRSY4Dy8NXjV1EQlxZqYyVqYoe2eYXcznS1LZcIKc1kc1I50uY31cADtXI8G9jqx8L8Au4LQgI69_eRuIfEQPJaVYovYz8j5BWlhyIOCyaA5dUtw_JZVsMsGi9d92_hFAGS/s144/arab-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjjr5gvAYyozpJUvDt8pVzLatjZTHiHbzubIAbdoTODkHKPr4TLb_yd8tzBpY_xU3mM2VHLkTTMTznPvfG1_s4Qe5wEhZ4tYCwUU3O9lMRyRy1F7sKItnCTsBtTIEV826XkLkD4qo5qnum/s144/china-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<div style="font-size:9px; padding:8px 0px 0px 0px">
<a href="http://boland-capzlock.blogspot.com/2011/10/memasang-widget-google-translate-pada.html" target="_blank">Translate Widget</a> by Google
</div></div>


1. Kalau sudah, buka kotak HTML/ javascript lalu pastekan kodenya kedalam kotak.

2. Klik Save. Selesai. Silahkan lihat hasilnya.


Jika anda merasa letaknya kurang pas dengan kolom sidebar anda. Anda bisa menyesuaikan jaraknya dengan mengganti nilai 0 pada padding-left. Semakin tinggi nilainya semakin lebar jaraknya. Dan jika anda ingin mengganti icon benderanya dengan icon lain. Silahkan ganti tulisan bewarna merah dengan alamat url icon anda.

Selamat mencoba. Semoga bermanfaat..
Mungkin sobat sudah ada yang tau apa Itu Blockquote,.namun tidak bagi blogger yang baru membuat Blog.
maka dari itu saya akan menjelaskan Apa Itu Blockquote dan memberi Tutorial Cara Modifikasi Blockquote Blogger ,
Blockquote saya contoh kan seperti ini.



Nah contoh di atas ini Adalah Blockquote,
Bagai mana cara membuat nya..?

Gampang ko,.
ikuti langkah berikut.

1. Masuk ke akun Blog anda
2. Pilih rancangan ------> Edit HTML
3. Jangan lupa beri centang pada Expand Widhet Templates
4. Kemudin sobat cari kode ]]></b:skin> (untuk memudah kan pencarian sobat bisa tekan Ctrl + F


Bila sudah ketemu silahkan sobat copy kode di bawah ini tepat di atas kode ]]></b:skin>
.post-body blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrvDs9JZDH7DPWXfRQK7Bc_NsgrQA5XfrDKkFsVygfsHC8y_UeuWu1XEBIZ88BsYLgDEXe5dWOOZqolDOb8tdTgcwrfbn9q459tAAFRX8ECu_y29sUryp0s4FRU_zzfO3f2xkYweP4Dao/s1600/45.jpg
) no-repeat left top;
border-left: 10px solid #666666;
}


5. Simpan Template


Keterangan
Kata yang saya coret merupakan gambar yang saya gunakan,sobat bisa ubah URL nya tergantung keinginan sobat.

Untuk memberikan Blockquote pada postingan caranya sangat mudah,
Sobat blog dahulu kata yang ingin sobat berikan Blockquote,lalu sobat klik
" lebih jelasnya sobat lihat gambar Di bawah ini

yang di beri tanda panah pada ganbar merupakan Blockquot.
Sudah paham kan sobat yang du maksud dengan Blockquot,..?
Pasti sobat pernah melihat bintang di langit yang indah,dan ingin memiliki nya tapi rasanya tidak mungkin untuk memiliki nya...heeeeeeee.....
jangan kawatir sobat anda saat ini bisa memiliki nya,cara nya sangat mudah ko,mari kita mulai cara Link Mengeluarkan Bintang.

Pasti sobat pernah melihat bintang di langit yang indah,dan ingin memiliki nya tapi rasanya tidak mungkin untuk memiliki nya...heeeeeeee.....
jangan kawatir sobat anda saat ini bisa memiliki nya,cara nya sangat mudah ko,mari kita mulai cara Link Mengeluarkan Bintang.



Sobat Hanya Menambahkan atau menyisipkan kode Di atas ini tepat Disamping kode a:hover {

1.Login Ke akun Blog Sobat
2.Pada Dasbor Klik Rancangan/tata Letak
3.Edit HTML
4.Centang Kolom Expand Widget
5.Cari Kode a:hover {  tapi  yg berdekatan dengan  a:link{  atau berdekatan dengan a:visited{

6.Copy Paste Kode Diatas Disamping Kode a:hover {  yg berdekatan dengan  a:link{  atau
   berdekatan dengan a:visited{

Contoh:   a:hover { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA3vSxgBTCUlZWwWR5U1m9JffFj1IzWjRXBSi1yEyv-DENqBJ7mnjAzPRmXM5ojR_3ci6nWo-B_XiNkpRlO50g24J61Rl5Ea9Xa7_xhyphenhyphen27Qyp2lv5n35VkNDGBJyYBmeTsBFI1I4jVfEI/s1600/stars.gif);}
               

 7.Simpan Template..
Bagi sobat yang doyan merenopasi tampilan Blog nya,ini mungkin bisa menjadi alternatif lain untuk memperantik tampilan postingan Sobat. Cara Membuat Background Pada Postingan Blog sangat mudah membuat nya.hanya saja perlu katerampilan saja untuk membuat agar terlihat catik pada spotingan blog sobat..
Sebagai cantoh nya,sobat bisa lihat postingan saya ini yang menhhunakan Background.
Ini yang di maksud dengan Cara Membuat Background Pada Postingan Blog
ingin tau cara membuat nya bagai mana..?

mari kita mulai saja Tutorial  nya.


1. Mengganti Warna Background:
-Codenya seperti berikut


<div style="background:kode_warna_disini;">

Postingan Anda Disini

</div>




2. Mengganti Background Dengan Gambar
-Codenya seperti berikut:



<div style="background:url(Url Gambar Sobat) no-repeat right top; text-align:justify; font-size:100%; padding:10px">

Postingan Sobat Disini Letaknya

</div>



Ganti tulisan yang berwarna merah itu dengan postingan sobat.

Cara di atas ini adalah cara yang manual nya,karna setiap kita akan posting mesti memasukan kode-kode di atas tersebut,saya menawarkan anda untuk cara yang otomatis nya,jadi sobat tidak perlu capek-capek memasukan kode di setiap anda posting..
Mau cara nya gimana..?


Ikuti langkah berikut

1.Login pada blogger.
2.Klik Setting pada Dashboard anda.
3.Pada Setting klik Formating.
4.Pada bagian kolom Post Template, masukkan kode berikut ini 

<div style="background:url(URL Image) no-repeat;">

Letak Postingan

</div>

Sangat Mudah kan cara nya.
Sobat bisa ganti URL Image nya sesuai keinginan sobat.

Inilah sedikit Tutorial dari saya Cara Membuat Background Pada Postingan Blog mudah-mudahan bermanfaat untuk sobat semua.
jangan lupa ucarkan terima kasih dengan cara Berkomentar Di postingan ini.

SEO

(Search Engine Optimization),

merupakan langkah/kiat menuju pengoptimalan dalam hal ini masalah Search Engine.

Sebagus apapun sebuah situs,jika tak dapat direkam/ditangkap/di index oleh mesin pencari,sama halnya dengan kebohongan.Pelajaran Blog

Dengan ter index mesin pencari,kemungkinan situs kita akan di lihat oleh seluruh orang di dunia ini akan semakin besar.Banyak kami jumpai blog yang bagus,namun kurang optimalnya kiat dalam peng index an.

Dibawah ini salah satu langkah peletakkan meta tags agar ter index mesin pencari :

Kode ini cukup anda letakkan di bawah kode <head>.
<meta content='nama anda' name='Author'/>
<meta content='Tulis Diskripsi Blog' name='description'/>
<meta content='Tulis Kata Kunci Blog' name='keywords'/>
<meta content='follow, all' name='robots'/>



Atau jika anda ingin menambah meta yang lain,coba kunjungi disini
Anda juga bisa menggunakan langkah-langkah SEO ala boland
Adapun langkah-langkahnya,anda simak di bawah ini : Pelajaran Blog
  • Gunakan nama blog yang tidak terlalu panjang.
  • Gunakan kode <h1> pada awal artikel.
  • Jika anda meletakkan gambar jangan lupa tuliskan kode alt="nama blog
    anda
    " .(contoh : <img src="http://bla-bla-bla.jpg"alt="nama
    blog anda">
  • Tambahkan URL anda ke Altavista,Alltheweb,MSN,Yahoo dan submitter yang lain.
  • Perbanyak teman blog untuk memasang Link blog kita.
  • Berkomentarlah di kotak komentar sebuah blog yang sudah cukup terkenal.
  • Buatlah Blogroll blog-blog terkemuka.
  • Jika perlu ngemis blogger lain untuk me link kan link kita.
  • Chatting,lampirkan alamat blog kamu,karena semakin jauh jangkauan IP
    seorang pengunjung,akan meningkatkan PageRank kita.
  • Buatlah SiteMap
  • Update selalu.
  • Berikan tanda Bold / Huruf tebal pada setiap kata yang berkaitan dengan
    nama blog anda.

Semoga,langkah-langkah diatas sedikit bisa membantu anda agar ter index oleh mesin pencari.Pelajaran Blog

Hidup SEO ! !
Pelajaran Blog
    Untuk kesekian kalinya,Pelajaran Blog,akan merepotkan lagi.
Ya,karena mungkin pusing akan penjabaranya,CSS,pengertian CSS,anda bisa baca disini.
Tapi,Pelajaran Blog,nggak mau dong dibilang nggak modal lagi,he..he..
Contoh simple sebuah CSS,anda bisa lihat ilustrasi di bawah ini:

Jika dengan HTML,saya menuliskan sebuah kalimat:
Maka saya akan menuliskan kode:
<font-size="12px";font-family="arial"><b>Apa itu CSS?</b></font>

Tapi dengan CSS,kita bisa menghemat penerapan kode,hanya dengan mengatur atribut kalimat yang akan kita tulis,di bagian atas kode <HEAD>,pada halaman HTML anda.

Contoh,tulisan Apa itu CSS? di atas,akan saya tulis memakai CSS.
Pertama,saya meletakkan kode ini di atas kode <Head> pada halaman HTML saya.

<style type='text/css'>
#Contoh {
color:black;
font-size:12px;
font-weight: bold;
font-family: arial;
}
</style>


Setelah itu,saya menuliskan kode di bawah ini sesudah kode <Head>
<script type='text/javascript'/>
<div id="Contoh">
Apa Itu CSS?
</div>


Hasilnya akan seperti ini :

Apa Itu CSS?
Sama khan ?Nah itu penjelasan dikit tentang CSS.
Kurang Jelas,anda bisa pelajari CSS di http://learn-css-tutorial.com/.

Baca Juga Yang Ini..


Blog,kalau menurut saya sih ibarat rumah,bahkan ibarat sebuah pulau.
Dimana,orang akan lebih senang berkunjung,jika pada rumah / pulau tersebut menyediakan apa yang mereka inginkan.
Dengan Blog pula,kita mempunyai sebuah rumah tempat tinggal dalam dunia maya.
Dimana,kita bebas mengekspresikan maupun memfermak Blog sesuka hati kita.
Semakin cantik dan uptudate suatu Blog,traffic maupun pengunjung,akan semakin meningkat.

Blog/web yang baik biasanya mempunyai kriteria-kriteria tertentu,seperti adanya Header,body,sidebar,footer.
Jadi satu halaman sebuah Blog yang baik terdiri dari kriteria-kriteria di atas.
Sebagai gambaran lihat ilustrasi di bawah ini:

Tentang Blog
Di ibaratkan ilustrasi di atas,sebuah Blog mempunyai fitur-fitur itu semua.
Skema Blog,anda bisa lihat contoh di bawah ini :


Apa pengertian Blog?

Maksudnya?
Ya,secara fisik sebuah Blog terdiri dari :
Header(kepala),Body(Isi Blog),Sidebar(lengan/sisi),Footer(bawah).

Adapun jika ada fitur-fitur lain,itu hanya sebagai element tambahan.


Bagaimana membuat sebuah Blog?

Blog,bisa kita ciptakan melalui jasa web penyedia blog,seperti;Blogger,Wordpress,Multiply dll.
Di pelajaran-blog.blogspot.com memang mempelajari khusus Blog dari Blogger/Blogspot.

Apa yang harus di kuasai untuk bisa mengedit sebuah Blog?

Di blogspot,sudah ada versi WYSWYG yang mana kita tidak perlu capek menuliskan kode untuk sebuah blog.Tapi jika anda menguasai HTML,CSS,PHP maupun Javascript akan lebih baik lagi.
Untuk HTML,CSS,PHP maupun Javascript ,kita akan bicarakan nanti.

Jika kita sudah mempunyai Blog?apa yang harus kita lakukan?

Memposting artikel pada Blog? maupun upload foto ataupun Video,ajang narsis,kumpul sesama Blogger menjalin silaturahmi,curhat,dll.Keuntungan lain yaitu,dengan kita mempunyai sebuah Blog,ibarat kita sudah mempunyai sebuah rumah,dan di rumah itu,kita bebas mau mananam apaun itu tanamanya.
Maksudnya,kita bisa meletakkan sebuah kode,baik itu kode tukar link,iklan dll.

Banyak penyedia content yang menawarkan kode iklan (AdSense,Text Link-Ads,AdBrite,dll)untuk memasang iklan pada suatu Blog,yang akan membayar kita jika ada pengunjung yang mengklik iklan yang kita tampilkan.

Apa sich keuntungan Materi dari banyaknya pengunjung pada Blog kita?

Ya,jelas..dengan bayaknya pengunjung,kemungkinan iklan kita dilihat orang juga akan semakin besar,dan akan semakin besar pula tambahan doku ke kantong kita.

Have u create a Blog?

Kalau pengertian Javascript menurut Pelajaran Blog,yaitu kode yang mempunyai tugas unruk membedakan suatu variable.keliatanya sich kaya gitu..Pelajaran Blog
Secara umum kode ini akan menjalankan suatu tugas yang mana kode ini sangatlah "sensitive",
Maksudnya? Lain seperti HTML yang tidak terpengaruh adanya tulisan <b> dan </b> (tanda "/" pada kode).
Javascript,tidak mempunyai tolerant dengan kode seperti diatas,contoh lain; penulisan kata "var" tidak bisa ditulis "VAR" maupun "Var".
Jika anda pusing seperti habis kena angin Puting Beliung Pelajaran Blog,karena baca arttikel ini,
ya dech...di bawah ini hasil pengertian Javascript oleh boland capzlock
 Pelajaran Blog

"JavaScript adalah bahasa pemrograman yang khusus untuk halaman web agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa pemrograman berorientasi objek, sedangkan Script adalah serangkaian instruksi program.
Hal-Hal Yang Harus DiperhatikanAda beberapa hal yang harus diperhatikan dalam pengelolaan pemrograman JavaScript, diantaranya JavaScript adalah �case sensitive�, yang artinya JavaScript membedakan huruf besar dan huruf kecil, Jika Anda pernah belajar bahasa pemrograman seperti Turbo C atau C++, maka sama seperti bahasa pemrograman tersebut, dimana huruf T tidak sama dengan huruf t. Dalam bahasa pemrograman JavaScript juga, sebagai contoh fungsi perintah var tidak boleh ditulis Var dan juga tidak boleh ditulis VAR (huruf besar semua), yang benar adalah var (huruf kecil semua). Perintah lain adalah new Date tidak boleh ditulis new date (huruf kecil semua), dan banyak yang lainnya
."

Gimana?sudah lebih jelas? Pelajaran Blog
Nah contoh javascript bisa anda lihat seperti hasil postingan dari :


Sebagai contoh KLIK DI SINI. Source script-nya DOWNLOAD DI SINI
Postingan ga modal,he...Pelajaran BlogPelajaran Blog
Semoga,penjelasan yang sedikit Njlimet ini bisa diterima,Amin !! Pelajaran Blog
CSS singkatan dari Cascading Style Sheet adalah sebuah dokument yang digunakan untuk mendesain atau mengatur tampilan tata letak sebuah halaman web, CSS ini bersifat embeded pada tag HTML yang artinya menempel atau melekat pada tag HTML. Sebagai Contoh embeded seperti di bawah ini <h1 class=�header�>Pengantar</h1>.
Dengan CSS ini, kita bisa mengontrol/mengatur seluruh tampilan halaman web dengan hanya sebuah dokument CSS, biasan ekstensi untuk file CSS adalah .css (dot css).
Selain itu, CSS juga dapat menggantikan fungsi tabel dan dapat meminimalkan ukuran file HTML. Bayangkan jika Anda membuat sebuah kotak dengan tabel dan CSS jauh lebih efesien, Sebagai contoh, Anda membuat sebuah tabel dengan satu kolom dan satu buah baris :
Dengan Tabel :
<table border=�0? cellpadding=�0? cellspacing=�0?>
<tr>
<td>
Content Box
</td>
</tr>
</table>
Dengan CSS :
<div class=�box�>
Content Box
</div>
Pada perkembangannya CSS sudah masuk lelvel 3 untuk sekarang, dimana dimulai CSS level 1 atau yang sering di sebut CSS aja, kemudian level 2 yang merupakan penyempurnaan dari CSS level sebelumnya, yaitu CSS level 1.
CSS merupakan alternatif bahasa pemrograman web masa yang akan datang, dimana mempunyai banyak keuntungan, diantaranya :
- Ukuran file lebih kecil
- Load file lebih cepat
- Dapat berkolaborasi dengan JavaScript
- Pasangan setia XHTML
- Menghemat pekerjaan tentunya, dimana hanya membuat 1 halaman CSS.
- Mudah mengganti-ganti tampilan dengan hanya merubah file CSS nya saja.
- Dan banyak lagi yang lainnya.
HTML singkatan dari Hyper Text Markup Language,dalam arti umum,sebuah web adalah sebuah dokumen HTML,yang mana sebuah HTML itu sendiri merupakan bahasa yang menggunakaan tanda-tanda tertentu(Tag)untuk menyatakan kode-kode yang harus diterjemahkan oleh Browser,agar halaman dapat di tampilkan secara benar.Kursus htmlHTML sendiri,sebenarnya hanya dokument biasa,hanya dokumen ini dapat dilakukan untuk pemformatan text,peletakan object,maupun Hypertext yakni text yang berfungsi ganda sebagai penghubung (Link)antara halaman satu dengan yang lain.
Nah!link inilah yang menjadi ciri sekaligus membentuk suatu www (Jaringan global antar text / halaman)

Bagaimana contoh sederhana bentuk sebuah halaman HTML?
Sebagaimana Pengertian Blog pada posting pelajaran-blog.blogspot.com beberapa waktu lalu,bahwa sebuah halaman web yang baik,secara fisik akan terdiri dari sebuah Header,Body,Sidebar dan Footer.
Untuk membentuk sebuah halaman HTML secara sederhana,kita memanfaatkan Notepad pada komputer anda.
Tapi sebelum itu,pergi ke My Document,pilih Folder Option,lalu pilih View,kosongkan check box pada Hide Extentions for Known Filetypes,inihanya untuk memperlihatkan File type dari setiap file di komputer anda.
Setelah itu,buka Notepad dan tuliskan kode di bawah ini : tentang html mania

<html><head>
<title>Belajar HTML</title>
</head>
<body>
<p>Hallo! aku sedang belajar blog di Pelajaran Blog !</p>
</body>
</html>
Setelah itu simpan dengan nama "belajar",yang nantinya di komputer anda akan menjadi "belajar.txt",setelah itu,klik kanan file tersebut pilih Rename rubah menjadi "belajar.htm".
Setelah itu,Open file tersebut,dan anda sudah bisa melihat suatu tampilan halaman HTML yang di maksud.belajar html
Apa keterangan dari kode-kode di atas?

Kode HTML,dalam setiap kodenya di awali dengan tanda <> dan di akhiri dengan </>
contoh:
<html>merupakan penandaan bahwa halaman HTML di mulai.
</html>merupakan tanda bahwa halaman html ditutup.
<Head>artinya merupakan awal kepala
</Head>artinya merupakan akhir bagian kepala.
<Title>menujukkan judul yang akan keluar pada Bar atas yang ditutup dengan </title>
<body>isi dari halaman tesebut,seperti contoh HTML diatas,isinya berupa kata "Hallo! aku sedang belajar blog di Pelajaran Blog !"yang ditutup dengan akhir isi halaman,yaitu </body>
Sedangkan tanda <p> yaitu pembentukan alinea baru,seperti halnya anda menekan Enter pada Ms Word untuk membentuk kursor baru pada Alinea baru,yang mana diakhiri pula dengan tanda </p>.
Untuk membentuk alinea baru bisa juga menggunakan kode <br> dan diakhiri dengan </br>
Gimana? masih kurang jelas?untuk kode-kode pengoptimalan,seperti mempertebal huruf,miring,garis bawah,membuat tabel dan lain-lain silahkan kunjungi di sini.html tutorialHtml itu apa ya?
Desain blog yang kita gunakan baik di BlogSPOT atau BloGGeR, WordPRESS dan BlogDETIK serta Blog-blogyang lain sebenarnya tersusun atas beberapa elemen blog yang pada intinya terdiri atas :
  1. Header-Wrapper/Header : Bagian teratas blog di bawah Navbar).
  2. Main-Wrapper : Terletak di bagian tengah (tempat posting). Pada Main Wrapper.
  3. Crosscoll-Wrapper : Tidak semua desain blog menggunakan crosscoll-wrapper. Posisinya terletak di antara header dan Content-Wrapper, dimana content-wrapper sendiri melingkupi (wadah dari) Main-Wrapper dan sekaligus Sidebar-Wrapper.
  4. Sidebar-Wrapper atau Sidebar : Terletak di samping kanan atau kiri blog (template 2 kolom)  atau di kedua sisi kanan dan kiri (template 3 kolom).
  5. Footer : Terletak di bagian terbawah blog.
Pada setiap elemen blog sebenarnya mempunyai fungsi tersendiri, namun meskipun demikian elemen tersebut dapat juga digunakan untuk membangun sebuah fungsi/fasilitas pelengkap blog yang sama. Fungsi  elemen sendiri adalah sebagai tempat untuk menambahkan sebuah widget baru yang di lakukan melalui �Page Elemen/Elemen Laman�. Widget ini sangat variatif sekali dan terbagi menjadi dua :

  1. Widget bawaan blog yang secara langsung bisa kita tambahkan di blog tanpa kita perlu melakukan perubahan apaun terhadap widget tersebut (perubahan kode HTML, javascript atau kode CSS). Widget seperti ini antara situs penyedia blog yang satu dengan yang lain tidak terlalu banyak berbeda. Beberapa widget yang umumnya tersedia misalnya : Categories, Label, Follower, Image, Gallery dan beberapa widget yang lain.
  2. Widget baru yang ditambahkan dengan menggunakan kode html, javascript  dan kode CSS yang berasal dari luar. Widget seperti ini tersedia dibanyak situs penyedia widget (gratis dan berbayar) atau bisa dibuat sendiri dengan membuat desain menggunakan kode html dan javascript serta kode CSS. Contoh widget : Menu, Image Effects, Tooltip Animasi, Visitor Counter, Tag Cloud dan banyak lagi yang lain.
Elemen baru yang ditambahkan di BlogSPOT sebenarnya sudah tersedia dan kita tinggal membuat supaya elemen tersebut diperlihatkan sehingga bisa digunakan sebagai sarana penambahan widget. Dari beberapa elemen yang ada, yang perlu ditambahkan adalah elemen di bagian header dan main wrapper yang memang belum diperlihatkan ketika kita membuka �Page Element/Elemen Laman� (ditandai dengan kolom bergaris putus-putus dengan tulisan Add Gadget atau Tambah Gadget). Meskipun demikian, kita akan membahas secara keseluruhan cara membuat penambahan elemen tersebut.
Cara membuat Elemen Baru di Eelemen Laman (Page Element) BlogSPOT-BloGGER
  1. Login to BloGGeR (Login ke BloGGeR) : Tuliskan �User Name/Email Address� kemudian tuliskan �Password (Sandi)�.
  2. Dasboard (Dasbor) : Merupakan halaman pertama kita jumpai setelah login. Pada halaman Dasbor terdapat beberapa link  seperti Tata Letak/Rancangan (Layout), Posting, Pengaturan (Editting), Edit Entri dan Entri Baru (New Entry). KLIK link Tata Letak (Layout).
  3. Layout (Tata Letak/Rancangan) : Yang kita jumpai di bagian kita jumpai stelah langkah di atas adalah �Page Elemen atau Elemen Laman� yang merupakan sebuah bagian dari �Tata Letak (Layout)�. KLIK link �Edit HTML
  4. Setelah sampai tahap ini akan terlihat kode HTML penyusun blog (Desain dasar blog). Amankan (Back-up) template terlebih dahulu supaya seandainya ada kesalahan atau kerusakan desain blog yang disebabkan kesalahan pemasangan kode atau penulisan kode, template sebelum perubahan bisa kembali digunakan. Untuk mengetahui cara back-up template silahkan . Selanjutnya kita akan masuk per bagian yang akan ditambahkan elemen baru dengan mencari terlebih dahulu satu-persatu kode HTML yang akan di rubah untuk menciptakan pertambahan/memunculkan elemen. Untuk memudahkan saat mencari kode, silahkan lihat panduannya dengan cara .
Elemen Baru di Header Blog (bagian blog teratas):
  1. Cari Kode :
    <b:section class='header' id='header'
  2. Pada kode di atas setelah id=�header� biasanya terdapat kode lain yang mengikuti seperti : �maxwidgets=�1' showaddelement=�no�>�. Jika tidak ada tidak menjadi masalah, yang penting seluruh bagian kode html pada point pertama di atas, gantilah dengan kode html baru sebagai berikut :
    <b:section class='header' id='header'  showaddelement='yes'>
  3. Catatan : Seandainya di template sampeyan kode ditulis dalam bentuk berbeda, misalnya ada penambahan �wrapper�, sesuaikan juga kode yang digunakan sebagai pengganti sehingga akan pas buat templatenya.

Elemen Baru di Main-Wrapper (di atas halaman posting):

  1. Cari Kode :
    <b:section class='main' id='main'
  2. Pada kode di atas setelah id=�main� biasanya terdapat kode lain yang mengikuti seperti : � showaddelement=�no�>�. Jika ada sedikit perbedaan kode html seperti contoh di bagian atas (header), sesuaikan juga penulisan kodenya. Ganti kode html-nya dengan kode html di bawah ini :
    <b:section class='main' id='main' showaddelement='yes'>
Elemen Baru di footer (di bagian terbawah blog/template):
  1. Cari Kode :
    <b:section class='footer' id='footer'
  2. Pada kode di atas setelah id=�main� Biasanya pada bagian footer sudah ditampilkan sebuah elemen dengan tanda detelah kode di atas tidak ada penambahan kode html yang lain. Biasanya kode di atas langsung ditutup dengan kode > (kurung tutup). Jika memang belum ada elemennya gunakan kode baru sebagai berikut :
    <b:section class='footer' id='footer'>
Sidebar (di samping kanan atau kiri atau kedua sisi kanan-kiri) :
Di sidebar biasanya pasti sudah ada elemennya sehingga tidak perlu dilakukan perubahan dalam bentuk apapun.
Crosscol Wrapper (di antara header dan ruang posting) :
  1. Tidak semua blog menggunakan Crosscol Wrapper. Bila ingin menambahkan elemen baru Crosscol, harus dilakukan penambahan kode baru sebagai berikut :
    <div id='crosscol-wrapper'>
    <b:section class='crosscol' id='crosscol'/>
    </div>
  2. Letakkan kode di atas di bawah kode html seperti terlihat di bawah ini :
    <div id='content-wrapper'>
  3. Apabila kode di atas tidak ada dan sampeyan tetap ingin menambahkan elemen baru di posisi tersebut, maka tambahkan kode html secara lengkap seperti di bawah ini :
    <div id='content-wrapper'>
    <div id='crosscol-wrapper'>
    <b:section class='crosscol' id='crosscol'/>
    </div>
  4. Lanjutkan dengan menambah tag penutup </div> di atas kode :
    <div id='footer-wrapper'>


@jerukeriput. Powered by Blogger.
blogwalking.. Selamat datang di blog saya.