Jumat, 02 November 2012

Menambahkan Kelas Spesifik pada Tag BODY Berdasarkan Tipe Halaman

Menambahkan Kelas yang Berbeda-Beda pada Tag Body berdasarkan Tipe Halaman
Tipe halaman berubah peran menjadi nama kelas pada tag <body>

Cara termudah untuk menambahkan kelas spesifik pada tag <body> berdasarkan tipe halaman adalah dengan mencantumkan nilai atribut kelas berupa data:blog.pageType seperti ini:

<body expr:class='data:blog.pageType'>

Dengan cara di atas, maka blog Anda akan memiliki kelas spesifik pada tag <body> yang nilainya akan menyesuaikan diri berdasarkan tipe halaman yang sedang diakses.

Kemungkinan akan muncul lima macam nama kelas yaitu:

  • index
  • item
  • archive
  • static_page
  • error_page

Jika Anda ingin menambahkan lebih dari satu kelas, Anda bisa memisahkannya menggunakan simbol + dan beberapa &quot; Misalnya:

<body expr:class='&quot;loading &quot; + data:blog.pageType'>

Kode di atas nantinya akan menghasilkan markup HTML seperti ini:

<body class='loading tipe_halaman'>

Lalu Bagaimana dengan Halaman Muka, Halaman Label dan Pencarian?

Untuk menambahkan kelas spesifik berdasarkan kondisi-kondisi halaman yang tidak termasuk di dalam data:blog.pageType, caranya menjadi sedikit rumit. Kita harus menambahkan sesuatu berupa elemen divisi tepat setelah tag <body>, kemudian kita tambahkan kelas-kelas tertentu berdasarkan kondisional halaman yang nantinya akan kita terapkan satu per satu. Tag yang kita pakai harus diubah menjadi karakter entitas HTML agar bisa lolos dari editor HTML Blogger:

...
<body>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    &lt;div class=&#39;home-page&#39;&gt;
  <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      &lt;div class=&#39;item-page&#39;&gt;
    </b:if>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
      &lt;div class=&#39;archive-page&#39;&gt;
    </b:if>
    <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
      &lt;div class=&#39;error-page&#39;&gt;
    </b:if>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      &lt;div class=&#39;static-page&#39;&gt;
    </b:if>
    <b:if cond='data:blog.searchLabel'>
      &lt;div class=&#39;label-page&#39;&gt;
    </b:if>
    <b:if cond='data:blog.searchQuery'>
      &lt;div class=&#39;search-page&#39;&gt;
    </b:if>
  </b:if>

  <!-- Konten blog di sini -->

  &lt;/div&gt;
</body>

Saat Anda melihat kode sumber blog Anda melalui peramban, harusnya markup HTML akan tampak kurang lebih seperti ini:

...
<body>
  <div class='kelas-spesifik'>
    ...
  </div>
</body>

Untuk Apa Kita Melakukan Ini?

Ya, mungkin Anda ingin membuat warna latar artikel yang berbeda-beda berdasarkan tipe halaman. Saat Anda berhasil menerapkan ini, maka Anda bisa menuliskan kode CSS pada selektor yang diawali oleh nama kelas tersebut untuk membatasi penerapan deklarasi:

.post {
  background-color:white; /* default */
}

.home-page .post {
  background-color:red; /* warna latar artikel saat sedang berada di halaman muka */
}

.item-page .post {
  background-color:orange; /* warna latar artikel saat sedang berada di halaman item */
}

.static-page .post {
  background-color:green; /* warna latar artikel saat sedang berada di halaman muka */
}

.archive-page .post {
  background-color:gold; /* warna latar artikel saat sedang berada di halaman arsip */
}

.error-page .post {
  background-color:blue; /* warna latar artikel saat sedang berada di halaman error */
}

.label-page .post {
  background-color:violet; /* warna latar artikel saat sedang berada di halaman label */
}

