Sabtu, 26 Oktober 2013

Memindahkan tulisan Read More default Ke Kanan

Ada Berbagai Cara Modifikasi Read More atau Baca Selengkapnya , baik Read More Default bawaan blogger atau yang dibuat secara manual, salah satunya di Saung Link ini yaitu memindahkan Read More ke sebelah kanan,  bisa juga mengganti Tulisan Read More dengan kata lain atau gambar dll.
Ada berbagai alasan untuk modifikasi Read More, seperti ingin tampil beda , lebih keren sampai urusan SEO Friendly, dll. semua tergantung tujuan masing2. Saya misalnya karena posisi nya di sebelah kiri pas diatas widget Share AddThis atau Infogue, kalau mau klik Read More suka terganggu dengan munculan widget tersebut sehingga tulisan read morenya jadi terhalang. Untuk jelasnya coba aja sorot widget  tersebut.. nah seperti ituiah masalahnya.

Senin, 21 Oktober 2013

12 CARA AGAR BLOG CEPAT TERDETEKSI GOOGLE

Kali ini saya akan memberikan tips agar blog/website kita bisa di deteksi atau eksis oleh mesin pencari seperti Google, Yahoo, dogpile , bing, MSN dll.
Dengan harapan semoga blog kita ramai pengunjung, karena dari sekian banyak pengunjung biasanya datang berbondong-bondong melalui mesin pencarian/search engine itu sendiri entah melalui pencarian web, berita , gambar , dsb .

Untuk itu, langsung saja saya share 12 cara agar blog/website anda bisa terdeteksi dan eksis search engine Update!

Penghina Islam Itu Kini Naik Haji


Penghina Islam Itu Kini Naik HajiTRIBUNNEWS.COM -- SIAPA sangka seorang penghina Islam menunaikan ibadah haji? Begitulah faktanya yang dialami Arnoud Van Doorn.
Awal 2008 lalu, Van Doorn pernah membuat gempar dunia. Kala itu ia bersama Geert Wilders, membuat film berjudul Fitna yang menghina umat Islam dan Alquran.
Namun, sekitar lima tahun kemudian situasi berbalik 180 derajat. Tepatnya 27 Februari 2013, Van Doorn sekali lagi mengejutkan dunia. Melalui Twitter, mantan politisi Partai Kebebasan Belanda itu mengumumkan dirinya masuk Islam dan kemudian naik haji.

Membuat Tab View di Blogspot


Untuk menghemat tempat, tab view menu sangat efisien. Ukuran yang relatif kecil tapi bisa memuat banyak space. Hal ini pernah ditanyakan oleh anda blogger pada kolom shout box beberapa minggu yang lalu tentang bagaimana cara membuat menu yang bisa memuat banyak judul, mungkin menu tab view ini yang dimaksud ya. 
Membuat menu dengan tab view memerlukan kode HTML yang lumayan panjang dan agak ribet, jadi sebaiknya simak baik-baik tutorial ini dan yang paling penting jangan lupa untuk backup template andaterlebih dahulu.

Jika setelah jadi nanti lebar atau tinggi menu tidak sesuai, silahkan anda sesuaikan sendiri dengan isi dari menu yang anda gunakan. Karena jika tidak mengerti akan jadi berantakan atau terlihat jelek. Baiklah, sekarang kita menuju pada pokok permasalahan

Sabtu, 19 Oktober 2013

Garis Batas Antar Postingan di Blog

Modifikasi blog menjadi salah satu hal yang mesti dilakukan agar pembaca ataupun yang pemilik blog, merasa nyaman ketika melihat blog itu. Dalam hal ini, saya menerangkan garis pembatas antar postingan yang mungkin bagi sebagian blogger ada yang suka atau sebaliknya.

Garis Pembatas Antar Item pada BlogList


Garis Pembatas Antar Item pada BlogList Sebenarnya pada tutorial Widget dengan Scrollbar pun sudah membuktikan bahwa widget bawaan blogspot bisa kita modifikasi. Nah sekarang saya ingin membuat garis pembatas atau pemisah antara satu item dengan item lainnya.









Membuat Readmore Manual di Blogspot



Seperti kita tahu, dengan adanya readmore blog akan terlihat lebih rapi, tidak ada postingan yang terlentang terlalu panjang pada halaman posting, karena ukurannya akan dikendalikan oleh readmore. 
Jadi blog tersebut akan terlihat judulnya serta ulasan singkat pada paragraf pertama(tergantung letak readmorenya) seperti opsi pada widget popular post. Hanya saja jika popular post jumlah karakter cuplikan akan ditentukan secara default, sementar readmore tergantung dari penulis blog itu sendiri.


