Link Anchor Satu Halaman

Untuk mengobati rasa kekecewaan sobat idblogku akan memberikan tips dan trik memodifikasi menu link anchor satu halaman. Saat sobat berkunjung ke wikipedia.org atau sobat malah sudah sering berkunjung kesana, di wikipedia.org/wiki/blogger.com sobat akan melihat tampilan link anchor satu halaman biasanya bersifat daftar isi dari artikel tersebut.

Rasanya penasaran bagaimana caranya membuat link anchor satu halaman seperti wikipedia, dan akhirnya AHA idblogku menemukan.

Mau tahu bagaimana caranya membuat kombinasi menu link, sebelumnya sobat login dulu ke blog milik sobat, biar sobat tidak repot saat mengaplikasikannya. Berikut caranya :

Login ke blog sobat --> Entri Baru --> Edit HTML


<a href="#about">About</a> | <a href="#help">Help</a> | <a href="#testimonial">Testimonial</a>
<a name="about"></a>
<h4>About</h4>

Kami adalah jasa membuat website dan blog dengan menawarkan harga paling rendah namun dengan hasil berkualitas tinggi.
Pelajaran Blog adalah sarana online dalam belajar membuat blog juga belajar seo blogspot bagi blogger tingkat pemula.
Selain daripada itu,kami juga menyediakan berbagai pilihan blogger template yang seo friendly namun tetap tidak mengabaikan akan keindahannya.

Untuk seo,kami menyediakan tutorial dasar dalam teknik seo,trik seo,rahasia seo juga tips dan trik seo agar situs menjadi nomor 1 di halaman serach engine Google.
Buktikan dan bersiaplah menjadi miliarder baru dalam dunia internet!

<a name="testimonial"></a>
<h4><strong>Testimonial</strong></h4>

Pelajaran Blog is an online tool for the study also learn seo blog blogger blogspot for beginner level.
Other than that, we also provide a wide selection of blogger templates seo friendly but still do not ignore its beauty.

For SEO, we provide a basic tutorial in seo techniques, seo tricks, seo secrets seo tips and tricks as well to the site to be number 1 on page serach engine Google.
Prove it and be prepared to become new millionaires in the internet world!

<a name="help"></a>
<h4><strong>Help</strong></h4>

Pelajaran Blog adalah sarana online dalam belajar membuat blog juga belajar seo blogspot bagi blogger tingkat pemula.
Selain daripada itu,kami juga menyediakan berbagai pilihan blogger template yang seo friendly namun tetap tidak mengabaikan akan keindahannya.
Untuk seo,kami menyediakan tutorial dasar dalam teknik seo,trik seo,rahasia seo juga tips dan trik seo agar situs menjadi nomor 1 di halaman serach engine Google.
Buktikan dan bersiaplah menjadi miliarder baru dalam dunia internet!

Pelajaran Blog is an online tool for the study also learn seo blog blogger blogspot for beginner level.
Other than that, we also provide a wide selection of blogger templates seo friendly but still do not ignore its beauty.
For SEO, we provide a basic tutorial in seo techniques, seo tricks, seo secrets seo tips and tricks as well to the site to be number 1 on page serach engine Google.
Prove it and be prepared to become new millionaires in the internet world!

Memasang Jadwal Imsak

MARHABAN YA RAMADHAN

Bulan penuh Hidayah dan Ampunan

Hai sobat ayo bangun saur.. saur.. saur ayo keburu imsak.

Idahnyah bulan Ramadhan, tak terasa sobat muslim telah memasuki hari yang ke 14 menunaikan ibadah puasa, namun ada kalanya sobat tidak mengetahui jadwal imsak pada hari ini dan hari berikutnya. idblogku berusaha memahami sobat, dengan adanya widget imsak ini membantu pengunjung mengetahui jadwal imsak dan jadwal sholat.

tahu bagaimana memasang jadwal imsak, berikut caranya :

Sobat longin pada blog sobat, pilih Rancangan klik Tambah Gadget, pilih HTML/JavaScript. setelah itu copy paste kode berikut :

<iframe src="http://republika.co.id/app/imsakiyah" width="300" height="200"></iframe>

Simpan

Semoga Bermanfaat

Selamat Menunikan Ibadah Puasa
sumber : Republika

Membuat Read More Dengan Judul Posting

Istilah read more tidak asing bagi sobat blogger, yang berfungsi sebagai penghemat ruang dengan cara menyingkat tulisan yang akan ditampilkan. pada beberapa pekan yang lalu idblogku telah menyinggung mengenai read more manual dan read more otomatis.

Kali ini read more yang akan di bahas adalah read more dengan judul artikel seperti yang digunakan oleh idblogku.

tahu bagaimana cara membuat Read More Dengan Judul Posting, berikut caranya :