.search-page .post {
  background-color:brown; /* warna latar artikel saat sedang berada di halaman hasil pencarian */
}
Diposting oleh di Tidak ada komentar:
Label: , ,

XHTML Blogger, Seksi Posting

Dalam Konsep

Konten Halaman:

  1. Prolog
  2. Detail
    1. Judul Posting
    2. Badan/Konten Posting
    3. Footer/Catatan Kaki Posting
    4. Jump Link/Read More Link

Prolog:

Elemen posting pada umumnya adalah sebuah elemen <b:includable> dengan id='post' seperti ini:

<b:includable id='post' var='post'>
  ...
</b:includable>

Pada versi mobile, Anda akan melihatnya sebagai elemen ini:

<b:includable id='mobile-post' var='post'>
  ...
</b:includable>

Elemen tersebut berisi markup HTML yang mendukung penampilan posting:

<div class='post hentry'>
  <h2 class='post-title entry-title'>
    Judul Artikel...
  </h2>
  <div class='post-body entry-content' id='post-body-3907786755150251808'>
    Konten artikel...
  </div>
  <div class='post-footer'>
    Konten footer artikel...
  </div>
</div>

Detail:

Judul Posting

Berupa elemen heading. Biasanya memiliki kelas post-title dan/atau entry-title:

<b:if cond='data:post.title'>
  <h3 class='post-title entry-title'>
    <b:if cond='data:post.link'>
      <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
      <b:if cond='data:post.url'>
        <b:if cond='data:blog.url != data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
      <b:else/>
        <data:post.title/>
      </b:if>
    </b:if>
  </h3>
</b:if>
DataKeteranganTampilan/Contoh Tampilan
data:post.linkElemen ini akan menghasilkan tautan lampiran yang nilainya Anda atur melalui editor postinghttp://www.custom_link_url.com
data:post.urlElemen ini akan menghasilkan URL postinghttp://nama_blog.blogspot.com/2012/11/lorem-ipsum.html
data:post.titleElemen ini akan menghasilkan judul postingLorem Ipsum

Tubuh/Konten Posting

Berupa elemen divisi dengan kelas post-body dan/atau entry-content:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
  <data:post.body/>
  <div class='clear'/> <!-- clear for photos floats -->
</div>
DataKeteranganTampilan/Contoh Tampilan
data:post.idElemen ini akan menampilkan ID posting3907786755150251808
data:post.bodyElemen ini akan menampilkan konten postingLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
data:post.snippetElemen ini akan menghasilkan ringkasan posting dalam 100 kata + ...Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut ...
data:post.thumbnailUrlElemen ini akan menghasilkan URL thumbnail pertama di dalam posting dalam resolusi s72-chttp://4.bp.blogspot.com/-EJgQTkZZJXY/UI1J-2tM21I/AAAAAAAAFF8/09hfALvXkVY/s72-c/1389621_gaillardia.jpg
data:post.firstImageUrlElemen ini akan menghasilkan URL thumbnail pertama di dalam posting dalam resolusi yang sesungguhnyahttp://4.bp.blogspot.com/-EJgQTkZZJXY/UI1J-2tM21I/AAAAAAAAFF8/09hfALvXkVY/s1600/1389621_gaillardia.jpg
data:post.authorPhoto.urlElemen ini akan menghasilkan URL gambar foto profil penulishttps://lh4.googleusercontent.com/-nxgZmVx9WAM/AAAAAAAAAAI/AAAAAAAAAAA/q7C64RWrrU0/s1600/photo.jpg
data:post.authorProfileUrlElemen ini akan menghasilkan URL profil penulishttp://www.blogger.com/profile/034065736413533XXXXX
data:post.authorAboutMeElemen ini akan menghasilkan deskripsi profil penulisLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.

Footer/Catatan Kaki Posting

Berupa elemen divisi. Biasanya memiliki kelas post-footer:

<div class='post-footer'>

  <div class='post-footer-line post-footer-line-1'>
    <span class='post-author vcard'>
      <b:if cond='data:top.showAuthor'>
        <data:top.authorLabel/>
        <span class='fn'>
          <data:post.author/>
        </span>
      </b:if>
    </span>
    <span class='post-timestamp'>
      <b:if cond='data:top.showTimestamp'>
        <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
        </b:if>
      </b:if>
    </span>
    <!-- quickedit pencil -->
    <b:include data='post' name='postQuickEdit'/>
    <span class='post-comment-link'>
      <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
          <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
          </b:if>
        </b:if>
      </b:if>
    </span>
    <!-- Feature added by BTemplates.com -->
    <b:if cond='data:post.sharePostUrl'>
      <div class='post-share-buttons'>
        <b:include data='post' name='shareButtons'/>
      </div>
    </b:if>
  </div>

  <div class='post-footer-line post-footer-line-2'>
    <span class='post-labels'> ... </span>
    <b:if cond='data:top.showMobileShare'>
      <div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
        <a href='javascript:void(0);'><data:shareMsg/></a>
      </div>
    </b:if>
    <b:if cond='data:top.showDummy'>
      <div class='goog-inline-block dummy-container'>
        <data:post.dummyTag/>
      </div>
    </b:if>
    <b:if cond='data:top.showMobileShare'>
      <div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
        <a href='javascript:void(0);'><data:shareMsg/></a>
      </div>
    </b:if>
    <b:if cond='data:top.showDummy'>
      <div class='goog-inline-block dummy-container'>
        <data:post.dummyTag/>
      </div>
    </b:if>
  </div>

  <div class='post-footer-line post-footer-line-3'><span class='post-location'>
    <b:if cond='data:top.showLocation'>
      <b:if cond='data:post.location'>
        <data:postLocationLabel/>
        <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
      </b:if>
    </b:if>
  </span> </div>

</div>
DataKeteranganTampilan/Contoh Tampilan
data:top.authorLabelLabel keterangan sebelum nama penulisDiposting oleh:
data:post.authorElemen ini akan menghasilkan nama penulisTaufik Nurrohman
data:top.timestampLabelLabel keterangan sebelum waktu penerbitanpada
data:post.timestampISO8601Elemen ini akan menampilkan waktu penerbitan dalam format timestamp ISO 86012012-10-28T22:42:00+07:00
data:post.timestampElemen ini akan menampilkan timestamp waktu penerbitan10:42
data:post.addCommentUrlElemen ini akan menampilkan URL posting dengan tambahan hash #comment-formhttp://nama_blog.blogspot.com/2012/11/lorem-ipsum.html#comment-form
data:post.addCommentOnclick???...
data:top.commentLabel[?]-
data:post.numComments[?]-
data:top.commentLabelPlural[?]-
data:shareMsg???...
data:post.dummyTag???...
data:top.showLocation???...
data:post.location???...
data:postLocationLabelElemen ini akan menampilkan label lokasi sebelum keterangan lokasi penerbitan postingLokasi:
data:post.location.mapsUrlElemen ini akan menghasilkan URL lokasi dalam peta Google (???)...
data:post.location.nameElemen ini akan menampilkan lokasi penerbitan posting yang telah dituliskan dalam formulir lokasiBanyumas, Indonesia

Jump Link/Read More Link

Elemen ini akan muncul saat Anda mengaktifkan jump link pada posting/memotong artikel dengan cara menyisipkan kode <!--more-->:

<b:if cond='data:post.hasJumpLink'>
  <div class='jump-link'>
    <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
      <data:post.jumpText/>
    </a>
  </div>
</b:if>
DataKeteranganTampilan/Contoh Tampilan
data:post.jumpTextElemen ini akan menampilkan teks “Baca Selengkapnya” dari pengaturan postingRead More »
Diposting oleh di Tidak ada komentar:
Label: ,

Kamis, 01 November 2012

Tabel Tag [data] Blogger Terluar

Dalam Konsep

