Your SEO optimized title

Kamis, 02 Januari 2014

Definisi dan Manfaat Robot TXT untuk Blog

Definisi dan Manfaat Robot Txt untuk Blog - Sahabat blogger, sebelum kita memasang robot.txt pada blog, kita perlu tahu pengertian/definisi serta manfaat robot.txt terlebih dahulu, jangan semata - mata menemukan artikel tentang cara pemasangan robot.txt yang baik misalnya di blog orang, kita langusng saja menerapkan nya pada blog kita sendiri tanpa tahu dampak yang akan terjadi nantinya, maka hati - hatilah karena pemasangan robot.txt ini berhubungan dengan google webmaster tools. pengalaman pribadi selama menggeluti dunia blogger saya mendapatkan informasi dari para sahabat-sahabat blogger sebagian ada yang suruh memasang dan sebagian sahabat lagi ada yang suruh jangan memasang robot.txt itu. nah agar kita tidak agu lagi maka terlebih dahulu pelajarilah manfaat dan fungsi robot.txt itu.

Untuk penggunaan fitur ini google sendiri memberi peringatan agar berhati - hati dalam menggunakan fitur robot.txt / Peryapan dan pengindeksan ini. sebagaimana peringatan yang ada dalam menu robot.txt ini adalah :

"Peringatan! Gunakan dengan hati-hati. Penggunaan yang tidak tepat dari fitur tersebut dapat mengakibatkan blog Anda diabaikan oleh mesin telusur".

Klik gambar untuk memperbesar

Jadi google sendiri menjelaskan bahwa ada pengaruh terhadap mesin telusur, search engine google.

Nah, untuk dalam postingan ini bang dadan akan coba menjelaskan terlebih dahulu Definisi dan Manfaat Robot.txt untuk Blog, sebelum nanti kita menggunakan robot.txt yang benar. Berikut penjelasan tentang :

Definisi dan Manfaat Robot Txt untuk Blog

A. Definisi Robot.Txt untuk Blog

Robots.txt adalah Sebuah file dengan sebuah fungsi yang di gunakan untuk membatasi akses robot mesin pencari (Search engine misal : Google,Bing,Yahoo) yang sedang menjelajahi atau membuka situs web yang anda miliki . Sebelum mereka mejelajahi halaman web, mereka memeriksa terlebih dahulu untuk melihat apakah sebuah file robots.txt ada ataukah tidak , dan di dalam robots.txt ada perintah (command) yang mencegah mereka mengakses untuk halaman tertentu.

Kita memerlukan robots.txt agar robot-robot itu tidak mengindex halaman di search engine (Google,yahoo,Bing) yang tidak kita inginkan , karena mungkin ada beberapa halaman web yang tidak ingin di index oleh search engine. Dan jika kita ingin semua content di web kita di index oleh mesin pencari kita tidak membutuhkan robots.txt .

B. Manfaat Robot.TXT untuk Blog

Dalam hal optimasi SEO, kemampuan Robots.txt yang dapat mengarahkan spider bot mengcrawling halaman yang ditargetkan bisa kita manfaatkan untuk mengarahkan spider bot pada halaman penting seperti halaman konten agar konten tersebut cepat terindex oleh search engine.

Saat spider bot memutuskan untuk mengcrawl situs, situs akan kehilangan bandwidth dalam jumlah yang tidak sedikit. Bila beberapa directory tertentu misal pada directory search kita batasi aksesnya maka ini akan menghemat bandwidth dan kegagalan spider bot dalam mengcrawl blog kita karena akses situs yang kurang baik akan teratasi sehingga spider bot bisa dengan leluasa merayapi seluruh isi konten sampai tuntas.

Di lain sisi bila halaman index yang di dapat search engine pada sebuah situs dinilai sangat berkualitas maka situs tersebut akan memiliki peluang besar untuk masuk halaman pertama. Hal ini akan berbeda jauh hasilnya dibandingkan dengan situs yang memiliki banyak halaman index namun dengan konten yang kurang berkualitas dan cenderung hanya menampilkan banyak link didalamnya contonya situs AGC.

