Ngalor Ngidul: designe

Template offline Generator - Artisteer 4 Full Free

Jumat, Maret 01, 2013 Kelulut Klanceng 6

<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ0wwUQ7qyq9DQzAJLfWztISWYTWnA6PKVat_5sjeaBt921mOX7SrsdiUzYHm-LqlsfYY6ljRzUXeQrJKxhzmGgu7LP0oKKFHfKbHbW0wjqcJk8Cwdtu5m_vN0noNjiLkvDyd1RQpXp2M/s1600/5913cf2b4bb006f3c30964bc0070fe14.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Template offline Generator - Artisteer 4 Full Free" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ0wwUQ7qyq9DQzAJLfWztISWYTWnA6PKVat_5sjeaBt921mOX7SrsdiUzYHm-LqlsfYY6ljRzUXeQrJKxhzmGgu7LP0oKKFHfKbHbW0wjqcJk8Cwdtu5m_vN0noNjiLkvDyd1RQpXp2M/s320/5913cf2b4bb006f3c30964bc0070fe14.jpeg" title="Template offline Generator - Artisteer 4 Full Free" /></a><br />
<div style="text-align: justify;">
Setiap blogger yang benar-benar serius menjalani profesinya sebagai blogger pasti sangat memperhatikan tampilan dari blog atau website yang dia kelola. Permasalahannya adalah jika tidak menguasai bahasa html, CSS dan lain sebagainya, mungkin akan sangat sulit untuk mendapatkan template sesuai keinginan. Bahkan tidak sedikit juga yang mau membayar jasa pembuatan template atau membeli template secara premium.<br />
<br />
<br />
Pada postingan sebelumnya yaitu <a href="http://realfa84.blogspot.com/2012/01/tempat-tempat-untuk-membuat-template.html"><i>Tempat-tempat untuk membuat template blog - Template Generator Online</i></a>, banyak yang bertanya apakah ada software yang bisa digunakan untuk membuat template secara offline. Oleh karena itu di postingan kali ini saya coba share aja buat yang belum tahu tentang software generator template secara offline. Nama software yang paling sering dan gampang digunakan adalah Artisteer. Untuk saat ini, versi terbaru dari Artister 4.1.<br />
<br />
Dengan Artisteer 4.1 ini anda bisa membuat template dengan berbagai flatform meskipun tidak begitu menguasai bahasa  pemograman HMTL dan CSS. Software generator template offline ini bukan hanya bisa digunakan untuk flatform blogspot, akan tetapi juga bisa digunakan untuk website, wordpress, drupal, joomla dsb. Hebatnya lagi, software ini sudah menyediakan ratusan template yang siap pakai. Kita juga bisa mengedit sendiri design template yang ada cukup dengan klik sana dan klik sini.<br />
<br />
Hasil dari template anda bisa disimpan dalam berbagai format dan bisa juga diupload langsung keserver blog atau website anda. Sayangnya tentu saja software ini tidak gratis alias berbayar. Untuk mendapatkan versi fullnya kita harus rela membayar sebesar $129 atau hampir setara dengan Rp. 1.250.000,- untuk yang standard edition. Jika ingin sekedar coba-coba anda bisa mengunjungi situs resminya di <i>www.artisteer.com</i>.<br />
<br />
Namun buat yang ingin gratisan tentu saja admin tidak ingin mengecewakan para pecinta Gratisan. Dibawah ini, admin juga sudah menyediakan sofware versi sebelumnya yaitu Artisteer.4.0.0.58475. Untuk installernya anda bisa download <a href="http://files4.artisteer.com/Artisteer.4.0.0.58475.exe" title="Artisteer.4.0.0.58475"><i>disini</i></a>. Sementara Cracknya bisa didownload <i><a href="http://hostingbulk.com/pa5a9b84zj8l.html" rel="nofollow" target="_blank">disini</a></i> atau <i><a href="http://www.4shared.com/get/iB_S7Nkm/Artisteer40058475_Crack.html" rel="nofollow" target="_blank">disana</a></i>. Password zip untuk cracknya : ngalor ngidul<br />
<br />
<br />
Perlu diketahui juga bahwa <b><i><a href="http://realfa84.blogspot.com/2013/03/template-offline-generator-artisteer-4.html">Template offline Generator - Artisteer 4 Full Free</a></i></b>. ini fiturnya sangat terbatas. Selain Template Generator offline, ada juga situs-situs untuk membuat template secara online. Anda bisa membaca dan mengunjungi dan mengetahui situs-situsnya di postingan <b><i>Tempat-tempat untuk membuat template blog - Template Generator Online</i></b><br />
<br />
Buat anda yang mengalami kesulitan untuk mendapatkan template sesuai harapan anda, anda bisa menggunakan jasa kami untuk merealisasikan template impian anda.<br />
Anda bisa menghubungi kami melalui menu <a href="http://realfa84.blogspot.com/2011/01/jasa-design-blogger-template.html" target="_blank">JASA DAN LAYANAN KAMI</a> yang ada di menu atas blog ini.<br />
</div>
</div>