Kisah Teladan dalam Hadits


Judul Buku :  
Kisah Teladan dalam Hadits
Penulis: Hamid Ahmad Ath-Thahir
Ukuran: 14 x 20 cm
Tebal: 168 hal
Harga: Rp. 34.000,-

bagi yang berminat hub : 
081329733277

Berkisah merupakan salah satu cara edukasi yang efektif. Selain jauh dari kesan menggurui, sebuah kisah bisa merangsang kecerdasan pendengarnya untuk menarik makna dan hikmah yang dikandung. Selain hikmah, pengetahuan tentang perjalanan masa lalu sebuah kaum, bahkan masa depannya, bisa digali lewat kisah. 

Rabu, 16 Oktober 2013

Cara Memasang Widget Random Post di Blog

Cara Memasang Widget Random Post di Blog
Artikel ini saya buat untuk melengkapi artikel saya tentang widget Random Post atau artikel acak.
Meski memiliki desain sederhana yang inherited dari template, widget random posts yang saya bagi ini memiliki kelebihan dalam hal menggali hingga post terdalam/terlama (dengan limit max 1000 post). Sehingga artikel-artikel lama anda yang mungkin terbengkalai alias memiliki pageview yang semakin sedikit, dan bahkan sudah terlupakan oleh anda, dapat dimunculkan serta ditawarkan kembali kepada pembaca.



Sabtu, 12 Oktober 2013

Ternyata, mengandung darah Babi


SAVE PALESTINE Ketua Komisi Nasional Pengendalian Tembakau (Komnas PT), DR Hakim Sarimuda Pohan, mengungkapkan bahwa dalam filter rokok yang banyak digunakan di Indonesia terkandung bahan yang berasal dari darah babi.

Hemoglobin atau protein darah babi digunakan dalam filter rokok untuk menyaring racun kimia agar tidak masuk ke dalam paru-paru perokok,... kata Hakim saat menjadi pembicara dalam dialog bahaya merokok bagi kehidupan berbangsa di Balaikota Banjarmasin, Kalimantan Selatan, Rabu.

Ia meyakini bahwa filter yang digunakan untuk rokok yang beredar di Indonesia merupakan filter impor yang mengandung komponen dari darah babi. Menurutnya, semua itu diketahui setelah adanya pernyataan yang diungkapkan ahli dari Australia atau Profesor Kesehatan Masyarakat dari Universitas Sydney, Simon Chapman.

Profesor di Australia memperingatkan kelompok agama tertentu terkait dugaan adanya kandungan sel darah babi pada filter rokok. Profesor Simon Chapman menyatakan itu merujuk pada penelitian di Belanda yang mengungkap bahwa 185 perusahaan berbeda menggunakan hemoglobin babi sebagai bahan pembuat filter rokok.

Menurut Hakim, sudah selayaknya umat Muslim yang mayoritas di Indonesia ini menjauhi barang yang nyata-nyata dilarang agama tersebut. Bukan hanya kaum Muslim, tetapi kaum Yahudi juga melarang pemanfaatan babi untuk keperluan seperti itu, tambahnya dalam dialog dalam rangkaian sosialisasi peraturan daerah (Perda) yang melarang merokok di tempat tertentu.

Dalam dialog yang dihadiri ratusan peserta dari kalangan PNS, pengelola hotel, restoran, dan pengelola tempat-tempat umum tersebut juga dihadiri Wali Kota Banjarmasin Haji Muhidin dengan moderator Kepala Dinas Kesehatan setempat, drg Diah R Praswasti.

Dalam dialog tersebut dilangsungkan dengan tanya jawab yang antara lain disarankan perlunya Fatwa Majelis Ulama Indonesia (MUI) yang mengharamkan merokok.

Kamis, 10 Oktober 2013

Membuat Slideshow Gambar Ala Yahoo

Meskipun sudah lama sekali saya tidak menulis karena banyak sekali kesibukan, kali ini saya akan menyempatkan waktu untuk berbagi dengan teman-teman semua mengenai cara membuat slide gambar seperti yang biasa kita lihat di id.yahoo.com. Sebelumnya saya sudah pernah membahas tentang memasang gambar slid ala drakon template dan zinmag primus, bagi yang belum menyimak bisa dilihat kembali.

