MiMspot

Memperbaiki Kekeliruan Format Posting

noreply@blogger.com (Anonymous) — Thu, 11 Oct 2012 18:12:00 +0000

Kemungkinan ketika Anda telah melakukan instalasi, ternyata terdapat beberapa pengkodean yang kurang mendukung dengan apa yang Anda inginkan, seperti penempatan gambar, penggunaan post-header, dan sebagainya. Posting ini akan mencoba untuk mengupas tentang bagaimana beberapa pengkodean yang kurang sesuai dapat sesuai dengan standar posting di Blogger.com.

Dalam menempatan gambar (image), biasanya pada Blogger.com akan diapit dengan kode <div>. Contoh:

<div class="separator" style="clear: both; text-align: center;">
<a href="#" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="#" width="200"/></a></div>

Sedangkan pada template MiMspot memasukkan markah gambar secara manual.

<a href="#"><img class="aligncenter" src="#" height="200" width="200" alt="MiMspot Posting" style="margin-bottom:1.5714em;margin-top:1.5714em;"/></a>

Jika Anda selalu menggunakan penambahan gambar sesuai dengan bantuan dari Blogger.com pada editor posting, sebaiknya lakukan penghapusan pada selector img dalam kode CSS (Cascading Style Sheets).

img {
background: none;
border: 0;
display: block;
}

Menampilkan post-header di bawah judul posting, seperti published date, author, & komentar.

   <div class='post-header-line-1'>
      <p><span class='post-timestamp updated'>
        <b:if cond='data:top.showTimestamp'>
        <b:if cond='data:post.url'>
          <abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr>
        </b:if>
        </b:if>
      </span> <span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>
        </b:if>
      </span> <span class='post-comment-link'>
        <b:if cond='data:blog.pageType != "item"'>
        <b:if cond='data:blog.pageType != "static_page"'>
          <b:if cond='data:post.allowComments'>
            <span class='sep'> // </span><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
            <data:post.commentLabelFull/>
            </a>
          </b:if>
        </b:if>
        </b:if>
      </span></p>
    </div>

Termasuk juga kode CSS berikut yang menunjukkan mirip dengan gambar “tangan menulis”.

.post-header-line-1 p:before {
content: '\270d';
margin-right: .25em;
}

Sementara pengkodean sebenarnya terletak pada post-footer, namun dalam MiMspot pengkodean tersebut disembunyikan dengan menambahkan CSS-inline (warna merah).

    <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'><span class='post-author vcard' style='display:none;'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>
        </b:if>
      </span> <span class='post-timestamp' style='display:none;'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' itemprop='url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span> <span class='post-comment-link' style='display:none;'>
        <b:if cond='data:blog.pageType != "item"'>
          <b:if cond='data:blog.pageType != "static_page"'>
            <b:if cond='data:post.allowComments'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.commentLabelFull/>:
              </a>
            </b:if>
          </b:if>
        </b:if>
      </span> <span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
          </a>
          </span>
        </b:if>

        <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span> <div class='post-share-buttons goog-inline-block'><span class='subscribe-rss'><a href='/feeds/posts/default' title='Berlangganan posting via feedburner'>Subscribe</a></span> <span class='sep'>| </span>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
      </div> <span class='post-backlinks post-comment-link'>
         <b:if cond='data:blog.pageType != "item"'>
           <b:if cond='data:blog.pageType != "static_page"'>
             <b:if cond='data:post.showBacklinks'>
               <a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
             </b:if>
           </b:if>
         </b:if>
       </span> </div>

      <div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
          </b:loop>
        </b:if>
      </span></div>
      <div class='post-footer-line post-footer-line-3'><p class='foot-info small'>Anda baru saja membaca posting dengan judul “<data:post.title/>” 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>
    </div>

Sedangkan kode berwarna hijau merupakan penambahan untuk taut berlangganan yang juga terkait dengan CSS seperti di bawah ini.