Nah setelah membaca artikel diatas, mudah - mudahan sobat sudah tau sedikitnya tentang Definisi dan Manfaat Robot TXT untuk Blog, jadi silahkan sobat gunakan baik - baik pitur Perayapan dan Pengindeksan google itu melalui robot.txt.

Semoga artikel ini bermanfaat buat para blogger semua, bang dadan ucapkan terimakasih kepada sahabat blogger yang sudah share baik definisi atau manfaat dari robot.txt tersebut. dan apabila diantara sobat ada yang mau memasang Kode Robot.txt ini silahkan kunjungi artikel tentang Cara Memasang Kode Robot.txt yang baik. Terimakasih dan sampai jumpa..!!!

source image: sem and seo news

Cara Memasang Kode Robot.txt yang Baik - Sahabat blogger, pada postingan yang lalu bang dadan telah membahas artikel tentang Definisi dan Manfaat Robot.txt untuk Blog, bagi sobat yang belum mengetahui informasi seputar robot.txt bisa sobat lihat disini. Nah menyambung artikel terdahulu kali ini bang dadan akan coba membahas Cara Memasang Kode Robot.txt yang Baik, pemasangan Robot.txt mungkin setiap blogger berbeda - beda tergantung kepercayaan nya masing-masing, namun dalam artikel ini bang dadan akan berikan kode Robot.txt yang selama ini bang dadan gunakan di blog ini.

Baiklah kawan tidak usah panjang lebar lagi kita langsung pada tahap pemasangan kode Robot.txt di blog:

KODE ROBOT.TXT

User-agent: *
Disallow:
User-agent: Mediapartners-Google
Disallow:

User-agent: *
Disallow: /search
Allow:
Sitemap: http://www.cbd.web.id/feeds/posts/default?orderby=updated

Keterangan: "Ganti URL yang berwarna merah itu dengan URL blog anda".

CARA PEMASANGAN PADA BLOGSPOT

1. Silahkan login ke blog

2. Masuk ke rancangan/dasbor

3. Pilih menu Setelan

4. Klik submenu Preferensi Penelusuran

maka sobat akan menemui gambar seperti dibawah ini:

Sumber gambar: blogger.com
klik gambar untuk memperbesar

5. Lihat gambar yang dilingkari merah, dan silahkan sobat klik Edit

6. Masukan Kode Robot.txt yang di atas kesana

7. Selanjutnya klik simpan

8. Selesai

Tambahan:
Agar Robot.txt dapat merayapi blog anda dengan baik selaras, serasi dan seimbang dengan Webmaster Tools, silahkan tambahkan kode dibawah ini, dan tempatkan di bawah tag <head>pada tempalte edit html.

<meta content='INDEX, FOLLOW' name='GOOGLEBOT'/>
<meta content='index, follow, all' name='robots'/>
<meta content='all' name='googlebot'/>
<meta content='all' name='msnbot'/>
<meta content='all' name='Googlebot-Image'/>

Sekian dulu pembahasan kita kali ini tentang Cara Memasang Kode Robot.txt yang Baik, semoga artikel ini dapat bermanfaat buat para blogger semua. terimakasih dan tetap semangat..!!

Membuat Menu Horizontal CSS Tanpa Edit HTML

Assalamu'alaikum Wr.Wb

Membuat Menu Horizontal CSS Tanpa Edit HTML - Pada malam kali ini saya akan membahas tutorial cara membuat menu horizontal CSS Block keren tanpa edit HTML.

Menu horizontal merupakan sebuah menu yang membentang panjang dan biasanya terletak dibawah header blog. menu horizontal ini berfungsi untuk mempermudah pengunjung dalam menelusuriisi daripada blog kita.

Nah untuk itu pada kesempatan kali ini bang dadan akan membahas cara membuatnya, gak perlu pake edit HTML, jadi makin mudah saja ya sob dalam menerapkannya.