Banyak saya temui blog yang sudah memakai animasi image slider dengan berbagai macam variasi. Blog akan semakin menarik dan lebih hidup dengan tampilan silih berganti dari text dan image yang disetting pada slider. Penempatan animasi slider Yahoo ini biasanya diletakkan tepat di bawah header tengah. Namun, Anda pun bisa menyesuaikannya pada desain template blog masing-masing. 

slideshow yahoo

Gambarnya kira-kira seperti diatas, jika anda ingin melihat demonya bisa dilihat disini. Bagaimana? Jika temen-temen tertarik untuk memasang slideshow ala Yahoo di blog masing-masing, maka bersiaplah dipusingkan dengan begitu banyaknya kode CSS dan setting gambar, link serta setting teks yang lumayan membingungkan. Kalau sudah terbiasa sih, pasti gampang. Paling tidak patut dan layak untuk dicoba.

Langkah Pertama
  1. Login ke blogger dengan akun anda
  2. Kemudian klik Tata Letak > pilih Edit HTML
  3. Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
  4. Letakkan kode berikut di atas kode ]]></b:skin
Langkah Kedua
  1. Masih dalam dalam posisi Edit HTML. Sekarang letakkan kode berikut ini di atas kode </head>

  2. Sampai disini masih mudah kan? Oya jika anda ingin meletakkan hari, tanggal dan bulan serta tahun seperti yang ada di demo, letakkan kode berikut di bawah kode diatas :

  3. Jangan lupa, jika anda sudah memasang kode javascript untuk waktu diatas, kode <body> pada template harus diganti dengan :
      <body onLoad='goforit()'>
  4. Save/simpan template terlebih dahulu sambil sejenak istirahat, sabar ya siapkan secangkir kopi atau teh biar agak adem sambil mendengarkan musik kesukaan anda. Masih ada satu langkah lagi
Langkah Ketiga
  1. Sekarang anda harus membuat satu kolom di atas postingan untuk meletakkan kode slide nantinya. Langsung saja letakkan kode berikut di atas kode ]]></b:skin>
    1. /* Slide Content 
    2. ----------------------------------------------- */  
    3. .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;floatleft;  
    4. word-wrap: break-word; overflowhidden;}   
    5. .slide {color#666666;line-height1.3em;}  
    6. .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}  
    7. .slide li {margin:0;padding-top:0;  
    8. padding-right:0;padding-bottom:.25em;  
    9. padding-left:0px;text-indent:0px;line-height:1.3em;}  
    10. .slide .widget {margin:0px 0px 6px 0px;}  
  2. Kemudian untuk memunculkannya pada template (diatas postingan), anda harus memanggilnya. Cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya :
    1. <b:if cond='data:blog.url == data:blog.homepageUrl'>  
    2.       <div id='slide-wrapper'>  
    3. <b:section class='slide' id='slide' preferred='yes'/>  
    4.       </div>  
    5. </b:if>   
  3. Setelah anda membuat satu kolom diatas postingan, klik menu Tata Letak >> Elemen Laman
  4. Klik Tambah Gadget >> pilih HTML/Javascript
  5. Copy kode di bawah dan letakkan di kotak HTML/Javascript
    Keterangan :
    -  Warna biru : URL image
    -  Warna merah : URL post
    -  Warna kuning : Ringkasan post
    -  Warna hijau : judul post
  6. Jika layout pada template Anda sudah terdapat satu kolom kosong di atas post, langkah ini tidak perlu. Langsung saja add gadget kemudian letakkan kode script diatas.
  7. Kemudian save/simpan template selesai sudah
Ribet banget ya, kalau ribet nggak usah dipasang masih banyak slider lain yang lebih gampang cara memasangnya dan tidak kalah menarik dengan slider Yahoo ini. Saya hanya memberikan alternatif lain untuk menghias blog agar tampak lebih menarik. Jika teman-teman sering meringkas kode javascript yang terlalu panjang di googlecode, sebaiknya diringkas saja selain terlalu panjang juga akan meringankan loading blog anda.  Selamat mencoba dan berpusing ria jika ada yang mau ditanyakan isi kotak komentar yang ada di bawah. Jika ada waktu senggang Insya Allah saya jawab.

Sumber : http://www.maskolis.com/2011/12/membuat-slideshow-gambar-ala-yahoo.html

