Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

16
Tgl. 30 Juli 2013

Inilah Kode - Script Yang Dipakai Untuk Membuat Tautan Tombol Atau Link Lihat Versi Mobile Dan Desktop Pada Weblog

TEMPLATE ERROR: Invalid data reference desktopLinkUrl: No dictionary named: '' in: ['blog', 'skin', 'view']...

Tautan Tombol Lihat Laman Versi Seluler Dan Desktop Pada ELTELU Blog

TEMPLATE ERROR: Invalid data reference desktopLinkUrl: No dictionary named: '' in: ['blog', 'skin', 'view']; Apakah Anda pernah mendapati pesan kesalahan atau error seperti ini saat melakukan penyuntikan (editing) pada template? Jika pernah, maka ada baiknya bila rangkaian kode di bawah ini Anda kembalikan di tempat yang semestinya dan kemudian menggunakan teknik yang diuraikan dalam artikel ini untuk menyelesaikan pekerjaan penyuntingan pada template blog yang Anda kelola.

<a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a>

Akan tetapi jika belum pernah mendapatinya, maka yang perlu Anda ketahui terlebih dulu adalah bahwasanya pesan kesalahan atau error seperti di atas akan ditampilkan pada laman blog apabila Anda memindah rangkaian kode tersebut dan kemudian menempatkannya di luar main section.

Satu hal yang perlu diketahui pula bahwasanya fungsi atau kegunaan dari rangkaian kode di atas yaitu untuk menampilkan tautan ‘Lihat versi web / View web version’ ketika Anda membuka sebuah laman blog dengan menggunakan perangkat mobile dan atau membukanya dalam mode tampilan versi seluler seperti yang tampak pada gambar di bawah ini.

Ilustrasi Tampilan Blog Versi Seluler

Nah, apabila dengan cara memindah rangkaian kode di atas dan kemudian menempatkannya di luar main section yang terjadi malah error,  maka untuk membuat tautan tombol atau link ‘Lihat versi web / View web version’ dan juga ‘Lihat versi seluler / View mobile version‘ di luar main section (misal pada area header seperti yang tampak pada gambar pertama di atas) caranya bagaimana?

Sekaligus melanjutkan artikel sebelumnya tentang cara membuat dan mengubah halaman blog menjadi seperti tampilan website profesional, maka untuk keperluan tersebut dapat Anda lakukan dengan memanfaatkan fungsi JavaScript seperti yang termuat pada langkah-langkah pengerjaan di bawah ini. Dimana langkah-langkah pengerjaan yang dmaksud adalah sebagai berikut:

 

Pertama, buka editor template.

Kedua, sisipkan rangkaian script berikut ini pada bagian yang Anda inginkan. Dalam hal ini bagian yang dimaksud adalah bagian yang nantinya digunakan sebagai tempat untuk menampilkan tautan tombol ‘Lihat versi web / View web version’ dan juga ‘Lihat versi seluler / View mobile version‘ pada laman blog yang Anda kelola. Sebagai contoh misalnya pada bagian header seperti yang tampak pada gambar pertama di atas atau pada bagian yang lainnya sesuai dengan yang Anda inginkan.

