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

Minggu, 14 Agustus 2011

Membuat Spoiler Dengan Tombol [Buka atau Tutup] di Blog

Tau kan spoiler…merupakkan tombol yang bisa dibuka dan ditutup …ketika tombol diklik…..tehnik ini akan menghemat tempat diblog kita ….,,,,,,. Di dalam Spoiler tersebut kita bisa menyimpan widget/gadget, tulisan atau pun gambar yang anda inginkan. Mungkin ada yang bertanya susah tidak cara memasangnya diblog!! jawabannya adalah sangat musah sobat… hanya memerlukan kesabaran dan berdoa ……hehehehehe jadinya ceramah nich….\

Jadi bosan terlalu panjang lebar penjelasnnya,,,,,langsung saja ke inti pembahasannya :

  • Masuk ke blogger
  • Ke Rancangan > Elemen Laman > Tambah Gadget > Pilih HTML/Java Script
  • Masukkan Scrip Spoiler di bawah atau bisa di copy paste ke HTML/Java Scrip tadi :
<div style="margin-bottom: 2px;">
SPOILER (judul terserah sobat)

<div style="margin-top: 5px; text-align: center;"><input value="
BUKA(teserah sobat bisa juga OPEN)

" style="margin-top: 5px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = '
TUTUP

'
; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = '
BUKA

'
; }" type="button"> </div>
<div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">

SISIPKAN DISINI SCRIP SOBAT , GAMBAR ATAU TEKS YANG SOBAT INGINKAN

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

  • Di SAVE Gadgetnya
Mudah kan……

Membuat Scroll Pada Widget Archieve di Blog

Sobat mungkin sudah tau archieve pada blog, merupakan sekumpulan arsip yang tersusun mirip berdasarkan tanggal maupun tahun dan jumlah artikel yang sudah diposting namun apa yang terjadi jika postingan kita sudah mencapai ribuan artikel, sehingga akan memanjang menjulur kebawah…akan membuat kita bingung widget ini simpannya dimana!!!!!. Mungkin solusinya sehingga tidak memakan tempat banyak adalah memsang Scroll pada widget archieve itu sendiri , langsung saja kawan :


Archive


  • Login ke blog sobat
  • Pergi ke Rancangan > Edit HTML
  • Centang Expand Widget Template
  • Temukan kode seperti dibawah ini, bisa juga dengan CTRL+F untuk mencari kode ini :
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
  • Tambahkan kode seperti ini : style='overflow:auto; height:250px'
  • Maka hasilnya sperti ini :
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' style='overflow:auto; height:250px'>

<div id='ArchiveList'>
  • Simpan template sobat…..
Lihat hasilnya semoga bermanfaat…..

Sabtu, 13 Agustus 2011

Menghapus Tulisan [Langgan: Poskan Komentar (Atom)]

Jika sobat ingin menghilangkan tulisan ini di blog sobat!!!!!!!!!!!!

Langgan

Caranya :

  • Login ke akun blog sobat
  • Ke Rancangan > Edit HTML
  • Centang Expand Widget Template
  • Cari kode ini dengan menekan dikeyboard sobat CTRL+F

<b:include data='feedLinks' name='feedLinksBody'/>

  • Hapus semua kode teks yang berwarna merah diatas
  • Save template

Agar Blog Terindeks GOOGLE (Mesin Pencari)

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

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

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

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

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

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

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

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

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....

Free Widget Calender For Blog

Tak bosan-bosan kita membahas widget, agar blog kita menarik bukan??? widget yang satu ini adalah widget calender yang dibuat dari situs web beralamat http://www.free-blog-content.com menyediakan banyak variasi pilihan tampilan kalender, variasi yang disediakan antara lain kalender biasa, kalender dengan animasi, kalender berpemandangan , mobil , binatang dan lain sebagainya.....pokoknya keren dechhh....

Untuk menyisipkan kalenderb tersebut pada halaman blo anda, gunakan cara berikut :





  • Pilih jenis kalender yang anda inginkan sobat dan perhatikan dibawah kalender tersebut terlihat kode-kode HTML
  • Pilih atau sorot kode-kode yang ada didalam kotak scroll atau gunakan shorcut dengan klik kanan Select ALL (pilih semua) sehingga kode HTML akan diblok, lalu anda klik copy (salin)




  • Untuk memasang di Blog sobat, pastikan anda didalam bagian template, sobat dapat memilih Layout (rancangan)
  • Klik tab page elements (elemen laman)
  • Dilayar akan terlihat layout atau tata letak blog
  • Klik link Add Gadget (tambah gadget)




  • Pilih HTML/Java Script
  • Sekarang letakkan kode-kode HTML yang sebelumnya anda copy tadi ke box HTML/Java Script



  • Lalu SAVE 
  • Jika berhasil akan seperti contoh dibawah :





