Gudang Enam

"Yang dimaksud 300 kata adalah jumlah seluruh kata dalam posting bukan jumlah kata kunci atau keyword yang ditergetkan."

"Letakkan kata kunci pada kalimat dalam setiap paragraf dan usahakan dalam setiap paragraf menanamkan satu (1) kata kunci"

"Maksudnya,kata kunci yang ditargetkan dalam postingan hendaknya tidak berlebihan dan menyesuaikan jumlah kata dalam posting."

"Ini bertujuan selain meberikan penjelasan juga sebagai teknik seo dalam memperkaya kata kunci / keyword tanpa dianggap sebagai spam."

"Sobat bisa menggunakan kode-kode seperti <em></em>,<strong></strong>,<u></u>,<blockquote></blockquote>,dll"

"Contohnya sobat dapat melihat subtitle postingan ini dengan kalimat diatas yakni, Strategi Menyusun Kata dan Kalimat Untuk Search Engine Optimization"

 

 Tiga jenis file gambar yang digunakan sebagai materi posting di antaranya adalah :

• jpg
  File gambar jpg merupakan jenis file paling banyak digunakan (terbesar) dalam blog khususnya maupun internet secara keseluruhan.
Karakteristik file jpg :
• Dapat menampilkan detail sebuah gambar secara sempurna karena setiap titik warna di tampilkan secara komprehensif.
• Proses loading file jpg mempunyai kecepatan yang lebih baik bila dibandingkan dengan jenis file gambar yang lain.
• Meskipun sebuah gambar hanya menggunakan sedikit warna, karena setiap titik warna pembentuk gambar ditampilkan secara detail maka beban muatan gambar menjadi besar (sama dengan gambar yang menggunakan banyak warna).Pada gambar semacam ini sebaiknya menggunakan gif atau png.
• gif
  File gambar gif mempunyai kelebihan yang tidak dimiliki oleh yang lain karena bisa dipergunakan untuk menerbitkan gambar statis (diam) dan gambar bergerak (animasi).
Karakteristik file gambar gif :
• Mampu menampilkan gambar transparan.
• Beban gambar menjadi amat besar ketika sebuah gambar mempunyai detail warna yang amat banyak.
  conntoh : Gambar pemandangan, orang berpakaian (nggak telanjang, lho ! hi... ngeri, deh ...?!)dsb. Karena sifatnnya yang seperti ini, sebaiknya file gif hanya digunakan untuk gambar-gambar dengan ukuran yang tidak terlalu besar.
• Mampu menampilkan gambar bergerak dalam bentuk animasi gif. Hingga detik ini belum ada jenis file gambar lain yang mampu menampilkan animasi gambar selain gif.
• png
  File gambar png hampir sama dengan gif akan tetapi hanya digunakan untuk gambar yang bersifat statis.
Kita dapat menggunakan dua macam bentuk file png :
• png-8 : mampu menampilkan transparansi dan gambar biasa.
• png-24 : di gunakan khusus untuk gambar transparan sehingga dapat menampilkan transparansi secara sempurna.
• File png dan gif, sebaiknya digunakan untuk gambar yang relatif berukuran kecil dengan pertimbangan pada beban muatan gambar yang nantinya akan berkorelasi dengan kecepatan loading sebuah blog (web).

