Optimize Images: Tutorial Page Speed mempercepat loading blog

Melanjutkan tutorial page speed sebelumnya, selain dengan menggunakan plugin WP Super Cache dan DB Cache Reloaded, optimize image penting untuk mempercepat loading blog Anda. Jumlah size file gambar dalam suatu blog yang terlalu besar memungkinkan lambatnya kecepatan loading blog. Entah itu file gambar dari theme yang digunakan atau gambar dari suatu postingan. Bagaimana cara memperkecil size file gambar (kompresi) untuk membuat loading blog lebih cepat?

Ada dua cara yang biasa saya gunakan untuk melakukan kompresi suatu gambar/image:

1. Menggunakan suatu software image editor dalam hal ini GIMP software (sesuai dengan rekomendasi Page Speed Google Code)

2. Optimasi langsung dengan menggunakan Page Speed yang terinstal di addon Firebug.

Kompres image dengan GIMP

GIMP adalah software image editor yang sangat sederhana dibandingkan software editor yang sejenisnya. Walaupun begitu, hasil editing gambarnya cukup memuaskan untuk memberikan gambar dengan kompresi yang diinginkan, tanpa harus merusak tampilan suatu gambar. Saya sendiri menggunakan sofware ini untuk crop dan resize image sebelum posting yang berisi gambar.

Optimize Images langsung di addon Firebug

Dalam analyze performance Page Speed addon Firebug, kriteria Optimize Images yang rendah akan memberikan pesan seperti ini, misalnya;

Optimizing the following image resources could reduce their size by 6.5KiB (32% reduction).

Artinya, file-file gambar yang teranalisa seharusnya dapat lebih dioptimasi dengan mereduksi sekian persen untuk size file gambarnya. Dari hasil analisa Page Speed, sudah disertakan versi file gambar yang sudah di-kompres dengan baik. Lakukan klik optimized version atau Save as untuk file gambar yang teranalisa kemudian simpan sesuai nama file dan ekstensi gambar yang ada dalam blog Anda. Selanjutnya timpa file gambar sebelumnya yang ada dalam blog Anda dengan versi file gambar yang sudah teroptimasi sesuai dengan keinginan addon Page Speed.

Setelah Anda melakukan dua cara optimasi gambar di atas, silahkan refresh halaman blog Anda dan lakukan analyze performance Page Speed. Lihat kriteria Optimize Images, apakah gambar tersebut benar-benar teroptimasi dengan baik?. Jika ya, checkmark warna hijau dan tidak ada lagi file gambar yang perlu dioptimasi menandakan Anda berhasil melakukan Optimize Images dan tentunya akses halaman blog Anda akan lebih cepat (minimize payload size) dari sebelumnya dan menghemat kapasitas bandwith hostingan Anda. Selamat mencoba Sob!

Download Sofware GIMP

www.gimp.org

Download Page Speed Google Code

code.google.com/speed/page-speed/

Read More

Cara Menampilkan Widget di Halaman Tertentu

Untuk menyambung pembahasan yang lalu, cara membuat tab view versi 1 atau versi 2, atau memasang buku tamu di sidebar. Ada trik lain yang sangat menguntungkan tang dapat diterapkan pada trik-trik diatas, yaitu kita dapat memunculkannya pada halaman tertentu saja. Keuntungannya kita dapat memperhemat sidebar kita dan juga dapat mempercepat loading blog kita. Karna kita bisa menampilkan widgetnya secara bergantian.

Untuk memasangnya ikuti langkah dibawah ini.

Masuk ke blogger acount anda, dan pilih Dashboard >> layout >> Edit html dan sebelumnya anda centang Expand Widget Templates.

Lalu cari kode dibawah ini:

<b:widget id='HTML1' locked='false' title='Shoutbox' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "index"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

NB:
Kata shoutbox yang bercetak tebal diatas menandakan title sidebar anda jadi harus disesuaikan

Jika Anda ingin menampilkan Shoutbox pada halaman depan saja maka tambahkan kode berwarna hijau diatas,

Berikut ini Tag lain yang bisa digunakan:

Untuk menampilkan widget pada homepage / halaman depan saja.

<b:if cond='data:blog.pageType == "index"'>
</b:if>

Untuk menampilkan widget pada halaman archive saja.

<b:if cond='data:blog.pageType == "archive"'>
</b:if>

Untuk menampilkan widget pada halaman artikel saja.

<b:if cond='data:blog.pageType == "item"'>
</b:if>

hanya menampilkan widget pada halaman tertentu saja. Ubah [masukkan URL] dengan halaman pada blog kamu yg widget yg kamu inginkan muncul.

<b:if cond="[masukkan URL]" == data:blog.url'>

Selain Tag diatas, kita juga dapat menampilan kebalikannya.
Caranya, ubah tanda = (samadengan) tang pertama dengan tanda ! (seru)

Misalnya, saya ingin menampilkan widget pada halaman selain homepage, maka kode yg digunakan :

<b:if cond='data:blog.pageType != "index"'>

 semoga ini semua dapat membantu teman bloger...
Sumber:http://blogkomputers.blogspot.com/2009/11/menampilkan-widget-di-halaman-tertentu.html

Read More

Cara Pasang Logo Bank di Side Bar Blog

Logo bank adalah satu keharusan mutlak bagi website atau blog yang berorientasi menjual produk atau jasa. Dengan memasukkan logo bank pada website blognya maka akan kelihatan bahwa website tersebut dapat dipercaya dan bonafid.  Adanya logo bank mencereminkan bahwa pemiliknya serius membangun usaha lewat internet marketing.
Logo bank juga merupakan usaha dari pemilik website untuk memudahkan bagi pengunjungnya untuk melakukan transaksi bisnis. Untuk itu dianjurkan anda untuk mempunyai beberapa buah logo bank dan rekening bank tentunya. Adapun logo bank yang wajib dipunyai adalah logo bank BCA, BRI, BNI dan Mandiri. Anda dapat dengan mudah mengunduh logo bank tersebut di website.
Sekarang bagaimana memasukkan logo bank tersebut di  side bar pada website blog anda? Untuk WordPress caranya sangat gampang yaitu:
1. Masuk ke menu admin dashboard WordPress.
2. Klik side bar menu Appearance – Widgets.
3. Pilih widget Text.
4. Beri judul widget Text. contoh : Cara order & pembayaran
5. Pada body widget Text isikan kode HTML seperti contoh dibawah ini:
<p>Kontak kami:</p>
<p></p>
<p>1. Telp atau SMS ke :</p>
<p>    HP : 0856-2109684</p>
<p>   (06.00 WIB – 22.00 WIB).</p>
<p>    Telpon : 022-6632765</p>
<p>    (17.00 WIB – 22.00 WiB)</p>
<p></p>
<p>2. Via email selama 24 jam : </p>
<p>    johannes_irfan@yahoo.com </p>
<p>    irfan2011@obatuntukdiabetes.com </p>
<p></p>
<p>3. Transfer pembayaran via :</p>
<p><img  src=”http://obatuntukdiabetes.com/wp-content/uploads/2011/06/logo-bank-bca-2.jpg”  (ganti dengan url tempat anda menyimpan logo bank)
alt=”BCA logo” width=”145″ height=”46″/> </p>  (atur width dan height dari logo)
<p><b> a. Bank BCA </b></p>
<p>       a/n Johannes Irfan</p>
<p>       No. Rek. 139-122-6453</p>
<p></p>
<p><img  src=”http://obatuntukdiabetes.com/wp-content/uploads/2011/06/logo-bank-bri.jpg”    (ganti dengan url tempat anda menyimpan logo bank)
alt=”BRI logo” width=”150″ height=”41″/> </p> (atur width dan height dari logo)
<p><b>  b. Bank BRI  </b></p>
<p>       a/n Johannes Irfan</p>
<p>        No. Rek. 0137-01-057963-50-1</p>
<p></p>
<p><img  src=”http://obatuntukdiabetes.com/wp-content/uploads/2011/06/bni-logo.gif”   (ganti dengan url tempat anda menyimpan logo bank)
alt=”BNI logo” width=”93″ height=”62″/> </p> (atur width dan height dari logo)
<p><b>  c. Bank BNI  </b></p>
<p>       a/n Johannes Irfan</p>
<p>        No. Rek. 0227235163</p>
<p></p>
<p>4. Harap segera kirim SMS setelah melakukan transfer pembayaran ke nomor HP : 0856-2109684 agar barang secepatnya dikirim dan agar anda lekas sembuh.</p>
<p></p>
<p>5. Kami buka 24 jam dan siap menerima order kapanpun.</p>
6. Klik Save untuk menyimpan perubahan.
Bukalah website anda dan hasilnya pada side bar website adalah :