Berikut DEMO-nya :

Oke langsung saja kita pada pembahasan.

Cara Membuat Menu Horizontal CSS Block Tanpa Edit HTML

Pertama Silahkan login pada akun blog sobat
Selanjutnya Masuk ke Dasbor
Pilih Tata Letak
Lalu Klik Tambah Gadget *Biasanya dipasang dibawah header
Pilih HTML/Javascript

Membuat Menu Horizontal CSS Tanpa Edit HTML

Selanjutnya Copy kode CSS dibawah ini dan pastekan pada HTML/Javascript
Berikut kode CSS-nya

.solidblockmenu{

margin: 0;

padding: 0;

float: left;

font: bold 13px Arial;

width: 100%;

overflow: hidden;

margin-bottom: 1em;

border: 1px solid #625e00;

border-width: 1px 0;

background: url(https://lh6.googleusercontent.com/-PcV4VpR8vVs/UMtMGi8I0II/AAAAAAAAAfA/1yw3SNrhT1M/w248-h248/navbangdadan.gif) center center repeat-x;

}

.solidblockmenu li{

display: inline;

}

.solidblockmenu li a{

float: left;

color: white;

padding: 9px 11px;

text-decoration: none;

border-right: 1px solid white;

}

.solidblockmenu li a:visited{

color: white;

}

.solidblockmenu li a:hover, .solidblockmenu li .current{

color: white;

background: url(https://lh6.googleusercontent.com/-fKZAiQvUg8E/UMtMGrxQwrI/AAAAAAAAAfE/1IihW4JVYEQ/w248-h248/navaktifbangdadan.gif) center center repeat-x;

}

</style>

<br />

<li><a href="http://bangdadan.blogspot.com/2012/12/about-coretan-bang-dadan.html">About</a></li>

<li><a href="http://www.emailmeform.com/builder/form/58bZ51u00rcDY7vL8RS3p9V">Contact</a></li>

<li><a href="http://bangdadan.blogspot.com/search/label/blogger%20tutorial">Tutorial Blog</a></li>

<li><a href="http://bangdadan.blogspot.com/search/label/tips%20trick">Tips & Trick</a></li>

</ul>

Selanjutnya klik Simpan

Nah selesai deh, sekarang sobat sudah punya menu horizontal seperti pada demo diatas. Bila sobat tidak mempunyai Element/Widgate di bawah Header, silahkan lihat postingan bang dadan sebelumnya tentang Cara Membuat Widgate Horizontal dibawah Header.

Mungkin sampai disini dulu pembahasan kita kali ini tentang Cara Membuat Menu Horizontal CSS Block Keren Tanpa Edit HTML. Semoga artikel ini bermanfaat bagi sobat yang membutuhkan. Terimkasih

Bilahitaufiq Walhidayah

Wassalamu'alaikum Wr. Wb

Cara Membuat Read More Otomatis Artikel Di Homepage

Dalam posting artikel berikut ini menunjukkan bagaimana Cara Membuat Read More Otomatis Artikel Di Homepage. Ada beberapa cara untuk membuat Read More otomatis (Auto Read More). Biasanya Fitur Auto Read More ini ditambahkan di bawah postingan artikel blog Di Homepage/Beranda.

Fungsi dari Read More Otomatis itu sendiri merupakan salah satu teknik untuk membuat halaman homepage lebih terlihat simple dan dinamis, dengan menampilkan judul, gambar dan sedikit uraian sehingga memudahkan pengunjung untuk memilih judul artikel yang diinginkan.

Jika sudah berpengalaman edit template, maka versi ini dapat sedikit dimodifikasi. Untuk menambahkannya hanya memerlukan waktu beberapa menit saja. Read More Otomatis Artikel ini memiliki beberapa versi, dan untuk postingan berikut, akan diuraikan versi yang memiliki loading tercepat, sehingga sangat baik bagi Mesin Pencari.

Untuk Versi Auto Read More dengan Efek Gambar Di Link ini.

Kekurangan versi ini adalah ukuran gambar terbatas, jadi kalo diperbesar kurang jelas, dan juga kutipan singkat artikel terbatas pula, tidak bisa dikurangi atau ditambah. Tentu saja Auto Readmore Artikel tersebut dapat sedikit di modifikasi sesuai kebutuhan, Seperti Merubah Ukuran Gambar, Read More diganti menjadi Baca Selengkapnya dan lain-lain.

Berikut langkah-langkah Cara Membuat Read More Otomatis Artikel Di Homepage (Beranda).
Perhatian: bagi yang sudah memasang auto read more yang ada sebelumnya harus dihapus terlebih dahulu versi terdahulu.

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 ]]></b:skin>
Masukan kode tersebut dalam kotak pencarian, kemudian enter untuk mencari.

