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']; 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.

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9l70Vws-t86z775PThtvFQbc2jALmaJUn5scaHA5dVwogW1sbcfux1T1Qv_0qIpjWN38QqFBzFP-1J305coeRKxAkn2GRvh_1dvwRnIy-nVVl31GixsMmHCjXiCfXfbmQOXMkRHbWuVk/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfaNB5nzCEOGYUk5QCpbU1j6N8ysb5kWkHMSrDONMEdaP9j9I3Dqhycap-vYJprLOO-t2TnLlXmPeyMvNpMvMQEEbaUoS_xq3_9zL7R7ZHRkf3vzrF5Z8O3wSG2J4PdUfW5hB5paSGF0o/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.