Cara Membuat Website Mobile Seperti Detik Mobile

Cara Membuat Website Mobile Seperti Detik Mobile

, Edit
Bismillah..
Baru  kali ini saya berkesempatan menyelesaikan misi membuat dan merekonstruksi template jadi dan berfungsi 100 persen. Biasanya, baru ngedit kode dikit, sudah diganggu bocah ngajak main kuda-kudaan. Maklum, sayang anak.

 

Nah, kali ini saya akan berbagi dengan kawan pembaca sekalian, sekaligus menuntaskan keingintahuan kalian tentang bagaimana membuat web mobile seperti detik mobile itu.

Pertama yang harus kawan catat, bahwa saya merekonstruksi website detik, lalu mengujinya page per page sehingga bisa berjalan sebagaimana mestinya.

Dalam misi ini, saya menyiapkan alat dan bahan sebagai berikut.

  1. Smartphone samsung galaxy ACE S5830

  2. Kartu GSM beserta paket internet 3

  3. aplikasi andorid Offline Browser


Langkah Kerja
1. Downloadlah aplikasi android "Offline Browser" di googleplay, Install dan Jalankan
2. Mulai menjalankan aplikasi "Offline Browser" untuk mendownload halaman detik mobile. Klik tombol "OK & Dwnld", jika sudah 100%, klik logo sebelah kanan, (parsing html).
3. Jika sudah selesai semua, maka file download dari m.detik.com itu ada di kartu SDCard anda, buka aplikasi "My Files", lalu point ke "offline Browser" > pilih Cache. Nanti akan ada folder dengan angka.

4. Pindahkan folder cache tadi ke komputer, maka bersiapkan langkah pembedahan.

Folder cache tadi merupakan kumpulan file yang didownload dari m.detik.com. isinya page html, image,javascript dan juga css. Nah, yang penting cssnya itu yang akan kita ambil.

setidaknya seperti yang terlihat di image dibawah ini, style beragam detik dapat. misalnya detik ramadan, detik bandung, detik foto dll.
dalam contoh ini, saya cuman ambil dua file saja. dua css yang saya ambil, saya salinkan ke file baru bernama  style.css. file inilah yang nanti dipanggil untuk menangani css.

5. Untuk melakukan rekosntruksi, kawan harus paham hirarki wordpress. dan bagi kawan yang belum mengerti cara merekonstruksi dari HTML ke wordpress silakan belajar digugel, jgn malas mau lgs jadi àja. Nah, dalam contoh ini saya hanya membuat theme dengan komposisi

  1. header.php

  2. footer.php

  3. single.php

  4. index.php

  5. archieve.php

  6. style.css


untuk langkah 5 diatas, kawan harus paham betul kode apa saja yang harus dimasukkan. sebagai contohnya, untuk header.php saya buat kodennya seperti ini.

 
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns:fb="http://ogp.me/ns/fb#">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script>

  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-40560344-1', 'posmetrobatam.com');

  ga('send', 'pageview');

</script>
<meta name="msvalidate.01" content="B99E0434EBCB661316CEE68F4487EFD9" />
<meta name="viewport" content="width=100%; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<meta name="viewport" content="width=device-width">

<meta name="msvalidate.01" content="B99E0434EBCB661316CEE68F4487EFD9" />
<meta name="author" content="Izulthea">
<meta property="fb:page_id" content="1113566495" />
<meta property="og:title" content="<?php the_title(); ?>" />
 <meta property="og:type" content="article" />
 <meta property="og:image" content="<?php $src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), array(300, 300), false, ''); echo $src[0]; ?>" />
 <meta property="og:url" content="<?php the_permalink(); ?>" />
 <meta property="og:description" content="<?php echo get_bloginfo('description'); ?>" />
 <meta property="og:site_name" content="<?php echo get_bloginfo('name'); ?>" />
 <meta property="fb:admins" content="1113566495" />

<link rel="author" href="https://plus.google.com/u/0/102492550415497092808"/>
<meta content='Batam, Indonesia' name='geo.placename'/>
<meta content='ID-Riau' name='geo.region'/>
<meta content='1.12583,104.0511' name='geo.position'/>
<meta name="author" content="Izulthea">

<meta http-equiv="content-language" content="id" />
<meta name="revisit-after" content="1 day">
<meta name="robots" content="index, follow">
<meta name="description" content="Koran Posmetro versi Online">

<title><?php wp_title(' - ', true, 'right'); ?> |M| </title>

<script type="text/javascript">
    urchinTracker();
