Tampilkan postingan dengan label Widget. Tampilkan semua postingan
Tampilkan postingan dengan label Widget. Tampilkan semua postingan

2012/10/02

Translation customization on MiMspot

// 2 komentar

If you want to change a few words or phrases that do not support your language, you can customize as follows. Please make sure on “Edit HTML”, click the “Proceed” and do not forget to check “Expand Widget Templates”.

Readmore

Readmore
<span class='rmlink clearfix'><a expr:href='data:post.url'>Baca selengkapnya→</a></span>

Related Posts

Related Posts
<aside class='related-posts'><b:if cond='data:post.labels'><h3>Posting Terkait: <b:loop values='data:post.labels' var='label'>

Footnote on The Post

Footnote
<div class='post-footer-line post-footer-line-3'><p class='foot-info small'>Anda baru saja membaca posting dengan judul &#8220;<data:post.title/>&#8221; dan Anda pun dapat membuat penanda ke <a expr:href='data:post.url' expr:title='data:post.title' itemprop='url' rel='bookmark'>permalink</a>.</p></div>

Preface to Editor Comments

Preface to Editor Comments
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p class='added-notice small'>Harap berkomentar sesuai dengan isi posting <span class='amp'>&amp;</span> komentar <em>spam</em> akan dihapus. Anda dapat menggunakan tag <abbr title='HyperText Markup Language'>HTML</abbr>: <code>&lt;a href=""&gt;&lt;/a&gt;</code>, <code>&lt;strong&gt;&lt;/strong&gt;</code>, <code>&lt;b&gt;&lt;/b&gt;</code>, <code>&lt;em&gt;&lt;/em&gt;</code>, <code>&lt;i&gt;&lt;/i&gt;</code>.</p>
<div id='threaded-comment-form'>
<p class='added-notice small'>Harap berkomentar sesuai dengan isi posting <span class='amp'>&amp;</span> komentar <em>spam</em> akan dihapus. Anda dapat menggunakan tag <abbr title='HyperText Markup Language'>HTML</abbr>: <code>&lt;a href=""&gt;&lt;/a&gt;</code>, <code>&lt;strong&gt;&lt;/strong&gt;</code>, <code>&lt;b&gt;&lt;/b&gt;</code>, <code>&lt;em&gt;&lt;/em&gt;</code>, <code>&lt;i&gt;&lt;/i&gt;</code>.</p>

Titles Comments

Titles Comments
<b:includable id='threaded_comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <h3><data:post.commentLabelFull/>
      <b:if cond='data:post.allowNewComments'>
        <span class='infoCom'> dapat Anda baca di bawah ini atau <a class='to-bottom' href='#threaded-comment-form' title='Lompat ke form komentar'>tambahkan satu</a>.</span>
      <b:else/>
        <span class='infoCom'> <span class='amp'>&amp;</span> <data:post.noNewCommentsText/> — <a class='to-bottom' href='#blog-pager'>Bawah</a></span>
      </b:if>
    </h3>
<b:includable id='comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
      <h3><data:post.commentLabelFull/>
        <b:if cond='data:post.allowNewComments'>
          <span class='infoCom'> <span class='amp'>&amp;</span> mungkin Anda ingin <a class='to-bottom' href='#comment-form' title='Lompat ke form komentar'>tambahkan satu</a>.</span>
        </b:if>
      </h3>

Breadcrums

<b:includable id='breadcrumb' var='posts'>
  <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType == "static_page"'>
 <!-- breadcrumb for the static page -->
  <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a></span> / <span><data:blog.pageName/></span></div>
    <b:else/>
    <b:if cond='data:blog.pageType == "item"'>
    <!-- breadcrumb for the post page -->
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.labels'>
  <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
    <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Beranda</a></span>
      <b:loop values='data:post.labels' var='label'>
        <b:if cond='data:label.isLast == "true"'>
    / <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
        </b:if>
      </b:loop>
    / <span><data:post.title/></span>
  </div>
        <b:else/>
  <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a></span> / <span>Tanpa label</span> / <span><data:post.title/></span></div>
        </b:if>
      </b:loop>
    <b:else/>
    <b:if cond='data:blog.pageType == "archive"'>
    <!-- breadcrumb for the label archive page -->
  <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl'>Beranda</a></span> / <span>Arsip <data:blog.pageName/></span></div>
    <b:else/>
    <b:if cond='data:blog.pageType == "index"'>
  <div class='breadcrumbs'>
    <b:if cond='data:blog.pageName == ""'>
      <span><a expr:href='data:blog.homepageUrl'>Beranda</a></span> / <span>Posting terakhir <data:blog.pageName/></span>
    <b:else/>
      <span><a expr:href='data:blog.homepageUrl'>Beranda</a></span> / <span><data:blog.pageName/></span>
    </b:if>
  </div>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
  </b:if>