.subscribe-rss,
.feed-links {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUqNUuhrUE0U-TlCujm_u_1fiHiEm38r9J1d7p-4wpmONy7b0EyMVqjfFWqwhUFECBUYu-kNaHwkbfmhnwzixB9ABU94Y3CDFC0P_m-R9LhvMBI7HsXbGw58MXqPguPPNWGfk29fExdu0/s800/mimicon.png) no-repeat -10px -93px;
padding-left: 1.5714em;
}

Selanjutnya penambahan kode yang berwarna biru terkait dengan CSS berikut.

.foot-info {
border: 1px dotted #ddd;
color: #666;
font-style: normal;
margin-top:  1.5714em;
padding: 15px;
}
.foot-info a {
color: #3268c4;
font-weight: bold;
}

Memperbaiki posisi daftar pada posting terkait, yakni terjadi ketika judul sebuah posting sangat panjang sehingga menempatkan dua atau tiga baris teks. Cari kode CSS berikut:

.related-posts ul {
list-style: none;
margin-left: 0;
}
.related-posts li:before {
content: '\2023';
margin-right: 1.2em;
}

Ganti dengan:

.related-posts ul {
list-style: none;
}
.related-posts li:before {
content: '\2023';
margin-left: -1.5em;
padding-right: 1.2em;
}

Mungkin yang lain — tidak berhubungan dengan posting — adalah menu horizontal. Untuk kode yang ditandai dengan # harus diganti dengan URL (Uniform Resource Locator) tujuan, bukan ditambahkan. Contoh: http://namablog.blogspot.com/p/about dan bukan ~~http://namablog.blogspot.com/p/about#~~. Kecuali untuk menu dropdown induk.

Silakan beri komentar di sini, jika dalam penginstalan MiMspot kurang/tidak sesuai dengan format demonstrasi ini.

Translation customization on MiMspot

noreply@blogger.com (Anonymous) — Mon, 01 Oct 2012 17:04:00 +0000

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”.

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

<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

<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

<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

<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

<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

<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.

Struktur Lain

noreply@blogger.com (Anonymous) — Sun, 30 Sep 2012 17:26:00 +0000

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>

Lorem 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.

Praesent 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…

Struktur Posting

noreply@blogger.com (Anonymous) — Sun, 30 Sep 2012 10:38:00 +0000

Ketika melakukan buat atau edit posting, jarang sekali pengguna menggunakan tampilan HTML (HyperText Markup Language). Memang pada dasarnya agak susah waktu awal-awal menghadapi tampilan tersebut, oleh karena pengguna memasukkan tag-tag atau atribut pengkodean secara manual. Namun apabila dicermati lebih mendalam, penggunaan tampilan HTML & tag yang sesuai akan meningkatkan keterbacaan dalam blog pengguna, sebagai contoh paragraf ini berada pada tag <p> … </p>. Selanjutnya, coba kita perhatikan ampersand yang terlihat unik. Anda dapat menggunakannya dengan memasukkan kode <span class="amp">&</span>, dimana pengkodean .amp telah include dalam CSS theme MiMspot.

Header h1

Header h2

Header h3

Header h4

Header h5

Header h6

Judul Tabel
Header	I	II
Body table	1	a
Body table	2	b
Body table	3	c
Body table	4	d
Body table	5	e
Footer	24	abcdef

Table source

