Cara Membuat Postingan di Blog Tidak Double

div class='post-body entry-content'>

Halo sobat blogger, kali ini saya akan membahas tentang cara membuat postingan di blog tidak double. Mungkin ada sobat blogger yang kesulitan membetulkan blognya yang postingannya menjadi double setelah mengotak-atik templatenya. Ada 2 kemungkinan yang membuat postingan sobat menjadi double dan cara mengatasinya.

 1. Saat mengotak-atik html template sobat, ada kode yang ganda. Saya pernah mengalami postingan double, dan ternyata kesalahannya ada di <data:post.body/>. Bila kode sabat blogger seperti ini <data:post.body/><data:post.body/>. Hapuslah salah satu kode tersebut.

2. Saat memasang template yang baru, tidak menghapus widget yang lama. Sebaiknya saat sobat blogger memasang template yang baru, sobat blogger menghapus widget yang lama. Jika ingin widget tersebut tetap berada di blog sobat, hapus dahulu lalu pasang kembali.

Jika 2 cara dan kemungkinan di atas tidak ada yang pas. Mau tidak mau sobat harus mengganti template sobat menjadi baru, agar postingan sobat tidak menjadi double.

Semoga membantu
Visit my other blogs : www.e-nanra.blogspot.com , www.adsensebox.blogspot.com , www.gohealthful.blogspot.com , www.visitandvacationindonesia.blogspot.com

Membuat Huruf Besar (Drop Cap) Pada Awal Postingan

div class='post-body entry-content'>

Membuat Huruf Besar (Drop Cap) Pada Awal Postingan

Kalau kalian pernah membaca koran pasti sudah pernah melihat Drop Cap. Apakah itu Drop Cap ? Drop Cap adalah huruf yang lebih besar dari huruf yang lainnya, biasanya hanya satu huruf dan ada di awal artikel, pasti tau bagaimana bentuknya. Oke sekarang bagi para sobat blogger yang ingin memasang huruf Drop Cap di awal postingannya dapat mengikuti langkah-langkah berikut.

• Login ke blogger 
• Langsung ke Tata Letak (sekarang Rancangan) -->> Edit HTML
• Cari kode berikut ]]></b:skin>
• Masukkan kode di bawah ini, di atas ]]></b:skin>
  /* kode untuk huruf awal
  ----------------------------------------------- */
  .huruf {
  float:left;
  color:#000;
  line-height:60px;
  padding-right:5px;
  font-family:trebuchet ms,verdana;
  font-size:60px;
  }
• Klik Save Template / Simpan

NB:
Untuk menerapkan drop caps ini perlu kalian perhatikan, setiap posting anda harus menggunakan menu Edit HTML (bukan lewat edit HTML di template anda) Ketikkan kode ini dulu <span class="huruf">HURUF AWAL</span> Kata huruf awal, ganti dengan huruf pertamamu yang akan kamu posting. Misalnya : <span class="huruf">N</span>ama saya

Selamat Mencoba

Visit my other blogs : www.e-nanra.blogspot.com , www.adsensebox.blogspot.com , www.gohealthful.blogspot.com , www.visitandvacationindonesia.blogspot.com

Cara Membuat Widget Random Post Pada Blog

div class='post-body entry-content'>

Cara Membuat Widget Random Post Pada Blog

Widget ranbom post adalah widget yang berfungsi untuk menampilkan title post/ judul postingan secara acak, hampir sama dengan Widget Random Image. Keuntungan memakai widget ini adalah pengunjung blog sobat bisa mengetahui apa saja ini postingan dari blog sobat baik yang lama maupun yang baru, sehingga artikel-artikel sobat yang sudah lama dapat terlihat oleh pengunjung blog sobat.

Jika tertarik untuk memasang widget random post silahkan ikuti tutorial dibawah ini.

• Masuk akun blogger
• Pilih Design atau Rancangan - Tambah Gadget - HTML/javascript
• Kemudian Copy paste script dibawah ini
  

  <script type="text/javascript">
  var randarray = new Array();var l=0;var flag;
  var numofpost=10;function randomposts(json){
  var total = parseInt(json.feed.openSearch$totalResults.$t,10);
  for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
  if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
  for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
  for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
  document.write(item);}}
  }document.write('</ul>');}
  </script>
  <script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&
  callback=randomposts" type="text/javascript"></script>
  <span class="Apple-style-span" style="color: black; font-family: arial, sans-serif; font-size: 10px;"><a href="http://mas-amien.blogspot.com/2011/12/cara-membuat-widget-random-post-atau.html" target="_blank">Cara Membuat Random Post</a></span>

• Klik Simpan

NB : angka 10 yang diberi tanda warna merah, menunjukan jumlah post yang akan muncul dalam widget random post, Sobat Blogger bisa merubahnya sesuai dengan keinginan anda.