Tag-tag HTML yang perlu diketahui untuk membantu anda adalah sebagai berikut :

Tag	Nama	Contoh	Hasil
<a	anchor	<a href=“http://obatuntukdiabetes.com/”> Diabetes Melitus </a>	Diabetes Melitus(text link)
<br>	line break	The contents of your page<br>The contents of your page	The contents of your web page The contents of your web page
<b>	bold/tebal	<b>Example</b>	Example
<center>	center	<center>This will center your contents</center>	This will center your contents
<em>	emphasis	This is an <em>Example</em> of using the emphasis tag	This is an Example of using the emphasis tag
<font>	font	<font face=”Times New Roman” size=”+3″ color=”#ff0000″>Example</font>	Example
<form>	form	<form action=”mailto:you@yourdomain.com”> Name: <input name=”Name” value=”" size=”10″><br> Email: <input name=”Email” value=”" size=”10″><br> <center><input type=”submit”></center> </form>	Name: (Tip) Email:
<h1> <h2> <h3> <h4> <h5> <h6>	heading 1 heading 2 heading 3 heading 4 heading 5 heading 6	<h1>Heading 1 Example</h1> <h2>Heading 2 Example</h2> <h3>Heading 3 Example</h3> <h4>Heading 4 Example</h4> <h5>Heading 5 Example</h5> <h6>Heading 6 Example</h6>
<i>	italic	<i>Example</i>	Example
<img>	image	<img src=”Earth.gif” width=”41″ height=”41″ border=”0″ alt=”text describing the image” />
<p>	paragraph	This is an example displaying the use of the paragraph tag. <p> This will create a line break and a space between lines. Attributes: Example 1:<br> <br> <p align=”left”> This is an example<br> displaying the use<br> of the paragraph tag.<br> <br> Example 2:<br> <br> <p align=”right”> This is an example<br> displaying the use<br> of the paragraph tag.<br> <br> Example 3:<br> <br> <p align=”center”> This is an example<br> displaying the use<br> of the paragraph tag.	This is an example displaying the use of the paragraph tag.This will create a line break and a space between lines. Attributes: Example 1: This is an example displaying the use of the paragraph tag.Example 2: This is an example displaying the use of the paragraph tag.Example 3: This is an example displaying the use of the paragraph tag.
<small>	small (text)	<small>Example</small>	Example
<strike>	deleted text	<strike>Example</strike>	Example
<strong>	strong emphasis	<strong>Example</strong>	Example

Contoh kode HTML yang ketika diklik maka akan menuju ke alamat url yang ditetapkan:
<p><a href=”http://www.scrubtheweb.com/” title=”Free SEO Tools”><img
src=”http://www.scrubtheweb.com/graphics/seotools.gif”
alt=”Free SEO Tools” width=”88″ height=”31″ /></a></p>
Hasilnya :

Contoh lainnya adalah sebagai berikut :
Cara membuat, memasang, dan menampilkan  logo bank BCA di sidebar

No Rek : Nomer Rekening

A/N : Nama Anda

<span style="font-family: Verdana,Arial,Helvetica,sans-serif; font-size: x-small;">          </span><br />
<div align="center">
<span style="font-family: Verdana,Arial,Helvetica,sans-serif; font-size: x-small;"><img height="48" src="http://obatuntukdiabetes.com/wp-content/uploads/2011/06/logo-bank-bca-2.jpg" width="100" /></span></div>
<div style="text-align: center;">
<b><span style="font-size: x-small;"><span style="font-family: Verdana,Arial,Helvetica,sans-serif;">No Rek : Nomer Rekening</span></span></b></div>
<div align="center">
<b><span style="font-family: Verdana,Arial,Helvetica,sans-serif; font-size: x-small;"><span style="font-family: Verdana,Arial,Helvetica,sans-serif;">A/N&nbsp;</span>: Nama Anda</span></b></div>
<div align="center">
<span style="font-family: Verdana,Arial,Helvetica,sans-serif; font-size: x-small;"><br /></span><br />

Note :
1. Anda dapat berkreasi sendiri membuat logo bank di side bar dengan melihat contoh-contoh di atas. 
2. Anda dapat juga menyimpan logo bank tersebut di pusat penyimpanan gratis di http://tinypic.com .

Demikianlah cara memasang – membuat – menampilkan logo bank di side bar website blog anda.

Read More

Cara Cek Backling blog

Backlink berfungsi untuk mengetahui seberapa populer blog kita. Semakin banyak backlink, maka semakin populer blog kita dan tentunya akan semakin berpotensi mempunyai pagerank yang bagus di mata google. Tetapi sayangnya dengan banyaknya kita mencari backlink malah kita jadi lupa sebenarnya dimana saja kita menanam backlink. Tetapi tenang saja, bagi teman-teman sobatpc.com, disini saya akan sharing beberapa web yang menyediakan fitur untuk mengecek dari mana saja baclink blog kita berasal dan tentunya juga informasi jumlah dan informasi-informasi tentang backlink yang lain.

Untuk mendapatkan backlink bisa dilakukan dengan beberapa cara yaitu tukeran link dengan blog lain yang se tema dengan blog kita,komen di blog yang dofollow (meskipun menurut pendapat beberapa kawan backlink dari blog yang nofollow pun juga tetap bermanfaat) namun jangan spam ya, mendaftarkan di iklan baris,dll. Luangkan waktu anda untuk berburu backlink sebanyak-banyaknya,jadikan hal tersebut sebagai hoby karena manfaatnya yang besar pada blog.

1. http://www.backlinkwatch.com
   
   Situs ini akan menampilkan jumlah inbound link atau link yang masuk pada sebuah blog/website yang disertai dengan keterangan mengenai sumber backlink,anchor text dan keterangan apabila blog tersebut nofollow.
2. http://www.backlinkchecker.net
   
   Data yang disajikan backlinkchecker.net ini lebih komplit,selain dapat melakukan cek terhadap inbound link (link masuk)juga dapat menyajikan outbound link (link keluar) dari sebuah blog,selain itu juga cek pagerank,alexa rank dll.
3. http://www.bad-neighborhood.com/text-link-tool.htm
   
   Disini dapat kita ketahui kualitas backlink yang diiliki suatu blog.
   Berikut adalah penjelasan dari situsnya yang  diterjemahkan ke dalam bahasa Indonesia:

Link teks adalah faktor penting optimasi seo saat ini, dan bertukar link dengan website lainnya adalah cara yang baik untuk mendapatkan mereka. Namun, melakukan pertukaran link dengan website yang bermasalah dapat berakibat mengurangi kualitas backlink anda.
Alat ini akan memindai link di situs Web anda, dan pada halaman yang terhubung ke website Anda. Hal ini sangat memudahkan usaha optimasi seo Anda

Demikian apa yang bisa saya sharing, semoga bisa bermanfaat bagi pengunjung semua, terima kasih

referensi : http://punya-radenmas.blogspot.com/2010/02/cara-cek-backlink-blog.html

Read More

Cara membuat email berlangganan/subscriber feedburner

Jika belum mengerti seperti apa Email Subscriber feedburner, sebelum teruskan membaca posting ini silahkan tengok bawah postingan ini ada sebuah kotak form, ya itulah yang disebut dengan "Email Subscriber" dari feedburner, fungsinya yaitu untuk mempermudah pengunjung menerima update terbaru dari posting sebuah blog atau website via email, penjelasannya begini - jika kamu-kamu memasukkan email di kotak form sebelah kanan blog saya tersebut kamu akan menerima setiap ada posting terbaru dari blog ini via email tanpa dipungut biaya apapun. Menarik bukan? Tertarik untuk memasang form tersebut ikuti langkah dibawah ini jika belum faham.

1. Masuk di : http://www.feedburner.com dengan akun google kamu
2. Kamu akan langsungmelihat kotak form untuk mengisikan alamat feed blog kamu yang akan dibakar
3. Isikan dengan alamat feed blog kamu, biasanya alamat feed blog kamu seperti ini : http://BLOGKAMU.blogspot.com/feeds/posts/default , ganti tulisan BLOGKAMU dengan nama alamat blog kamu, (jangan blog saya, he…he).
4. Masukkan nama feed blogmu tadi pada form yang disediakan tersebut, jika blogmu itu isinya hanya video2 maka berilah tanda cek pada kotak "I am a podcaster", jika tidak biarkan seperti itu. dan klik tombol "next"
5. Setelah itu kamu akan melihat lagi form-form pendaftaran, isikan data-data sekiranya dibutuhkan kemudian - "Activate Feed"
6. Nah sekarang kamu berhasil nanti akan ada informasi "Congrats! your ...……..".
7. Di bawahnya akan terdapat tombol "Next" dan link "Skip directly to feed management" kalau saya biasanya lewat "Skip directly to feed management", sebenarnya lewat tombol "next" juga bisa tapi agar lebih simple lewat "Skip directly to feed management” saja.
8. Akan terlihat beberapa menu, pilih saja "Publicize"
9. Disebelah kiri akan muncul beberapa menu. Karena kita akan menampilkan "Email Subscriber" jadi pilih menu "Email Subscriptions".
10. Kemudian klik tombol "Activate"
11. Akan terlihat beberapa kotak yang berisi kode-kode. Apabila km pinginnya dalam bentuk form maka pilih kode yang ada di kotak "Subsciption Form Code".
12. Copy kode tersabut, dan klik tombol "Save" untuk mengaktifkan layanan tersebut.
13. Untuk cara pasang di blog :

Login ke blogger, pilih "layout --> Add a Gadget --> HTMl/Java Script" paste kode yang sudah kamu copy tadi pada kotak form kosong tersbut dan klik “save”.

Coba dilihat blognya, sudah ada belum kotak form "Email Subscriber" ya pastilah sudah ada.

Bagaimana untuk mengetahui jumlah orang yang berlangganan artikel kita, untuk mengetahuinya pasang saja feedcount gunaya untuk mengetahui perkemebangan blog kita

caranya :
- Login ke feedburner kemudian pilih feed blog kamu
- Kemudian masuk ke menu "Publicize --> FeedCount" disitu ada script yang harus dipasang di blog kamu, kamu bisa menyesuaikan warna yang kamu suka, untuk cara pasangnya pasti dah tau…jadi saya rasa gak perlu di jelasin deh…!!

Read More

Membuat automatic read more v.3

Read more otomatis (Automatic Read more ) adalah read more atau baca selengkapnya dengan secara otomatis mengambil ringkasan dari blog kita di tambah lagi read more otomatis ini juga dapat menampilkan gambar dengan ukuran yang kita inginkan selain itu kita dapat menentukan jumlah  karakter yang akan kita tampilkan.

Berikut caranya : 

1. Login di Blogger > pada Dasboard pilih Layout > Edit HTML
2. Centang / Check List dulu "expand widget templates"
3. Cari kode </head> kemudian copy - paste kode di bawah ini sebelum kode tersebut

<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://u-sup.googlecode.com/files/summarypost.js' type='text/javascript'/>

4. Sekarang cari kode<data:post.body/> dan ganti kode tersebut dengan kode dibawah ini

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

5. Klik "simpan template"

Keterangan :

summary_noimg = 430; Menentukan jumlah ringkasan tanpa gambar
summary_img = 340; Menentukan umlah ringkasan dengan gambar
img_thumb_height = 100; kode ini untuk tinggi gambar thumbnailnya
img_thumb_width = 120; kode ini untuk lebar gambar thumbnailnya

Bagaimana jika telah menggunakan readmore verssi lama?

Jika kamu sebelumnya telah menggunakan readmore versi lama silahkan kembalikan dulu kodenya caranya perhatikan kode dibawah ini, ini kode readmore versi lama:

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

    <div class='post-body entry-conten'>

    <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/></p>

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

    </b:if>

Hapuslah kode yang dicetak tebal kemudian simpan template.

selamat mencoba...

Read More

Cara mudah membuat artikel berhubungan

Membuat artikel berhubungan (related posts) dibawah ini sangat mudah, anda tinggal salin dan tempel kode dibawah kedalam sumber HTML blog anda maka artikel berhubungan pada setiap posting blog anda akan muncul, artikel berhubungan mengambil judul artikel yang berhubungan atau memanggil artikel tersebut berdasarkan kategori-kategori yang dimasukkan dalam posting itu sendiri jadi artikel berhubungan yang tampil masih ada sangkut pautnya dengan artikel yang sedang dibaca. nah untuk menampilkan kedalam blog anda bisa menggunakan kode dibawah ini atau kamu lebih suka dengan artikel berhubungan dengan gambar bisa masuk Kesini :
1. Login ke blogger
2. Klik Rancangan
3. Edit HTML
4. Beri tanda check pada Expand Template Widget
5. Cari kode <data:post.body/> 
6. Dan letakkan kode berikut tepat dibawah kode tersebut "langkah 5"! (jika anda sudah menggunakan fitur readmore ada 2 kode <data:post.body/> jadi letakkan setelah kode yang kedua)

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
Artikel lain yang mungkin ingin anda baca!
<div class='similiar'>
<div class='widget-content'>
<div id='data2007'/><br/><br/>
<ol>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 2;
var maxNumberOfLabels = 11;
maxNumberOfPostsPerLabel = 11;
maxNumberOfLabels = 1;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</ol>
</div>
</div>

</b:if>

7. Simpan template anda dan lihat hasilnya

Keterangan :

- Rubahlah teks berwarna hijau dengan sesukamu
- Rubahlah angka seperti dibawah ini dengan angka sesukamu, ini yang akan menentukan berapa banyak artiikel berhubungan yang akan ditampilkan
var maxNumberOfLabels = 11
maxNumberOfPostsPerLabel = 11

Selamat mencoba!!! 

 semoga sukses sumber :http://u-sup.blogspot.com/2011/05/cara-mudah-membuat-artikel-berhubungan.html

Read More

Setting domain cz.cc di blogspot

