Kali ini shevy mau coba share cara membuat Tooltip dengan menggunakan CSS tanpa Javascript, jadi tidak akan memberatkan loading blog. Untuk penggunaan CSSnya shevy menggunakan CSS3 jadi tidak akan support di IE6, dan hanya akan berjalan di IE8, Mozilla 3.5, dan Opera 10, browser lainnya belum di coba.

• Kemudian simpan perubahan.

• pada saat akan memasukan link pada Html atau template, tambahkan beberapa tag seperti dibawah ini :

• Setiap kamu akan membuat link dengan fitur tooltip, kamu harus memasukan tag class="tooltip", seperti contoh diatas, tag yang shevy tandai dengan warna biru.

• Untuk tag yang shevy tandai dengan warna hijau, adalah untuk deskripsi atau keterangan atau tulisan apapun yang akan muncul pada kotak tooltips nanti.

• Sedangkan tag yang shevy tandai dengan warna ungu, adalah untuk memasukan gambar thumbnail pada tooltip. gunakan tag ini jika kamu mau memasukan gambar pada tooltip-nya.

• Langkah pertama, Login ke blogger - dari halaman dashboard masuk ke Tata Letak / Layout  - Kemudian masuk ke tab Edit Html.

• Centang tanda Expand Widget Templates.

• Kemudian cari kode seperti dibawah ini.

• Ganti kode diatas dengan kode dibawah ini.

• Kemudian klik Save Template.

• Sekarang masuk ke tab Elemen Halaman / Page Elements. Dan tambahkan sebuah widget baru dengan klik add gadget / tambah gadget. Lalu pilih type HTML / Javascript.

• Dan masukan script dibawah ini pada widget baru tadi.

• Silahkan ubah kode alamat_blog_kamu dengan alamat blog kamu.

• Angka 200, merupakan jumlah maksimal artikel yang akan ditampilkan. kamu bisa merubahnya sesuai dengan keinginan kamu.

• Kemudian klik save. dan lihat hasilnya.

1. Widget Recent Comment dengan javascript, Beginner version (sok  inggris, hehe).
2. Widget Recent Comment tanpa Javascript, yang ini paling gampang.

• Langkah pertama login ke blogger - dari halaman Dashboard masuk ke Tata Letak / Layout - Kemudian masuk ke tab Elemen Halaman / Page Elemen.
• Selanjutnya tambahkan gadget baru, dengan memilih Tambah Gadget / Add Gadget. Pilih type HTML / Javascript.
• Kemudian masukan script dibawah ini kedalam gadget baru tersebut.
<script style="text/javascript"> function showrecentcomments(json) { var numcomments = 5; var showcommentdate = true; var showposttitle = true; var numchars = 100; for (var i = 0; i < numcomments; i++) { var entry = json.feed.entry[i]; var alturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } alturl = alturl.replace("#", "#comment-"); var postlink = alturl.split("#"); postlink = postlink[0]; var linktext = postlink.split("/"); linktext = linktext[5]; linktext = linktext.split(".html"); linktext = linktext[0]; var posttitle = linktext.replace(/-/g," "); posttitle = posttitle.link(postlink); var commentdate = entry.published.$t; var cdyear = commentdate.substring(0,4); var cdmonth = commentdate.substring(5,7); var cdday = commentdate.substring(8,10); var monthnames = new Array(); monthnames[1] = "Jan"; monthnames[2] = "Feb"; monthnames[3] = "Mar"; monthnames[4] = "Apr"; monthnames[5] = "May"; monthnames[6] = "Jun"; monthnames[7] = "Jul"; monthnames[8] = "Aug"; monthnames[9] = "Sep"; monthnames[10] = "Oct"; monthnames[11] = "Nov"; monthnames[12] = "Dec"; if ("content" in entry) { var comment = entry.content.$t;} else if ("summary" in entry) { var comment = entry.summary.$t;} else var comment = ""; var re = /<S[^>]*>/g; comment = comment.replace(re, ""); document.write('<br/>'); if (showcommentdate == true) document.write('On ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday + ' '); document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> commented'); if (showposttitle == true) document.write(' on ' + posttitle); document.write('<br/>'); if (comment.length < numchars) { document.write('<i>'); document.write(comment); document.write('</i>');} else { document.write('<i>'); comment = comment.substring(0, numchars); var quoteEnd = comment.lastIndexOf(" "); comment = comment.substring(0, quoteEnd); document.write(comment + '...<a href="' + alturl + '">(more)</a>'); document.write('</i>');} document.write('<br/>'); } document.write('<br/>'); } </script> <script src="http://Alamat_blog_kamu.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"> </script>

