Cara Membuat Template Blog Menjadi Responsive

Tor Template - Responsive, sebuah fitur yang wajib dimiliki oleh sebuah website/blog. Dengan kemajuan zaman dan teknologi yang semakin canggih, membuat pengakses internet bukan hanya berasal dari perangkat desktop saja, tetapi juga dari perangkat mobile.

Membuat template blog menjadi full responsive merupakan hal yang sangat penting. Dengan fitur responsive, template blog dapat menyesuaikan ukuran resolusi layar dari setiap pengunjung blog. Apalagi sekarang hampir semua pengguna internet menggunakan gadget dengan ukuran layar yang berbeda-beda.

Baca juga : Cara Membuat Tombol Back To Top pada Blog

Pada dasarnya membuat desain blog jadi responsive bukanlah hal yang sulit, sobat hanya perlu menambahkan media queris dan mengubah satuan pixel menjadi satuan persen. Berikut cara untuk membuat desain template blog menjadi responsive :

1. Login dulu ke akun blogger sobat.
2. Aktifkan dulu fitur responsivenya. Masuk ke Template => Klik icon “Gear” di bawah preview template seluler => pada bagian pilih template seluler, Default ganti dengan Khusus => Simpan
   
3. Selanjutnya pasang kode meta tag berikut diatas kode </head>:

   <meta content='width=device-width, initial-scale=1.0' name='viewport'/>

4. Lanjut, ditahap ini kita membuat media querisnya dan mengubahnya satuan pixel menjadi satuan persen. Letakkan kode cssnya diatas */]]></b:skin> atau </style>.
   Hal pertama yang perlu dilakukan adalah menentukan resolusi layar. Umumnya resolusi yang digunakan dengan ukuran maksimal 768px dan 480px. Jadi disini saya memberikan contoh dengan dua ukuran tersebut. Selanjutnya, masukkan kode css dan dengan satuan persen. KIra-kira contoh dari kodenya seperti berikut :

   /* RESPONSIVE
   ==================================================== */
   @media screen and (max-width:768px){
   #wrapper {width:100%;float:none;padding:0;}
   #main-wrapper, #sidebar-wrapper{width:93%;max-width:100%;float:none;margin:0 0 0 10px;padding:0}
   #footer-wrapper{width:95%;text-align:center;margin:0}
   .footer-left,.footer-right{float:none}
   .masmenu li{float:none;}
   .masmenu li a{background:none}.masmenu ul{text-align:center;width:100%}.menusearch{float:none;padding:5px 0 10px}
   }
   
   @media screen and (max-width:480px){
   .kategori{display:none}
   .comment_date a{display:none}
   .comment_form p{display:none}
   }

   Ukuran dari media queris diatas hanya sebuah contoh, sobat bisa menambahkan atau menguranginya, ukuran dari media querisnya bisa sobat ganti sesuai selera.
5. Kemudian, untuk menampilkan widget pada tampilan mobile sobat perlu menambahkan kode mobile='yes' diantara id dan title widget. Seperti ini :

   <b:widget id='PopularPosts1' locked='false' mobile='yes' title='Popular Post' type='PopularPosts'>

6. Yang terakhir Simpan Template.

Silahkan cek apakah tampilannya sudah sesuai selera sobat atau belum, untuk mengeceknya bisa melalui responsinator atau dengan mengecilkan ukuran browser yang sobat gunakan dan menambahkan ?m=1 pada akhir url blog sobat. Jika hasilnya tampak seperti ini, tampilan postingan pada perangkat mobile tidak sesuai dengan perangkat desktop :

Sobat tidak perlu khawatir, cara untuk mengatasi hal diatas adalah dengan mengganti kode berikut :

<b:includable id='main' var='top'>...</b:includable>

dengan :

<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

  <b:if cond='data:top.showDummy'>
    <script expr:src='data:top.dummyUrl'/>
  </b:if>

  <b:if cond='data:mobileindex'>
    <!-- mobile index -->
    <div class='blog-posts hfeed'>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
          &lt;/div&gt;
        </b:if>
        &lt;div class=&quot;mobile-date-outer date-outer&quot;&gt;
        <div expr:onclick='data:post.indexOnclick'>
          <b:include data='post' name='mobile-index-post'/>
        </div>
        <b:if cond='data:post.trackLatency'>
          <data:post.latencyJs/>
        </b:if>
      </b:loop>
      <b:if cond='data:numPosts != 0'>
        &lt;/div&gt;
      </b:if>
    </div>
  <b:else/>

    <!-- posts -->
    <div class='blog-posts hfeed'>

      <b:include data='top' name='status-message'/>

      <data:defaultAdStart/>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>

        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
        <div class='post-outer'>
        <b:include data='post' name='post'/>
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        </div>
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <b:if cond='data:mobile == &quot;false&quot;'>
            <div class='inline-ad'>
              <data:adCode/>
            </div>
          </b:if>
          <data:adStart/>
        </b:if>
        <b:if cond='data:post.trackLatency'>
          <data:post.latencyJs/>
        </b:if>
      </b:loop>
      <b:if cond='data:numPosts != 0'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
      <data:adEnd/>
    </div>
  </b:if>

  <!-- navigation -->
  <b:if cond='data:mobile'>
    <b:include name='mobile-nextprev'/>
  <b:else/>
    <b:include name='nextprev'/>

    <!-- feed links -->
    <b:include name='feedLinks'/>
  </b:if>

  <b:if cond='data:top.showStars'>
    <script src='//www.google.com/jsapi' type='text/javascript'/>
    <script type='text/javascript'>
      google.load(&quot;annotations&quot;, &quot;1&quot;, {&quot;locale&quot;: &quot;<data:top.languageCode/>&quot;});
      function initialize() {
        google.annotations.setApplicationId(<data:top.blogspotReviews/>);
        google.annotations.createAll();
        google.annotations.fetch();
      }
      google.setOnLoadCallback(initialize);
    </script>
  </b:if>
</b:includable>

Sekian artikel kali ini, mudah-mudahan bermanfaat dan dapat dimengerti dengan jelas. Jika sobat ada pertanyaan atau masih ada yang kurang jelas, bisa ditanyakan lewat komentar dibawah :).

^^Semoga Berhasil^^