designe Generator Template Template offline Generator - Artisteer 4 Full Free

Setiap blogger yang benar-benar serius menjalani profesinya sebagai blogger pasti sangat memperhatikan tampilan dari blog atau website ya...

Baca selengkapnya »

Cara Menambahkan gambar Default pada Popular Post

Senin, Juli 16, 2012 Kelulut Klanceng 3

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8aUcDQmVwOb0dmFAKvW-de91rgp3hm9EP5KaE5641IPH9R7g9X4edxsV5PLaSfG0f1BToVGtg3l6sRDhNotAvKSyYia0vS2JuwdEZNQN1S_PgKsLLmKXdNgbLUg6Q3UBB7GkOZMv3fKQ/s1600/no-photo+100.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8aUcDQmVwOb0dmFAKvW-de91rgp3hm9EP5KaE5641IPH9R7g9X4edxsV5PLaSfG0f1BToVGtg3l6sRDhNotAvKSyYia0vS2JuwdEZNQN1S_PgKsLLmKXdNgbLUg6Q3UBB7GkOZMv3fKQ/s320/no-photo+100.png" width="270" /></a></div><div style="text-align: justify;">Dalam postingan terdahulu, yaitu Cara membuat Popular Post dengan Thumbnail Horizontal, Admin ngalor ngidul pernah membahas tentang thumbnail default popular post ini. Dimana setiap postingan yang tidak memiliki gambar akan terlihat kosong. Dan tentu saja itu sangat tidak nyaman dilihat. Apalagi jika kita menerapkan fitur popular post ini tanpa deskripsi.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Oleh sebab itu ada baiknya jika kita sedikit memodifikasi kode widget bawaan dari blogger tersebut </div><div style="text-align: justify;">agar ketika suatu postingan yang tidak memiliki gambar menjadi postingan populer, maka secara otomatis akan terlihat tetap memilik gambar.</div><br />
Ok..<br />
Langsung saja ke Cara Menambahkan gambar Default pada Popular Post.<br />
1. Seperti biasa, login ke dashboard blogger kemudian pilih design => Edit HTML.<br />
2. Centang Expand Widget Template.<br />
3. Cari kode:<br />
<blockquote class="tr_bq"><i><b:widget id='PopularPosts1' locked='false' Posts' title='Popular type='PopularPosts'/></i></blockquote>4. Ganti semua kode kebawahnya sampai kode <i><span style="color: red;"></b:widget></span></i> pertama yang anda temukan dengan kode dibawah ini:<br />
<blockquote class="tr_bq"><span style="background-color: white; color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-align: -webkit-auto;"> </span><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;"><b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'></span></span><br />
<div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;"><b:includable id='main'></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">  <b:if cond='data:title'><h2><data:title/></h2></b:if></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">  <div class='widget-content popular-posts'></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">    <ul></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">      <b:loop values='data:posts' var='post'></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">      <li></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">        <b:if cond='data:showThumbnails == "false"'></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">          <b:if cond='data:showSnippets == "false"'></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">            </span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">            <a expr:href='data:post.href'><data:post.title/></a></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">          <b:else/></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">            </span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">            <div class='item-snippet'><data:post.snippet/></div></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">          </b:if></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">        <b:else/></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">          <b:if cond='data:showSnippets == "false"'></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">            </span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">            <div class='item-thumbnail-only'></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">              </span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">                <div class='item-thumbnail'></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">   <a expr:href='data:post.href' expr:title='data:post.title'></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">    <b:if cond='data:post.thumbnail'></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">       <b:else/></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">        <img alt='' border='0' expr:height='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfRZgf5L-yzih9ouuUi7RY8UuHunSbbaOJ3L1Fegu_eI1ZfFWSF6XZAIPYblQnIwBS8MEJ04Ey2rrUdNmEjYfYr1m77eVVUHP9OjY3X_E4_CCs7eYintcg8Ef0IGy197SomEtVEJqhtjU/s72-c/default.png' expr:width='data:thumbnailSize'/></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">       </b:if></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">                  </a></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">                </div>         </span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">             </div></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">            <b:else/></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">            </span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">            <div class='item-content'></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">                <div class='item-thumbnail'></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">   <a expr:href='data:post.href' expr:title='data:post.title'></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">    <b:if cond='data:post.thumbnail'></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">       <b:else/></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">        <img alt='' border='0' expr:height='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfRZgf5L-yzih9ouuUi7RY8UuHunSbbaOJ3L1Fegu_eI1ZfFWSF6XZAIPYblQnIwBS8MEJ04Ey2rrUdNmEjYfYr1m77eVVUHP9OjY3X_E4_CCs7eYintcg8Ef0IGy197SomEtVEJqhtjU/s72-c/default.png' expr:width='data:thumbnailSize'/></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">       </b:if></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">                  </a></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">                </div>       </span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">              <div class='item-snippet'><data:post.snippet/></div></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">            </div></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">            <div style='clear: both;'/></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">          </b:if></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">        </b:if></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">      </li></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">      </b:loop></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">    </ul></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">    <b:include name='quickedit'/></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">  </div></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;"></b:includable></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;"></b:widget></span></span></div></blockquote><br />
*** Ganti kode warna merah tersebut dengan url gambar anda sendiri.<br />
5. Save Template.<br />
<br />
Untuk menemukan kode tersebut, pastikan widget popular post telah dipasang diblog anda.<br />
Semoga berhasil..!!!</div>