• Script yang saya tandai dengan warna putih, ganti dengan alamat blog kamu. 
• Setelah memasukan script diatas, jangan lupa kasih judul widget tersebut. Seperti contoh gambar dibawah.

• Langkah terakhir save template, dan lihat hasilnya.

• Langkah pertama login ke blogger - dari halaman Dashboard masuk ke Tata Letak / Layout - kemudian masuk ke tab Elemen Halaman / Page Element.
• Tambahkan gadget baru, dengan klik Tambah Widget / Add Gadget. Kemudian pilih type Feed. Seperti gambar dibawah ini.

• Kemudian masukan alamat feed comment blog kamu. Seperti url contoh dibawah ini. Ganti shevy-blog.blogspot.com dengan url blog kamu. 

•  Kemudian klik Next, dan akan disana akan muncul jendela seperti dibawah.

• Silahkan Ubah pengaturannya sesuai dengan keinginan kamu. Berikut keterangannya :

Judul : Judul Widget kamu misal "Recent Comments atau Komentar Terbaru".
Tampilkan : Jumlah komentar yang akan ditampilkan didalam widget.
Tanggal : Menampilkan tanggal komentar pada widget recent comments.
Sumber pengarang : nama orang yang memberikan komentar.
Buka link dijendela baru : Setiap kita klik link di widget itu, maka akan membuka tab baru pada browser.

• Jika sudah jangan lupa klik Simpan - Simpan Template. Dan lihat hasilnya.

• Masuk keakun blogger kamu - dari halaman dashboard langsung masuk ke Tata Letak - Edit HTML.
• Jangan lupa backup dulu template kamu, biar kalo gagal kita masih punya backup template.
• Centang pada tanda Expand Template Widget.
• Sekarang cari kode </head> 
  
  
  
  
  
  
  <!--Related Posts Scripts and Styles Start-->
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <style>
  #related-posts {
  float:center;
  text-transform:none;
  height:100%;
  min-height:100%;
  padding-top:2px;
  padding-left:5px;
  }
  #related-posts .widget{
  padding-left:6px;
  margin-bottom:10px;
  
  }
  #related-posts .widget h2, #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:#006699;
  }
  #related-posts a:hover{
  color:#003366;
  }
  #related-posts ul{
  list-style-type:circle;
  margin:0 0 0px 0;
  padding:0px;
  text-decoration:bold;
  font-size:15px;
  text-color:#000000
  }
  #related-posts ul li{
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguaa14XOcx0QZuly05liDk1SqIFseJkllr0CAq_114PxmIAaOPzq83tHruXvGvgkRLWJKOljbFs6JhfXdW-TPqrIRZCmx33avaEQF_aot7awTTz8hr4sGpH0nrFCFTI0itvogEpmhNEXY/s1600/xxz.gif) no-repeat ;
  display:block;
  list-style-type:none;
  margin-bottom: 4px;
  padding-left: 15px;
  padding-top: 0px;}
  </style>
  <script type='text/javascript'>
  var relatedpoststitle=&quot;Related Posts&quot;;
  </script>
  <script src='http://sites.google.com/site/shevybloginc/file/relatedposts.js' type='text/javascript'/>
  </b:if>
  <!--Related Posts Scripts and Styles End-->

