Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts

Tuesday, May 5, 2015

Cara Memasang Meta Tag di Blog agar Postingan Cepat Terindeks/Terpaut di Google

Cara Memasang Meta Tag di Blog agar Postingan Cepat Terindeks/Terpaut di Google
Lagi iseng ngulik blog teknisi katro nih, ada tips dan trik yang bikin pengen nyobain akhirnya nulis juga disini biar kali aja nanti mau coba lagi dan kelupaan, tinggal buka blog sendiri kan inget kalo udah nulis sendiri.

Cara Memasang Meta Tag di Blog agar Postingan Cepat Terindeks/Terpaut di Google, buat yang baru on di dunia maya atau baru bikin blog ini penting nih buat dicoba.

Mungkin bagi para master blogger, meta tag bukanlah hal asing. Tapi bagi sobat blogger yang pemula, perlu rasanya mengetahui apa itu meta tag. Mungkin teman-teman telah mengalami dimana setiap memposting, biasanya postingan kita belum ada di google kan. 

Dan itu wajar saja, karena memang biasanya google baru memasukkan postingan kita sekitar 3 hingga 6 hari.   
 
Tetapi jangan khawatir, dengan menggunakan meta tag, postingan atau artikel anda akan terindeks di Google hanya dalam waktu sehari. Selain itu, dengan meta tag posisi kita di google akan semakin baik, paling tidak ada di halaman depan.

Sebelum kita membahas Bagaimana Cara Memasang Meta Tag, ada baiknya kita mengenal lebih dahulu pengertian dari Meta Tag itu. Meta Tag adalah informasi yang dimasukkan kedalam area “head” dalam suatu halaman website, dimana informasi dalam area head ini tidak terlihat oleh browser pada saat kita melihat halaman website tersebut, tetapi area head ini menjadi sangat penting jika dihubungkan dengan mesin pencari / search engine, karena informasi Meta Tag ini akan ditampilkan dalam mesin pencari / search engine

Oke, Sekarang adalah cara memasang meta tag di blog anda :
1. Login ke blogger ID anda.
2. Masuk ke "Template" dan pilih "Edit HTML".
3. Cari kode seperti ini : <b:skin>
4. Lalu paste kode di bawah ini, di atas kode skin tadi 
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<meta content='Isi dengan DESCRIPTION blog anda' name='description'/>
</b:if>
<meta content='Isi dengan KEYWORD yang anda bidik pada tiap postingan anda' name='keywords'/>
<meta content='follow,all' name='robots'/>
5. Selanjutnya simpan template.

Catatan : Sebaiknya sebelum memasang meta tag ini, anda terlebih dahulu backup template anda supaya kalau terjadi hal-hal yang tidak diinginkan, anda bisa mengembalikan templatenya ke keadaan semula. sering banget ini terjadi di kehidupan katro :D 




sumber : google 

Thursday, October 16, 2014

Cara Menyisipkan Link Download Pada Postingan Blog

Cara Menyisipkan Link Download Pada Postingan Blog - Kali ini saya akan mempostingkan cara membuat link atau bisa disebut cara menyisipkan link di tulisan artikel.

Berikut Tahap-tahapnya :

1. Klik "Entri Baru" untuk menuliskan artikel seperti biasanya.
2. Blok tulisan yang ingin kita sisipkan link.
3. Klik menu item yang bertulisan link, lihat gambar berikut :
Cara Menyisipkan Link Download Pada Postingan Blog
 4. Masukkan link (alamat url) yang kita tuju
Cara Menyisipkan Link Download Pada Postingan Blog 
5. Klik Ok
6. Selesai, Jika artikel yang kamu tulis sudah sempurna dan siap diterbitkan, maka silakan terbitkan tulisan tersebut.

Bagaimana Cara Membuat Link Download di Sidebar Blogger?

