Blog Geisha

Floating Share Tombol Jejaring Sosial Melayang - pada postingan kali ini kita akan membahas lagi tentang Social Bookmark lagi, sebelumnya saya juga pernah membahas Social Bookmark tetapi pada Social Bookmark atau tombol jejaring sosial sebelumnya letak dan penerapanya berada tepat di bawah posting jadi kita hanya bisa melihat pada saat membaca suatu artikel, nah kita akan membahas yang berbeda dari yang social bookmark sebelumnya, pada tombol jejaring social ini tempat dan munculnya tepat berada di samping kiri blog, jadi kapanpun kita bisa melihatnya, heheheh menarik juga, fungsinya juga sama saja dengan tombol jejaring atau social bookmark lainnya yaitu membagikan suatu artikel ke jejaring sosial lainnya seperti facebook, twitter, Digg dll. Bagaimana cara membuatnya kita mulai dengan langkah yang pertama.

• Masuk dahulu ke Blogger sobat,
• Masuk ke Rancangan,
• Pilih Elemen Edit,
• Klik Tambah Gadget,
• Selanjutnya, cari dan klik Javascript/Html
• Masukan script di bawah ini dan letakan kedalam Javascript/Html tersebut.

<style  type="text/css">
*{margin:0;padding:0;}

* html #z33sHare{
position:  absolute;
}

#z33sHare{
right:1%;width:  70px;background:transparant;border:0px solid  #E7E7E7;-moz-border-radius:3px;-webkit-border-radius:3px;
position:fixed;
bottom:  20%;
}

#z33sHare div{
padding:6px 6px 6px 5px;
}

#stw{
margin-left:-2px;
}

#sfs{
margin-left:-5px;
}

</style>
<div  id="z33sHare">
<div id="ssl-box">
<div id="stw">
<a  href="http://twitter.com/share" class="twitter-share-button"  data-count="vertical">Tweet</a><script  type="text/javascript"  src="http://platform.twitter.com/widgets.js"></script>
</div>
<div><a  title="Post to Google Buzz" class="google-buzz-button"  href="http://www.google.com/buzz/post"  data-button-style="normal-count"></a><script  type="text/javascript"  src="http://www.google.com/buzz/api/button.js"></script>
</div>
<div>
<script  type="text/javascript">
(function() {
var s =  document.createElement('SCRIPT'), s1 =  document.getElementsByTagName('SCRIPT')[0];
s.type =  'text/javascript';
s.async = true;
s.src =  'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s,  s1);
})();
</script>
<a class="DiggThisButton  DiggMedium"></a>
</div>
</div>
<div><a  name="fb_share" type="box_count"  href="http://www.facebook.com/sharer.php">Share</a><script  src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"  type="text/javascript"></script></div><div  style="clear:both;"></div></div>

• Bagaimana ? Tidak sulit bukan.
• Terakhir, Simpan dan lihat hasilnya.

• Pertama Log-in ke Blogger sobat,
• Masuk ke Rancangan,
• Pilih Edit Html, jangan lupa ceklist Expand Template Widget,
• Gunakan ctrl-F untuk mencari kode di bawah ini,

]]></b:skin>

• Lalu letakan kode di bawah ini persis sebelum kode di atas,

/* bottom
---------------------------- */ #bottom {
width: 660px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:#BDBABD;
padding: 15px 0 15px 0;
}
#bottom h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00;
font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}

#bottom ul {
padding: 0;
margin: 0;
}
#bottom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #031c5d;
}
#bottom ul li a {
display: block;
padding: 0 10px;
color:#0701FD;
text-decoration: none;
}
#bottom ul li a:hover {
background: #B1ACB1;
}

#left-bottom { /* yang ini nih kode kolom kiri */
width: 205px;
float: left;
padding-left:10px;
}
#center-bottom { /* kalo yg ini kode kolom tengah */
width: 205px;
float: left;
padding-left:10px;
}
#right-bottom { /* kalo yg ini kode kolom kanan */
width: 205px;
float: left;
padding: 0 5px 0 10px;
}