Rabu, 09 Oktober 2013

Daftar Isi Otomatis Super Ringan

Cara Membuat Daftar Isi Otomatis Super Ringan - Pada postingan saya kali ini saya akan sedikit share tutorial blog tentang "Cara Membuat Daftar Isi Otomatis Pada Blogspot". Setelah pada  postingan saya sebelumnya saya telah menjelaskan tentang "Bagaimana Membuat Artikel Berkualitas Dalam Waktu Singkat". Namun pada pertemuan kali ini saya hanya akan membahas cara memasang daftar isi pada blogspot.
Memasang daftar isi pada blog menurut saya baik untuk SEO (Search Engine Optimization). Karena dengan memasang daftar isi pada blog, mesin pencari bisa lebih meningkatkan kemampuanya untuk mengindeks blog anda sehingga blog anda akan lebih di sayang oleh Google.

Selasa, 08 Oktober 2013

Cara Membuat Random Post With Thumbnail

Postingan ini adalah jawaban untuk pertanyaan sobat saya via email, yaitu Cara membuat widget Random Post atau artikel acak dengan gambar kecil (with thumbnail) keren dan loading ringan. Untuk demonya silahkan lihat pada sidebar kanan blog ini. Langkah-langkah membuat random post dengan gambar tersebut adalah sbb :

Langkah-langkah Widget Random Post/Postingan Acak dengan Gambar (Thumbnail) :
1. Login ke Blogger.

2. Masuk ke menu Layout atau Tata Letak

3. Tambahkan Gadget, Pilih HTML/JavaScript

4. Copy semua kode dibawah ini dan pastekan ke kolom widget.

<style>
<!--
#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}
-->
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=60;
var rdp_info='yes';
var rdp_comment='Comment';
var rdp_disable='';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1BiXdDTCyD4kEWrZq8wpITzZHY5zzqJbkYWVK5uEwBAT0oTNHWAmlsgDotFOeMA0-HtkEiOVlEhDa0BQSqT0ky8DqjjVZzNmm1DoY3Z6prkYErhQaixpW9NkDVCXQ63VziytMlSdDNoAL/"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

5. Simpan dan lihat hasilnya.


Keterangan :
Angka 5 menunjukan jumlah artikel yang ditampilkan
Angka 60 Jumlah isi cuplikan
Kata 'Yes' adalah pilihan untuk memperlihatkan tanggal dan jumlah komentar, jika ingin menyembunyikan tanggal dan jumlah komentar, silahkan ganti dengan 'no'
Jika ingin merubah ukuran gambar bisa anda ubah pada opsi width:36px;heigth:36.

Screenshot :
Screenshot Random Post With Thumbnail

Keunggulan Random Post With Thumbnail (Dengan Gambar)
1. Loading Ringan
2. Tanpa perlu kode CSS atau edit kode template tinggal tambahkan Widget HTML/Javascript
3. Gampang diedit
Sumber: 
http://karaokebatak.blogspot.com/2013/02/cara-membuat-random-post-with-thumbnail.html

Senin, 07 Oktober 2013

Cara Membuat Random Post Dengan Thumbnail

Cara Membuat Random Post Dengan Thumbnail
Membuat random post dengan gambar atau thumbnail di blog memang tidak terlalu sulit. Banyak sekali blogger yang memasang berbagai macam widget pada blognya. Namun widget-widget tersebut kurang memberikan efek atau manfaat yang terasa pada kemajuan blog.

Blog yang berkualitas juga dilihat dari tampilan widget-widget yang dipasang. Salah satu widget yang banyak digunakan oleh banyak blogger adalah widget random pos, baik itu Random Post yang biasa saja atau pun random post yang dilengkapi dengan thumbnail atau gambar

Random Post

Random post atau yang sering disebut dengan artikel "sembarang" adalah widget yang menampilkan postingan/artikel blog kita secara acak baik itu artikel yang baru dibuat atau pun artikel yang sudah sangat lama, sehingga artikel-artikel lawas anda dapat kembali dibaca oleh pengunjung blog.
Tentu saja ini sangat menguntungkan, karena dengan random post ini pageviews pada tiap artikel blog saudara bisa meningkat dari sebelumnya. Dan memberikan efek yang bisa dibilang cukup besar dalam meningkatkan kualitas blog saudara.

Cara Memasang Random Post Beserta Thumbnail