Seperti biasanya sobat longin ke blog sobat, lalu pilih Rancangan klik Edit HTML jangan lupa Expand template widget.

Cari kode :

<a expr:href='data:post.url'>Read more.....</a>

Hapus, ganti dengan kode berikut :

<a expr:href='data:post.url'>Read more.....&#8220;<data:post.title/>&#8221;</a>

Simpan template

Semoga Bermanfaat

Mengganti Tulisan Poskan Komentar Dengan Tulisan Berjalan

Semalam saat idbloku tertidur dengan pulas, tiba-tiba ada yang membisiki ditelingaku "coba kamu modifikasi blog pada bagian komentar" ku terbanggun dan merenungi mimpi itu apa ya?... ah mending tidur lagi.

Terinspirasi dari mimpiku semalam, terdiam sejenak apa yang akan saya amalkan hari ini?.. AHA kenapa tak kucoba menganti tulisan poskan komentar dengan tulisan berjalan atau marquee seperti terlihat saat ini pada kolom komentar idblogku.

tahu bagaimana cara Mengganti Tulisan Poskan Komentar Dengan Tulisan Berjalan, berikut caranya :

1. Loding ke blog sobat
2. Pilih Rancangan
3. Edit HTML
4. Expand Template Widget
5. Hapus code credit link di situs sobat lengkap dengan css dan kode pemanggilnya
6. Cari kode :

<data:postCommentMsg/>

7. Hapus kode tersebut, lalu ganti dengan kode berikut :

<marquee direction="left" width="100%" scrollamount="3" height="10" align="center">Tulisan Yang Akan di Munculkan</marquee>

8. Simpan Template

Sekarang sobat bisa liat hasilnya.

Semoga Bermanfaat

Membuat Read More Otomatis

MARHABAN YA RAMADHAN

Bulan penuh Hidayah dan Ampunan

Hari menjelang sore tubuh terasa tak bergairah, lemah, letih, lesuh, mata pun telah sayup-sayup ingin rasanya cepat pulang dan tidur, bila sobat yang ada di rumah langsung beranjak memeluk guling dan tidur dengan mimpi.

Dor.. week up ayo semangat, meskipun sobat sedang menunaikan ibaah puasa (bagi umat islam) bukan beraarti tidak ada inspirasai. Idblogku inspirasai dari sobat, menindak lanjuti mengenai Read More yang telah berlalu, namun masih dapat digunakan dan dimanfaatkan belum expayer, kaya produk aza.

Yuk bikin Read More Otomatis?.. Apa sic Read More dan bedanya dengan Read More Manual?..

Mungkin saat ini ada sobat yang bertanya-tanya seperti itu?.. cie idblogku ternyata bisa ngeramal juga He..He.. ga juga ah cuma memprediksi. Kembalik ke topik, dari ucapannya saja sobat sudah bisa bedakan.

Read More Manual merupakan metode penyingkat artikel di lakukan secara manual. Sedangkan Read More Otomatis sobat tidak perlu menyeting Edit HTML saat hendak membuat artikel, setelah terbitkan entri artikel akan secara otomatis memotong sendiri.

tahu bagaimana cara membuat Read More Otomatis, berikut caranya :

Hal pertama dan utama harus punya dan blog milik sendiri. Longin, pilih Rancangan klik Edit HTML, jangan lupa ceklist

Cari kode berikut :

</head>

Copy paste kode berikut, sebelum kode </head>.

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://sites.google.com/site/hitsukeproject/summarypost.js' type='text/javascript'/>

Selanjutnya cari kode :

<data:post.body/>

Bila sudah ketemu ganti kode tersebut dengan kode :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Read More </a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Akhirnya kelar juga jangan lupa simpan template sobat.

Keterangan :

Yang berwarna merah merupakan target utama, sobat ikuti petunjuknya, sedangkan yang berwarna biru sobat bisa atur sesuai dengan selera.

Semoga Bermanfaat

Ayo semangat, Sobat pasti bisa

Membuat Read More Manual

MARHABAN YA RAMADHAN

Bulan penuh Hidayah dan Ampunan

Seperti telah dijelaskan sebelumnya Read More merupakan metode untuk memotong / menyingkat isi artikel sobat yang di posting, ada 4 jenis read more salah satunya Read More manual.

tahu bagaimana cara membuat Read More Manual, berikut caranya :

Hal pertama yang dilakukan oleh sobat adalah longin ke akun blog sobat, klo tidak punya akun mau menyingkat isi artikel yang mana dan punya siapa?.. kembali ke blog, selanjutnya klik setelan dan seting format.

Copy paste kode berikut :

<span class="fullpost">

</span>

Sisipkan pada Templat Entri, jangan lupa SIMPAN SETELAN.

Setelah kode tersebut tersimpan pada templat entri sobat klik Edit HTML yang terdapat pada rancangan, ceklist Expand Template Widget selanjutnya cari kode berikut :

