0 Keuntungan Lebih Dengan Cara Memasang Alexa Di Blog

Alexa Traffic Rank adalah perkiraan secara kasar popularitas sebuah Blog atau Website di negara tertentu maupun secara Global. Blogger yang bijak pada umumnya men-submit Blog atau Websitenya ke Alexa, bahkan banyak situs-situs yang terkenal juga menggunakannya, menjadikannya salah satu rujukan peringkat sebuah situs.

Mesin pencari seperti Google memiliki banyak metode untuk menempatkan sebuah situs di halaman depan pencarian, salah satunya merujuk kepada peringkat di Alexa. Jika Peringkat Alexa bagus, maka kemungkinan besar sebuah artikel tampil di halaman depan, secara otomatis dapat menambah pengunjung. Dengan demikian Menggunakan Alexa menjadi 1 Poin tambahan yang penting.

Alexa menyediakan informasi mengenai popularitas banyaknya pengunjung harian, tampilan halaman, kata kunci, kategori dan lainnya yang perbaharui (update) setiap hari. Maka dengan memasang Alexa akan mendapatkan keuntungan lebih, agar analisa data-data lebih akurat.

 Tips Cara untuk merampingkan (meningkatkan) peringkat atau Rank Alexa:

1. Gunakan template yang ringan, atau usahakan beratnya halaman tidak lebih dari 100kB, anda dapat mengukur suatu URL Artikel/Homepage, salah satunya di link ini. Mesin Pencari pada umumnya merayapi 100kB terdepan. Template pemberian Blogger aslinya ringan sekitar 50kB kalo diukur. Kecuali untuk website yang memang terkenal banyak pengunjungnya.
2. Jangan terlalu banyak link yang tidak perlu dihalaman, karena banyak mesin pencari yang membatasi perayapan situs (crawl) kira-kira sampai 100 link di satu halaman.
3. Pasang Alexa Plugin/Toolbar di Browser, pilih yang simple atau disable yang tidak perlu, meskipun anda membuka Blog sendiri, tetap akan dihitung oleh Alexa toolbar, kemudian datanya dikirimkan ke pusat.
4. Salah satu cara terbaik adalah Submit Artikel yg bagus di VivaLog, Lintas, karena website ini memiliki banyak pengunjung unik dari nasional maupun manca negara.

Hanya 4 Tips diatas terbukti sangat ampuh, semoga berhasil�

Untuk menggunakan Alexa tidak selalu harus memasang widget-nya, tetapi yang paling penting adalah memasang meta name-nya diletakan dibagian �head�.

Daftar Alexa ada yg gratis dan berbayar, gratis pun cukup menguntungkan.

Berikut cara memasang Alexa meta name, langkah ini digunakan untuk mengklaim kepemilikan sebuah situs:

1. Kunjungi situs alexa.com

2. Daftar (Create an Account alias sign up) seperti pada umumnya menggunakan email ataupun facebook.

3. Verifikasi email dari alexa (jika menggunakan email) Klik link tautannya.
    Verifikasi notifikasi jika menggunakan facebook.
    Kalau sudah masuk, diatas biasanya ada tulisan 'Welcome'.

4. Setelah selesai verifikasi, kunjungi halaman   http://www.alexa.com/siteowners/claim
    Perhatikan: Pilih Verify Ownership (Select Verify)

5. Masukan nama Blog atau website dalam kotak tersedia, jika sudah yakin pilihannya maka lanjutkan (Get Started).
6. Halaman berikutnya Pilih Free (Yang Gratis).

7. Di Halaman Claim Your Site
    Pilih metode yang kedua (option 2) untuk verifikasi situs, Pilihan ini direkomendasikan.

Contoh: <meta name=�alexaVerifyID� content=�xxxxxxxxxxxxxxxxx� />

8. Buka Tab Halaman baru, Login ke Blog, buka Template Blog anda (Edit Template), Copy dan masukan kode meta name yang diberi tanda, di bagian �head� template atau diatas <b:skin> setelah itu save template.

9. Kembali ke halaman verifikasi Alexa, kemudian Klik Verify my ID, Jika benar maka akan ada notifikasi berhasil - your site is succesfully claimed.

10. Sampai langkah ini sebenarnya telah selesai. Tambahan berikut, jika melakukan langkah berikutnya bisa mengisi data-data jika diinginkan (pilihan mau diisi atau tidak).

