Mengatasi Eror Judul/Title Pada Widget HTML/Javascript

Belakangan ini ada beberapa sobat blogger yang mengeluh pada saat menambahkan widget HTML/Javascript pada blog. Dikarenakan judul pada widget tersebut harus di isi, karena jika dibiarkan kosong maka akan terjadi error dengan keterangan seperti pada gambar dibawah.

Ada cara mudah mengatasinya, tetap tambahkan kodenya seperti biasa, klik pada Tambah Gadget -–> pilih HTML/Javascript -–> tambahkan kodenya kedalam kotak kosong yang tersedia, kemudian beri pada judul dengan kode <h2></h2>

 

 

Oke, semoga tips singkat ini bisa bermanfaat.

Membuat Menu Vertikal Sederhana

Sebelumnya saya selalu menulis mengenai pembuatan menu horizontal dan tidak pernah sekalipun menulis artikel menu vertikal. Pembuatan menu vertikal ini sangat mudah, hanya sedikit menambahkan kode css pada bagian template dan kode html pada sidebar. Bisanya kita yang malas berpikir untuk membuat menu vertikal, mengambil jalan mudah dengan menambahkan kode <ul><li> sehingga yang muncul adalah list-style-type bawaan template.

 

Untuk demo bisa sobat lihat disini, pada bagian menu vertikal tersebut saya menggunakan image sederhana yang hanya akan berwarna biru jika cursor menyorot pada link. Bisa saja membuat current page hover pada link, yang jika di klik akan selamanya berwarna biru selama kita berada pada halaman link tersebut, namun untuk awalnya sebaiknya menggunakan menu yang sederhana dulu.

