Membuat Read More Otomatis

Untuk read more otomatis ini, dibutuhkan kode JavaScript yang sebenarnya bisa kamu simpan sendiri di tempat biasa anda menyimpan file secara online. Namun kali ini script read more diletakkan langsung di template tanpa menggunakan hosting untuk mencegah errror saat hosting yang kita gunakan untuk menyimpan kode script-nya sedang down.
ReadMore-Bangethz

Buat blogger baru, bangethz sarankan menggunakan read more otomatis saja ketimbang read more yang biasa. Karena tentunya sobat tidak akan repot membagi 2 postingan sobat dengan kode manual.

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 diatas 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://sites.google.com/site/rasiqzonetwork/javascript/readmore-otomatis.js' type='text/javascript'/>

6. Untuk yang sudah pernah menggunakan read more versi lama (manual), sebaiknya sobat kembalikan dulu kodenya seperti semula. Hapus kode  di bawah ini, sesuaikan dengan template anda, karena setiap template berbeda - beda :

<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;READMORE...</a></span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

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 == "item"'><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 kamu ganti dengan tulisan Baca Selengkapnya / Baca Selanjutnya / atau apa saja yang kamu inginkan.

Silahkan kamu atur sesuai template anda tentunya bro.
Read More

Membuat Kotak Iklan (banner box)

Bangethz akan membuat trik sederhana cara bikin kotak iklan (Banner Box). Untuk fungsi Banner ads & bangethz yakin pasti semua sudah ngerti. Oh iya kalo tidak salah, pernah ada  yangemail ke bangethz untuk dibuatkan dengan cara sederhana  bisa diletakan di laman, posting ataupun sidebar blog.

bangethz.com
  
Wokeh bro mari kita langsung kerjakan PR ini, jangan lupa untuk menyiapkan banner yang akan anda pasang.

Cara Membuat Banner Box

Pertama, masuk pada halaman Edit Html, kemudian masukan kode CSS dibawah ini  tepat dibawah kode <b:skin><![CDATA[  
 #Box-Banner-ads {
margin: 0px;
padding: 5px;
text-align: center;
}
#Box-Banner-ads img {
margin: 0px 4px 4px 0px;
padding: 3px;
text-align: center;
border: 1px solid #c0c0c0;
}
#Box-Banner-ads img:hover {
margin: 0px 4px 4px 0px;
padding: 3px;
text-align: center;
border: 1px solid #333;
}
Tinggal di save & selanjutnya buat element laman barui (atau dimana saja akan diletakkan banner box)..kemudian anda tinggal memasukan kode dibawah ini.


<a target="_blank" href="LINK ANDA DISINI"><img border="0" alt="ads" src="LINK GAMBAR DISINI"/></a>
<a target="_blank" href="LINK ANDA DISINI"><img border="0" alt="ads" src="LINK GAMBAR DISINI"/></a>
<a target="_blank" href="LINK ANDA DISINI"><img border="0" alt="ads" src="LINK GAMBAR DISINI"/></a>
<a target="_blank" href="LINK ANDA DISINI"><img border="0" alt="ads" src="LINK GAMBAR DISINI"/></a>

Untuk jumlah iklan sobat tinggal menambahkan atau mengurangi. 

Untuk Kode Orange, masukan link/url anda
Untuk Kode Biru, masukan link/url gambar anda
SELESAI dech, langsung aja menuju TKP.....
Read More

Mengganti Favicon (logo B)

Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebuah gambar atau icon pada address bar (kotak untuk mengetikkan alamat web). Dan jika kita punya blog di Blogspot maka icon default yang akan tampil adalah gambar logo B dari blogger.

bangethz.com
Caranya sangat sederhana, kita tinggal masuk menuju Tata Letak pad halaman admin blogger & tinggal upload icon blog kita:
bangethz.com

Lalu Klik edit, lihat gambar di atas. dan lihat gambar di bawah ini tampilan halaman upload iconnya.

bangethz.com

Mudahkan bro, namun ada beberapa brother bangethz yang gagal alias favicon tersebut tidak tampil. Hapus cache dan history browser juga mendapatkan hasil yang sama.. Trus gimana?

Cara Memasang Favicon Di Blog