1. Seperti biasa Login dulu ke account Blogger Anda;
2. Pilih Rancangan, lalu perhatikan dulu pada Address Bar, disitu ada No. ID Blog Anda silahkan dicatat dan disimpan, karena ID tersebut nanti akan diperlukan, lihat contoh gambar di bawah:
   
   
3. Klik Edit HTML => Download Template Lengkap untuk mengantisifasi kesalahan dalam pemasangan kode, lalu beri tanda centang pada Expan Template Widget;
4. Cari kode ini : <dd class='comment-footer'> gunakan Ctrl F untuk mempermudah proses pencarian. Jika kode tersebut tidak ditemukan Anda bisa mencari kode alternatif seperti ini: <b:include data='comment' name='commentDeleteIcon'/> ;
5. Tambahkan kode di bawah ini ke salah satu kode diatas. Berikut ini kodenya:
   
   <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=Masukan Blog ID Anda Disini&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'><img alt='Reply To This Comment' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-xbJvcGuKQJSeVBfARhda5wHwdEOQeR9gyOMRP5mI2j-4ktsiI27hXaZO6zxpKMIrHFeZYwT1JrZahTq4DaR6EoBKXEHEe421lF3l8yhVIJ4E7zG5zkZ8JcNtKk0H2MxUfSno7dYQT4E/s1600/reply.gif'/></a>
6. Masukan No. ID Blog Anda yang telah disimpan tadi tepat di tulisan: Masukan Blog ID Anda Disini ;
7. Simpan Template, selesai!!!

Mungkin anda ingin menyembunyikan sebagian artikel atau gambar dengan menggunakan tombol hide / show...? Agar artikel terlihat tidak terlalu banyak/panjang anda bisa gunakan script spoiler. Mau tau caranya......?

# Copy Script dibawah ini dipostingan anda.

<div><input value="Tampilkan" style="margin: 0px; padding:0px;width:auto;font-size:10px;" onclick="if(this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Sembunyikan&#39;; } else{ this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Tampilkan&#39;; }" type="button" /></div>
<div class="alt2">
<div style="display: none;">
<div style="background:#000000;text-align:left;padding:10px;color:#ffffff;">
Masukkan text-nya disini. Gambar juga bisa.
</div>
</div>
</div>


# Ganti tulisan "masukkan teksnya disini, Gambar juga bisa" dengan teks atau gambar yang mau disembunyikan.


Hasilnya seperti di bawah ini

<script src='http://deddycamp.googlecode.com/files/jquery-1.3.1.min.js' type='text/javascript'/>
<script src='http://deddycamp.googlecode.com/files/jquery.scrollTo.js.txt' type='text/javascript'/>

<style type='text/css'>
#slider {width:320px;height:200px;padding:5px;margin:0;position:relative;overflow:hidden}
#slider a:link, #slider a:active {color:#FFF;text-decoration:none}
#slider a:hover {color:#F00}
#mask-gallery {overflow: hidden}
#gallery {list-style:none;margin:0;padding:0;z-index 0;width:900px;overflow:hidden}
#gallery li {float:left;padding:0px;margin:0px}
#mask-excerpt {position:absolute;top:0;right:0;z-index:500px;overflow:hidden}

</style>

