7 Widget Penting Untuk Template Mobile

7 Widget Penting Untuk Template Mobile- Begitu banyak template yang menawarkan design SEO Friendly. Hal ini tentu sangat positif demi menjaga kesinambungan antara template dengan kredibilitas di mesin pencari. Tetapi alangkah baiknya jika template tersebut juga memiliki Custom Mobile Template sendiri. Artinya blog yang kita kelola memiliki 2 ruang yakni di tampilan PC dan ditampilan Mobile/Selular.

#1. Beberapa memang kita kadang memaksa atau engga tau template kita buat tersesuai sedangkan kita belum mempunyai ruang untuk tampilan diversi mobile akhirnya saat kita akses blog tersebut ke versi mobile tampilannya melebar dan cukup memberatkan serta lebih banyak lagi bandwidth yang harus terkuras. Bagi sobat yang jarang ngecek ke tampilan mobile tentu engga menyadari akan hal ini. Padahal jangan salah, sebagian yang berkunjung ke blog kita berasal dari mereka yang mengakses lewat handphone.

#2. Ada juga yang menggunakan template default blogger (blogspot) untuk di mobile tetapi cukup disayangkan template yang tadinya ringan malah menjadi berat baik loading serta cursor di handphone yang menjadi begitu sangat lambat. Kenapa bisa menjadi berat? Salah satunya karena template tersebut kita tambahin bingkai, warna latar dan gambar header. Biasanya blog yang seperti ini langsung saya tinggalin meski postingan/ konten di blognya menghadirkan informasi yang menarik. Buat apa post/konten yang menarik jika blog nya berat dan sangat lambat. Sekali-kali, tengoklah juga apa yang sedang terjadi dengan blog kita diversi mobile jangan terbuai oleh tampilan versi desktop saja. Hal ini murni keluhan saya karena tiap hari saya mengakses internet lewat handphone dengan menggunakan browser operamini juga sesekali menggunakan browser ucweb selain dengan mengakses lewat PC tentunya.

#3. Kita sudah memiliki design mobile template, tetapi kita engga fokus memanfaatkannya. Olehnya itu saya sedikit akan berbagi mengenai hal tersebut, di antaranya:

7 widget penting untuk template mobile 

1) Sobat harus menyertakan Sitemap/Daftar Isi blog. Hal ini cukup penting bagi pengunjung mobilers, karena selain memudahkan mereka untuk memilih judul postingan mana yang mereka akan buka juga blog kita akan di nilai menjadi blog yang rapi karena memperhatikan hal-hal yang sedetail itu.

Dan jangan sampai kelupaan, jika kita menggunakan sitemap roll maka jangan gunakan kode tersebut di mobile template karena daftar isi blog kita cuma muncul sebagian.

Berikut ini kode sitemap yang saya terapin di blog ini.

<script src="http://forwap.yn.lt/js/arsip-blog.js"> </script> <script src="http://www.erjud-chayob.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc"></script>

Paste-kan kode di atas di entri baru (postingan baru). Paste-nya di html postingan, jangan di compuse. Ganti http://www.erjud-chayob.com/ dengan nama blog sobat.

2) Random Post atau postingan acak. Hal ini tentu bermafaat terlebih lagi jika jumlah konten kita yang sudah banyak maka random post ini perlu kita munculin di homepage kita. Random post ini akan memunculkan postingan-postingan terbaru hingga terdahulu. Jumlah postingan yang ingin sobat tampilkan pun tergantung dari kebutuhan sobat. Berikut ini kode random post yang saya terapin:

Silakan sobat paste kode di bawah ini di Add Gadget lalu pilih HTML/JavaScript.

<script type="text/javascript"> var randarray = new Array();var l=0;var flag; var numofpost=8;function randomposts(json){ var total = parseInt(json.feed.openSearch$totalResults.$t,10); for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}} if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>'); for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1]; for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li> "; document.write(item);}} }document.write('</ul> ');} </script> <script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