Sama halnya dengan Popular Post yang bisa dipasangi gambar, Random post yang akan saya bagikan kali ini juga sudah saya modifikasi dengan gambar sehingga akan mempercantik tampilannya. Tidak hanya itu, pada random post saya kali ini juga ada ringkasan postinganya yang dapat membuat pengunjung tertarik untuk membacanya.
Buat anda yang tertarik memasang widget random post ini, silahkan ikuti langkah-langkah sederhana di bawah ini:
1. Login dengan akun blog saudara
2. Masuk ke menu TATA LETAK
3. Klik tambah gadget --> pilih HTML/Javascript
4. Masukan script di bawah ini:
<style>
.rp-post-link {
font-weight: bold !important;
font-size: 12px !important;
}
.rp-summary {
margin-bottom: 5px !important;
border-bottom: 1px dotted #686868;
font-size: 12px !important;
line-height: 20px !important;
word-wrap: break-word !important;
}
.rp-thumbnail {
margin: 5px 5px 2px 0px !important;
float: left !important;
width:60px;height:60px;
}
.rp-pubdate {
font-style: italic !important;
margin-bottom: 3px !important;
}
</style>
<script type="text/javascript">
var randarray = new Array();
var l=0;
var flag;
var lengthsummary = 120; //Jumlah karakter postingan yang ditampilkan
var numofpost=5; //Jumlah postingan yang ditampilkan
function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0; i < numofpost;){
flag=0;
randarray.length=numofpost;
l=Math.floor(Math.random()*total);
for(j in randarray){
if(l==randarray[j]){
flag=1;
}
}
if(flag==0&&l!=0){
randarray[i++]=l;
}
}
document.write('<div>');
for(n in randarray){
var p=randarray[n];
var entry=json.feed.entry[p-1];
var item ="";
var posttitle = entry.title.$t || "[Untitled]";
"[Untitled]"
for(k=entry.link.length -1; k >= 0 ; k--){
if(entry.link[k].rel=='alternate'){
item +="<a class='rp-post-link' href='" + entry.link[k].href + "'>" + posttitle + "</a>";
break;
}
}
item += "<br"
item += "/>"

if('media$thumbnail' in entry)item += "<img class='rp-thumbnail' src='" + entry.media$thumbnail.url + "'>"
var summary = "";
if ("content" in entry) {
summary = entry.content.$t;
}
else if ("summary" in entry) {
summary = entry.summary.$t;
}
var re = /<\S[^>]*>/g;
summary = summary.replace(re, "");
item += "<p class='rp-summary'>" + summary.substring(0,lengthsummary) + " ...</p>";
document.write(item);
}
document.write('</div>');
}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript">
</script>
Keterangan kode di atas:
  • Kode warna Hijau: Mengatur lebar dan tinggi gambar/thumbnail pada random post nanti.
  • Kode warna Merah: Jumlah Postingan yang ingin ditampilkan.
  • Kode warna Biru: Jumlah karakter/huruf pada ringkasan yang ingin ditampilkan.
5. Klik simpan dan lihat hasilnya.

Bagaimana? Mudah bukan membuat random post yang disertai dengan thumbnail. Pada artikel mendatang, saya akan membuat artikel tentang "Bagaimana Membuat Random Post Bergerak di Blog". Jadi jangan lupa yah, pantau terus artikel-artikel terbaru di blog ini <^-^>.
 
Sumber : http://ngeblog07.blogspot.com/

Cara Hilangkan Auto Read more di Blogspot

Pernahkan anda berfikiran ingin menghilangkan fungsi Auto Read More (baca selengkapnya) dalam template blog? Mungkin ada merasa kurang pas dengan Auto Readmore dan lebih menyukai postingan yang penuh. Karena template-template yang dibuat kebanyakan sudah tersedia auto readmore.



Apabila ingin menghilangkan Auto Readmore (Baca Selengkapnya) dalam blogspot berikut langkah-langkahnya.
  1. Login pada akun blog anda.
  2. Masuk ke Template > Edit HTML> centang  Expand Widget Templatesa
  3. Cari Kode "READ MORE" (perhatikan spasinya) atau Baca Selengkapnya dalam Template. Gunakan CTRL + F untuk mempermudah pencarian.
  4. Hapus kode tersebut mulai dari <div sampai </div> , Script READ MORE mungkin berbeda untuk setiap BLOG. jika saya menghapus tulisan yang ini