• Selanjutnya, gunakan ctrl-F untuk mencari kode yang sama seperti di bawah ini,

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

• selanjutnya letakan kode di bawah ini sebelum kode di atas,

<div id='bottom'>  <b:section class='bottom' id='left-bottom'/>
<b:section class='bottom' id='center-bottom'/>
<b:section class='bottom' id='right-bottom'/>
</div>

• Terakhir, Simpan Template.

• Untuk melihat hasilnya, coba kalian masuk ke Rancangan,
• Elemen Edit,
• Nah coba lihat bagian bawah blog apakah sudah ada 3 kolom widget baru ?

Cara Membuat Readmore Otomatis - pada postingan kali ini saya akan membahas bagaimana cara membuat readmore otomatis pada blog, readmore berfungi untuk pemenggalan suatu artikel dengan karakter kata yang bisa disesuaikan dengan tujuan untuk mempersingkat artikel pada suatu Homepage blog, readmore ini sudah otomatis terpasng pada blog jadi kalian tidak usah menggunakan cara kuno dan juga readmore otomatis ini juga dilengkapi dengan gambar jadi bisa disebut juga untuk memperbagus blog, sekarang bagaimana cara membuat Readmore Otomatis, sekarang coba lihat tutorial di bawah ini.

• Pertama, masuk ke Blogger kalian,
• Masuk ke Rancangan,
• Pilih Edit Html,
• Jangan lupa ceklist Expand Template Widget,

• Gunakan ctrl-F untuk mencari kode di bawah ini.

</head>

• Selanjutnya letakan kode di bawah ini persis di bawah kode di atas,

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/> 

• Ganti tulisan yang berwarna tersebut sesuai anda,

SEO Tutorial - Pada postingan kali ini saya akan membahas tentang penerapan meta tag otomatis yang berguna untuk poting atau artikel, sebelumnya saya juga pernah menerbitkan artikel tentang Pasang Meta Tag Seo Friendly dan fungsinya juga sama saja yaitu penerapan meta tag otomatis pada postingan, tetapi saya akan memberikan yang lebih baru dan juga telah diterapkan pada blog ini dan juga dengan menerapkan meta tag otomatis ini juga bisa mempercepat postingan baru diterima oleh mesin pencari, tidak lupa bahwa sebelumnya juga saya pernah menerbitkan tentang Pasang Meta Tag Pada Posting, tetapi kalian tidak perlu mengikuti cara tersebut, karena cara tersebut sudah lama alias kuno karena kita harus manual menuliskan meta tag tepat di bawah artikel kita cukup menyulitkan, dan juga bisa mengakibatkan Duplicat Meta Tag yang bisa ditendang Google, tetapi kalian tidak perlu khawatir karena pada postingan ini kita membahas meta tag otomatis pada postingan, langsung kita menuju tutorialnya,

Cara Pasang Meta Tag Otomatis Setiap Postingan seperti berikut :

• Tidak lupa untuk Log-in Blogger terlebih dahulu,
• Masuk Rancangan, 
• Pilih Edit Html,
• Silahkan kalian mencari kode di bawah ini,

<title><data:blog.pageTitle/></title>

• Selanjutnya hapus meta tag tersebut dengan meta tag di bawah ini,

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<meta content='Tulis Deskripsi Blog' name='DESCRIPTION'/>
<meta content='Tulis Kata Kunci Blog, pisahkan dengan koma' 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>

• Agar blog semakin SEO dan mudah dicari oleh mesin pencari, letakan meta tag di bawah ini di bawah meta tag di atas,

<meta content='Blogsobat' name='copyright'/>
<meta content='Nama Sobat' name='author'/>
<meta content='index, follow' name='robots'/>
<meta content='2 days' name='revisit-after'/>
<meta content='id' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='global' name='distribution'/>
<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'/>
<link expr:href='data:blog.url' rel='canonical'/>

• Selamat blog kamu sudah SEO dan otomatis meta tag setiap postingan.
• Tidak lupa untuk Save Template.