Rabu, 26 September 2012

Membuat Read More di Blogspot


Script auto readmore blogger/blogspot dengan thumbnails (gambar preview) ini adalah penyempurnaan dari script auto readmore V1, di mana ditemukan adanya masalah pada halaman statis. Ketika halaman statis ditampilkan, auto readmore ikut muncul, sehingga harus diberi pengecualian (b if cond & b else) untuk static pages pada scriptnya. Selain itu, javascript dlm auto readmore ini juga bersifat internal jadi tidak perlu lagi memuat file .js eksternal yang diupload ke hosting lain. Meskipun file template menjadi sedikit lebih besar, namun loading  page menjadi lebih cepat daripada auto readmore sebelumnya.

Langkah-langkahnya:
1. Masuk ke dahboard > Design/Rancangan > Edit HTML. Jangan lupa centang 'Expand Widget Templates'. Download/back up file XML template terlebih dahulu agar nanti bisa mengembalikan seperti semula jika ada kesalahan.
2. Jika dulu sudah diisi script auto  readmore yang pertama, hapus terlebih dahulu, gunakan panduan dari posting auto readmore V1 untuk mengetahui mana saja yang harus dihapus.
3. Copy-paste script berikut tepat DI BAWAH </head> (gunakan Ctrl+F):
<!-- Auto read more script -http://buka-rahasia.blogspot.com- Start -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430
summary_img = 340
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(thumbnail_mode == "yes") {
    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>
<!-- Auto read more script -http://buka-rahasia.blogspot.com- End -->
Yang berwarna merah adalah jumlah dan ukuran tampilan, summary_noimg=jumlah karakter tanpa gambar, summary_img=jumlah karakter dengan gambar, sedangkanimg_thumb_height dan img_thumb_width adalah ukuran gambar (dalam pixel). Ubahlah sesuai dengan keinginan.

3. Kemudian cari <data:post.body/> (gunakan Ctrl+F), dan GANTI dengan:
<!-- Auto read more -http://buka-rahasia.blogspot.com- Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>
<!-- Auto read more -http://buka-rahasia.blogspot.com- End -->
Kostumisasi:
Ganti Read More >> dengan kata-kata yang diinginkan. Atau jika ingin menggantinya dengan gambar, ganti tulisan berwarna merah tersebut dengan:
<img border='0' src='url (direct link) gambar readmore'/>
Ganti url (direct link) gambar readmore dengan alamat url dimana anda mengupload dan menghosting gambar
----------------
Update (12102011):
Di komentar sobat Ari di bawah ditanyakan: bagaimana cara agar tampilan teks di post summary - auto readmore bisa rata kiri kanan (justified)
Lihat bagian ini pada script kedua di atas. Jika auto readmore sudah dipasang, cari dengan Ctrl + F:
<div expr:id='&quot;summary&quot; + data:post.id'>
Untuk membuat teks di post summary dlm readmore justify, tambahkan style css ini ke dalam tag: style='text-align:justify;'
Jadinya:
<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'>
----------------
4. Preview terlebih dahulu, jika sudah beres, kemudian save.

Rabu, 28 Maret 2012

Cari Jodoh dinyanyikan Musisi Luar Negeri

Mungkin pada tahun 2009 lagu Cari Jodoh boleh dikatakan sangat sukses, lagu yang bercerita tentang seorang pria jomblo yang tidak punya pasangan, namun meskipun secara lirik lagu ini dikhususkan untuk orang dewasa namun pada saat itu lagu ini tidak hanya dinyanyikan oleh orang dewasa saja namun juga kalangan remaja dan anak-anak, hal ini sangat singkron dengan video clipnya yang juga menunjukkan betapa bahagianya semua orang bahkan anak-anak dengan lagu ini.
Namun tidak hanya di Indonesia mungkin lagu ini juga sampai ke telinga musisi luar negeri salah satunya Fabrizio Faniello yang merupakan warga negara Malta, musisi berusia 30 tahun ini tidak hanya menyanyikan lagu ini tapi juga mengubahnya kedalam bahasa asing dan juga mengganti judul asli dari lagu ini. Tak cukup sampai disitu dia juga telah menyanyikan lagu Wali yang berjudul baik-baik sayang dengan judul baru My Heart Is Asking U.
Fabrizio sempat mendapat kecaman dari masyarakat atas tuduhan plagiat namun dia langsung membantah hal itu dan mengatakan kalau semua royalti tetap milik Wali. Kalau menurut penulis sendiri neh, boleh lagu-lagu Indonesia di remake sama musisi luar negeri tapi minimal judulnya jangan diganti-ganti yah? karena itu bisa mengangkat pamor bangsa Indonesia sendiri.

Fabrizio Faniello gambarA berikut videonya: versi asli:

Selasa, 28 Februari 2012

Sidikalang Dairi Kota Indah taman wisata iman sumbul

Aku terlahir disana dan besar disana hingga saat ini

Jumat, 24 Februari 2012

Membuat Kotak Blogroll


Setelah sebelumnya telah diposting mengenai Cara Membuat Dropdown Menu, kali ini akan diposting Cara Membuat Kotak Blogroll. Seperti namanya kotak ini berisikan link blog. Namun selain link bisa diisi yang lain sepertiDaftar Isi Artikel dll.
Karena ini berupa kotak yang bisa diatur besarnya tentu sangat menghemat ruang/space blog kita.

Cara membuatnya :

  • Login dulu di Blogger.com / Blogspot.com
  • Klik menu "Page Element"
  • Pilih Add Page Elements --> HTML/JavaScript
  • Copy script dibawah ini
<div style="overflow:auto;width:95%;height:300px;padding:10px;border:1px solid #eee; background:#AFEEEE">
<a href="http://fanttupa.blogspot.com/2012/02/cara-memasang-jam-di-blog.html">Cara Memasang Jam di Blog</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/cara-memasang-google-translator-di-blog.html">Memasang Google Translator 1</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/membuat-animasi-halaman-blog.html">Membuat Animasi Halaman Blog</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/membuat-read-more-potongan-artikel.html">Membuat Read More</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/membuat-teks-berjalan-pada-blog.html">Membuat Text Berjalan</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/membuat-navigation-bar-menjadi.html">Nav Bar Menjadi Transparan</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/membuat-kotak-blogroll.html">Membuat Kotak Blogroll</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/membuat-google-translator-2.html">Membuat Google Tanslator 2</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/read-more-automatic.html">Membuat Read More Automatic</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/auto-hide-nav-bar-blogspot.html">Auto Hide Nav Bar</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/membuat-tab-view.html">Membuat Tab View</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/pasang-kalender-di-blog.html">Pasang Kalender di Blog</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/mengetahui-statistik-pengunjung.html">Mengetahui Statistik Pengunjung</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/membuat-daftar-isi-blog.html">Membuat Daftar Isi Blog</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/menampilkan-user-yang-online.html">Menamplkan User Yang Online</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/huruf-besar-pada-awal-postingan.html">Huruf Besar Pada Awal Postingan</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/membuat-tag-cloud.html">Membuat Tag Cloud</a>

<hr />
<a href="http://fanttupa.blogspot.com/2012/02/membuat-form-berlangganan-via-email.html">Membuat Artikel Berlangganan via Email</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/menampilkan-page-rank-blog.html">Menampilkan Page Rank Blog</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/cara-membuat-search-engine.html">Membuat Search Engine</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/menampilkan-status-yahoo-messenger.html">Menampilkan status Yahoo Messenger</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/membuat-menu-horizontal.html">Membuat Menu Horisontal</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/icon-unik-pada-address-bar.html">Icon Unik Pada Address Bar</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/menampilkan-peta-pengunjung.html">Menampilkan Peta Pengunjung</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/judul-artikel-sebagai-judul-blog.html">Judul Artikel Sebagai Judul Blog</a>
<hr />
</div>
note:
Tulisan warna 
biru adalah script membuat kotak blogroll.
Tulisan warna 
merah adalah script link kamu, silahkan ganti dengan punya kamu.



SIMPAN




Hasilnya seperti ini:


Membuat Artikel Berhubungan



Membuat Menu Dropdown



Membuat Text Link Berkelap-kelip



Efek Salju Pada Blog (1)



Memberi Higlight Pada Postingan



Memasang Jam di Blog



Memasang Google Translator 1



Membuat Animasi Halaman Blog



Membuat Read More



Membuat Text Area





Membuat Text Berjalan



Nav Bar Menjadi Transparan



Membuat Kotak Blogroll



Membuat Google Tanslator



Menghilangkan Navbar



Membuat Read More Automatic



Tambah Ekspresi Dengan Smiley



Auto Hide Nav Bar



Menghapus Angka Label



Membuat Menu Vertikal



Menampilkan IP Address



Membuat Tab View



Pasang Kalender di Blog



Efek Salju Pada Blog 2



Menghilangkan Nav Bar



Mengetahui Statistik Pengunjung



Membuat Daftar Isi Blog



Menamplkan User Yang Online



Huruf Besar Pada Awal Postingan



Membuat Tag Cloud





Membuat Artikel Berlangganan via Email



Menampilkan Page Rank Blog



Membuat Search Engine



Menampilkan status Yahoo Messenger



Membuat Menu Horisontal



Membuat Shout Box



Icon Unik Pada Address Bar



Menampilkan Peta Pengunjung



Judul Artikel Sebagai Judul Blog







Keterangan:


<div style="overflow:auto;width:95%;height:150px;padding:10px;border:1px solid #eee; background:#FFCCFF">




width:95% adalah lebar kotak bisa kamu ubah pakai pixel, misal 250px


height:150px adalah tinggi kita bisa kamu ubah sesukamu


background:#FFCCFF adalah background kotak. Untuk melihat kode warna silahkan lihat disini. Atau kode background:#FFCCFF bisa dihapus kalau tidak suka.


solid pada kode border:1px solid adalah jenis/style border, kamu bisa ganti dengan style yang lain. Kalau mau ganti style border lihat disini.


Selamat Berkreasi

Membuat Menu Horizontal


Kamu ingin buat menu horisontal............. seperti ini nihcontohnya. Oke yuk kita lanjutkan...
  • Login ke blogger
  • Pilih Layout --> Edit HTML
  • Centang pada kotak "Expand Widget Templates".

Menampilkan Status Yahoo Messenger


Jika kamu ingin menampilkan status Yahoo Messenger sehingga pembaca tau bahwa kamu lagi online atau offline saat ini.....?

begini to caranya...
  • Login ke blogger

Cara Membuat Search Engine


Siapa yang gak tau Google…..? Pasti deh gak ada yang gak tau. Kalau gak tau wah kebangetan sekali. Google adalah merupakan mesin pencari terbaik dan terpopuler saat ini. Nah postingan kali ini kita akan Membuat Search Engine sehingga pembaca blog kamu bisa dengan mudah mencari artikel cukup dengan mengetik keyword.
Ikuti langkah berikut:

Menampilkan Page Rank Blog


Ingin Menampilkan Page Rank (PR) blog kamu.
Begini caranya:

Langkah Pertama:

  1. Kunjungi situs http://www.prchecker.info/pagerank-check-button.php
  2. Pada halaman situs tersebut ada tulisan Pagerank Icons - Add one to your site - It's FREE!
  3. Dibawah tulisan tersebut ada logo beserta kode HTML

Membuat Form " Berlangganan Via Email "


Apakah kamu ingin memberi layanan langganan artikel via email kepada pembaca. Dengan demikian setiap kamu posting artikel baru, otomatis pembaca akan mendapat kiriman artikelmu ke emailnya. Nah pingin tau cara membuatnya....

Langkah Pertama:
  • Kunjungi situs http://www.feedburner.com
  • Setelah masuk ke situs tersebut maka kamu disuruh mengisikan alamat feed blogmu. Biasanya

Membuat Tag Cloud


Apa itu Tag Cloud....? Itu lho Kategori atau Label yang tulisan bisa besar atau kecil tergantung dari banyaknya artikel atau postingan pada Kategori atau Label tersebut. Semakin banyak postingan pada Label tersebut tulisan akan menjadi semakin besar pula.

Nih lihat contoh gambar di bawah ini....

Huruf Besar Pada Awal Postingan


Kadang-kadang kita bosan dengan tampilan atau gaya tulisan pada postingan kita. Jika kamu ingin menampilkan gaya tulisan yang berbeda seperti layaknya di koran, yaitu dimana pada huruf awal artikel biasanya dipakai huruf yangBESAR. Ikuti tutorial Cara Membuat Huruf Besar Pada Awal Postingan.
Seperti dibawah ini.

Menampilkan User Yang Online


Widget user online diperlukan oleh sebuah blog untuk mengetahui jumlah pengunjung yang sedang online di blogkita. Anda mau menampilkan widgets user online…?
Kalau gitu ikuti langkah-langkah berikut:

Langkah Pertama:

Delete this element to display blogger navbar