6. Masukan Kode berikut diatas ]]></b:skin>

/* Gambar autoread more
----------------------------------------------- */
.post-thumbnail {width:100px;height:70px;float:left;margin:0px 10px 0px 0px;}

Warna ungu adalah pengaturan ukuran tinggi dan lebar gambar

7. Kemudian Cari Kode <data:post.body/>

Kode tersebut diatas jumlahnya biasanya ada 2 atau 3 , Cari yang versi web,
biasanya yang kedua (ke-2).

8. Hapus Kode <data:post.body/> yang kedua (salahsatu) dan Ganti dengan kode dibawah ini.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' expr:src='data:post.thumbnailUrl'/></a>
<b:else/>
<a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij9hqJViqWxJXOqmCy6T987xjgMz0MG-5cmzpprQKvKppHfqs3ph7lBRarMTgTBLq2oCo0IwBrQmHPbjJ-xx2a1IZE_9J90jk7xL_m7ZQJSFZQLlAGpYKSS-vtU9uDg10ZMsuIB8ya0Gw/s1600/no+image.jpg'/></a>
</b:if>
<div class='post-snippet'><data:post.snippet/></div>
<a class='button' expr:href='data:post.url'>Baca Selengkapnya »</a>
</b:if>
</b:if>
<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:if>
</b:if>

Keterangan membuat read more otomatis:

warna hijau adalah gambar pengganti jika dalam artikel tidak ada gambar dan bisa diganti dengan url gambar sesuai keinginan.
"Baca Selengkapnya" juga bisa diganti kata-katanya.

9. Untuk Merubah Ketinggian deskripsi atau kutipan singkat artikel (Optional)

