Test midle sidebar

skripsi, Pengoptimalan Penggunaan Lembar Kerja Siswa (LKS) sebagai Sarana Peningkatan Prestasi Belajar Pendidikan Agama Islam

Skripsi PAI : Pengoptimalan Penggunaan Lembar Kerja Siswa (LKS)

16 Mei 2013 | 0 comments

Pengoptimalan Penggunaan Lembar Kerja Siswa (LKS) sebagai Sarana Peningkatan Prestasi Belajar Pendidikan Agama Islam di SMA Raudlatul Ulum Kapedi-Sumenep
Penulis:Lismawati
Tahun:2010
Fakultas:Tarbiyah
Jurusan:Pendidikan Agama Islam
Pembimbing:1) Dra. Siti Annijat Maimunah, M.Pd.  
Kata Kunci:Peningkatan, Prestasi Belajar, Lembar Kerja Siswa, Pendidikan Agama Islam

Download Buku : Metodologi Penelitian

Download Buku : Metodologi Penelitian

Download Buku : Metodologi Penelitian

Skripsi Ilmu Administrasi Negara : Analisis Kinerja Birokrasi Pemerintahan




Abstract

Mysql Dan Java Database Connectivity

Mysql Dan Java Database Connectivity

Judul:MYSQL DAN JAVA DATABASE CONNECTIVITY
Penulis:Eko Kurniawan Khannedy
Jumlah Halaman:i + 59 halaman
Ukuran File:1,61 MB
Format File:PDF
Daftar Isi :

Most Favorites Apps Facebook │ Update status via terbaru Facebook

Most Favorites Apps Facebook │ Update status via terbaru Facebook

rowse our apps collection, Start with most popular Statusvia apps for Facebook or Twitter that used by our user below. You don't have to login here to use Statusvia but if you want to create integrated Facebook or Twitter apps just create an account or login with your account and start creating your own apps. Lets spread Happiness

Elektronika Dasar

Elektronika Dasar



Judul : ELDAS
Cuplikan isi :
Daftar Isi
Bab I Konsep Dasar Elektronika
Bab II Transistor
Bab III Multivibrator
Bab IV Amplifier
Bab V Op-Amp
Penulis : Jayadin Ahmad

Mahir dan Profesional Sistem Operasi Linux

Mahir dan Profesional Sistem Operasi Linux



Judul : Mahir dan Profesional Sistem Operasi Linux
Cuplikan isi :
Bag 1. Konsep dasar perangkat komputer
Bag 2. Konsep dasar sistem operasi
Bag 3. Proses dan penjadwalan
Bag 4. Proses dan sinkronisasi
Bag 5. Memori
Bag 6. Penyimpanan sekunder
Bag 7. Masukan/Keluaran
Bag 8. Topik Lanjutan

5 Virus Komputer Paling Berbahaya

5 Virus Komputer Paling Berbahaya

5 Virus Komputer Paling Berbahaya - Dengan kemajuan teknologi komputer yang sangat canggih, para pakar-pakar komputer di seluruh dunia telah membuat suatu program untuk digunakan dalam berbagai macam kepentingan. Salah satunya dengan membuat program yang membahayakan yaitu

Cara Mempercepat Komputer

Cara Mempercepat Komputer

Cara Mempercepat Komputer - Komputer merupakan kebutuhan yang penting, namun komputer juga mempunyai dampak yang negatif bagi  penggunanya apabila tidak bisa menggunakannya, komputer sendiri mempunyai kemampuan untuk mengakses data yang cepat, hal tersebut di pengaruhi oleh beberapa faktor di antaranya, processor, ram hardisk dan lain lain.

Cara Mudah Mempercepat Komputer

Langkah-langkah Cara Mempercepat Komputer

Cara Merakit Komputer Lengkap

Cara Merakit Komputer Lengkap