<div class='readmorecontent'><a class='readmore' expr:href='data:post.url'><b>Read more &#187;</b></a></div>
  1. jika sudah, sekarang cari kode
summary_noimg =
  1. jika sudah, kamu akan menemukan tulisan . * nilainya mungkin berbeda untuk setiap BLOG
<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>
Setelah itu Anda hapus kode yang berwarna merah seperti di atas. 
  1. Klik Priview, Lihat Hasilnya, kemudian Save Template Anda
Selamat Auto Readmore anda telah jadi.

Sumber : http://www.blogjoko.com/

Cara Membuat Menu Navigasi Horisontal

Template default bawaan blogger biasanya minim sekali dengan widget-widget termasuk menu navigasi. Terkecuali jika kita mendownload sendiri template dari blog lain. Menu navigasi penting artinya untuk meningkatkan kunjungan ke blog kita, walaupun masih ada cara lain seperti menambahkan label, recent posts, related posts ataupun popular posts di blog kita. Menu navigasi biasanya terdiri dua macam; vertikal dan horisontal. Menu navigasi Vertikal atau menu navigasi lurus ke atas biasanya diletakkan di sidebar, sedangkan menu navigasi horisontal kita letakkan di atas judul posting atau di bawah header/judul blog.
menu navigasi horizontal bercabang
Membuat menu navigasi bisa dilakukan dengan berbagai cara, bisa memasukkan kode css ke dalam template, ini permanen tentunya, dan cara yang kedua cukup menambahkan widget dengan memasukkan kode tertentu ke dalam widget/gadget tersebut. Pada tutorial ini saya akan membuat menu navigasi horizontal dengan cara yang cukup mudah yang letaknya di bawah header.

Oke langsung saja bagaimana cara membuat menu navigasi horisontal bercabang,
Masuk ke akun blogger> Dasbor > tata letak > Tambahkan gadget > pilih HTML/Javascript, kemudian masukkan kode berikut ini. (Jangan lupa saat menambahkan gadget, pilih gadget yang di bawah header.)

Cara Merubah Lebar Kolom Template

Barangkali ada beberapa dari teman-teman semua yang merasa sangat menyukai suatu template, akan tetapi ada ganjalan yakni lebar kolom yang ada tidak sesuai keinginan kita, baik itu lebar kolom sidebar atau pun mainbar (kolom tempat posting). Ada kalanya lebar kolom dari suatu template di rasa terlalu lebar ataupun terlalu sempit, nah jika anda mengalami hal yang demikian, kali ini saya akan berikan tips buat mengakalinya supaya lebar kolom menjadi sesuai dengan keinginan kita sendiri.

Untuk mengetahui lebar kolom suatu template, kita bisa mengenalinya melalui style sheet CSS nya. Akan tetapi tentu saja ada perbedaan antara satu template dengan template yang lainnya, ini tentunya terserah kepada si designer template nya sendiri. Sebagai contoh untuk bagian header, jika menurut standar template blogger di dalam style sheet CSS nya di namakan header, akan tetapi untuk template-template hasil buatan designer lain di luar blogger ada yang menamakan Banner ataupun nama-nama yang lainnya. Sebuah nama tentu tidak akan berpengaruh terhadap hasil yang di dapat, nama ini dipakai hanyalah agar mudah untuk di ingat atau di kenali oleh sang pemakai template apabila ingin melakukan editting template.

Agar tidak terlalu membingungkan, saya ambil contoh template minima 3 kolom yang bisa di download di sini !.Setelah melihat perkembangannya ternyata template ini banyak yang menyukainya. Jika anda tidak puas dengan lebar kolom pada template tersebut, silahkan deh ikuti tips berikut biar lebar kolomnya sesuai dengan keinginan anda. Dimanakah letak kode-kode untuk mengatur lebar kolom ? saya berikan contoh :
#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
} #main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;
}
#sidebar-wrapper {
width: 220px;
float: right;
}
#newsidebar-wrapper {
width: 200px;
float: left;
}
Seperti yang terlihat pada kode-kode diatas, yang mempengaruhi lebar kolom adalah yang saya cetak merah. Width tentu saja dalam bahasa indonesia adalah lebar, jadi gampangkan untuk mengenalinya. 900px adalah nilai lebar yaitu sebesar 900 pixel.