Cari Kode .post-body { ...} atau .post { ...}
Masukan atau Ganti { line-height: 1.8; ...
bisa juga ditulis line-height: 23px; atau disesuaikan ketinggiannya.

10.Save Template, dan lihat hasil read more otomatisnya.

Demikian Tutorial Cara Membuat Read More Otomatis Artikel Di Homepage, mudah-mudahan bisa bermanfaat.

Didalam posting artikel yang satu ini menjelaskan bagaimana Cara Membuat Auto Read More Otomatis Di Halaman Depan Blog. Ada beberapa cara untuk membuat Auto Read More otomatis, atau popular juga dengan sebutan Baca Selengkapnya. Biasanya Fitur otomatis posting artikel ini ditambahkan di bawah postingan artikel blog Di Homepage, Beranda atau halaman depan.

Fungsi dari Read More Otomatis itu sendiri merupakan salah satu cara untuk membuat halaman homepage lebih terlihat simple dan dinamis, dengan menampilkan judul, gambar yang mempunyai efek transisi dan uraian singkat yang dapat diatur panjangnya sehingga memudahkan pengunjung untuk membaca artikel yang diinginkan.

DEMO

Versi sebelumnya Membuat Read More Otomatis Versi Loading Cepat

Namun kekurangannya bahwa gambar dan deskripsi singkat terbatas untuk dimodifikasi (namun tetap ideal). Sedangkan versi auto read more otomatis yang ini, ukuran gambar mempunyai efek transisi menarik serta panjang deskripsi dapat diatur sesuai kebutuhan. Sebaiknya Posting mempunyai gambar meskipun hanya 1, kalo tidak ada gambar nanti kosong tampilannya.

Untuk menambahkannya memerlukan waktu beberapa menit saja. Auto Read More di halaman depan Blog ini memiliki beberapa versi, dan untuk postingan berikut, akan diuraikan versi yang memiliki loading cepat setelah versi sebelumnya ada yang tercepat, sehingga sangat baik bagi Mesin Pencari.

Auto Read more Artikel dapat di modifikasi sesuai kebutuhan, diuraikan di dalam keterangan.
Berikut langkah-langkah Cara Membuat Auto Read More Otomatis Di Blog. Perhatian: bagi yang sudah memasang read more otomatis yang ada sebelumnya harus dihapus terlebih dahulu. Versi Ini telah Direvisi.

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 Hijau 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 &#187;</a>
      </div>
</b:if>
</b:if>
<!-- Auto read more Akhir -->

Warna Biru Muda boleh dihapus boleh tidak, bedakan saja.
"Baca Selengkapnya" juga bisa diganti bebas.

Perhatian: Jika sudah menggunakan fitur read more otomatis sebelumnya, maka harus dihapus yang versi sebelumnya, dan mungkin jumlah pada langkah 7 bukan 2 tp mungkin 3 (mungkin juga script diatas pada langkah 6 berbeda.. ya harus dihapus jg script versi sebelumnya), anda harus dapat memperkirakan dari mana ke mana yang harus di hapus, contoh pada langkah 8 (petunjuknya warna Oranye - ini petunjuk bagi yg sdh pake versi lain)

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

Demikian Tutorial Cara Membuat Auto Read More Otomatis Artikel Di Blog, mudah-mudahan bisa bermanfaat.

Cara Membuat Kotak Iklan Di Blog

Cara membuat kotak iklan di blog sebenarnya sudah lama ingin saya posting, namun ada saja kendala yang menghambat saya untuk mempostingya sehingga postingan cara membuat kotak iklan ini menjadi tertunda. Pada kesempatan yang berbahagia ini, mumpung ada waktu luang, saya akan mempostingnya dan membagikan panduan dan cara membuat blog khususnya pada cara membuat kotak iklan ini kepada Anda yang ingin memasang kotak iklan pada blog yang Anda miliki.

Membuat space kotak iklan pada blog akan memberi peluang bagi Anda untuk mendapatkan rupiah yang Anda inginkan. Karena ketika Anda membuat space kotak iklan diblog yang Anda miliki, secara tidak langsung Anda memberi kesempatan bagi orang lain yang ingin memasang iklan pada blog Anda. Apalagi jika blog yang Anda sudah popular dan memiliki trafic serta page rank dari google yang tinggi, maka pemasang iklan akan terus berdatangan untuk memasang iklan pada blog Anda. Namun tidak ada salahnya jika blog Anda belum memiliki trafic yang tinggi juga ingin menyediakan space kota iklan, yang jelas peluang untuk mendapatkan rupiah dari iklan itu tetap ada. Mungkin saja sipemasang iklan juga ingin memasang iklannya pada blog Anda, kan lumayan uangnya bisa dikumpul buat beli peyek, hehe..

Bagi anda yang tertarik untuk membuat kotak iklan di blog, yuk sama-sama kita simak tutorial berikut ini :

Siapkan gambar atau image yang ingin kita pasang pada space iklan yang berukuran 125 x 125 px, agar gambar kelihatan menarik dan memiliki efek silahkan Anda baca membuat banner animasi dan flash. Kemudian simpan gambar tersebut pada hosting penyipanan gambar seperti photobucket untuk mendapatkan url gambar yang nantinya kita butuhkan.

contohnya:
Jika sudah, kita akan membuat space kotak iklannya, login ke account blogger Anda
Klik rancangan atau tataletak bagi yang menggunakan dasbor blogger baru
Kemudian klik Edit HTML dan cari kode ]]></b:skin> (gunakan ctrl + f ) untuk mempermudah pencarian
Sisipkan kode CSS diatas kode ]]></b:skin>
Kemudian save template Anda
Langkah selanjutnya kembali ke Elemen laman dan klik tambah gadget > pilih HTML/Javascript
Copy dan paste kode HTML (edit terlebih dahulu untuk memasukkan link dan url gambar gambar yg ingin digunakan)
Save kerjaan Anda dan lihat hasilnya