Cara Merakit Komputer Lengkap - Untuk merakit komputer dan mendapat hasil yang optimal, dibutuhkan kesabaran dan ketelitian serta sedikit pengetahuan tentang komputer. Untuk merakit komputer tidak diperlukan yang namanya menyoder atau lainnya, karena anda hanya memasang dan menghubungkan soket-soket yang sudah disediakan.

Nah kita mulai mengenal istilah dalam perakitan komputer

Setting System Konfigurasi BIOS

Cara Setting System Konfigurasi BIOS

Cara Setting System Konfigurasi BIOS - Sebelum anda instal windows terlebih dulu mengatur BIOS (Basic Input Output System) adapun cara pengaturan BIOS telah saya buat sedemikian rupa

Membuat Widget Label Tertentu dengan Satu Thumbnail

Membuat Widget Label Tertentu dengan Satu Thumbnail

Kali ini saya akan memberikan satu lagi tutorial blogger tentang membuat widget per label dengan hanya satu thumbnail pada bagian paling atas dan di bawahnya menampilkan judul saja, untuk lebih jelasnya silahkan lihat screenshot gambar dibawah.  Biasanya widget ini banyak digunakan oleh blog konten berita, salah satu fungsi widget ini untuk memudahkan para pembaca untuk mengeksplorasi tiap kategori yang ada dan bisa juga untuk meringkas ruang pada sebuah template. Sebenarnya tutorial ini sudah lama tapi karena banyak yang tanya di kotak komentar maupun di email, tidak ada salahnya jika saya perjelas lagi di artikel ini. Cara membuat widget per label yang saya gunakan disini sebenarnya mudah dan hanya menggabungkan antara tutorial membuat label atau kategori dengan thumbnail dan membuat widget label yang hanya menampilkan judul saja.

widget per label