Artikel ini kelanjutan dari cara daftar domain gratis dot.cz.cc, sebaiknya anda baca artikel yang sebelumnya jika belum mempunyai minimal satu nama domain dot.cz.cc silahkan  mendaftar domain gratis dot.cz.cc untuk mengganti domain blogspot anda.
Diartikel sebelumnya telah disebutkan dengan jelas "mudah-mudahan" ya bagaimana cara mendaftar layanan domain gratis dot.cz.cc tapi sekarang akan membahas tentang tutorial setting domain dot.cz.cc diblogspot dan saya anggap anda sudah memiliki domain cz.cc yang siap untuk diredirect ke blogspot anda, Oke kita mulai dari sekarang!

1. Pertama silahkan Login ke cz.cc
2. Harusnya anda melihat seperti dibawah ini "jika belum berubah"  Klik tulisan Registered Domains:

3. Beri tanda cek pada samping domainnya kemudian Klik Manage

 4. Kemudian klik Zone Record  

5. Dan Silahkan masukkan datanya seperti dibawah ini!

• Host : www
• Record Type : Pilih CNAME
• Content : ghs.google.com
• TTL : Pilih 1 Day

Jika sudah Klik Create Zone Record

6. Sekarang Domain anda sudah aktif dan siap untuk dihubungkan ke blogspot anda! tapi masih ada satu langkah lagi dibawah ini!

Cara setting di blogspot!

   1. Silahkan login ke blogger.com
   2. Klik Pengaturan pada blog yang akan anda Setting>>
   3. Klik tab Publikasikan >>
   4. Klik Ubahsuaian >>
   5. Klik beralih ke Pengaturan Lanjut >>
   6. Isikan domain yang tadi anda buat pada kolom yang ada, contoh tadi : www.mbahsastro.cz.cc
   7. Masukkan verifikasi kata dan simpan setelan
   8. Selesai

Artikel ini kelanjutan dari cara daftar domain gratis dot.cz.cc, sebaiknya anda baca artikel yang sebelumnya jika belum mempunyai minimal satu nama domain dot.cz.cc silahkan  mendaftar domain gratis dot.cz.cc untuk mengganti domain blogspot anda.
Diartikel sebelumnya telah disebutkan dengan jelas "mudah-mudahan" ya bagaimana cara mendaftar layanan domain gratis dot.cz.cc tapi sekarang akan membahas tentang tutorial setting domain dot.cz.cc diblogspot dan saya anggap anda sudah memiliki domain cz.cc yang siap untuk diredirect ke blogspot anda, Oke kita mulai dari sekarang!

1. Pertama silahkan Login ke cz.cc
2. Harusnya anda melihat seperti dibawah ini "jika belum berubah"  Klik tulisan Registered Domains:

3. Beri tanda cek pada samping domainnya kemudian Klik Manage

 4. Kemudian klik Zone Record  

5. Dan Silahkan masukkan datanya seperti dibawah ini!

• Host : www
• Record Type : Pilih CNAME
• Content : ghs.google.com
• TTL : Pilih 1 Day

Jika sudah Klik Create Zone Record

6. Sekarang Domain anda sudah aktif dan siap untuk dihubungkan ke blogspot anda! tapi masih ada satu langkah lagi dibawah ini!

Cara setting di blogspot!

   1. Silahkan login ke blogger.com
   2. Klik Pengaturan pada blog yang akan anda Setting>>
   3. Klik tab Publikasikan >>
   4. Klik Ubahsuaian >>
   5. Klik beralih ke Pengaturan Lanjut >>
   6. Isikan domain yang tadi anda buat pada kolom yang ada, contoh tadi : www.mbahsastro.cz.cc
   7. Masukkan verifikasi kata dan simpan setelan
   8. Selesai

Domain anda sudah aktif namun belum bisa diakses memerlukan waktu sekitar 24 jam baru bisa diakses, tapi ada juga yang langsung bisa diakses, sekarang coba saja anda akses alamatURL anda sendiri sudah bisa diakses apa belum.

selamat mencoba...

Read More

Setting custom domain di blogger

Sebelum tutorial ini saya uraikan tentang setting domain custom di blogger, saya jelaskan kembali sedikit apa itu domain? Domain adalah nama situs atau identitas anda yang unik di dunia internet. Yang dimaksud unik yaitu nama situs anda hanya andalah pemiliknya di internet atau unik tidak ada yang sama. Contohnya templatemaxs.com. Apakah ada situs lain selain templatemaxs yang namanya sama? Tentu saja tidak ada. Nama templatemaxs di internet hanya satu. Tidak seperti nama manusia . oke sekarang saya lanjutkan tutorial nya cara setting custom domain di blogger!

1.  Menyiapkan dan mendaftarkan Domain.

Pertama kali yang harus anda lakukan yaitu menyiapkan sebuah nama domain dan meregristrasikan domain tersebut ditempat pembelian domain, dimana harus membeli domain? Banyak sekali yang menyediakan pembelian domain tapi saya sarankan beli saja di Indonesia agar anda tidak sulit melakukan hubungan dengan si penjual, harganyapun bervariasi mulai 75rb/thn - 100rb/thn, tinggal cari aja lewat om Google dengan kata kunci beli domain murah! Atau anda ingin menggunakan domain gratisan seperti co.cc dan co.nr dan lain-lain silahkan saja kunjungi www.co.cc dan www.co.nr dan registrasikan domain yang kamu suka.

Jika domain anda sudah dipersiapkan dan aktif langkah selanjutnya yaitu setting, Dikarenakan tempat pembelian domain yang berbeda tempat jadi saya tidak bisa menunjukkan cara bagaimana setting domain di hosting secara terperinci, namun pada dasarnya caranya sama dan biasanya pihak hosting menunjukkan bagaimana anda harus meredirek domain anda.
"SARAN saya Jika anda kesulitan sebaiknya anda menghubungi admin tempat anda membeli Domain dan meminta tolong agar mensettingkan domain agar diredirek ke blogger" itu yang pernah saya lakukan dulu waktu pertama kali membeli domain anda bisa menghubungi pihak hosting lewat email atau sms. untuk mempermudah hubungan dengan pihak pemilik hosting sebaiknya anda membeli hosting dalam Negeri saja karena sudah banyak yang menyediakan layanan ini!

2. Menghubungkan domain anda ke blogger

Sekarang tahap akhir yaitu menghubungkan antara domain anda dengan blog anda di blogger caranya sebagai berikut :

   1. Silahkan login ke blogger.com
   2. Klik Pengaturan pada blog yang akan anda Setting>>
   3. Klik tab Publikasikan >>
   4. Klik Ubahsuaian >>
   5. Klik beralih ke Pengaturan Lanjut >>
   6. Isikan Subdomain yang tadi anda buat pada kolom yang ada, contoh tadi : www.domainkamu.com
   7. Masukkan verifikasi kata dan simpan setelan
   8. Selesai

Andapun bisa membuatkan subdomain dari domain utama yang telah anda buat contohnya seperti ini domaiankamu.com bisa menjadi blog.domainkamu.com lengkapnya silahkan baca disini
Sekarang pengaturan setting custom domain blogger sudah selesai biasanya memerlukan waktu sekitar 24 jam itu paling lama tapi bisa juga langsung bisa diakses.

Read More

Cara mengganti template blogspot