<p><data:post.body/></p>

atau

<data:post.body/>

Untuk mempermudahkan pencarian kode tersebut di antara rentetan kode yang lain gunakan Ctrl+F, sudah ketemu sobat?.. ganti kode tersebut dengan kode berikut ini :

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>

Simpan Template

Nah, untuk mengetahui hasilnya sobat memulai menulis artikel yang akan di posting, namun sebelum posting klik Edit HTML di sana terlihat subuah kode :

<span class="fullpost">

</span>

Tulis artikel yang akan terlihat sebelum kode <span class="fullpost">, sisanya tulis sebelum kode </span>. setelah selesai menulis artikel dan siap untuk di posting klik Terbitkan Entri, lihat hasil usaha sobat, posting sobat akan terlihat terpenggal dengan kalimat Read More.

Semoga Bermanfaat

WidGet Jam Islami

MARHABAN YA RAMADHAN
Bulan penuh Hidayah dan Ampunan

Pagi sobat.. Biasa pagi hari idblogku menyeduh segelas teh hangat sambil membaca koran dan sedikit cemilan, namun kali ini berbeda dari hari kemarin. Hari ini sobat umat muslim sedang dilatih untuk menahan haus dan lapar dari matahari terbit hingga matahari terbenam serta melatih mengendalikan hawa nafsu.

Dalam menyambut bulan ramadhan, idblogku insya Allah akan membahas Tips dan Modifikasi bernuansa Islami.

Waktu begitu penting sebagai tolak ukur sobat dalam melakukan kegiatan, pepatah mengatakan "Waktu adalah UANG" ada juga yang berpendapat "Waktu adalah PEDANG" mungkin di luar sana ada persepsi lain. Jam sebagi alat bantu untuk mengetahui waktu saat ini atau yang akan datang, saat ini beraneka ragam bentuk jam dari jam manual hingga digital dan hampir perangkat elektronik dan media dilengkapi dengan jam, salah satunya dengan widget jam Islami. Wiget jam Islami ini cocok bagi sobat blogger yang memiliki blog bertema keagaman Islam.

tahu bagaimana cara mengaplikasikan widget jam Islami , berikut caranya :

Bagian Pertama

1. Longin ke www..al-habib.info

2. Klik Get this clock

3. Atur Clock Face, Clock Background, Background Color, time Zone, Width, dan Height

   
   
 

4. Setelah terisi semua, selanjutnya klik tanda + [BLOG ME]

5. Copy kode tersimpan dibawa Embed Code

Bagian kedua

1. Longin ke blog sobat

2. klik Rancangan

3. Tambah Gadget, pilih HTML/JavaScrip

4. Pastekan kode yang sobat simpan di kolom HTML/JavaScrip

5. Simpan

Semoga Bermanfaat

Kucoba Seperti Dirinya

Selamat pagi sobat, apa kabar?.. Pagi yang cerah mulai deangan aktivitas positif.

Dua hari lagi sobat umat muslim akan menuniakan ibadah puasa, idblogku mengucapkan selamat menunaikan ibadah puasa "semoaga diterima amal ibahnya" amin.

Mendapatkan ilmu tak selamanya dibangku sekolah atau kuliah, melalui media interaksi online seperti blog sobat dapat menambah wawasan dan pengetahuan meskipun setelah kita bisa atau mahir tak akan mendapatkan ijazah.

Saya ingin berbagi ilmu kepada sobat dari sobat saya kucoba.com

Membuat Credit Link Profesional, pada akhir sebuah film, gosip, musik, kuis, atau sinetron, berita dan berikunya akan muncul credit sebagai informasi bagian-bagian yang terkait dalam pembuatan infotainment tersebut. seperti milik sobatku kucoba.com

Sobat membuat credit link profesional seperti kucoba.com :

1. Loding ke blog sobat
2. Pilih Rancangan
3. Edit HTML
4. Expand Template Widget
5. Hapus code credit link di situs sobat lengkap dengan css dan kode pemanggilnya
6. Cari kode :

]]></b:skin>

7. Tambahkan kode berikut di atas kode No.6

/*Credit Wrapper */ #credit-wrapper{background: #ddd;width:981px;margin:0 auto;filter:alpha(opacity=80);opacity:0.8;border:1px solid #777;} #link-wrapper {overflow:hidden;clear:both;width: 960px; margin:0 auto;padding:9px 10px 0px 10px; line-height: 1.5em;text-align:left; font-family: Arial;font-size:11px;color:#000;}

8. Selanjutnya ganti kode creditlink situs sobat dengan kode berikut:

<br/> </div> <div style='float:right;text-align:right;'> Template Development by <a href='http://www.idblogmaker.com'>Jasa Pembuatan Blog</a> and <a href='http://www.kucoba.com'>Kang Salman</a><br/> Proudly powered by <a href='http://www.blogger.com'>Blogger.com</a><br/>

