Internet Beritaku: Blog
Home Blog
Tampilkan postingan dengan label Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Blog. Tampilkan semua postingan

Sabtu, 13 Agustus 2011

Agar Blog Terindeks GOOGLE (Mesin Pencari)

      Comment   
Awal-awal saya membuat blog tidak mengerti apa yang harus saya lakukan agar blog saya bisa dilihat pengnjung melalui Search Engine, sudah capek buat artikel yang keren-keren tapi itu menjadi sia-sia  jika tidak ada yang membacanya……Bagi yang awam sepeti saya dulu sih tidak tau caranya agar terindeks search engine. Namun tidak asing lagi para blogger mengenai ini. Ini hanya menjelaskan ulang saja cara agar blog terindeks Search Enggine (Google) :
  • Masuk di Sini
  • Maka akan menuju pada jendela baru
  • Isi URL dengan Url Blog sobat (Misalnya: http://ilmu27.blogspot.com)
  • Isi Comments dengan keyboard yang berhubungan dengan blog sobat (Misalnya: tutorial blog)
  • Isikan Kotak dengan teks Verifikasi yang telah disediakan
  • Terakhir klik ADD URL
  • Sukses akan tampil “Thank you !”
Jika selesai blog anda akan terindeks  secara otomatis oleh google bisa memakan waktu berhari ataupun berminggu, silahkan cek blog anda di google dengan menulis kata kunci Url blog sobat (Misalnya : ilmu27.blogspot.com) , jika blog anda telah terindeks maka akan ditampilkan di halaman google….
Semoga bermanfaat….

Kamis, 11 Agustus 2011

Cara Membuat Tabel di Blog

      Comment   
Mungkin sobat-sobat masih ada yang belum tau membuat tabel di blog, mungkin juga sudah ada yang tau..... , mudah-mudahan sudah tau semuanya....hehehehe. Tabel terdiri baris dan kolom yang didalamnya terdapat tulisan.......sudah betul tidak penjelsan saya,,, kalau tidak jelas silahkan cari pengertiannya yaaaaa!!!!!
Saya tidak memberikan penjelsan secara detail mengenai tabel...saya hanya langsung kepada intinya....sobat tinggal modifikasi sesuai keinginannya , berikut contoh kode HTML dalam membuat tabel :

  • Tabel tunggal :
<table width="200" border="1">
<tr>
<td>

Ilmu27

</td>
</tr>
<table>

Ilmu27

  • Tabel tunggal menggunakan align= Center
<table width="200" border="1">
<tr>
<td align="center">

ilmu27

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

ilmu27

  • Tabel dengan garis tebal dengan menambah nilai border menjadi 10
<table width="200" border="10">
<tr>
<td align="center">

ilmu27

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


ilmu27

  • Tabel dua kolom , tinggal menambah saja kode htmlnya seperti berikut :
<table width="300" border="9">
<tr>
<td align="center">

ilmu27 kolom 1

</td>
<td align="center">

ilmu27 kolom 2

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

ilmu27 kolom 1 ilmu27 kolom 2

  • Tabel dua kolom dan dua baris , kodenya seperti berikut :
<table width="300" border="1">
<tr>
<td align="center">

ilmu27

</td>
<td align="center">

baris 1

</td>
</tr>
<tr>
<td align="center">

ilmu27

</td>
<td align="center">

baris 2

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


ilmu27 baris 1
ilmu27 baris 2

  • Tabel dengan memberikan warna pada backgroundnya , dengan menambah kode bgcolor="kode warna" berikut contohnya :
<table width="300" border="1" >
<td align="center" bgcolor="green">

ilmu27

</td>
<td align="center" bgcolor="red">

baris 1

</td>
</tr>
<tr>
<td align="center" bgcolor="yellow">

ilmu27

</td>
<td align="center" bgcolor="green">

baris 2

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


ilmu27 baris 1
ilmu27 baris 2

  • Tabel ini didalamnya terdapat fungsi caption dan TH (tabel header) :
<table align="left" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" >
<caption align="top">Tabel 1.1</caption>
<tr bgcolor="fuchsia">
<th colspan="2">Data Karyawan</th>
</tr>
<tr bgcolor="red">
<th>No.</th>
<th>Nama</th>
</tr>
<tr bgcolor="green">
<td>1.</td>
<td>illank</td>
</tr>
<tr bgcolor="red">
<td>2.</td>
<td>ilmu27</td>
</tr>
<tr bgcolor="blue">
<td>3.</td>
<td>gombel</td>
</tr>
</table>


Tabel 1.1
Data Karyawan
No. Nama
1. illank
2. ilmu27
3. gombel









  • Menyimpan gambar didalam tabel agar lebih rapi :
<table width="300" border="1"cellpadding="20">
<tr>
<td align="center">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieGdtiLqqhfpsME-V5knUgn7q-RZKnf5ZoA_NWOxTCRDjRhwRHyZMz6ymQzh-apqkKeXn6uJIIMGVGzcA0cX9Mctju1Jirbz5EkLkwPawbi3SmgmP6kCHD1-lUD5KHkArJ6YXbESgbXzM/s220/illank.png"/>

</td>
<td align="center">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieGdtiLqqhfpsME-V5knUgn7q-RZKnf5ZoA_NWOxTCRDjRhwRHyZMz6ymQzh-apqkKeXn6uJIIMGVGzcA0cX9Mctju1Jirbz5EkLkwPawbi3SmgmP6kCHD1-lUD5KHkArJ6YXbESgbXzM/s220/illank.png"/>

</td>
</tr>
<tr>
<td align="center">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieGdtiLqqhfpsME-V5knUgn7q-RZKnf5ZoA_NWOxTCRDjRhwRHyZMz6ymQzh-apqkKeXn6uJIIMGVGzcA0cX9Mctju1Jirbz5EkLkwPawbi3SmgmP6kCHD1-lUD5KHkArJ6YXbESgbXzM/s220/illank.png"/>

</td>
<td align="center">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieGdtiLqqhfpsME-V5knUgn7q-RZKnf5ZoA_NWOxTCRDjRhwRHyZMz6ymQzh-apqkKeXn6uJIIMGVGzcA0cX9Mctju1Jirbz5EkLkwPawbi3SmgmP6kCHD1-lUD5KHkArJ6YXbESgbXzM/s220/illank.png"/>

</td>
</tr>
</table>
  • Jika ingin menghilangkan garis tabel ganti border="0"
Sampai disini dulu yachh tutorialnya......!!!!! .................nagntuk soalnya lagi puasa........

Rabu, 10 Agustus 2011

Membuat Top Comments di blog

      1 comment   
Pasti sudah tau apa itu comments atau komentar bukan??? disini saya akan bahas mengenai top comments di blog artinya jika ada berkomentar di postingan anda diblog maka script ini akan memproses kalau ada yang berkomentar diblog anda, sehingga kita bisa melihat siapa yang berkomentar.....komentar yang terbaru akan tampil pada posisi teratas....mau tau caranya silahkan lihat langkah-langkah berikut :

  • Login ke blog akun anda misalnya : blogger.com
  • Masuk Ke menu Rancangan > Elemen laman >Tambah gadget
  • Lalu klik tambah gadget atau Add Gadgets
  • Pilih HTML/Java Script dengan cara mengklik tanda plus + yang ada disebelah kanan logo HTML / Java Script
  • Copy paste code dibawah ini :

<!--Top Comments-->
<span style="text-shadow:2px 2px 2px #adadad">
Top 10 Commentators
:</span>
<script type="text/javascript">
function pipeCallback(obj) {
document.write("<>");
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "" + "<a href=" + href + " target='_blank'>" + obj.value.items[i].title + "</a> | ";
document.write(item);
}
document.write("<>");
}
</script>
<script src="
http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback
 &