Untuk pasang link di sidebar caranya agak berbeda dengan cara membuat link pada posting, yaitu dengan cara menyisipkan kode html secara manual.
Kode yang harus dipasang adalah
<a href="#">Text Link</a>
Cara menggunakannya
Ganti kode pagar (#) pada kode tersebut dengan link (alamat url) yang kamu mau, contoh :

http://sugenghandoyo.blogspot.com/
atau
http://sugenghandoyo.blogspot.com/2013/04/cara-menyisipkan-link-download-pada.html
Ganti tulisan Text Link dengan tulisan yang kamu mau, misalnya Kilik Di Sini, dsb. Contoh saya pakai tulisan Blogger Tutorial menggunakan link  http://sugenghandoyo.blogspot.com/ maka kode yang harus saya pasang adalah
<a href="http://sugenghandoyo.blogspot.com/">Blogger Tutorial</a>
Hasilnya seperti ini : Blogger Tutorial 

Mudah bukan Cara Menyisipkan Link Download Pada Postingan Blog ?

Selesai. Semoga Bermanfa'at.

copas , sumber

Tuesday, October 14, 2014

Cara Membuat Like Box Facebook Tersembunyi di Blogger

Cara Membuat Like Box Facebook Tersembunyi di Blogger - Biar tambah eksistensinya di dunia maya, tombol like ditampilkan diblog selain itu  juga memudahkan agar orang lain bisa dengan mudah menemukan anda di dunia maya.

Karena facebook adalah teman yang paling banyak penggunanya selain twitter, walau twitter juga di di pasang di blog tapi nantilah dilain kesempatan bikin cara Cara Membuat Like Box Facebook Tersembunyi di Blogger dulu deh sekarang.

Pada kali ini saya akan mempostingkan cara membuat like box Facebook tersembunyi di Blog, berikut screenshotnya :
Like Box Facebook Tersembunyi di Blogger

Nah bagi kalian yang bermina dengan like box tersebut, berikut tutorialnya :
1. Login ke akun Blogger anda.
2. Klik menu Tata Letak.
3. Klik Tambah Gadget dan Pilih Gadget HTML/JavaScript.
4. Masukan Kode berikut ini :
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi22XHGnAtzff2Kg5XO4ZXW7lWk8lgFqbQkVMPJkMa0-bxmbOY0wSi-gnCdh-1sFy742m8Qj9gIK66WlRc8u4eRjsGx13H1kl0vvzI87iMea_w8YRXJtPXqtKjqxVYj3JT4tfo4cTPgzTk/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;
}
.floatinglikebox div{
border:none;position:relative;display:block;
}
.floatinglikebox span{
bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;
}
.floatinglikebox span a{
color: #808080;text-decoration:none;
}
.floatinglikebox span a:hover{
text-decoration:underline;
}
</style>
<div class="floatinglikebox" style="">
<div>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/zulhamweb&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://zulham-id.blogspot.com/2013/04/cara-membuat-like-box-facebook.html" target="_blank">+ Get This</a>
</span>
</div>
</div> 
5. Simpan.
6. Klik menu template, edit HTML
7. Cari kode <head> dengan Ctrl+F lalu masukan kode di bawah ini di atas <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"> </script>
 Keterangan : Jika di blog anda sudah ditambahkan kode <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"> </script> maka tak perlu ditambahkan lagi, cara mengetahui sudah ditambahkan atau belum dengan cara klik edit HTML, dan cari kode <head> dengan CTRL+F, jika diatas <head> sudah ada kode tersebut maka tak perlu ditambahkan, dan jika belum maka tambahknlah
8. Simpan dan Selesai.

sumber : copas selamat mencoba Cara Membuat Like Box Facebook Tersembunyi di Blogger di blog kesayangan anda.

Sunday, October 12, 2014

Cara Memperbaiki Struktur Tag Heading untuk membuat Blog SEO Friendly

Cara Memperbaiki Struktur Tag Heading untuk membuat Blog SEO Friendly - Blog baru harus langsung diperhatikan masalah SEO agar kedepanya tinggal mengisi konten saja, karena trafik adalah penting untuk blog yang digunakan untuk keperluan bisnis. 

Meningkatkan trafik pengunjung dan membuat blog lebih SEO friendly dengan cara memperbaiki struktur tag h3, h2 & h1 pada template blogspot merupakan suatu hal yang harus anda lakukan dan ini akan sangat memberikan pengaruh yang positif bagi blog anda

Memperbaiki struktur tag judul akan membuat blog lebih SEO Friendly dan mempermudah robot search engine membaca judul dan isi artikel yang kita posting. Nah ketika sudah SEO friendly, otomatis posisi blog pada search engine akan terus membaik. Hal ini akan berdampak pada peningkatan jalur lalu lintas pengunjung ke blog dan tidak menutup kemungkinan untuk meningkatakan jumlah pageviews.


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2tjcaPtIb2TcFE1yqibCW00AmYXdzj27NZwhppP9XIz-gtuAkJMI0AQ783avMguW7VHAtQaau3nhZuPJn2Y7ssyajnvMAO9YTIrvaTLi_9h8Kb36c3sangAZiOG5k24_hoLjD4WIc1Q0/s1600/SEO2.jpeg
Sebelum lanjut ke pembahasan memperbaiki susunan tag heading pada template, ada baiknya anda mengetahui apa itu tag H1, H2 & H3 dan tempat seharusnya agar lebih memudahkan pemahaman anda.
  1. <h1> title atau judul blog </h1>
  1. <h2> judul postingan atau artikel </h2>
  1. <h3> judul widget blogger </h3>
Setelah mengetahui fungsi dan penjelasan tersebut di atas, sekarang mari kita lanjut ke tahap selanjutnya yakni memperbaiki struktur tag H1 sampai H3.
  • Login ke blogger
  • Template » Edit HTML » Expand Template Widget
  • Untuk mencegah terjadinya kesalahan pada saat memperbaiki struktur tag, saya sarankan untuk membackup template anda terlebih dahulu sebelum memulai Cara Memperbaiki Struktur Tag Heading untuk membuat Blog SEO Friendly, yuk langsung brangkat
