Membuat Artikel Terkait Dengan Animasi Gambar Bergerak

Berikut langkah Membuat Artikel Terkait Dengan Animasi Gambar Bergerak
1. Login ke Blogger.
2. Pilih Templates 
3. Klik Edit HTML
4. Backup dulu template untuk jaga-jaga kalau ada yang salah 
5. Beri tanda centang pada kotak kecil dekat Expand Template Widget
6. Gunakan F3 untuk mencari kode </head>
7. Kalau sudah dapat lalu letakkan kode dibawah ini tepat diatas kode </head>
 <!--Related Posts mari-berbagi244.blogspot.com Styles Start-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    #related-posts {
    float:center;
    text-transform:none;
    height:100%;
    min-height:100%;
    padding-top:5px;
    padding-left:5px;
    }
    #related-posts h2{
    font-size: 1.6em;
    font-weight: bold;
    color: #ff6565;
    font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
    margin-bottom: 0.75em;
    margin-top: 0em;
    padding-top: 0em;
    }
    #related-posts a{
    color:#ff6565;
    }
    #related-posts a:hover{
    color:#ff6565;
    }
    #related-posts a:hover {
    background-color:#eeeeee;
    }
    </style>
    <script src='http://my-project-favicon.googlecode.com/files/relatedposts.js.txt' type='text/javascript'/>
    </b:if>
    <!--Related Posts mari-berbagi244.blogspot.com Styles End-->
 8. Langkah selanjutnya cari kode seperti di bawah ini :
 <div class='post-header-line-1'/>
    </div>
<b:if cond='data:blog.metaDescription == &quot;&quot;'>
      <!-- Then use the post body as the schema.org description,
          for good G+/FB snippeting. -->
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>

 9. Lalu letakkan kode dibawah ini tepat dibawahnya

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Produk Lainnya : </b></h3>
<marquee behavior='alternate' direction='left' height='220' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='auto'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=8;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://chillaolshop.blogspot.com/' style='display:none;'/>
</b:if>
</b:if>


10.  Klik save dan lihat hasilnya

Keterangan :
1. var maxresults=8; merupakan artikel terkait yang akan ditampilkan, silahkan anda ubah
2. Produk Lainnya dapat di rubah sesuai dengan keinginan.
Baca Selengkapnya >>>

Cara menghilangkan tulisan label dibawah postingan,

Cara Menghilangkan Tulisan "Label" di Bawah Postingan:
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut :

<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>
6. Hapus kode di atas lalu Simpan Template jika sudah selesai.
Baca Selengkapnya >>>

Memberi warna background pada sidebar

Cara Mengganti Warna Background Judul Sidebar Blog

