Selasa, 09 Agustus 2011

sebenerya males niih nulis-nulis di postingan soalnya blogku sepi....tapi apa daya saya dah jatuh hati sama dunia blogger ya wiis..eh ko jadi curhat langsung nih tutorialnya:
readmore otomatis
cekidot..

1. Log in blogger.com
2. Dasbor > tata letak > edit HTML
3. Centang Expand Template Widget
4. Cari kode </head>
5. Copy kode di bawah ini,dan letakkan di atas </head>

SALIN CODE [download]

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</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. Lalu cari kode <data:post.body/>
7. Ganti kode tersebut dengan kode di bawah ini..

SALIN CODE [download]

<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'><a expr:href='data:post.url'><img src='http://lh6.ggpht.com/_Kwwy9VyLMKw/S3qDYQZCiRI/AAAAAAAACxA/aXY0neVNzh0/but_readmore.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


selesai hasilnya bisa liat di blog ini......

Free Template Blog

Menggunakan Image di Template

Disini ada 3 trik bagaimana menggunakan image di template atau juga menutup atau meniban text dengan sebuah image. Misal kita akan menggunakan image pada judul blog, bagaimana caranya agar ketika 'disable image' ataupun 'disable CSS'  nya, informasi dari image tersebut tidak hilang. Minimal dari 3 trik berikut, kita dapat memutuskan trik mana yang sesuai untuk kita gunakan.


Trik Pertama: Memasang Image Langsung di dalam HTML

Pada trik ini langsung memasukkan image kedalam kode HTML, "image as content", contoh:

<h1><a href="#"><img width="300" height="75" alt="Judul Blog Anda" src="logo.jpg" /></a></h1>
Apabila kita menggunakan trik ini, penggunaan  alt menjadi penting. Nanti apabila fungsi image dimatikan (disable), text di dalam  alt tersebut sebagai penggantinya untuk mendeskripsikan image tersebut.
Untuk penggunaan trik ini, image tersebut tidak bisa di :hover, karena fungsi hover lebih ke penggunaan CSS. Untuk trik kedua berikut dapat menggunakan hover karena mengunakan CSS.



Trik Kedua: Menggunakan CSS untuk Mengganti Text dengan Image

Trik ini menggunakan CSS untuk mengganti text dengan image ('image replacement') dan memfungsikan :hover pada image.
Contoh:
  • Kode HTML:
<h1 id="logo"><a href="#"><span></span>Judul Blog</a></h1>
  • Kode CSS:
/* repeated code per header */
#logo, #logo span {
 width: 300px; height: 75px;
 }
#logo a, #logo a span {
 background-image: url(logo.jpg);
 background-repeat: no-repeat;
}
#logo a:hover, #logo a:hover span {
 background-image: url(logo2.jpg);
}

 /* This is what moves the text under the span */
#logo a span { margin-bottom: -75px; }
/* code for all styled headers */
h1 a span {
 display: block;
 /* place the span on top */
 position: relative;
 z-index: 1;
}
Dengan trik ini apabila kita 'disable image', text yang sebelumnya ditiban akan muncul kembali. Penambahan tag span menjadi kunci dari teknik ini. Trik ini tampaknya lebih baik dibanding kita menggunakan trik CSS dengan menggunakan text-indent, untuk menyembunyikan text, sebab apabila 'disable image' textnya tersebut tidak terlihat.
Trik ini dikembangkan dari Accessible Header Images With CSS And XHTML di page kedua, sub judul Show us Your Text!. Untuk lebih lengkap anda dapat mempelajari di alamat tersebut.



Trik Ketiga: Menggunakan Image di HTML dan CSS Sekaligus

Trik ketiga ini saya peroleh dari situs Chrip. Di situs tersebut, memasang image sekaligus, baik itu di dalam HTML maupun di CSS. Perhatikan contoh penggunaan kode yang diterapkan pada situs tersebut untuk image pada judul blognya:
  • Kode HTML
<h1><a class="chirp" href="#"><img alt="Chirp - The Official Twitter Developer Conference. San Francisco, 14th &amp; 15th April 2010." src="logo_chirp_small.png"></a></h1>
  • Kode CSS
a.chirp  {
background:url("logo_chirp.png") no-repeat left top;
display:block;
height:249px;
width:324px;
}
a:hover.chirp  {
background:url("logo_chirp.png") no-repeat left bottom;
}
a.chirp img {
height:0;
}
Jika kita perhatikan kode diatas pada kode HTML ada sebuah image yang ditanam langsung dan menggunakan atribut alt  sebagai deskripsi dari image tersebut. Kemudian pada kode CSS nya juga ada image, dan menggunakan teknik CSS Spites untuk fungsi :hover.


Dengan kode berikut:

a.chirp img {
height:0;
}

fungsi dari height:0; tersebut, untuk menyembunyikan image di dalam HTML, sehingga image di dalam CSS yang akan tampil.

