Kumpulan Aplikasi Untuk Mengedit Blog

Syarat yang paling penting untuk bisa mengedit template blog adalah harus mengerti tentang kode-kode css, javascript maupun html. Untuk anda yang mengalami kesulitan dalam edit template blog, tool powerfull dari mozilla firefox akan membantu anda untuk menemukan kode-kode tertentu dan akan lebih mempermudah dalam edit template blog anda.

Tools untuk mengedit template blog pada pembahasan ini terdiri dari aplikasi terpisah dengan browser anda dan addons yang ada pada mozilla firefox.

1. Pixel

Aplikasi Pixel berguna untuk mengambil sampel warna dari berbagai media, caranya yaitu and cukup menjalankan aplikasi pixel, lalu letakkan mouse pada media yang akan diambil sebagai sampel/contoh warna, dan salin kode warna html yang sudah muncul.

2. Notepad++

Notepad++ berguna sebagai teks editor untuk mengedit template blog. Aplikasi sangat membantu dalam mengedit kode html template. Kelebihan menggunkan aplikasi ini adalah disaat anda meletakkan kursor pada kode awal html, maka plikasi ini secara otomatis dapat memberikan blog pada kode tersebut yakni pada kode pembuka  maupun pada kode penutup dan dengan kode css yang lain yang dapat dipakai dalam pengeditan template blog. Anda dapat mendownload Notepad++ Disini

3. MeasureIt

MeasureIt merupakan tool dari addons pada mozilla firefox. MeasureIt sangat membantu untuk mengetahui panjang dan lebar blog dalam satuan pixel. Cara menggunkannya yaitu anda hanya mengeser mouse pada blog maka akan didapat informasi mengenai berapa panjang dan lebar dari gambar atau elemen blog yang diukur.

4. Web Developer

Web Developer juga tool addons dari mozilla firefox. Didalamnya terdapat fitur yang lengkap. Cara pemakainnya yaitu cukup dengan menekan view information lalu letakkan mouse dibagian blog yang akan di edit. Web developer secara otomatis memberikan kode css didalam template blog, anda tinggal mengedit templatenya.

Cara Membuat Related Post / Artikel Terkait Di Dalam Postingan Blogspot

Cara Membuat Related Post / Artikel Terkait Di Dalam Postingan Blogspot | Pada kesempatan ini saya akan share pada anda tercinta tentang tutorial yang sangat bagus untuk kemajuan blog anda dan nantinya akan mendatangkan pengunjung untuk berlama-lama di blog anda. Tutorial yang akan saya bahas yaitu tentang membuat artikel terkait / related post di blog. Tapi pada tutorial tersebut agak berbeda pada dari yang lain. Related post / artikel terkait yang biasa dipakai oleh blogger atau dijumpai pada blog-blog orang lain, biasanya ditempatkan di bawah posting atau pada sidebar.

Pada topik cara memasang related post / artikel terkait pada blogger yang saya sajikan untuk anda yaitu related post berada di dalam artikel blog. Nah tentunya dengan penampilan yang bisa dikatakan baru ini, akan mempermudah dilihat oleh pengunjung untuk mencari artikel yang akan mereka cari / dibaca. Di bawah ini contoh tampilan Related Post / artikel terkait di lokasi postingan. Nah, saya mulai sekarang cara membuatnya :

Berikut langkah-langkah cara bikin related post di dalam artikel blogspot :

1. Masuk ke Dasboard
2. Pada menu Design => Edit Html
3. Backup dulu template anda => centeng Expand widget template
4. Cari kode </head> dan letakkan kode script dibawah ini di atas kode </head>

<script type='text/javascript'>
//&lt;![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i &lt; json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i &lt; relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j &lt; a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;

while (i &lt; relatedTitles.length &amp;&amp; i &lt; 20) {
document.write(&#39;&lt;li&gt;&lt;a href=&quot;&#39; + relatedUrls[r] + &#39;&quot;&gt;&#39; + relatedTitles[r] + &#39;&lt;/a&gt;&lt;/li&gt;&#39;);
if (r &lt; relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}

}
//]]&gt;
</script>

5. Kemudian cari kode <div class='entry entry-content'>
6. Lalu copy kode di bawah ini dan letakkan di bawah kode <div class='entry entry-content'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;'>
<div class='related-posts'>
<p>Related posts:</p>
<ol>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</ol>
</div>
</div>
</b:if>

7. Selesai, simpan template anda

Nah sekarang anda sudah punya Related post / artikel terkait pada blog anda, tapi untuk tampil lebih keren dan lebih menarik, saya akan beri tambahan sedikit sentuhan kode css,caranya yaitu :

- Cari kode ]]></b:skin>
- Lalu copy kode dibawah ini dan letakkan sebelum kode ]]></b:skin>

.related-posts {
border:1px solid #ddd;
background:#D8DFEA;
font-weight:bold;
width: 80%;
float:right;
}
.related-posts p {
margin:5px 10px 5px;
}
.related-posts ol {
font-weight:normal;
margin:0 0 0 25px;
}
.related-posts li {
margin-bottom: 2px;
}