3) Page/Halaman blog. Mencari kode ini sangat sulit, beberapa nemu tetapi kode nya engga mendukung di versi mobile. Akhirnya ketemu juga dari salah satu sahabat blogger. Berikut kodenya yang saya terapin:

Copy kode di bawah ini dan buka Template HTML blog. Paste-kan kode tersebut tepat di atas kode ]]></b:skin>

.showpageArea a{text-decoration:none} .showpageNum a{ display:inline-block; padding:0px 15px; margin-right:4px; border-radius:2px; border:solid 1px #c0c0c0; background:#e9e9e9; box-shadow:inset 0px 1px 0px rgba(255,255,255,.8),0px 1px 3px rgba(0,0,0,.1); font-size:.875em; font-weight:bold; text-decoration:none; color:#000000; text-shadow:0px 1px 0px rgba(255,255,255,1)} .showpageNum a:hover{padding:0px 15px; margin-right:4px; border-radius:2px; border:solid 1px #9168C9; background:#9168C9; box-shadow:inset 0px 1px 0px rgba(255,255,255,.8),0px 1px 3px rgba(0,0,0,.1); font-size:.875em; font-weight:bold; text-decoration:none; color:#FFFFFF; text-shadow:0px 1px 0px rgba(255,255,255,1)} .showpagePoint{ display:inline-block; padding:0px 9px; margin-right:4px; border-radius:2px; border:solid 1px #c0c0c0; background:#e9e9e9; box-shadow:inset 0px 1px 0px rgba(255,255,255,.8),0px 1px 3px rgba(0,0,0,.1); font-size:.875em; font-weight:bold; text-decoration:none; color:#000000; text-shadow:0px 1px 0px rgba(255,255,255,1)} .showpageOf{margin:0 3px 0 0; padding:7px 14px; text-decoration:none} .showpage a{ display:inline-block; padding:0px 15px; margin-right:4px; border-radius:2px; border:solid 1px #c0c0c0; background:#e9e9e9; box-shadow:inset 0px 1px 0px rgba(255,255,255,.8),0px 1px 3px rgba(0,0,0,.1); font-size:.875em; font-weight:bold; text-decoration:none; color:#000000; text-shadow:0px 1px 0px rgba(255,255,255,1)} .showpage a:hover{text-decoration:none} .showpageNum a:link, .showpage a:link{color:#000000; text-decoration:none}

Selanjutnya cari </body>, tambahkan kode di bawah ini tepat di atas kode </body>.

<script type='text/javascript'>; var home_page='/'; var urlactivepage=location.href; var postperpage=4; var numshowpage=4; var upPageWord ='Prev'; var downPageWord ='Next'; </script> <script type='text/javascript'> //<![CDATA[ eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 I;6 i;6 f;6 n;1f();C 1g(15){6 5=\'\';J=K(N/2);4(J==N-J){N=J*2+1}A=f-J;4(A<1)A=1;d=K(15/j)+1;4(d-1==15/j)d=d-1;D=A+N-1;4(D>d)D=d;5+="<3 7=\'1A\'>1B "+f+\' 1C \'+d+"</3>";6 16=K(f)-1;4(f>1){4(f==2){4(i=="o"){5+=\'<3 7="1D"><a 9="\'+B+\'">\'+O+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">\'+O+\'</a></3>\'}}b{4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+16+\');w x">\'+O+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+16+\');w x">\'+O+\'</a></3>\'}}}4(A>1){4(i=="o"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}4(A>2){5+=\' ... \'}1h(6 l=A;l<=D;l++){4(f==l){5+=\'<3 7="1E">\'+l+\'</3>\'}b 4(l==1){4(i=="o"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}b{4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+l+\');w x">\'+l+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+l+\');w x">\'+l+\'</a></3>\'}}}4(D<d-1){5+=\' ... \'}4(D<d){4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+d+\');w x">\'+d+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+d+\');w x">\'+d+\'</a></3>\'}}6 17=K(f)+1;4(f<d){4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+17+\');w x">\'+1i+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+17+\');w x">\'+1i+\'</a></3>\'}}5+=\'<1j><a 9="1F://1G.1H-1k.1I" 1J="1K-1L: 1M; 1N: 1O; 1P: 1Q;" 1R="1S">1T 1U 1V-1k</a></1j>\';6 E=y.1W("E");6 18=y.1X("1Y-1Z");1h(6 p=0;p<E.P;p++){E[p].1l=5}4(E&&E.P>0){5=\'\'}4(18){18.1l=5}}C 1a(Q){6 R=Q.R;6 1m=K(R.21$22.$t,10);1g(1m)}C 1f(){6 h=u;4(h.e("/r/s/")!=-1){4(h.e("?S-c")!=-1){n=h.F(h.e("/r/s/")+14,h.e("?S-c"))}b{n=h.F(h.e("/r/s/")+14,h.e("?&c"))}}4(h.e("?q=")==-1&&h.e(".5")==-1){4(h.e("/r/s/")==-1){i="o";4(u.e("#G=")!=-1){f=u.F(u.e("#G=")+8,u.P)}b{f=1}y.1n("<m T=\\""+B+"U/V/W?c-k=1&X=Y-Z-m&11=1a\\"><\\/m>")}b{i="s";4(h.e("&c-k=")==-1){j=20}4(u.e("#G=")!=-1){f=u.F(u.e("#G=")+8,u.P)}b{f=1}y.1n(\'<m T="\'+B+\'U/V/W/-/\'+n+\'?X=Y-Z-m&11=1a&c-k=1" ><\\/m>\')}}}C L(H){12=(H-1)*j;I=H;6 13=y.1o(\'1p\')[0];6 z=y.1q(\'m\');z.1r=\'1s/1t\';z.1u("T",B+"U/V/W?1v-1w="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1x(z)}C M(H){12=(H-1)*j;I=H;6 13=y.1o(\'1p\')[0];6 z=y.1q(\'m\');z.1r=\'1s/1t\';z.1u("T",B+"U/V/W/-/"+n+"?1v-1w="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1x(z)}C 1b(Q){1c=Q.R.24[0];6 1y=1c.1z.$t.F(0,19)+1c.1z.$t.F(23,25);6 1d=26(1y);4(i=="o"){6 1e="/r?S-c="+1d+"&c-k="+j+"#G="+I}b{6 1e="/r/s/"+n+"?S-c="+1d+"&c-k="+j+"#G="+I}27.9=1e}',62,132,'|||span|if|html|var|class||href||else|max|maksimal|indexOf|nomerhal|showpageNum|thisUrl|jenis|postperpage|results|jj|script|lblname1|page|||search|label||urlactivepage|onclick|return|false|document|newInclude|mulai|home_page|function|akhir|pageArea|substring|PageNo|numberpage|nopage|nomerkiri|parseInt|redirectpage|redirectlabel|numshowpage|upPageWord|length|root|feed|updated|src|feeds|posts|summary|alt|json|in||callback|jsonstart|nBody||banyakdata|prevnomer|nextnomer|blogPager||hitungtotaldata|finddatepost|post|timestamp|alamat|halamanblogger|loophalaman|for|downPageWord|div||innerHTML|totaldata|write|getElementsByTagName|head|createElement|type|text|javascript|setAttribute|start|index|appendChild|timestamp1|published|showpageOf|Page|of|showpage|showpagePoint|http||||style|font|size|0pt|float|right|margin|0px||||||getElementsByName|getElementById|blog|pager||openSearch|totalResults||entry|29|encodeURIComponent|location'.split('|'),0,{})) //]]> </script>

Hasilnya adalah seperti di bawah ini:

4) Widget follower blog (Join). Kode ini saya dapat juga dari salah satu sahabat blogger yang bisa dibilang sangat berjasa buat mendesign blog ini jadi beda dari yang lain. Karena mempercantik design template adalah salah satu unsur yang sangat penting hingga sejauh mana bentuk perhatian kita soal tampilan. Cuma disini saya rancang sendiri gambar untuk widgetnya. Berikut kodenya:

<a href="http://www.blogger.com/follow-blog.g?blogID=944413042420217262" target="_blank"><img src="https://lh4.googleusercontent.com/-w9eYnIbsNVo/T5A9BGa7r0I/AAAAAAAAAbI/J0EE4Y502lY/s800/Tombol%2520Follow%2520Blogger.PNG"/></a>

Silakan sobat ganti "5063166391299293" dengan id blog sobat. Untuk gambar widget follower blog ini, sudah saya modif sendiri menjadi seperti di bawah ini:

5) Feed Blog. Untuk melihat feed blog ini sobat misalnya buka di operamini, di paling atas itu ada tulisan Atom. Coba sobat tekan itu dan perhatikan apakah postingan sobat disitu panjang atau ringkas. Jika panjang maka saran saya sih sobat baiknya meringkasnya dengan cara:

Dasbor Blog --> Setelan --> Lainnya --> Umpan Situs --> Izinkan Umpan Blog --> Singkat

Katanya salah satu guna dari meringkas feed blog ini agar konten kita engga di copy mentah-mentah. Dan jika sobat meringkasnya juga engga akan menguras data bandwidth yang sebanyak ketika feednya belum diringkas. But, up to you!

6) Tombol Share Facebook, Google+ dan Twitter. Engga usah dijelasin lagi manfaatnya karena hal ini pasti sangat bermanfaat dan wajib ada di template tiap blog sobat. Tombol share nya enak dipandang mata dan keren tentunya. Tombol share ini juga merupakan bagian dari template premium bawaan mas-sugeng. Saya juga telah menambahkan tombol share Lintas Me, awalnya hanya iseng-iseng tetapi di perhatikan lumayan keren juga jadinya, hehehe tapi tombol ini engga saya bagikan kecuali ada yang request.