Blogging designe Tips n Trik Cara Menambahkan gambar Default pada Popular Post

Dalam postingan terdahulu, yaitu Cara membuat Popular Post dengan Thumbnail Horizontal, Admin ngalor ngidul pernah membahas tentang thumbna...

Baca selengkapnya »

Cara Menampilkan Page Number di Halaman Kategori Post

Minggu, Juni 24, 2012 Kelulut Klanceng 5

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7TtILFbck-YIq48voW6ZCMqr6Jl3PPuY0nzMDqor2r_tigxnxusPPJeMpxInplwvsErjVvClzIrjKwI0wBjIKAF6ROSpHOmyk6TKZXOUHp9jq9EGKB1Oqxt5eFAX9HxvFUUsGQu6D73c/s1600/tidak+nongol.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara Menampilkan Page Number di Halaman Kategori Post" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7TtILFbck-YIq48voW6ZCMqr6Jl3PPuY0nzMDqor2r_tigxnxusPPJeMpxInplwvsErjVvClzIrjKwI0wBjIKAF6ROSpHOmyk6TKZXOUHp9jq9EGKB1Oqxt5eFAX9HxvFUUsGQu6D73c/s320/tidak+nongol.PNG" title="Cara Menampilkan Page Number di Halaman Kategori Post" width="318" /></a></div><div style="text-align: justify;">Assalamualaikum. Wr. Wb.</div><div style="text-align: justify;">Pada postingan kali ini admin ngalor ngidul ingin share satu trik yang mungkin agak langka dan tidak terlalu diperhatikan oleh rekan-rekan blogger semua. Yaitu <strong>Cara Menampilkan Page Number di Halaman Kategori Post</strong>. Diblog ngalor sendiri tidak menyediakan tutorial untuk pemasangan page number ini karena sudah terlalu banyak blog tutorial yang membahasnya.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Jika anda perhatikan, jarang sekali blog yang telah dipasang page number ini juga memunculkan pagenumber di halaman kategori atau label post. Termasuk saya sendiri. Namun hal ini jadi perhatian saya ketika ada salah satu pelanggan design template di ngalor ngidul yang request page number hanya muncul di halaman kategory post. Karena kurangnya ilmu akhirnya admin mengatakan jika hal itu sepertinya "TIDAK MUNGKIN" untuk dilakukan karena sudah coba otak atik script dan lain sebagainya, tetap juga tidak berhasil. Bahkan sampai saat orderan sudah diambil.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Karena tetap merasa penasaran, saya tetap mencari cara agar Page Number tersebut bisa muncul dihalaman kategori atau label post. Dan akhirnya berhasil menemukan sedikit trik yang mungkin bisa membantu.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Seperti diketahui bersama, hampir rata-rata format URL yang mengarah kehalaman label atau kategori post pasti seperti di bawah ini</div><blockquote class="tr_bq">http://..../search/label/<b>NAMA-LABEL</b></blockquote>atau<br />
<blockquote class="tr_bq"> http://..../search/label/<b>NAMA-LABEL</b>?max-results=<b><span style="color: blue;">10</span></b></blockquote><div style="text-align: justify;">Hal ini memang sudah menjadi URL standard dari blogger sendiri. Namun ternyata dengan menggunakan URL standard tersebut, bisa dipastikan pagenumber yang telah kita pasang tidak akan langsung muncul di halaman kategory pertama. Page Number baru akan muncul jika pengunjung mengklik halaman selanjutnya atau newer post/older post.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Lalu bagaimana cara agar pagenumber tersebut bisa langsung muncul?</div><div style="text-align: justify;">Jawabannya sangat sederhana. Yaitu dengan dengan sedikit memodifikasi URL tersebut. Kita hanya perlu menambahkan kode <span style="color: #cc0000; font-weight: bold;">?updated</span> dan/atau  <span style="color: red; font-weight: bold;">&amp;</span>.</div><br />
Untuk cara penggunaan dan menambahkannya adalah sebagai berikut.<br />
<br />
<b><u>A. Pada bagian Menu navigasi blog</u></b><br />
<br />
1. Pada kode URL pertama, format URL adalah seperti ini:<br />
<blockquote class="tr_bq">http://..../search/label/<b>NAMA-LABEL</b></blockquote>Rubah kode URL menjadi<br />
<blockquote class="tr_bq">http://..../search/label/<b>NAMA-LABEL<span style="color: #cc0000;">?</span></b><b><span style="color: #cc0000;">updated</span></b></blockquote><br />
2. Sedangkan kode URL kedua<br />
<blockquote class="tr_bq">http://..../search/label/<b>NAMA-LABEL</b>?max-results=<b><span style="color: blue;">10</span></b></blockquote>Rubah menjadi<br />
<blockquote class="tr_bq">http://..../search/label/<b>NAMA-LABEL</b><b><span style="color: #cc0000;">?</span></b><span style="color: red; font-weight: bold; text-align: justify;">&amp;</span>max-results=<b><span style="color: blue;">10</span></b></blockquote><br />
*** angka 10 adalah jumlah yang akan tampil dihalaman pertama.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuZ6qo-MtpP-ACBCFtQCxm9be4KUPG1tbwwPGQ6A9Fvd1wwn-EneeCwG_XbkOe5Gsdi03hyphenhyphengR7AzZyk69DCSH6daj3cdvoaPIsrlvaiECenWFBLFyHGN3SH-DXNp0s5XVfXvYifXB8RNM/s1600/nongol.PNG" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="Cara Menampilkan Page Number di Halaman Kategori Post" border="0" height="315" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuZ6qo-MtpP-ACBCFtQCxm9be4KUPG1tbwwPGQ6A9Fvd1wwn-EneeCwG_XbkOe5Gsdi03hyphenhyphengR7AzZyk69DCSH6daj3cdvoaPIsrlvaiECenWFBLFyHGN3SH-DXNp0s5XVfXvYifXB8RNM/s320/nongol.PNG" title="Cara Menampilkan Page Number di Halaman Kategori Post" width="320" /></a></div><b><u>B. Link Label Standard/Kategori bawaan blogger</u></b><br />
<div style="text-align: justify;">Setelah mengganti URL pada menu utama, masih ada satu lagi yang harus kita lakukan agar semua link yang menuju kehalaman kategori bisa memilik fungsi yang sama.</div><br />
1. Masuk ke dashboard => Design => Edit html. Centang Expand Widget Templates.<br />
2. Cari kode <br />
<blockquote class="tr_bq">'data:label.url'</blockquote>3. Ganti semua kode yang ditemukan dengan kode<br />
<blockquote class="tr_bq">'data:label.url + &quot;?<span style="text-align: justify;">&amp;</span>max-results=10&quot;'</blockquote>4. Save template dan lihat Hasilnya.<br />
<br />
Semoga Bermanfaat..!!!</div>

