Cara Membuat Fungsi Scroll Terhadap Arsip Blog

Artikel kali ini saya akan membahas tentang, Cara Membuat Fungsi Scroll Terhadap Arsip Blog.
Banyak orang berfikir dengan memasang arsip blog dapat memikat pengunjung yang datang untuk membaca artikel lainnya, tetapi apabila blog kita mempunyai artikel yang jumlahnya 100-200 bagaimana ceritanya ? Pasti semua artikel akan memanjang sangat panjang ke bawah. Apakah enak untuk di lihat ? Menurut saya tidak.

Ok saya mempunyai solusinya untuk masalah tersebut dengan menggunakan Scroll terhadap arsip blog. Dengan fungsi scroll ini banyaknya artikel yang tercantum dalam arsip blog akan enak dilihat dengan scroll ke atas atau kebawah dan juga untuk memperunik, memperbagus blog dengan fungsi scroll tersebut.

 Ok langsung saja tutorialnya.

• Login ke Blogger sobat
• Masuk ke Edit HTML, *Jangan Lupa Ceklist Expand Template Widget*
• Cari "Arsip Blog", *Untuk Mempermudah Tekan ctrl-F
• Maka akan terlihat seperti kode di bawah ini,

     <b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <div id='ArchiveList'>
    <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
    <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
    <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
    <b:include data='data' name='menu'/>
    </b:if>
    </div>
    </div>
    <b:include name='quickedit'/>

• Untuk melakukan fungsi scroll lihat kode di bawah ini.

    <b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <div style='overflow:auto; width:ancho; height:100px;'>
    <div id='ArchiveList'>
    <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
    <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
    <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
    <b:include data='data' name='menu'/>
    </b:if>
    </div>
    </div></div>
    <b:include name='quickedit'/>

• Untuk kode yang berwarna merah silahkan kalian tambahkan pada template kalian. Kode di atas merupakan kode untuk melakukan fungsi scroll pada arsip blog.
• Simpan Template.
• Selesai.

Terima Kasih.
Selamat Mencoba

Read more »

Cara Memasang Pesan Konfirmasi di Blog

Mungkin anda pernah melihat sebuah blog yang menampilkan salam sapaan, trik kali ini ada hubungannya dengan triks yang Membuat pesan konfirmasi seperti gambar di bawah ini:

Penasaran mau tau cara membuatnya, langsung aja

• Pertama loginterlebih dahulu
• Masuk ke tata letak(layout) >> Element halaman
• Tambah gedget >> html/java script
• Copy code berikut dan pastekan kedalamnya

<script type='text/javascript'>
var name = prompt("Welcome!! Nama anda siapa", "Nama Anda ");
alert("Salam kenal ya "+name)
alert("Selamat browsing di blog saya, semoga berkenan!")
</script>

• Text yang berwarna merah bisa anda ganti dengan text yang anda inginkan
• Simpan
• Lihatlah hasilnya, selesai

Read more »

Membuat Teks Berjalan di Menu Bar

Selain membuat teks berjalan di blog, anda juga bisa membuat teks berjalan di menu bar. Belum tahu apa itu menu bar? Nah itu loh teks yang berada dipojok paling atas layar dan di nav bar browser seperti yang ditunjukkan pada gambar dibawah ini.
Nah bagi anda yang ingin mencobanya.
Silahkan ikuti langkah-langkah dibawah ini:

• Login ke blogger
• Pada menu Design -> Edit HTML
• Letakkan kode dibawah ini diatas kode </head>

<script type='text/javascript'>
//<![CDATA[

msg = " -- Selamat datang di Simple Preview ";
msg = " | pernak-pernik blog -- " + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
//]]>
</script>

• Ganti teks yang dicetak tebal dengan teks yang ingin anda tampilkan.
•  Angka 200 menunjukkan kecepatan gerak dari teks. Semakin kecil nilainya semakin cepat gerakan teksnya dan sebaliknya. Ganti bila perlu.

Read more »

Membuat Efek text pada Crusor Blog

Pernah lihatlah setip kursor di gerakan ada teks yang mengikuti?, Ini yang akan kita buat sekarang.

Ikuti langkahnya

• Login ke blog anda
• Klik Design (Rancangan)
• Klik Tambah Gadget
• Klik pilhan HTML/JavaScript
• Pastekan script di bawah ini

<script>
//mouse
//Circling text trail- Tim Tilton
//Website: http://www.tempermedia.com/
//Visit http://www.dynamicdrive.com for this script and more
function cursor_text_circle(){
// your message here
var msg='Rinjani'.split('').reverse().join('');

var font='Verdana,Arial';
var size=3; // up to seven
var color=' #FFFF00';

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 for just plain rotation w/out drag
var speed=.3;

// This is the rotation speed, set it negative if you want
// it to spin clockwise
var rotation=-.2;

// Alter no variables past here!, unless you are good
//---------------------------------------------------


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

// writes the message
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></div>');
document.write('</div></div>');
}
(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' : ''); // remove *2 for just a plain circle, not oval
}
}

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>