Script yang shevy tandai dengan warna putih merupakan judul dari related posts, kamu bisa merubahnya dengan apapun contoh dengan "Artikel Terkait" ato apapun. Sedangkan pada kode https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguaa14XOcx0QZuly05liDk1SqIFseJkllr0CAq_114PxmIAaOPzq83tHruXvGvgkRLWJKOljbFs6JhfXdW-TPqrIRZCmx33avaEQF_aot7awTTz8hr4sGpH0nrFCFTI0itvogEpmhNEXY/s1600/xxz.gif, merupakan icon pada list item related posts, kamu juga bisa merubahnya dengan icon kamu. dengan mengganti url diatas dengan url tempat kamu menyimpan iconnya.

• Selanjutnya cari kode script seperti dibawah ini.
  
  <div class='post-footer-line post-footer-line-1'>   Ato
  <p class='post-footer-line post-footer-line-1'>

• Kemudian masukan kode script dibawah ini tepat dibawa kode <p class='post-footer-line post-footer-line-1'>.

<!-- Related Posts Code Start--> <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> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='' style='display:none'/> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(); </script> </div> </b:if> <!-- Related Posts Code End-->

• Pada kode yang shevy tandai dengan warna putih var maxresults=5, merupakan jumlah maksimal artikel yang akan ditampilkan pada widget related posts. Silahkan rubah sesuai keinginan.

1. Silakan masuk ke situs ini:
   
   
   

   http://brps.appspot.com
   

   
   
   
2. Kemudian klik menu Get Key and Install
   
3. Pada kolom Your blog address:, silahkan masukan url blog kamu.Kemudian klik Get Key and Installation steps.
4. Copy Kode Script yang diberikan, contohnya seperti dibawah ini.
   
   
   
   
   
   <script src="http://www.google.com/jsapi"/>
   <script src="http://brps.appspot.com/brps.js?key=a5d77198" type="text/javascript"/>
   <div id="related_posts"></div></script>
   
   
   
   
   
5. Setelah itu masuk ke akun blogger kamu.
6. Pilih tab Tata Letak / Layout, kemudian pilih add wigdet, pilih HTML / JavaScript.
7. Kemudian paste script tadi, kedalam widget.
8. Atur posisi widget sesuai keinginan kamu.
9. simpan widget, dan lihat hasilnya...
   

• Login ke Akun blogger kamu, dari halaman dashboard pilih tata letak kemudian pilih edit html.

•  Cari kode </head>.

• Kemudian copy kode dibawah ini, dan simpan setelah kode </head>

<style type='text/css'>