Jika Anda lihat pada template Mas Paper atau Johny Portal 2, di bagian tertentu pada template itu terdapat widget yang menampilkan label dengan susunan satu judul dengan thumbnail dan summary, dan dibawahnya list dari label yang sama tetapi hanya menampilkan judulnya saja. Cara membuatnya adalah sebagai berikut :
  1. Pertama yang mesti Anda lakukan adalah login ke blogger dengan akun Anda
  2. Setelah itu pilih blog yang ingin anda tambahkan widget ini.
  3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
  4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
  5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
    img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:60px;width:60px;padding:2px}
    img.label_thumb:hover{background:#f7f6f6}
    .label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}
    ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}
    Perhatikan tulisan warna biru diatas, itu adalah lebar dan tinggi thumbnail image.
  6. Selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
    <script type='text/javascript'>
    //<![CDATA[
    function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
    if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
    {s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8fuSVxQCwJzbEo05EF-SUVUPNefcdjkkq60ypxl5_0Sqkl7TlV4wu1KqEgjzLz3-_3IegsOqsDFhdBoqOypOP0zJf_hGGBN-rV7rRsaK4yuMvTnQ0nhB-hysaSD5axGYUOn04HsaUyRdh/';}
    var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
    document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
    else
    if("summary"in entry){var postcontent=entry.summary.$t;}
    else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
    else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
    var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
    if(showcommentnum==true)
    {if(flag==1){towrite=towrite+' | ';}
    if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
    if(displaymore==true)
    {if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
    document.write(towrite);document.write('</li>');if(displayseparator==true)
    if(i!=(numposts-1))
    document.write('');}document.write('</ul>');}
    //]]>
    </script>
    Jika kode script diatas terlalu panjang, Anda bisa simpan di tempat penyimpanan Google Code Anda sendiri atau gunakan kode script di bawah ini yang sudah saya ringkas di Google Code.
    <script src='http://yourjavascript.com/425111422721/label.js' type='text/javascript'/>
  7. Setelah itu save templates, kemudian menuju ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :
    <script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>

    <script type="text/javascript" src="/feeds/posts/default/-/news?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

    <script type="text/javascript">
    function recentpostslist(json) {
     document.write('<ul>');
     for (var i = 1; i < json.feed.entry.length; i++)
     {
        for (var j = 1; j < json.feed.entry[i].link.length; j++) {
          if (json.feed.entry[i].link[j].rel == 'alternate') {
            break;
          }
        }
    var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
    var entryTitle = json.feed.entry[i].title.$t;
    var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
     document.write(item);
     }
     document.write('</ul>');
     }
    </script>
    <script src="http://johnyportal2.blogspot.com/feeds/posts/summary/-/news?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
    <a href="http://johnyportal2.blogspot.com/search/label/news" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>
    Keterangan :
    Warna biru : adalah label atau kategori yang ditampikan, Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.
    Warna merah : Ganti URL dengan URL blog anda.

    Selanjutnya save dan lihat hasilnya.
Tampilan dari widget ini mengikuti kode CSS sidebar (jika Anda meletakkan di sidebar) pada template yang Anda pakai. Kode CSS yang digunakan pada pembuatan widget ini hanya digunakan untuk mengatur tampilan thumbnail.

Demikian tadi tutorial jadul mengenai membuat widget per label kali ini, jika masih ada yang kurang jelas silahkan tinggalkan pesan di kotak komentar, selamat mencoba dan semoga bermanfaat.

Membuat Slider Carousel Otomatis Versi 2

Membuat Slider Carousel Otomatis Versi 2

Kali ini saya akan membuat tutorialnya tapi hanya memakai slider carousel sederhana yang sudah pernah saya buat pada tutorial sebelumnya, disini saya hanya memodifikasi kode CSS nya saja, sehingga tampilannya mirip dengan slider Carousel yang ada di template Mas Paper 2. Tapi kalau dilihat sepintas, justru slider ini lebih mirip dengan slider Carousel yang ada di bagian atas (bawah navigasi) halaman depan situs detik.com.

slider carousel


Cara membuatnya hampir sama dengan slider Carousel otomatis versi 1, disini saya hanya merubah kode CSS dan menambahkan timestamp diatas judul post. Langsung saja di bawah ini langkah-langkah untuk membuatnya :
  1. Pertama Anda mesti login ke blogger dengan akun Anda
  2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
  3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
  4. Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
  5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
    #carousel{width:980px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;margin-bottom:8px}
    #carousel h5{color:#555;margin:2px}
    #carousel .container{position:absolute;left:24px;width:960px;height:125px;overflow:hidden}
    #carousel .thumb{float:left;margin-right:5px;}
    #carousel #previous_button{position:absolute;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQs32B0_0aQU2dEzDnkSpDM6xi05-CCOgK8LOoR0PMx3KIn5m94k48R3SAkcDXe1UJi-Cv0xjGf0H6__DrMF9z5n4nPogz7ooYZfOLH7G42KDkqnKX-D-bT4XqMwOuTMEls011XjFAEfsg/s1600/previous.png) center;z-index:100;cursor:pointer;}
    #carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb__4eeMpbnVCc-AdJlvsOSXX1C3Xuiz-6KE6uWfccP6ACADMatjRWycFtC020Elq6pfI_at8-oLZ9nrROwdYvgqgZsIk_kKSjg8oMzL0FwCHunFl1nxqOroBwoWkKn5IP2EkSLrFnhMCy/s1600/next.png) center;z-index:100;cursor:pointer;}
    #carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
    #carousel ul{width:100000px;position:relative;margin-top:10px}
    #carousel ul li{background:#ebebeb;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px 20px 6px;padding:6px}
    #carousel ul li a.slider_title{color:#222;display:block;margin-top:0;padding-top:0}
    #carousel ul li a.slider_title:hover{color:#1b5d97}
    #carousel a img{display:block;background:#fff;margin-top:0}
    Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.
  6. Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
    <script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>

    <script type='text/javascript'>
    //<![CDATA[
    imgr = new Array();
    imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ7p6QC5CnJZ1e0n7PIbe5jMDMVa-EzE4YQ9m_Fy4La8nrVAviEi6fjX1_zHMPpVLez27A5XeuZV18bxFpl2mwYhCEE_DPSNlCv94F8xeooH_Oar5hgB_-h6tnhzoZFzOM7EDpG0Lk4Fo/s1600/no+image.jpg";
    showRandomImg = true;

    aBold = true;

    summaryPost = 140;
    summaryTitle = 25;
    numposts1 = 12;

    function removeHtmlTag(strx,chop){
    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);
    }
    }

    s = s.join("");
    s = s.substring(0,chop-1);
    return s;
    }
    function showrecentposts(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img = new Array();
    document.write('<ul>');
    for (var i = 0; i < numposts1; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
    var pcm;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    posturl = entry.link[k].href;
    break;
    }
    }

    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
    pcm = entry.link[k].title.split(" ")[0];
    break;
    }
    }

    if ("content" in entry) {
    var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
    var postcontent = entry.summary.$t;}
    else var postcontent = "";
    postdate = entry.published.$t;
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
    s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["January","February","March","April","May","June","July","August","September","October","November","December"];
    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];
    for(var u2=0;u2<month.length;u2++){
    if(parseInt(m)==month[u2]) {
    m = month2[u2] ; break;
    }
    }

    var daystr = day+ ' ' + m + ' ' + y ;
    var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';

    document.write(trtd);
    j++;
    }
    document.write('</ul>');
    }
    //]]>
    </script>
    Keterangan :
    Perhatikan URL script warna merah diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
    Kode warna biru : 12 adalah jumlah slider yang ditampilkan. Sedangkan angka 100 dan 90 adalah panjang dan lebar image yang ada di slider.
  7. Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini diatasnya :
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div id='carousel'>
    <div id='previous_button'/>
    <div class='container'>
    <script>
    document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/sport?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
    </script>   
    <div class='clear'/>
    </div>
    <div id='next_button'/>
    </div>
    <script type='text/javascript'>
    (function($) {     $(document).ready(function(){
    $(&quot;#carousel .container&quot;).jCarouselLite({
        auto:4000,
        scroll: 1,
        speed: 800,   
        visible: 5,
        start: 0,
        circular: true,
        btnPrev: &quot;#previous_button&quot;,
        btnNext: &quot;#next_button&quot;
        });
        })})(jQuery)   
    </script>
    </b:if>
    Perhatikan kode warna merah diatas, sport adalah label yang ditampilkan pada slider nantinya (Ingat besar kecil huruf harus sama dengan label yang sudah Anda buat). Jika Anda ingin menampilkan postingan atau artikel terbaru pada slider, tinggal hapus kode /-/sport. Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer. 
  8. Langkah terakhir, save templates dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.