Ikuti langkah-langkah dibawah ini.
  1. Login ke dasbor Blogger.
  2. Pilih pengaturan template dan klik edit html.
  3. Klik cadangkan/pulihkan dan unduh template blog, untuk jaga-jaga. klo terjadi eror kamu bisa mengembalikannya lagi kesemula.
  4. Selanjutnya Klik Edit Html dan Cari kode h2 { . Lengkapnya seperti dibawah ini.
  5. /* Headings
    ----------------------------------------------- */
    h2 {
      font: $(widget.title.font);
      color: $(widget.title.text.color);
    }
  6. Tambahkan kode background:#2288BB; padding:4px 15px 3px;text-transform:none;
  7. Jadi kode lengkapnya seperti ini.
  8. /* Headings
    ----------------------------------------------- */
    h2 {
      font: $(widget.title.font);
      color: $(widget.title.text.color);background:#2288BB;
      padding:4px 15px 3px;text-transform:none;
    }
  9. Ganti kode #2288BB; dengan kode warna yang kamu inginkan. 
  10. Setelah itu coba di Preview / pratinjau template kamu. Jika sudah berubah warna background judul sidebar kamu. Baru di Save.
  11. Jika Belum, Coba dilihat lagi kode warnanya, background:#2288BB; Pastikan Kode ini " ; " ada dibelakang kode warna(tanpa tanda ""), jika kode itu hilang maka warna tidak akan berubah. Selesai.
Jika sidebar kamu ingin diberi lengkungan di setiap sudutnya. Kalian bisa tambahkan kode border-radius: 11px 0px 11px 0px; keterangan kode: border-radius: atas kiri-atas kanan-bawah kiri-bawah kanan. Untuk lebih jelasnya kalian bisa edit di sini http://www.cssportal.com/css3-rounded-corner/.

Cara diatas akan merubah warna judul sidebar widget di bagian kiri-kanan blog, dan juga footer widget dibagian bawah. Jika ingin membuat warna background judul yang berbeda antara sidebar dan footer. Gunakan cara dibawah ini.

Hanya sidebar widget bagian kiri-kanan blog

  1. Cari kode .sidebar .widget h2 { dan tambahkan kode background:#2288BB; padding:4px 2px 2px; dibawahnya. Save Template selesai.
  2. Atau gunakan cara dibawah ini. Cari kode ]]></b:skin> dan tambahkan kode berikut di atas kode ]]></b:skin>
  3. .sidebar .widget h2 {
    background:#2288BB; padding:4px 2px 2px;

Hanya Footer widget bagian bawah blog.

  1. Cari kode .footer-inner .widget h2 { dan tambahkan kode background:#2288BB; padding:4px 2px 2px; dibawahnya. Save Template selesai. 
  2. Atau gunakan cara dibawah ini. Cari kode ]]></b:skin> dan tambahkan kode berikut di atas kode ]]></b:skin>
  3. .footer-inner .widget h2 {
    background:#2288BB; padding:4px 2px 2px;
    }
Setiap template mempunyai perbedaan. Jika tidak menemukan kode-kode diatas. Cobalah untuk mencari kode yang semirip mungkin dengan kode HTML diatas. Semoga Bermanfaat.
Baca Selengkapnya >>>

menampilkan postingan multikolom

Cara membuat postingan multikolom, caranya sangat gampang,
 ikuti langkah-langkah sebagai berikut :
1. Login Ke Blogger
2. Klik Template -> Klik Edit HTML
3. Setelah itu centang "Expand Template Widget"
4. Cari kode ]]></b:skin, atau tekan Ctrl+f untuk memudahkan pencarian
5. Copy kode dibawah ini dan letakkan tepat dibawah kode ]]></b:skin :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post {border: 1px solid #ff7fb2;width:auto;height:auto;margin: 8px 8px 8px 8px;overflow:hidden;float:left;text-align:center;}
</style>
</b:if>
6. Klik Simpan Template, dan lihat hasilnya

7. Jika tombol navigasi masih berada di sebelah kanan, maka untuk memindahkan kode navigasi ke sebelah bawah posting, cari kode   <!-- navigation --> dan letakkan kode <div style='clear: both;'/> tepat di   bawahnya  <!-- navigation -->
8. kemudian klik save template
jika hasilnya masih berantakan maka pasang read more dengan mengikuti link berikut http://thamyshare.blogspot.com/2014/07/cara-membuat-read-more-otomatis-di-blog.html



Baca Selengkapnya >>>

Cara menghilangkan tulisan Diberdayakan oleh blogger pada blogspot

Cara menghilangkan tulisan diberdayakan oleh blogger pada blogspot
Caranya cukup gampang, tinggal mengikuti langkah-langkah dibawah ini:
1. Login Ke Blogger
2. Klik Template -> Klik Edit HTML
3. Setelah itu centang "Expand Template Widget"
4. Cari kode ]]></b:skin, atau tekan Ctrl+f untuk memudahkan pencarian
5. Copy kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin :

#Attribution1 {
height:0px;
visibility:hidden;
display:none
}

6. Klik Simpan Template

Baca Selengkapnya >>>

Cara Membuat Read More Otomatis di Blog Dengan Efek Gambar

