ILMU KITA BERSAMA

Dalam perkataan, tidak mengapa anda merendahkan diri, tetapi dalam aktivitas tunjukkan kemampuan Anda.



Sekarang Saya akan membahas tentang cara menambahkan gambar back to top, Yang bermanfaat untuk mempercepat anda untuk keatas apa bila postingannya terlalu panjang banget dan untuk cara ini akan menggunakan gambar. Seperti yang Kalian lihat pada Blog ini, pada bagian kanan bawah, itu kan ada Gambar Back To Top. Bagaimana, Kalian tertarik...???. Kalau Kalian tertarik. sebelum mencoba lihat dulu contohnya seperti di http://ilmukitabersama09.blogspot.com  dengan efek scroll dan juga auto hide.


Baru silahkan ikuti langkah-langkah di bawah ini :
  1. Pada dashboard blog, pilih tata letak.
  2. kemudian pilih tambah gadget
  3. pilih HTML/Javascript
  4. Kemudian copy kode di bawah ini dan paste pada koloh HTML/javascript tadi
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
var scrolltotop={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAtdiVDKffH0VxnCUnJWYsHo0wOyZuTSBfPAoiof_oWAlDVCISfwzCNvSzHrp9yJUIUtybpMQ44flAHJ1UHW3OKbKWXREBLUEvysucMg50UtKVhIx3phBVs3-VC0aq5KoZ7n0ABg9pB68/s400/Back-to-top.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
    state: {isvisible:false, shouldvisible:false},

    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },

    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },

    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },

    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Scroll Back to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()
</script>
  1. Simpan
Silahkan ganti link image yang berwarna hijau di atas dengan gambar anda.
 Jika anda ingin gambar back to top silahkan kunjungi link ini.

Good luck selamat mencoba.............

Read More..




Mungkin Anda sering jengkel melihat postingan anda ada di mana-mana alias di copy oleh para copassser. Dan Bingung gimana cara nanggulanginya. Nah jika Anda tidak mau artikel dan gambarnya di copas, dan saya akan membahasnya di postingan saya ini . Ndak usah lama-lama langsung aja simak berikut ini good luck :
 



Berikut langkah-langkahnya :

·         . Pertama Login dulu ke Blog Kalian
·         . Trus cari Rancangan --> Elemen Laman --> Tambah Gadget (HTML/JavaScript)
·         . Lalu Copy dan Paste-kan Code dibawah ini :

<script language="JavaScript">
<!--
//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://http://ilmukitabersama09.blogspot.com
var message="Maaf klik kanan untuk sementara tak berfungsi karena yang menggunakan kamseupay :P ";
///////////////////////////////////
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>

Keterangan :
·         Ganti tulisan yang berwarna Merah, dengan URL Blog Kalian.
Dan ganti tulisan yang berwarna Biru, dengan kata-kata Kalian.


Terakhir tinggal di SAVE.

Sekarang coba buka Blog Kalian dan coba Klik Kanan pada Blog Kalian untuk mengetahui cara ini bekerja atau tidak.
Kalo tidak berkerja tolong disimak lebih teliti ….. Good Luck J
Semoga Berhasil Ya...!!!
Read More..


Dalam  pembahasan ini kita akan belajar tentang bagaimana cara mengganti link "Older Posts (posting lama)" dan "Newer Posts (posting baru)" tersebut menjadi angka seperti yang ditunjukkan pada gambar di bawah ini. dan dengan adanya ini blog kita akan lebih tertata dan sedikit aga keren mungkin.... ndak usah lama-lama ayo langsung saja simak aja di bawah ini :)
Cara Merubah Older Posts Dengan Angka

1. Langkah pertama tentu saja anda harus Login ke akun blogger milik anda selanjutnya menuju ke desain template anda kemudian lalu "Edit HTML"
2. setelah itu cari kode ini ]]></b:skin> Jika sudah anda temukan lalu letakkan kode CSS dibawah ini sebelum kode tersebut
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
} bkit-t� 3 s r @i 8 _ : 0px; background-color: rgb(255, 255, 255); display: inline !important; float: none; ">text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
3. Jika sudah kemudian cari kode ini </body> lalu tempatkan kode script dibawah ini sebelum kode tersebut.

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!--Page Navigation Ends -->

4. Terakhir simpan dan lihat hasilnya.

Selamat mencoba semoga informasi tersebut bermanfaat untuk anda
Goooood LUck ya :)


Read More..







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...
Read More.




Bagaimana cara membuat readmore di blogspot . Seperti gambar di atas . inilah pokok bahasan yang akan saya bahas untuk anda semua,hehehe.
baik sobat blogger, sebelumnya saya jelaskan sedikit apa gunanya read more pada blog kita. dengan adanya readmore blog sobat tampilan nya di home tidak terlalu memanjang ke bawah seperti tampilan home blog saya yang menggunakan readmore namun disini saya menggantinya dengan tulisan baca selengkapnya atau apapun, itu seterah sobat.