Begitulah Tips Membuat Related Post / Artikel Terkait Di Dalam Postingan Blogspot, semoga bisa bermanfaat untuk anda dan selamat mencoba.

Cara Membuat Breadcrumb di Blogspot

Cara Membuat Breadcrumb | Mudahnya membuat breadcrumb - Pada postingan kali ini saya akan membahas tentang breadcrumb, dimana fungsi dari dari menu navigasi breadcrumb tersebut adalah untuk mempermudah pengunjung yang kebetulan sedang singgah pada blog anda untuk menunjukkan apa yang akan mereka cari pada halaman dan berada pada kategori apa.

Jika anda senang merubah template yang gratisan, tentunya isi dari template tersebut masih banyak kekurangannya untuk menuju ke template yang Seo friendly, salah satunya misalnya tidak adanya label di atas postingan atau disebut juga navigasi breadcrumb. Keutamaan membuat Breadcrumb ini adalah untuk mengoptimalkan Seo On Page. Ok saya tidak akan berbicara panjang lebar pada postingan ini, karena yang menjadi topik pembicaraan adalah cara bikin menu breadcrumb, bukan cerita panjang lebar yang akan membuat anda jenuh membacanya.

Cara memasang breadcrumb di blog
1. Login ke Blogger
2. Pilih Rancangan
3. Pilih Edit HTML dan centang Expand Widget Templates
4. Lalu cari kode ]]></b:skin>
5. Paste kode berikut tepat diatas kode ]]></b:skin>

.breadcrumbs{

padding-left:10px;font-size:95%;

line-height:1.4em;

border-bottom:4px double #cadaef;

}

6. Langkah selanjutnya cari kode <b:includable id='post' var='post'>
7. Kalau sudah, lalu letakkan kode dibawah ini tepat dibawah kode <b:includable id='post' var='post'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>

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

<div class='breadcrumbs'>

Anda disini &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187;

<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>

</b:loop>

</b:if> &#187; <data:post.title/>

</div>

</b:if>

</b:if>

8. Kini breadcrumb telah selesai dibuat dan simpan template anda

Nah setelah anda selesai Cara buat navigasi breadcrumb, blog anda sudah jadi seo friendly untuk optimasi seo, Cukup sekian dulu ya, semoga bermanfaa

Manfaat Breadcrumb Pada Blog

Breadcrumb adalah navigasi menu untuk memudahkan pengunjung web/blog melacak lokasi dalam dokumen dan kembali ke halaman awal dengan mudah. Breadcrumb biasanya berada di posisi atas halaman web/blog, biasanya dibawah header atau diatas judul postingan.
Contoh breadcrumb seperti gambar berikut ini.

Breadcrumb

Menurut Jakob Nielsen (seorang konsultan Web Usability), ditinjau dari sisi usability breadcrumb mempunyai beberapa fungsi, yaitu:
Menunjukkan lokasi atau path dari halaman web yang sekarang sedang dikunjungi, relatif terhadap struktur halaman di atasnya.
Menyediakan fitur one-click access ke level halaman web di atasnya sekaligus menghindari user tersesat karena terlalu dalam menjelajahi website.
Breadcrumb ini sangat bermanfaat bagi pengunjung tatkala struktur website yang kita bangun memiliki hirarki atau tingkatan.
Menurut kabar berita, bahwa Google sudah dapat membaca dan memahami data Breadcrumbs sebuah situs blog, jadi anda jangan heran bila anda menemukan ada sebuah blog pada hasil pencarian URL nya yang ditampilkan malah URL kategorinya.
Cara membuat Breadcrumb pada Blog
Selengkapnya : Manfaat Breadcrumb dan Cara Membuatnya di Blogger

Cara Memaksimalkan Kecerdasan Sang Buah Hati

10 Kiat Memaksimalkan Kecerdasan Anak

10 Kiat Meningkatkan Kecerdasan Anak

Anak balita memiliki kemampuan yang luar biasa untuk menyerap kepandaian dan informasi baru dibandingkan anak yang berusia lebih tua.

Penelitian menunjukkan, mengenalkan pada kegiatan membaca, bahasa, dan matematika sejak usia balita, akan membuat mereka lebih mudah menangkap pelajaran tersebut nantinya.

Berikut sejumlah cara yang bisa mendorong serta melatih mereka agar memiliki otak cerdas.

1. Mengajak bicara.

Ceritakan tentang apa saja padanya. Yang jelas, anak jadi tahu, dia merupakan pusat perhatian Anda. Hal ini akan mendukungnya di dalam perkembangan pengetahuan bahasa dan pemikirannya.

2. Pilih buku anak-anak dengan huruf yang besar dan gambar yang jelas.

Hal ini akan menolong anak mengerti apa yang mereka lihat dan juga pelan-pelan belajar membaca kata.

3. Beli kaset/VCD/DVD berbahasa asing.

Akan lebih mudah untuk anak balita menangkap bahasa asing daripada di kemudian hari.