Demikian tadi tutorial membuat slider Carousel otomatis versi 2, seperti biasa jika ada yang kurang jelas silahkan tinggalkan pesan di kotak komentar. Selamat mencoba dan semoga bermanfaat

Download Javascript Bagi Pengguna Template Creating Websit

Download Javascript Bagi Pengguna Template Creating Website

Postingan ini saya khususkan bagi pengguna template Creating Website, kali ini saya akan bagikan semua file javascript yang saya pasang di berbagai template kreasi blog ini. Hal ini untuk mengantisipasi semakin seringnya akun Google Code saya dinonaktifkan alias di banned oleh Google, mungkin sudah tidak terhitung berapa kali akun Google Code saya kena banned dan jika Anda masih menggunakan file javascript dari template bawaan (belum disimpan di Google Code atau file hosting sendiri) akan terkena dampak dengan tidak berfungsinya fitur-fitur yang ada.

download javascript

File-file ini merupakan ringkasan dari banyak kode-kode script yang disimpan dalam sebuah notepad. Sebenarnya Anda bisa saja tidak harus meringkas dan menyimpannya di Google Code atau situs tempat penyimpanan file lainnya, yaitu dengan cara membuka file tersebut pada notepad atau wordpad kemudian langsung meletakkan pada template. Jika template yang Anda pakai sedikit menggunakan javascript, cara itu bisa dilakukan.