• Simpan

Ket: ganti kata Rinjani dgn kata yg sobat inginkan. dan #ff0000 ganti dengan kode warna yg sobat inginkan.

Read more »

Membuat Blog tidak bisa di copy paste

Sesuai triks kali ini, saya membuat hanya untuk sharing ilmu yang berhubunggan dengan blog. untuk anda atau siapa saja tidak usah sungkan-sungkan untuk melakukan copy paste pada blog saya, tanpa harus melakukan pengeditan terlebih dahulu, Boleh juga tanpa harus menyebutkan sumber (link).
tapi bukan berarti saya mendukung aksi dari pengcopy paste-an tersebut.
apakah anda tertarik untuk melakukan triks kali ini!!

Langsung saja :

• Pertama login terlebih dahulu
• Masuk ke tata letak >> edit HTML
• Jangan lupa memberi tanda centang pada Expand Template Widget
• Copy paste code berikut dan letakkan codenya diatas <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>

• Kemudian simpan template , selesai
• Lihat hasilnya . .

Read more »

Tips dan Trik Buat Blogger

Silahkan Anda Mencoba beberapa tips dan trik di bawah ini. Semua tips dan trik ini dipublikasikan berdasarkan pengalaman saya. 

1. Cara Pasang Tombol Facebook Like 
2. Membuat Google Translate dengan Icon Bendera 
3. Membuat Blog tidak bisa di copy paste 
4. Membuat Efek Teks pada Crusor Blog 
5. Membuat Teks Berjalan di Menu Bar  
6. Cara Memasang Pesan Konfirmasi di Blog  
7. Cara Membuat fungsi scroll terhadap Arsip Blog  
8. Cara Daftar Search Engine  
9. Cara Membuat Recent Posting  
10. Mengganti Domain Blogspot ke CO.CC  
11. Cara Agar Link di klik muncul di jendela baru
12. Membuat Fungsi Scroll pada Postingan 

Read more »

Cara pasang tombol Facebook Like

Untuk pemasangan tombol facebook like, pertama yang harus dipikirkan adalah dimana anda akan memasangnya? diatas postingan atau di bawah postingan? hal lainnya yaitu apakah tombol tersebut akan muncul terus baik di halaman depan ( homepage) ataupun didalam postingan? atau hanya ingin muncul dihalaman depan saja (homepage)? atau mungkin anda hanya ingin tombol tersebut hanya muncul didalam posting saja?
Secara mendasar, kode posting blogger adalah seperti ini :

<data:post.body/>

Logika sederhana, apabila anda ingin memasang tombol facebook like diatas posting, tinggal simpan saja diatas diatas kode yang tadi. Sebaliknya, jika anda ingin memasangnya di bawah postingan, tinggal disimpan dibawahnya saja. berikut ilustrasi dasarnya :

Agar tombol letaknya muncul diatas posting:

< kode tombol facebook like  disini >
<data:post.body/>

Agar tombol letaknya muncul dibawah posting:

<data:post.body/>
< kode tombol facebook like  disini >

Agar tombol facebook like hanya muncul  di halaman depan saja (homepage):

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:post.body/>
< kode tombol facebook like  disini >
</b:if>

Agar tombol facebook like hanya muncul  di halaman posting saja (single post):

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
< kode tombol facebook like  disini >
</b:if>

Diatas hanyalah sebagai ilustrasi saja. Berikut adalah cara sebenarnya untuk memasang tombol facebook like, namun sebagai contoh saja, kang Rohman akan mencontohkan untuk pemasangan di bawah posting dan akan muncul baik di homepage ataupun di single post.

• Silahkan login ke blogger dengan ID anda.
• Klik Rancangan.
• Klik tab Edit HTML.
• Lakukan backup terlebih dahulu template anda dengan klik Download Template Lengkap. 
• Beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget.
• Silahkan cari kode berikut pada template anda ( tips : gunakan fasilitas find pada browser anda agar lebih cepat dalam pencarian, tekan Ctrl+F untuk mengaktifkan, lalu masukkan kode yg dicari).

<data:post.body/>

• Copy kode berikut, lalu paste dibawah kode yang tadi :

<iframe expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;action=like&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;font=arial&amp;colorscheme=light&quot;' allowTransparency='true' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:25px;'/>

• Klik tombol SIMPAN TEMPLATE.
• Selesai

Read more »