</div>

<br/>
</div>

</div>

9. Simpan


Catatan :

• Tulisan warna merah sesuaikan dengan lebar blog sobat, sedangkan tulisan berwarna biru harus dikurangi juga dengan nilai yang sama, sehingga memiliki selisih 21 seperti di atas.
• Bagian latar sobat tentuan sendiri, di isi apa?..

Semoga bermanfaat..

Membuat Read More

Read more merupakan istilah sobat blogger untuk menyingkat isi posting atau artikel, Read More bukan hal yang baru dikalangan sobat sudah menggunakannya. Selain untuk mempersingkat isi artikel baik dengan kalimat, gambar, ataupun dengan modifikasi lainnya, Read More berfungsi sebagi alternatif menghemat ruang blog sobat .

Jenis-jenis Read More

1. Read more manual

2. Read more otomatis

3. Read more dengan gambar

4. Read more dengan judul posting

Sobat bisa memilih mau pasang read more type mana?.. Klo idblogku menggunakan Read More type yang ke 4.

Semoga Bermanfaat

Cara Merubah Warna Link

Hai sobat gimana kabarnya?.. Bagi beberapa sobat mungkin merasa jenuh atau bosan melihat garis link berwarna biru, emang pada dasarnya link pada blog berwana biru. Namun sobat bisa meubah warna link sesuai selera sobat.



tau bagaimana caranya merubah warna link :

1. Login ke blog sobat.
2. Klik Rancangan
3. Tambag gadget, pilih HTML/JavaScript
4. Copy kode berikut :

a:link {
color:#58a;
text-decoration:underline;
}

a:hover {
color:#c60;
text-decoration:underline;
}

a:visited {
color:#969;
text-decoration:underline;
}

5. Simpan

Catatan :

Tulisan warna merah merupakan kode warna, sobat bisa ganti dengan warna kesukaan atau warna favorit sobat.

Semoga bermanfaat..

Widget ini telah di uji di lab.idblogku, widget ini baca aturannya disini!

Post by idblogku

Cara Membuat Halaman Page ala Google

Halaman merupakan navigator / penunjuk suatu bacaan pada buku, majalah, tabloid, koran dan sebagainya berupa angka untuk mempermudah pembaca mencari judul tersebut dan sebagai penunjuk jumlah halamannya. Seperti pada google pada bagian bawah terdapat navigator halaman menunjukkan jumlah artikel pada 1 line.

Sobat membuat halaman / page ala google, berikut caranya :

1. Login ke blog sobat.
2. Klik Rancangan
3. Tambag gadget, pilih HTML/JavaScript
4. Copy kode berikut :