Lain halnya jika Anda memakai template yang banyak menggunakan javascript sebagai penunjang fitur-fitur yang dipasang, hal ini akan menyebabkan kapasitas memori template yang Anda pakai semakin membengkak yang selanjutnya akan mempengaruhi proses loading blod Anda. Untuk itu banyak master-master blogger menyarankan lebih baik file itu diringkas dan kemudian disimpan di situs penyimpanan file seperti Google Code, hal ini untuk mempercepat peramban, dalam hal ini mesin telusur Google dalam menulusuri file-file, baik HTML, CSS maupun Javascript yang ada pada template yang Anda pakai. Karena semakin kecil kapasitas template yang Anda pakai otomatis semakin cepat loading blog Anda.... Mohon bagi para master blogger yang membaca tulisan saya ini, dikoreksi kalau ada yang salah.

Nah, diatas tadi adalah ulasan singkat saya tentang file-file javascript yang akan Anda download jika memang dirasa perlu. Pertanyaannya sekarang adalah, bagaimana cara menggunakan file-file javascript tersebut?

Jika Anda masuk ke Edit HTML template, Anda pasti pernah menemukan sebuah URL script yang berakhiran .js, itu adalah javascript yang sudah diringkas dan disimpan di tempat penyimpanan file online. Contohnya seperti ini :
https://johny-ember.googlecode.com/svn/trunk/labelthumb.js
Jika Anda meletakkan URL diatas pada browser kemudian tekan enter akan mucul banyak sekali kode-kode script yang merupakan isi keseluruhan dari javascript tersebut.

Maksud dari artikel ini adalah, saya menyediakan file javascript yang saya pasang di semua template dari Creating Website dan sudah saya ringkas menjadi file .js. Dimana nantinya Anda tinggal download dan simpan di tempat penyimpanan Google Code Anda sendiri sehingga jika sewaktu-waktu akun saya kena banned dari Google, blog Anda tidak terkena dampaknya. Di bawah ini link download dari kumpulan file-file javascript yang sudah saya ringkas :


Jika Anda sudah download, disitu terdapat banyak sekali file javascript dari semua template yang pernah saya buat. Anda tinggal memilih script mana yang akan dipakai dan dipasang pada template Anda, tinggal mencari namanya saja, misalnya anda ingin mengganti URL script https://johny-ember.googlecode.com/svn/trunk/label.js, Anda tinggal cari file label.js kemudian upload di Google Code. Bagi Anda yang belum mengetahui cara membuat akun dan menyimpan file di Google Code silahkan baca postingan ini.Demikian postingan singkat kali ini, semoga bermanfaat.

Membuat Tab View Widget Kategori

Membuat Tab View Widget Kategori

Kali ini saya akan membuat satu lagi tutorial mengenai salah satu fitur yang ada pada template Johny Sompret Banget, yaitu membuat tab view widget per kategori. Sebelumnya saya juga pernah membahas cara membuat simple tabber pada sidebar. Ya rencananya saya nanti akan membuat semua tutorial tentang berbagai fitur yang ada pada template-template buatan saya. Tidak ada yang mesti dirahasiakan, semua fitur akan saya jelaskan satu persatu cara pembuatannya, sehingga ke depannya diharapkan Anda mampu membuat template sendiri, syukur bisa dibagikan kepada teman-teman blogger yang lain atau minimal dipakai sendiri. Dan siapa tahu setelah itu ada yang mau menjadi partner saya dalam membuat template blogger atau paling tidak membuat sebuah tutorial baru untuk bisa dibagikan kepada pengguna blogger, karena selama ini saya bekerja sendirian, bikin tutorial sendiri, bikin template juga sendiri, jadi kalau ada yang mau bantu, silahkan saya sangat berterima kasih sekali.

