Cara membuat Widget Related Post di Blog

Cara membuat Widget Related Post di Blog

informasi Seo Blog Tips Dan Trik Tutorial

Ciharu 06:37 Add

Cara Membuat Widget Related Post (Posting Terkait/Artikel Terkait) yang Simple dan Fast Loading di  bawah tiap postingan blog blogspot.

Cara memasangnya sangat mudah. Tidak usah masuk ke template - edit HTML. Cukup pasang di sidebar widget, maka Related Posts akan muncul di bawah setiap postingan blog.

Artikel sebelumnya :

• Cara membuat artikel terkait dengan mudah di blog.
• Cara membuat artikel terkait dengan gambar

Cara Membuat Related Post Simple Fast Loading
Pastikan ada kode jQuery min di dalam template blog Anda.
Jika tidak ada, maka tambahkan dulu kode jQuery berikut ini di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' 
type='text/javascript'></script>

Cara membuat widget artikel terkait / related post :
1. Layout / Tata Letak → Add a Gadget → HTML/JavaScript
2. Judul widget kosongkan
3. Copas kode berikut ini ke kolom Content:

<!--SIMPLE RELATED POSTS-->
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
   'containerSelector':'div.post-body'
   ,'loadingText':'loading...'
});</script>
<!--SIMPLE RELATED POSTS-->

Jika yang muncul tulisan "Recent Posts", bukan "Related Posts", maka gunakan kode berikut ini:

<!--SIMPLE RELATED POSTS-->
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<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 != "true"'>,</b:if>
</b:loop>
</b:if>
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
   'containerSelector':'div.post-body'
   ,'loadingText':'loading...'
});</script>
<!--SIMPLE RELATED POSTS-->

KODE RELATED POST LAINNYA
Kode related posts lain yang bisa digunakan:

<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js"type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
   'containerSelector':'div.post-body'
   ,'relatedTitle':'Related Posts:'
   ,'recentTitle':'Recent Posts:'
   ,'loadingText':'loading...'
   ,'maxPosts':'5'
   ,'blogURL':'http://alx-bot.blogspot.com'
});</script>

Cara membuat artikel terkait dengan gambar di blogspot

Cara membuat artikel terkait dengan gambar di blogspot

Seo Blog Tips Dan Trik Tutorial

Ciharu 04:57 Add

Tutorial cara membuat artikel terkait bergambar di bawah postingan blog, pada artikel sebelumnya telah kita bahas cara membuat artikel terkait dengan mudah di blog ( blogspot ).

Artikel terkait dengan menyertakan gambar bisa juga jadi alternatif untuk memberi minat pengunjung untuk terus betah membaca artikel yang di sajikan dari 1 artikel ke artikel lainnya yang terkait.

Cara membuat artikel terkait dengan gambar di bawah postingan blog

Berikut langkah-langkah menambah Artikel terkait di bagian bawah blog kita

1. Pastinya masuk dulu ke akun Blogger kalian (pasti tau..)
2. Klik dan masuk ke menu Template dan pilih edit HTML
3. Centang EXPAND TEMPLATE WIDGET ( tapi saya rasa blogger sekarang gak ada n perlu lagi jadi jika no 3 gak ada langsung no 4 aja ya)
4. Di kotak yang berisi kode-kode HTML itu klik Ctrl+f dan akan muncul kotak pencarian di pojok kanan atas itu dan cari tekan enter dan lihat akan ada tanda di kata </head>  yang anda cari tadi
5. Dan selanjutnya copy kode dibawah ini tepat diatas atau sebelum kata  </head> tadi

 <!--Related Posts with thumbnails Scripts and Styles Start-->

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 10px;  -moz-border-radius: 10px; border-radius: 10px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