<br /> <br /> <style> .showpageArea a { text-decoration:underline; } .showpageNum a { text-decoration:none; border: 1px solid #ccc; margin:0 3px; padding:3px; } .showpageNum a:hover { border: 1px solid #ccc; background-color:#ccc; } .showpagePoint { color:#333; text-decoration:none; border: 1px solid #ccc; background: #ccc; margin:0 3px; padding:3px; } .showpageOf { text-decoration:none; padding:3px; margin: 0 3px 0 0; } .showpage a { text-decoration:none; border: 1px solid #ccc; padding:3px; } .showpage a:hover { text-decoration:none; } .showpageNum a:link,.showpage a:link { text-decoration:none; color:#333; } </style><br /> <br /> <br /> <script type="text/javascript"> function showpageCount(json) { var thisUrl = location.href; var htmlMap = new Array(); var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/"; var isLablePage = thisUrl.indexOf("/search/label/")!=-1; var isPage = thisUrl.indexOf("/search?updated")!=-1; var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : ""; thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable; var thisNum = 1; var postNum=1; var itemCount = 0; var fFlag = 0; var eFlag = 0; var html= ''; var upPageHtml =''; var downPageHtml =''; var pageCount=5; var displayPageNum=4; var firstPageWord = 'First'; var endPageWord = 'last'; var upPageWord ='Sebelumnya'; var downPageWord ='Berikutnya'; var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">'; for(var i=0, post; post = json.feed.entry[i]; i++) { var timestamp = post.published.$t.substr(0,10); var title = post.title.$t; if(isLablePage){ if(title!=''){ if(post.category){ for(var c=0, post_category; post_category = post.category[c]; c++) { if(encodeURIComponent(post_category.term)==thisLable){ if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){ if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } postNum++; htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount; } } } }//end if(post.category){ itemCount++; } }else{ if(title!=''){ if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){ if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } if(title!='') postNum++; htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount; } } itemCount++; } } for(var p =0;p< htmlMap.length;p++){ if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){ if(fFlag ==0 && p == thisNum-2){ if(thisNum==2){ if(isLablePage){ upPageHtml = labelHtml + upPageWord +'</a></span>'; }else{ upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>'; } }else{ upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>'; } fFlag++; } if(p==(thisNum-1)){ html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>'; }else{ if(p==0){ if(isLablePage){ html = labelHtml+'1</a></span>'; }else{ html += '<span class="showpageNum"><a href="/">1</a></span>'; } }else{ html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>'; } } if(eFlag ==0 && p == thisNum){ downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>'; eFlag++; } }//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){ }//end for(var p =0;p< htmlMap.length;p++){ if(thisNum>1){ if(!isLablePage){ html = '<span class="showpage"></span>'+upPageHtml+' '+html +' '; } } html = '<div class="showpageArea"> <span style="color:#fff;" class="showpage"> Total '+(postNum-1)+': </span>'+html; if(thisNum<(postNum-1)){ html += downPageHtml; } if(postNum==1) postNum++; html += '</div> '; if(isPage || isFirstPage || isLablePage){ var pageArea = document.getElementsByName("pageArea"); var blogPager = document.getElementById("blog-pager"); if(postNum <= 2){ html =''; } for(var p =0;p< pageArea.length;p++){ pageArea[p].innerHTML = html; } if(pageArea&&pageArea.length>0){ html =''; } if(blogPager){ blogPager.innerHTML = html; } } } </script><br /> <br /> <script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"> </script><br /> <br />

5. Simpan

Semoga bermanfaat..

Cara Menghilangkan Header

Header merupakan judul blog sobat sperti idblogku yang secara permanen nempel pada template bawaan, Namun sobat bisa memodifikasi blog pada bagian header dengan cara merubah menggunakan gambar atau menghilangkannya.

tahu bagaimana cara menghilangkan header, berikut caranya :

1. Loding ke blog sobat
2. Pilih Rancangan
3. Edit HTML
4. Expand Template Widget
5. Cari kode :

<div id='header-wrapper'>
 <div id='head-inner'>
 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widgetid='Header1' locked='true' title='idblogku (Header)' type='Header'>
<b:includable id='title'>
<cond='data:blog.url = = data:blog.homepageUrl'>

6. Ganti kode berwana merah, no ganti yes dan true ganti false.

Bila sobat masih bingggung???..Sobat cari kode :

<div id='header-wrapper'>

7. Simpan template

Selanjutnya

1. Elemen Laman
2. Klik Header
3. Pilih hapus
4. Simpan

Sekarang liat hasilnya


Semoga bermanfaat..
Widget ini telah di uji di lab.idblogku, widget ini baca aturannya disini!
Post by idblogku

Cara Membuat Recent Post Berdasarkan Kategori

Hallo sobat, memberikan kenyaman dan kemudahan dalam mengakses situs / blog sobat adalah tugas dari kita para blogger, dengan mengaplikasikan widget recent post berdasarkan kategori mempermudah pengunjung mendapatkan apa yang di cari.

Blog / situs sobat membuat recent post berdasarkan ketegori, berikut caranya :

1. Login ke blog sobat.
2. Klik Rancangan
3. Tambag gadget, pilih HTML/JavaScript
4. Copy kode berikut :

<div style="overflow:auto;width:100%px;height:300px;padding:10px;border:1px solid #000000">
<span id="pbl_labels"></span>
<div id="pbl_posts"> Recent Posts </div>
<script type="text/javascript">
var jumlah_maksimum_post = 10;
var dengan_ringkasan = true;
var jumlah_karakter_ringkasan = 100;
</script>
<script src="http://copycat91.googlecode.com/svn/trunk/recentpostsbylabel.js">
</script>
<script src="http://alamat.blogsobat.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed">
</script></div>

5. Simpan kode tersebut pada No.3
6. Simpan

Catatan :

• var jumlah_maksimum = 10 merupakan jumlah maksimum post yang tampil
• var dengan_ringkasan = true, sobat ganti dengan false nila tidak mau disertai ringkasan
• var jumlah_karakter_ringkasan = 100 merupakan jumlah karakter ringkasan post sobat

Semoga bermanfaat..

Cara Membagi 1 Kolom Menjadi 2 Kolom

Saat jalan-jalan menyusuri ruang dunia maya saya mampir ke blognya kang boogle, yang membuat saya terusik dan tertarik dengan artikel ini merupakan salah satu cara mengefisiensikan sidebar.

Sobat nyoba bagaimana cara membagi 1 kolom menjadi 2 kolom, berikut caranya :

1. Loding ke blog sobat
2. Pilih Rancangan
3. Edit HTML
4. Expand Template Widget
5. Cari kode :

]]></b:skin>

6. Copy All kode di bawah ini, lalu simpan di atas kode No.5