Visit my other blogs : www.e-nanra.blogspot.com , www.adsensebox.blogspot.com , www.gohealthful.blogspot.com , www.visitandvacationindonesia.blogspot.com

Cara Membuat Daftar Isi di Blog

div class='post-body entry-content'>

Cara Membuat DaftarIsi di Blog

Kali ini saya akan memberi tahu bagaimana cara memasang daftar isi pada blog. Caranya cukup mudah, hanya menggunakan dua langkah kita dapat memunculkan daftar isi di blog kita. Daftar isi ini dapat membantu para pengunjung blog kita untuk mencari apa yang mereka cari. Langsung saja tutorial cara memasang daftar isi di blog.

LANGKAH PERTAMA

• Masuk ke blogger 
• Klik Layout/Rancangan di dashboard menu
• Klik Edit HTML
• Beri Centang pada Expand Template Widget
• Cari kode dibawah ini.
  

  <b:include data='post' name='post'/>

• Ganti Kode diatas dengan kode dibawah ini.
  

  <b:if cond='data:blog.homepageUrl != data:blog.url'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
  <a expr:href='data:post.url'>
  <div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EDEFF4;color:#012788;'>
  <data:post.title/></div></a>
  <b:else/>
  <b:include data='post' name='post'/>
  </b:if>
  <b:else/>
  <b:include data='post' name='post'/>
  </b:if>

LANGKAH KE DUA

• Masuk ke blogger 
• Klik Layout/Rancangan di dashboard menu
• Pilih Elemen Laman
• Tambah Gadget - Pilih HTML/JavaScript Tambah
• Copy dan Paste kode di bawah ini :
  

  <a href="http://NamaBlogAnda.blogspot.com/search?max-results=200">Daftar isi</a>

NB :

Ganti NamaBlogAnda.blogspot.com dengan alamat blog anda, Ganti results=200 dengan jumlah yang anda inginkan, angka 200 menunjukkan jumlah judul yang akan di tampilkan.

 

Visit my other blogs : www.e-nanra.blogspot.com , www.adsensebox.blogspot.com , www.gohealthful.blogspot.com , www.visitandvacationindonesia.blogspot.com

Cara Membuat Widget Random Image Pada Blogspot

div class='post-body entry-content'>

Cara Membuat Widget Random Image Pada Blogspot

Widget Random Image adalah widget yang berisi beberapa gambar acak, hampir sama seperti Widget Random Post yang menampilkan title post secara acak. Widget ini sangat ringan karena tidak menggunakan gambar berupa flash tetapi .jpeg . Widget ini bisa di jadikan penghias di dalam blog sobat agar terlihat lebih menarik. Jika sobat tertarik untuk mencobanya silahkan copy script berikut.

<p align="center"><script language="JavaScript"><!--
//store the quotations in arrays
images = new Array(3);
images[0] = "<a > <img src='Alamat URL Gambar Anda' ></a>";
images[1] = "<a > <img src='Alamat URL Gambar Anda' ></a>";
images[2] = "<a > <img src='Alamat URL Gambar Anda' ></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
//done
// --></script><br/></p>
<span class="Apple-style-span" style="color: black; font-family: arial, sans-serif; font-size: 10px;"><a href="http://mas-amien.blogspot.com/2011/12/cara-membuat-widget-random-image-pada.html" target="_blank">Random Image</a></span>

Berikut ini cara pemasangannya :

• Masuk ke akun Blogger Sobat
• Masuk menu Design/Rancangan - Page Element/Eleman Laman
• Pilih Tambah gadget - HTML/Javascript
• Copy dan Paste script di atas
• Lalu Klik Save/Simpan

NB:
Bila sobat ingin menambahkan gambar lebih dari 3, sobat bisa merubah array 3 menjadi jumlah gambar yang dinginkan dan isilah Alamat URL Gambar Anda dengan url gambar kalian yang telah diupload sebelumnya, sesuaikan ukuran gambar dengan ruang yang akan dipakai (bila akan disimpan di bagian sidebar sesuaikan ukuran lebar sidebar dengan ukuran gambar yang akan ditampilkan).

Visit my other blogs : www.e-nanra.blogspot.com , www.adsensebox.blogspot.com , www.gohealthful.blogspot.com , www.visitandvacationindonesia.blogspot.com

Cara Menambahkan Author Box/ Paraf di Bawah Postingan

div class='post-body entry-content'>

Cara Menambahkan Author Box/ Paraf di Bawah Postingan

Sudah lama tidak posting di blog ini, karena sibuk ngurusin blog www.adsensebox.blogspot.com sama www.e-nanra.blogspot.com, baru sekarang sempat membuat postingan. Oke, kali ini saya akan memberikan cara bagaimana menambahkan Author Box/ Paraf di bawah postingan. Contohkan kayak dibawah ini.