</script>
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico"  type="image/x-icon" />
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" rel="stylesheet" type="text/css">
<!-- <link href="wp-content/themes/menit/css/f1505047997mdetik2011.css" rel="stylesheet" type="text/css">
<link href="wp-content/themes/menit/css/f736929366detik_frame.css" rel="stylesheet" type="text/css"> -->

<link href="wp-content/themes/menit/css/f-1388469063mdetik2011.css" rel="stylesheet" type="text/css" />
<link href="wp-content/themes/menit/css/f1232213722detik_frame.css" rel="stylesheet" type="text/css" />
<style type="text/css">@media print { #feedlyMiniIcon { display: none; } }</style></head>

<body id="top">
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="top_banner cad_lb">
  <!-- leaderboard openx bb --></div>
<!--S:HEADER-->
<div align="center"><a href="http://posmetrobatam.com/tentang/harry-azhar-azis" target="_blank"><img style="background-color:yellow;" src="/wp-content/uploads/harryazhar340.png"></a></div>
<div class="header">
  <a href="http://posmetrobatam.com/"><img src="http://posmetrobatam.com/wp-content/themes/menit/logob.png" alt="posmetrobatam.com" class="logo"></a>
    <div class="user_login">
            <strong class="block"><span class="waktu"><?php echo date_i18n('l d F Y'); ?><br>
 <?php echo do_shortcode('[en_hijri_date]'); ?></span></li></strong>
 <a href="/wp-content/uploads/PosmetroBatam.apk">>>Android Apps<< </a></div>
    <div class="clearfix"></div>
</div>
<!--E:HEADER-->

<!--S:MENU-->
<!--<div id="navmenu">
<ul><li><a href="<?php echo get_settings('home'); ?>"><img src="http://posmetrobatam.com/wp-content/themes/menit/images/home.png"></a> · </li>
<?php wp_list_categories('exclude=1, 129, 210, 371, 3, 5, 204, 6, 4, 3727, 1075, 3725, 3729, 1795, 89, 14, 2129, 2181, 2104, 2564'); ?>
</ul> -->
<div class="menu">
<ul><li>
 <a href="<?php echo get_settings('home'); ?>"><img src="http://posmetrobatam.com/wp-content/themes/menit/images/home.png"></a> · 
<a href="http://posmetrobatam.com/cover-story/">Cover Story </a> ·<a href="http://posmetrobatam.com/kriminal/">Kriminal</a> ·<a href="http://posmetrobatam.com/politik/">Politik</a> ·<a href="http://posmetrobatam.com/hukum/">Hukum</a> ·<a href="http://posmetrobatam.com/bisnis/">Bisnis</a> ·<a href="http://posmetrobatam.com/kepulauan-riau/">Kepri</a> ·<a href="http://posmetrobatam.com/daerah/">Daerah</a> ·<a href="http://posmetrobatam.com/nasional/">Nasional</a> ·<a href="http://posmetrobatam.com/dunia/">Internasional</a> ·<a href="http://posmetrobatam.com/kesehatan/">Kesehatan</a> ·<a href="http://posmetrobatam.com/techno/">Iptek</a> ·<a href="http://posmetrobatam.com/sport/">Sport</a><a href="http://posmetrobatam.com/inpirasi/">Inspirasi</a> ·<a href="http://posmetrobatam.com/index-berita/">Indeks</a>

 </li>

</ul>

</ul>

</div>
<!--E:MENU-->
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0382867257577437";
/* buat hape */
google_ad_slot = "4167881443";
google_ad_width = 320;
google_ad_height = 50;
//-->
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<!--S:SEARCH -->
<script>
  (function() {
    var cx = 'partner-pub-0382867257577437:9418679449';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>
<!--E:SEARCH -->

<!--S:SEARCH
    <form action="http://posmetrobatam.com" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="partner-pub-0382867257577437:9418679449" />
    <input type="hidden" name="cof" value="FORID:10" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="40" />
    <input type="submit" name="sa" value="Search" />
  </div>
</form>

<script type="text/javascript" src="http://www.google.co.id/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>

<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 600;
  var googleSearchDomain = "www.google.co.id";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

        <div class="clearfix"></div>

  -->
<!--E:SEARCH-->

 

semua file harus kawan jadikan dalam satu folder, yang nantinya akan jadi theme.

6. selanjutnya, wordpress saya  pasang plugin Any Mobile Theme Switcher, plugin ini berfungsi untuk mengubah theme untuk pengunjung yang menggunakan smartphone.

7. Hasilnya seperti ini. Atau Cek Lewat Android KAwan disini

Share on Google Plus

About JackSparrow

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment

0 komentar:

Post a Comment

Subscribe to: Post Comments ( Atom )