Sabtu, 06 Agustus 2011

Widget Blogger Indonesia

Coba lihat disudut halam blog saya , keren kan logo blogger indonesia-Nya...pengen coba seperti widget itu, Indonesia punya ... jaya indonesiaku jangan bosan-bosan nGeBlog......

Lansung aja cekidottt.......

  • Login ke blog akun sobat
  • Pergi Ke Rancangan (Design) > Kemudian Ke Page Elements (elemen laman) >Add gadget (tambah gadget)> Pilih HTML/Java Script dengan mengklik tanda Plus (+) yang ada disebelah kanan
  • Kemudian pilih script yang anda inginkan dibawah ini copy paste script yang berwarna biru dibawa ke HTML/Java Script tadi :



Gambar 1 : Sebelah sudut kiri atas halaman.....




<script language="JavaScript" src="http://ilmu27blogger.googlecode.com/files/ilmu27_Kiri_widget.js" type="text/javascript"></script> <script language="JavaScript" type="text/javascript"> cot("http://i1089.photobucket.com/albums/i353/illankjie/WidgetBloggerIndonesia.png") </script>




Gambar 2 : Sebelah sudut kanan atas halaman.....

<script language="JavaScript" src="http://ilmu27blogger.googlecode.com/files/ilmu27_Kanan_widget.js" type="text/javascript"></script> <script language="JavaScript" type="text/javascript"> cot("http://i1089.photobucket.com/albums/i353/illankjie/WidgetKananBloggerIndonesia.png") </script>


  • Tinggal di SAVE
Semoga bermanfaat artikel ini buat sobat-sobatq....................

Jumat, 05 Agustus 2011

Membuat Search Engine Di Blog


fghjiuiuo.JPGPasti anda sudah tau apa itu Search Engine ??? Jika belum tau search engine adalah sebuah mesin pencari yang jika kita masukan sebuah kata kunci akan banyak sekali pilhan dari kata kunci itu. Apakah ingin membuat diblog kalian. AHHH pajang niech penjelasannya jadi bosan , langsung saja ikuti langkah-langkah berikut :



  • Login ke akun blog anda jika sudah punya jika belum daftar dulu yach sobatt selagi free...
  • Kemudian pilih Layout (rancangan) > elemen laman (page elements)
  • Terus klik link Add Gadget / tambah gadget terserah anda dimana mau diletakkan gadgetnya....
  • Nanti akan muncul banyak pilihan, pilih HTML/Java Script dengan klik tanda + (plus)
  • Copy paste script berikut :
<form action="http://ilmu27.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="25" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

  • Tulisan yang berwarna merah silahkan ganti dengan nama blog saudara , sedangkan angka 25 sesuaikan saja dengan keinginan sobat, angka 25 merupakan panjang kotak box search engine, semakin tinggi angka yang anda berikan otomatis kotak box semakin panjang pula....

Mudah sekali sobatku......????? langsung saja anda peraktekkan....

Membuat Buku Tamu Yang bisa di Buka dan bisa di Tutup