<b:if cond='data:blog.isMobile'>
<script>
//<![CDATA[
function mlnk(durl)
{
var durl='?m=0';
murllnk='<a rel="alternate" href="'+durl.replace('?m=1','+durl+')+'"><img title="Lihat Halaman Versi Desktop" alt="Versi Desktop" src="https://lh5.googleusercontent.com/-MOv7Zs_rows/Uc6uyPNqOfI/AAAAAAAABdg/mygBfJRwGtw/s800/Monitor.png"/></a>';
if(durl!="") return murllnk; else return "";
}
//]]>
</script>
<script type='text/javascript'>
document.write(mlnk(&quot;http://eltelu.blogspot.com/?m=1&quot;));
</script>
<b:else/>
<script>
//<![CDATA[
function dlnk(murl)
{
var murl='?m=1';
durllnk='<a rel="alternate" href="'+murl.replace('?m=0','+murl+')+'"><img title="Lihat Halaman Versi Seluler" alt="Versi Seluler" src="https://lh5.googleusercontent.com/-KLJL4umLdlo/UYhR7FlEv6I/AAAAAAAABRw/Yt1WnLvAW_c/s800/Mobile.png"/></a>';
if(murl!="") return durllnk; else return "";
}
//]]>
</script>
<script type='text/javascript'>
document.write(dlnk(&quot;http://eltelu.blogspot.com/?m=0&quot;));
</script>
</b:if>

Keterangan:

Ganti http://eltelu.blogspot.com/ sesuai dengan alamat blog yang Anda kelola. Namun ingat bahwa yang perlu diganti hanyalah http://eltelu.blogspot.com/ dan tidak termasuk ?m=0 serta ?m=1 yang terdapat di belakangnya.

Ketiga, lakukan pratinjau dan selanjutnya apabila hasilnya telah sesuai dengan yang diharapkan maka simpanlah template Anda.

 

Oh ya, perlu diketahui dan diingat bahwasanya rangkaian script yang terdapat pada langkah kedua tersebut akan menghasilkan tautan dalam bentuk tombol seperti halnya yang ditunjukkan dengan tanda anak panah pada gambar pertama di atas. Sehingga apabila Anda ingin menampilkan tautan dalam bentuk teks, maka pada langkah yang kedua dapat Anda gunakan rangkaian script di bawah ini.

<b:if cond='data:blog.isMobile'>
<script>
//<![CDATA[
function mlnk(durl)
{
var durl='?m=0';
murllnk='<a rel="alternate" href="'+durl.replace('?m=1','+durl+')+'">Lihat Versi Desktop</a>';
if(durl!="") return murllnk; else return "";
}
//]]>
</script>
<script type='text/javascript'>
document.write(mlnk(&quot;http://eltelu.blogspot.com/?m=1&quot;));
</script>
<b:else/>
<script>
//<![CDATA[
function dlnk(murl)
{
var murl='?m=1';
durllnk='<a rel="alternate" href="'+murl.replace('?m=0','+murl+')+'">Lihat Versi Seluler</a>';
if(murl!="") return durllnk; else return "";
}
//]]>
</script>
<script type='text/javascript'>
document.write(dlnk(&quot;http://eltelu.blogspot.com/?m=0&quot;));
</script>
</b:if>

Dengan demikian maka apabila script yang dipakai untuk langkah kedua adalah rangkaian script di atas, maka tautan yang akan dihasilkan ketika blog dibuka dengan menggunakan perangkat mobile adalah tautan teks ‘Lihat Versi Desktop’ dan ketika blog dibuka dengan mode tampilan desktop maka tautan teks yang dimunculkan adalah ‘Lihat Versi Seluler’.  

 

Semoga berguna, bermanfaat, dan apabila mengalami kendala dalam mengimplementasikan teknik di atas, maka Anda dapat mengajukan pertanyaan terkait dengan kendala atau kesulitan yang Anda alami dengan cara mengeposkan komentar pada artikel ini.

Salam.

Katagori: , ,
Silakan klik di sini untuk mengeposkan komentar Anda. Jika Anda ingin membaca artikel lain yang terdapat pada blog ini, maka dapat Anda lakukan dengan cara membuka laman daftar isi. Catatan: Komentar balasan hanya diprioritaskan untuk pertanyaan dan atau pernyataan yang diposkan dengan memakai formulir komentar Blogger.
Admin
Terdapat 16 komentar pada artikel ini ▶
06/08/13 15.47 O

Jika Letaknya ingin sama dengan punya sobat harus di letakan dimana scriptnya?

dan apakah pada versi selularjuga bakal muncul seperti punya sobat?

07/08/13 04.14 O

@Denz AhmadAgar letaknya menjadi seperti yang terdapat pada blog ini, maka script tersebut dapat ditelakkan dalam area header, Sob. Kemudian agar posisinya terletak pada bagian sebelah kanan maka perlu ditambahkan float:right; pada CSS yang dipakai untuk mengatur tata letaknya.

Selanjutnya karena script tersebut adalah serangkai, berarti jika pada tampilan web munculnya adalah dalam area header maka pada tampilan seluler pun juga akan dimunculkan dalam area header yang sama.

Akan tetapi untuk mendapatkan hasil yang benar-benar sesuai dengan yang diharapkan, memang perlu dilakukan eksperimen (percobaan) terlebih dulu untuk menentukan CSS serta tata letak yang benar-benar sesuai.

Jadi terkait dengan implementasi script di atas ada baiknya jika Sobat lakukan uji coba dulu pada sebuah blog percobaan sebelum kemudian menerapkkannya pada blog yang Sobat kelola.

27/08/13 18.56 O

wah apik tenan ki tutorialmu kang semar, bahasane runut persis koyo pak guru, aku salut kang, ora gampang nulis torial koyo kiye, lanjut yo kang, aku arep dadi murid setiamu og, salam

28/08/13 23.35 O

@Dony JrWahhh, matursuwun Kang Dony. Tapi blog-e sampeyan yo apik banget kok. Aku wae dadi minder bareng weruh blog sing sampeyan kelola.

Anonim
22/09/13 22.49 O

Kang Dony jr bener banget Ayah Mela.
Urusan design webblog untuk Mobile version mah Ayah Mela jagonya.

Bagusnya di Header apa di Bottom ya Ayah Mela?.
Saya ngoprek dulu ya Ayah Mela. Maturnuwun nggih.

25/09/13 13.29 O

@marikitaketawaKalau terkait dengan penempatan, saya rasa tinggal disesuaikan saja dengan desain halamannya Sob.

Untuk yang di blog ini sengaja saya posisikan pada bagian header karena saya rasa pada bagian itulah tempat yang sangat cocok dengan desain blog ini.

22/10/13 17.52 O

Bagaimana caranya mengubah pesan label, seperti

"Menampilkan Daftar Posting Sesuai Dengan Label Yang Anda Pilih. Klik Di Sini Untuk Menampilkan Semua Kategori Artikel"

tanpa mengubah pesan halaman tidak ditemukan seperti di sini

22/10/13 21.33 O

@Alfa Renaldo AluskaSobat dapat menemukan uraiannya dalam artikel ini. Semoga dapat membantu. :)

09/02/14 11.29 O

@AYAHE MELA Keren lg nih sobb ^_^

09/02/14 12.16 O

@Andi Lutfi Hidayat Bila tertarik, Sobat boleh mencoba untuk mengimplementasikannya kok. :)

15/08/14 22.20 O

@kurniawanDirwan Coba Sobat hapus rangkaian kode mulai dari <b:else/> ke bawah sampai dengan </script>

25/09/15 07.50 O

mas saya mau nanya lagi nih, saya sudah menempatkan tutorial ini di bagian header dan menambah kan float right agar terletak di kanan, tetapai akan terletak di atas buka? bagaimana caranya supaya menjadi rata atas dan bawah? Terimakasih banyak mas..

25/09/15 08.13 O

@Denz Ahmad Hwaduh, saya kurang paham dengan maksud dari pertanyaan tersebut Sob. Kalau bisa mohon diperjelas lagi maksudnya agar lebih mudah dipahami. Dengan begitu maka saya pun akan lebih mudah dalam memberikan uraian jawabannya. Terimakasih.

25/09/15 09.32 O

hahaha.. saya juga bingung nanya ya, yasudah ganti saja pertanyaan nya jika saya mau tambah link facebook dan twitter bagaimana sob? script apa yang harus saya tambahkan?

26/09/15 00.32 O

@Denz Ahmad Kalau untuk masalah link saya rasa Sobat tinggal membuat kode seperti di bawah ini.

<a href='URL Profil Twitter'>Nama</a>

Atau seperti berikut ini:

<a href='URL Profil Facebook'>Nama</a>

How To ▶
Education ▶
SEO ▶
Other Internet ▶
Programming ▶
Tutorial ▶
DP & Story ▶
Tips & Trick ▶

o

  • .Ragam Tumbuhan
  • .Unik & Langka
  • .Aneka Buah
  • .Produk Sederhana
  • .Karya Seni
  • .Tempat Wisata
  • .Ragam Kegiatan
  • .Aneka Bunga
  • .Hewan & Serangga
GALERI
KIRIM MASUKAN
E L T E L U
Semar Bingung's Weblog