Pertama
Cari : #header h1 {
Kemudian ganti dengan ini : #header h1, #header p {
Kedua
Cari kode CSS seperti ini : .post h3 { 
Ganti dengan ini : .post h1, .post h2{
Ketiga
Cari lagi : .post h3 a,.post h3 a:visited,.post h3 strong {
Ganti dengan kode ini : .post h1 a,.post h1 a:visited,.post h1 strong,.post h2 a,.post h2 a:visited,.post h2 strong{ 
Keempat
Cari lagi yang ini : .post h3 strong,.post h3 a:hover {
Ganti dengan : .post h1 strong,.post h1 a:hover,.post h1 strong,.post h2 a:hover {
Kelima
Temukan kode ini : h2.date-header {
Ganti menjadi : .date-header {
Lanjutkan dengan mencari : <h2 class='date-header'><data:post.dateHeader/></h2>
dan menggantinya dengan : <div class="date-header"><data:post.dateheader></data:post.dateheader></div>
Keenam
Cari kode dibawah ini :<h1 class='title'>
<b:include name='title'/>
</h1>
Ganti dengan ini :<b:if cond='data:blog.pageType != "item"'>
<h1 class='title'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title'>
<b:include name='title'/>
</p>
</b:if>
Ketujuh
Cari kode ini :<h1 class='title' style='background: transparent; border-width: 0px'> <b:include name='title'/> </h1>Ganti menjadi seperti kode di bawah ini :<b:if cond='data:blog.pageType != "item"'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</p>
</b:if>
Terakhir
Cari kode berikut :<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
Ganti dengan kode seperti di bawah ini <b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if> 
  • Simpan template.
Selesai Cara Memperbaiki Struktur Tag Heading untuk membuat Blog SEO Friendly. Semoga Bermanfa'at. 

NB :
Ketika anda tidak menemukan salah satu dari kode-kode diatas, carilah yang hampir sama/ mirip.

sumber : copas

Wednesday, July 30, 2014

Membuat Tombol Share Social Bookmark di Blogspot

Tips dan trik - Membuat Tombol Share Social Bookmark di Blogspot yakni untuk menambahkan tombol share dibawah postingan kita yang menggunakan blogspot, tidak perlu ngerti java script atau pengkodean seperti programer yang doyan maen kode html dan java segala macam nama untuk membuat program.

Biasanya kalau kita merawat tampilan blog kita, akan semakin membuat semangat untuk kita merawatnya dan tidak ingin blog kita di suspend atau di hapus oleh google atau mesin pencari, karena ingin blog kita terus mengudara didunia maya.

Selain untuk keperluan mempercantik blog, tombol share atau sosial bookmark itu juga untuk menggedor penambahan pengunjung ke blog kita, yah pada umumnya seseorang akan memanfaatkan Social Bookmark untuk menaikan Traffic di Blognya. Berikut screen shot tombol share Social Bookmark Tanpa Java Script/dengan Mengedit HTML :

Cukup lengkap bukan? Nah bagi anda yang berminat untuk memasang Social Bookmark ini di bawah postingan anda, berikut tutorialnya :

1. Login ke Akun Blogger anda.
2. Pilih, Template » Edit HTML » Centang "Expand Template Widget"
    Copy kode dibawah ini dan pastekan tepat diatas tag ]]></b:skin>
.fbshare {line-height: 20px; color: #fff !important; background: #3b5998; text-decoration: none !important; border: 1px solid #313c7d; padding: 3px;  font-family: Tahoma, verdana, sans-serif; font-size: 12px; border-radius: 2px;}
.twshare {color: #fff !important; background: #4099FF; text-decoration: none !important; border: 1px solid #3a8be8; padding: 3px;  font-family: Tahoma, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}
.plshare {color: #fff !important; background: #c0361a; text-decoration: none !important; border: 1px solid #9c2c15; padding: 3px; font-family: Tahoma, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}
.dgshare {color: #fff !important; background: #5b88af; text-decoration: none !important; border: 1px solid #4a6f8f; padding: 3px; font-family: Tahoma, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}
.lkshare {color: #fff !important; background: #005a87; text-decoration: none !important; border: 1px solid #003f5e; padding: 3px; font-family: Tahoma, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}
.tcshare {color: #fff !important; background: #157501; text-decoration: none !important; border: 1px solid #105901; padding: 3px; font-family: Tahoma, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}
.sharebutton {background: #cccccc;border: 1px solid #999;padding: 5px;}
3. Jangan simpan template dulu, tapi lanjutkan dengan mencari tag <data:post.body/> dan jika sudah ketemu, copy kode dibawah ini tepat di bawah tag <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sharebutton'>
Share This Article To: 
<a class='fbshare' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'>Facebook</a> 
<a class='twshare' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Twitter</a> 
<a class='plshare' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Google+</a>
<a class='lkshare' expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Linkedin</a>
<a class='tcshare' expr:href='&quot;http://technorati.com/faves?sub=addfavbtn&amp;add=&quot; + data:post.url' rel='nofollow' target='_blank'>Technorati</a>
<a class='dgshare' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Digg</a>
</div>
</b:if>
Perhatikan !Jika di dalam template terdapat banyak <data:post.body/>, maka cari kode HTML yang kurang lebih seperti dibawah ini dan pastekan kode di atas tepat di bawahnya.
<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>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
4. Sekarang simpan template dan lihat hasilnya.

Selamat mencoba  Membuat Tombol Share Social Bookmark di Blogspot semoga bisa di praktekan tanpa ada kendala dan langsung bisa, hehe kan gampang toh si katro aja bisa tinggal copy paste aja kan.

Penyebab Blog Dihapus Oleh Google

Baru saja merasakan penghapusan blog yang saya buat di blogspot, padahal saya ketik dengan memodifikasi konten secara tidak mentah mentah mengkopi paste blog orang, walau hal itu saya lakukan.

Yang aneh memang kenapa di hapus, padahal yang lainya tidak dihapus yang saya lakukan sama dengan blog satu itu, hemm itu masih untung karena belum ada maksud untuk komersil, dan baru banget pembuatanya yang menyesalkan kenapa di banned?

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF5LBvZa7CUOwQiU8n8RYlGNmqBYZ6Q-sFVhZMK0pTp90t9IcxtDcou9LgcicGmP5LFynSkOUDvO1tft6TYEcO0Tx4eEiPF8TmqKPjnlZAqJXUNEVQ04duetWX0Ipop8BMiLNWC5WzHJQ/s1600/Banned.jpg

Mengapa blog bisa dihapus? Tidak lain dan tidak bukan karena Konten yang mereka terbitkan tidak sesuai dengan kebijakan kontent yang ditetapkan oleh google. Nah, dalam postingan ini, kita akan membahas dan memahami hal-hal yang bertentangan dengan kebijakan konten dan menghindarinya agar blog tetap aman hukuman dari Google.

Penyebab Blog Dihapus Oleh Google?

1. Konten Dewasa

Sebenarnya google memberikan kebebasan kepada pengguna blogger untuk menerbitkan konten dewasa (aktivitas seksual). Namun dengan catatan agar memberikan tanda pada blog sebagai "Konten Khusus Dewasa". Apabila tanda ini tidak diberikan, maka pihak google akan memberikan hukuman penghapusan blog secara permanen.

2. Perkataan yang Mendorong Kebencian

Jangan sekali-kali menerbitkan konten melebihi batas kewajaran dan mendorong kebencian. Seperti mempromosikan kebencian terhadap suku, agama, ras, jenis kelamin, etnik, umur, status. 

3. Keamanan Anak

Menurut Google, mereka tidak akan memberikan toleransi terhadap blog yang membahayakan keselamatan anak-anak. Contohnya pornografi anak dan pedofilia (promosi ketertarikan seksual kepada anak-anak). Kedua hal ini jelas-jelas bertentangan dengan kebijakan google.

4. Kekerasan

Tidak boleh mempos artikel yang berupa ancaman kematian atau keselamatan terhadap sesorang/kelompok karena selain dikecam oleh pihak google, juga merupakan suatu aksi pelanggaran hukum pidana atau artikel yang mendorong sesorang untuk melakukan aksi kekerasan dan rasisme.

5. Konten Kasar

Salah satu yang melanggar kebijakan google adalah konten kasar. Misalnya gambar, video atau konten grafis yang jelas-jelas memperlihatkan luka karena senjata tajam/senapan atau memperlihatkan kebrutalan seseorang yang mengakibatkan kecelakaan bahkan kehilangan nyawa.

6. Aktivitas Ilegal

Mempost artikel yang memuat segala macam kegiatan ilegal, seperti mendorong atau mengajak seseorang untuk menggunakan narkoba atau alkohol. Dalam kasus ini dan yang berkaitan dengan pelecehan seksual anak, pihak google menegaskan akan memberikan tindakan yang seharusnya mereka lakukan bahkan melaporkannya kepada pihak yang berwenang.

Mungkin blog yang telah dihapus waktu itu ada hal hal Penyebab Blog Dihapus Oleh Google yang berhubungan dengan diatas, makanya google menghapus blog saya, sudahlah moga jadi pelajaran untuk kedepanya.

7. Materi berhak cipta

Siapapun tidak akan menyukai jika hasil karya mereka disalin oleh pihak lain tanpa adanya persetujuan dari pihak penerbit/pembuat. Dalam hal ini Google mempunyai sistem yang sangat efektif untuk mengatasinya. Konten berhak cipta yang disalin akan menghasilkan peringkat yang sangat rendah, suspensi Google Adsense serta Penghapusan blog dari mesin pencari. Nah, jika anda menemukan materi hasil karya anda disalin oleh blog lain, tidak perlu khawatir karena anda bisa melaporkannya melalui Laporan Dugaan Pelanggaran Hak Cipta Blogger yang didukung oleh DMCA (Digital Millennium Copyright Act)

8. Pelanggaran Privasi

Jangan mempos artikel yang berisikan informasi rahasia seseorang. Misalnya nomor kartu kredit, telepon, kontak pribadi, serta informasi rahasia lainnya yang bertentangan dengan kebijakan privasi Google.

9. Spam

Spam adalah suatu kegiatan yang tidak disukai oleh Google. Beberapa jenis spam diantaranya adalah backlinks yang tidak wajar, peniruan konten dan masih banyak lagi jenis spam lainnya yang harus dihindari oleh seorang blogger.

10. Peniruan Identitas

Meniru identitas seseorang dengan tujuan menyesatkan, berpura-pura menjadi orang lain, membuat bingung pembaca dan tujuan lainnya adalah suatu hal tindakan pidana yang harus anda hindari.

11. Malware

Memasukkan malware atau virus kedalam blog adalah perbuatan yang tidak terpuji dan sama sekali tidak dihargai. Resiko dari perbuatan ini adalah banned secara permanen oleh Google.

Demikianlah hal-hal yang harus anda pahami dan ketahui mengenai Kebijakan Konten tersebut diatas dan Demi keamanan blog anda, jangan sekali-kali melanggar apa yang telah ditetapkan oleh Google (Blogger) agar blog kita tidak di Banned oleh Google. Terima Kasih Semoga Bermanfa'at ..

Cara Mengganti Semua Ukuran Gambar Secara Otomatis di Blogger

Sobat katro lagi otak atik blog di blogspot tentang gambar atau picture dibagian postingan atau di template anda yang biasanya lagi bosan sama tampilan yang lama, mungkin bingung kalau gambar gak sesuai dengan keinginan.

Nah kalau gambar yang lama gak sesuai dengan tema atau pengen nyamain semua ukuran gambar secara otomatis di blogspot anda bisa langsung mengikuti cara sederhana yang akan kite bahas.

Ada 2 pilihan yang paling mendasar untuk mengubah ukuran gambar pada postingan blog. Pertama secara manual dan kedua secara otomatis. Penggantian ukuran gambar secara manual adalah pilihan dasar yang disediakan oleh blogger pada saat anda menambahkan gambar kedalam postingan anda. Sedangkan untuk penggantian seluruh ukuran gambar secara otomatis bisa dilakukan dengan menambahkan kode CSS kedalam template.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipFeunTedLQEwbyQHda1pxvyzuS4zZAr6VDnSAyhGr_Qg5sE_0RQgep-TANoIADMY4n0bzhJ1Sf6mHxKrjDBJXq7Mxvxr6mUtYI7UU_YgaK3KOWP65qrJdLAyjfv0qocASUuN9p6yn5qE/s1600/resize.PNG

Mengubah ukuran gambar secara manual (satu per satu) mungkin bisa anda lakukan, namun coba anda bayangkan, seandainya blog anda sudah mempunyai ratusan bahkan ribuan gambar, Apakah anda masih ingin mengubahnya secara manual? Bahkan jika anda memilih untuk melakukannya, mungkin ini akan memakan waktu yang cukup lama dan membutuhkan tenaga ekstra. Oleh karena itu, hal yang paling efektif bagi anda  adalah mengubahnya secara otomatis dengan cara menambahkan kode CSS kedalam template blog anda. Melalui cara ini, anda juga bisa mengembalikan ukuran gambar kembali ke keadaan semula, menambahkan garis pinggir dan bayangan pada semua gambar blog.

Bagaimana Cara Mengganti Semua Ukuran Gambar Secara Otomatis di Blogger ?

Hal pertama yang harus anda lakukan adalah login ke blogger.com » blog anda » template » edit html. Sekarang centang tag <b:skin>...</b:skin> (klik panah hitam disebelah kiri) dan temukan tag ]]></b:skin>. Copy kode CSS dibawah ini dan pastekan tepat diatasnya. (Tips - Gunakan pencarian dengan cara menekan Ctrl + F).
.post-body img {
width: 450px!important;
height: auto!important; }
Width dengan Nilai value 450px adalah lebar foto dan weight: auto! adalah tinggi gambar yang disesuaikan secara otomatis. Untuk menambahkan garis pinggir (border) cukup anda tambahkan border: 1px solid #cccccc; dan bayangan dengan kode box-shadow: 2px 2px 6px rgba(0,0,0,0.5);. Lengkapnya apabila sudah digabung akan menjadi seperti ini:
.post-body img {
width: 450px!important;
height: auto!important;
border: 1px solid #cccccc;
box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}
Setelah semua telah selesai anda atur, langkah berikutnya klik simpan template.

Sekian. Semoga tips ini akan membantu anda untuk mengubah semua ukuran gambar blog anda secara otomatis. sekarang tinggal langsung mencoba sendiri di blog blogspot yang anda pakai, tinggal mengutak atik sedikit saja beres deh.

Sunday, July 20, 2014

Style Tabel Modifikasi CSS3 untuk Blogger

7 Style Tabel Modifikasi CSS3 untuk Blogger - Kalau lagi iseng gak ada kerjaan mending ngeblog, karena daripada browsing gak karuan liat berita paling yah cukup beberapa menit saja juga udah beres, sekedar update berita hari ini saja.

Sekarang teknisi katro lagi belajar maen tabel style di blogspot alias blogger yang mana tabel blog pada dasarnya adalah sebuah element pada blog yang mempunyai petak-petak atau column dan row dengan garis yang mengelilinginya. Penggunaan tabel sudah sangat lumrah dan tidak jarang digunakan oleh para blogger untuk kepentingan tertentu.


Mungkin anda pernah menemukan sebuah blog dengan tabel yang mempunyai tampilan  yang dikombinasikan dengan berbagai variasi warna baik itu warna background, garis (border) dan penggabungan beberapa cell sehingga tampilannya terlihat sangat mencolok. Sebetulnya, tabel seperti itu adalah tabel hasil modifikasi dengan cara menambahkan kode CSS kedalam template dan jika tidak menggunakan tambahan CSS, maka tampilannya akan terlihat sangat sederhana.

Sebelum mendesain tampilan tabel, ada baiknya jika anda membaca Cara Membuat & Mengatur Tabel di Blog , karena artikel tersebut akan menjadi referensi anda untuk pembuatan dan modifikasi tabel blog.



Contoh dasar ini memang penting dan gak terlalu penting, untuk orang iseng bisa saja sih dicoba sebelum lanjut saya ingin memberikan sebuah kerangkan tabel komplit dengan pembagian-pembagian seperti Judul, Header, Column dan Row dalam satu kesatuan seperti yang bisa anda lihat dibawah ini :
<table border="1">
   <caption>TITLE</caption>
<tbody>
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td>Division 1.1</td><td>Division 1.2</td><td>Division 1.3</td></tr>
    <tr><td>Division 2.1</td><td>Division 2.2</td><td>Division 2.3</td></tr>
    <tr><td>Division 3.1</td><td>Division 3.2</td><td>Division 3.3</td></tr>
</tbody>
</table>
Kerangka table diatas, jika ditampilkan tanpa ada tambahan CSS yang mengatur tampilannya, maka akan terlihat seperti gambar di bawah ini :

Nah, jika ingin memberikan sedikit sentuhan agar tampilan table diatas menjadi lebih baik dan lebih mencolok, sebaiknya anda menambahkan kode CSS kedalam template dan dibawah ini ada 7 style tabel yang sudah siap pakai (Pure CSS3), lengkap dengan demo by image sehingga memudahkan anda untuk memilih sesuai selera.

CSS Tabel dan Cara Menempatkannya Didalam Template

Pilih salah satu kode CSS tabel yang akan saya berikan sebentar, kemudian copy kode tersebut dan pastekan tepat berada di atas tag ]]></b:skin>.

1. Hitam Biru Style - CSS



table[border="1"] {border-collapse:collapse;}
table[border="1"] caption {font:normal normal 11px Arial,Sans-Serif;color:#fff;background-color:#333;}
table[border="1"] tr {background:#fafafa;}
table[border="1"] caption {background:#000;vertical-align:top; padding:5px 10px; border:1px solid #bbb;color:#fff}
table[border="1"] th, table [border="1"] td {vertical-align:top; padding:5px 10px; border:1px solid #bbb;}
table[border="1"] tr:nth-child(even) {background:#f5f5f5;}
table[border="1"] th {background:#418AA4;color:#fff;font-weight:bold;}

2. Black Style - CSS

table[border="1"] {border-collapse:collapse;font:normal normal 11px Arial,Sans-Serif;color:#ccc;-webkit-box-shadow:0 1px 3px black;-moz-box-shadow:0 1px 3px black;box-shadow:0 1px 3px black;}
table[border="1"] caption {font:normal normal 11px Arial,Sans-Serif;color:#fff;background-color:#333;}
table[border="1"] tr {background-color:#222;}
table[border="1"] th, table[border="1"] td {vertical-align:top;padding:5px 10px;border:1px solid #3c3c3c;}
table[border="1"] td:nth-child(even) {background-color:#1c1c1c;}
table[border="1"] th {background-color:#555;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#666',endColorstr='#555');background-image:-webkit-gradient(linear,left top,left bottom,from(#666),to(#555));background-image:-webkit-linear-gradient(top,#666,#555);background-image:-moz-linear-gradient(top,#666,#555);background-image:-ms-linear-gradient(top,#666,#555);background-image:-o-linear-gradient(top,#666,#555);background-image:linear-gradient(top,#666,#555);color:black;font-size:12px;text-shadow:0 1px 0 rgba(255,255,255,.4);font-weight:bold;}

3. Grey Dark Style - CSS

table[border="1"] {color: #333;font-family: Helvetica, Arial, sans-serif;border-collapse:collapse; border-spacing: 0;}
table[border="1"] caption {height: 30px;color:#fff;background-color:#555;}
table[border="1"] td, th {border: 1px solid transparent;height: 30px;transition: all 0.3s;}
table[border="1"] th {background: #DFDFDF;font-weight: bold;}
table[border="1"] td {background: #FAFAFA;text-align: center;}
table[border="1"] tr:nth-child(even) td { background: #F1F1F1;}
table[border="1"] tr:nth-child(odd) td { background: #FEFEFE; }
table[border="1"] tr td:hover { background: #666; color: #FFF; }

4. Dark Green Style - CSS

table[border="1"] {border-collapse:collapse;font:normal 12px Verdana,Arial,Sans-Serif;color:#333;}
table[border="1"] tr {background:#F0F0F0;}
table[border="1"] th, table[border="1"] td, {vertical-align:top;padding:5px 10px;border:2px solid #fff;}
table[border="1"] td:nth-child(odd) {background:#DEDEDE;}
table[border="1"] th, table[border="1"] caption  {background:#4A6D67;color:#fff;font-weight:bold;}

5. Red Vs Gray Style - CSS

table[border="1"]{border-collapse:collapse;margin:0px;}
table[border="1"],table[border="1"] th, table[border="1"] td{border:1px solid #ccc;padding:2px 7px;}
table[border="1"] caption {font:normal normal 11px Tahoma,Sans-Serif;color:#fff;background-color:#800000;}
td{vertical-align:top;}
table[border="1"] th{background-color:#fafafa;text-align:left;}

6. Shadow Style - CSS

table[border="1"] caption {font:normal normal 11px Tahoma,Sans-Serif;color:#fff;background-color:#C2B084;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.5);-moz-box-shadow:0 1px 3px rgba(0,0,0,.5);box-shadow:0 1px 3px rgba(0,0,0,.5);}
table[border="1"] {border-collapse:collapse;font:normal normal 11px Verdana,Arial,Sans-Serif;color:#666;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.5);-moz-box-shadow:0 1px 3px rgba(0,0,0,.5);box-shadow:0 1px 3px rgba(0,0,0,.5);}
table[border="1"] tr {background-color:#fafafa;}
table[border="1"] th, table[border="1"] td {vertical-align:top;padding:5px 10px;border:1px solid white;}
table[border="1"] tr:nth-child(even) {background-color:#f5f5f5;}
table[border="1"] th {background-color:#ECE9D8;color:#ACA899;font-weight:bold;}

7. Blogger Style - CSS

table[border="1"] {border-collapse:collapse;font:normal normal 11px Trebuchet,"Trebuchet MS",Arial,Sans-Serif;color:#3366CC;}
table[border="1"] tr {background:#E1D4C1;}
table[border="1"] th, table[border="1"] caption, table[border="1"] td {vertical-align:top;padding:5px 15px;border:1px solid #fff;}
table[border="1"] td:nth-child(odd) {background:#F5EDE3;}
table[border="1"] th {background:#104386;color:#99CCFF;font-weight:bold;}
CSS diatas bisa anda modifikasi kembali sehingga menghasilkan tampilan yang lebih sempurna lagi serta sesuai dengan apa yang anda harapkan. Selesai. Semoga Bermanfa'at.
Jika ada kesulitan mohon untuk ditanyakan di kolom komentar. Terima Kasih.

repost

Wednesday, June 4, 2014

Kegunaan dari Google Webmaster Tools

Google Webmaster Tools adalah sebuah layanan gratis dari Google yang membantu website/blog untuk dapat meningkatkan dan melacak visibilitas situs. Ini menunjukkan bahwa Google Webmaster Tools mempunyai peranan yang sangat penting dalam dunia website/blog
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigH5F0y7g6gOM9Iv45FACfHHOauEW0_kJ5jAfy0Wd-PIzXt2sQwOFWqPdQa1L6q2iqN9PTpSxAMzsQ4kK87c5l5wFR3tK7aNFBAZdlNpl8Br3Cy-s99kQ80y24E9xz9XAWRZutIEShvGg/s1600/google-webmaster-tools.jpg




Fitur Google Webmaster Tools :
1. Mengirim Peta Situs
Peta Situs atau Sitemap adalah daftar keseluruhan halaman situs. Dengan mengirimkan peta situs ke Google Webmaster Tools, ini akan memberikan akses kepada google untuk mengetahui seluruh halaman situs anda. Hal ini sangat dianjurkan agar google dapat sepenuhnya mencrawl isi halaman situs anda.
  • Mengakses Peta Situs : Dashboard » Pengoptimalan » Peta Situs » Tambahkan/Uji Peta Situs
2. Hapus URL
Pada saat halaman situs dihapus karena alasan tertentu, kadang mesin pencari seperti google akan terus membaca dan menampilkannya pada halaman hasil pencarian mereka, dan hal ini akan sangat berdampak buruk kepada situs anda. Ketika ini terjadi, anda bisa menghapusnya melalui Google Webmaster Tools.
  • Untuk menggunakan alat ini, anda bisa mengaksesnya melalui : Dashboard » Pengoptimalan » Hapus URL
3. Robots.txt File
Sebelum spiders search engine mengcrawl situs anda, terlebih dahulu mereka akan memeriksa Robots.txt. Pengaturan robots.txt yang dilakukan akan memberikan informasi kepada spider tentang apa saja yang boleh dan tidak boleh mereka rayapi. Jika pengaturan robots.txt default, otomatis spiders akan membaca semua halaman situs tanpa terkecuali. Nah hal inilah yang terkadang membuat situs mengalami Duplikasi Deskripsi Meta dan Tag Judul.
  • Untuk menguji robots.txt, anda bisa membukanya melalui : Dashboard » Kesehatan » URL yang dicekal
4. Demosi Tautsitus
Tautsitus/Sitelinks adalah tautan yang secara otomatis akan diberikan oleh google untuk situs anda. Namun untuk mengganti sitelinks tertentu yang dianggap tidak relevan dan menggantinya dengan yang relevan, anda bisa menggunakan tools ini. Sebagai contoh anda bisa melihat gambar di bawah ini.


Google Webmaster Sitelinks
  • Untuk menentukan sitelinks, buka Dashboard » Konfigurasi » Tautsitu
5. Status Indeks
Status indeks Google Webmaster Tools akan memberikan informasi yang akurat kepada anda tentang jumlah halaman yang diindeks oleh google. Pada bagian halaman lanjutan, semua informasi situs anda berupa Total terindeks, Pernah dirayapi, diindeks dan dicekal oleh robots.txt akan ditampilkan secara detail dan akurat.


Google Webmaster Status Indeks
  • Untuk melihat status indeks, silahkan buka : Dashboard » Kesehatan » Status Indeks
6. Kesalahan Perayapan
Kesalahan yang ditemukan oleh spiders crawler biasanya dalam bentuk halaman yang tidak ditemukan (error 404). Hal ini terjadi karena beberapa faktor, diantaranya penghapusan halaman, penggantian URL dan sebagainya. Namun, Apabila anda mengalami hal demikian, pastikan anda menghapus semua halaman yang tidak ditemukan tersebut karena hal ini akan sangat berpengaruh kepada situs anda.
  • Untuk mengetahui adanya halaman tidak ditemukan, buka : Dashboard » Kesehatan » Kesalahan Perayapan
7. Penyempurnaan HTML
Penyempurnaan HTML adalah sebuah alat untuk membantu memperbaiki kinerja situs dengan cara memberikan informasi apabila terjadi duplikasi deskripsi meta dan tag judul halaman situs. Ketika situs anda mengalaminya, anda bisa mencegah dan memperbaikinya melalui alat ini.
  • Anda bisa mengaksesnya melalui : Dashboard » Pengoptimalan » Penyempurnaan HTML
Selain beberapa poin di atas, google webmaster tools masih mempunyai banyak fitur yang bisa dipergunakan. Jika ada pertanyaan silahkan tuliskan komentar anda dibawah ini. Sekian dan Terima kasih. 

sumber : google

Friday, May 9, 2014

Cara Membuat Meta Tag Di Blogspot

Cara Membuat Meta Tag Di Blogspot - Lagi demen ngulik blog apalagi baru pertama kali kenal blog, pasti pondasi utama atau menata adalah kewajiban karena hanya sekali saja untuk men setting meta tag atau deskripsi sebuah blog.

Cara Membuat Meta Tag Di Blogspot. Meta Tag adalah elemen atau tag dalam bahasa pemrograman HTML atau XHTML yang dipakai untuk mengaplikasikan metadata dalam suatu halaman web. Nah agar search engine dapat mengoleksi informasi pada halaman blog anda, ada baiknya memsanag meta tag. Berikut adalah contoh meta tag seo friendly yang sudah pernah saya coba, bagaimana mau tau Cara Membuat Meta Tag Di Blogspot Seo?

  1. Pertama-tama seperti biasa kita login ke blogger anda.
  2. Masuk ke Template > Edit HTML.
  3. Setelah itu cari script  <b:include data='blog' name='all-head-content'/> lalu hapus script di bawahnya sampai script <b:skin><![CDATA[/*
  4. Kemudian Copy script dibawah ini dan paste tepat dibawah script <b:include data='blog' name='all-head-content'/>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <title><data:blog.pageTitle/></title>
    <meta content='ISI DENGAN DESKRIPSI BLOG ANDA' name='DESCRIPTION'/>
    <meta content='ISI DENGAN KEYWORD BLOG ANDA' name='KEYWORDS'/> </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <title><data:blog.pageName/></title>
    <meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName' name='Description'/>
    <meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName' name='Keywords'/>
    </b:if>
    <meta content='index, follow' name='robots'/>
    <meta content='NAMA AUTHOR BLOG' name='author'/>
    <meta content='JUDUL BLOG' name='copyright'/>
    <meta content='1 days' name='revisit-after'/>
    <meta content='id' name='language'/>
    <meta content='id' name='geo.country'/>
    <meta content='Indonesia' name='geo.placename'/>
    <meta content='all-language' http-equiv='Content-Language'/>
    <meta content='global' name='Distribution'/>
    <meta content='global' name='target'/>
    <meta content='Indonesia' name='geo.country'/>
    <meta content='all' name='robots'/>
    <meta content='all' name='googlebot'/>
    <meta content='all' name='msnbot'/>
    <meta content='all' name='Googlebot-Image'/>
    <meta content='all' name='Slurp'/>
    <meta content='all' name='ZyBorg'/>
    <meta content='all' name='Scooter'/>
    <meta content='ALL' name='spiders'/>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
    <meta content='true' name='MSSmartTagsPreventParsing'/>
    <meta content='blogger' name='generator'/>
    <meta content='general' name='rating'/>
    <meta content='never' name='Expires'/>
  5. Nah ganti script yang berwarna merah sesuai dengan arahan script diatas seperti descripsi blog, keyword blog, judul blog dan author blog.
  6. Setelah itu simpan hasil edit tempalte anda dan tunggu beberapa hari hingga google bot memeriksa blog anda atau dengan cera cek melalui meta tag analysis.
 Selesai deh Cara Membuat Meta Tag Di Blogspot. Semoga Bermanfaat. Terima Kasih.

Printer Hp Laserjet Pro M12w

Keluaran baru dari produk HP yang masih mengeluarkan jenis laserjet untuk office atau perkantoran, yang mana membutuhkan printer yang bisa m...