div#navmenu { margin: 0 0 0 0px; padding: 0; height: 44px; float: left;overflow:hidden;background-color:#323232;width:100%; }
div#navmenu ul { display: block; margin: 0; padding: 0 0 0 2px; height: 44px; float: left; }
div#navmenu ul li { display: block; margin: 0; padding: 0 2px 0 0; float: left; height: 44px; }
div#navmenu ul li a, div#navmenu ul li a:visited {
display: block; margin: 0; padding: 5px 0 0 0; height: 39px; line-height: 39px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px; text-transform: uppercase;
color: #ffffff;float: left;
}
div#navmenu ul li a span, div#navmenu ul li a:visited span {
display: block; float: left; margin: 0; padding: 0 0 0 26px;
height: 39px; line-height: 39px;
color: #ffffff;
}
div#navmenu ul li a span span, div#navmenu ul li a:visited span span {
display: block; float: left; margin: 0; padding: 0 26px 0 0;
height: 39px; line-height: 39px;
color: #ffffff;
}
div#navmenu ul li a:hover, div#navmenu ul li.current_page_item a, div#navmenu ul li.current_page a:visited {
color: #ff9600;
background: transparent url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhlVzq_BVHLj_P69R0s9BvRXP-m7-B9i6GV_SO8vrWmC3n5C7jpM6muvBtplRJA-I47YXIljkAzzqJ3lSRvceoT-bsw0ofOfjb29L-9ZkECvq60MBKzUJ_2Ajw_0UlWbq8ots6O553hTdG/&#39;) repeat-x scroll left bottom; text-decoration: none;
}
div#navmenu ul li a:hover span, div#navmenu ul li.current_page_item a span, div#navmenu ul li.current_page_item a:visited span {
background: transparent url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigp_jZ992btC2R5Sf_MGXv2wWTbSOSrF7m4Ny223BhK9UcKHxvgidGIC1ytKyO6rckJgFTo8JLHRfxHJ3H4d7anarH8PWkg5EjfBKfGGfTGZSan-kOCc1xO_wreZJkM9c0stQhnDTbxnqh/&#39;) no-repeat scroll left bottom; text-decoration: none;
color: #ff9600;
}
div#navmenu ul li a:hover span span, div#navmenu ul li.current_page_item a span span, div#navmenu ul li.current_page_item a:visited span span {
background: transparent url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRrAGJRVuDHnG_-8sw9dLnDOKYIS7OlNIn_cm-XakD3Mcz8mzSqlLA2dHdqhObmxItlRgBqbBAruR0Sg8niYWN5u6hbCp2srD-uzVRoU57rJqbQcAvqO1xe16W4LCk46PjIXaKqg77mGvU/&#39;) no-repeat scroll right bottom; text-decoration: none;
color: #ff9600;
}


</style> 

Catatan : script yang berwarna biru bisa kamu ganti dengan url gambar kamu.

• Simpan template kamu.

• Sekarang pergi ke Tata Letak - Dalam page element pilih add widget atau tambah widget - Kemudian pilih HTML / JAVASCRIPT. Lalu masukan kode scrript di bawah ini.

<div id='navmenu'>
<ul>

<li class='current_page_item'><a href='#'><span><span>Home</span></span></a></li>

<li class='page_item page-item-2'><a href='#' title='HTML Tutorials'><span><span>HTML</span></span></a></li>

<li class='page_item page-item-3'><a href='#' title='CSS Tutorials'><span><span>CSS</span></span></a></li>

<li class='page_item page-item-4'><a href='#' title='JS Tutorials'><span><span>Java Script</span></span></a></li>

<li class='page_item page-item-5'><a href='#' title='About us'><span><span>About</span></span></a></li>

<li class='page_item page-item-6'><a href='#' title='Contact us'><span><span>Contact</span></span></a></li>

</ul>
</div> 

• Login ke akun blogger kamu, kemudian masuk dashboard, masuk ke menu layout, pilih tab Edit HTML.
• Cari script ini  (yang berwarna merah).

• Kamu klik Blogger.com, trus login dulu.
  
• Trus Pilih Layout / Tata Letak, kemudian pilih Edit HTML.
• Copy script berikut ke dalam tag Template Blog kamu, tepatnya didalam tag Head.
  

#navbar-iframe {
display: none !important;
}

• Kemudian simpan.

1. Cisco PR7
2. Grokdotcom PR6
3. Links PR6
4. Greens PR6
5. Sirpi PR6
6. Sufehmi PR6 Indonesian+English
7. CurryBet PR6
8. NewCritics PR6
9. CarlGalloway PR6
10. MoFuse PR6
11. SocialTimes PR6
12. EarthEasy PR6
13. WeblogToolsCollection PR6
14. BusinessFinanceMag PR6
15. JustinTadlock PR6  ( nofollow = update 9 oktober 2009 )
    
