Cara Memasang Google Bot, Yahoo Bot, Msn Bot Last Visit Di Blog

 Shadows || sob bagaimana saat ini baik baik sajakah semoga baik ya, nah kali ini saya akan share tentang cara memasang atau membuat widget google bot, yahoo bot, dan msn bot di blog anda semua, google bot, yahoo bot, maupun msn bot adalah sebuah widget di blog yang memberitahukan tentang kapan tanggal, bulan dan tahun robot google menghampiri blog anda,widget blog yang saya share kepada anda tersebut dapat membuat robot google senang berkunjung ke blog anda, dengan menggunakan widget google bot, yahoo bot, dan msn bot dapat mendatangkan robot google menuju blog anda, jika anda menginginkannya silahkan ikuti tutorberikut :

1. kunjungi situs http://www.scriptme.info/

2. kemudian klik salah satu yang ingin lebih dahulu anda buat, misalnya memmbuat google bot last visit, lihat gambar berikut

3. kemudian masukkan link blog anda dan klik "check google bot last visit"

4. maka akan keluar kode html untuk anda memasang widgetnya, copy dan paste pada blog anda

5. selesai.... jika anda ingin membuat widget yahoo bot dan msn bot tinggal klik tombol home pada menu kemudian klik yahoo/msn bot last visit

sekian dulu tentang cara memasang widget google bot, yahoobot, dan msn bot di blog, semoga bermanfaat untuk para bloger...

Cara Pasang Related Post dengan Tumbnails di Blog

Shadows || Apa khabar sobat blogger.. saya akan memberikan cara yang indah untuk sebuah artikel terkait di bawah setiap posting blog Anda, bersama dengan thumbnail. Artikel terkait dipilih dari posting lain dalam kategori yang sama/label/tag. Dengan hack ini banyak pembaca Anda akan tetap di situs Anda untuk waktu yang cukup lama ketika mereka melihat posting terkait kepentingan.

Mari gan kita menuju tkp:

1. Buka akun blogger Anda.

2. Masuk ke menu Template > Edit HTML > Proceed > centang Expand Template Widget
3. Cari kode dibawah ini :  </head>
4.Pastekan kode dibawah ini, diatas pada kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type="text/css">

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}

#related-posts h2{

font-size: 1.6em;

font-weight: bold;

color: black;

font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

color:black;

}

#related-posts a:hover{

color:black;

}

#related-posts  a:hover {

background-color:#d4eaf2;

}

</style>

<script type='text/javascript'>

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBkYfC3-NEp8OHZhST-aRp4nrUL1WodoTIh6U_Lpobidt81-_xBMvR-bt3-9ZOtip4SdpOF0neolFd_2-YXdMpYBXGGLjLstE0D3URI3ZbClnFw4q9hkTdiSXHEvQ1bNJl7kMkcK9d43iU/s1600/noimage.png";

var maxresults=5;

var splittercolor="#d4eaf2";

var relatedpoststitle="Related Posts";

</script>

<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>

<!-- remove --></b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

Catatan:

• Untuk mengubah gambar default bila tidak ada gambar yang tersedia, ganti URL warna biru dengan URL Anda sendiri.
• Untuk menampilkan lebih dari 5 postingan, ganti 5 nilai dari "var maxresults = 5;"
• Hapus kode violet jika Anda ingin artikel terkait ditampilkan di homepage.

       5.   Cari kode dibawah ini :

<div class='post-footer-line post-footer-line-1'>

Jika Anda tidak dapat menemukannya, kemudian mencari satu ini :

<p class='post-footer-line post-footer-line-1'>

atau,

<data:post.body/>

     

       6.  Pastekan kode dibawah ini dibawah pada kode diatas :

<!-- Related Posts with Thumbnails Code Start-->

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'>

</b:if>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>

<script type='text/javascript'>

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);

</script>

</div><div style='clear:both'/>

<!-- remove --></b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>

<a href='http://shadows-k.blogspot.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTU3wQOFazN_40fFUjWClQR9lWc6lq6gPT3aYLoeh_KTFwGSZbn70CdNUztd4YQTmD0K2Cr3q3YbyBY37uGeLR1CciYlI-etiF-lzWajuZuo-ULsp6Muc1QNU-gBLm0jvmkbtCIOb29P8D/s1600/best+blogger+tips.png'/></a>