Code CSS Iklan

#super-beeads {
margin:0px;padding:0px;text-align:center
}
#super-beeads img {
margin:1px 1px;
text-align:center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 1px 2px 1px #ccc;
-moz-box-shadow: 1px 2px 1px #ccc;
box-shadow: 1px 2px 1px #ccc;
}
#super-beeads img:hover {
-moz-opacity: 0.7;opacity: 0.7;filter:alpha(opacity=70);
}

Code HTML Iklan

<div id="super-beeads">
<a href="Masukkan-Url" target="_blank" title="Title-Iklan"><img alt="Alt/Text Gambar" border="0" src="Url Gambar" /></a>
<a href="Masukkan-Url" target="_blank" title=" Title-Iklan"><img alt="Alt/text Gambar" border="0" src="Url Gambar" /></a>
<a href="Masukkan-Url" target="_blank" title="Title-Iklan"><img alt="Alt/Text Gambar" border="0" src="Url Gambar" /></a>
<a href="Masukkan-Url" target="_blank" title="Title-Iklan"><img alt="Alt/Text Gambar" border="0" src="Url Gambar" /></a>
</div>

Space kotak iklan diatas merupakan space kotak iklan yang terdiri dari 4 bagian yaitu atas kiri, atas kanan dan bawah kiri serta bawah kanan. Jika anda ngin mengurangi space kotak iklan, anda dapat menghapus kode

<a href="MASUKKAN-URL" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a>

diatas.

Demikianlah cara membuat kotak iklan di blog yang dapat saya sampaikan, sampai jumpa pada tutorial berikutnya dan saya ucapkan selamat mencoba.

Cara Membuat Read More Otomatis Tanpa Javascript

Cara Membuat Auto Read More Otomatis Tanpa Javascript di Blogspot - Bagi para blogger read more sudah menjadi bagian penting untuk meringankan dan mempercantik tampilan blog mereka. Cara membuat read more dibedakan menjadi dua, yaitu read more otomatis dan manual. Jika anda ingin menggunakan cara menual, anda tinggal klik tombol Insert Jump Break pada posting blog, dengan cara ini pastinya kita harus melakukannya setiap menulis artikel. Tapi jika anda ingin membuat read more dengan cara otomatis pastinya akan ada beberapa penambahan kode pada Edit HTML.

Dengan auto read more otomatis pastinya kegiatan blogger anda akan menjadi lebih praktis. Jika membuat artikel anda sudah tidak perlu khawatir dengan lupa memencet tombol kertas sobek atau insert jump break lagi. Tetapi jika kita memasang auto read more, pastinya kita harus memberi tambahan script pada kode HTML kita. Fungsi readmore yang seharusnya berguna untuk mempersingkat posting atau artikel malah akan mengakibatkan blog anda menjadi berat karena mengandung kode javascript.

Kode auto readmore otomatis yang akan saya berikan pada posting ini tidak mengandung javascript, jadi dengan menggunakan kode ini template blog anda akan menjadi lebih SEO Friendly dan ringan, karena seperti yang kita tahu, google tidak suka dengan penggunaan kode javascript pada blog. Dalam trik ini kita akan memanfaatkan kode yang digunakan oleh tampilan mobile blogspot, yaitu post snippet. Untuk cara pemasangan auto read more otomatis tanpa javascript silahkan ikuti langkah berikut.