/* Kode Css List Two Kolom
------------------------------------------------------------*/
#catl {
  padding :5px 10px;
  width : 91%;
  background-color : #ffffdd;
  border : 1px solid #ccc;
  margin : auto;
}
#catl h3 {
display : block; color : #669900; padding-bottom : 5px;
margin-bottom : 5px; border-bottom : 1px solid #666;font-size:14px; }
/* style all the list items here */
#catl ul li {
  height : 1em;
  list-style-type : none;
  color : #333;
  padding : 0.3em 0 0.4em 0.25em;
  font-size : 0.9em;
  border-bottom : 1px solid #ccc;
  text-indent:0px;
}
/* every second list item is positioned outward and moved up equal to LI height to even them */
#catl ul li.catl_l2 {
  margin-left : 50%;
  margin-top : -1.8em;
  padding : 0.3em 0 0.4em 0.5em;
  border : 0;
} 
/* Every other two list items are styled with a background for usability and style */
.catl_alt {
  background-color : #fffffc;
}
/* ini merupakan code hacking css untuk Ie 6*/
* html #catl ul li.catl_l2 {
  margin-top : -2.3em;
}

7. Simpan

Masih dalam rancangan, selanjutnya klik tambah gadget pilih HTML/JavaScrupt. Copy paste kode berikut ini, lalu simpan.

<div id="catl">
<h3>Satu List Dua Kolom</h3>
<ul>
<li><a href="#">List Item Satu</a></li>
<li class="catl_l2"><a href="#">List Item Dua</a></li>
<li class="catl_alt">List Item Tiga</li>
<li class="catl_l2">List Item Empat</li>
<li>List Item Lima</li>
<li class="catl_l2">List Item Enam</li>
<li class="catl_alt">List Item Tujuh</li>
<li class="catl_l2">List Item Delapan</li>
</ul>
</div>

Catatan :
Yang perlu sobat perhatikan adalah tulisan antara tag <li> dan </li>

<li><a href="#">List Item Satu</a></li>
<li class="catl_l2"><a href="#">List Item Dua</a></li>


 Semoga Bermanfaat..

Widget ini telah di uji di lab.idblogku, widget ini baca aturannya disini!

Post by idblogku

Cara Membuat Judul Sidebar DI Tengah

Pagi sobat, perkembangan blog terus meningkat seiring perkembangan zaman baik dari segi konten, widget, gadget, dan Modifikasi blog yang tak akan pernah ada matinya, karena penampilan blog selalu menjadi perhatian pengunjung agar terlihat enak di pandang dan mudah mengasesnya.

Judul sidebar pada template blogger bawaan terletak pada samping kanan, namun sobat bisa memodifikasi judul sidebar tersebut di posisi tengah.

Sobat nyoba bagaimana cara membuat judul sidebar di tengah, berikut caranya :

1. Loding ke blog sobat
2. Pilih Rancangan
3. Edit HTML
4. Expand Template Widget
5. Cari kode :

   #sidebar-wrapper h2 {

5. Selanjutnya copy kode berikut :

   text-align : center;

6. Simpan kode tersebut di bawah #sidebar.
7. Simpan Tempalate

Semoga Bermanfaat..
Widget ini telah di uji di lab.idblogku, widget ini baca aturannya disini!
Post by idblogku

Membuat Label Dengan Gambar

Label merupakan item-item yang ada pada blog sobat, selama ini label yang sering sobat temukan berupa tulisan saja, bagaimana jika membuat label dengan thumbnail  (gambar) dari postingan sobat. 

Untuk demo sobat bisa lihat di mybloggerthemes.com yang terletak di bagian tengah bawah, dimana thumbnail yang muncul akan sesuai dengan label posting sobat. 

Dah tidak sabar nic ceritanya nyoba membuat label dengan thumbnail :

Login –> Rancangan –> Edit HTML –>  [ ceklis ] Expand Template Widget & Download Template Lengkap.

1. Tambahkan kode css berikut diatas ]]></b:skin> : 
   img.label_thumb {
   float:left;
   padding:3px;
   background:#CCC;
   border:1px solid #A4A4A4;
   width:100px;
   height:75px;
   margin-right:10px;
   margin-top:10px }
    
   img.label_thumb:hover {
   opacity:0.8;
   filter:alpha(opacity=80);
   -moz-opacity:0.80;
   -khtml-opacity:0.8 }
2. Kemudian tambahkan kode script berikut dibawah ]]></b:skin> : 
   <script type='text/javascript'>
   //<![CDATA[
   function labelthumbs(json){document.write('<div>');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='';}
   document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>');
   if(i!=(numposts-1))
   document.write('');}
   document.write('</div>');}
   //]]>
   </script>