_id=a55cb97ebb368bb1b89b7f6bdeb35336&filter=
Blog Ilmu27 &url=http%3A%2F%2F
ilmu27.blogspot.com
&num=
20
 " type="text/javascript"></script>
<!-- End Top Comments-->


  • Dont forget SAVE
Catatan : tulisan yang berwarna Hijau atau Green ganti sesuai keinginan sobat.....Misalnya : Blog Ilmu27 (bisa anda ganti dengan nama penulis "admin" agar nama admin nga muncul),
ilmu27.blogspot.com
 (ganti dengan URL blog sobat),
20
(sesauikan dengan selera sobat berapa jumlah komentar yang ingin ditampilkan)....









Salam blogger.....






Menyisipkan Label atau Kategori di Blog

      Comment   
Jika fasilitas label ini diterapkan pada halaman blog seolah-olah blog kita terdiri dari beberapa kategori, Misalnya bisa jadi ad kategori Kesehatan, blog, buku , registry, tips dan trik windows dan lain sebagainya, sehingga akan mempermudah dalam pencarian naskah atau artikel pada blog .....hemmmmm terlalu panjang lebar sobat...langsung saja ke cara pembuatanya :

  • Lagi-lagi login ke blog saudara
  • Ke Rancangan > Elemen laman
  • Tambah gadget , pilih label dengan klik tanda plus +