16. LendingClub PR6
17. TheMallBlog PR6
18. HurryUpHarry PR6
19. UncommonPhotographers PR6
20. BrazenCareerist PR6
21. Pintini PR6 French
22. MarlenesCorner PR6 French
23. Frederic-Rolin PR6 French
24. VrPlumber PR5
25. Knrn PR5
26. SeoByTheSea PR5
27. Rumahabi PR5
28. BuzzMarketingWithBlogs PR5
29. ByteSizeCSS PR5
30. AstrumFutura PR5
31. RickyJordan PR5
32. NashuaTelegraph PR5
33. CanadiensEnEurope PR5
34. TimWindsor PR5
35. WPCult PR5
36. MouthPieceSports PR5
37. DmbcLLC PR5
38. DearDrMOZ PR5
39. GravityCube PR5
40. JustAddWater PR5
41. RebeccaWalker PR5
42. IncSub PR5
43. ScienceThatMatters PR5
44. ElleeSeymour PR5
45. Larholm PR5
46. Aimee PR5
47. PitchInvasion PR5
48. TheVirtualHandShake PR5
49. SteveRenner PR5
50. JankoAtWarpSpeed PR5
51. AlemSys PR5
52. Seolutions PR5
53. Rumahabi PR5
54. HenseiDemocracy PR4
55. PolyGEEK PR4
56. Kid666 PR4
57. Blueverse PR4
58. Kthread PR4
59. BarryWise PR4
60. RandomHacks PR4
61. MarketingResults PR4
62. StomperBlog PR4
63. ThesisThemeHQ PR4
64. MiddleZoneMusings PR4
65. WordpressMax PR4
66. HowToWakeUpEarly PR4
67. LillieAmmann PR4
68. CommunitySpark PR4
69. MarketingBlagger PR4
70. Snoo PR4
71. TheJunkDrawer PR4
72. Kikolani PR4
73. TechJaws PR4
74. ExtremeJohn PR4
75. Wnagele PR4
76. Poobah PR4
77. BlueHatSeo PR4
78. GrowSmartMaine PR4
79. ThisClassicalLife PR4
80. CostPerNews PR4
81. EdenDevelopment PR4
82. CreativityUnleashed PR4
83. PqInternet PR4
84. LinguisticsZone PR4
85. MoviesAtMidnight PR4
86. WorkAtHomeMomRevolution PR4
87. DesignAdaptations PR4
88. Selberg PR4
89. DrownRadio PR4
90. OMGPittsburgh PR4
91. ScrapScene PR4
92. MommyKnows PR4
93. MovieBlog PR4
94. LeoFogarty PR4
95. LifeInTheRough PR4
96. ExclusiveExecutiveResumes PR4
97. PHPCafe PR4
    
98. DaneMorgan PR3
99. BlogU PR3
100. PopcornNinja PR3
101. AlohaTeam PR3
102. TycoonBlogger PR3
103. WassupBlog PR3
104. Freyer PR3
105. DotComMogul PR3
106. RadPixels PR3
107. PositiveVibesSeo PR3
108. BlogJer PR3
109. Asimkins PR3
110. Pinksy PR3
111. Ruski PR3
112. ItsFrugalBeingGreen PR3
113. Isuman PR3
114. PotPolitics PR3
115. DannyDouglass
116. Zabadani PR3
117. xLevel PR3
118. GathAdams PR3
119. FiberDreams PR3
120. Inkatel PR3
121. BlackWaterBlog PR3
122. WebDirectory PR3
123. PowerDosh PR3
124. SlightlyMordant PR3
125. WallpaperStop PR3
126. DevilsLab PR2

Disini gw mau share tentang bagaimana cara untuk memasukan Dynamic Meta Tag pada blogger.

Sebuah Dynamic Meta Tag akan membantu kamu untuk mengoptimalkan mesin pencari dan blog kamu akan memiliki kesempatan lebih tinggi untuk masuk dalam peringkat yang baik di search engine.

Untuk caranya silakan ikuti langkah2 seperti di bawah ini.

Langkah Pertama

Langkah Kedua

Langkah Ketiga