Tampilkan postingan dengan label Ngblogg yuk... Tampilkan semua postingan
Tampilkan postingan dengan label Ngblogg yuk... Tampilkan semua postingan

Kotak Scroll Link Sahabat

Udah lama bangget nih sob saya nggak update blog, sampe-sampe peringkat blog saya jadi turun dan sepi pengunjung, hufthh...
Kali ini saya ingin ngejelasin ke para sahabat blogger bagaimana cara membuat kotak scroll untuk link para sahabat blog kita. Caranya seperti biasa kok, cukup copas kode HTMLnya aja, berikut contoh kodeny :

<div style="overflow: auto; height: 200px; padding: 10px; border: 1px solid rgb(153, 153, 153);">
<li><a href="http://rinda-holic.blogspot.com/" target="_blank">
<img src="http://farm5.static.flickr.com/4020/4421920919_a3e6a7e730_o.png" title="Rinda&#39;s Blog" border="0" height="50" width="125" /></a></li>
</div>

Kode yang berwarna biru silahkan sobat ganti dengan link sahabat anda, selamat mencoba.. ^.^
Read More..

Membuat Text Area Link Exchange

Sebenarnya postingan ini sudah ingin saya posting dari minggu-minggu lalu, berhubung baru sempet sekarang & temen saya udah minta di postingin yoweezz deh langsung saya posting, hehee.. Langsung aja ya ke langkah-langkah cara pembuatannya, caranya mudah ko cuman copas & tidak dipungut biaya ataupun royalty, hahaa.., berikut langkah-langkah dan kode htmlnya :

- Login ke blogger.com
- Pilih Lay out
- Add Gadget, pilih HTML/JavaScript
- Terus copy deh kode HTML di bawah ini:

<div><form name="copy"><div align="center"><span><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" value="Highlight All" type="button" /> </span></div><p align="center"><textarea style="width: 150px; height: 80px;" name="txt" rows="5" wrap="VIRTUAL" cols="20"><a href="http://www.klikti.co.cc" target="_blank"><img src="http://i836.photobucket.com/albums/zz285/adektrisno/KLIKTI.gif" border="0" alt="Photobucket" /></a></textarea></p></form></div>

Kode yang saya beri warna biru tersebut sobat ganti dengan kode HTML banner sobat atau link sobat, abis itu save deh, insya Allah pasti jadi ko. Sekian dulu ya sobat tips blogging dari saya, tunggu tips blogging lainnya.
Read More..

Membuat Banner Sendiri

Sebenarnya artikel seperti ini sudah banyak dan mungkin sudah lama di posting oleh orang2 yang sudah lama bergulat di dunia pembloggeran, hehe. Tapi berhubung saya baru tahu cara tersebut jadi saya baru mencoba untuk memposting artikel ini, dan semoga artikel ini berguna untuk para blogger pemula seperti saya.. :)  Biasanya banner ini kita gunakan untuk mempromosikan blog buatan kita sendiri dengan cara menukar kode html dari banner tersebut kepada blogger lainnya. Di dalam kode html tersebut sudah terdapat alamat dari blog kita, sehingga apabila banner tersebut di klik maka akan menuju ke blog yang kita buat. Sebaiknya cukup sekian penjelasannya, lebih baik langsung saja kita menuju ke TKP bagaimana cara membuatnya.

1. Pertama kita buat dulu banner yang kita inginkan dengan menggunakan software Easy GIF Animator, software tersebut dapat kalian cari dengan menggunakan jasa bang Google, hehee..

2. Setelah kalian buat bannernya, kita gunakan  jasa photobucket.com untuk mengupload banner tersebut, hal ini kita lakukan untuk mendapatkan code HTML-nya. Supaya bisa mengupload, kita join terlebih dahulu, gratiss ko'.










3. Setelah itu kita klik Upload images & videos, kita tunggu sampe prosesnya selesai.











4. Jika sudah selesai mengupload, maka akan muncul window seperti gambar di bawah, kemudian kita klik gambar bannernya.














5. Selanjutnya kita pilih share, lalu kita pilih Post to Website












6. Maka akan muncul jendela seperti gambar di bawah ini. Kita pilih Tab Get link code, kemudian kita copy kode HTML-nya.


















Setelah kita mendapatkan code HTML-nya, kita kembali ke blogger.com. Kita pilih Layout, Page Elements, Add a Gadget, kemudian kita pilih widget HTML/JavaScript, barulah kita paste code HTML-nya seperti berikut.

<a href="http://s836.photobucket.com/albums/zz285/adektrisno/?action=view&current=klikti-1.gif" target="_blank"><img src="http://i836.photobucket.com/albums/zz285/adektrisno/KLIKTI.gif" alt="Photobucket" border="0" /></a>

Agar banner tersebut dapat menuju ke blog kita, kita ubah kalimat yang berwarna biru menjadi alamat blog kita, sehingga menjadi.

<a href="http://www.klikti.co.cc" target="_blank"><img src="http://i836.photobucket.com/albums/zz285/adektrisno/KLIKTI.gif" alt="Photobucket" border="0" /></a>

Jika berhasil maka gambar banner kalian akan muncul, jika tidak silahkan coba kembali atau meninggalkan komentar untuk bertanya.
Read More..