Demikian cara memasang meta name Alexa, mudah-mudahan bermanfaat. Jika sudah terpasang, mudah-mudahan analisa terhadap Alexanya lebih akurat, karena telah terdaftar. Jika anda ingin memasang widgetnya pun mudah, tergantung kemauan. Berikut Cara Memasang Widget Alexa Di Blog.

1. Kunjungi link ini   http://www.alexa.com/siteowners/widgets

2. Masukan URL Blog kedalam Kotak sesuai widget yang diinginkan,
    Klik Build Widget.

3. Copy Kode yang tersedia dalam kotak sesuai model widgetnya.

4. Masukan kode widgetnya di Add a Gadget (HTML/JavaScript)  Di Blog.
    atau dimana saja ingin dipasangkan pada Template di dalam Blog..

5. Selesai, kemudian jangan lupa Log Out

Demikian cara memasangnya, mudah-mudahan bermanfaat.

Rating: 4

0 Cara Membuat Read More Otomatis di Blog Dengan Efek Gambar

Didalam posting artikel yang satu ini menjelaskan bagaimana Cara Membuat Auto Read More Otomatis Di Halaman Depan Blog.  Ada beberapa cara untuk membuat Auto Read More otomatis, atau popular juga dengan sebutan Baca Selengkapnya. Biasanya Fitur otomatis posting artikel ini ditambahkan di bawah postingan artikel blog Di Homepage, Beranda atau halaman depan.

Fungsi dari Read More Otomatis itu sendiri merupakan salah satu cara untuk membuat halaman homepage lebih terlihat simple dan dinamis, dengan menampilkan judul, gambar yang mempunyai efek transisi dan uraian singkat yang dapat diatur panjangnya sehingga memudahkan pengunjung untuk membaca artikel yang diinginkan lebih cepat.

DEMO

Screenshot

Lihat juga Versi Read more otomatis loading tercepat

Versi yang sebelumnya memang paling cepat, namun kekurangannya bahwa gambar dan deskripsi singkat terbatas untuk dimodifikasi (namun tetap ideal). Sedangkan versi auto read more otomatis yang ini, ukuran gambar mempunyai efek transisi menarik serta panjang deskripsi dapat diatur sesuai kebutuhan. Sebaiknya Posting mempunyai gambar meskipun hanya 1, kalo tidak ada gambar nanti kosong tampilannya.

Untuk menambahkannya memerlukan waktu beberapa menit saja. Auto Read More di halaman depan Blog ini memiliki beberapa versi, dan untuk postingan berikut, akan diuraikan versi yang memiliki loading cepat setelah versi sebelumnya ada yang tercepat, sehingga sangat baik bagi Mesin Pencari.

Auto Read more Artikel dapat di modifikasi sesuai kebutuhan, diuraikan di dalam keterangan.

Berikut langkah-langkah Cara Membuat Auto Read More Otomatis Di Blog. Perhatian: bagi yang sudah memasang read more otomatis yang ada sebelumnya harus dihapus terlebih dahulu.

1. Login Ke Blogger.

2. Klik Template, Backup template untuk jaga2 bila diperlukan, 

    atau langkah berikut bisa di uji coba menggunakan Blog percobaan yang lain.

3. Klik Edit HTML.

4. Klik Kiri 1 x Dimana saja dalam kotak template.

5. Klik Ctrl+F (Supaya mempercepat pencarian kode), 

    Dan cari kode berikut  </head>

    Masukan kode tersebut dalam kotak pencarian, kemudian enter untuk mencari.
6. Masukan Kode berikut diatas </head>

<!--Auto Read More MULAI-->

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

<style>

.post-body {width:auto; height: 170px; float:left; margin:0 auto; padding:0 auto; }