1. Masuk ke bagian Edit HTML
2. Tambahkan kode css berikut ini sebelum kode ]]></b:skin>

   .clearit {
       margin: 0;
       padding: 0;
       height: 0;
       clear: both;
   }

    

   /* BUBBLE PLASTIC VERTICAL MENU */

   .bubplastic.vertical {
       width: 150px;
       margin: 0px;
       padding: 0px;
       display: block;
   }
   .bubplastic.vertical ul {
       display: block;
       list-style: none;
       margin: 0;
       padding: 0;
   }
   .bubplastic.vertical ul li {
       display: block;
       float: left;
       width: 100%;
       margin: 0;
       padding: 0;
       background: transparent url(http://lh6.ggpht.com/_7Y9pl24WpQY/TCTaMf6oL6I/AAAAAAAAEOU/WMlVDrN8s8M/bg-bubplastic-button_thumb%5B5%5D.gif) top left no-repeat;
   }

   .bubplastic.vertical ul li a {
       display: block;
       margin: 0;
       width: 100%;
       padding-left: 15px;
       text-transform: uppercase;
       font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
       font-size: 70%;
       color: #FFFFFF;
       text-decoration: none;
       background: transparent url(http://lh6.ggpht.com/_7Y9pl24WpQY/TCTaMf6oL6I/AAAAAAAAEOU/WMlVDrN8s8M/bg-bubplastic-button_thumb%5B5%5D.gif) top left no-repeat;
   }

   .bubplastic.vertical ul li a span.menu_ar {
       display: block;
       margin: 0;
       width: 100%;
       height: 22px;
       padding-top: 5px;
       padding-right: 15px;
       background: transparent url(http://lh6.ggpht.com/_7Y9pl24WpQY/TCTaMf6oL6I/AAAAAAAAEOU/WMlVDrN8s8M/bg-bubplastic-button_thumb%5B5%5D.gif) top right no-repeat;
       cursor: pointer;
   }

   /* BLUE HOVER */
   .bubplastic.blue ul li a:hover,
   .bubplastic.blue ul li.highlight a {
       background: transparent url(http://lh4.ggpht.com/_7Y9pl24WpQY/TCTaTTyG38I/AAAAAAAAEOk/s7mSQh3v_oo/bg-bubplastic-h-blue_thumb%5B3%5D.gif) top left no-repeat;
   }
   .bubplastic.blue ul li a:hover span.menu_ar,
   .bubplastic.blue ul li.highlight a span.menu_ar {
       background: transparent url(http://lh4.ggpht.com/_7Y9pl24WpQY/TCTaTTyG38I/AAAAAAAAEOk/s7mSQh3v_oo/bg-bubplastic-h-blue_thumb%5B3%5D.gif) top right no-repeat;
   }

3. Simpan Template.
4. Masuk Ke Elemen Halaman.
5. Klik Tambah Gadget pada bagian sidebar.
6. Pilih yang HTML/Javascript, kemudian masukkan kode berikut kedalamnya :

   <div class="menu bubplastic vertical blue">
       <ul>
           <li><span class="menu_r"><a href="http://miscah.blogspot.com/" target="_self"><span class="menu_ar">About</span></a></span></li>
           <li><span class="menu_r"><a href="http://miscah.blogspot.com/" target="_self"><span class="menu_ar">Contact Us</span></a></span></li>
           <li><span class="menu_r"><a href="http://miscah.blogspot.com/" target="_self"><span class="menu_ar">Advertiser</span></a></span></li>
           <li><span class="menu_r"><a href="http://miscah.blogspot.com/" target="_self"><span class="menu_ar">Banner</span></a></span></li>
           <li><span class="menu_r"><a href="http://miscah.blogspot.com/" target="_self"><span class="menu_ar">Link</span></a></span></li>
       </ul>
       <br class="clearit" />
   </div>

7. Simpan.

 

Yang harus diganti adalah tulisan yang berwarna hijau dan merah. Selamat mencoba !

Simple CSS

 

Template Information

 

Name	Simple CSS
Author	My Blogger Themes
Type	Blogger Template
Properties	White, Red, 2 Columns, Right Sidebar, Simple

• Live Demo
• Download Theme

A Name Atribut

Rasanya belakangan ini saya agak malas menulis di blog ini, sedikit jenuh dan ditambah dengan adanya world cup 2010 sedikit menyita waktu saya. Kali ini saya akan memberikan tips lama tapi baru, lama buat blogger senior dan baru buat newbie. Yaitu penggunaan atribut a name pada tulisan/postingan di blog. A name sendiri berfungsi untuk menyorot link secara otomatis jika di klik akan menuju pada link yang dimaksud dan tentunya pada halaman postingan yang sama.

 

Link tersebut langsung mengarah pada link lain pada satu halaman posting, sehingga bisa memudahkan penulis membawa pengunjung pada tulisan yang dimaksud. Kodenya sangat mudah, hanya dengan menambahkan <a href=”#link yang di maksud”>Link</a> dan <a name=”link yang maksud”>Hasilnya</a>

 

Contohnya seperti ini :

 

<p> <a href="#Blogger 8">Klik disini</a> </p>

<h2>Blogger 1</h2>
<p>Judul Tulisan bla bla bla bla bla</p>

<h2>Blogger 2</h2>
<p>Judul Tulisan bla bla bla bla bla</p>

<h2>Blogger 3</h2>

<p>Judul Tulisan bla bla bla bla bla</p>

<h2>Blogger 4</h2>

<p>Judul Tulisan bla bla bla bla bla</p>

<h2>Blogger 5</h2>
<p>Judul Tulisan bla bla bla bla bla</p>

<h2>Blogger 6</h2>
<p>Judul Tulisan bla bla bla bla bla</p>

<h2>Blogger7</h2>
<p>Judul Tulisan bla bla bla bla bla</p>

<h2><a name="Blogger 8">Hasilnya</a></h2>
<p>Hasilnya bisa dilihat disini</p>

<h2>Blogger 9</h2>
<p>Judul Tulisan bla bla bla bla bla</p>

<h2>Blogger 10</h2>

<p>Judul Tulisan bla bla bla bla bla</p>

 

 

Klik disini

Blogger 1

Judul Tulisan bla bla bla bla bla

Blogger 2

Judul Tulisan bla bla bla bla bla

Blogger 3

Judul Tulisan bla bla bla bla bla

Blogger 4

Judul Tulisan bla bla bla bla bla

Blogger 5

Judul Tulisan bla bla bla bla bla

Blogger 6

Judul Tulisan bla bla bla bla bla

Blogger7

Judul Tulisan bla bla bla bla bla

Hasilnya

Hasilnya bisa dilihat disini

Blogger 9

Judul Tulisan bla bla bla bla bla

Blogger 10

Judul Tulisan bla bla bla bla bla

 

 

Mudah ya, sip selamat mencoba !

Spirad

 

Template Information

 

Name	Spirad
Author	My Blogger Themes
Type	Blogger Template
Properties	White, Black, 2 Columns, Multi Columns, Right Sidebar
Include	Avatar Mybloglog, Related Posts

• Live Demo
• Download Theme

Comercon

Template Information

Name	Comercon Blogger Template
Type	Blogger Template
Properties	Blue. Gray, 2 Columns, Right Sidebar
Include	Related Posts

• Live Demo
• Download Theme

Memasang Text Berjalan Recent Posts di Blog

Widget recent post biasa kita jumpai dengan model dan bentuk yang rata-rata sama, dengan kode http://miscah.blogspot.com/feeds/posts/default maka widget default recent posts dengan mudah terpasang di blog. Ada pula widget recent posts yang disertai thumbnail atau gambar dari postingan dan beberapa widget recent posts lainnya yang bisa kita jumpai di beberapa blog yang berisi tutorial blog.

 

Agak berbeda dengan recent posts pada umumnya, recent post berikut adalah recent posts atau postingan terakhir dari blog yang berjalan atau biasa kita sebut dengan marquee. Contoh demonya bisa sobat lihat disini. Tertarik ingin memasangnya? berikut langkah singkat dan padatnya, tidak perlu backup template karena kita akan meletakkannya langsung di elemen halaman.

 

• Pada Elemen Halaman, klik Tambah Gadget.

   

  
• Kemudian pilih yang HTML/Javascript.
• Masukkan kode berikut kedalamnya :

  <script type='text/javascript'>
  //<![CDATA[
  function RecentPostsScrollerv2(json)
  {
              var sHeadLines;
              var sPostURL;
              var objPost;
              var sMoqueeHTMLStart;
              var sMoqueeHTMLEnd;
              var sPoweredBy;
              var sHeadlineTerminator;
              var sPostLinkLocation;
              try
              {           
              sMoqueeHTMLStart = "\<MARQUEE onmouseover=\"this.stop();\" onmouseout=\"this.start();\" ";           
              if( nWidth)
              {
                  sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"" + nWidth + "%\"";
              }
              else
              {
                  sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"100%\"";
              }

              if( nScrollDelay)
              {
                  sMoqueeHTMLStart = sMoqueeHTMLStart + " scrolldelay = \"" + nScrollDelay + "\"";
              }
              if(sDirection)
              {
                  sMoqueeHTMLStart = sMoqueeHTMLStart + " direction = \"" + sDirection + "\"";
                  if(sDirection == "left" || sDirection =="right")
                  {
                      //For left and right directions seperate the headilnes by two spaces.
                      sHeadlineTerminator = "&nbsp;&nbsp;";
                  }
                  else
                  {
                      //For down and up directions seperate headlines by new line
                      sHeadlineTerminator = "\<br/\>";
                  }
              }
              if(sOpenLinkLocation =="N")
              {
                  sPostLinkLocation = " target= \"_blank\" ";
              }
              else
              {
                  sPostLinkLocation = " ";
              }
              sMoqueeHTMLEnd = "\</MARQUEE\>"
              sHeadLines = "";
              for(var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++)
              {
                  objPost = json.feed.entry[nFeedCounter];
                  for (var nCounter = 0; nCounter < objPost.link.length; nCounter++)
                     {
                      if (objPost.link[nCounter].rel == 'alternate')
                      {
                            sPostURL = objPost.link[nCounter].href;
                            break;
                      }
                  }

  sHeadLines = sHeadLines + "\<b\>"+sBulletChar+"\</b\> \<a " + sPostLinkLocation + " href=\"" + sPostURL + "\">"  + objPost.title.$t + "\</a\>" + sHeadlineTerminator;
              }           
              document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd )
              }
              catch(exception)
              {
                  alert(exception);
              }
  }
  //]]>
  </script>

  <script style="text/javascript"> var nMaxPosts = 20; var sBgColor; var nWidth; var nScrollDelay = 180; var sDirection="left"; var sOpenLinkLocation="Y"; var sBulletChar="•"; </script> <script style="text/javascript" src="http://miscah.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"></script>

• Simpan.

 

Keterangan :

1. Ganti kode yang berwarna merah dengan alamat blog sobat.

    

2. var nMaxPosts = 20 adalah jumlah postingan terakhir.

    

3. var nScrollDelay = 180 adalah kecepatan text.

    

4. var sDirection="left" untuk text berjalan dari kanan ke kiri, ganti dengan right jika ingin text tersebut berjalan dari kiri ke kanan.

    

5. var sOpenLinkLocation="Y" untuk link pada halaman yang sama, ganti dengan "N" untuk membuka link pada jendela baru (new tab).

    

6. var sBulletChar="•" adalah icon kecil pada bagian depan setiap link, bisa diganti dengan apa saja sesuai selera.

 

Semoga bermanfaat.

Cara Memasang Replay to Comment di Kotak Komentar

Salah satu opsi cara membalas komentar dengan cepat dan praktis adalah dengan memasang widget replay pada kotak komentar blog. Pada dasarnya sama saja dengan membalas komentar pada umumnya, namun cara ini lebih praktis dan cepat. Berbeda dengan replay pada wordpress yang menempatkan komentar balasan dalam satu kolom dengan komentar pertama. Untuk widget yang satu ini akan saya bahas lain waktu, sekarang kita coba membuat yang simple dulu.

 

Buat yang belum memasangnya, berikut ada sedikit langkah mudah untuk memasangnya di blog. Sebelum memasang memasangnya, silahkan backup template-nya terlebih dahulu, untuk menghindari hal-hal yang tidak di inginkan.

 

1. Masuk Ke Tata Letak.

    

2. Pilih tab Edit HTML.

    

3. Klik Expand Template Widget.

    

4. Cari kode <data:commentPostedByMsg/> kemudian letakkan kode berikut tepat dibawahnya

    

   <span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>[Reply to comment]</a></span>

5. Ganti kode yang berwarna merah (YOUR-BLOG-ID) dengan ID blog sobat, untuk melihat ID blog, silahkan perhatikan pada address pada browser, contoh pada gambar dibawah ini.

    

6. Jika sudah selesai jangan lupa Simpan Template.

 

Selamat mencoba, semoga berhasil !