Cara Membuat tulisan ReadMore
ini contoh readmore gambar 
Pembuatan Readmore Biasa :
Seperti Ini
1. Login Ke Blogger.com
2. Klik Rancangan ---> Edit HTML
3. Klik tulisan Download Template Lengkap untuk berjaga-jaga kalau ada kesalahan pengeditan HTML
4. Beri tanda centang pada kotak di sebelah tulisan “Expand Template Widget”
5. Cari kode seperti ini <p><data:post.body/></p>
6. Kemudian ganti kode tersebut dengan kode ini :
<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'>Read More...</a>
</b:if>
<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'>Read More...</a>
</b:if>
7. Kemudian klik tombol simpan template
Catatan : Teks Readmore Bewarna merah bisa diganti dengan teks sesuka kalian seperti Baca Selengkapnya atau yang lainnya sesuai selera sobat masing2 ...
Baik lah sekarang pembuatan Readmore yang kedua yaitu :
Pembuatan Readmore Button/Image
pada postingan Diatas saya hanya memberikan tips tentang cara membuat ReadMore biasa, sekarang saya akan memeberikan tips untuk menjadikan ReadMore menjadi bergambar supaya website kita terlihat lebih menarik lagi. Kalau begitu nggak usah banyak bacot lagi langsung aja kita pelajari cara membuat ReadMore bergambar.caranya sama koq hanya sedikit berbeda
1. Login Ke Blogger.com
2. Klik Rancangan ---> Edit HTML
3. Klik tulisan Download Template Lengkap untuk berjaga-jaga kalau ada kesalahan pengeditan HTML
4. Beri tanda centang pada kotak di sebelah tulisan “Expand Template Widget”
5. Cari kode seperti ini <p><data:post.body/></p>
6. Kemudian ganti kode tersebut dengan kode ini :
<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'>Read More...</a>
</b:if>
<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'>Read More...</a>
</b:if>
Catatan :
Jika pada postingan sebelumnya tulisan Read Morenya seperti tulisan yang berwarna merah. Tetapi pada postingan ini kita akan mengganti tulisan tersebut menjadi gambar. Caranya ganti kode “Read More” yang berwarna merah dengan kode ini
<IMG SRC='http://pic60.picturetrail.com/VOL1724/12312346/22573599/376383608.jpg'/></a>
Maka hasilnya kurang lebih akan jadi seperti ni :
<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'><IMG SRC='http://pic60.picturetrail.com/VOL1724/12312346/22573599/376383608.jpg'/></a> </b:if>
<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'><IMG SRC='http://pic60.picturetrail.com/VOL1724/12312346/22573599/376383608.jpg'/></a> </b:if>
7. Kemudian klik tombol simpan template
Baiklah selanjutnya pembuatan :
Pembuatan Readmore Otomatis
Fungsi read more kali ini sedikit berbeda dan lebih modern dan memudahkan kita untuk tidak lagi membatasi artikel yang akan disembunyikan dengan readmore.
Fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-float image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman kita sebut saja dengan fasilitas image thumbnail.
Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter.
1. jumlah karakter yang ditampilkan, jika ada image yang diikutsertakan dalam postingan
2, jumlah karakter tanpa image. apabila masih bingung langsung aja kita bahas dengan praktek.
Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula !!
Pertama Klik EDIT HTML, Cari kode :
</head>
kemudian letakan script dibawah ini di atas atau dibawah kode </head>.
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 500;summary_img = 400;img_thumb_height = 150;img_thumb_width = 150;</script>
<script type='text/javascript'>
//<![CDATA[
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>
Kalau sudah jangan lupa disimpan terlebih dahulu.
2. Masih pada EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah
<data:post.body/>
Kalo sudah, ganti kode <data:post.body/> menjadi seperti kode dibawah 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:right'> <a expr:href='data:post.url'>Read More... <data:post.title/></a> </span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/> </b:if>
Keterangan:
Tulisan yang berwarna Ungu itu menandakan readmore+judul postingan jika kita tidak menghendakinya tinggal di hapus.
dan tulisan right yang berwarna biru menandakan letak daripada tulisan read more tersebut.
jika left : berarti berada di sebelah kiri. tetapi jika kita ganti menjadi
right : berarti berada di sebelah kanan (seperti pada contoh gambar di atas)
var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 500; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 400; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 150; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 150; (Thumbnail 'lebar dalam piksel)
silahkan disimpan dan lihat hasilnya :)
Cara Agar Blog Tidak bisa di Copas Versi 1
SUDAH DICOBA
Cara membuatnya: COntohnya Nih Peringatan pada saat mengklik kanan
Masuk kedesign--pilih pagelements
Add a gadget--pilih HTML/javascript
masukkan kod dibawah ini:
Gantikan letak messege disini dengan mesej yang ingin ditampilkan
Kemudian save.
Cara membuatnya: COntohnya Nih Peringatan pada saat mengklik kanan
Masuk kedesign--pilih pagelements
Add a gadget--pilih HTML/javascript
masukkan kod dibawah ini:
<script>
var message="Letak messege disini";
///////////////////////////////////
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>
Gantikan letak messege disini dengan mesej yang ingin ditampilkan
Kemudian save.
Cara Membuat Tulisan Berjalan Di bawah Blog
DIJAMIN JADI SOBAT SUDAH DICOBA
1. Letakkan code berikut ini di atas code ]]></b:skin>:
2. lalu copy script di bawah ini lalu pastekan tepat diatas kode </body>
Ganti URL (link gambar) yang berwarna biru dengan URL/link tempat gambar kamu disimpan!
Ganti juga tulisan yang berwarna merah sesuka hatimu..! Bebas koq, ngga ada yang melarang. Hehehe...
SEPERTI INI NIH SOBAT....TAP BISA MONDAR MANDIR
BlogWaiking.....
1. Letakkan code berikut ini di atas code ]]></b:skin>:
2. lalu copy script di bawah ini lalu pastekan tepat diatas kode </body>
<center><div id="hehehe_asepjikuganteng" style="" width="100%"><marquee direction="left"><img src="http://i759.photobucket.com/albums/xx232/asepjiku/hihi/3.gif" /><a style="font-size: 20px; color: rgb(0, 255, 0);">blogwalking.. Selamat datang di blog saya.</a></marquee></div></center>
Ganti URL (link gambar) yang berwarna biru dengan URL/link tempat gambar kamu disimpan!
Ganti juga tulisan yang berwarna merah sesuka hatimu..! Bebas koq, ngga ada yang melarang. Hehehe...
BlogWaiking..... Cara agar Blog tidak bisa Di Blok/copas Versi 2
1. Masuk ke Dasbor
2 Tata letak > Edit HTML
3. Beri tanda centang pada kotak kecil Expand Template Widget
4 Silahkan cari di dalam template anda kode <head>
5. Kalau sudah ketemu, anda Copy Pastekan script yang ada dibawah ini "Persis setelah kode <head>".
<SCRIPT type="text/javascript">
if (typeof document.onselectstart!="undefined") {
document.onselectstart=new Function ("return false");
}
else{
document.onmousedown=new Function ("return false");
document.onmouseup=new Function ("return true");
}
</SCRIPT>
| SIMPAN SELESAI |
Cara Menggubah Icon di Adress Bar
CARANYA
masuk ke "> Tata Letak > Edit HTML " trus tempatkan script berikut sebelum kode
</head>
<link href='http://img98.imageshack.us/img98/9617/image3cr0.gif' rel='SHORTCUT ICON'/>
atau bisa juga seperti kode dibawah ini :
<link rel="shortcut icon" href="http://img98.imageshack.us/img98/9617/image3cr0.gif"/>
Ganti huruf yang berwarna Hijau dengan lokasi gambar dimana kamu menyimpan gambar tersebut yang kita upload di tempat hosting gambar.(LINK BSA LIAT DIBAWAH)
contohnya kamu mengupload gambar kamu di photobucket dan juga di imageshack sebagai contoh kamu meng-upload di Album Picasa caranya seperti di bawah ini :
- Login ke picasa dengan account google di http://picasaweb.google.com
- Tekan tombol I accept.
- Jika anda memiliki software picasa yang sudah terinstall pada PC, anda dapat meng-uploadnya dengan mudah. Tekan tombol launch picasa dan software pun akan berjalan. Namun pada kesempatan kali ini, kita gunakan cara tradisional yaitu meng-upload gambar melalui browser.
- Setelah anda menekan tombol I accept, silahkan dilanjutkan dengan klik tombol upload.
- Isikan form title, date, dan seterusnya. jika selesai tekan tombol continue.
- Tekan tombol browse dan arahkan pada file yang akan anda upload
- Tekan tombol start upload untuk menguploadnya ke dalam server picasa
- Setelah selesai, anda akan menjumpai tampilan thumbnail gambar tersebut. Klik gambar tersebut untuk melihatnya secara full
- Klik kanan gambar tersebut dan pilih properties.
- Anda akan mendapatkan URL gambar yang kurang lebih seperti ini http://lh6.ggpht. com/_4r8ISY........................oTZz4tK4/gambar-header.gif (hanya contoh alamat gambar).
- Kembali lah pada situs blogger.com dan masuklah pada tab layout * Edit HTML
- Link gambar yang bertuliskan http://img98.imageshack.us/img98/9617/image3cr0.gif anda ganti dengan link yang baru yaitu http://lh6.ggpht. com/_4r8ISY........................oTZz4tK4/gambar-header.gif (contoh alamat gambar).
- Lakukan hal yang sama untuk gambar2 yang lain
atau kalau kamu tidak mau pusing dibawah ini ada beberapa contoh icon/gambar beserta dengan linknya.
http://img87.imageshack.us/img87/5862/image1an1.gif
http://img110.imageshack.us/img110/6218/image2ie0.gif
http://img98.imageshack.us/img98/9617/image3cr0.gif
http://img134.imageshack.us/img134/633/image4hx4.gif
http://img412.imageshack.us/img412/3808/image11pc0.gif
http://img100.imageshack.us/img100/4658/image12du2.gif
http://img132.imageshack.us/img132/4733/image13lj1.gif
http://img145.imageshack.us/img145/7793/image14zg9.gif
http://img412.imageshack.us/img412/4403/image15jc7.gifSELESAI
Cara membuat Buku Tamu Melayang
1. Loginlah dulu di Blogger > Tata Letak > Elemen Laman > Klik Tambah Gadget>HTML/Java Scripts..
2. Jika sudah buatlah nama pada widget yang baru ini... lalu Copy-Paste kode dibawah ini ke dalam widget HTML/Java Scripts tadi...
. Simpanlah Widget Melayang ini... Selesai.. namun sebaiknya posisi widgetnya di Bagian Tata letak di letakan paling bawah lalu klik simpan.. Untuk melihat hasilnya silahkan Refresh blog kamu.. Mudahkan.. ;-)
yang Berwarna Biru Bisa Diganti dengan dibawah ini
http://img22.imageshack.us/img22/8941/tabs2.gif
http://i642.photobucket.com/albums/uu147/remoxp/Chatbox.png
http://i634.photobucket.com/albums/uu66/oktri_2009/o0c2d.png
2. Jika sudah buatlah nama pada widget yang baru ini... lalu Copy-Paste kode dibawah ini ke dalam widget HTML/Java Scripts tadi...
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:150px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i466.photobucket.com/albums/rr22/wong284/GuestBook.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #FFFFFF;
background:#FAFD03;
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;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
PASTE KODE BUKU TAMU DISINI YAA...
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></center></div></center></div></div></div>
Keterangan :#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:150px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i466.photobucket.com/albums/rr22/wong284/GuestBook.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #FFFFFF;
background:#FAFD03;
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;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
PASTE KODE BUKU TAMU DISINI YAA...
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></center></div></center></div></div></div>
Merah = Gantilah dengan kode Scripts Widget Buku Tamu yang akan kamu tampilkan Misalnya kode Scripts Widget Shoutmix..
border = Memberi warna pada border konten...aturlah/ubahlah warnanya jika mau.. misalnya FAFFFF (sebaiknya gunakan pencari kode warna Photoshop)
background = Memberi warna pada isi konten.. disini saya menggunakan warna kuning
background = Memberi warna pada isi konten.. disini saya menggunakan warna kuning
. Simpanlah Widget Melayang ini... Selesai.. namun sebaiknya posisi widgetnya di Bagian Tata letak di letakan paling bawah lalu klik simpan.. Untuk melihat hasilnya silahkan Refresh blog kamu.. Mudahkan.. ;-)
yang Berwarna Biru Bisa Diganti dengan dibawah ini
http://img22.imageshack.us/img22/8941/tabs2.gifhttp://i642.photobucket.com/albums/uu147/remoxp/Chatbox.pnghttp://i634.photobucket.com/albums/uu66/oktri_2009/o0c2d.pngCara Membuat Mouse Bertaburan Bintang Di Blog
DIJAMIN JADI SOBAT
blogger > Tata letak > Edit HTML > di Edit Template kamu Centang Expand Widget Template...
CONTOHNYA UDAH ADA TUH LIAT KAN DIMOUSE GUE!
blogger > Tata letak > Edit HTML > di Edit Template kamu Centang Expand Widget Template...
CONTOHNYA UDAH ADA TUH LIAT KAN DIMOUSE GUE!
| Nih kodenya <script src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.merah.js" type="text/javascript"></script> |