.post-outer {height: 220px; background:#fff;}

.post img{transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out; }

.post img:hover{opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}

.cutter{width:220px;height:140px;overflow:hidden;border:none; float:left; padding:0px 0px 0px 0px; margin-bottom:20px;}

.post-footer{display:none!important}

.post { float:left; margin:0px ; padding-left:0px; padding-right:0px; text-align:justify; }

.post h2 a, .post h2 a:visited, .post h2 strong {height:auto;padding-left:0px;font-size:17px;width:auto;text-align:left;}

.read-more{float:left; padding-top: 10px;}

.read-more a{ color: #fff;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9;  text-decoration:none;font:bold 13px Arial;padding:5px; }

.read-more a:hover{text-decoration:none;background:#666;}

</style>

  

<script type='text/javascript'>

var thumbnail_mode = &quot;float&quot; ;

summary_noimg = 210;summary_img =210;img_thumb_width = 50;img_thumb_height = 50;

</script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(e,f){if(e.indexOf("<")!=-1){var g=e.split("<");for(var h=0;h<g.length;h++){if(g[h].indexOf(">")!=-1){g[h]=g[h].substring(g[h].indexOf(">")+1,g[h].length)}}e=g.join("")}f=(f<e.length-1)?f:e.length-2;while(e.charAt(f-1)!=" "&&e.indexOf(" ",f)!=-1){f++}e=e.substring(0,f-1);return e+"..."}function createSummaryAndThumb(k){var i=document.getElementById(k);var h="";var g=i.getElementsByTagName("img");var j=summary_noimg;if(g.length>=1){h='<span style="display:none;float:left;margin:0px 10px 5px 0px;"><img src="'+g[0].src+'" width="'+img_thumb_width+'px" /></span>';j=summary_img}var l=h+"<div>"+removeHtmlTag(i.innerHTML,j)+"</div>";i.innerHTML=l};

//]]>

</script>

</b:if>

<!--Auto Read More AKHIR-->

Perhatian: Cobalah terlebih dahulu tanpa diedit.
Warna Biru untuk mengatur ketinggian read more otomatis di Halaman Depan.
untuk .post-outer benar2 harus diperhatikan supaya tidak loncat-loncat.
Warna Pink adalah Pengaturan Lebar dan tinggi gambar
Warna Ungu adalah Pengaturan banyaknya deskripsi artikel, tanpa gambar dan dengan gambar.

7. Kemudian Cari Kode <data:post.body/>

    Kode tersebut diatas jumlahnya biasanya ada 2 atau 3 , Cari yang versi web,
    biasanya yang kedua (ke-2) dengan enter 2x pada kotak pencarian.
8. Hapus Kode <data:post.body/> yang kedua dan Ganti dengan kode dibawah ini.

<!--Auto Read More MULAI-->

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

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

<div class='cutter'>

   <script type='text/javascript'>

//<![CDATA[

function bp_thumbnail_resize(e,d){var c=200;var a=true;var b="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKMlTC8_48xE417iCKPagROeDV2dwrh8h6bUMnhH195FnyxhoqGdYK2xlHCAqc-m1fNOlyLPMOImbNHX8tBEZcvdXW53SJ0Hg1yPihXTk-rF8YfjBZrT0XQfU4Im8uyhU1KbBMRx0tqOo/s1600/no+image.jpg";if(a==true&&e==""){e=b}image_tag='<img src="'+e.replace("/s72-c/","/s"+c+"-c/")+'" class="postthumb" alt="'+d+'"/>';if(e!=""){return image_tag}else{return""}};

//]]>

   </script>

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

         <script type='text/javascript'>

document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));

         </script>

      </a>

</div> 

 

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>

   <table border='0'><tbody><tr><td>

      <div class='read-more'>

      <a expr:href='data:post.url'>Baca Selengkapnya &#187;</a>

      </div>

   </td></tr></tbody></table>

</b:if>

</b:if>

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

   <b:else/>

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

</b:if>

<!--Auto Read More AKHIR-->

Warna Oranye adalah ukuran crop dari gambar asli, itu setting standar, sebaiknya biarkan saja.
"Baca Selengkapnya" juga bisa diganti bebas.

9. Preview terlebih dahulu, kalo bagus ya terus Save Template, dan lihat hasilnya.

Demikian Tutorial Cara Membuat Auto Read More Otomatis Artikel Di Blog, mudah-mudahan bisa bermanfaat.

Rating: 3

0 Cara Membuat Artikel Terkait Dengan Gambar Secara Vertikal

Dalam posting artikel dibawah ini menunjukkan bagaimana Cara Membuat Artikel Terkait Dengan Gambar Secara Vertikal yang biasanya ditambahkan di bawah postingan artikel sebuah blog. Fungsi dari Artikel Terkait Bergambar atau dengan thumbnail ini sendiri merupakan teknik untuk menambah tampilan halaman artikel, dari posting artikel yang terkait sesuai dengan label tertentu secara otomatis dan acak dari jumlah tertentu.

DEMO

Baca juga Artikel Terkait Versi Cepat Di Link Ini.

Artikel Terkait Versi Sederhana Di Link Ini.

Cara Membuat Artikel Terkait Dengan Gambar ini tidak sulit, hanya memerlukan waktu beberapa menit saja. Artikel Terkait Bergambar ini cukup bagus ditambahkan di bawah postingan artikel, karena loadingnya yang cukup cepat, dimana Artikel Terkait ini menampilkan judul dan gambar. Artikel Terkait tersebut dapat sedikit di modifikasi sesuai kebutuhan, baik mengganti namanya menjadi Related Post, Baca Juga, Mungkin Anda Juga Tertarik Dengan Artikel Ini, dan lain sebagainya.

Berikut Uraian Cara Membuat Artikel Terkait Dengan Gambar Secara Vertikal.

1. Login Ke Blogger.
2. Klik Template, Backup template terlebih dahulu, untuk jaga2,
    atau langkah berikut bisa di uji coba menggunakan Blog percobaan yang lain.
3. Klik Edit HTML.
4. Klik Kiri 1 x Dimana saja dalam kotak template.
5. Klik Ctrl+F (Supaya mempercepat pencarian kode),
    Dan cari kode berikut  div class='post-footer'
    Masukan kode tersebut dalam kotak pencarian, kemudian enter untuk mencari.
    Kode tersebut mungkin ada 2, pertama untuk versi mobile,
    kedua untuk versi web (biasanya yang kedua).
6. Copy Paste-kan Kode berikut diatas  <div class='post-footer'> yang kedua (versi web).

<!-- Artikel Terkait Dengan Gambar Start -->

<b:if cond='data:blog.pageType == "item"'>
<style>                        
#related_posts{padding:0;overflow:hidden;display:inline;}
#related_posts h4{padding-left:5px;padding-bottom:10px;color:#CC333B;font-family:Mistral;font-size:23px;line-height:23px;text-align:left; letter-spacing:normal;}
ul#relpost_img_sum{margin:0;padding:0;text-align:justify;display:inline;}
ul#relpost_img_sum li{list-style:none;padding:3px;margin:0;width:275px;height:70px; float:left;display:inline;}
ul#relpost_img_sum li a{display:block}
ul#relpost_img_sum li img{float:left;width:90px;height:65px;margin-right:7px;padding:0 auto;border:none;}
ul#relpost_img_sum li a.relinkjdulx{display:block;overflow:hidden;margin-bottom:3px;background-image:none;font-weight:normal;font-size:12px;width:160px;line-height:20px; float:left;text-align:left;}
</style>                          

<script type='text/javascript'>
//<![CDATA[
var relnojudul = 0;
var numpost = 6;
var numchars = 0;
var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicjX19eKN0_davJmu0K-JSaavZeZlZaxfJK06pMgiUKV7DAtM4jQGgfa2GaUMl61MaGMH-c9IkQO-KUEi7_pbD1sAYT8U_e2Zut2uBEdmRYDS6-6gAmGELCDzDFe23PmJlFIVB3U8Mnfo/s1600/grey.png"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function artikelterkait(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<numpost){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><div class='overlayb'></div><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+"</span>";q+="</li>";document.write(q);r++;if(r==numpost){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};
//]]>
</script>

  <div style='width:570px;height:250px; margin-bottom:10px; margin-top:15px;'>
        <div id='related_posts'>
                <h4>Artikel Terkait</h4>
                <b:loop values='data:post.labels' var='label'>
                <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=19&quot;' type='text/javascript'/>
                </b:loop>
          <ul id='relpost_img_sum'>
               <script type='text/javascript'>artikelterkait();</script>
          </ul>
       </div>
</div>
</b:if>

<!-- Artikel Terkait Dengan Gambar End -->

    
Kira-kira tampilannya seperti ini

    ...Kodenya...
    <div class='post-footer'>

Keterangan:
Text berwarna pink: dapat diganti nama, warna, jenis huruf dan besarnya sesuai keinginan.
Text berwarna merah dapat dirubah angkanya untuk jumlah tampilan judul dan gambar.
Text berwarna Oranye Harap Diperhatikan, itu adalah pengaturan Lebar dan Tinggi Dari Fitur ini, coba disesuaikan dengan Lebar Posting Artikel, untuk tinggi (height) mungkin cukup jika jumlah postingnya 6.
Text berwarna Hijau Harap diperhatikan juga, untuk pengaturan maksimal-Lebar dan Tinggi Artikel Terkait yang ditampilkan.
Text warna Biru adalah pengaturan Lebar dan Tinggi Gambar dan Lebar Judul.
Jadi Pada Intinya, dapat dirubah semua dari pengaturan <style>...</style>
Namun Coba dahulu, tanpa diedit, setelah yakin baru di edit pengaturannya.

7. Save Template, dan lihat hasilnya.

Demikian Tutorial Cara Membuat Artikel Terkait Dengan Gambar / Thumbnail Versi Vertikal di bawah postingan artikel, mudah-mudahan bisa bermanfaat.

Rating: 3

0 Cara Membuat Related Post Versi Loading Cepat

Dalam posting artikel berikut ini menunjukkan bagaimana Cara Membuat Related Post Versi Loading Cepat. Biasanya artikel terkait ini ditambahkan di bawah postingan artikel blog. Fungsi dari Related Postini merupakan salah satu teknik untuk menambah pageview halaman, sesuai dengan posting artikel yang terkait dengan label secara otomatis.

DEMO

Versi sebelumnya lihat Artikel Terkait Sederhana
Versi Related Post ini bisa dibilang cepat karena memakai script yang kecil sedangkan cara membuat artikel terkait ini hanya memerlukan waktu beberapa waktu saja. Related Post Versi ini cukup bagus untuk ditambahkan karena loadingnya yang cepat, dan tampilannya pun cukup baik. Related Post Versi Cepat ini hanya menampilkan judulnya saja. Tentu saja tampilannya dapat sedikit di modifikasi sesuai keinginan, seperti Merubah namanya jadi "Related Post", "Baca Juga Artikel Dibawah ini" danlain sebagainya.

Berikut Langkah-langkah Cara Membuat Artikel Terkait Versi Loading Cepat.

1. Login Ke Blogger.
2. Klik Template, Backup template terlebih dahulu, untuk jaga2, 
    atau langkah berikut bisa di uji coba menggunakan Blog percobaan yang lain.
3. Klik Edit HTML.
4. Klik Kiri 1 x Dimana saja dalam kotak template.
5. Klik Ctrl+F (Supaya mempercepat pencarian kode), 
    Dan cari kode berikut  ]]></b:skin> 
    Masukan kode tersebut dalam kotak pencarian, kemudian enter untuk mencari.