Prinsip dari trik ketiga ini, tampilan sempurna image dibrowser yaitu pada image di CSS nya. tapi apabila kita 'disable image', maka text didalam alt tersebut sebagai pengganti informasinya, dan apabila kita 'disable CSS' nya maka image di dalam kode HTML yang tampak.

Penutup
Lihat demo dari 3 Trik Menggunakan Image di Template. Silahkan anda mencoba 'disable image' atau 'disable CSS' untuk melihat hasilnya.
Dari ketiga trik tersebut silahkan memilih, yang menurut anda lebih tepat, atau anda memiliki trik sendiri yang lebih baik? kalau ada share yah :)

membuat setiap halaman berbeda

Ada salah seorang sobat kita bertanya bagaimana cara membuat halaman postingan berbeda-beda?dan membuat halamn depan di blogger?
dan saya mencoba memcahkan nya dari beberapa nara sumber yg ada,mungkin membuatan halaman depan di blog saya salah tapi beberapa sobat ada juga yg pengen tahu cara bikin nya,dan ini bukan copas ^_^
membuat setiap halaman berbeda-beda ini yg saya ketahui mempunyai 2 cara,dan sobat harus memahami setiap css yg di pakai di template blog sobat

dan cara pertama melalui Edit HTML di postingan :

 sobat letak kan style css nya di box postingan dan sobat tidak perlu lagi menggunakan kode <b:if cond='data:blog.url == &quot;alamatpostingan&quot;'> ini ,