Sudahkah blog anda diganti dengan template yang bukan standar blogger atau anda sudah cukup merasa nyaman dengan template bawaan blogspot anda, jika anda baru membuat blog dan belum atau memang sempat untuk merubah template atau juga ada kendala dalam hal merubah tampilan tempilan blog anda. Jika anda ingin mengganti template anda dengan tampilan yang lebih bagus dari template anda yang sekarang anda bisa mendownloadnya secara gratis banyak yang menyediakan template gratis silahkan masuk kesini. namun anda bisa memakai yang berbayar/premium atau bisa juga pesan template sama saya hehe...! Apa bedanya template gratis dan premium saya jelaskan sedikit :

Template Free/Gratis : Free templates Tidak memiliki fitur seperti yang ada pada template premium dan anda tidak diperkenankan untuk merubah Link Credit atau pembuat atau desainer aslinya! dan sebagainya

Template Premium/Berbayar : Memiliki desain yang  ciamik tentunya yang tidak dimiliki oleh template versi gratisan, didesain dengan teliti dan juga telah di optimasi dalam masalah SEO (biasanya) untuk aturan main pada template berbayar ini tergantung perjanjian pada Desainer/siPenjual template itu sendiri.

Cara mengganti template blogspot itu bisa dikatakan sangat mudah, tetapi itu bagi yang sudah terbiasa bukan bagi mereka yang baru memulai membuat blog ada kalanya mereka kesulitan merubah tempilan template mereka, nah karena alasan itulah saya menulis artikel ini tentang bagaimana merubah template di blogspot berikut caranya yang bisa anda jadikan tuntunan! 

Mengganti Template dengan template Standar / yang disediakan blogger!
1. Login ke blogger
2. Klik Rancangan

3. Klik menu Perancang Template. dan akan muncul seperti dibawah ini

4. Klik pada bagian pilihan template yang sekiranya sesuai selera anda, anda juga dapat menyesuaikan warna latar belakang, kolom dan lain2 jika sudah sesuai dengan yang anda inginkan klik APPLY TO BLOG.

 4. Selesai!


Mengganti template dengan template Download gratis / premium

1. Pastikan anda sudah mendownload templatenya jika belum silahkan download dulu disini "gratis boleh yang premium juga bisa"
2. Sekarang ekstrak dulu template yang anda download kedalam format .XML (karena biasanya template yang anda download dalam bentuk WinRAR file atau WinZIP file) File yang anda upload hanyalah file yang berextensi .xml.

 

3. Sekarang Login ke Blogger
4. Klik Rancangan

5. Klik Edit HTML

6. Saya sarankan anda membackup dulu dengan cara klik tombol "Download Template Lengkap" ini untuk mengantisipasi apabila anda nanti kurang puas dengan template baru anda jadi tidak kehilangan template lama anda!