Tabel Tag <data> Blogger Terluar
DataKeteranganTampilan/Contoh Tampilan
data:blog.blogIdMenampikan ID blog4828918596196909460
data:blog.bloggerUrlMenampikan URL blogger.comhttp://www.blogger.com
data:blog.titleMenampikan judul blogJudul Blog
data:blog.pageTypeMenampikan tipe halaman yang sedang aktifitem, index, archive, static_page, error_page
data:blog.homepageUrlMenampikan URL hostname blog atau URL halaman mukahttp://nama_blog.blogspot.com
data:blog.urlMenampikan URL blog halaman yang sedang aktifhttp://nama_blog.blogspot.com/2012/10/lorem-ipsum.html
data:blog.canonicalUrlMenampikan URL canonical (tidak berbeda dengan data:blog.url)http://nama_blog.blogspot.com/2012/10/lorem-ipsum.html
data:blog.canonicalHomepageUrlMenampikan URL canonical halaman muka (tidak berbeda dengan data:blog.homepageUrl)http://nama_blog.blogspot.com
data:blog.blogspotFaviconUrlMenampikan URL favicon bloghttp://nama_blog.blogspot.com/favicon.ico
data:blog.enabledCommentProfileImagesMenampikan nilai pengaturan penampilan avatar komentartrue, false
data:blog.adultContentMenampikan nilai pengaturan konten dewasatrue, false
data:blog.disableAdSenseWidgetBoolean untuk menyatakan apakah widget AdSense bawaan dari elemen <data:adCode/> akan ditampilkan atau tidak.true, false
data:blog.analyticsAccountNumberMenampilkan kode akun Google AnalyticUA-12345678-1
data:blog.searchLabelMenampilkan nama label saat kita sedang berada pada halaman labelTutorial
data:blog.searchQueryMenampilkan kueri pencarian saat kita sedang berada pada halaman hasil penelusuranakordion
data:blog.pageNameMenampilkan nama halaman (umumnya nilainya sama dengan judul posting)Lorem Ipsum
data:blog.pageTitleMenampilkan judul title barNama Blog: Judul Artikel
data:blog.metaDescriptionMenampilkan teks meta deskripsi blog/artikelBlog ini berisi artikel seputar babi-babi buta babibu brot.
data:blog.encodingMenampilkan tipe enkoding halamanUTF-8
data:blog.localeMenampilkan lokalisasi negara?id
data:blog.isPrivate???true, false
data:blog.isMobileIndikasi apakah kita sedang berada pada mode blog normal atau mobiletrue, false
data:blog.isMobileRequest???true, false
data:blog.mobileClassMenampilkan kelas khusus untuk blog versi mobile mobile
data:blog.isPrivateBlogMenampikan nilai pengaturan apakah blog ini terbuka untuk umum atau tidaktrue, false
data:blog.languageDirectionMenampikan direksi bahasaltr, rtl
data:blog.feedLinksMenampilkan daftar tag <link> berupa Atom, RSS dan hal-hal lain yang berhubungan dengan feedSampel
data:blog.meTag???...
data:blog.openIdOpTag???...
data:blog.googleProfileUrlMenampilkan URL profil Googlehttps://plus.google.com/108949996304093815163
data:blog.postImageThumbnailUrlMenampilkan thumbnail gambar posting yang sedang aktif (di halaman item/halaman statis). Resolusi thumbnail adalah /s72-c. Biasanya ini digunakan pada elemen <link rel="image_src">http://3.bp.blogspot.com/-48XmDxPLjJo/UJKAzMEr0XI/AAAAAAAAFN8/x90Yj_LnCCg/s72-c/fl-above-grass.jpg
data:blog.latencyHeadScriptMenampilkan script latency head (semacam lazy loader berdasarkan event scroll)Sampel
data:blog.mobileHeadScript???...
data:blog.ieCssRetrofitLinksMenampilkan script ieretrofit.js<!--[if IE]><script type="text/javascript" src="//www.blogger.com/static/v1/jsbin/3659544590-ieretrofit.js"></script><![endif]-->
data:blog.view???...
data:blog.dynamicViewsCommentsSrcMenampilkan URL script komentar halaman dinamis?//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js
data:blog.dynamicViewsScriptSrcMenampilkan script tampilan dinamis?//www.blogblog.com/dynamicviews/2179ec63bcf35660
data:blog.postImageUrlMenampilkan gambar posting yang sedang aktif (di halaman item/halaman statis). Resolusi gambar ada pada resolusi yang sebenarnya.http://3.bp.blogspot.com/-48XmDxPLjJo/UJKAzMEr0XI/AAAAAAAAFN8/x90Yj_LnCCg/s1600/fl-above-grass.jpg
Diposting oleh di Tidak ada komentar:
Label: ,