</b:includable>

Social Nerworking

Social Nerworking Links
<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>

Content Info on Footer

Content Info on Footer
<p>&copy; <!--past year &ndash; --><script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl' title='Menuju Beranda'> <data:blog.title/></a> didukung oleh <a href='http://www.blogger.com'>Blogger.com</a> — <a class='to-top' href='#content' title='Return to top'>Top</a>↑</p><small>Lihat versi <a href='/?m=1'>mobile</a>.</small>

Note: You can change the code that is colored red.

Readmore

2012/10/01

Struktur Lain

// Tidak ada komentar

Widget berlangganan pada sidebar kanan merupakan form berlangganan ke Optimasi Blog, bukan berlangganan MiMspot. Oleh karena blog ini hanya merupakan demonstrasi yang diperuntukkan bagi pindaian pengguna. Jika Anda ingin membuat widget seperti itu, syaratnya blog Anda telah terdaftar di Feedburner. Bukankah Feedburner merupakan satu rangkaian dengan layanan Google? Jadi dengan menggunakan akun Google yang telah ada, kita juga dapat menikmati Feedburner.

<form id="feedbyemail" action="http://feedburner.google.com/fb/a/mailverify?uri=Optimasi-Blog" method="post">
  <label class="assistive-text" for="email">Enter your email address:</label>
  <input type="text" id="email" name="email" placeholder="@email&hellip;"/>
  <input type="hidden" value="Optimasi-Blog" name="uri"/>
  <input type="hidden" name="loc" value="en_US"/>
  <input class="submit" type="submit" value="Subscribe"/>
</form>
<p><a href="http://feeds.feedburner.com/Optimasi-Blog"><img src="http://feeds.feedburner.com/~fc/Optimasi-Blog?bg=f5f5f5&fg=111111&anim=0" height="26" width="88" style="border:0" alt="Feed count"/></a></p>

Contoh GambarLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium blandit feugiat. Aenean eu commodo metus. Aliquam pellentesque, nisl non euismod lobortis, ipsum quam sollicitudin risus, non varius ligula tortor nec ligula. Cras scelerisque mi vitae mauris sollicitudin eu posuere velit pellentesque. Pellentesque vulputate imperdiet mi id luctus. Curabitur quis mi nec metus pulvinar dignissim id a metus. In hac habitasse platea dictumst. Donec in tortor vel lorem placerat tristique. Sed ornare nunc sed enim pretium in faucibus tortor varius. Morbi sem leo, tincidunt vel iaculis quis, consectetur varius metus. Maecenas ac venenatis nibh. Nullam eget libero in libero rutrum imperdiet. Proin vel nulla non elit facilisis venenatis. Aenean sed tellus quam, vehicula dignissim augue. Donec elementum augue at odio ornare bibendum. Praesent dapibus nulla ac ipsum vestibulum vitae fringilla quam eleifend.

Contoh GambarPraesent pretium tortor et urna placerat iaculis. Vivamus tellus elit, scelerisque quis viverra vel, eleifend eget velit. Fusce sodales, libero quis tincidunt molestie, nunc sapien pellentesque enim, non rutrum odio lectus id urna. Donec et odio massa. Pellentesque posuere ligula in est luctus vitae fringilla arcu sollicitudin. Fusce quis enim enim. Nam sit amet nunc quam, in tempus massa. Quisque sem tellus, tincidunt at consectetur et, lobortis quis velit. Maecenas malesuada ante sed lacus convallis eleifend. Cras ullamcorper, velit sed dapibus accumsan, risus tellus feugiat ante, non commodo justo neque vitae mauris. Vestibulum a magna ut lacus aliquam vestibulum aliquet vitae justo.

Apabila Anda tidak suka taut “balas” pada komentar diletakkan di bawah foto avatar, maka cukup dengan menghapus kode CSS (Cascading Style Sheets) berikut (warna merah).

/* =comment-actions
----------------------------------------------- */
.comments .comment .comment-actions a {
    position: absolute;
    left: -58px;
    top: 54px;
    margin-left: 0;
    padding: 0;
}
.comments .comment .comment-actions a {
width: 48px;
    text-align: center;
}
.comments .comment .comment-actions span {
    position: absolute;
    right: 0;
    top: -44px;
}
…dst…
Komentar BalasKomentar Balas
Readmore

2012/09/30

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