fgdgd.JPGBuku tamu ini kita buat untuk menghemat tempat di halaman blog kita sobattt....Script ini akan menampilkan sebuah tombol saja, yang nantinya ketika kita click tombol tersebut (tombol buku tamu), maka akan mengeluarkan script widget yang kita sudah buat sebelumnya.......penasarankan langsung saja ini langkahnya :

  • Login Ke blogger
  • Pilih Rancangan > tambah gadget > pilih HTML/Java Script > klik tanda Plus (+)
  • Copy paste script berikut :
    <style type="text/css">
    #gb{
    position:fixed;
    top:100px;
    z-index:+1000;
    }
    * html #gb{position:relative;}
    .gbtab{
    height:100px;
    width:30px;
    float:left;
    cursor:pointer;
    }
    .gbcontent{
    float:left;
    border:2px solid #A5BD51;
    background:#F5F5F5;
    padding:2px;
    }
    </style>
    <script type="text/javascript">
    function showHideGB(){
    var gb = document.getElementById("gb");
    var w = gb.offsetWidth;
    gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
    gb.opened = !gb.opened;
    }
    function moveGB(x0, xf){
    var gb = document.getElementById("gb");
    var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    gb.style.right = x.toString() + "px";
    if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
    }
    </script>
    <div id="gb">
    <div"gbtab" onclick="showHideGB()"> </div>
    <div"gbcontent">

    Simpan disini script atau kode shoutMix chat widget....................

    </div>
    </div>
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (30-gb.offsetWidth).toString() + "px";
    </script>
    • http://i1089.photobucket.com/albums/i353/illankjie/bukutamu9-2.png bisa anda ganti gambar sesuai keinginan anda sobat, coba ganti dengan alamat gambar dibawah....
    • Simpan disini script atau kode shoutMix chat widget....................silahkan simpan script shoutmix widget yang tertulis merah diatas....jika belum punya script shoutmix bisa anda buat disini....
    • Setelah dapat script-nya paste di antara script diatas...

    -------------------------------------------------------------------------------------


    buku tamu3.png


    http://i1089.photobucket.com/albums/i353/illankjie/bukutamu3.png



    buku tamu5.png



    http://i1089.photobucket.com/albums/i353/illankjie/bukutamu5-2.png



    buku tamu9.png



    http://i1089.photobucket.com/albums/i353/illankjie/bukutamu9-2.png



    Buku Tamu 8.png



    http://i1089.photobucket.com/albums/i353/illankjie/BukuTamu8-1.png






    gustbook02.png
    http://i1089.photobucket.com/albums/i353/illankjie/gustbook02-1.png









    ----------------------------------------------------------------------

    Salam yahhh untuk semua,,,semoga berhasillll aku doa innn...............aminnnn...

    Hampir lupa di SAVE yachhh????

    Cara Membuat Iklan Melayang dengan 1 x Click Close

    Anda Mengerti kan mengenai iklan Melayan diblog , yang itu pada saat anda membuka blog akan dengan otomatis akan tampil menutupi halaman blog, jika kita akan menghilangkan iklan tersebut biasanya kita mengklik tombol x(close) 2x mengerti kan???....

    Tapi tutorial berikut adalah membuat iklan melayan dengan 1x klik maka akan keluar dari iklan itu..heheheheheh.... Langsung aja ke cara pembuatannya :
    • Login ke blogger
    • Kemudian Rancangan > Elemen Laman
    • Lalu tambah gadget / Add Gadget
    • Pilih HTML/Java Script dengan tombol tanda + (plus)
    • Maka akan muncul jendela baru , lalu copy paste kode berikut :

      <!-- ads -->
      <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://gadogadorahma.blogspot.com"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 0px; height: 0px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhVmCs6HthIDqHvRWFJ9H6CU1t18T2iaM9Zd459q8HWNo9EUYQanUvDC_HInJWQE_3VwjI2qXh-I7YPiku5xb09tQoQSW9lVbsPqV8XiOEgCqsp5j4Yza-bhuPrwdGZ1UgJKdHJnB6Ni8/s800/wa.JPG" alt="" id="witto blog" border="0" /></a>
      <style type="text/css">#gb{position:fixed;top:10px;z-index:+1000;}* html #gb{position:relative;}
      .gbcontent{float:right;border:2px solid #A5BD51;background:#ffffff;padding:10px;}</style>
      <script type="text/javascript">function showHideGB(){var gb = document.getElementById("gb");var w = gb.offsetWidth;gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);gb.opened = !gb.opened;}function moveGB(x0, xf){var gb = document.getElementById("gb");var dx = Math.abs(x0-xf) > 10 ? 5 : 1;var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir-100;gb.style.top = x.toString() + "px";if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}}</script>
      <div id="gb">
      <div"gbtab" onclick="showHideGB()"> </div>
      <div"gbcontent">
      <div style="text-align:right"><a href="javascript:showHideGB()">[X]</a></div><center>
       

      Masukkan Script Iklan Saudara Disini.........................

      </center><div style="text-align:left"><a href="http://ilmu27.blogspot.com/2011/08/cara-membuat-iklan-melayang-dengan-1-x.html">Articles</a></div><script type="text/javascript">var gb = document.getElementById("gb");gb.style.center = (20-gb.offsetWidth).toString() + "px";</script></div></div>
      <!-- ads end-->
    • Sekarang sobat ganti tulisan yang berwarna merah dengan script iklan saudara....

    Semoga berhasil sobatttt.....ku tunggu jawabannya......

    Membuat Widget Recent Post

    bnmklp.JPGMembuat widget recent post tidak begitu sulit sobat hanya memerlukan seni copy paste script HTML heheheheh..... , kemudian simpan di Gadget selesai. Widget ini berfungsi untuk menampilkan postingan baru yang telah kita buat. Sobat bisa menampilkan beberapa judul postingan tergantung keinginan kita mulai dari 1 - 10 .....dan seterusnyaaaa....


    Berikut langkah-langkahnya sobat :
    • Login dulu ke blog
    • Ke Page Elements
    • Tambah gadget > pilih HTML/Java Script
    • Kemudian Copy Paste Kode dibawah ini :
      <script src="http://sites.google.com/site/anasku2000/post-terakhir.js"></script>
      <script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
      <script src="http://ilmu27.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
      </script>

    • Lalu ganti angka yang berwana pink sesuai selera sobat 10, merupakan berapa postingan terbaru yang ingin ditampilkan
    • ilmu27.blogspot.com ganti dengan Url blog sobat...


    Bagaimana mudah kan?????

    Memasang Widget Pengunjung Yang Online Di Blog

    Seperti blog saya contohnya, coba lihat sebelah kiri atas....jika anda sendiri yang online maka akan tertera angka 1 artinya hanya anda yang online diblog itu..menarik bukan.....????langsung saja kita masuk ke pembahasannya. Disini kita menggunakan scrip yang tentunya dari Whos.Amung.Us, kenpa dengan
    whos.amung.us
    , saya gunakan untuk mengetahui pengunjung yang sedang on line?????alasannya karena whos.... sangat lengkap dengan informasi mengenai pengunjung blog kita yaitu :

    • Kita dapat dari mana pengunjung blog kita
    • Halaman yang mereka buka
    • Juga mencatat semua kegiatan diblog kita selama 5 tahun terakhir
    • Dan lain-lain

    Berikut carannya :

    • Klik langung aja yang ini Whos.Amung.Us
    • Lakukan penataan tata letak dimana sobat mau nyimpan widgetnya, mau di kiri, tengah, kanan, atas dan bawah sesuaikan aja deh......Lihat gambar dinawah:


    dfgdfgd.JPG

    • Di sana akan diberikan script seperti yang ditunjukkan panah diatas dan copy semua.......
    • Kemudian login ke Blogger
    • Klik Rancangan > Tambah gadget
    • Pilh HTML/Java Script
    • Paste code yang telah dicopy tadi
    • Jangan Lupa Di SAVE yacchhh.....

    Suksess.........................

    Menyisipkan Kotak tulisan atau gambar di Posting

    Mungkin sobat sobat sekalian pernah melihat di beberapa artikel diblog ini ... kotak yang didalamnya berisi tulisan atau gambar.....Ada tiga jenis yang biasa digunakan untuk bingkai yaitu : border, overflow/biasanya disebut kotak scroll dan textarea..

    Untuk lebih jelasnya akan dijelaskan satu persatu ..langsung saja ke TKP :


    Border :


    Border berarti bingkai yang membatasi tulisan atau gambar yang ada didalam bingkai. Jika sobat inigin membuatnya silahkan copy paste script dibawah ini :


    <div style="border: 1px solid #CCC; margin: 10px 0px; padding: 10px; width: auto; height: auto; background-color: #FBFBEE; text-align: left;">Tulisan atau Gambar</div>


    Hasilnya seperti ini :

    Tulisan atau Gambar

    Keterangan :

    • Border : 1px solid #CCC, adalah ketebalan garis tepi adalah 1px dengan warna abu abu .
    • Margin: 10px 0px, adalah margin atas bawah 10px dan margin kiri kanan 0px.
    • Padding: 10 px artinya jarak tulisan ke border adalah 10px.
    • Background color : adalah warna background kotak, kamu dapat ganti warnanya sesuai keinginan, jika ingin di hilangkan warnanya ganti kode warna #FBFBEE dengan none atau hapus saja perintah background color dan kode warnanya.
    • Text-align (rata tulisan): Dapat di ganti dengan left, right, center (rata tengah) dan justify (rata kiri kanan).

    Overflow:
    Overflow berarti tulisan yang melebihi media yang tersedia. Ada tiga perintah yang biasa digunakan dalam overflow yaitu scroll, hide dan auto.
    • Apabila scroll yang digunakan , maka tulisan yang melebihi media akan dibuatkan scroll.
    • Apabila hide yang digunakan, maka tulisan yang melebihi media akan disembunyikan.
    • Apabila auto yang digunakan, maka tulisan yang melebihi media akan dibuatkan scroll dan selebihnya akan disembunyikan.
    • Ingin membuatnya kamu tinggal copy paste script berikut ini :

    <div style="overflow: auto; border: 1px solid #CCC; margin: auto; padding: 3px; width: 95%; height: 100px; background-color: none; text-align: left;">Tulisan atau Gambar</div>

    Hasilnya seperti berikut :

    Tulisan atau Gambar


    Keterangan :


    Apabila tulisan tersebut melebihi lebar 95% dari lebar container yang tersedia dan tingginya melebihi 100px maka akan dibuatkan scroll dan sisanya akan disembunyikan.



    Semoga bermanfaat yachhhh.......aduhhh...ngantukkkk....