Membuat Read More Otomatis

Pada postingan kali ini saya akan menjelaskan bagaimana cara membuat read more secara keseluruhan untuk semua postingan yang kita buat, agar terlihat lebih rapi pada tampilan home atau tampilan utama. Berikut langkah – langkah dalam membuat read more otomatis :
  1. Silahkan login ke blogger terlebih dahulu.
  2. Klik Tata Letak.
  3. Kemudian klik Edit HTML.
  4. Centang Expand Template Widget.
  5. Letakkan kode berikut ini, tepat dibawah kode </head> :
    <script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 450; summary_img = 360; img_thumb_height = 120; img_thumb_width = 150; </script>
    <script type='text/javascript'>
    //<![CDATA[
    /******************************************
    Auto-readmore link script, version 2.0 (for blogspot)
    (C)2008 by Anhvo
    visit http://en.vietwebguide.com to get more cool hacks
    ********************************************/
    function removeHtmlTag(strx,chop){
    if(strx.indexOf("<")!=-1)
    {
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
    if(s[i].indexOf(">")!=-1){
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
    }
    }
    strx = s.join("");
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
    strx = strx.substring(0,chop-1);
    return strx+'...';
    }
    function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if(img.length>=1) {
    imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
    summ = summary_img;
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
    }
    //]]>
    </script>
  6. Untuk yang sudah pernah menggunakan read more sebelumnya atau yang secara manual, sebaiknya kalian kembalikan dulu kodenya seperti semula. Kemudian hapus kode yang saya tandai dengan warna biru di bawah ini, sesuaikan dengan template kalian, karena setiap template berbeda - beda :
    <div class='post-header-line-1'/>
    <div class='post-body'>
    <b:if cond='data:blog.pageType == "item"'>
    <style>.fullpost{display:inline;}</style>
    <p><data:post.body/></p>
    <b:else/>
    <style>.fullpost{display:none;}</style>
    <p><data:post.body/></p>
    <a expr:href='data:post.url'>Readmore</a>
    </b:if>
    <div style='clear: both;'/>    
    sehingga sekarang hanya ada satu <data:post.body/>
  7. Kemudian hapus kode :
    <data:post.body/> atau <p><data:post.body/></p>
  8. Ganti kode tersebut dengan kode berikut ini :
    <b:if cond='data:blog.pageType != "item"'>
    <div expr:id='"summary" + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
    <span class='rmlink' style='float:left'><a expr:href='data:post.url'>Read More … <data:post.title/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

  9. Kemudian Simpan Template.

Keterangan :
  • summary_noimg = 450 –-> untuk tinggi postingan tanpa gambar.
  • summary_img = 360 –-> untuk tinggi postingan dengan gambar.
  • img_thumb_height = 120 –> tinggi gambar.
  • img_thumb_width = 150 –> lebar gambar.
  • Read More… –> bisa kalian ganti dengan tulisan Baca Selengkapnya / Baca Selanjutnya / atau apa saja yang kalian inginkan.
Selamat mencoba....  ^.^




Referensi:
http://miscah.blogspot.com/2009/09/cara-membuat-read-more-otomatis.html
Read More..

Merubah gambar icon blog


Kali ini saya akan memberitahu cara untuk merubah gambar icon blogger pada address bar menjadi gambar yang kita inginkan, agar blog kita terlihat berbeda dengan blog-blog lainnya.
Caranya sangat mudah, cara yang saya gunakan pertama kita buat atau kita cari gambar yang kita inginkan, kemudian kita ubah ukuran gambar tersebut menjadi 32x32 pixel atau 24x42 pixel dengan menggunakan adobe photoshop, setelah itu kita upload gambar tersebut di tinypic.com (web hosting yang saya gunakan).



Jika sudah diupload kita catat URL gambar tersebut, kemudian kita login ke blogger, pilih tab tata letak/layout, lalu edit HTML, cari script/kode </head> dan copy paste kode di bawah ini sebelum kode </head> :


<link href='http://Lokasi gambar ' rel='SHORTCUT ICON'/>

Kemudian paste URL gambar yang telah kita upload pada kata yang dicetak tebal, save template dan icon pada blog kita akan berubah.

Read More..

Membuat Nama Blog Berjalan


Saya ingin menjelaskan bagaimana cara membuat nama blog kita dapat berjalan seperti nama blog saya ini, caranya mudah kok tinggal copy paste aja, berikut langkah-langkahnya. Seperti biasa untuk mengedit blog kita login ke blogger terlebih dahulu, pilih tata letak/lay out, kemudian pilih edit HTML, lalu cari script berikut:

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

Ganti script tersebut dengan script di bawah ini :



<b:include data='blog' name='all-head-content'/>
<script language='JavaScript'>
var txt="<data:blog.pageTitle/>";
var kecepatan=200;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>

Jika kita ingin merubah nama blog kita, ubah kode <data:blog.pageTitle/> menjadi kata yang kita inginkan, contoh :



var txt="Welcome to klikti.co.cc";


Lalu untuk mengatur kecepatannya kita rubah angka yang 200, semakin besar angkanya semakin pelan gerakannya.


Read More..

Followers

Powered by Blogger