cukup di mulai dari <style> dan di tutup dengan </style> seperti ini :
<style>
    body{background:#red;}
    #content {width:820px;}
    #sidebar-wrapper{display:none !important}
    #footer{display:none !important}
    #html2 {display:none !important}
</style>

<!--ISI ARTIKEL -->

<---TEMPAT SCRIPT JQUERY --->
<script src='jquery/1.4.4/jquery.min.js'></script>
  • Contoh nya seperti ini klik gambar untuk ukuran besar:

cara kedua menempatkan css di template dengan kode :


    <b:if cond='data:blog.url == &quot;alamatpostingan&quot;'><style>
   kode css di sini
   </style></b:if>
Misal sobat pengen background di halaman postingan itu nya menjadi merah"red"
cara menerapkan nya seperti di bawah ini dan sobat letakkan di atas kode </head>
    <b:if cond='data:blog.url == &quot;alamatpostingan&quot;'>
   body{background:#red;}
    </b:if>
Atau sobat pengen melebarkan area content nya silahkan sobat cari tag css di template sobat buat melebar kan area content template
setiap template mempunyai kode - kode css yg berbeda kalau di template saya menggunakan tag css seperti ini #content-area
mungkin di template blog sobat kode css buat melebarkan content area(lebar postingan)nya menggunakan
kode: .content,#content,div#content,#content-wrapper,#post-wrapper atau yg lain2 nya,silahkan sobat cari sendiri apa yg menjadi fungsi buat melebarkan area content di template blog sobat
kalau sobat sudah mengetahui tag css di template sobat ,sekarang kita mulai  untuk melebarkan content halaman postingan

tadi yg di atas kita mebuat background di halaman tersebut menjadi merah(red)
sekarang kita mulai  melebarkan area content nya,maka kode yg di gunakan seperti ini :
<b:if cond='data:blog.url == &quot;alamatpostingan&quot;'><style>
body{background:#red;}
 #content {width:820px;}
</style></b:if>
atau sobat pengen menghilangkan sidebar,footer,widget,atau yg lain-lain,
sobat gunakan{display:none !important}untuk widget sobat harus tau tag id dari widget tersebut misal nya id widget sobat Html1 atau Html2 lalu sobat merapkan di css seperti ini #html2 {display:none !important}
  • Contoh nya :
    <b:if cond='data:blog.url == &quot;alamatpostingan&quot;'><style>
    body{background:#red;}
     #content {width:820px;}
     #sidebar-wrapper{display:none !important}
    #footer{display:none !important}
    #html2 {display:none !important}
    </style></b:if>
kalau sobat mau bikin menu di halamn tersebut penerapan nya gini:
<b:if cond='data:blog.url == &quot;alamatpostingan&quot;'>
<style>
..................................... .
di sini letak css menu nya
#menu {....}
#menu li{....}
#menu li a{...}
........................................
</style>
....................................... .
di sini letak buat kode html buat pemanggil css menu nya nya.
<ul class="menu">
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
</ul>>
..........................................
</b:if>


dan seterus nya kalau sobat pengen menghilangkan atau mengedit css,widget,sidebar,area content,atau apa aja yg ada di template sobat cara nya seperti itu,penerapan di halaman depan juga seperti di atas,inti nya
Platform blogger itu memiliki halaman-halaman yg berbeda,dimana setiap halaman digunakan untuk menempatkan postingan dengan tujuan tertentu. Selain halaman content atau posting (entri), sobat dapat membuat artikel berupa page (laman).dan cara edit css nya seperti yg di tunjukan di atas Halaman page ini memiliki sifat berbeda dengan posting, diantaranya:

   1. Bersifat static, maksudnya halaman tidak diurutkan berdasarkan waktu.
   2. Halaman banyak digunakan untuk menampilkan informasi tertentu, seperti contact person, about us, sitemap, dan sebagainya.
   3. Biasanya untuk mengakses halaman ini juga anda dapat menambahkan gadget baru yang hanya tampil pada halaman page ini.

Begini kesimpulannya, setiap halaman yang ada di blogger memiliki karakteristik masing-masing. Berikut saya paparkan saja setiap halaman yang terdapat di blogger secara keseluruhan:

   1. Homepage merupakan halaman utama blog anda, yakni halaman depan blogger.
   2. Archivepage adalah halaman arsip blogger.
   3. Itempage adalah halaman postingan yang diurutkan berdasarkan waktu penulisan.
   4. Indexpage adalah halaman muka, halaman label, dan halaman pencarian.
   5. Staticpage adalah feature baru google yakni halaman yang tidak masuk pada postingan yang telah saya jelaskan tadi.

   1. Homepage merupakan halaman utama blog anda, yakni halaman depan blogger.
   2. Archivepage adalah halaman arsip blogger.
   3. Itempage adalah halaman postingan yang diurutkan berdasarkan waktu penulisan.
   4. Indexpage adalah halaman muka, halaman label, dan halaman pencarian.
   5. Staticpage adalah feature baru google yakni halaman yang tidak masuk pada postingan yang telah saya jelaskan tadi.
ini ada beberapa kode buat template mungkin ada guna nya buat sobat:
  • Menampilkan widget hanya di Homepage
    <b:if cond='data:blog.url == data:blog.homepageUrl'><style>
    .......isi css......
    </style></b:if>

  • Menampilkan widget selain di Homepage
    <b:if cond='data:blog.url != data:blog.homepageUrl'><style>
    .......isi css......
    </style></b:if>
  • Menampilkan widget hanya di Archivepage
    <b:if cond='data:blog.pageType == &quot;archive&quot;'><style>
    .......isi css......
    </style></b:if>
  • Menampilkan Widget selain di Archivepages
    <b:if cond='data:blog.pageType != &quot;archive&quot;'>
    .......isi css......
    </b:if>
  • Menampilkan Widget hanya di Itempages / Postingan
    <b:if cond='data:blog.pageType == &quot;item&quot;'><style>
    .......isi css......
    </style></b:if> 
  • Menampilkan widget selain di Itempages
    <b:if cond='data:blog.pageType != &quot;item&quot;'><style>
    ..........................
    </style></b:if>
  • Menampilkan widget hanya di Staticpages
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    .......isi css......
    </b:if>
  • Menampilkan widget selain di Staticpages
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'><style>
    .......isi css......
    </style></b:if>
  • Menampilkan widget pada URL atau halaman tertentu
    <b:if cond='data:blog.url == &quot;alamatpostingan&quot;'><style>
    .......isi css......
    </style></b:if>
  • Menampilkan widget selain di URL atau halaman  tertentu
    <b:if cond='data:blog.url != &quot;alamaatpostingan&quot;'><style>
    .......isi css......
    </style></b:if>
Semoga ini bermanfaat...
soal nya hampir 1 jam saya bikin artikel ini..T_T

Me-nonaktifkan Klik Kanan

Apa maksudnya? Suatu ketika ada orang yang berkunjung ke blog anda, dan dia ingin mengkopi suatu tulisan yang ada di blog anda dengan cara membloknya lalu mengklik kanan dan memilih kopi, dijamin orang tersebut tidak bisa melakukannya. kenapa? Itu karena anda memasang skrip anti klik kanan. Beberapa alasan script ini dipasang mungkin karena si empunya blog ingin melindungi beberapa isi yang berada di blognya, ya dengan cara menon aktifkan klik kanan.

bagi teman-teman yang masih penasaran, bisa langsung mencobanya melalui langkah-langkah berikut:

1. Login ke Blogger.
2. Klik Tata Letak.
3. Klik Tambah gadget >> JavaScript/HTML, dan isikan kode berikut:

<script>
var message="Hoe Gak Boleh Klik Kanan !";
///////////////////////////////////
function clickIE4(){if (event.button==2){alert(message);return false;}}
function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}
if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}
else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}
document.oncontextmenu=new Function("alert(message);return false")
</script>
4. Klik simpan, dan selesai.

Teman-teman bisa mengganti tulisan "Hoe Gak Boleh Klik Kanan !" dengan kata-kata sesuai keinginan teman2, itu akan muncul kalau ada yang melakukan klik kanan di blog anda. Selamat mencoba...
Semoga Bermanfaat []