Sabtu, 06 Agustus 2011

CSS Border, dari A sampai Zet

Warning Line

Berikut ini adalah beberapa jenis border yang paling umum digunakan:

border-style: solid;


border-style: dashed;


border-style: dotted;


border-style: inset;


border-style: outset;


border-style: double;


border-style: groove;


border-style: ridge;


border-style: none;


Properti border dibagi menjadi tiga aspek:

  • border-width
  • border-style
  • border-color

  • border-width:
    border-width digunakan untuk menentukan tebal border. Umumnya menggunakan satuan piksel, atau bisa juga menggunakan ukuran relatif: thin (tipis), medium (sedang), atau thick (tebal).
  • border-style:
    border-style digunakan untuk menentukan tipe border.
  • border-color:
    border-color digunakan untuk menentukan warna border. Umumnya menggunakan warna HEX, atau bisa juga menggunakan warna RGB atau menuliskan nama warna secara langsung.


Contoh Penerapan

Top-DownInline
<style type='text/css'>
#contoh-border {
border-width:4px;
border-style:solid;
border-color:#ffa500;
}
</style>

......

<div id='contoh-border'>OBJEK</div>		<div style='border-width:4px;border-style:solid;border-color:#ffa500;'>
OBJEK
</div>


Menggabungkan Tiga Deklarasi Border dalam Satu Properti

Properti border-width, border-style dan border-color bisa digabungkan dalam satu properti saja yaitu border, dengan urutan seperti berikut:

border: 4px solid #ffa500;
border: border-width border-style border-color;


Memecah Border Menjadi Empat Sisi

Properti border juga bisa dipecah menjadi empat sisi seperti ini:

DeklarasiKeterangan
border-top: 4px solid #ffa500;Menentukan tampilan border sebelah atas
border-right: 4px solid #ffa500;Menentukan tampilan border sebelah kanan
border-bottom: 4px solid #ffa500;Menentukan tampilan border sebelah bawah
border-left: 4px solid #ffa500;Menentukan tampilan border sebelah kiri


Penerapan yang lebih detail dapat menggunakan teori yang pertama, dengan dua jenis metode pemecahan sisi:

DeklarasiKeterangan
border-top-width: 4px;Menentukan tebal border sebelah atas
border-right-width: 4px;Menentukan tebal border sebelah kanan
border-bottom-width: 4px;Menentukan tebal border sebelah bawah
border-left-width: 4px;Menentukan tebal border sebelah kiri
border-top-style: solid;Menentukan tipe border sebelah atas
border-right-style: solid;Menentukan tipe border sebelah kanan
border-bottom-style: solid;Menentukan tipe border sebelah bawah
border-left-style: solid;Menentukan tipe border sebelah kiri
border-top-color: #ffa500;Menentukan warna border sebelah atas
border-right-color: #ffa500;Menentukan warna border sebelah kanan
border-bottom-color: #ffa500;Menentukan warna border sebelah bawah
border-left-color: #ffa500;Menentukan warna border sebelah kiri


DeklarasiKeterangan
border-width: 4px 2px 7px 0px;Urutan valuenya adalah:
  1. top
  2. right
  3. bottom
  4. left
border-style: solid dotted dashed none;
border-color: red green blue orange;
Diposting oleh di Tidak ada komentar:
Label: ,