Auto Read more Artikel dapat di modifikasi sesuai kebutuhan, diuraikan di dalam keterangan.
Berikut langkah-langkah Cara Membuat Auto Read More Otomatis Di Blog. Bagi anda yang sudah memasang read more otomatis yang ada sebelumnya harus dihapus terlebih dahulu.
1. Login Ke Blogger.
2. Klik Template, Backup template untuk jaga2 bila diperlukan,
atau langkah berikut bisa di uji coba menggunakan Blog percobaan yang lain.
3. Klik Edit HTML.
4. Klik Kiri 1 x Dimana saja dalam kotak template.
5. Klik Ctrl+F (Supaya mempercepat pencarian kode),
Dan cari kode berikut </head>
Masukan kode tersebut dalam kotak pencarian, kemudian enter untuk mencari.
6. Masukan Kode berikut diatas </head>

<!--Auto Read More Mulai-->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9;  text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 10px solid #fff;float:left;height:165px;width:280px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:280px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar
summary_noimg = 300; //banyaknya huruf jika tidak ada gambar
summary_img = 250; //banyaknya huruf jika ada gambar
img_thumb_height = 165;
img_thumb_width = 280;
</script>
<script type='text/javascript'>//<![CDATA[
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx =  s.join("");}chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}function createSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = summary_noimg;if(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
//]]></script>
</b:if>
</b:if>

<!--Auto Read More Akhir-->

Perhatian: Cobalah terlebih dahulu tanpa diedit.
Warna Biru untuk mengatur banyaknya kutipan dari artikel.
Warna Merah adalah Pengaturan Lebar dan tinggi gambar

7. Kemudian Cari Kode <data:post.body/>
Kode tersebut diatas jumlahnya biasanya ada 2, Cari yang versi web,
biasanya yang kedua (ke-2) dengan enter 2x pada kotak pencarian.

8. Hapus Kode <data:post.body/> yang ke-2 dan Ganti dengan kode dibawah ini.

<!-- Auto read more Mulai -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
      <div class='read-more'>
      <a expr:href='data:post.url'>Baca Selengkapnya</a>
      </div>
</b:if>
</b:if>
<!-- Auto read more Akhir -->
Warna Merah boleh dihapus boleh tidak, bedakan saja.
"Baca Selengkapnya" juga bisa diganti bebas.

9. Preview terlebih dahulu, kalo bagus ya terus Save Template, dan lihat hasilnya.
Baca Selengkapnya >>>

Cara membuat 1 kolom gadget diatas post

Cara menambahkan kolom gadget di atas pos, untuk membuat tampilan blog lebih menarik yang dapat digunakan untuk memasang accesories atau memasang iklan, caranya sebagai berikut :
  1. Sign in di blogger
  2. Masuk pada halaman Template
  3. klik Edit HTML
  4. Centang tulisan Expand Widget Templates
  5. Cari kode <b:section class='main' id='main' showaddelement='no'> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
  6. Apabila sudah ketemu ganti tulisan showaddelement='no' menjadi showaddelement='yes'
  7. Klik Simpan dan lihat hasilnya di tata letak diatas post
Baca Selengkapnya >>>

Cara menghilangkan tulisan langganan entri atom

 Bagi pengguna blog yang ingin menghapus tulisan " Langganan:(entri atom)" yang berada di bagian bawah blog, Ikuti langkah-langkah seperti dibawah ini.
  1. Login ke blogger.
  2. Dari halaman dasbor, buka Template. Dan Klik edit HTML
  3. Selanjutnya cari kode <div class='feed-links'> . Gunakan Ctrl F untuk memudahkan pencarian. Kode lengkapnya seperti dibawah ini.
  4. <div class='feed-links'>
    <data:feedLinksMsg/>
    <b:loop values='data:links' var='f'>
    <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
    </b:loop>
    </div>
  5. Hapus atau delete semua kode diatas.
  6. Selanjutnya klik preview. Untuk memastikan bahwa tulisan langganan entri atom sudah hilang atau belum. Jika sudah hilang, baru Save. Selesai.
Setelah melakukan cara diatas, maka tampilan blog akan terlihat lebih rapi. Dan juga bisa menambah kecepatan loading blog karena walaupun sedikit tetapi tulisan langganan entri atom masih dihitung bytenya, karena kita membukanya melalui website blogspot yang membutuhkan koneksi internet untuk membukanya.
Baca Selengkapnya >>>

Cara Meletakkan Kotak Pencarian di Tab Menu Laman

Dalam membuat sebuah situs atau blog kotak pencarian sangat dibutuhkan guna memudahkan pencarian dengan lebih mudah dan cepat, disamping untuk memperindah tampilan. kali ini saya akan berbagi cara menambahkan kotak pencarian pada tab menu laman sebagai berikut :
  1. Login ke akun blogger Anda
  2. Pilih menu Template, klik Edit HTML => Edit Template.
  3. setelah itu cari kode <li><a expr:href='data:link.href'><data:link.title/> </a></li> agar lebih mudah cari dengan Ctrl + F, selanjutnya perhatikan kode <b:/loop> beberapa baris dibawahnya.
  4. copy/letakkan kode CSS berikut ini tepat dibawah kode <b:/loop>.
  5. <div class='cse' style='color:#000000;align:right;float:right;margin:5px 3px 2px 3px ;'>
    <form action='/search' id='searchform' method='get' style='display:inline;'>
    <input id='searchbox' maxlength='350' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;search on this site...&quot;;}' onfocus='if (this.value == &quot;search on this site...&quot;) {this.value = &quot;&quot;}' type='text' value='search on this site...'/>
    <input id='searchbutton' type='submit' value='Cari'/>
    </form>
    <script src='http://chillaolshop.blogspot.com' type='text/javascript'/>
    </div>
  6. ganti tulisan http://chillaolshop.blogspot.com warna merah diatas dengan url link anda sendiri
  7. simpan template dan lihat hasilnya