1. Login ke blogger, pilih salah satu blog
2. Pilih Template, lanjutkan ke Edit HTML
3. Lalu cari kode ]]></b:skin>, untuk mempermudah silahkan menggunakan ctrl+f
4. Masukkan kode ini diatas kode ]]></b:skin>

.post-thumbnail{float:left;margin-right:20px}

5. Lalu cari kode <data:post.body/> dan ganti dengan kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

6. Lalu Simpan Template

Setelah memasang semua kode tersebut template blog anda saya pastikan sudah lebih SEO Friendly, ingat jika anda sudah memasang kode read more otomatis yang memakai javascript, pastikan anda sudah menghapus kode tersebut, demikian juga jika anda sudah memasang kode read more manual di setiap posting. Sekian posting tentang Cara Membuat Read More Otomatis Tanpa Javascript, terimakasih.

Tutorial : Cara Memasang Widget Alexa di Blog Read more

Baca selengkapnya »

Langkah Cara mencari keyword dengan Tool Gratisan

Kata kunci atau istilah kerenya keywords (kw) yang biasa didengar di telinga para blogger pecinta Google Adsense. Sebuah kata kunci sangat berharga sekali bagi para adsenser ataupun para blogger professional. Setiap menulis artikel mereka tidak sembarang menulis begitu saja. Terkadang tulisan mereka seolah terlepas begitu saja. Tangan mengetikkan kata demi kata, kalimat demi kalimat, hingga membentuk paraghap sebuah tulisan yang and abaca sekarang pun. Juga telah dibidik kata kuncinya, apa itu?

Tanpa panjang lebar kali ini saya kan menulis tentang sebuah riset untuk cara mencari keyword

/ kata kunci yang dibidik. Mungkin ini membantu bagi anda yang suka mengotak-atik keyword seperti saya. Perhatikan gambar berikut ini:

Baca selengkapnya »

Minggu, 29 Desember 2013

SINOPSIS FILM LASKAR PELANGI 2 : EDENSOR

Baca selengkapnya »

Sabtu, 28 Desember 2013

Cara Backup Driver di Windows Dengan Menggunakan DriverMax

Masalah pada driver merupakan masalah yang tidak akan pernah berakhir pada operating system windows, baik itu windows lama seperti windows 95 atau widows yang terbaru seperti windows 7. Seringkali sebuah desktop PC atau notebook tidak memiliki cadangan driver baik itu pada CD/DVD atau pada hard disk pada perangkat tersebut.

Ada kalanya, anda ingin menginstall ulang sebuah perangkat komputer atau notebook tapi tidak memiliki driver dari komputer tersebut. Jika masalah itu yang muncul, anda bisa melakukan backup driver terlebih dahulu saat system masih berjalan yang kemudian digunakan untuk meng-install driver setelah melakukan

Baca selengkapnya »

Cara Install Windows 8 di PC/Laptop

Baca selengkapnya »

Gamers

Kamis, 02 Januari 2014

Definisi dan Manfaat Robot TXT untuk Blog

Cara Memasang Kode Robot.txt yang Baik

Membuat Menu Horizontal CSS Tanpa Edit HTML

Rabu, 01 Januari 2014

Cara Membuat Read More Otomatis Artikel Di Homepage

Cara Membuat Read More Otomatis di Blog Dengan Efek Gambar

Cara Membuat Kotak Iklan Di Blog

Code CSS Iklan

Code HTML Iklan

Cara Membuat Read More Otomatis Tanpa Javascript

Selasa, 31 Desember 2013

Tutorial : Cara Memasang Widget Alexa di Blog Read more

Langkah Cara mencari keyword dengan Tool Gratisan

Minggu, 29 Desember 2013

SINOPSIS FILM LASKAR PELANGI 2 : EDENSOR

Sabtu, 28 Desember 2013

Cara Backup Driver di Windows Dengan Menggunakan DriverMax

Cara Install Windows 8 di PC/Laptop