Cara Membuat Artikel Terkait Versi Mobile untuk Blogger

ads here
Cara Membuat Artikel Terkait Versi Mobile. Selain mengoptimasi Blog dalam tempilan dekstop yang hanya bisa dilihat melalui layar Pc dan sekelasnya juga sangat penting mengoptimasi blog dalam versi mobile. Karena kebanyakan template hanya di optimasi secara dekstop oleh pembuat terlebih yang menggunakan template bawaan blogger.


Kali ini Expert Blogger akan memberikan sebuah tutorial tentang mengoptimasi tampilan mobile blog yaitu menambahkan related posts atau artikel terkait atau related articles atau apalah namanya. Karena dengan mengoptimasi tampilan versi mobile blog sahabat semua akan memberikan efek yang besar terhadap peningkatan trafik pengunjung ataupun page views blog sahabat ExpertBlogger.

Artikel Terkait Versi Mobile


Artikel Terkail Versi Mobile


Mengapa Harus mengoptimasi blog Versi Mobile ?

Sangatlah mudah menjawab pertanyaan ini. Seperti yang sama-sama kita ketahui sekarang bahwa perkembangan teknology digital yang tumbuh sangat cepat tanpa terkendali 10 tahun belakangan ini telah membuat banyak perubahan dalam segi penerimaan informasi diseluruh lapisan masyarakat baik yang berada ditermpat terpencil sekalipun. Kehadiran berbagai merek dan jenis gadget sudah tidak bisa dibendung lagi kehadirannya yang menyebabkan hampir 90 persen penduduk di muka bumi ini memiliki gadget atau handphone (smartphone)

Tentu dengan perkembangan ini yang memudahkan masyarakat luas leluasa mengakses informasi dari dunia internet mewajibkan kita para blogger sebagai penyedia konten di dunia internet harus mengikuti perkembangan dengan mengoptimasi blog kita agar semakin mudah diakses oleh masyarakat luas dan pastinya ini akan menambah keuntungan yang lebih besar kepada kita sebagai penyedia konten.

Silahkan ikuti petunjuk dibawah ini untuk membuat artikel terkait versi mobile untuk blogger:

Langkah 1

anda harus login terlebih dahulu ke dalam blog anda menggunakan akun gmail yang sahabat gunakan saat pertama kali membuat blog


Langkah 2

Untuk bisa menampilkan artikel terkait versi mobile ini maka anda harus mengaktifkan tampilan versi mobile di settingan template.

Baca Juga: Cara Menbuat Template Versi mobile dan cara Mengganti Template

Langkah 3

Masuk ke menu template di dashboard blog anda dan klik edit HTML dan centang expand di tengah kode HTML tersebut. kemudian letakkan kode dibawah ini tepat di atas kode </head>

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

Langkah 4

tekan CTRL+F ditengah template dan cari kode <b:includable id='mobile-post' var='post'> lalu dibawahnya temukan kode <data:post.body/> <div style='clear: both;'/> .dan letakkan kode dibawah ini tepat dibawah <div style='clear: both;'/>.

<b:if cond='data:blog.pageType == "item"'>
<div id='mobile-related-posts'>
<div style='text-align: justify;'>
<h4 style='color:#fff;background:#609DDB'>
                            :: Related Articles ::
                          </h4>
<b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
</div>
</b:if>


Langkah 5

klik SAVE untuk menyimpan perubahan yang telah anda lakukan dan open new page dan lihatlah perubahan yang terjadi dengan tampilan mobile template sahabat.

Sekian dan Terima  Kasih sahabat telah membaca artikel tentang Cara Membuat Artikel Terkait Versi Mobile untuk blog yang di persenbahkan oleh Expert Blogger. Semoga bermanfaat dan selamat mencoba. salam sukses blogger.

FOLLOW NOW