Bagi anda yang mengalaminya juga, mari kita selesaikan kasus ini. Buat dahulu icon yang akan dipasang & simpan di hosting bisa (blogger, picasa, photobucket, dll). Anda bisa menggunakan gambar sesuai dengan keinginan & dengan format gambar bebas (gif, jpg, ico, dan lain2).
bangethz menyarankan untuk membuat icon dengan ukuran kira2 24x42 pixel sampai 32x32 pixel (sebenarnya ukurannya bebas sih, tapi biar filenya kecil dan proses membukanya cepat). Setelah itu .....
masuk ke Layout --> Edit HTML trus tempatkan kode berikut diatas </head>


<link rel="shortcut icon" href="MASUKAN LINK GAMBAR DISINI"/>


Save template dan mari kita lihat hasilnya, semoga berhasil & jika ada kendala silahkan komentarr di halaman komentar bangethz.
Read More

Memasang Translator (Terjemah Bahasa)

Keberadaan Translator (Penerjemah Bahasa) di Blog cukup penting kegunaannya, karena tidak semua pengunjung paham dengan bahasa yang kita gunakan dalam postingan atau artikel blog, misalnya postingan kita berbahasa Indonesia dan diantara pengunjung blog kita adalah orang jepang yang tidak paham dengan bahasa Indonesia, berarti supaya orang jepang tersebut bisa mengerti dengan isi postingan kita, maka artikel blog kita tersebut harus ditranslate ke bahasa Indonesia.
Translator yang akan bangethz bagikan kepada anda sekarang ini adalah Translator ber-icon bendera (flag):



Bagaimana tertarik tidak? ikuti tutorial dibawah ini,


Cara Pasang Translator (Penerjemah Bahasa) di Blogspot

1. Login ke account blogger anda;
2. Klik Rancangan/Design => Tambah Gadget/Add Gadget => pilih HTML/Java Script;
3. Copy paste kode HTML di bawah ini:

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img border="0" alt="English" style="cursor: pointer;" src="https://i977.photobucket.com/albums/ae258/SPN_photo/inggris.gif" height="25" title="English" align="absbottom"></a>
<a style="cursor: pointer;" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img border="0" alt="French" style="cursor: pointer;" src="https://i977.photobucket.com/albums/ae258/SPN_photo/francis.gif" height="25" title="French" align="absbottom"></a>
<a style="cursor: pointer;" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img border="0" alt="German" style="cursor: pointer;" src="https://i977.photobucket.com/albums/ae258/SPN_photo/jerman.gif" height="25" title="German" align="absbottom"></a>
<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img border="0" alt="Spain" style="cursor: pointer;" src="https://i977.photobucket.com/albums/ae258/SPN_photo/spnyol.gif" height="25" title="Spain" align="absbottom"></a>
<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img border="0" alt="Italian" style="cursor: pointer;" src="https://i977.photobucket.com/albums/ae258/SPN_photo/italia.gif" height="25" title="Italian" align="absbottom"></a>
<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img border="0" alt="Dutch" style="cursor: pointer;" src="https://i977.photobucket.com/albums/ae258/SPN_photo/belanda.gif" height="25" title="Dutch" align="absbottom"></a>
<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img border="0" alt="Russian" style="cursor: pointer;" src="https://i977.photobucket.com/albums/ae258/SPN_photo/rusia.gif" height="25" title="Russian" align="absbottom"></a>
<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img border="0" alt="Portuguese" style="cursor: pointer;" src="https://i977.photobucket.com/albums/ae258/SPN_photo/brazilia.gif" height="25" title="Portuguese" align="absbottom"></a>
<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img border="0" alt="Japanese" style="cursor: pointer;" src="https://i977.photobucket.com/albums/ae258/SPN_photo/jepang.gif" height="25" title="Japanese" align="absbottom"></a>
<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img border="0" alt="Korean" style="cursor: pointer;" src="https://i977.photobucket.com/albums/ae258/SPN_photo/koreautara.gif" height="25" title="Korean" align="absbottom"></a>
<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img border="0" alt="Arabic" style="cursor: pointer;" src="https://i977.photobucket.com/albums/ae258/SPN_photo/saudiarabia.gif" height="25" title="Arabic" align="absbottom"></a>
<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img border="0" alt="Chinese Simplified" style="cursor: pointer;" src="https://i977.photobucket.com/albums/ae258/SPN_photo/cina.gif" height="25" title="Chinese Simplified" align="absbottom"></a>
4. Perhatikan kode diatas yang berwarna biru, pada height bangethz memberi ukuran icon 25. Dapat anda ubah agar lebih rapi dan sesuai di template anda.
5. Simpan/Save, selesai dan lihat hasilnya.
Demikianlah tutorial Cara Pasang Translator (Penerjemah Bahasa) di Blog ini, semoga bermanfaat.

