Optimalisasi dan Kustomisasi Manual MiMspot

MiMspot akan menampilkan performa optimal jika & hanya jika pengguna melakukan beberapa kustomisasi manual, baik terhadap theme, fitur maupun widget.

Theme

Pokok utama dari theme adalah ketika Anda melakukan instalasi MiMspot sangat dimungkinkan tampilan demonstrasi dengan tampilan situs web atau blog Anda akan berbeda. Hal ini disebabkan beberapa residu pengkodean dari template sebelumnya masih menempel ‘layaknya perangko’. :) Dan untuk kustomisasinya akan dibahas pada petunjuk instalasi agar dapat meminimalisasi atau bahkan menghilangkan residu tersebut. Kemudian tidak kalah penting, pengguna seharusnya mengunduh gambar yang menjadi salah satu perangkat template ini & mengunggahnya ke situs web yang melayani penyimpanan gambar, seperti picasa, photobucket, dan sebagainya. Berikut merupakan gambar — ukuran asli — yang dimaksud oleh penulis:

Kemudian ganti URL background pada Selektor input#q, #menu-navigation a.homeIcon, dan .subscribe-rss, .feed-links. Atau Anda dapat membiarkan apa adanya dengan resiko ketika gambar tersebut dipindahkan, maka ia tidak akan tampil dalam situs web atau blog Anda.

Fitur

Dari beberapa fitur yang telah disebutkan pada posting Rilis template MiMspot untuk Blogger.com, beberapa diantaranya diatur secara manual, seperti menu navigasi, jejaring sosial, & navigasi posting.

Menu Navigasi

Markah untuk menu navigasi berada antara <nav id='menu-navigation'> … </nav>.

<b:if cond='data:blog.url != "#"'>
 <li><a href='#'>Item1</a></li>
<b:else/>
 <li class='selected'><a href='#'>Item1</a></li>
</b:if>

Keterangan:
Makna dari pengkodean di atas adalah apabila halaman tidak menampilkan URL ini (ex: http://namablog.blogspot.com/p/about), maka berlaku kondisi berikut (normal). Jika halaman menampilkan URL ini, maka berlaku kondisi selected. Kode yang berwarna merah menunjukkan taut (link) yang akan menjadi tujuan, apabila di klik & harus sama antara satu dengan yang lain tiap tag kondisional (<b:if cond=…> sampai dengan </b:if>). Namun jika memanfaatkan drop down yang diganti hanya # pada menu “anakan’. Kemudian ganti pula kode yang berwarna hijau dengan nama yang sesuai (ex: About), dimana kondisinya sama dengan kode yang berwarna merah.

Taut Teks Jejaring Sosial

Anda cukup mengganti URL yang diberi warna merah pada kode di bawah ini dengan URL identitas pada masing-masing jejaring sosial.

<div class='social-networking'><span><a href='#' title='Ke lingkaran Google+'>Google+</a></span> <span><a href='#' title='Berteman di Facebook'>Facebook</a></span> <span><a href='#' title='Ikuti di Twitter'>Twitter</a></span></div>

Navigasi Posting (`blog-pager`)

Sesuaikan navigasi posting dengan setelan maksimal jumlah posting yang di tampilkan tiap halaman, yakni dengan mengganti variabel pada kode berikut.

var postperpage=4;
var numshowpage=4;

Kemudian navigasi per-posting yang dikustomisasi akan menampilkan judul posting, dapat dikembalikan ke default dengan menghapus 2 (dua) kode berikut.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
$(document).ready(function(){ 
var newerLink = $("a.blog-pager-newer-link").attr("href"); 
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() { 
var newerLinkTitle = $("a.blog-pager-newer-link").text(); 
$("a.blog-pager-newer-link").text(newerLinkTitle); 
}); 
var olderLink = $("a.blog-pager-older-link").attr("href"); 
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() { 
var olderLinkTitle = $("a.blog-pager-older-link").text(); 
$("a.blog-pager-older-link").text(olderLinkTitle);//rgt 
}); 
}); 
</script>
</b:if>

Widget

Untuk widget, Anda dapat menambah atau mangurangi widget melalui tab pengaturan “Tata Letak”. Apabila ingin dilakukan secara manual MiMspot telah menyediakan bantuan yang dicontohkan pada sidebar kanan melalui kode berikut.

<!-- Your manual widget here!
  simply by adding a markup:
    <div class='widget selector-class' id='selector-id'>
      ...Your code...
    </div>
End -->

Keterangan:
Hapus kode yang berwarna merah, kemudian tentukan selektor untuk masing-masing class dan id yang diberi warna hijau.

Apabila Anda memasukkan widget pada “Tata Letak”, sebaiknya dioptimalkan kembali melalui “Edit HTML” — centang Expand Widget Templates — kemudian ganti tag h2 menjadi h3 & hapus kode <b:include name='quickedit'/> (jika dibiarkan pun tidak akan berpengaruh pada pengkodean) pada widget yang bersangkutan.

MiMspot