Agar lebih mudah dimengerti, kode-kode diatas saya uraikan :
#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Ini artinya header-wrapper mempunyai lebar sebesar 900px dan mempunyai border (saya artikan border adalah bingkai atau garis tepi) sebesar 1 pixel dengan garis yang solid (solid = garis penuh. dashed = garis putus-putus. dotted = garis berupa titik-titik) dengan warna border yang bisa di ubah-ubah (pada bagian font dan warna). Header-wrapper adalah hanya penamaan saja, tidak mutlak. Jika di ganti dengan nama kepala juga tidak apa-apa. width:900px; berarti lebarnya sebesar 900 pixel. nah nilai 900 pixel inilah yang bisa di ubah sesuai keinginan anda, mau ditambah nilainya biar lebih lebar, atau di kurangi biar lebih kecil. Akan tetapi saran saya, nilai dari header ini harus sama dengan nilai dari lebar body agar terlihat bagus. border:1px solid $bordercolor; adalah agar bagian header mempunyai garis tepi sebesar 1 pixel, jika ingin lebih tebal anda tinggal tambahin nilainya, atau jika anda menginginkan garis tepi ini tidak ada maka hapus saja kode ini.
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}
Ini artinya outer-wrapper mempunyai lebar sebesar 900px, jarak sela sebesar 10 pixel dengan align nya adalah rata kiri-kanan dan jenis huruf yang bisa di ubah-ubah melalui panel huruf dan warna. Outer wrapper hanyalah nama saja. width:900px; berarti lebarnya 900 pixel. 900 pixel ini adalah lebar yang di sediakan untuk kolom-kolom yang ada, sebut saja dalam hal ini kolom main-wrapper, sidebar-wrapper, dan newsidebar-wrapper. Jadi dengan kata lain outer wraper adalah hasil penjumlahan lebar kolom main-wrapper, sidebar-wrapper, dan newsidebar-wrapper. Apabila anda memasukan content yang melebihi lebar kolom masing-masing, maka secara otomatis pula melebihi spek dari lebar yang di sediakan oleh outer wraper dan yang terjadi adalah salah satu kolom akan melorot ke bawah dan ini membuat blog kita menjadi kurang sedap untuk di pandang mata. Jadi apabila anda ingin mengubah lebar salah satu kolom di antara yang tiga, maka lebar dari outer wraper pun harus di ubah dan di sesuaikan.
#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;
}
Ini artinya kolom main-wrapper mempunyai lebar sebesar 435 pixel dengan margin kanan sebesar 20 pixel, margin kiri 20 pixel dan kolom ini di letakan sebelah kiri. Main-wrapper adalah kolom halaman posting, apa-apa yang kita posting maka akan masuk ke halaman ini. width: 435px; berarti lebar kolom ini sebesar 435 pixel, tapi karena menggunakan margin-left dan margin-right, maka lebar kolom sebenarnya adalah sebesar 475 pixel. Akan tetapi yang 40 pixel hanyalah jeda saja agar batas kolom menjadi terlihat tidak bersentuhan. Apabila anda merasa kolom ini terlalu sempit atau kekecilan, maka anda bisa menambahkan nilai, contoh 550 pixel. Apabila anda berniat merubah kolom ini, kolom outer-wraper pun harus di tambah nilainya. contoh tadi apabila main-wrapper ingin menjadi 550 pixel, maka 550px-475px=75px. ini berarti kolom outer-wraper harus di tambah sebesar 75px, jadi 900px+75px=975px.
#sidebar-wrapper {
width: 220px;
float: right;
}
Ini artinya kolom sidebar-wrapper mempunyai lebar sebesar 220 pixel dan di tempatkan sebelah kanan layar. Kolom sidebar-wrapper adalah kolom sidebar atau kolom tempat di mana kita menyimpan berbagai aksesoris atau yg lainnya. width: 220px; berarti mempunyai lebar sebesar 220 pixel, apabila ingin di persempit atau di perlebar, maka kita hanya perlu mengubah nilai pixelnya saja. Cuma apabila merubah nilai kolom ini, jangan lupa untuk mengubah nilai space yang di sediakan oleh outer-wraper. contoh : apbila kolom ini ingin diperbesar menjadi 250pixel maka tambahan pixel adalah sebesar 30 pixel, nah jangan lupa untuk menambahkan pula pada kolom outer-wraper.
#newsidebar-wrapper {
width: 200px;
float: left;
}
Ini artinya kolom newsidebar-wrapper mempunyai lebar kolom sebesar 200 pixel dan di tempatkan pada layar sebelah kiri. Seperti halnya sidebar-wrapper, kolom newsidebar-wrapper pun adalah tempat menyimpan berbagai aksesori ataupun blog tool. kolom ini di buat agar kita bisa lebih banyak memuat berbagai aksesori yang kita inginkan. Kolom newsidebar-wrapper ini lebarnya sebesar 200px, nah bila berniat merubahnya maka tinggal merubah nilai pixelnya saja, tapi jangan lupa untuk menambahkan pula pada kolom outer-wraper.