6. Jika ada pesan seperti dibawah ini klik saja Pertahankan widget (cara ini dimaksudkan agar widget yang anda

7. Lihat template

Sekarang tampilan blog anda telah berubah dengan template baru yang lebih mantab!

Sumber:http://u-sup.blogspot.com/2010/03/cara-mengganti-template-blogspot.html

Read More

Frame Script Blog

JavaScript adalah aplikasi pemrograman yang dapat kita gunakan untuk membuat halaman situs kita menjadi lebih dinamis dan atraktif. Contoh penggunaan JavaScript yang kita pelajari nantinya adalah bagaimana kita bisa membuat animasi dalam halaman situs kita. Berikut adalah contoh program JavaScript.
Silahkan Anda KLIK DISINI



Menulis teks pada halaman web

<HTML>
<HEAD>
<TITLE>Contoh Pertama Program JavaScript</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
document.write ("Contoh program JavaScript");
</SCRIPT>
</BODY>
</HTML>

Mengevaluasi penekanan tombol

<HTML>
<HEAD>
<TITLE>Contoh Kedua Program JavaScript</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
function Tekan ()
{
alert ("Selamat belajar JavaScript!");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE = "button" VALUE = " Coba tekan tombol ini "
onClick="Tekan ()">
</FORM>
</BODY>
</HTML>

Penjumlahan sederhana

<HTML>
<HEAD>
<TITLE>Jawaban Soal Latihan 1.2</TITLE>
<SCRIPT language = "JavaScript">
function Tekan ()
{
var Bil1 = parseFloat (document.fmForm.Bilangan1.value);
if (isNaN (Bil1))
Bil1 = 0.0;
var Bil2 = parseFloat (document.fmForm.Bilangan2.value);
if (isNaN (Bil2))
Bil2 = 0.0;
var Hasil = Bil1 + Bil2;
alert ("Hasil penjumlahan = " + Hasil);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME = "fmForm">
<TABLE>
<TR>
<TD><DIV ALIGN=right><DT>Bilangan pertama</DT></DIV></TD>
<TD><INPUT TYPE="text" NAME=Bilangan1></TD>
</TR>
<TR>
<TD><DIV ALIGN=right><DT>Bilangan kedua</DT></DIV></TD>
<TD><INPUT TYPE="text" NAME=Bilangan2></TD>
</TR>
</TABLE>
<INPUT TYPE="button" VALUE="Jumlahkan"
onClick="Tekan ()">
<INPUT TYPE="reset" VALUE="Reset"></P>
</FORM>
</BODY>
</HTML>

Semoga bermanfaat....

Read More

Membuat Background Style Blog

Dengan menggunakan CSS, kita dapat membuat variasi background untuk interface halaman web kita, ini adalah salah satu script yang mungkin memenuhi kriteria anda.Jika anda memang suka silahkan di pergunakan oke... Berikut ini adalah contoh2nya:

Mendefinisikan background dengan warna kuning

p { background-color: yellow; }

Menggunakan image untuk background halaman

body
{
background-image: url("gambar.jpg")
}

Membuat watermark (jika discroll, gambar tidak akan bergerak)

body
{
background-image: url("gambar.jpg");
background-attachment: fixed
}

Mengulang gambar ke samping

body
{
background-image: url("gambar.jpg");
background-repeat: repeat-x;
}

Mengulang gambar ke bawah

body
{
background-image: url("gambar.jpg");
background-repeat: repeat-y;
}

Meletakkan background pada posisi tertentu

body
{
background-image: url("teepees.jpg");
background-repeat: no-repeat;
background-position: 100px 50px
}

body
{
background-image: url("teepees.jpg");
background-repeat: no-repeat;
background-position: 50% 50%
}
Selamat berkarya....

Read More

Cara Menentukan Kode warna blog orang lain

Dikala anda browser ke blog orang dan mendapatkan warna serta frame blog yang bagus, ada keinginan untuk melihat dan memasang warna di blog kita sama seperti yang anda kunjungi. Bagaimana mengetahui kode warna-warna yang ada pada blog itu padahal banyak kode-kode warna yang beda satu huruf pun akan berbeda pula warnanya.

Dengan kondisi itu ada solusi yang dapat di pakai yaitu dengan salah satu Adds on Mozilla, jika anda pengguna browser Mozilla Firefox, Anda akan mudah dan cepat  mengetahui kode warna tersebut. Caranya dengan menggunakan ekstensi mozilla yang disebut ColorZilla. Anda tinggal menyorot warna yang ada, lalu ekstensi ini meninformasikan kodenya.

Berikut adalah cara menginstal dan menggunakan ColorZilla.

1. Kunjungi situs ColorZilla.

2. Klik tombol Install ColorZilla.

3. Akan muncul pop up yang meminta Anda untuk mengijinkan penginstalan ColorZilla. Klik Allow.

4. Akan muncul tampilan seperti di bawah ini. Lalu klik Install Now.

5. Setelah selesai, restart browser mozilla Anda.

6. ColorZilla akan muncul di bagian kiri bawah browser Anda.

7. Untuk menggunakannya, klik tanda seperti di bawah ini.

8. Lalu sorot warna yang ingin Anda ketahui kodenya. Catat kode tersebut secara manual.

9. Contoh hasilnya seperti berikut (yang ditandai panah adalah kode warna huruf Firefox 1.0 yang disorot).

Selamat mencoba!

Read More

Cara menampilkan ayat Alquran Random

Anda akan sedikit bernuansa Islami jika melihat topik ini yang akan di bahas kali ini. Mudah-mudahan dengan tampilnya artikel ini bisa mengobati teman-teman bloger dengan mudah bisa mendapakan  di sini dengan mohon ijin untuk untuk berkunjung ke blognya dan mendapatkan apa yang di inginkan.
Dengan mempersingkat waktu semoga teman bloger tidak mendapat kesulitan dalam memasang ke blognya....
selamat berkreasi...

Read More

Kumpulan berita Online

Apakah yang dimaksud dengan RSS, RSS adalah :
RSS adalah sebuah file berformat XML untuk sindikasi yang telah digunakan (diantaranya dan kebanyakan) situs web berita dan weblog. Teknologi yang dibangun dengan RSS mengijinkan kita untuk berlangganan kepada situs web yang menyediakan umpan (feed) RSS, biasanya situs web yang isinya selalu diganti secara reguler. Untuk memanfaatkan teknologi ini kita membutuhkan layanan pengumpul. Pengumpul bisa dibayangkan sebagai kotak surat pribadi. Kita kemudian dapat mendaftar ke situs yang ingin kita tahu perubahannya. Namun, berbeda dengan langganan koran atau majalah, untuk berlangganan RSS tidak diperlukan biaya, gratis. Tapi, kita biasanya hanya mendapatkan satu baris atau sebuah pengantar dari isi situs berikut alamat terkait untuk membaca isi lengkap artikelnya. (sumber: wikipedia indonesia)

Pernah Saya Posting Koleksi didalam Blog APPIDI online, dan dalam google ada pada urutan yang pertama. Semua ini hanya koleksi Pribadi Media Informasi Online, hanya sebagai bahan referensi, dan sekarang tdk ada salahnya saya posting ulang di Blog Saya:



KORAN ONLINE

| Republika | Media Indonesia | Indo Pos | Koran Tempo | Bali Post |

| Kompas | Sinar Harapan | Suara Pembaruan | Suara Merdeka |

| Harian SIB Medan | Waspada Medan | Majalah Tempo |

| Sinar Pagi | Koran Tempo | Bisnis Indonesia | Radar Sulteng | Pos Kota |

| Kontan Online | Jakarta News | Detik| Voice of America | KBN Antara |

| Batam Post | Jawa Pos | Solo Pos | Koran Pagi Yogyakarta |

| Harian Bernas |

| Pikiran Rakyat Bandung | Kedaulatan Rakyat Yogyakarta |

| Duta Masyarakat | Harian Surya |

| Bangka Pos | Riau Pos | Berita Sore Medan |

| Harian Serambi Aceh | Sriwijaya Pos Palembang |

| Sarad Bali |

| Banjarmasin Post | Kaltim Post | Metro Banjar |

| harian komentar manado | Timika Pos |

| Harian Fajar Sulawesi |

| Pos Kupang | Harian Karebosi Makassar| Solo Pos | Kristiani Pos |

| Majalah Gatra | Forum Keadilan | Antara | Oposisi |

| Review Indonesia | Indonesia Business | news indonesia |

| Indonesian Society | Angkasa Magazine Online | Hankam ABRI |

STASIUN TV

| MetroTV | Indosiar | SCTV | Trans TV | RCTI | ANTV | TPI |

| Global TV | Liputan6 |

| TVRI | TV7 | Lativi |

| LPSIOnline | Warta Konsumen | MKI Online |

| Properti | Info Bank | Info Bisnis |

| TIRAS | TIARA | Swa Online | EKSEKUTIF |

| Chip Online | Info Komputer Online |

| INFO Linux | Intisari | News Music |

| Mega Games | Hotgame | PC games & Playstation. | Tabloid Motorplus |

| bulletin keluarga | Tabloid Nakita |

| AyuNet | Majalah Hanya Wanita Online |

| Bintang Indonesia | majalah Popular | tabloid nova | majalah Hai |

| majalah gadis |

| Warta Ekonomi | WartaJazz.com | Sedap Sekejap |

| kawanku online | tabloid bola |

~ * ~

| Sabili | Suara Muhammadiyah | Hidayatullah.com | Islam Liberal |

| Era Muslim | Pesantren Virtual | Ummi Group Online |

| Gus Dur Net | Nahdlatul Ulama |

| Pesantren Online | Wahid Institute | Islam Emansipatoris |

| Panji Masyarakat | Majalah Amanah | UMMAT

RSS Dari OKEZONE.COM

okezone – Breaking News
rssokezone – News
rssokezone – International
rssokezone – Lifestyle
rssokezone – Celebrity
rssokezone – Sports
rssokezone – Bola
rssokezone – Autos
rssokezone – Techno
rssokezone – Tokoh
rssokezone – Economy
rssokezone – Foto

http://detikinet.com/index.php/ >>>> Detik.feed
http://metrotvnews.com/rss/berita.asp >>>> Metro News
www.chip.co.id/rd-rss/8.html =>>>>>>>>> Info hardware
Www.chip.co.id/rd-rss/9.html = >>>>>>>>>Info software
semoga bermanfaat untuk teman2 bloger...

Read More

cara daftar feedburner

Semua bloger pasti ada yang tidak terlupakan dengan feedburner tapi saya ulas supaya tidak lupa lagi atau barangkali teman bloger ada yang membutuhkan, bagaimana caranya memasang banner-banner seperti Add to Google, My Yahoo, dan lain sebagainya. Jawaban singkat dari saya adalah untuk mendapatkan semua banner tersebut (beserta fungsinya) anda harus bergabung dengan http://www.feedburner.com, apa itu http://www.feedburner.com? www.feedburner.com adalah satu situs yang memberikan layanan dalam hal syndikasi atau feed. Menurut berita yang saya baca dari halaman news miliknya feedburner, bahwa sekarang feedburner telah di akuisisi oleh google sehingga kita dapat mengalihkan feed blog kita ke feed yang dari feedburner.

Bagi anda yang ingin blognya lebih cepat terkenal saya sarankan untuk bergabung dengan feedburner, layanannya ditanggung gratis. Bagi yang ingin mendaftar tapi belum mengetahui caranya, silahkan ikuti langkah-langkah berikut ini :

1. Silahkan kunjungi http://www.feedburner.com.
   
2. Klik tulisan Register pada halaman bagian atas
   
3. Isi seluruh form yang yang ada
   
   
   • Username --> isi dengan username yang diinginkan. contoh : japra
   • password --> isi dengan password yang diinginkan. contoh : japratea
   • Password (again) --> isikan kembali password yang tadi di tulis
   • Email address --> isi dengan alamat email yang sobat miliki
   • Secret Question --> isi dengan pertanyaan rahasia yang jawabannya nanti cuma sobat yang tau. Contoh : siapa nama pacar pertamamu ?
   • Secret Answer --> isi dengan jawaban yang sesuai dengan pertanyaan di atas. Contoh : juleha
   • Klik tombol Sigin
   
   
4. Jika berhasil, muncul ucapan selamat datang (welcome) dari feedburner
   
5. Isi kotak di bawah tulisan Burn a feed right this instant dengan alamat blog anda. Contoh : http://template-unik.blogspot.com
   
6. Beri tanda pada radio buuton yang tersedia, terserah mau pilih yang mana, kemudian klik tombol Next
   
7. Ubah Feed Title dengan Feed Address jika mau di ubah, kalo sudah tinggal klik tombol Active Feed
   
8. Ada ucapan Conrats, klik saja langsung tombol Next
   
9. Beri tanda centang pada kotak di samping tulisan Clickthroughs serta I want more ! have FeedBurner stats PRO also track (karena sekarang layanan yang PRO pun sudah gratis karena sudah di akuisisi oleh google)
   
10. Klik tombol Next
    
11. Klik tab Optimize
    
12. Silahkan setting yang anda inginkan, tapi yang paling penting adalah anda harus mengaftifkan fitur SmartFeed, karena fitur ini berfungsi agar supaya fungsi dari feed kita kompatibel atau klop dengan berbagai feed reader yang ada
    
13. silahkan klik SmartFeed lalu klik tombol Active
    
14. Klik tab Publicize, silahkan pilih fitur yang anda inginkan, tapi yang sering di gunakan adalah fitur feedCount coba klik FeedCount
    
15. Pilih bentuk style dari feedcount, yang biasa atau yang animasi, beri tanda pada radio button di sampingnya
    
16. Klik tombol Active
    
17. Copy kode HTML yang di berikan pada text area, paste pada notepad untuk nanti di pasang di blog anda
    
18. Klik Chicklet Chooser untuk memilih berbagai banner atau chicklet seperti yang di tanyakan sahabat setyo
    
19. Beri tanda pada radio button yang terletak di samping chicklet masing-masing, kemudian copy kode HTML yang di berikan yang ada pada text area, kemudian paste pada notepad. catatan : setiap sobat memberi tanda pada radio button masing-masing chicklet, maka secara otomatis kode HTML yang ada di bagian bawahpun akan berubah, jadi kesimpulannya beri tanda radio button lalu copy kode HTML nya beri tanda lagi lalu copy kodenya lagi
    
20. Klik Pingshot, beri tanda pada kotak di samping Ping-O-matic serta Newsgator, klik menu dropdown yang ada, lalu pilih yang sobat inginkan, klik tombol Add, klik lagi menu dropdownnya bila ingin di tambahkan lagi, klik Add kembali
    
21. Klik tombol Active
    
22. Klik Headline Animator untuk mendapatkan banner animasi
    
23. Klik menu dropdown di bawah tulisan Theme, pilih yang sesuai keinginan (yang paling banyak di minati adalah type classic)
    
24. Klik tombol Active
    
25. Klik menu dropdown di samping tulisan Add to, pilih Blogger blog
    
26. Klik tombol Next
    
27. Setelah muncul window baru, klik tombol Add to Blogger
    
28. silahkan Sign in dulu di blogger
    
29. Pilih blog yang mau di pasang banner animasi nya, lalu klik tombol Menambah Widget maka secara otomatis banner animasi akan di tambahkan. catatan : cara ini hanya berlaku bagi yang memakai template baru
    
30. Silahkan sign out dari situs tersebut
    
31. Selesai

Untuk fitur-fitur yang lain lainnya, silahkan anda coba-coba saja sendiri karena jika di terangkan semuanya, saya anggap terlalu banyak. alasan utamanya sih cape ngetiknya bro  .

Untuk pemasangan kode-kode HTMl yang tadi di copy pada notepad, saya anggap anda sudah bisa melakukannya, karena sudah sering saya bahas. Yang pake template klasik tinggal paste saja pada kode template nya, bagi yang pake template baru ya tinggal tambah elemen trus pilih yang HTML/Javascript, paste kodenya udah deh.

Satu yang paling terakhir. Seperti yang saya katakan diatas tadi bahwa sekarang feedburner sudah di akuisisi sama google, maka untuk feed blogger bisa di alihkan ke feedburner. Caranya seperti ini :

1. Sig in di blogger
   
2. Klik menu Pengaturan
   
3. Klik Feed Situs
   
4. Di sebelah tulisan Ijinkan Feed Blog, pilih yang Penuh
   
5. Simpan alamat feed dari feedburner pada kotak di samping tulisan posting URL Pengubahan Arah Feed. contoh alamat feed dari feed burner : http://feeds.feedburner.com/TemplateUnik
   
6. Apabila anda mempunyai account google adsense, anda bisa menyimpan kode iklan google adsense anda pada kotak di samping tulisan Feed Item Footer
   
7. Klik tombol Simpan Pengaturan
   
8. Selesai.

Ok deh, semoga dengan bergabungnya anda ke feedburner, blog sobat menjadi cepat terkenal dan ramai di kunjungi.

Read More

Penggabungan file javascript dengan yslow compress

Trik jitu menambah atau menaikan peforma blog ( kecepatan loding blog ) ini sebenarnya sangat simple, sepele dan logis. Namun justru itu kadang hal hal  yang sepele suka luput untuk kita perhatikan.
Apa yang saya maksud kan di sini ialah ; jika kita mempunyai banyak file javascript, sering kali yang kita lakukan menyimpan dengan url ter-sendiri ( url file javascript -nya berbeda-beda ) walaupun tempat penyimpananya sama. maka yang terjadi saat loding blog, browser akan meminta dan menerima javascript satu persatu dengan cara dicicil. Tidak demikian halnya jika kita mengabungkan file-file  javascript tersebut dalam satu file dan dalam satu url, maka secara logika browser akan menerima paket javascript yang kita miliki secara bersamaan. Sangat simple, sepele dan logis bukan ?
Cara seperti  di atas  telah saya aplikasikan pada blog ini dan terbukti menambah score sampai 4 (empat) bit.
Trik JituJika anda peduli dengan blog ke sayangan anda. Mari kita praktekan sekarang juga.

»  Gunakan browser Firefox, kemudian unduh dan  install pengaya { add-ons ) FireBug dan Yslow. ( sesuia kan dengan versi Firefox anda ).

»  Setelah keduanya terinstall klik ikon Firebug di pojok kanan bawah browser ( icon mirip binatang  kecoa ).

» Dalam tab menu pilih menu Yslow, kemudian klik Grade untuk mengetahui nilai status score blog kita ( ingat score anda berapa ).

» Masih dalam Yslow, kemudian klik menu Tool. Setelah itu pilih dan klik tulisan All JS Minified ( tool compres javascript).

» Dalam jendela yang terbuka banyak javascript yang telah di compres, pilih javascript yang ingin anda gabungkan. copy paste ke dalam program notepad. kemudian save as ke dalam format file  JS ( contoh pada kolom file name di isi :  myscript.JS . kemudian pada Save as Type pilih All File ).

» Upload file javascript tersebut ke tempat biasa anda menyimpanya. ( saran saya simpan di menyimpan javascript di Code Google.
»  Sebelum mengganti dan menghapus javascript lama dengan file javacsript yang baru, di backup dulu terutama url javascript.

selamat mencoba dan sukses..

Read More

tips menampilkan postingan hanya judul artikel saja

Kali ini ada sebagian bloger yang beranggapan menampilkan judul artikel di Home page, cukup mnghemat dan efektif.memang, beberapa blogger memilih blognya hanya menampilkan judul posting saja pada halaman depan atau home page. Mungkin dasar pemikiran dari pemilik blog itu sendiri adalah menampilkan hanya judul posting saja dapat menghemat ruang sehingga jumlah post yang ditampilkan bisa lebih banyak pada halaman depan atau beranda. alasan pendukung lainnya mungkin karena judul posting sangat mewakili isi dari posting itu sendiri sehingga dengan menampilkan judul posting di halaman depan lebih memungkinkan artikelnya akan lebih banyak di baca oleh para pengunjungnya. Berikut contoh blog yang hanya menampilkan judul post nya saja :

Agar pada halaman depan hanya menampilkan judul posting saja, berikut langkah-langkahnya :

• Silahkan login ke blogger dengan ID anda.


• Klik Rancangan  
  


• Klik menu Edit HTML.
  


• Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
  


• Carilah kode ]]></b:skin>


• Copy kode berikut, lalu paste di bawah kode ]]></b:skin>

  <style type='text/css'>
  
       <b:if cond='data:blog.pageType != &quot;item&quot;'>
  
       <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  
       .post-body{display:none;}
  
       </b:if>
  
       </b:if>
  
       </style>
  
      