Blogging designe Tips n Trik Cara Menampilkan Page Number di Halaman Kategori Post

Assalamualaikum. Wr. Wb. Pada postingan kali ini admin ngalor ngidul ingin share satu trik yang mungkin agak langka dan tidak terlalu diperh...

Baca selengkapnya »

Cara membuat Popular Post dengan Thumbnail Bentuk Grid/Gallery

Sabtu, Juni 16, 2012 Kelulut Klanceng 21

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzz1ASQmJ4Uc8uZ9U3PpW4G5VnjIxuglmP19M2EBby8JdOK7_CzAbBhA1jhTIORnXb4EJs_hdcBSuKXRB8j1BSDtOSSaa_7lmYM4y-hGVKzohxzH9Y2tYnBCAnkzDhniJOrMfP3ouGeus/s1600/pop+sc.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara membuat Popular Post dengan Thumbnail Bentuk Grid/Gallery" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzz1ASQmJ4Uc8uZ9U3PpW4G5VnjIxuglmP19M2EBby8JdOK7_CzAbBhA1jhTIORnXb4EJs_hdcBSuKXRB8j1BSDtOSSaa_7lmYM4y-hGVKzohxzH9Y2tYnBCAnkzDhniJOrMfP3ouGeus/s320/pop+sc.PNG" title="Cara membuat Popular Post dengan Thumbnail Bentuk Grid/Gallery" width="313" /></a></div><div style="text-align: justify;">Setelah sebelumnya pernah membahas <i><a href="http://realfa84.blogspot.com/2012/01/cara-membuat-popular-post-dengan.html" target="_blank">Cara membuat Popular Post dengan Thumbnail Horizontal</a>, </i>kali ini kita akan mencoba memodifikasi Popular Post dengan Thumbnail Bentuk Grid atau Gallery. Keuntungan dari cara ini adalah kita bisa sedikit menghemat space atau ruang di blog.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Sistem atau <strong>Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery</strong> ini sebenarnya sama saja dengan dengan <i><a href="http://realfa84.blogspot.com/2012/01/cara-membuat-popular-post-dengan.html" target="_blank">Cara membuat Popular Post dengan Thumbnail Horizontal</a>. </i>Hanya saja pemasangannya tetap di sidebar. Atau bisa juga di footer yang telah di bagi menjadi 2 atau 3 kolom.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Pada tutorial ini admin menggunakan sidebar dengan lebar 300px. Jika anda memiliki lebar sidebar yang berbeda, mungkin anda harus melakukan sedikit perubahan agar lebih serasi dengan template.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Berikut ini adalah Langkah-langkah untuk <strong>Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery</strong>:</div>1. Seperti biasa masuk kedashboard => Design => Edit Html.<br />
2. Cari kode ]]</b:skin><br />
3. Letakkan kode CSS dibawah ini di atasnya.<br />
<blockquote class="tr_bq">.sidebar .popular-posts ul li img:hover, .cross2 ul li img:hover {-moz-transform:scale(1.1) rotate(-0deg); -webkit-transform:scale(1.1) rotate(-0deg); -o-transform:scale(1.1) rotate(-0deg); -ms-transform:scale(1.1) rotate(-0deg); transform:scale(1.1) rotate(-0deg);filter:alpha(opacity=100);opacity:1;border-radius: 50%;}<br />
.sidebar .popular-posts ul{margin:0;padding:2px;}<br />
.PopularPosts .widget-content ul li {padding: .1em 0;}<br />
.sidebar .popular-posts ul li {margin: 0 3px;background:none;float:left;width:91px;list-style-type:none;border:none;line-height:0px;}<br />
.sidebar .popular-posts ul li img {-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; transition:all 0.5s ease;width: 85px;height: 85px;opacity: 0.7;opacity:0.7;filter:alpha(opacity=70);background:#444; border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666;padding:4px;}<br />
.PopularPosts .item-thumbnail {margin: 0;}<br />
.sidebar .PopularPosts .item-title {display: none;}</blockquote>4. Save template.<br />
5. Kembali ke Dashboard => Design => Add Element.<br />
6. Pasang popular post bawaan blogger dibagian sidebar. Bagi yang telah memasangnya, settingan yang "harus" dilakukan adalah seperti gambar dibawah ini.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwFQoUdhHP1h9RZZmExCwCkaQpI1DNybJ-2KzENUKgpl8M82kl__4Iadvyppk6oHeO_age5HAA7JUb8uVKzrsGbBbGTO6p810Nx7T-hlCI4bLNZnJLRVNbX_8TzgcK99KirnaDTsvM2-c/s1600/popular+setting.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwFQoUdhHP1h9RZZmExCwCkaQpI1DNybJ-2KzENUKgpl8M82kl__4Iadvyppk6oHeO_age5HAA7JUb8uVKzrsGbBbGTO6p810Nx7T-hlCI4bLNZnJLRVNbX_8TzgcK99KirnaDTsvM2-c/s1600/popular+setting.PNG" title="Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery" /></a></div><blockquote class="tr_bq">1. Hilangkan ceklist pada snippet.<br />
2. Atur jumlah postingan tampil menjadi 3, 6 atau 9.</blockquote></div>

CSS Dasar designe Menengah Tips n Trik Tutorial Widget Cara membuat Popular Post dengan Thumbnail Bentuk Grid/Gallery

Setelah sebelumnya pernah membahas Cara membuat Popular Post dengan Thumbnail Horizontal , kali ini kita akan mencoba memodifikasi Popular P...

Baca selengkapnya »

Cara Paling Cepat Memasang Facebook komentar di blogspot

Jumat, Juni 15, 2012 Kelulut Klanceng 12

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQjFBxrz6DAf2OAKghbg2Vn5qbCe-OVqt-m9tnS_TwdrWEEeh0-YnfdIAR1HMEpqGIZFQ8K0gPUFNonyEqrKvxXBvtr6K1pESvsAAxOZkC4l6r8nWDIFyLXGcudyrO-vfkYBYlrC7utb4/s1600/facebook+coment.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQjFBxrz6DAf2OAKghbg2Vn5qbCe-OVqt-m9tnS_TwdrWEEeh0-YnfdIAR1HMEpqGIZFQ8K0gPUFNonyEqrKvxXBvtr6K1pESvsAAxOZkC4l6r8nWDIFyLXGcudyrO-vfkYBYlrC7utb4/s1600/facebook+coment.PNG" /></a></div><br />
<br />
Hari demi hari perkembangan fitur diblogspot semakin mudah untuk di otak-atik. Beraneka ragam fitur tersebut di buat selain untuk mempercantik tampilan blog, sebagian juga memang mempunyai fungsi tertentu agar pengunjung yang hadir tidak hilang begitu saja.<br />
<br />
Salah satu fitur blogger yang semakin hari semakin berkurang adalah komentar-komentar dari pengunjung. Hal ini disebabkan orang lebih  suka berkomentar di situs-situs jejaring social seperti facebook. <br />
<br />
Nah, untuk mengatasi hal ini kita bisa menggunakan fitur komentar facebook dengan memasang widgetnya di blog kita. Cara pemasangannya sangatlah gampang. Kita cukup mengikuti langkah-langkahnya seperti dibawah ini.<br />
<br />
1. Masuk ke DASHBOARD => DESIGN => EDIT HTML. Kemudian centang Expand Widget Templates.<br />
2. Cari kode <i><span style="color: blue;"><b:includable id='status-message'></span></i><br />
3. Jika anda perhatikan, tepat diatasnya kita akan menemukan kode <i><span style="color: red;"></b:includable></span></i> tepat di atasnya.<br />
4. Copas kode dibawah ini dan letakkan di atas kode <i><span style="color: red;"></b:includable></span></i> tadi.<br />
<blockquote class="tr_bq"><b:if cond='data:blog.pageType == &quot;item&quot;'> <br />
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:comments expr:href='data:post.url' num_posts='12' width='610'/> <br />
</b:if></blockquote>5. Simpan Template dan buka salah satu postingan di blog anda.<br />
<br />
Semoga Bermanfaat..!!!</div>

Blogging designe Tips n Trik Widget Cara Paling Cepat Memasang Facebook komentar di blogspot

Hari demi hari perkembangan fitur diblogspot semakin mudah untuk di otak-atik. Beraneka ragam fitur tersebut di buat selain untuk memperca...

Baca selengkapnya »

Sript Random post With thumbnail + Title + Comment + Post Time

Minggu, Juni 10, 2012 Kelulut Klanceng 4

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2GMNJcLh4bbq3ce0PhgwpVE4MNf4EZ5t_qud-4f7HSNgEbQl0kTpqrq4vEnPhC8NjBupPMQRhTQ40fmdgqGthNyz8exgAoOAJhFS-qVvSeLFimf-YRRC9vCMi0lUah32EwIQNLUHqp0o/s1600/rdp.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2GMNJcLh4bbq3ce0PhgwpVE4MNf4EZ5t_qud-4f7HSNgEbQl0kTpqrq4vEnPhC8NjBupPMQRhTQ40fmdgqGthNyz8exgAoOAJhFS-qVvSeLFimf-YRRC9vCMi0lUah32EwIQNLUHqp0o/s320/rdp.PNG" width="229" /></a><br />
Beberapa hari yang lalu, saya sudah sharen script random post with thumnail only. Pada kesempatan kali ini, Admin ngalor ngidul kembali ingin share script random post. Tapi script random post kali ini bukan hanya bisa menampilkan gambar saja. Tapi sekaligus bisa menampilkan gambar atau thumbnail, judul artikel, komentar dan juga hari penulisan postingan.<br />
<br />
Seperti yang di ketahui bersama, script ini sangat berguna bagi anda yang tidak ingin memasang banyak fitur di blog anda. Karena dengan memasang satu script ini saja sudah bisa menampilkan beragam postingan terdahulu. Dimana Script ini nantinya akan menampilkan daftar posting yang berbeda setiap kali halaman di refresh.</div><br />
Tanpa banyak basa-basi langsung saja copas scriptnya dibawah ini.<br />
<br />
<pre class="javascript" name="code"><script type="text/javaScript">
var rdp_numposts=7;
var rdp_snippet_length=60;
var rdp_info='yes';
var rdp_comment='Comment';
var rdp_disable='';
var rdp_current=[];
var rdp_total_posts=0;
var rdp_current=new Array(rdp_numposts);
function totalposts(json){
rdp_total_posts=json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');
function getvalue(){
for(var i=0;i<rdp_numposts;i++){
var found=false;
var rndValue=get_random();
for(var j=0;j<rdp_current.length;j++){
if(rdp_current[j]==rndValue){
found=true;break
}
};

if(found){i--}
else{
rdp_current[i]=rndValue
}
}
};
function get_random(){
var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));
return ranNum
};
</script>