Demikian tadi tutorial singkan mengenai cara merubah lebar kolom template di blog kita. Semoga dapat dimengerti dan selamat mencoba.

Minggu, 06 Oktober 2013

Ensiklopedi Sejarah Islam, hingga Dinasti Mamluk

Nama Buku : Ensiklopedi Sejarah Islam
Ukuran/Hal : 15.5 x 24.5 cm/ 1012 halaman / 1500 gr
Penulis : Tim Riset dan Studi Islam Mesir
Penerbit : Pustaka al Kautsar

Harga : Rp 195.000,- Rp 170.000,-

Anda Hemat: Rp 25.000,-

Pemesanan: 0857 2745 2727

 

Buku ini merupakan ensiklopedi praktis (al-mausu’ah almuyassarah) berdasarkan kronologis sejarah, dari mulai kehidupan Nabi Muhammad Shallallahu Alaihi wa Sallam sampai Dinasti Mamluk.
Penulis juga berusaha membuat kronologi sejarah secara ringkas, runut, mudah dipahami, dan tidak bertele-tele. Analisa sejarahnya yang disertai dengan hadits-hadits shahih, akan membawa pembaca untuk melihat sejarah dengan kacamata yang jernih.

 

Cara Menghilangkan Slide di Blog

Kali ini saya akan memberikan sebuah Tutorial blog tentang Cara Menghilangkan Slide di Blog. Jika anda telah mengganti Template baru pada blog. Mungkin template tersebut ada slidernya. Nah, slidenya itu menurut anda kurang bagus dan ingin menghapusnya.
bisa kok anda menghapus slidenya . OK Langsung saja ke langkah-langkahnya..



Berikut langkah-langkah menghapus slide show anda :
1. Seperti biasa anda Log-in dulu ke blog
2.Next. Pilih template lalu klik Edit HTML
3.Kemudian Cari dan Hapus kode ini :

 <!-- Featured Content Slider Started -->

Blok sampai kode ini :

<!-- Featured Content Slider End -->

4.Kalou Udah Selesai, simpan template

Kisah Teladan

Nama Buku : Kisah Teladan dalam Hadits
Ukuran/Hal : 14 x 20 cm / 168 halaman
Penulis : Hamid Ahmad Ath-Thahir
Penerbit : Aqwam

Harga : Rp 34.000,- Rp 31.000,-

Anda Hemat: Rp 3.000,-

Pemesanan: 0857 2745 2727

 

 

Template default bawaan blogger biasanya minim sekali dengan widget-widget termasuk menu navigasi. Terkecuali jika kita mendownload sendiri template dari blog lain. Menu navigasi penting artinya untuk meningkatkan kunjungan ke blog kita, walaupun masih ada cara lain seperti menambahkan label, recent posts, related posts ataupun popular posts di blog kita. Menu navigasi biasanya terdiri dua macam; vertikal dan horisontal. Menu navigasi Vertikal atau menu navigasi lurus ke atas biasanya diletakkan di sidebar, sedangkan menu navigasi horisontal kita letakkan di atas judul posting atau di bawah header/judul blog.
memasang menu navigasi horizontal
menu navigasi horizontal bercabang
Membuat menu navigasi bisa dilakukan dengan berbagai cara, bisa memasukkan kode css ke dalam template, ini permanen tentunya, dan cara yang kedua cukup menambahkan widget dengan memasukkan kode tertentu ke dalam widget/gadget tersebut. Pada tutorial ini saya akan membuat menu navigasi horizontal dengan cara yang cukup mudah yang letaknya di bawah header.

Oke langsung saja bagaimana cara membuat menu navigasi horisontal bercabang,
Masuk ke akun blogger> Dasbor > tata letak > Tambahkan gadget > pilih HTML/Javascript, kemudian masukkan kode berikut ini. (Jangan lupa saat menambahkan gadget, pilih gadget yang di bawah header.)