6. Setelah selesai, cari kode <div class='post-footer'> seperti cara tadi (jika ada dua kode yang sama pilih aja yang kedua ya)
7. Nah kalau sudah ketemu langkah selanjutnya adalah copy script berikut diatas <div class='post-footer'> yang pertama anda temukan tadi

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<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_thumbs&amp;max-results=8&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig4Dcl5jnMBrIDWMpLmxQTGChqbrCNaAB3KgmcrTu-CPiJ8l2631taUvzVBAV13TshV8eyEx2dspMeYgsDnn_Y5oRM0sS7KpQl_FLZ_oWCHoUoOznmyhmNobFaYBTVUYpWBk2FoFFWuK6y/s1600/best+blogger+tips.png'/></a>
</b:if></b:if><!-- Related Posts with Thumbnails Code End-->

Ket: ubah maxresult = 4 dengan jumlah artikel terkait maksimal yang ingin ditampilkan

8. Ok, selesai, upsss belum.. jangan lupa klik simpan Template

Selesai sudah Tutorial membuat artikel terkait dengan gambar di bawah postingan blog, semoga berhasil dan bermanfaat.

Cara membuat artikel terkait dengan mudah di blog

Cara membuat artikel terkait dengan mudah di blog

Seo Blog Tips Dan Trik Tutorial web tools

Ciharu 04:53 2

Cara Membuat Artikel Terkait atau sering juga disebut Related Post, bisa dibilang bukan hal yang susah apalagi buatnya di Blogspot, semakin mudah !
Mungkin ada yang belum tahu apa itu Artikel Terkait, ok ok tidak masalah, akan saya jelaskan. sesuai namanya Artikel Terkait adalah artikel tambahan yang kita sajikan ke pengunjung berdasarkan apa yang sedang pengunjung baca dengan memanfaatkan label atau tag.

Selanjutnya saat kita buat artikel baru dengan judul, misalnya Tanpa Kerja Bisa Kaya ? Ngimpi ! pada artikel kedua kita  juga harus memberinya sebuah label yang sama dengan label yang ada di artikel pertama tadi yaitu 'Kerja'

Selanjutnya mereka akan saling terkait, saat pengunjung membuka Artikel 1 mereka akan disarankan oleh Artikel Terkait untuk membaca Artikel 2 dan begitu sebaliknya

Kembali ke Topik, disini kita akan membuat Artikel Terkait Sederhana tapi tetap Menarik atau enak dipandang mata, tanpa Thumnail, ingat ya, disini saya akan mejelaskan Cara Membuat Artikel Terkait tanpa Thumnbail. Kenapa tanpa Thumnail ? karena Ringan !

Yap, artikel terkait polosan atau tanpa Thumnail tidak akan terlalu membebani pengunjung saat mengakses situs atau artikel kita. Tentu tergantung pada template blog yang di gunakan baik itu template responsive ataupun template Seo yang ringan.

Cara Membuat Artikel Terkait

Agar pembuatan atau cara membuat artikel terkait ini sukses diperlukan ketelitian yang matang, jadi pastikan Anda melakukan step by step dengan benar.

1. Klik Menu Template dan Pilih Edit HTML
2. Backup Template jika dirasa perlu (tapi saya rasa tidak perlu)
3. Tekan CTRL + F dan ketikkan </head>
4. Jika sudah menemukan kode diatas, letakkan kode dibawah ini tepat diatas </head>