labelilmu27.JPG

  • Kemudian akan muncul jendela baru , sesuaikan dengan configurasi yang sesuai kemauan sobat.....
  • Anda bisa ganti judul gadgetnya misalnya Kategori....
  • Tinggal di SAVE jadi dechhhh....sangat mudah sekali.......

Jaya blogger Indonesia.....

Cara Membuat Tag Cloud atau Label Animasi

      2 comments   
Sobat tau kan label yang ada diblog, hampir mirip dengan kategori .... yang memudahkan kita mencari artikel-artikel,,,,,tapi yang satu ini adalah label animasi yang akan kita buat sehingga blog kita lebih keren....nga kaku gitu ....kwkwkwkwkw.........Jika pengen membuat tag cloud-Nya langsung saja ikuti langkah-lagkah berikut :tagcloudilmu27.JPG

  • Masuk Ke akun blogger > Rancangan > Elemen Laman > tambah gadget
  • Pilih HTML/Java Script dengan mengklik tanda (+)


labelilmu27.JPG

  • Masukkan script dibawah ini atau langsung saja di copy paste :

<div align="center">
<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js'
type='text/javascript'></script>
<div id='flashcontent'>pendiari</div>
<script type='text/javascript'>
var so = new
SWFObject('http://www.swfcabin.com/swf-files/1275932799.swf', 'tagcloud',
'180', '220', '7', '#343664');
so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0xfbfe01");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "200");
so.addVariable("hicolor", "0xffffff");
so.addVariable("tagcloud", "<tags><a href='URL Label1' color='0xcab000' style='14'>Judul Label1</a><a href='URL Label2' color='0xff0000' style='12'>Judul Label2</a><a href='URL Label3' color='0x00ff0c' style='14'>Judul Label3</a><a href='URL Label4' color='0x00f0ff' style='18'>Judul Label4</a><a href='URL Label5' color='0xf6ff00' style='14'>Judul Label5</a><a href='URL Label6' color='0xf0a8ff' style='16'>Judul Label7</a><a href='URL Label7' color='0xae00ff' style='14'>Judul Label7</a></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script><br />
</div>

Catatan :


  • 180 = Width (lebal tag cloud)

  • 220 = Heigth (tinggi tag cloud)
  • 200 = Speed (kecepatan memutar)
  • 'URL Label = Ganti dengan URL label sobat
  • Judul Label = Judul Label tersebut




Di Save aja Html/java scriptnya sobat ....semoga bermanfaat.....

Membuat Daftar Isi Blog

      Comment   
Mungkin sobat pernah membuat daftar isi yang manual-manual saja!!!! Namanya manual pasti tidak efektif, tergantung anda yang menilai , pastinya memakan waktu yang cukup lama. Postingan aku kali ini adalah membuat daftar isi yang nantinya akan tersusun secara otomatis dari semua artikel-atikel yang telah sobat masukkan ke blog......

Untuk cara buatnya silahkan ikuti langkah berikut ini :

LANGKAH 1 :

  • Login ke akun blog
  • Masuk ke Rancangan > Edit HTML (saran : download template anda , untuk mengatasi ketika terjadi kesalahan modifikasi template)
  • Centang Expand .....
  • Tekan di keyboard sobat CTRL+F
  • Masukkan kata kunci ]]></b:skin>
  • Copy paste script CSS dibawah ini tepat diatas kode yang tadi :