3. Simpan Template.
4. Masuk ke Elemen Laman –> Tata Letak
5. Pilih salah satu gadget yang ingin sobat masukkan label, kemudian klik Tambah Gadget dan pilih yang HTML/Javascript.
6. Kemudian masukkan kode berikut kedalamnya :
   <script type='text/javascript'>var numposts = 6;</script>
   <script type="text/javascript" src="/feeds/posts/default/-/Modifikasi Blog?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Keterangan :

• Tulisan yang berwarna hijau adalah lebar dan tinggi thumbnail, sobat bisa sesuaikan dengan lebar widget template sobat.
• Tulisan yang berwarna biru untuk jumlah label yang akan di tampilkan.
• Dan tulisan yang berwarna merah untuk label yang akan sobat tampilkan, jangan sampai salah menulis labelnya, besar kecilnya huruf juga sangat mempengaruhi.

Semoga bermanfaat..
Widget ini telah di uji di lab.idblogku, widget ini baca aturannya disini!
Post by idblogku

Membuat Like dan Unlike Seperti Facebook

Hmm.. Facebook saat ini menjadi The king of social networking dan trend center, beberapa sitius jejaring baik yang lama atau yang baru mengikuti perkembangan facebook karena dinilai memiliki pengaruh besar saat ini. Facebook memiliki fitur yang unik baik dari segi desain maupun fasilitas didalamnya, salah satunya fasilitas like dan Unlike yang terdapat pada status, gambar, game, sponsor dan fasilitas lainnya, hal ini mempermudah untuk memberikan ratting (peringkat) dari sebuah status yang sobat tulis, foto yang sobat upload, game yang sobat mainkan, sponsor yang facebook pasang dan fasilitas lain yang terdapat fitur like dan unlike.

Fitur like dan unlike dapat sobat terapkan pada blog sobat sebagai parameter / indikator untuk mengetahui ratting dari artikel yang sobat posting di mata pembaca.

membuat like dan unlike seperti Facebook di blog sobat, ini caranya :

1. Longin ke blog sobat
2. Klik Rancangan
3. Klik Edit HTML
4. [ ceklis ] Expand Widget Template
5. Cari kode <div class='post-header-line-1'/>, untuk mempermudah tekan ctrl + F
6. Copy - paste kode berikut di bawah kode No. 5 :

<div style="float:left; margin-right:3px; "></div>
<div class="js-kit-rating"
expr:path="data:post.url"
expr:permalink="data:post.url"
expr:title="data:post.title"view="score">
</div>

Sehingga seperti ini.

<div class='post-header-line-1'/>

<div style="float:left; margin-right:3px; "></div>
<div class="js-kit-rating"
expr:path="data:post.url"
expr:permalink="data:post.url"
expr:title="data:post.title"view="score">
</div>

7. Selanjutnya mencari kode </body>, lalu copy - paste kode berikut diatasnya :

<script src="http://js-kit.com/ratings.js"></script>

Sehingga tampak seperti ini :

<script src="http://js-kit.com/ratings.js"></script>

</body>

8. Simpan template


Semoga bermanfaat..
Widget ini telah di uji di lab.idblogku, widget ini baca aturannya disini!
Post by idblogku

Cara Menjadi Terkenal Ala Lady Gaga

Pasti sobat tau siapa Lady Gaga?.. Itu loh penyanyi asal Amerika dengan tampilan nyentrik tapi menarik yang aksi panggungnya selalu menyita perhatian fansnya dengan hits single born this way, sampe-sampe Little Monster meniru dandanan ala lady Gaga untuk totalitas.

Sobat pun bisa menjadi terkenal ala Lady Gaga dengan menunjukkan kepada dunia seberapa populernya blog / situs sobat dengan widget popuri. Dalam widget ini akan menunjukkan Google Pagerank, Alexa Rank, Yahoo backlink dan blog Technorati.

Blog / situs sobat menjadi terkenal ala Lady Gaga, berikut caranya :

1. Kunjungi www.popuri.us.
2. Copy kode berikut :

<a href="http://popuri.us"><img alt="My Popularity (by popuri.us)"src="http://popuri.us/widgets/?type=light"/></a>

3. Login ke blog sobat.
2. Klik Rancangan
3. Tambag gadget, pilih HTML/JavaScript
4. Paste kode No. 2
5. Klik simpan


Semoga bermanfaat..
Widget ini telah di uji di lab.idblogku, widget ini baca aturannya disini!
Post by idblogku

Cara Unik Mengcopy Gambar

Pagi sobat, pagi seperti ini enaknya nyeduh kopi susu + STMJ sambil Online melihat trends google di dunia maya. Saya nyoba search dengan keyword (kata kunci) wallpaper unik, hasilnya sobat akan disajikan beranekaragam wallpaper unik ada salah satu image yang membuat mataku tak mau beralih "sekor bunglon terbelit oleh lidahnya sendiri saat hendak memangsa lalat" image ini mengandung sebuah arti "jangan pernah meremehkan yang lemah, karena kelemahan bisa menjadi kekuatan".