Berikut cara memasang readmore di blogspot :

-Login ke blogger dengan ID sobat.

-Pilih Rancangan atau Tata Letak.

-Pilih Edit HTML.

-Centang tulisan "expand template widget".


-Lalu cari kode </head> :   untuk mempermudah pencarian tekan F3.

-Lalu masukkan code di bawah ini tepat di atas  </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 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>

Kemudian sobat  cari kode <data:post.body/>
Ganti kode <data:post.body/>  dengan kode di bawah ini :

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


Kemudian Save Template.

Keterangan :
var thumbnail_mode = "float";: Letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;
summary_noimg = 250;: Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail;
summary_img = 250;: Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail;
img_thumb_height = 120;: Tinggi thumbnail dalam ukuran pixel;
img_thumb_width = 120;: Lebar thumbnail dalam ukuran pixel;
READMORE-: Tulisan READMORE bisa diganti misalnya dengan “Baca Selengkapnya” dan apabila anda tidak ingin menampilkan judul dibelakang Readmore, sobat bisa menghapus code script ini .

Selamat mencoba dan semoga berhasil .... Good LUck jangn lupa comment :)
Read More..



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 berikut:

1. Seperti biasa pertama Login ke blogger
2. Terus Pada menu Design -> Edit HTML
3. Letakkan kode dibawah ini diatas kode </head>
Contoh:
<script type='text/javascript'>
//<![CDATA[

msg = " – Welcome to my blog ";
msg = " | ilmukitabersama09 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.

4. Jika sudah, klik Save Template. Selesai

Jika berhasil anda akan melihat teksnya berjalan di menu bar anda. Untuk lebih jelasnya bisa anda lihat hasilnya di atas,... di menu bar saya 
Good luck Selamat mencoba ya :)
Read More..


Setelah saya memposting tentang cara membuat kotak alert message. Ternyata ada alert message kedua yang insya'allah lebih bagus dan keren cz ada konfirmasinya.... oke ndak usah lama-lama ayo cuss..



1. Seperti biasa, login ke blogger. Lalu masuk ke menu Design -> Edit HTML

2. Letakkan kode berikut ini dibawah <head> atau tepatnya diantara <head> dan<b:skin>
<script type='text/javascript'>
if (confirm(&quot;Terima kasih telah mengunjungi blog ini. Klik OK untuk melanjutkannya&quot;)) {
window.location = &quot;http://www.hermanblog.com/&quot;;
}
else {
window.location = &quot;http://google.com/&quot;;
}
</script>
Keterangan:
Tulisan yang dicetak tebal adalah teks yang muncul dalam kotak alert. Silahkan ganti dengan teks yang anda inginkan
Tulisan berwarna merah adalah alamat web yang akan terbuka jika pengunjung klikOK
Tulisan berwarna hijau adalah alamat yang akan terbuka jika pengunjung klikCancel atau Close

3. Kalau sudah, klik Save Template dan lihat hasilnya


Selain kotak alert yang sudah dibawah diatas masih ada 1 jenis lagi yaitu kotak alert dengan prompt field yang contohnya seperti dibawah ini.



Untuk membuat kotak alert ini caranya sama dengan diatas. Bedanya hanya pada scriptnya. Agar lebih jelas silahkan perhatikan cara dibawah ini.

1. Login ke blogger. Lalu buka menu Design -> Edit HTML

2. Masukkan script berikut dibawah kode <head>
<script type='text/javascript'>
var name = prompt(&quot;Masukkan nama anda disini&quot;, &quot;Nama&quot;);
alert(&quot;Welcome to my blog&quot;)
</script>

Perhatian:
Jika anda sudah pernah memasang script kotak alert maka dihapus dulu scriptnya sebelum memasang script ini.

Teks yang dicetak tebal merupakan pesan yang muncul dalam kotak alert
Teks yang berwarna merah merupakan teks yang muncul dalam kotak jawaban.
Teks yang berwarna hijau merupakan pesan yang muncul setelah pengunjung klikOK. Silahkan ganti sesuai keinginan.

3. Kalau sudah, klik Save Template.

4. Selesai. Silahkan liat hasilnya. Good luck ya :)

Semoga bermanfaat ya….. terimakasih telah mengunjungi :)
Read More..

About this blog



“Semakin banyak kita berbagi ilmu semakin banyak ilmu kita lebih berguna”


Daftar Isi

Diberdayakan oleh Blogger.

Copyright 2009 - ILMU KITA BERSAMA

Blogspot Theme designed by: Ray Creations, Ray Hosting.