#toc { border: 0px solid #000000; background: #ffffff; padding:2px; width:495px; margin-top:10px;}
.toc-header-col1, .toc-header-col2,
.toc-header-col3 { background: #B5CBFA; color: #000000; padding-left: 5px; width:250px;}
.toc-header-col2 { width:75px;}
.toc-header-col3 { width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited,
.toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link,
.toc-header-col3 a:visited { font-size:100%; text-decoration:none;}
.toc-header-col1 a:hover,
.toc-header-col2 a:hover,
.toc-header-col3 a:hover { font-size:100%; text-decoration:underline; color:#3D3F44;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:100%; background:#f0f0f0;

  • Lalu di SAVE templatenya

LANGKAH 2 :


  • Masuk lagi ke Elemen Laman (Page Elements)
  • Klik link tambah gadget pilih HTML/Java Script
  • Copy paste kode berikut :

<div id="toc"></div>
<div id="toclink"><a href="javascript:showToc();"><img src="http://ilmu27blogger.googlecode.com/files/folder.gif"/>
&nbsp;&nbsp;Lihat Daftar Isi !</a><br/><br/></div>
<script style="text/javascript" src="http://ilmu27blogger.googlecode.com/files/daftarisi.js">
</script><script src="http:// NAMA BLOG ANDA .blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
  • Jika selesai tinggal di SAVE
  • Jika berhasil maka akan seperti ini sobat !!!!




Semoga bermanfaaat.....

Selasa, 09 Agustus 2011

Cara Membuat Read More Otomatis + Icon

      4 comments   
Baca Selanjutnya (read more) tidak asing lagi para blogger,,,iya kan!!!! saat ini banyak tutorial mengenai ini tinggal search di mesin pencari pasti dapat......ngomong-ngomong nga ada salahnya kan shared lagi mengenai readmore otomatis......sapa tau masih ada yang membutuhkannya lagi berhubung masih banyak yang belum tau.....



Ikuti langkah berikut untuk membuatnya :

  • Login ke blog
  • Masuk ke Rancangan > Edit HTML (sebaiknya download full template untuk jaga-jaga terjadi kesalahan modifikasi template
  • Centang Expand....
  • Cari kode </head> dengan menekan kyboard CTRL+F
  • Copy kode script dibawah ini dengan meletakkan dibawah kode </head> :
<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://ilmu27blogger.googlecode.com/files/readmore-otomatis.js ' type='text/javascript'/>

Keterangan :
430 = tinggi artikel terpenggal tanpa image
340 = tinggi artikel terpenggal dengan image

  • Kemudian cari kode <data:post.body/> atau <p><data:post.body/></p> setelah ketemu ganti dengan script dibawah :
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;<img src="http://i1089.photobucket.com/albums/i353/illankjie/readmore.jpg" />a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
Keterangan :

  : http://i1089.photobucket.com/albums/i353/illankjie/readmore-1.gif

 : http://i1089.photobucket.com/albums/i353/illankjie/readmore.jpg

  • Tinggal Di SAVE templatenya...

Semoga bermanfaaat..........................

Mengganti Posting Baru ; Posting Lama ; Home Dengan Icon

      2 comments   
Aku posting lagi nichh,,,soalnya lagi santai-santai......kwkwkwkwkw......aku mau bagi cara mengganti Posting Baru, Posting Lama dan Beranda yang berada tepat di bawah posting blog sobat-sobatku. keren kan kalu kelihatan icon dari pada tulisan kan lebih rapi,,,kayak pegawai bankkk..hihhihihiikkkkk....Seperti Nichhh contohnya :



ilmu27berandabarulama.JPG



Langsung aja di proses pembuatannya :

  • Login ke akun Bloggger
  • Masuk ke Rancangan (layout)
  • Ke Edit HTML (Jangan Lupa download full dulu template sobat)
  • Centang Expand...
  • Untuk Mengganti Posting baru cari kode <data:newerPageTitle/> Kemudian ganti dengan kode dibawah :

<img border='0' src='http://i1089.photobucket.com/albums/i353/illankjie/Previous.png'/>


  • Untuk Mengganti Beranda cari kode <data:homeMsg/> Kemudian ganti dengan kode dibawah :

<img border='0' src='http://i1089.photobucket.com/albums/i353/illankjie/homee.png'/>


  • Untuk Mengganti Posting Lama cari kode <data:olderPageTitle/> Kemudian ganti dengan kode dibawah :

<img border='0' src='http://i1089.photobucket.com/albums/i353/illankjie/Next.png'/>


  • Untuk memudahkan pencarian kode html-nya pakai keyboard CTRL+F
  • Selesai tinggal di SAVE template-Nya

Seksess??????....

Senin, 08 Agustus 2011

Horizontal tab menu 10

      Comment   
Apaka sobat pernah liat menu seperti ini ?? atau seperti yang diblog saya ???

menu tab 10-ilmu27.JPG

Ingin mencobanya , ikuti langkah berikut :

Lankah 1 :

  • Pertama login di akun blog saudara atau disini
  • Pilih layout > Edit HTML
  • Saya sarankan download full template saudara
  • Kembali ke pembahasan masi di dalam edit html
  • Centang Expand...
  • Silahkan saudara cari ]]></b:skin> atau bisa juga dengan cara tekan CTRL+F
  • Kemudian Simpan kode berikut tepat diatas kode ]]></b:skin> :
    /*- Menu Tabs 10--------------------------- */ /*credits : http://www.exploding-boy.com */ #tabs10 { float:left; width:95%; font-size:13px; border-bottom:1px solid #2763A5; line-height:normal; } #tabs10 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs10 li { display:inline; margin:0; padding:0; } #tabs10 a { float:left; background:url("http://ilmu27blogger.googlecode.com/files/tableft10.gif") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs10 a span { float:left; display:block; background:url("http://ilmu27blogger.googlecode.com/files/tabright10.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs10 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover span { background-position:100% -42px; } #tabs10 #current a { background-position:0% -42px; } #tabs10 #current a span { background-position:100% -42px; }

  • Kemudian cari lagi kode berikut :
    <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>


  • Kemudian ganti tulisan yang berwarna merah seperti berikut :
    <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>


Lankah ke 2 :

  • Ke Page Elements/Elemen laman > Add gadget/tambah gadget

ilmu27menu.JPG

  • Pilih HTML/Java Script
  • Copy paste code berikut :
<div id="tabs10"> <!-- tabs10 begin -->
<ul>
<!-- Change the links with your own links -->
<li id="current"><a href="URL Anda"> <span> Home </span></a> </li>
<li><a href="URL Anda"<span>Tutorial Blog</span></a></li>
<li><a href="URL Anda"><span>Registry XP</span></a></li>
<li><a href="URL Anda"><span>My Blog</span></a></li>
<li><a href="URL Anda"><span>Source Code</span></a></li>
<li><a href="URL Anda"><span>Download</span></a></li>
</ul>
</div ><!-- tabs10 end -->

  • Tinggal di SAVE sobat lihat hasilnya...

Semoga bermanfaat !!! kurang jelas silahkan ke tutorial lengkapnya disini....