.fin {
 content: "\2767";
 display: block;
 font-size: 3em;
 line-height: 1.1429;
 margin-bottom: .5714em;
 text-align: center;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Teks tebal mauris non lectus ipsum. Phasellus Teks miring pellentesque, diam lacinia auctor fringilla, erat nibh ullamcorper felis, et lobortis magna diam quis magna. Phasellus et Tautan teks turpis nisl. Aliquam mattis velit at dui accumsan et laoreet est varius. Nunc ac massa vel nulla ullamcorper volutpat nec ac magna. Donec at convallis lacus. Nunc turpis mi, iaculis sit amet tempus aliquam, tempor eu turpis.

Mauris et mattis sem. Quote, mauris vestibulum vulputate mauris vitae adipiscing. Quote, proin tempus posuere congue. Aenean luctus volutpat mauris, at molestie neque scelerisque ac. Duis ultricies vulputate tincidunt. Aliquam eu ^{Teks sup} velit dolor. Nullam faucibus tortor nec odio semper malesuada. Cras vehicula bibendum lectus, et euismod tellus auctor et. Etiam pulvinar _{Teks sub} sollicitudin justo, sit amet tincidunt tortor mollis a.

Blockquote, proin tempus posuere congue. Aenean luctus volutpat mauris, at molestie neque scelerisque ac. Duis ultricies vulputate tincidunt. Aliquam eu velit dolor. Nullam faucibus tortor nec odio semper malesuada. Cras vehicula bibendum lectus, et euismod tellus auctor et. Etiam pulvinar sollicitudin justo, sit amet tincidunt tortor mollis a.
Blockquote source

Cras et lectus orci, teks code euismod molestie mauris. Cras accumsan, Teks insert sapien quis venenatis porttitor ~~Teks delete~~, sapien dolor bibendum dui, vitae tempus urna est id justo. Cras vestibulum nisl vitae augue cursus ultricies. Teks mark. Aliquam eu enim dolor, eleifend convallis ipsum. Fusce dapibus, purus ut varius porta, nunc dolor luctus metus, quis ornare massa urna venenatis sapien. Aliquam erat volutpat. In nec turpis tellus. Aenean vel augue ante, et rutrum enim. Suspendisse quis diam vitae nibh convallis ullamcorper.

Untuk mengetahui pengkodean di atas, silakan tekan tombol Ctrl+U pada papan ketik Anda. Contoh penggunaan figure, walaupun pada kasus lain tidak mesti figure dimanfaatkan untuk menampilkan gambar.

Keterangan figcaption mengenai gambar. Sumber asli dari Anu bin Anu.

Alamat Penulis

Petunjuk Instalasi MiMspot

noreply@blogger.com (Anonymous) — Sun, 30 Sep 2012 09:26:00 +0000

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”.
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”.
Selanjutnya tinggal melakukan konfigurasi seperti yang dicontohkan pada gambar berikut.
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™.

Optimalisasi dan Kustomisasi Manual MiMspot

noreply@blogger.com (Anonymous) — Sat, 29 Sep 2012 18:35:00 +0000

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.

Rilis template MiMspot untuk Blogger.com

noreply@blogger.com (Anonymous) — Fri, 28 Sep 2012 21:36:00 +0000

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.

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.

MiMspot

Memperbaiki Kekeliruan Format Posting

Translation customization on MiMspot

Readmore

Related Posts

Footnote on The Post

Preface to Editor Comments

Titles Comments

Breadcrums

Social Nerworking

Content Info on Footer

Struktur Lain

Struktur Posting

Header h1

Header h2

Header h3

Header h4

Header h5

Header h6

Petunjuk Instalasi MiMspot

Optimalisasi dan Kustomisasi Manual MiMspot

Theme

Fitur

Menu Navigasi

Taut Teks Jejaring Sosial

Navigasi Posting (`blog-pager`)

Widget

Rilis template MiMspot untuk Blogger.com

MiMspot

Memperbaiki Kekeliruan Format Posting

Translation customization on MiMspot

Readmore

Related Posts

Footnote on The Post

Preface to Editor Comments

Titles Comments

Breadcrums

Social Nerworking

Content Info on Footer

Struktur Lain

Struktur Posting

Header h1

Header h2

Header h3

Header h4

Header h5

Header h6

Petunjuk Instalasi MiMspot

Optimalisasi dan Kustomisasi Manual MiMspot

Theme

Fitur

Menu Navigasi

Taut Teks Jejaring Sosial

Navigasi Posting (blog-pager)

Widget

Rilis template MiMspot untuk Blogger.com

Navigasi Posting (`blog-pager`)