6. Masukan Kode berikut diatas  ]]></b:skin>

/* Related Post Cepat

--------------------------------- */

#related-posts { float : left; width : 100%; margin-top:5px; margin-left : 0px; font-size : 13px; font-family:Arial,serif; margin-bottom:0px; } 

#related-posts a { text-decoration : none; } 

#related-posts a:hover { text-decoration : none; } 

#related-posts ul { border : medium none; margin : 10px 0px 10px 0px; padding : 0; } 
#related-posts ul li { display : block; background : url("https://lh3.googleusercontent.com/-6iznc81V_pQ/UcmgB6yKU3I/AAAAAAAABWc/NhxmD6789YU/s25/rss.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 30px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; }

Warna Oranye adalah link gambar rss dan sebaiknya diganti sesuai keinginan.

7. Cari kode berikut  </head>
8. Masukan Kode berikut diatas  </head>

<!-- Related Post Start-->

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

<script type='text/javascript'>

//<![CDATA[

var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_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;}}}}

function removeRelatedDuplicates(){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;}

function printRelatedLabels(){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>

</b:if>

<!-- Related Post End-->

9.   Cari kode berikut  div class='post-footer'
      Kode tersebut mungkin ada 2, pertama untuk versi mobile, 
      kedua untuk versi web (biasanya yang kedua).
10. Masukan Kode berikut diatas  <div class='post-footer'>  yang kedua (versi web).

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

<div id='related-posts'>

<font style='font-size:19px; color:#CC333B; font-family:Arial;'><b>Artikel Terkait: </b>

</font><font color='#fff'><b:loop values='data:post.labels' var='label'><data:label.name/>

<b:if cond='data:label.isLast != &quot;true&quot;'/><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></font>

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>

</div>

</b:if>

    Kira-kira tampilannya seperti ini

    ...Kodenya...
    <div class='post-footer'>
  
  Keterangan:

  Artikel Terkait berwarna pink: dapat Diganti namanya sesuai keinginan, berikut kode warnanya

  Text berwarna hijau dapat dirubah angkanya untuk jumlah tampilan judul. 

7. Save Template, dan lihat hasilnya.

Demikian Cara Membuat Related Post Versi Loading Cepat di bawah postingan artikel, mudah-mudahan bisa bermanfaat.

Rating: 3

0 Cara Menampilkan dan Menyembunyikan Widget di Blog

Anda mempunyai banyak elemen atau widget yang tampil di blog? Widget blog yang terlalu banyak tentunya akan mengurangi kecepatan loading. Namun jika widget itu terasa penting dan tetap ingin mempertahankan keberadaannya ada baiknya anda melakukan pengaturan pada halaman mana saja elemen tersebut akan ditampilkan.

Bagi Anda yang sedang menata tampilan blognya kini saya share teknik cara menampilkan dan menyembunyikan elemen atau widget di halaman tertentu pada sebuah blog. Fungsi dari teknik itu sendiri merupakan salah satu cara untuk membuat halaman blog lebih rapih, lebih efektif, terlihat dinamis, bahkan dapat membuat loading lebih cepat.

Teknik ini menurut saya perlu diketahui dan diterapkan oleh blogger pada blognya. Saya menyarankan hal ini karena tata letak widget dan konten yang berkualitas juga merupakan kriteria penilaian tersendiri baik dari admin maupun pengunjung.

Kita bisa mengatur widget apa saja yang mau ditampilkan di halaman depan atau widget apa saja yang mau disembunyikan di halaman postingan/statis sehingga tampilan blog kita lebih rapih.

Teknik ini cukup mudah untuk diimplementasikan di blog, dan hanya memerlukan waktu beberapa menit saja. Untuk menampilkan dan menyembunyikan widget ini hanya perlu untuk menyisipkan kode HTML sesuai dengan yang diinginkan. 

Coba bandingkan Halaman posting ini dengan Home atau halaman Label.

Berikut Teknik cara menampilkan dan menyembunyikan widget di blog.

catatan: gunakan sesuai keperluan.

1. Untuk menampilkan elemen/widget hanya di Home page.

Kodenya

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

---ISI dari elemen atau Widget---

</b:if>

Contoh Penggunannya

<b:widget id='HTML1' locked='false' title='Nama title' type='HTML'>
<b:includable id='main'>

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

<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>

</b:if>

</b:includable>

</b:widget>

warna merah adalah batas dari penggunaan kode.
warna biru adalah kodenya.

2. Untuk menampilkan elemen/widget hanya di Post page (postingan).

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

---ISI dari elemen atau Widget---

</b:if>

3. Untuk menyembunyikan elemen/widget di Post page (postingan artikel).

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

---ISI dari elemen atau Widget---

</b:if>

4. Untuk menampilkan elemen/widget di halaman tertentu.

<b:if cond='data:blog.url == "URL Halaman"'>

---ISI dari elemen atau Widget---

</b:if>

5. Untuk menyembunyikan elemen/widget di halaman tertentu.

<b:if cond='data:blog.url != "URL Halaman"'>

---ISI dari elemen atau Widget---

</b:if>

6. Untuk menampilkan elemen/widget hanya di halaman arsip (archive).

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

---ISI dari elemen atau Widget---

</b:if>

7. Untuk menyembunyikan elemen/widget di halaman arsip (archive).

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

---ISI dari elemen atau Widget---

</b:if>

8. Untuk menampilkan elemen/widget hanya di halaman statis (static page).

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

---ISI dari elemen atau Widget---

</b:if>

9. Untuk menyembunyikan elemen/widget di halaman statis (static page).

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

---ISI dari elemen atau Widget---

</b:if>

Cara diatas dapat digunakan untuk menampilkan atau menyembunyikan elemen tertentu seperti tampilan halaman depan (Beranda), halaman postingan artikel, halaman statis, ataupun halaman arsip tidak penuh dijejali dengan berbagai macam widget.

Semoga bermanfaat.

Rating: 3.5

0 Cara Membuat Breadcrumbs di Blog

Breadcrumbs atau jejak breadcrumb adalah bentuk bantuan navigasi yang digunakan dalam antarmuka pengguna. Hal ini memungkinkan pengguna untuk melacak lokasi mereka dalam dokumen atau artikel.

Pada Situs atau Blog yang memiliki banyak halaman, navigasi breadcrumbs dapat meningkatkan cara pengguna menemukan jalan atau jejak mereka. Breadcrumbs juga merupakan bantuan efektif yang menunjukkan lokasi pengguna dalam hirarki blog atau website, membuatnya menjadi sumber besar informasi kontekstual untuk halaman arahan.

Breadcrumbs biasanya muncul secara horizontal di bagian atas halaman blog atau website, sering ditempatkan di atas judul. Breadcrumbs memberikan jejak bagi pengguna untuk mengikuti kembali ke titik awal atau entri dalam hirarki struktur situs-halaman induk (Home/Beranda).

Pada umumnya breadcrumbs terlihat seperti dibawah ini:

Home � Label � Judul Artikel

Home � Label 1 � Label 2 � Judul Artikel

Atau

Home � Label � Judul Artikel

Home � Label 1 � Label 2 � Judul Artikel

Atau

Home : Label : Judul Artikel

Home : Label 1 : Label  2 : Judul Artikel

Breadcrumbs biasanya terindex oleh mesin pencari seperti Google dan dapat dilihat diwebmaster tools sebagai structured data. Dan ini adalah contoh hasilnya.

Catatan untuk sebuah blogspot akan langsung terlihat seperti gambar, sedangkan untuk Top Level Domain (namawebsite.com) biasanya harus memiliki ranking dahulu agar cepat terlihat seperti gambar.

Jika ingin mengetahui contoh hasil breadcrumbs yang lain, coba ketikan nama website ini dalam pencarian Google, dan lihat hasilnya. Untuk mendapatkan hasil tersebut harus menerapkan 2 atau lebih label/tag untuk 1 artikel.

Cara membuat breadcrumbs di blog

1. Login Ke Blogger.

2. Klik Template, Backup template untuk jaga2 bila diperlukan, 

    atau langkah berikut bisa di uji coba menggunakan Blog percobaan yang lain.

3. Klik Edit HTML.

4. Klik Kiri 1 x Dimana saja dalam kotak template.

5. Klik Ctrl+F (Supaya mempercepat pencarian kode), 

    Dan cari kode berikut  ]]></b:skin>

    Masukan kode tersebut dalam kotak pencarian, kemudian enter untuk mencari.