• Klik tombol SIMPAN TEMPLATE.


• Selesai. Silahkan lihat hasilnya.

Mudah bukan? namun, dengan memasang kode diatas masih menyisakan beberapa elemen seperti tanggal posting, komentar dan yang lainnya. Jika anda ingin menghilangkan semuanya dan yang tersisa hanya judul post nya saja, mungkin anda bisa menggunakan kode berikut :

<style type='text/css'>

     <b:if cond='data:blog.pageType != &quot;item&quot;'>

     <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

     .post-body, .post-footer, .jump-link, 

     .post-timestamp, .reaction-buttons, 

     .star-ratings, .post-backlinks, 

     .post-icons, .date-header{display:none;}

     </b:if>

     </b:if>

     </style>

    

Jika ternyata masih ada elemen tersisa selain judul post, mungkin kode template anda tidak mengikuti standar template blogger. Bagaimana solusinya? anda harus mengenali struktur template anda.
Bagi anda pengguna browser internet firefox, kang Rohman punya tips mudah mengenali struktur template anda yaitu dengan menginstall add-ons Web Developer yang bisa anda download di add-ons for firefox.
Sekarang kang Rohman anggap anda telah menginstall add-ons web developer pada firefox yang anda gunakan. Silahkan buka alamat blog anda ( tentunya yang akan di edit sesuai artikel diatas ). Klik menu Information, kemudian pilih Display Div Order.