if
(rdp_get_snippet.length<rdp_snippet_length){
var rdp_snippet=rdp_get_snippet
}
else{
rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);
var space=rdp_get_snippet.lastIndexOf(" ");
rdp_snippet=rdp_get_snippet.substring(0,space)+"…";};

for(var j=0;j<entry.link.length;j++){

if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment
}

else{
rdp_commentsNum=rdp_disable
};

if(entry.link[j].rel=='alternate'){
var rdp_posturl=entry.link[j].href;if(y!=-1){
rdp_posturl=rdp_posturl+'?m=0'
}

var rdp_postdate=entry.published.$t;
if('media$thumbnail'in entry){
var rdp_thumb=entry.media$thumbnail.url
}
else{
rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPVXJKIl3DRjRdDXMaNaInPm18JAn2MM498HfjPkCCn1YbEcpe6dOAkzvmL5pdgLUM9j6fvtZWOpVijmzKPGqxcB52JnZBRZNzcrmqwIuEizatpXdJuBGOXoA_sLfwWMx2_znzjHsVvPq8/"
}
}
};

document.write('
<li>');
document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');
document.write('<div>
<a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');

if(rdp_info=='yes'){
document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'
}
document.write('<div style="clear:both">
</div></li>
')
}};
getvalue();
for(var i=0;i<rdp_numposts;i++){
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')
};
</script>
</pre><br />
*** Sebagai tambahan saja agar terlihat lebih cantik, anda bisa menambahkan CSS sesuai selera. Sebagai contoh mungkin bisa menggunakan contohnya dibawah ini.<br />
<br />
<blockquote class="tr_bq"><style><br />
#random-posts-area {width:100%;}<br />
#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}<br />
#random-posts li {list-style:none;background: none;<br />
padding: 0;}<br />
#random-posts ul {padding:0; margin:0;}<br />
#random-posts span {clear:both;}<br />
</style></blockquote><br />
Lalu untuk cara penggunaannya bisa langsung kemenu design =>add gadget =>HTML/javascript.<br />
<blockquote class="tr_bq"><span style="color: #cc0000;">Letakkan kode CSS disini..</span><br />
<div class="random-posts-area"><br />
<ul id="random-posts"><br />
<span style="color: #cc0000;">Letakkan Script Diatas disini... </span><br />
</ul><br />
</div></blockquote><br />
</div>