6. Masukan Kode berikut diatas ]]></b:skin>

/* breadcrumbs
----------------------------------------------- */

.breadcrumbs{padding-top:5px;padding-bottom:5px; margin:0 0px 5px 0px; font-size:11px; border-bottom:1px solid green; font-weight:bold; font-family:Tahoma; height:auto;}

.breadcrumbs a, .breadcrumbs a:visited{color:#CC0099; }

.breadcrumbs a:hover{color:#00477D;}

warna merah dapat disesuaikan dengan keinginan.

7. Cari kode <b:includable id='main' var='top'> dan setelah ketemu tekan panah sebelah kirinya untuk memperluas.

8. Hapus dan Ganti kode <b:includable id='main' var='top'> dengan kode dibawah ini.

<b:includable id='breadcrumb' var='posts'>

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

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

<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>

<b:else/>

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

<!-- breadcrumb for the post page -->

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>

<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>

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

 &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;max-results=7&quot;' property='v:title' rel='v:url'><data:label.name/></a></span>

</b:loop>

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

</div>

<b:else/>

<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>

</b:if>

</b:loop>

<b:else/>

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

<!-- breadcrumb for the label archive page and search pages.. -->

<div class='breadcrumbs'>

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Arsip untuk <data:blog.pageName/></span>

</div>

<b:else/>

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

<div class='breadcrumbs'>

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

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Semua Posting</span>

<b:else/>

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posting Dengan Kategori <data:blog.pageName/></span>

</b:if>

</div>

</b:if>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

<b:includable id='main' var='top'>

<b:include data='posts' name='breadcrumb'/>

warna orange dapat dirubah untuk menampilkan jumlah posting dalam label.

Beberapa fungsi dari Breadcrumbs sebagai berikut:

Kenyamanan Bagi Pengguna

Breadcrumbs digunakan terutama untuk memberikan pengguna sarana sekunder navigasi sebuah blog atau website. Dengan menawarkan jejak breadcrumbs untuk semua halaman pada situs multi-level besar, pengguna dapat menavigasi ke kategori tingkat yang lebih tinggi lebih mudah.

Tidak memerlukan area yang besar

Karena Breadcrumbs biasanya berbentuk horizontal berorientasi dengan jelas bentuk breadcrumbs tidak mengambil banyak ruang pada halaman. Manfaat adalah bahwa breadcrumbs memiliki sedikit atau tidak ada dampak negatif dalam hal kelebihan konten, dan breadcrumbs memiliki manfaat lebih besar daripada negatifnya jika digunakan dengan benar.

Demikian cara membuat breadcrumbs di blog pada postingan ini, mudah-mudahn dapat bermanfaat.

Rating: 3

0 Cara Membuat Read More Otomatis Artikel Di Homepage

Dalam posting artikel berikut ini menunjukkan bagaimana Cara Membuat Read More Otomatis Artikel Di Homepage.  Ada beberapa cara untuk membuat Read More otomatis (Auto Read More). Biasanya Fitur Auto Read More ini ditambahkan di bawah postingan artikel blog Di Homepage/Beranda.

Fungsi dari Read More Otomatis itu sendiri merupakan salah satu teknik untuk membuat halaman homepage lebih terlihat simple dan dinamis, dengan menampilkan judul, gambar dan sedikit uraian sehingga memudahkan pengunjung untuk memilih judul artikel yang diinginkan.

DEMO 1 - DEMO 2

Untuk Versi Read More Otomatis Versi  2 Lihat Di Link Ini

Demo 1 dan 2 agak sedikit berbeda, sedikit dimodifikasi.Untuk menambahkannya hanya memerlukan waktu beberapa menit saja. Read More Otomatis Artikel ini memiliki beberapa versi, dan untuk postingan berikut, akan diuraikan versi yang memiliki loading tercepat, sehingga sangat baik bagi Mesin Pencari.

Tentu saja Auto Readmore Artikel tersebut dapat sedikit di modifikasi sesuai kebutuhan, Seperti Merubah Ukuran Gambar, Read More diganti menjadi Baca Selengkapnya dan lain-lain.

Berikut langkah-langkah Cara Membuat Read More Otomatis Artikel Di Homepage (Beranda).
Perhatian: bagi yang sudah memasang auto read more yang ada sebelumnya harus dihapus terlebih dahulu.

1. Login Ke Blogger.

2. Klik Template, Backup template untuk jaga2 bila diperlukan, 

    atau langkah berikut bisa di uji coba menggunakan Blog percobaan yang lain.

3. Klik Edit HTML.

4. Klik Kiri 1 x Dimana saja dalam kotak template.

5. Klik Ctrl+F (Supaya mempercepat pencarian kode), 

    Dan cari kode berikut  ]]></b:skin>

    Masukan kode tersebut dalam kotak pencarian, kemudian enter untuk mencari.