Kembali ke tutorial tab view widget per kategori, widget ini menampilkan 4 post dengan thumbnail dalam tiap satu label atau kategori, untuk lebih jelasnya silahkan lihat gambar di bawah, dan klik demo biar lebih jelas.



Langsung saja pada cara membuatnya :
  1. Pertama Anda meesti login ke blogger dengan akun Anda
  2. Kedua pilih blog yang ingin anda tambahkan slider ini.
  3. Setelah itu masuk ke template >> Edit HTML, kemudian centang expand widget templates
  4. Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
  5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
    #tabber-wrapper{width:640px;float:left;word-wrap:break-word;overflow:hidden}
    ul.tab-view{float:left;list-style:none;height:32px;border-bottom:1px solid #aaa;border-left:1px solid #aaa;width:638px;margin:0;padding:0}
    ul.tab-view li{float:left;height:31px;line-height:31px;border:1px solid #aaa;border-left:none;overflow:hidden;position:relative;background:#eee;margin:0 0 -1px;padding:0}
    ul.tab-view li a{text-decoration:none;color:#26231c;display:block;border:1px solid #eee;outline:none;font-weight:700;padding:0 15px}
    html ul.tab-view li.active,html ul.tab-view li.active a,html ul.tab-view li.active a:hover{background:#eee;color:#026ab5;border-bottom:1px solid #eee}
    .tab-wrapper{border:1px solid #aaa;border-top:none;overflow:hidden;clear:both;float:left;width:638px;background:#eee;margin-bottom:15px}
    .tabber{padding:10px 0}
    .tabber .column{float:left;display:inline;width:146px;margin:0 0 0 11px}
    .tabber h2{font:bold 12px Arial;line-height:15px;margin:7px 0 5px}
    .tabber h2 a{color:#222}
    .tabber h2 a:hover{color:#026ab5}
    Karena pada blog demo yang saya gunakan lebar main-wrapper (kolom postingan) adalah 640px maka untuk membungkus tab view widget lebarnya harus sama, yaitu 640px. Anda bisa sesuaikan dengan lebar main-wrapper pada template yang Anda gunakan.
    Dan untuk tab viewnya sendiri lebarnya harus dikurangi 2px (1px kanan dan kiri), karena tab ini dibungkus dengan border setebal 1px, sehingga lebarnya menjadi 638px. Lebar tiap satu post disini 146px, jika pada template yang Anda gunakan lebar main-wrapper lebih kecil, maka lebar untuk satu post ini pun juga harus diperkecil sehingga jarak antara bagian sisi kanan dan kiri sama.
  6. Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
    <script src='http://yourjavascript.com/013120251122/tabview.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[
    imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ7p6QC5CnJZ1e0n7PIbe5jMDMVa-EzE4YQ9m_Fy4La8nrVAviEi6fjX1_zHMPpVLez27A5XeuZV18bxFpl2mwYhCEE_DPSNlCv94F8xeooH_Oar5hgB_-h6tnhzoZFzOM7EDpG0Lk4Fo/s1600/no+image.jpg";showRandomImg=true;aBold=true;summaryPost=80;numposts=4;Title1="Norah Jones";Title2="Diana Krall";Title3="Sting";Title4="Basia";Title5="Sade";Title6="Jamie Cullum";function removeHtmlTag(strx,chop){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)}}s=s.join("");s=s.substring(0,chop-1);return s}function showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<div class="column"><a href="'+posturl+'"><img width="146" height="95" src="'+img[i]+'"/></a><h2><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div>';document.write(trtd);j++}}
    //]]>
    </script>
    Keterangan :
    Perhatikan URL script warna biru diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat tab view widget. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna biru diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
    Tulisan warna merah : Norah Jones, Diana Krall dan seterusnya adalah judul untuk tab view widget, anda bisa ganti sesuai katehori yang ingin ditampilkan pada widget tersebut. Warna biru (146 dan 95) diatas adalah ukuran lebar dan tinggi thumbnail pada satu post kategori, silahkan ukurannya disesuaikan.
  7. Kemudian masukkan kode berikut sebelum kode </body> :
    <script type='text/javascript'>
     //<![CDATA[
    jQuery(document).ready(function(){$(".tabber").hide();$("ul.tab-view li:first").addClass("active").show();$(".tabber:first").show();$("ul.tab-view li").click(function(){$("ul.tab-view li").removeClass("active");$(this).addClass("active");$(".tabber").hide();var activeTab=$(this).find("a").attr("href");$(activeTab).fadeIn();return false})});
     //]]>
    </script>
  8. Langkah selanjutnya adalah bagaimana cara menempatkan tab view widget tersebut pada blog kita. Jika Anda ingin meletakkan pada bagian atas sebelum post seperti pada demo, cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini dibawahnya :
    <div id='tabber-wrapper'>
    <ul class='tab-view'>
    <li><a href='#tab1'><script>document.write(Title1);</script></a></li>
    <li><a href='#tab2'><script>document.write(Title2);</script></a></li>
    <li><a href='#tab3'><script>document.write(Title3);</script></a></li>
    <li><a href='#tab4'><script>document.write(Title4);</script></a></li>
    <li><a href='#tab5'><script>document.write(Title5);</script></a></li>
    <li><a href='#tab6'><script>document.write(Title6);</script></a></li>
    </ul><div class='clear'/>
    <div class='tab-wrapper'>
    <div class='tabber' id='tab1'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Norah Jones Lyrics?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='tabber' id='tab2'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Diana Krall?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='tabber' id='tab3'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Sting?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='tabber' id='tab4'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Basia?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='tabber' id='tab5'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Sade Lyrics?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='tabber' id='tab6'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Jamie Cullum Lyrics?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='clear'/>
    </div></div>
    Tulisan warna merah pada kode diatas adalah label atau kategori yang saya tampilkan pada tab view widget, silahkan ganti dengan label Anda sendiri dan sesuaikan dengan judul tab view pada langkah nomer 6 diatas. Dan jika Anda ingin menampilkan widget ini di bawah postingan, letakkan kode tersebut diatas kode berikut ini (jika tidak ada cari yang mirip) :
    <!-- spacer for skins that want sidebar and main to be the same height-->
    <div class='clear'>&#160;</div>
    
    </div> <!-- end content-wrapper -->
  9. Terakhir, save templates dan lihat hasilnya. 
Nah itu tadi tutorial membuat tab view widget yang banyak ditanyakan oleh teman-teman blogger pada artikel sebelumnya. Silahkan dicoba, jika masih ada yang kurang jelas silahkan tinggalkan pesan di kotak komentar. Selamat mencoba dan semoga bermanfaat.

Membuat Slider Image Otomatis

Membuat Slider Image Otomatis

kali ini saya akan membahas tentang cara membuat slider image otomatis sederhana yang akan menampilkan postingan terbaru Anda.

image slider otomatis


Slider ini hanya memakai innerfade jquery dan cycle jquery plugin untuk melembutkan perpindahan content slider (bener nggak ya...?), pengertian Innerfade jquery kira-kira seperti ini :

Membuat Widget Artikel

Membuat Widget Artikel Terbaru Joss Banget

Tutorial kali ini menjawab pertanyaan dari teman blogger Haz Issac pada artikel membuat widget label tertentu dengan thumbnail satu, mengenai membuat recent Post atau artikel terbaru dengan fungsi Previous dan next seperti yang Anda lihat di single post blog Johny Template. Langsung saja

new smile

[SHARE] Facebook Chat & Comments Emotions

Follow Instrutions
____________
For Mozilla FireFox
Install
https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/

Health