Read More

Membuat Cusor Yang di Ikuti Teks

Langsung saja saya bahas cara membuat teks berjalan pada cusor anda.
Pertama buka blog aand.

Cara Memasang Cusor Teks


Pilih tata letak>>Tambah Gadgets>>Pilih html/Javascript>>Masukan kode berikut:

<script>
function cursor_text_circle(){
var msg='TULIS TEKS ANDA DISINI'.split('').reverse().join('');
var font='Verdana,Arial';
var size=3; // up to seven
var color='#ff0000';
var speed=.3;
var rotation=-.2;
var ns=(document.layers);
var ie=(document.all);
var dom=document.getElementById;
msg=msg.split('');
var n=msg.length;
var a=size*13;
var currStep=0;
var ymouse=0;
var xmouse=0;
var props="<font face="+font+" size="+size+" color="+color+">";
if (ie)
window.pageYOffset=0
if (ns){
for (i=0; i < n; i++)
document.write('<layer name="nsmsg'+i+'" top=0 left=0 height='+a+' width='+a+'><center>
'+props+msg[i]+'</font></center>
</layer>');
}
else if (ie||dom){
document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;">
<div style="position:relative">
');
for (i=0; i < n; i++)
document.write('<div id="iemsg'+(dom&&!ie? i:'')+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">
'+props+msg[i]+'</font>
');
document.write('
');
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position
xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position
}
if (ns||ie||dom)
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
var y=new Array();
var x=new Array();
var Y=new Array();
var X=new Array();
for (i=0; i < n; i++){
y[i]=0;
x[i]=0;
Y[i]=0;
X[i]=0;
}
var iecompattest=function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}
var makecircle=function(){ // rotation properties
if (ie) outer.style.top=iecompattest().scrollTop+'px';
currStep-=rotation;
for (i=0; i < n; i++){ // makes the circle
var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style;
d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : '');
d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? 'px' : ''); // hapus *2 untuk menampilkan lingkaran, bukan oval
}<br />
}<br />
<br />
var drag=function(){ // makes the resistance
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (var i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
makecircle();// not rotation speed, leave at zero
setTimeout(function(){drag();},10);
}
if (ns||ie||dom)
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", drag, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", drag );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
drag();
};
}
else
window.onload = drag;
}
}
cursor_text_circle();
</script>

Kalimat yang TULIS TEKS ANDA DISINI silahkan di ganti dengan kata-kata yang anda inginkan.
SELAMAT MENCOBA!!
Read More

Memasang Animasi Melayang

Anda yang ingin gambar animasi (bocah imut di pojok bawah blog) atau istilah yang sering dipakai oleh para blogger mania dengan gambar melayang. Gambar melayang.....??? gimana masangnya bro. Simpel kok caranya ikuti saja langkah - langkah berikut ini;

Cara Memasang Animasi Melayang


1. Login Acount blogger anda;
2. Masuk pada Pengaturan ;
3. Pilih Tata letak ;
4. Edit html ;
5. Kemudian copy code dibawah ini dan paste di atas kode ]]> < /b:skin > ;
#melayang {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+
document.documentElement.clientWidth - offsetWidth);
}

( bottom dan left ) menunjukan letak gambar. Letak gambar dapat di ubah dengan mengganti kode tersebut (left=kiri, bottom=bawah, right=kanan, top=atas) sesuai dengan keinginan anda.

6. Berikutnya cari lagi di dalam template anda kode < /body >
Kemudian copy code berikut ini dan letakkan diatas kode tersebut.

Contoh Animasi



<div id='melayang'>
<a href='http://www.bangethz.com'> <img src='http://i478.photobucket.com/albums/rr146/tovarossi/Dancingbaby.gif'/></a>
</div>

atau pilih code animasi berikut;

<div id='melayang'>
<a href='http://www.bangethz.com'> <img src='https://i478.photobucket.com/albums/rr146/tovarossi/bird_ann.gif'/></a>
</div>


Kode http://bangethz.blogspot.com) diganti dengan url blog anda.
Kode (http://i478.photobucket.com/albums/rr146/tovarossi/bird_ann.gif) diganti dengan url tempat gambar anda disimpan.

7. Simpan

Selesai dah....!!!
Read More