<script>
$(document).ready(function() {
var speed = 5000;

$(&#39;#mask-gallery, #gallery li&#39;).width($(&#39;#slider&#39;).width());
$(&#39;#gallery&#39;).width($(&#39;#slider&#39;).width() * $(&#39;#gallery li&#39;).length);
$(&#39;#mask-gallery, #gallery li, #mask-excerpt, #excerpt li&#39;).height($(&#39;#slider&#39;).height());

var run = setInterval(&#39;newsscoller(0)&#39;, speed);

$(&#39;#gallery li:first, #excerpt li:first&#39;).addClass(&#39;selected&#39;);

$(&#39;#btn-pause&#39;).click(function () {
clearInterval(run);
return false;
});

$(&#39;#btn-play&#39;).click(function () {
run = setInterval(&#39;newsscoller(0)&#39;, speed);

return false;
});

$(&#39;#btn-next&#39;).click(function () {
newsscoller(0);
return false;
});

$(&#39;#btn-prev&#39;).click(function () {
newsscoller(1);
return false;
});

$(&#39;#slider&#39;).hover(
function() {
clearInterval(run);
},
function() {
run = setInterval(&#39;newsscoller(0)&#39;, speed);
}
);
});

function newsscoller(prev) {
var current_image = $(&#39;#gallery li.selected&#39;).length ? $(&#39;#gallery li.selected&#39;) : $(&#39;#gallery li:first&#39;);
var current_excerpt = $(&#39;#excerpt li.selected&#39;).length ? $(&#39;#excerpt li.selected&#39;) : $(&#39;#excerpt li:first&#39;);

if (prev) {

var next_image = (current_image.prev().length) ? current_image.prev() : $(&#39;#gallery li:last&#39;);

var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $(&#39;#excerpt li:last&#39;);

} else {
var next_image = (current_image.next().length) ? current_image.next() : $(&#39;#gallery li:first&#39;);
var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $(&#39;#excerpt li:first&#39;);
}

$(&#39;#excerpt li, #gallery li&#39;).removeClass(&#39;selected&#39;);
next_image.addClass(&#39;selected&#39;);
next_excerpt.addClass(&#39;selected&#39;);

$(&#39;#mask-gallery&#39;).scrollTo(next_image, 800);
$(&#39;#mask-excerpt&#39;).scrollTo(next_excerpt, 800);

}
</script>

• Sekarang bagian memasang gambar slide-nya, masuk ke Elemen Halaman.
• Pilih Tambah Gadget > pilih yang HTML/Javascript.
• Sekarang masukkan kode berikut :

<div id="slider">
<div id="mask-gallery">
<ul id="gallery">

<li><a href="http://www.deddycamp.com/2010/05/cara-membuat-menu-tab-view.html"><img src="http://lh5.ggpht.com/_7Y9pl24WpQY/S5k7-LSv8kI/AAAAAAAADHo/9E8EpPU1mKI/image_thumb%5B2%5D.png" height="200px" width="320px" border="0" alt="Free Blogger Template" /></a></li>

<li><a href="http://www.deddycamp.com/2010/05/cara-membuat-navigasi-header-di-blog.html"><img src="http://lh6.ggpht.com/_7Y9pl24WpQY/S57X-OyXc5I/AAAAAAAADJ4/ukDMwgpRQDE/smart%20gradient_thumb%5B2%5D.png" height="200px" width="320px" border="0" alt="Free Blogger Template" /></a></li>

<li><a href="http://www.deddycamp.com/2010/05/cara-membuat-tab-view-versi-2.html"><img src="http://lh4.ggpht.com/_7Y9pl24WpQY/S3aqOXkcFgI/AAAAAAAAC9U/iAjS27QlZYU/image_thumb2.png" height="200px" width="320px" border="0" alt="Free Blogger Template" /></a></li>

</ul>
</div>
</div>
<div id="buttons">
<a href="#" id="btn-prev">prev</a>
<a href="#" id="btn-pause">pause</a>
<a href="#" id="btn-next">next</a>
<a href="#" id="btn-play">play</a>
</div>

1. Solid
2. Dotted
3. Dashed
4. Double
5. Groove
6. Ridge
7. Inset
8. Outset

<div style="background:#F2F2F2;border:3px dashed #000000; padding:5px;">
TULISAN / SCRIPT KALIAN </div>

kang gmana caranya memodifiksi border kayak pnya maz soalnya kan template standartnya bordernya gk kayak gini mohon bantuannya ^_^

#sidebar1 .widget {

margin: 0px 0px 5px 0px;

padding: 5px 5px 5px 5px;

background: $sidebar1bgColor;

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-bottomright: 20px;
}

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;

#sidebar1 .widget {

margin: 0px 0px 5px 0px;

padding: 5px 5px 5px 5px;

background: $sidebar1bgColor;

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}

#sidebar1 .widget {

margin: 0px 0px 5px 0px;

padding: 5px 5px 5px 5px;

background: $sidebar1bgColor;

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-radius-topleft: 10px;
-webkit-border-radius-topright: 10px;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

#sidebar1 .widget {

margin: 0px 0px 5px 0px;

padding: 5px 5px 5px 5px;

background: $sidebar1bgColor;

-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-radius-bottomleft: 10px;
-webkit-border-radius-bottomright: 10px;
-khtml-border-radius-bottomleft: 10px;
-khtml-border-radius-bottomright: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

Kali ini panduan sukses sharing tentang bagaimana cara membuat teks rata kiri dan kanan secara otomatis langsung tampil pada halaman blog kita. tanpa perlu mengaturnya di halaman entri post setiap kali kita membuat teks. tentunya ini sangat lah membantu, selain mudah tentunya menghemat waktu. nah apakah anda ingin menerapkan tutor ini. jika iya atau sekadar ingin mencoba silahkan ikuti langkah-langkah di bawah ini.

Berikut ini langkah-langkah cara membuat teks rata kiri dan kanan secara otomatis pada blog anda.

• Login ke blogger
• Klik Rancangan
• Edit HTML
• Cari kode .post-body{
• Kalau sudah ketemu tambahkan kode di bawah ini seperti
  
  .post-body{
  text-align:justify;
  ........
  }
• Untuk membuat teks rata kanan, tengah atau kiri anda bisa mengganti justify dengan
  Left : Kiri
  Right : Kanan
  Center : Tengah
• Kemudian simpan tamplate anda dan lihat hasilnya.
• Selesai....

• Yang Pertama untuk membuat background warna, caranya...

pernahkan kalian membuat sebuah posting atau artikel pada blog dan kalian merasa kesal dengan perataan tulisan yang tidak rapi??? setiap kali akan meratakan tulisan maka kalian harus memblok semua tulisan dan memilih "rata penuh / align-justify".
pada pengaturan dasarnya blogger mengatur tulisan pada rata kiri, nah kan kalian pasti menginginkan tulisan yang rapi, baiklah saya akan memberi tips untuk mengatur perataan rata kiri-kanan/rata penuh"justify" menjadi pengaturan default pada blog kalian, jadi kalian tidak usah susah payah untuk meratakan tulisan lagi saat akan membuat tulisan / artikel kalian.

kalian harus melakukan sedikit perubahan kode CSS pada blogger.
langkah awal masuklah ke DASHBOARD >> TATA LETAK >> EDIT HTML.
kemudian carilah kode css bagian POST yang pada template standar blogger biasanya diberi keterangan seperti dibawah ini:


/* Posts
--------------- */

atau cari saja kode dibawah ini jika tidak menemukan kode diatas

/* Posts

kemudian sedikit turun kebawah, cari CSS yang berawalan .post { dan isinya biasanya akan seperti dibawah ini:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

perhatian :
di setiap template akan berbeda beda isinya, nah agar postingan kita automatis menjadi rata kiri kanan maka kita tambahkan kode text-align: justify; sebelum kurung kurawal penutup,sehingga kodenya menjadi seperti berikut ini:

.post {margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
text-align: justify;
}

kemudian simpan dan lihat hasilnya, langsung praktekan dengan membuat sebuah posting dan jangan diberi efek rata tengah,kiri,atau kanan, biarkan saja apa adanya, setelah itu kalian terbitkan, dan lihatlah hasil dari karyamu tadi akan secara otomatis akan menjadi rata penuh"justify".
sedikit tambahan, jika kalian ingin merubahnya menjadi rata tengah,kiri, atau kanan, maka kalian tinggal mengganti tulisan "justify" pada kode CSS yang telah dibahas diatas menjadi "left" "center" ataupun "right" sesuai keinginan kalian.
semoga bermanfaat, dan jika ada pertanyaan silahkan cantumkan di kolom komentar.

↑ Grab this Headline Animator

Widget Recent Post atau bisa di sebut juga Widget Postingan terbaru memang sudah pernah saya jelaskan di kesempatan sebelumnya namun setelah browsing - browsing ternyata versi recent post itu banyak sekali, salah satunya Recent Post With Horizontal Thumbnail yaitu Widget yang menampilkan Postingan terbaru dari blog anda namun yang di tampilkan hanya gambar saja. Agar lebih jelas silahkan lihat lebih jelas screenshout di bawah ini :

1. Pertama login ke blogger.com
   
   
   
   
   
2. masuk ke Rancangan >> Elemen Halaman
   
   
   
   
   
   
   
   
3. Setelah berada pada elemen halaman maka tambahkan sebuah gadget
4. pilih yang HTML/Javascript
   
   
   
   
   
5. taruh kode di bawah ini kedalamnya
   
   
   <script language="JavaScript"> imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJnatYQE4pyd2V4_ObdSwcVztj525VXSOdyPyWxEoOaLWQrQXB2ey-QMgl60jTfK4s8sj9zkI4iBiy2uIsC7l-E3xIzDsBzO6IL3Q0UAv40YYe-4HdjIgx-0pogkUSgnRSiyHQ6xhwZQX9/s1600/No+Image.gif"; imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJnatYQE4pyd2V4_ObdSwcVztj525VXSOdyPyWxEoOaLWQrQXB2ey-QMgl60jTfK4s8sj9zkI4iBiy2uIsC7l-E3xIzDsBzO6IL3Q0UAv40YYe-4HdjIgx-0pogkUSgnRSiyHQ6xhwZQX9/s1600/No+Image.gif"; imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJnatYQE4pyd2V4_ObdSwcVztj525VXSOdyPyWxEoOaLWQrQXB2ey-QMgl60jTfK4s8sj9zkI4iBiy2uIsC7l-E3xIzDsBzO6IL3Q0UAv40YYe-4HdjIgx-0pogkUSgnRSiyHQ6xhwZQX9/s1600/No+Image.gif"; imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJnatYQE4pyd2V4_ObdSwcVztj525VXSOdyPyWxEoOaLWQrQXB2ey-QMgl60jTfK4s8sj9zkI4iBiy2uIsC7l-E3xIzDsBzO6IL3Q0UAv40YYe-4HdjIgx-0pogkUSgnRSiyHQ6xhwZQX9/s1600/No+Image.gif"; imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJnatYQE4pyd2V4_ObdSwcVztj525VXSOdyPyWxEoOaLWQrQXB2ey-QMgl60jTfK4s8sj9zkI4iBiy2uIsC7l-E3xIzDsBzO6IL3Q0UAv40YYe-4HdjIgx-0pogkUSgnRSiyHQ6xhwZQX9/s1600/No+Image.gif"; showRandomImg = true; tablewidth = 248; cellspacing = 8; borderColor = "#ffffff"; bgTD = "#ffffff"; imgwidth = 118; imgheight = 100; fntsize = 12; acolor = "#666"; aBold = true; icon = " "; text = "comments"; showPostDate = false; summaryPost = 50; summaryFontsize = 11; summaryColor = "#666"; icon2 = " "; numposts = 5; home_page = "http://ALAMATBLOGANDA.blogspot.com/"; label = "tagname"; </script> <script src="http://oketrik.googlecode.com/files/horizontal_only_thumbnail.js" type="text/javascript"></script>
   
   Penjelasan
   
   • tablewidth = 248 >> menunjukan lebar dari widget tersebut.
   • borderColor = "#ffffff" >>Warna dari garis pinggir widget.
   • bgTD = "#ffffff" >> Menunjukan warna latar belakang widget recent post with thumbnail.
   • imgwidth = 118; imgheight = 100 >> Lebar dan panjang gambar recent post.
   • numposts = 5>> jumlah Postingan terbaru yang ditampilkan
   • ALAMATBLOGANDA >> Ganti dengan alamat blog anda
   
   
   
   
   
6. setelah itu simpan dengan judul recent post
   
   
   
   
   
7. selesai

↑ Grab this Headline Animator

1. Logen ke Blogger ID anda
2. Pilih Tata Letak
3. Pilih Edit HTML
4. Download Template lengkap agar data template aman ada datanya
5. Silakan cari code ini : .sidebar h2

↑ Grab this Headline Animator