<scripttype="text/javascript">
//<![CDATA[
var relatedTitles = newArray();
var relatedTitlesNum = 0;
var relatedUrls = newArray();
functionrelated_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel =='alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;}}}}
functionremoveRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < 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 < a.length; j++) if (a[j]==e) return true;
return false;}
functionprintRelatedLabels() {
var r =Math.floor((relatedTitles.length - 1) *Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i <20) {
document.write('<li><a href="' + relatedUrls[r] +'">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;}
i++;}
document.write('</ul>');}
//]]>
</script>

Script atau kode diatas fungsinya untuk mengatur Artikel Terkait kita agar nanti setiap artikelnya masuk dalam Unordered List ( ul ) jadi nanti kita bisa mengeditnya dengan mudah melalui css.

5. Selanjutnya cari juga kode <data:post.body/> dengan menggunakan CTRL + F lalu letakkan script dibawah tepat setelah kode <data:post.body/> (dibawahnya) namun disini biasanya banyak terjadi kesalahan, karena <data:post.body/> terkadang ada lebih dari satu buah (tergantung template) jika template standar dari blogspot akan ada 4 <data:post.body/> jadi letakkan letakkan pada kode ke 3, untuk template yang lain yang mempunya 2 <data:post.body/> solusinya letakkan pada kode kedua atau terakhir, template lain silahkan dicoba coba sendiri. Kode yang harus diletakkan dibawah <data:post.body/> adalah sebagai berikut.

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType =="item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType =="item"'>
<h4>Artikel Terkait</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>

6. Simpan, dan lihat hasilnya

Penentu kesuksesan lain dari pembuat Artikel Terkait adalah penamaan pada Label, misalnya dalam 1 Artikel terdapat dua Label, contohnya 'Kerja' dan 'Online' nah jika ingin Artikel Terkait dimuncul dalam salah satu artikel tentu kedua artikel tersebut juga harus diberi kedua label tersebut, Tidak bisa Satu !


Baca juga : Cara membuat artikel terkait dengan gambar di bawah postingan blog.


Sampai disini dulu tutotial mengenai Cara Membuat Artikel Terkait Yang Mudah di Blogspot yang bisa saya bagikan ke Anda, selamat mencoba dan semoga berhasil.

Template Blog SEO paling ringan

Template Blog SEO paling ringan

Download Seo Blog Template Tips Dan Trik Tutorial

Ciharu 21:42 Add

Setelah sebelumnya saya membagikan Template blogger responsive SEO friendly kali ini saya akan membagikan update template terbaru yang lebih ringan dan tentunya lebih SEO friendly dari yang sebelumnya. template ini saya namakan Template SEO Paling Ringan.

Template SEO ini saya bagikan gratis buat pembaca setia blog SEO Tools, bisa dikatakan hampir mirip 99% dengan template yang saya pakai. tapi mohon link di footer jangan dihapus jika sobat masih ingin selalu mendapat template yang terbaru dari saya. mari kita lihat fitur dan penampakan Template SEO Paling Ringan dibawah ini.


Fitur Template

• SEO friendly
• Visitor friendly
• Dilengkapi dengan dinamic heading h1, h2 dan h3. hal ini sesuai dengan yang dianjurkan chkme.com, silahkan cek di http://chkme.com/page-seo-tools masukkan alx-bot.blogspot.com hasil cek akan menunjukkan 100%
• Dilengkapi dengan dinamic meta tag deskripsi dan keyword otomatis (meta tag wajib untuk menghindari duplikat meta deskripsi & keyword)
• Support facebook comment, sehingga mudah bagi pembaca untuk berkomentar
• Sudah dipersenjatai autoreadmore yang tercepat dan tanpa menggunakan script
• dilengkapi dengan tambahan beberapa meta tag untuk mempermudah robot menjelajah blog sobat
• Fast Loading, template ini sangat ringan, bisa cek di https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Falx-bot.blogspot.com%2F&tab=desktop. bisa dikatakan template SEO Tools V.2 ini adalah template yang tercepat di kelasnya. bandingkan dengan template yang dibuat teman teman blogger yang lain
• Bisa juga chek kecepatan di SEO Tools Analyze atau pagespeed insight
• Konsep minimalis, simple style dan clean white, dengan semua fitur yang lengkap ini visitor akan betah berlama lama mampir di blog kita

Penampakan Template

Demo | Download

Panduan Pemakaian :

Jangan lupa untuk mengedit deskripsi, meta tag dan account +Google Plus. Caranya adalah sebagai berikut :

1. Seteleh template SEO dipasang, cari kode seperti ini :
 "meta content='DESCRIPTION' name='ISI  DESKRIPSI UNTUK HOMEPAGE BLOG SOBAT' "
2. Ganti kode berwarna hijau tersebut dengan deskripsi blog.
→ Contoh: meta content='DESCRIPTION' name='Blog yang membahas tentang SEO'
3.Setelah itu save template. setelah di save, lihat kembali kode dibawahnya seperti ini :
" meta expr:content='data:blog.pageName + ", 'ISI DENGAN KATA KUNCI' name='keywords' "
4. Ganti kode yang berwarna hijau tersebut dengan katakunci blog sobat.
meta expr:content='data:blog.pageName + ", 'seo, pagerank, backlink, serp, list edu, gov' name='keywords'
5. Jangan Lupa Account +Google Plus diganti dengan miliknya sobat kemudian save template.
6. Nonaktifkan template di Seluler dengan memilih tidak, seperti gambar dibawah ini:
template seo blogspot
7. Jika ingin upload atau copy gambar di postingan harus menggunakan hostingan milik +Google atau +Blogger atau yang bersumber darinya, seperti link dari gambar bp.blogspot.com.
8. Deskripsi dan Keyword harus relevan dengan konten blog sobat. Misalnya blog sobat membahas tentang Blogging tutorial. Maka kata kunci dan deskripsi harus seputar Blogging tutorial juga.

Semoga Template SEO Paling Ringan ini bermanfaat buat sobat semua.

Template Blogger Responsive SEO friendly

Template Blogger Responsive SEO friendly

Download Seo Blog Template

Ciharu 11:01 Add

Template blogger responsive dan seo friendly, download gratis template blog yang responsive dan sudah tentu cukup ringan saat loading dan SEO ( Search Engine Optimizion ) friendly di setiap search engine terutama mesin pencari google.

Template atau tema sebuah halaman web/blog cukup memiliki banyak pengaruh terhadap mesin pencari dan kenyamanan pengunjung atau pembaca artikel. Keringanan dan kecepatan saat membuka halaman web/blog cukup di pengaruhi oleh template yang di gunakan, maka tak sedikit pemilik blog yang merubah tema ( template ) bawaannya.

Berikut ini beberapa template blogger responsive dan seo friendly terbaik yang telah terbukti paling ringan setelah di cek pada pagespeed insight google, maka template berikut  bisa di gunakan bahkan banyak pemilik blog yang menggunakan template ini.

10 Template terbaik responsive dan seo friendly :

1. Google SEO V.2
→ Demo | → Download

2. New Johny Wus V.3
→ Demo | → Download

3. New Thesis Seo
→ Demo | → Download

4. G Vusion 2 Template
→ Demo | → Download

5. Jurnalistik Responsive
→ Demo | → Download

6. Magento Template
→ Demo | → Download

7. Mini Mag
→ Demo | → Download

8. Blogku Blogger Template
→ Demo | → Download

9. Jarid Template Responsive
→ Demo | → Download

10. Invasion Responsive
→ Demo | → Download

Silahkan lihat demo dari template di atas kemudian Download Gratis Template Blogger Responsive dan Seo Friendly, pilih sesuai keinginan kalian.

SEO - Optimasi Mesin Pencari | Seo Blog - Get For Free

SEO - Optimasi Mesin Pencari | Seo Blog - Get For Free

informasi Seo Blog Tips Dan Trik Tutorial

Ciharu 22:18 Add

Seo atau Optimasi mesin pencari merupakan hal yang paling utama dalam pembuatan sebuah halaman web, karena SEO merupakan faktor utama yang akan menentukan halaman di mesin pencari " Search Engine ".
Lalu apa tujuan dan manfaat SEO ?
Bagaimana membuat halaman yang SEO ?

Pengertian SEO menurut Wikipedia :

Optimisasi mesin pencari (bahasa Inggris: Search Engine Optimization, biasa disingkat SEO) adalah serangkaian proses yang dilakukan secara sistematis yang bertujuan untuk meningkatkan volume dan kualitas trafik kunjungan melalui mesin pencari menuju situs web tertentu dengan memanfaatkan mekanisme kerja atau algoritma mesin pencari tersebut. Tujuan dari SEO adalah menempatkan sebuah situs web pada posisi teratas, atau setidaknya halaman pertama hasil pencarian berdasarkan kata kunci tertentu yang ditargetkan. Secara logis, situs web yang menempati posisi teratas pada hasil pencarian memiliki peluang lebih besar untuk mendapatkan pengunjung.

Sejalan dengan makin berkembangnya pemanfaatan jaringan internet sebagai media bisnis, kebutuhan atas SEO juga semakin meningkat. Berada pada posisi teratas hasil pencarian akan meningkatkan peluang sebuah perusahaan pemasaran berbasis web untuk mendapatkan pelanggan baru. Peluang ini dimanfaatkan sejumlah pihak untuk menawarkan jasa optimisasi mesin pencari bagi perusahaan-perusahaan yang memiliki basis usaha di internet.

Manfaat dan Tujuan Seo

* SEO dapat memperkuat blog di mata mesin pencari (search engine)
Karena search engine atau mesin pencari tidak akan tertipu jika ada artikel atau blog yang sama, secara otomatis SEO tersebut tidak akan berkembang. Jadi teman-teman harus sekreatif mungkin dan pastinya dengan teknik SEO yang teman-teman miliki.
* SEO dapat memperkuat blog
* SEO dapat menaikkan ranking
Suatu website atau blog dengan kata kunci yang ditentukan oleh pembuat atau pemilik web .

Mengoptimalkan SEO

Beberapa hal yang harus di perhatikan ketika membuat dan mengelola  sebuah halaman web/blog adalah " Seo OnPage "
- Buat suatu judul dan isi artikel sekreatif mungkin tanpa hasil 90% copy paste.
- Targetkan beberapa kata kunci " keywords ".
- Optimalkan isi konten halaman, agar tidak berat saat di buka melalui berbagai perangkat. Terutama kemudahan di rayapi oleh search engine.
- Gunakan template/tema halaman yang mobile friendly.
  " baca artikel : PageSpeed dan Mobile Friendly Tools "
- Cobalah gunakan Seo Audit atau Seo Analyz agar kita bisa mengetahui beberapa kesalahan saat search engine merayapi dan merender halaman web/blog.
  " baca artikel : 16 PageSpeed Tool "

Google PageSpeed dan Mobile Friendly Tools

Google PageSpeed dan Mobile Friendly Tools

Seo Blog Tips Dan Trik Tutorial web tools

Ciharu 09:36 Add

Apakah halaman website atau blog yang anda kelola bisa mudah di akses melalui seluler ? Seberapa cepat halaman anda di semua perangkat ?
Kecepatan halaman ( PageSpeed ) dan kemudahan di akses melalui seluler ( Mobile Friendly ) adalah hal utama yang harus di perhatikan dalam mengelola sebuah halaman web.

Google PageSpeed Tools
Google menyediakaan tools ( alat ) untuk menguji seberapa cepat halaman web di berbagai perangkat, baik melalui seluler ataupun dekstop. Anda bisa mengetahui berapa nilai skor, seberapa banyak kesalahan yang harus di perbaiki.
PageSpeed Insights cukup akurat untuk menguji kecepatan sebuah halaman web di semua perangkat bahkan beberapa saran perbaikan pada halaman yang salah dan error bisa anda perbaiki.
SEO analyz  harus dilakukan untuk menganalisis semua konten dan pengoptimalan halaman web supaya lebih seo friendly di mata search engine ataupun di mata pengunjung halaman.

"Pelajari lebih lanjut tentang alat kinerja web di Google, termasuk ekstensi browser dan API untuk Insights, Layanan PageSpeed, dan perpustakaan pengoptimalan kami. "

Mobile Friendly Page
Selain Kecepatan halaman ( PageSpeed ), apakah halaman web anda MobileFriendly ?
Sebagian besar pengguna internet lebih banyak menggunakan seluler ( mobile ), jadi haruslah anda membuat sebuah halaman yang lebih mudah di akses melaui seluler " Mobile-Friendly " agar baik di semua perangkat. →pelajari lebih lanjut ( google developer ).

" Experience test for mobile pages into the Mobile Friendly Test, which you can try out here."

PageSpeed dan Mobile Friendly Google
Cobalah untuk menganalisis semua konten halaman web anda pada Google pagespeed tools untuk mengetahui seberapa baik halaman web di setiap perangkat, terutama pada perangkat seluler.
Memiliki halaman web yang sesuai di perangkat seluler ( mobile friendly ) telah menjadi bagian penting dalam keberadaan online.

Sumber : developers.google.com