Maka secara otomatis akan ditampilkan struktur div dari template anda. Contoh gambar :

Dari gambar tersebut terlihat bahwa tanggal posting serta komentar disimpan dalam elemen div :
.databarleft
.datebarright

Sehingga kode yang digunakan menjadi seperti ini :

<style type='text/css'>

     <b:if cond='data:blog.pageType != &quot;item&quot;'>

     <b:if cond='data:blog.pageType != &quot;static_page&quot;'> 

     .post-body, .databarleft, .datebarright{display:none;}

     </b:if>

     </b:if>

     </style>

    

Semoga bisa difahami.
Update : kode telah di sempurnakan agar tidak konflik dengan static page / static post
source :http://kolom-tutorial.blogspot.com
untuk lebih jelasnya silahkan di komentari..

Read More

membuat program script Elemen tepat Di bawah Header blogspot

Seperti kang rohman tulis pada artikel " Menyimpan widget persis di bawah header ", bahwa tidak hanya cara tersebut saja yang bisa anda lakukan namun masih ada teknik yang lain untuk dapat meyimpan widget atau elemen persis di bawah header. Teknik yang di maksud adalah dengan membuat kolom baru langsung di bawah header, penasaran bagaimana caranya? yuk di lanjut.

Untuk membuat kolom baru tidaklah sesulit yang anda bayangkan, anda hanya cukup menambahkan sedikit kode css serta HTML kedalam kode template anda. Belum tahu caranya? silahkan ikuti langkah berikut :

1. Login ke blogger dengan ID anda.


2. Klik Tata Letak.


3. Klik tab Elemen Halaman. Perhatikan struktur layout template anda. Biasanya bagian header akan seperti ini :
   
   
   
   


4. Sekarang kita akan membuatkan sebuah kolom baru persis di bawah header. Siap? yuk mulai.


5. Klik tab Edit HTML.


6. Klik Tulisan Download Template Lengkap, silahkan di backup dulu (penting).


7. Copy kode berikut, lalu paste di atas kode ]]></b:skin>
   
   #under_header{
   margin:10px 0;
   padding:1%;
   width:98%;
   }
   
   


8. Cari kode yang mirip dengan kode di bawah ini :
   
   <div id='header-wrapper'> 
   <b:section class='header' id='header' maxwidget="1" showaddelement="no">
   <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
   </b:section>
       </div>
   


9. Copy kode berikut lalu paste persis di bawah kode tadi :
   
   <div id="under_header">
   <b:section class='header' id='underheader' preferred='yes'/>
   </div>
   
   


10. Klik tombol SIMPAN TEMPLATE. Tunggu beberapa saat sampai template anda tersimpan.
    


11. Klik tab Elemen Halaman. dan struktur layout anda akan menjadi seperti ini.
    
    
    


12. Yihaa! sekarang anda sudah mempunyai elemen yang langsung persis di bawah header, silahkan tambahkan elemen yang  inginkan. Mau pasang iklan google adsense, klik saya.com atau apa saja atau mungkin mau pasang photo anda yang ganteng serta cantik di sana? silahkan wong blog anda.


13. Selesai.

Kode-kode yang saya tuliskan di atas tentunya tidaklah mutlak, itu hanya kode paling sederhana yang saya buat untuk membuat tutorial blog ini.
selamat mencoba .. nuhun kang rohman
Source: http:://kolom-tutorial.blogspot.com

Read More

Cara Membuat Script Link Banner Dengan Sekali Klik

Selamat pagi semoga puasanya gak ada yang ke ganggu alias "BOCOR"  saya harap  dengan Bloging itu tidak akan terjadi dan Blogingnya yang Islami ok.. bro.

Ini adalah salah satu cara yang kudapat dari blog senior mr.O-om yang sudah malang melintang di dunia bloger, bahkan

 
Pertama, masuk pada halaman Edit Html, kemudian masukan kode CSS dibawah ini dibawah kode <b:skin><![CDATA[

#Box-Banner-ads {

margin: 0px;

padding: 5px;

text-align: center;

}

#Box-Banner-ads img {

margin: 0px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #c0c0c0;

}

#Box-Banner-ads img:hover {

margin: 0px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #333;

}
sampai disini untuk script yg atas.
sudah beres ? kalau sudah coba ditambah yang diawah ini:
scrip untuk gambar seperti di atas:

<a target="_blank" href="http:/Rilexnet.blogspot.com/"><img border="0" alt="ads" src="http://oom.blog.googlepages.com/Banner2.gif"/></a>

<a target="_blank" href="http://Rilexnet.blogspot.com.blogspot.com/"><img border="0" alt="ads" src="http://oom.blog.googlepages.com/Banner2.gif"/></a>
<a target="_blank" href="http://Rilexnet.blogspot.com.com/"><img border="0" alt="ads" src="http://oom.blog.googlepages.com/Banner2.gif"/></a>
<a target="_blank" href="http://Rilexnet.blogspot.com/"><img border="0" alt="ads" src="http://oom.blog.googlepages.com/Banner2.gif"/></a>

</div>

Untuk jumlah iklan anda tinggal menambahkan atau mengurangi sesuai kode dibawah ini. jangan lupa mengganti warna merah dengan alamat url anda sendiri.

<a target="_blank" href="http://Rilexnet.blogspot.com"><img
border="0" alt="ads" src="http://oom.blog.googlepages.com/Banner2.gif"/></a>
catatan untuk yg berwarna merah ganti dg nama blog anda.
selamat mencoba semoga sukses...

Read More