Langsung saja berikut tutorialnya.

Cara Menambahkan Author Box di Bawah Postingan

• Login ke Blogger.
• Di halaman Dasbor, kita pilih Rancangan.
• Kemudian pilih Edit HTML
• Beri tanda centang pada Expand Template Widget
• Cari kode ]]></b:skin> dan taruh kode berikut di atasnya;
  

  .author-box {
  background: #f0f0f0;
  margin: 20px 0 40px 0;
  padding: 10px;
  overflow: auto;
  color:#888;
  font-family:verdana, sans-serif;
  }
  .author-box p {
  margin: 0;
  padding: 0;
  }
  .author-box a{
  color:#666;
  }
  .author-box img {
  background: #FFFFFF;
  float: left;
  margin: 0 10px 0 0;
  padding: 4px;
  }

• Cari kode <div class='post-footer-line post-footer-line-1'> dan taruh kode berikut ini di bawahnya;
  

  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='author-box'>
  

  <p><img alt='avatar' class='avatar avatar-70 photo' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMSa54Ghbjvfr6F6fN7FReyilg3JADmiUDR90CEpBo_hUnwFPtFY7AevnaMPzpJPZwGlXwK5JxJGn1K106KkAJKcsSEWPDhRJ7Cr-sQDYyRS_Xb61LUJe-j39Ft0x6pzWt76Nwo7TiPAU/' width='70'/><b>Tentang Saya</b><br/>

  Sekilas tentang Profil Anda<br/></p>
  </div>
  </b:if>

• 
  
  Sebelum menyimpan, ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMSa54Ghbjvfr6F6fN7FReyilg3JADmiUDR90CEpBo_hUnwFPtFY7AevnaMPzpJPZwGlXwK5JxJGn1K106KkAJKcsSEWPDhRJ7Cr-sQDYyRS_Xb61LUJe-j39Ft0x6pzWt76Nwo7TiPAU/ dengan URL photo kita, dan tulis sekilas tentang diri kita. Dan juga bisa menganti judul about author. Dan juga mengubah kode css yang disesuaikan dengan tampilan blog kita.
• 
  Simpan jika sudah selesai.

 Visit my other blogs : www.e-nanra.blogspot.com , www.adsensebox.blogspot.com , www.gohealthful.blogspot.com , www.visitandvacationindonesia.blogspot.com

Creating Effects Loading When Opening Page Blog

div class='post-body entry-content'>

The next tutorial is to create the effect of loading when the load / create a blog page. This effect is pretty cool, because while waiting for everything load blog page, then this effect will appear. So that visitors do not become bored. Yes it is ..

For those not aware of this effect, please click on one or link on this blog, then it would appear eek.

How do I create these effects?

A. Go to the mode Template> Edit HTML. Find the code]]> </ b: skin>

2. Put the following code right above the code]]> </ b: skin>

/* EFFECT LOADING */
#page-loader{
position:fixed;
top:0;
left:0;
background-color:#000;
z-index:9999;
text-align:center;
width:100%;
height:100%;
padding-top:200px;
font-size:25px;
color:#fff;
display:none;
}

You can change this CSS code, so it looks more interesting

3. Then find the code </ body>

4. Put the code below just above the code </ body>

<div id='page-loader'>
<span style='font-size:70px;font-weight:bold;'>Loading...</span><br/>
Please wait!<br/>Blog is Loading</div>

For words can be replaced, as needed.

5. Search again </ head>

6. Enter the code below, just above the </ head>

<script type='text/javascript'>
$(function() {
var siteURL = &quot;http://&quot; + top.location.host.toString();
var $internalLinks = $(&quot;a[href^=&#39;&quot;+siteURL+&quot;&#39;], a[href^=&#39;/&#39;], a[href^=&#39;./&#39;], a[href^=&#39;../&#39;], a[href^=&#39;#&#39;]&quot;);
$internalLinks.click(function() {
$(&#39;#page-loader&#39;).fadeIn(1500).delay(6000).fadeOut(1000);
});

// Remove the overlay when clicked to address the problems, especially if the internal link is set to target=&#39;_blank&#39;
$(&#39;#page-loader&#39;).click(function() {
$(this).hide();
});
});
</script>

IMPORTANT!
If you have not installed the JQuery blog, first plug the well. Do I put the following code above the </ head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

ENOUGH JUST ONE FILE jquery

Common mistakes that often occur are installing more than one JQuery. Make sure there is only one JQuery alone! Installing more than one JQuery file will cause the script not running ...!

Source : http://hompimpaalaihumgambreng.blogspot.com
Translate by : www.e-nanra.blogspot.com
Visit my another blog : www.e-nanra.blogspot.com , www.gohealthful.blogspot.com , www.visitandvacationindonesia.blogspot.com