Baca Selengkapnya >>>

Cara menambahkan widget/gadget di atas header

Kali ini Saya akan berbagi ilmu sama teman-teman bagaimana cara menambahkan widget/gadget pada blog sebagai berikut :

1.       MENAMBAHKAN 1 KOLOM GADGET DIATAS HEADER
  1. Masuk pada halaman Template
  2. Klik Edit HTML kemudian Lanjutkan
  3. Cari kode  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  4. Jika sudah ketemu ganti  showaddelement='no' menjadi showaddelement='yes'
  5.  Simpan Template dan lihat hasilnya

1.       MENAMBAHKAN 2 KOLOM GADGET DIATAS HEADER
  1. Masuk pada halaman Template
  2. Klik Edit HTML kemudian Lanjutkan
  3. Pertama-tama cari code  <header>, jika sudah ketemu letakkan code berikut tepat di bawah code <header> 
  4.   <div id='box-kolom-widget'>
    <div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col1' preferred='yes' style='float:left;'/>
    </div>
    <div id='box2' style='width: 50%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/>
    </div><div style='clear:both;'/>
    </div> 
  5. Simpan Template dan lihat hasilnya
untuk tulisan warna merah diatas dapat anda ganti sesuai dengan keinginan. 50% adalah untuk mengatur lebar gadget, sedangkan left adalah mengatur posisi widget dapat anda ganti dengan right atau center.

.       MENAMBAHKAN 3 KOLOM GADGET DIATAS HEADER
  1. Masuk pada halaman Template
  2. Klik Edit HTML kemudian Lanjutkan
  3. Pertama-tama cari code  <header>, jika sudah ketemu letakkan code berikut tepat di bawah code <header> 
  4.   <div id='box-kolom-widget'>
    <div id='box1' style='width: 35%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col1' preferred='yes' style='float:left;'/>
    </div>
    <div id='box2' style='width: 30%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/>
    </div>
    <div id='box3' style='width: 35%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col3' preferred='yes' style='float:left;'/>
     </div>
    <div style='clear:both;'/>
    </div> 
  5. Simpan Template dan lihat hasilnya


Baca Selengkapnya >>>