2012/09/30

Petunjuk Instalasi MiMspot

// 2 komentar

Kemungkinan akan terdapat perbedaan tampilan blog Anda dengan demonstrasi MiMspot, ketika telah melakukan instalasi theme MiMspot. Hal tersebut biasa terjadi, oleh karena residu pengkodean template sebelumnya masih menempel pada MiMspot yang Anda install. Berikut petunjuk instalasi agar dapat meminimalisasi atau bahkan menghilangkan residu tersebut.

  • Backup terlebih dulu template Anda, sebelum melakukan langkah-langkah di bawah ini.
  • Silakan menuju Dashboard Blogger.com Anda.
  • Pilih template default & eksekusi dengan mengklik “Apply to Blog”.Mengganti Template
  • Kemudian beralih pada “Layout” (Tata Letak), maka akan ditampilkan halaman bagan blog Anda.
  • Lihat pada bagan “Blog Posting” & di bagian bawah sebelah kanannya klik “Edit”.Bagan Blog Posting
  • Selanjutnya tinggal melakukan konfigurasi seperti yang dicontohkan pada gambar berikut.Konfigurasi Blog Posting
  • Simpan.
  • Kembali ke tab “Template”, “Edit HTML”, klik tombol “Proceed” dan jangan lupa untuk mencentang Expand Widget Templates.
  • Salin MiMspot theme, kemudian tempel pada form “Edit HTML”.
  • Preview atau jika telah yakin klik tombol “Save template”.

Selamat menikmati & memanfaatkan MiMspot template gratis berplatform Blogger™.

Readmore

Optimalisasi dan Kustomisasi Manual MiMspot

// Tidak ada komentar

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:

MiMspot icon sprite

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.

Readmore

2012/09/29

Rilis template MiMspot untuk Blogger.com

// 2 komentar

Sebelumnya, silakan menuju posting Rilis Template Gratis MiMspot untuk review singkat dan akses untuk mengunduh.

Template ini diperuntukkan untuk para blogger yang menggunakan platform Blogger™ & dapat diperoleh secara gratis. Tidak ada kelengkapan untuk mengkustomisasi, kecuali Anda melakukannya melalui “Edit HTML”. Kemudian akses ke CSS (Cascading Style Sheets), yakni di antara kode <b:skin><![CDATA[]]></b:skin> atau <style></style>. Tampil dengan warna putih yang dipadu dengan box-shadow CSS3. Adapun detail tata letak atau struktur konten blog secara default adalah sebagai berikut.

  • Konten Header
    • Title & Deskripsi singkat
    • Kotak Penelusuran
    • Navigasi Menu
  • Konten Main Wrapper
    • Konten main
    • Konten sidebar kanan
  • Konten Footer
    • Sidebar Footer
    • Informasi konten

Menu navigasi tidak menggunakan pagelist & dikustomasi manual — kecuali untuk menu Beranda (Home) — serta mendukung drop down. Bahkan dalam menu tersebut juga diletakkan skip link yang dapat dimanfaatkan oleh pengguna screen reader. Pada sidebar disematkan taut ke beberapa jejaring sosial — Google+, Facebook, dan Twitter — dalam bentuk teks. Kemudian sidebar footer dibagi menjadi 3 (tiga) bagian pada baris yang sejajar. Terakhir informasi konten, dimana tautan teks secara otomatis menyesuaikan tahun sekarang, alamat blog, & alamat mobile blog Anda. Harap jangan menghapus atau mengganti tautan kredit yang beralamat ke http://optimasi-blog.blogspot.com.

Tata letak MiMspot

Posisi konten main yang tidak sama dengan konten lain dalam Layout (tata letak) dilakukan agar ketika pengguna menambah background pada masing-masing elemen (main dan/atau sidebar) akan kelihatan menyeluruh. Bisakah tampil rata? Bisa, dengan mengecilkan ukuran lebar main-content dan sidebar-content sebesar 15 pixel (px). Kemudian (1) menambah atribut margin-left: 15px; pada main-content dan margin-right: 15px; pada sidebar-content atau (2) menambah atribut margin: 0 15px; pada main-wrapper.

Berikut beberapa fitur yang didukung oleh template MiMspot — template gratis — Blogger™.

  • Kotak pencarian.
  • Drop down menu navigasi.
  • Otomatis readmore sudah terkompres melalui layanan “Online YUI Compressor”.
  • Breadcrumbs.
  • Posting terkait sederhana berdasarkan label (kompresi melalui layanan “Online YUI Compressor”).
  • Kustomisasi blog-pager, baik pada halaman blog maupun posting blog.
  • Kustomisasi komentar bersarang Blogger™
  • Taut teks ke beberapa jejaring sosial.
  • Taut teks to-top menggunakan jquery.
  • Dan sebagainya sesuai dengan pindaian pengguna.

Disarankan agar posting blog tampil optimal, sebaiknya menggunakan tag-tag HTML (HyperText Markup Language) yang sesuai. Oleh karena tidaklah keliru apabila kita meluangkan waktu untuk belajar tentang struktur pengkodean agar tulisan lebih bermakna & sedikit-banyak mendukung keterbacaan.

Readmore