Blogging designe Javascript Menengah Widget Sript Random post With thumbnail + Title + Comment + Post Time

Beberapa hari yang lalu, saya sudah sharen script random post with thumnail only. Pada kesempatan kali ini, Admin ngalor ngidul kembali ing...

Baca selengkapnya »

Script Random Post Thumbnail Only - By Label

Selasa, Juni 05, 2012 Kelulut Klanceng 8

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvVQcCIRiPpzua5mFXClh7WT8e2Ox2pIFzjKoQzkX4XId2Ymf7lm_Y0vcacw4fKWz7zVqqFOeMcwPhu-ZFdVI-rG04E3PSwPJ0WTNSlWq_pgAsfSi69KjQ_4sHie6rKM_73TAleqhVdKY/s1600/random.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="233" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvVQcCIRiPpzua5mFXClh7WT8e2Ox2pIFzjKoQzkX4XId2Ymf7lm_Y0vcacw4fKWz7zVqqFOeMcwPhu-ZFdVI-rG04E3PSwPJ0WTNSlWq_pgAsfSi69KjQ_4sHie6rKM_73TAleqhVdKY/s320/random.PNG" width="320" /></a></div>Sekian lama gak update postingan di blog ngalor ngidul, kangen juga pengen update lagi. Tapi benar-benar bingung mau posting apa. Mau bikin tutorial, tapi hampir semua bahasan sudah begitu banyak yang membahas. Mau buat tutotrial juga malu karena sudah banyak yang lebih jago. Bahkan pernah di bilang klo postingan ngalor ngidul itu tidak bermutu. ^_^<br />
<br />
Tapi gak apa-apa deh..!! Namanya juga baru belajar. Dan setahu saya walaupun untuk sebagian orang ilmu yang saya share adalah sampah, tapi saya juga tetap percaya itu bisa jadi sebongkah emas buat sebagian orang yang masih "BODOH" seperti saya.<br />
<br />
Oke..!!<br />
Pada bahasan kali ini, kita kembali akan sedikit membahas tentang script yang berfungsi untuk menampilkan postingan-postingan terdahulu. Script yang ingin saya share kali ini adalah Script Random Post. Script ini pernah saya bahas di postingan sebelumnya yaitu <i><a href="http://realfa84.blogspot.com/2012/02/script-random-post-with-thumbnail.html" target="_blank">Script Random Post with Thumbnail</a>. </i>Sebenarnya script ini lebih cocok diberi nama <strong><i>Script Random Post Thumbnail Only</i></strong>. Karena memang script ini hanya bisa menampilkan gambar atau thumbnail postingan. `<br />
<br />
Namun sebenarnya fungsi dari script ini tidak hanya sebatas menampilkan postingan secara acak berdasarkan URL utama saja. Tapi script ini juga bisa digunakan untuk menampilkan postingan secara acak dan di shortir berdasarkan label-labet tertentu dari suatu blog. Artinya kita juga bisa menampilkan posting-posting dari blog kita yang lain.<br />
Untuk caranya juga sangat gampang.<br />
<br />
1. Pertama kali seperti biasa masuk ke Dashboard => Design=> Edit HTML.<br />
2. Cari kode <span style="color: purple;"><i></head></i></span><br />
a. Update:<br />
Kode script internal<br />
<pre class="javascript" name="code"><script type="text/javascript">
//<![CDATA[
var showpostthumbnails_gal = true;
 var showpostsummary_gal    = false;
 var random_posts      = false;
function showrecentpostswiththumbs(json) {
 document.write('<div id="featured" class="clearfix grid_12">
<ul>'); 
 for (var i = 0; i < numposts_gal; i++) {
  if (random_posts == true){
  var random_int  = Math.floor(Math.random()*json.feed.entry.length);
  var entry_gal = json.feed.entry[random_int];
  }
  else{
  var entry_gal = json.feed.entry[i];
  }
  var posttitle_gal = entry_gal.title.$t;
  var posturl_gal;if (i == json.feed.entry.length) break;
  for (var k = 0; k < entry_gal.link.length;k++){
   if (entry_gal.link[k].rel == 'alternate') {
    posturl_gal = entry_gal.link[k].href;break;
   }
  }
  if("content"in entry_gal){
   var postcontent_gal=entry_gal.content.$t;
  }

s = postcontent_gal;
            a = s.indexOf("<img");
            b = s.indexOf("src=\"", a);
            c = s.indexOf("\"", b + 5);
            d = s.substr(b + 5, c - b - 5);
            if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
                var thumburl_gal = d;
            } else var thumburl_gal = 'http://i1133.photobucket.com/albums/m596/abu-farhan/Images_no_image.gif';

document.write('<li> <a href="'+ posturl_gal + '"><img src="'+thumburl_gal+'" alt="" title="'+posttitle_gal+'" />');

}
//]]>
</script>
</pre><br />
b. Update :<br />
Kode script eksternal<br />
<pre class="javascript" name="code"><script src="http://sliderpostbylabel.googlecode.com/files/gallerypostswithimgonly.js">
</script>
</pre><br />
<br />
3. Copas salah satu kode di atas kemudian letakkan diatasnya .<br />
4. Kemudian ke Dashboard => Design=> Add Element => HTML/Javascript.<br />
5. Masukkan juga kode dibawah ini kedalamnya.<br />
<blockquote class="tr_bq"><script><br />
var numposts_gal = 1;<br />
var random_posts = <b><span style="color: red;">true;</span></b><br />
</script><br />
<script src="<b><i><span style="color: blue;">http://realfa84.blogspot.com</span></i></b>/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts"><br />
</script></blockquote>6. Ganti kode warna BIRU dengan URL Blog yang ingin anda tampilkan dan simpan.<br />
<br />
Sekarang adalah cara-cara extra.<br />
1. Ganti kode warna merah dengan FALSE jika anda hanya ingin menjadikannya Recent Post With Thumbnail only.<br />
2. Jika ingin menampilkannya sesuai label tertentu ada bisa mengeditnya menjadi seperti ini.<br />
<blockquote class="tr_bq"><script><br />
var numposts_gal = 1;<br />
var random_posts = <b><span style="color: red;">false;</span></b><br />
</script><br />
<script src="<b><i><span style="color: blue;">http://realfa84.blogspot.com</span></i></b>/feeds/posts/default/-/<b><i><span style="color: purple;">LabelPost</span></i></b>?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts"><br />
</script></blockquote><div style="text-align: justify;"><br />
Jangan lupa mengganti kode-kode yang saya tandai dengan warna tertentu sesuai kebutuhan. Ganti LabelPost (kode warna ungu) Dengan Label yang ingin ditampilkan. Jika label tersebut menggunakan spasi, maka ganti kode spasi dengan <b><span style="color: #3d85c6;">%20.</span></b></div>Contoh Label = Belajar Blog maka untuk penulisannya harus dengan format seperti ini:<br />
<br />
<br />
<div id="CSS-area1"><div id="CSS-area"><div style="text-align: center;"><script src="<b><span style="color: blue;">http://URL-BLOG-ANDA</span></b>/feeds/posts/default/-/<b><span style="color: #660000;">Belajar</span><u><span style="color: #3d85c6;">%20</span></u><span style="color: #660000;">Blog</span></b>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></div></div></div></div><br />
<b>Update :</b><br />
Jika Cara di atas di anggap terlalu repot, Pemasangan kode script pertama juga bisa dilakukan dengan cara meletakkannya di atas kode script yang ke dua. Yaitu diatas kode no 5.</div>

Blogging designe Javascript Menengah Tingkat Lanjut Script Random Post Thumbnail Only - By Label

Sekian lama gak update postingan di blog ngalor ngidul, kangen juga pengen update lagi. Tapi benar-benar bingung mau posting apa. Mau bikin ...

Baca selengkapnya »