6. Masukan Kode berikut diatas ]]></b:skin>

/* Gambar autoread more

----------------------------------------------- */
.post-thumbnail { width:100px;  height:70px;  float:left;  margin:0px 10px 0px 0px; }

7. Kemudian Cari Kode <data:post.body/>
    Kode tersebut diatas jumlahnya biasanya ada 2 atau 3 , Cari yang versi web, 
    biasanya yang kedua (ke-2), kalo tidak berhasil mungkin yang ke-3.

8. Hapus Kode <data:post.body/> yang kedua/ketiga (salahsatu) dan Ganti dengan kode dibawah ini.

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

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

    <b:if cond='data:post.thumbnailUrl'>

        <a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' expr:src='data:post.thumbnailUrl'/></a>

    <b:else/>

        <a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKMlTC8_48xE417iCKPagROeDV2dwrh8h6bUMnhH195FnyxhoqGdYK2xlHCAqc-m1fNOlyLPMOImbNHX8tBEZcvdXW53SJ0Hg1yPihXTk-rF8YfjBZrT0XQfU4Im8uyhU1KbBMRx0tqOo/s1600/no+image.jpg'/></a>

    </b:if>

    <div class='post-snippet'><data:post.snippet/></div>

            <a class='button' expr:href='data:post.url'>Baca Selengkapnya �</a>

    </b:if>

</b:if>

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

<b:else/>

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

        <data:post.body/>

    </b:if>

</b:if>

warna hijau adalah gambar pengganti jika dalam artikel tidak ada gambar dan bisa diganti dengan url gambar sesuai keinginan. "Baca Selengkapnya" juga bisa diganti

9. Untuk Merubah Ketinggian deskripsi artikel text, Cari Kode .post-body { atau .post {
    Masukan atau Ganti { line-height: 1.8; ...
    bisa juga ditulis line-height: 23px; atau disesuaikan ketinggiannya.

10.Save Template, dan lihat hasilnya.

Demikian Tutorial Cara Membuat Read More Otomatis Artikel Di Homepage, mudah-mudahan bisa bermanfaat.

Rating: 3