</b:if></b:if>

<!-- Related Posts with Thumbnails Code End-->

Catatan:

• Ubah nilai 6 dari max-results=6 dengan jumlah posting yang ingin ditampilkan.
• Jika Anda ingin artikel terkait yang akan ditampilkan di homepage juga, hapus kode violet.

       7. Save Template Anda.

Cara Pasang Kotak Permalink di Bawah Postingan Untuk Menyebarkan Link

SHADOWS || Cara Membuat Kotak Permalink di Bawah Postingan Blog- Permalink adalah tautan permanen dari halaman postingan blog. Dengan membuat kotak permalink di bawah postingan, dapat mempermudah pembaca atau blogger lain untuk mengetahui permalink dari postingan yang sedang dibacanya.

Blogger lain bisa saja menyematkan kode HTML permalink itu di blognya, sehingga memberikan tautan (backlink) ke halaman postingan kita. Bagi anda para blogger yang tertarik untuk memasang di blognya, Silahkan untuk di terapakan di blog sobat.

Cara Buat Isi Kotak Permalink di Bawah Postingan Blog

1. Login ke blogger

2. Pilih Template kemudian Edit HTML

3. Jangan lupa centang "Expand Template Widget"

4. Cari kode <data:post.body/> Lalu taruh kode berikut berikut di bawahnya:

<br /><textarea cols='55' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2' style='margin-top:3px;width:auto;'>&lt;a href=&quot;<data:post.url/>&quot;&gt;<data:post.title/>&lt;/a&gt;</textarea><br/>

5. Save template.

Jika setelah disimpan kurang sesuai dengan tampilan blog kita, bisa kita edit. Untuk <data:post.body/>jika kita menggunakan Auto Read More, akan ada dua kode, pilih kode yang kedua. 55 adalah panjangnya kotak dan 2 adalah tingginya.

Selesai sudah Cara Pasang Kotak Permalink di Bawah Postingan Untuk Menyebarkan Link terpasang di blog sobat, semoga bermanfaat...

Membuat tooltip dengan menggunakan css

MEMBUAT TOOLTIP DENGAN MENGGUNAKAN CSS

---

---

Kali ini saya ingin berbagi pada teman blogger khususnya blogger  pemula yang mungkin masih belum tahu bagaimana membuat tooltip dengan menggunakan css. Saya memilih untuk menggunakan tooltip dengan css ini karena menganggap cukup ringan dari pada dengan menggunakan javascript.

Untuk membuatnya sobat bisa menggunakan cara di bawah ini:

• Seperti biasa login ke blog sobat.
• Pilh tata letak.
• Klik edit html.
• Letakkan kode di bawah ini di atas kode ]]</b:skin>hingga posisinya sbb:
  
  .tooltip {position:relative;}
  .tooltip span {display:none;}
  .tooltip:hover span {
  display:block;
  position:absolute;
  width:200px;
  left:20px;
  top:20px;
  background-color:#006633;
  border:3px solid #0099FF;
  padding:5px;
  font-size:15px;
  color:#000000;
  text-decoration:none;
  font-family:Verdana,arial, helvetica, sans-serif;}
  ]]></b:skin>

• Kemudian klik simpan.

CARA MENAMPILKAN KE DALAM POSTINGAN

<a href="http://vioren-ky.blogspot.com/2012/11/membuat-tooltip-dengan-menggunakan-css.html" class="tooltip"><span>MEMBUAT TOOLTIP DENGAN MENGGUNAKAN CSS</span>Tooltip</a>

Ganti link yang dicetak merah dengan link milik sobat.
Sedang yang berwarna hijau adalah text yang akan keluar,bisa diganti dengan text yang sobat inginkan.

Jika ingin mengganti background dengan sebuah gambar, maka sobat cukup menganti background-color:#006633; dengan alamat gambar milik sobat.

Cara menulis kodenya seperti di bawah ini:

background:url("http://i265.photobucket.com/albums/xx141/vioren_bucket/gambar8.jpg")no-repeat bottom;

Ganti alamat gambar yang dicetak merah dengan alamat gambar milik sobat.

Selesai sudah semoga bermanfaat...