Jika sobat cara mengcopy gambar diatas, maka caranya adalah sebagai berikut :

• Pilih gambar
• Klik kanan pada mouse
• Pilih copy link image
• Salin alamat gambarnya.

Jika sobat mendownloadnya :

• Klik gambarnya (full picture)
• Save as image

Jika sobat memasang gambar tersebut di blog / situs :

<a href="alamat-blog/website sobat"><img src="alamat-gambar.jpg"/></a>

Contoh :

<a href="http://www.idblogku.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbQxYYtvasQ4CIWLkr9sT3LqnDYLkNsrjf0hwip7bm3kQzGVdQCk9OQZK0lnrqSujiL5hwwEe7OfyJVADuDzdUWzesrZGaX-yput-cl0fsVLF_viCIr9UaH7cMf62RDdEChPRJtEevaEHu/s1600-h/(4).jpg"width="150"height="150"/></a>

Keterangan :

• Warna merah adalah alamat web/blog yang akan anda tuju
• Warna biru adalah alamat gambar yang kita pilih
• sedangkan width dan height ukuran gambar yang kan kita pilih. di hitung dala jumlah px. jika width="150" height="150" maka artinya lebar gambar tersebut adalah 150px sedangkan tingginya 150px juga.

Semoga bermanfaat..
Widget ini telah di uji di lab.idblogku, widget ini baca aturannya disini!
Post by idblogku

Membuat Tab View Tanpa Edit HTML

Saat sobat memulai ngeblog, langkah awal mencoba memodifikasi blog agar tampak elegant dan enak di pandang mata. Salah satunya dengan cara mengedit HTML, namun sobat takut gagal sehingga bisa merusak template.

AHA.. idblogku mencoba berexsperimen dengan menyatukan semua kode yang ada dan meletakkan kode scrip langsung pada gadget, all hasil sobat tidak perlu susah payah mengedit HTML tempate blog anda lagi.

Berikut cara mengaplikasikan membuat tab view tanpa edit HTML di blogspot.
1. Login ke blogspot anda.
2. Rancangan
3. Elemen Halaman
4. Tambah Gadget
5. Pilih HTML/Javascript

<style type="text/css"> div.TabView div.Tabs{height:30px; overflow:hidden} div.TabView div.Tabs a{float:left; display:block; width:98px; text-align:center; height:30px; padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; border-bottom-width:0; text-decoration:none; font-family:"Verdana",Serif; font-weight:bold; color:#000; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px} div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active{background-color:#E6E6E6} div.TabView div.Pages{clear:both; border:1px solid #BDBDBD; overflow:hidden; background-color:#E6E6E6} div.TabView div.Pages div.Page{height:100%; padding:0px; overflow:hidden} div.TabView div.Pages div.Page div.Pad{padding:5px 5px} </style><br /> <script type='text/javascript'> //<![CDATA[ function tabview_aux(TabViewId, id){ var TabView = document.getElementById(TabViewId); // ----- Tabs ----- var Tabs = TabView.firstChild; while (Tabs.className != "Tabs") Tabs = Tabs.nextSibling; var Tab = Tabs.firstChild; var i = 0; do{ if (Tab.tagName == "A"){ i++; Tab.href = "javascript:tabview_switch('"+TabViewId+"',"+i+"); "; Tab.className = (i == id) ? "Active":""; Tab.blur()} } while (Tab = Tab.nextSibling); // ----- Pages ----- var Pages = TabView.firstChild; while (Pages.className != 'Pages') Pages = Pages.nextSibling; var Page = Pages.firstChild; var i = 0; do{ if (Page.className == 'Page'){ i++; if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px"; Page.style.overflow = "auto"; Page.style.display = (i == id) ? 'block':'none'} } while (Page = Page.nextSibling)} // ----- Functions ------------------------------------------------------------- function tabview_switch(TabViewId, id){tabview_aux(TabViewId,id)} function tabview_initialize(TabViewId){tabview_aux(TabViewId, 1)} //]]> </script><br /> <form action="tabview.html"method="get"> <div id="TabView"class="TabView"> <div style="width:300px; "class="Tabs"> <a>Judul 1</a><br /> <a>Judul 2</a><br /> <a>Judul 3</a><br /> </div> <div style="width:300px; height:250px; "class="Pages"> <div class="Page"> <div class="Pad"> Isi menu tab view 1 <br /> </div> </div> <div class="Page"> <div class="Pad"> Isi menu tab view 2<br /> </div> </div> <div class="Page"> <div class="Pad"> Isi menu tab view 3 <br /> </div> </div> </div> </div> </form> <script type="text/javascript"> tabview_initialize('TabView'); </script>

6. Simpan

Semoga bermanfaat..
Widget ini telah di uji di lab.idblogku, widget ini baca aturannya disini!
Post by idblogku