Berikut kodenya:

<div id='share-button'> <p> Share to</p> <a expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' style='background:#3b5998;'>Facebook</a> <a expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' style='background:#c0361a;'>Google+</a> <a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title' rel='nofollow' style='background:#4099ff;'>Tweet</a> <div class='clear'/> </div>

Dan berikut hasilnya:

7) Tombol Like facebook untuk tiap konten/postingan. Sekali lagi ini dapat dari sahabat blogger yang bisa dibilang berbakat dalam mengolah kode HTML untuk template blogger. Like facebooknya cukup membuat konten kita lebih memiliki nyawa tersendiri. Engga ada komentar, Like pun jadi hehehe

Berikut kodenya:

<b:if cond='data:blog.pageType == "item"'> <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100&action=like&font=arial&colorscheme=dark"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:24px;'/><br/> </b:if>

Caranya, masuk ke edit HTML Template, kemudian cari kode <b:includable id='mobile-post' var='post'> , gerak-kan kursor ke bawah untuk mencari kode <data:post.body/> yang terletak antara <b:includable id='mobile-post' var='post'> dan </b:includable>. Pastekan kode tersebut di atas atau di bawah kode <data:post.body/> (jika menempatkannya di atas kode <data:post.body/> maka tombol like akan berada di atas konten artikel, begitu juga sebaliknya.)

Itulah beberapa hal penting yang selama ini menjadi perhatian saya khususnya untuk versi mobile template. Semoga bermanfaat dan segala kekurangannya yang terjadi ketika sobat terapin maka sepenuhnya hal tersebut ditanggung sendiri.

Thanks to:

mas-sugeng.com

blogmobie.blogspot.com
opinisaya.net

References by template code:

eltelu.blogspot.com

panduantemplateblog.blogspot.com

Share to

Facebook Google+ Tweet Digg Reddit

Related Posts :