Jumat, 05 Agustus 2011

Memasukkan Kode HTML dalam Posting

Suatu saat mungkin kamu ingin berbagi kode, informasi atau tutorial dan ingin menerbitkannya dalam posting untuk dipamerkan. Namun ketika kamu meletakkan kode di dalam posting, kode-kode tersebut malah menjadi tidak terlihat, rusak, muncul pesan error pada editor posting atau bahkan menghilang sama sekali. Hal ini terjadi karena ketika sebuah kode (khususnya tag) diletakkan di dalam posting, kode-kode tersebut tidak akan diterjemahkan browser sebagai teks biasa, melainkan akan diterjemahkan sebagai sistem. Nah untuk mengatasi masalah itu, umumnya seorang penulis dunia maya akan memanfaatkan baris-baris karakter khusus seperti ini agar browser tidak menerjemahkannya sebagai sistem, melainkan sebagai simbol:

KodeHasil Tampilan
&lt;<
&gt;>
&#39;'
&quot;"
&amp;&
&hearts;♥
&raquo;»
&laquo;«

dan lain sebagainya...

Nah, untuk memasukkan kode HTML ke dalam posting, gunakan kode-kode pengganti tersebut untuk menciptakan simbol-simbol seperti <, > dan sebagainya yang tidak bisa diterjemahkan peramban sebagai “huruf”. Contohnya begini:

&lt;a href=&#39;http://latitudu.blogspot.com&#39;&gt;TAUTAN&lt;/a&gt;

Kode-kode tersebut nantinya akan berubah menjadi simbol pada saat posting diterbitkan. Itu terjadi karena secara teknis kita memang tidak pernah menggunakan karakter < dan > dalam naskahnya, sehingga peramban tidak akan menerjemahkannya menjadi “sistem”.

Satu cara yang paling praktis untuk mengubah simbol-simbol HTML adalah dengan menggunakan konverter HTML. Cara kerjanya sama persis dengan sistem Find and Replace dalam komputermu.

Coba masuk ke halaman ini ⇒ Konverter HTML

Konverter HTML

Cara menggunakannya cukup dengan menulis atau menempelkan kode HTML, lalu tekan Konversi.

Salin hasil konversinya lalu masukkan ke dalam editor posting. Terserah mau diletakkan pada mode HTML atau mode Tulis, hasil akhirnya nanti akan sama saja.

Tampilan kode di dalam postingmu sekarang memang menjadi tampak sangat berantakan, tapi coba sekarang kamu klik Pratinjau.

Pratinjau

Bagaimana?

Diposting oleh di Tidak ada komentar:
Label: , , ,

Kamis, 04 Agustus 2011

Membuat Posting Read More/Baca Selengkapnya untuk Blogspot

Posting Read More/Baca Selengkapnya dibuat dengan tujuan untuk meringkas artikel-artikel yang terlalu panjang. Sangat tidak menyenangkan bagi para pengunjung andaikan mereka harus menggulung layar begitu panjang hanya untuk melihat posting-posting di bawahnya. Nah, untuk mengatasi masalah itu, umumnya para penulis akan membuat sebuah sistem ringkasan posting seperti ini:

posting auto readmore blogspot

Link/tautan Baca Selengkapnya bertugas untuk mengarahkan para pengunjung menuju halaman asli dari artikel tersebut.
Cukup dua langkah perombakan saja yang kita perlukan untuk membuat sistem ini berfungsi, hanya saja di sini Saya memberikan sedikit detail kecil untuk memperindah tampilan linknya.

Pertama-tama masuklah ke tab Rancangan kemudian pilih Edit HTML. Cek Expand Template Widget agar seluruh elemen pembangun posting tampil.
Temukan kode ini:

</head>

Salin kode ini, kemudian letakkan tepat di atasnya:

<script type='text/javascript'>
//<![CDATA[
    var thumbnail_mode   = "float",
        summary_noimg    = 350,
        summary_img      = 350,
        img_thumb_height = 100,
        img_thumb_width  = 120;

    /******************************************
    Script Posting Read-More versi 2.0 (blogspot)
    (C)2008 oleh Anhvo
    ********************************************/
    function createSummaryAndThumb(a) {
        var b=document.getElementById(a);var c="";var d=b.getElementsByTagName("img");var e=summary_noimg;if(d.length>=1){c='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+d[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var f=c+"<div>"+removeHtmlTag(b.innerHTML,e)+"</div>";b.innerHTML=f}function removeHtmlTag(a,b){if(a.indexOf("<")!=-1){var c=a.split("<");for(var d=0;d<c.length;d++){if(c[d].indexOf(">")!=-1){c[d]=c[d].substring(c[d].indexOf(">")+1,c[d].length)}}a=c.join("")}b=b<a.length-1?b:a.length-2;while(a.charAt(b-1)!=" "&&a.indexOf(" ",b)!=-1)b++;a=a.substring(0,b-1);return a+"...";
    }
//]]>
</script>

Setelah itu cari kode yang tampak seperti ini:

<data:post.body/>

TIP: Tekan CTRL + F lalu ketik data:post.body untuk mempermudah pencarian.

Ganti kode tersebut dengan ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
    <span class='rmlink'><a expr:href='data:post.url'>Baca Selengkapnya</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
</b:if>

Klik Pratinjau untuk sekedar mengecek perubahannya.

Sistem ringkasan posting ini sebenarnya sudah bisa berfungsi dengan baik, jadi kamu bisa langsung menyimpan perubahannya. Tapi jika kamu ingin memberikan sedikit kegantengan lagi dalam sistem postingmu ini, kamu bisa memberikan efek seperti tombol pada link Baca Selengkapnya.

Salin kode CSS di bawah ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau </style>:

.rmlink a        {background:#567856;color:#fff;padding:2px 15px 3px;margin:15px 0 0;border:0;float:right;text-decoration:none;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;font-weight:bold;}
.rmlink a:hover  {background:#FFDD56;color:#000;}
.rmlink a:active {background:#000;color:#567856;}

Klik Simpan Template.

Sedikit Penyesuaian:

  • Tentukan banyaknya huruf yang ditampilkan dalam variabel summary_noimg (jika postinganmu tidak terdapat gambar) dan summary_img (jika postinganmu terdapat gambar).
  • Tentukan lebar dan tinggi thumbnail dalam variabel img_thumb_width dan img_thumb_height.

Pertimbangkan Juga Beberapa Posting Ini:

Diposting oleh di Tidak ada komentar:
Label:

Rabu, 03 Agustus 2011

Widget Tabel Konten Abu Farhan Berbahasa Indonesia

TOC

Berbahasa Indonesia di sini maksudnya adalah bahwa Saya telah memodifikasi scriptnya. Beberapa orang (seperti saya) mungkin tidak suka dengan teks bertuliskan New !! di samping judul posting karena masih menggunakan bahasa Inggris. Nah, untuk mengatasi itu Saya telah mengedit scriptnya agar bisa menjadi berbahasa Indonesia (lihat demo). Selain itu Saya juga telah mengubah semua linknya menjadi otomatis terbuka di tab baru untuk mempermudah para penulis yang masih menonaktifkan klik kanan di blog mereka.
Untuk membuatnya, siapkan sebuah widget HTML/JavaScript, atau buat sebuah halaman statis lalu klik mode HTML. Salin kode ini, kemudian letakkan di dalam formulirnya:

<script src='http://hompimpa.googlecode.com/files/toclib.js' type='text/javascript'></script>
<script src='http://latitudu.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc'></script>
<a href='http://www.abu-farhan.com' style='font:8px Arial,Serif;color:#000;'>Widget by Abu Farhan</a>

Ganti kode yang berwarna hijau dengan alamat blogmu.
Klik Simpan.

Diposting oleh di Tidak ada komentar:
Label: ,
Langganan: Postingan (Atom)