Cara Menghilangkan Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) pada Blogspot

Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) adalah sebuah fitur yang dibuat oleh blogger. Sesuai dengan namanya Langgan: Entri (Atom) adalah fasilitas untuk berlangganan artikel/posting, sedangkan Subscribe to: Poskan Komentar (Atom) adalah fasilitas berlangganan bagi pengunjung untuk mengetahui komentar-komentar atas posting/artikel dari blog yang bersangkutan.

Namun demikian sebagian blogger tidak menyukai fitur-fitur tersebut, karena selain terlalu sederhana, juga telah tersedia fasilitas berlangganan yang lebih canggih seperti FeedBurner.Com, maka dari itu sebagian blogger lebih suka menghapus/menghilangkan fitur Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) dari blog mereka.

Nah jika Anda ingin mengikuti jejak sebagian blogger tersebut, berikut ini Cara Menghilangkan Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) pada Blogspot:

A. Cara Menghapus Langgan: Entri (Atom):

1. Login ke Blogspot => klik Rancangan/Design => pilih Edit HTML, kasih centang pada kotak Expand Template Widget dan gunakan tombol Find untuk memudahkan pencarian kode;
2. Cari kode di bawah ini:
   
   <b:include data='feedLinks' name='feedLinksBody'/>
3. Hapus/delete semua kode di atas, lalu Save Template, selesai.

B. Cara Menghapus Subscribe to: Poskan Komentar (Atom):

1. Login ke Blogspot => klik Rancangan/Design => pilih Edit HTML, kasih centang pada kotak Expand Template Widget dan gunakan tombol Find untuk memudahkan pencarian kode;
2. Cari kode di bawah ini:
   
   <div class='feed-links'>
   <data:feedLinksMsg/>
   <b:loop values='data:links' var='f'>
   <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
   </b:loop>
   </div>
3. Hapus/delete semua kode di atas, lalu Save Template, selesai.

Demikianlah tutorial sederhana cara hapus/hilangkan Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) pada Blogspot ini, semoga bermanfaat.

= = = = = = = => Selamat Mencoba, Semoga Sukses!!! <= = = = = = = =

Cara Merubah Warna Link Pada Blogspot

Tutorial Cara Merubah Warna Link Pada Blogspot ini adalah untuk menjawab pertanyaan dari sahabat blogger kita yaitu Place to modify blog, bertanya melalui kolom komentar yang pertanyaannya begini: " bozz, buat recent comment yg kayak punya bozz itu gmn caranya? warna komentatornya warna hijau,, punyaku biasa2 aja".

Setelah saya pikir-pikir, mungkin yang memerlukan artikel semacam ini tidak hanya sahabat Place to modify blog saja, tapi masih ada yang lain, maka akhirnya saya memutuskan untuk menjawab pertanyaan tersebut melalui posting ini, ya itung-itung buat nambah jumlah posting yang berarti akan menambah jumlah pengunjung blog ini, betul khan?

Lho koq pertanyaan dengan jawaban/judul posting tidak nyambung? Tenang saja tidak perlu khawatir ntar pasti nyambung.

Mengapa warna komentatornya pada recent comment blog ini koq berwarna hijau? Karena pada saat menulis komentar, sang komentator menautkan link/url pada identitasnya, sehingga nama komentator warnanya berubah menjadi warna link.

Sebenarnya warna link yang ada di recent comment itu sama dengan yang ada di posting maupun di sidebar blog ini, coba perhatikan semua teks yang mengandung link/url pada blog ini, kecuali pada lable, semua warnanya sama, artinya adalah yang perlu dilakukan hanya merubah warna link blog saja.

Nah biar lengkap, berikut ini Cara Merubah Warna Link Pada Blogspot:

1. Login ke Blogger => Rancangan => Edit HTML, kasih centang pada Expand Template Widget;
2. Cari kode ini a:link { contoh struktur kode yang ada di template blog ini:
   
   a:link {
   color: #0AF251;
   color:#04B33A;
   text-decoration:none;
   }
3. Gantilah kode color (warna) sesuai selera Anda;
4. Save Template, lalu perhatikan apa yang terjadi? Heheeeeee, selesai.

Gimana gampang khan? Oh ya sering-sering aja nanya biar saya nggak pusing-pusing cari materi buat posting blog ini, tapiiiiiiiiiiiiiiiii yang ditanyakan sebaiknya seputar blog ini, kalau diluar itu berarti saya harus googling dulu atau menjawab dengan jawaban "saya tidak tahu", maklum masih belajar juga, he he heeeeee…….

= = = = = = = => Selamat Mencoba, Semoga Sukses!!! <= = = = = = = =

Cara Menambah 3 (tiga) Kolom di Bawah Header

Gambar 3 Kolom di Bawah Header

Langsung saja, jika Anda ingin menambah 3 (tiga) kolom di bawah header blog Anda, berikut ini Cara Membuat 3 (tiga) Kolom di Bawah Header:

1. Login dulu ke Blogger, pilih Rancangan/Layout => Edit HTML, kasih tanda centang pada Expand Template Widget;
2. Cari kode ]]></b:skin>;
3. Sebelum atau di atas kode ]]></b:skin>, letakkan kode di bawah ini:
   
   /* Top Header
   ---------------------------- */
   #topheader {
   width:930px;
   clear:both;
   float:left;
   color:#333;
   background:#fff;
   margin:0 auto;
   padding:0 0 10px;
   }
   
   #topheader a:visited {
   color:gray;
   text-decoration:none;
   }
   
   #topheader h2 {
   font-size:11px;
   font-weight:700;
   line-height:1.4em;
   text-transform:uppercase;
   border-bottom:1px dotted silver;
   margin:0 0 10px;
   padding:20px 0 2px;
   }
   
   #topheader ul {
   color:#333;
   margin:0;
   padding:0;
   }
   
   #topheader ul li {
   list-style-type:none;
   background:fff;
   border-bottom:1px dotted #ccc;
   padding-left:17px;
   margin-top:2px;
   }
   
   #left-topheader {
   width:360px;
   float:left;
   padding-left:15px;
   }
   
   #center-topheader {
   width:230px;
   float:left;
   padding:0 20px;
   }
   
   #right-topheader {
   width:260px;
   float:right;
   padding-right:15px;
   }
   
   
   Keterangan:
   #topheader adalah kode untuk kolom secara keseluruhan;
   #left-topheader adalah kode untuk kolom sebelah kanan;
   #center-topheader adalah kode untuk kolom pada posisi tengah;
   #right-topheader adalah kode untuk kolom sebelah kiri;
   Width: px adalah kode untuk ukuran lebar kolom;
   Padding adalah jarak sela antara kolom satu dengan lainnya;
   
   Silahkan dimodifikasi, dengan catatan harus sama dengan jumlah lebar pada template Anda dan untuk mengetahui ukuran lebar template, cari kode: #outer-wrapper dan lihat nilai width-nya;
4. Selanjutnya cari kode di bawah ini:
   
   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
   </b:section>
5. Tepat di bawah kode di atas, tambahkan kode di bawah ini:
   
   <div id='topheader'>
   <b:section class='topheader' id='left-topheader' preferred='yes'/>
   <b:section class='topheader' id='center-topheader' preferred='yes'/>
   <b:section class='topheader' id='right-topheader' preferred='yes'/>
   </div>
6. Simpan Tamplate, selesai.

Demikianlah tutorial cara menambah 3 (tiga) kolom di bawah header blog ini, semoga bermanfaat.

= = = = = = = => Selamat Mencoba, Semoga Sukses!!! <= = = = = = = =

Cara Membuat Teks Berjalan di Menu Bar

Pernak pernik pada website/blog bagi sebagian orang mungkin diperlukan supaya terlihat unik dan menarik, meskipun terkadang pernak-pernik itu tidak memberikan manfaat terhadap perkembangan website/blog itu sendiri, namun selama itu tidak mengganggu dan/atau merusak website/blog tidak ada salahnya digunakan.

Salah satu pernak-pernik yang bisa dipasang oleh pengguna blogspot adalah berupa teks berjalan pada Menu Bar seperti yang saya pasang pada blog ini, coba tengok ke atas, bagaimana menurut Anda?

Jika tertarik juga untuk memasang teks berjalan pada blog Anda, cara membuatnya sangat mudah, cukup memasukan script pada template blog.

Cara Membuat Teks Berjalan di Menu Bar, silahkan ikuti langkah-langkahnya sebagai berikut:

1. Login ke blogger;
2. Pada menu Layout => Edit HTML, jangan lupa centang kotak Expand Template;
3. Letakkan kode dibawah ini diatas kode </head>:
   
   <script type='text/javascript'>
   //<![CDATA[
   msg = "Blog Serba Tersedia";
   msg = "| Tutorial | Musik | Video | Software | DLL |" + msg;pos = 0;
   function scrollMSG() {
   document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
   if (pos > msg.length) pos = 0
   window.setTimeout("scrollMSG()",200);
   }
   scrollMSG();
   //]]>
   </script>
   
   Contoh memasangnya seperti di bawah ini:
   
   <script type='text/javascript'>
   //<![CDATA[
   msg = "Blog Serba Tersedia";
   msg = "| Tutorial | Musik | Video | Software | DLL |" + msg;pos = 0;
   function scrollMSG() {
   document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
   if (pos > msg.length) pos = 0
   window.setTimeout("scrollMSG()",200);
   }
   scrollMSG();
   //]]>
   </script>
   </head>
4. Jika sudah, klik Save Template Selesai.

Keterangan :

• Teks berwarna merah adalah teks yang akan tampil pada Menu Bar;
• Angka 200 adalah merupakan kecepatan gerak dari teks, semakin kecil nilainya semakin cepat gerakan teksnya, boleh diganti sesuai keinginan masing-masing.

= = = = = = = => Selamat Mencoba, Semoga Sukses!!! <= = = = = = = =

Cara Menghilangkan Border Image di Blog

Bagi sebagian orang, tampilan border image atau bingkai photo dirasa kurang cantik, namun bagi sebagian orang lagi punya pendapat sebaliknya. Nah jika Anda termasuk bagian dari sebagian orang dalam kategori pertama, Anda bisa mengikuti cara ini untuk menghilangkan border Image di Blog Anda.

Namun sebelum Anda menggunakan trik ini untuk menghilangkan border image di blog Anda, sebaiknya lihat dahulu contoh image yang bordernya telah dihilangkan yaitu di bawah ini:

Gimana apakah Anda tertarik? Jika iya, mari ikuti Cara Menghilangkan Border Image di Blog, sebagai berikut :

1. Login ke Blogspot Anda;

2. Tata letak;

3. Edit HTML;

4. Cari kode di bawah ini:

.post img {
border:1pxsolid $bordercolor;
margin:4px;
padding:4px
}

Untuk kemudahan pencarian kode di atas, gunakan tombol Find atau tekan Ctrl + F, masukan kode .post img { ke kotak Find, ketemu dech.

5. Ganti nilai border:1px menjadi border:0px;

6. Save Tamplate, selesai!!!

>>>>>>>>Selamat Mencoba, Semoga Sukses!!!<<<<<<<<

Cara Menambah 2 (dua) Kolom di Bawah Posting

Sebelum Anda membaca artikel ini lebih lanjut, coba perhatikan dahulu di bawah posting ini, disana terdapat 2 (dua) kolom yang satu kolom Feed RSS dan satu lagi kolom Related Post (Artikel Terkait). Itulah pembahasan kita kali ini yaitu Cara Menambah 2 (dua) Kolom di Bawah Posting.

Adapun Cara Membuat atau Menambah 2 (dua) Kolom di Bawah Posting atau Artikel adalah sebagai berikut:

1. Login ke Blogger/Blogspot => Rancangan/Layout => Edit HTML, Download Template Lengkap dan beri tanda centang Expand Template Widget;
2. Cari kode ]]></b:skin> ;
3. Di atas kode ]]></b:skin> letakkan kode di bawah ini:
   #related{background:#eee url(http://lh6.ggpht.com/_pt7i0nbIOCY/SuPuxFn6_FI/AAAAAAAACXU/z314-b9H97c/dot_thumb.gif) 45% 0 repeat-y;border:1px solid #ddd;color:#000;margin:0 0 10px;padding:15px}
   #related .related-posts{font-weight:400;width:53%;float:right}
   #related .related-posts p{margin:0}
   #related .related-posts h3,#related .related-posts h2,#related .related-posts h1{font-size:12pt;letter-spacing:0;margin:0}
   #related .related-posts ol{font-weight:400;margin:2px 0 0}
   #related .subscribe{width:43%;float:left;color:#000}
   #related .subscribe p.intro{font-weight:400}
   #related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(http://lh3.ggpht.com/_pt7i0nbIOCY/SuPmf8r8eqI/AAAAAAAACXM/BYjbuwVwxas/FeedIcon-16_thumb.gif) 0 50% no-repeat;vertical-align:middle}
   #related .subscribe form{margin:0;padding:0}
   .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
   .clearfix{display:inline-block}
4. Cari kode di bawah ini:
   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> </b:if>
5. Letakkan kode di bawah ini diantara kode: <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> dan kode: </b:if> :
   <div class='clearfix' id='related'>
   <div class='subscribe'>
   <p class='feed'>
   <a href='http://disini letakkan Link Feed anda/feeds/posts/default'>Berlangganan via RSS Feed</a></p><p class='intro'>disini letakkan kode Form Berlangganan Anda</p></div>
   <div class='related-posts'>disini letakan kode Related Post Anda</div></div>
6. Ganti teks warna biru dengan Link Feed dan kode Form Berlangganan serta Kode Related Post yang Anda punya. Untuk lebih jelas perhatikan contoh di bawah ini:
   
   

   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
   
   <div class='clearfix' id='related'>
   <div class='subscribe'>
   <p class='feed'>
   <a href='http://serba-tersedia.blogspot.com/feeds/posts/default'>Berlangganan via RSS Feed</a></p>
   <p class='intro'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=SerbaTersedia&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=200,height=170&apos;);return true' style='border: 1px solid rgb(204, 204, 204); padding: 3px; text-align: center;' target='popupwindow'><p>Jika Anda Menyukai Artikel Blog ini, Masukan Alamat Email Anda Pada Kolom di Bawah, Maka Anda Akan Mendapatkan Kiriman Email Setiap Kali Ada Posting Baru. Terima Kasih Atas Partisifasinya</p><p><input name='email' style='width: 140px;' type='text'/></p><input name='uri' type='hidden' value='SerbaTersedia'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='Subscribe'/><p>Delivered by <a href='http://feedburner.google.com/' target='_blank'>FeedBurner</a></p><p><a href='http://feeds.feedburner.com/SerbaTersedia'><img alt='Feed Reader' height='26' src='http://feeds.feedburner.com/~fc/SerbaTersedia?bg=99CCFF&amp;fg=444444&amp;anim=0' style='border:0' width='88'/></a></p></form> </p></div>
   
   <div class='related-posts'><b:if cond='data:blog.pageType == &quot;item&quot;'><div class='rbbox'><div style='margin:0; padding-left:10px;'><div id='albri'/><script type='text/javascript'>var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;var maxNumberOfPostsPerLabel = 2;var maxNumberOfLabels = 8;maxNumberOfPostsPerLabel = 12;maxNumberOfLabels = 3;function listEntries10(json) {var ul = document.createElement(&#39;ul&#39;);var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?json.feed.entry.length : maxNumberOfPostsPerLabel;for (var i = 0; i &lt; maxPosts; i++) {var entry = json.feed.entry[i];var alturl;for (var k = 0; k &lt; entry.link.length; k++) {if (entry.link[k].rel == &#39;alternate&#39;) {alturl = entry.link[k].href;break;}}var li = document.createElement(&#39;li&#39;);var a = document.createElement(&#39;a&#39;);a.href = alturl;if(a.href!=location.href) {var txt = document.createTextNode(entry.title.$t);a.appendChild(txt);li.appendChild(a);ul.appendChild(li);}}for (var l = 0; l &lt; json.feed.link.length; l++) {if (json.feed.link[l].rel == &#39;alternate&#39;) {var raw = json.feed.link[l].href;var label = raw.substr(homeUrl3.length+13);var k;for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);var txt = document.createTextNode(label);var h = document.createElement(&#39;b&#39;);h.appendChild(txt);var div1 = document.createElement(&#39;div&#39;);div1.appendChild(h);div1.appendChild(ul);document.getElementById(&#39;albri&#39;).appendChild(div1);}}}function search10(query, label) {var script = document.createElement(&#39;script&#39;);script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;+ label +&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);document.documentElement.firstChild.appendChild(script);}var labelArray = new Array();var numLabel = 0;<b:loop values='data:posts' var='post'><b:loop values='data:post.labels' var='label'>textLabel = &quot;<data:label.name/>&quot;;var test = 0;for (var i = 0; i &lt; labelArray.length; i++)if (labelArray[i] == textLabel) test = 1;if (test == 0) {labelArray.push(textLabel);var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?labelArray.length : maxNumberOfLabels;if (numLabel &lt; maxLabels) {search10(homeUrl3, textLabel);numLabel++;}}</b:loop></b:loop></script></div><script type='text/javascript'>RelPost();</script></div></b:if> </div>
   </div>
   
   </b:if>
7. Simpan Template, selesai!!!

Demikianlah tutorial cara membuat atau menambah dua kolom di bawah posting ini, semoga bermanfaat.

= = = = = = = => Selamat Mencoba, Semoga Sukses!!! <= = = = = = = =

Cara Menyembunyikan Judul Widget di Blogspot

Beberapa waktu lalu Blogger mengeluarkan kebijakan baru, dimana setiap menambah/membuat widget di sidebar blogspot harus menyertakan judul alias pada kotak judul tidak boleh dikosongkan dan jika dikosongkan maka akan keluar pesan error.

Nah jika Anda tidak menginginkan judul widget tampil di sidebar blog, caranya cukup mudah dan setidaknya ada 2 (dua) cara untuk menyembunyikan atau menghilangkan judul widget tersebut.

Berikut ini 2 (dua) Cara Menyembunyikan Judul Widget di Blogspot yaitu:

1. Menghapus Kode Perintah yang berfungsi untuk menampilkan judul widget;
2. Membuat/Menambah Kode CSS agar judul widget tidak ditampilkan;

Cara Menghapus Kode Perintah yang berfungsi untuk menampilkan judul widget, sebagai berikut:

1. Login ke Blogspot => klik Rancangan/Design => pilih Edit HTML, kasih centang pada kotak Expand Template Widget;
2. Cari Judul Widget yang akan disembunyikan, misalnya "LINK BANNER SAHABAT", lalu perhatikan kode-kode yang menyertainya, contohnya seperti ini:
   
   <b:widget id='HTML4' locked='false' title='LINK BANNER SAHABAT' type='HTML'>
   <b:includable id='main'>
   <!-- only display title if it's non-empty -->
   <b:if cond='data:title != &quot;&quot;'>
   <h2 class='title'><data:title/></h2>
   </b:if>
3. Hapuslah kode yang ini: <h2 class='title'><data:title/></h2>;
4. Simpan/Save Template, selesai.

Jika Anda tidak ingin menghapus kode perintah, maka Anda bisa menggunakan cara kedua yaitu Membuat/Menambah Kode Css, sebagai berikut:

1. Login ke Blogspot => klik Rancangan/Design => pilih Edit HTML, kasih centang pada kotak Expand Template Widget;
2. Cari Widget ID untuk judul widget yang akan disembunyikan, misalnya Widget ID untuk "LINK BANNER SAHABAT" ini adalah HTML4. Coba perhatikan sekali lagi struktur kode di bawah ini:
   
   <b:widget id=' HTML4' locked='false' title='LINK BANNER SAHABAT'
3. Selanjutnya cari kode ]]></b:skin>, lalu diatasnya tambahkan Kode Css seperti ini:
   
   #HTML4 .title {display:none}
   
   
   Keterangan:
   Jika Anda ingin menyembunyikan judul widget lebih dari satu, Anda tinggal menambahkan Widget ID dari judul widget dimaksud di depan kode .title {display:none} dipisahkan dengan koma (,) contohnya seperti ini:
   #HTML4 .title, #HTML5 .title, #HTML6 .title {display:none}
4. Simpan/Save Template, selesai dan lihat hasilnya.

Demikianlah tutorial Cara Menyembunyikan Judul Widget di Blogspot, semoga bermanfaat.

= = = = = = = => Selamat Mencoba, Semoga Sukses!!! <= = = = = = = =

Cara Menghilangkan Tulisan Diposkan Oleh: dan Label Posting pada Blogspot

Jika sebelumnya saya telah membuat posting dengan judul Cara Menghilangkan Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) pada Blogspot, kali ini saya akan membuat posting Cara Menghilangkan Tulisan Diposkan Oleh: dan Label Posting pada Blogspot.

Tulisan Diposkan oleh: dan tulisan Label: judul posting, biasanya terletak/berada/tampil di bawah posting. Nah jika Anda ingin menghilangkan tulisan-tulisan tersebut, berikut ini caranya:

1. Login ke Blogspot => klik Rancangan/Design => pilih Edit HTML, kasih centang pada kotak Expand Template Widget dan gunakan tombol Find untuk memudahkan pencarian kode;
2. Untuk menghilangkan tulisan Diposkan Oleh:, cari kode di bawah ini:
   
   <span class='post-author'>
   <b:if cond='data:top.showAuthor'>
   <data:top.authorLabel/> <data:post.author/>
   </b:if>
   </span>
   
   
   Dan jika Anda juga ingin menghilangkan tulisan jam di depan tulisan diposkan oleh:……., maka cari kode di bawah ini:
   <span class='post-timestamp'>
   <b:if cond='data:top.showTimestamp'>
   <data:top.timestampLabel/>
   <b:if cond='data:post.url'>
   <a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
   </b:if>
   </b:if>
   </span>
3. Hapus/delete semua kode di atas;
4. Kemudian untuk menghilangkan tulisan Label:……, cari kode di bawah ini:
   
   <span class='post-labels'>
   <b:if cond='data:post.labels'><data:postLabelsLabel/>
   <b:loop values='data:post.labels' var='label'>
   <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
   <b:if cond='data:label.isLast != "true"'>,
   </b:if></b:loop></b:if>
   </span>
5. Hapus/delete semua kode di atas;
6. Setelah selesai, jangan lupa Save Template.

Demikianlah tutorial tentang Cara Menghilangkan Tulisan Diposkan Oleh: dan Label Posting pada Blogspot ini, semoga bermanfaat.

= = = = = = = => Selamat Mencoba, Semoga Sukses!!! <= = = = = = = =

Cara Modifikasi/Merubah Warna Kolom Komentar

Sebelumnya Saya sudah pernah buat posting tentang kotak komentar yaitu Cara Menampilkan Kotak Komentar di Bawah Posting dan Cara Menambah Fitur Reply Pada Kotak Komentar serta Cara Memperbaiki Tampilan Form Komentar Yang Bermasalah.

Sehubungan ada pertanyaan dari pengunjung yang menanyakan Cara Modifikasi/Merubah Warna Kolom Komentar seperti kolom komentar dalam Blog Serba Tersedia ini, namun sebelum kita membahas cara merubah warna kolom komentar perlu diketahui bahwa Saya menggunakan template Rounders 2, sehingga kode-kode dalam template Rounders 2 bisa saja tidak sama dengan template Anda dan jika mau menggunakan template Rounders 2 silahkan download Klik Disini.

Adapun Cara Merubah Warna Kolom Komentar pada Blogger, sebagai berikut:

1. Login ke Blogspot => pada Dashboard pilih Rancangan/Design => klik Edit HTML => Download Template untuk jaga-jaga bila gagal => kasih tanda centang pada tulisan Expand Widget Template;
2. Untuk merubah warna kolom pada nama pemberi komentar, cari kode .comment-author { contoh struktur kode di template Rounders 2 seperti di bawah ini:
   
   .comment-author {
   background:url("http://www.blogblog.com/rounders2/icon_comment.gif") no-repeat 2px .3em;
   margin:.5em 0;
   padding:0 0 0 20px;
   font-weight:bold;
   }
3. Pada tulisan background: tambahkan kode warna dibelakangnya, contohnya seperti di bawah ini:
   
   .comment-author {
   background:#AE010Eurl("http://www.blogblog.com/rounders2/icon_comment.gif") no-repeat 2px .3em;
   margin:.5em 0;
   padding:0 0 0 20px;
   font-weight:bold;
   }
4. Untuk merubah warna kolom tempat isi komentar, cari kode .comment-body { contohnya pada template Rounders seperti di bawah ini:
   
   .comment-body {
   margin:0 0 1.25em;
   padding:0 0 0 20px;
   }
5. Tambahkan kode di bawah ini kedalam kode di atas:
   
   background:#D2D2D2;
   text-align:justify;
   border-left:10px solid#2A00FF;
   
   Contohnya seperti di bawah ini:
   
   .comment-body {
   background:#D2D2D2;
   text-align:justify;
   border-left:10px solid#2A00FF;
   margin:0 0 1.25em;
   padding:0 0 0 20px;
   }
6. Simpan/Save Template, selesai.

Demikianlah Cara Modifikasi/Merubah Warna Kolom Komentar, semoga bermanfaat.

Cara Membuat Jawaban Email Otomatis Menggunakan Gmail Google

Ketika kita sedang berlibur atau sedang sibuk, sehingga tidak sempat untuk membuka Email dan ternyata banyak sahabat atau rekan bisnis telah mengirim Email dan menunggu jawaban/balasan Email dari kita, maka apa yang akan terjadi jika kita tidak langsung menjawab Email mereka? Sedangkan mereka tidak mengetahui alasan kita belum menjawab Email tersebut.

Untuk mengatasi permasalahan tersebut, kini telah ada solusinya yaitu membuat jawaban Email secara otomatis dengan menggunakan layanan Email gratis dari Gmail Google, dimana cara kerja dari Email otomatis ini adalah ketika ada Email masuk, Gmail kita akan langsung menjawab dengan isi Email yang telah diatur sebelumnya.

Nah jika tertarik, maka Anda harus terlebih dahulu mempunyai account di Google dan jika anda belum punya silahkan buat dahulu atau dengan menggikuti panduan Cara Membuat Email di Google ini.

Selanjutnya silahkan ikuti Cara Membuat Jawaban Email Otomatis Menggunakan Gmail Google ini sebagai berikut:

1. Sign in/Masuk ke Account Gmail Anda;
2. Supaya sama dengan tutorial ini, rubahlah bahasanya menjadi bahasa Indonesia, lalu klik Setelan dan akan dibawa ke halaman seperti gambar di bawah ini:
   
3. Geser halaman ke bawah dan cari kolom yang bertuliskan: Penjawab pesan saat liburan;
4. Setelah ketemu, tandai tulisan Penjawab pesan saat liburan ON, lalu pada Kolom Hari silahkan diatur mulai tanggal berapa sampai tanggal berapa Anda liburan atau menginginkan jawaban otomatis tersebut tetap aktif;
5. Pada kolom Subjek, silahkan tulis judul pesan Anda dan di kolom Pesan Anda bisa menuliskan isi pesan sesuai yang Anda kehendaki;
6. Jika Anda ingin jawaban otomatis ini hanya untuk Email yang ada dalam daftar saja, silahkan kasih tanda centang pada tulisan Kirimkan tanggapan hanya kepada orang-orang di dalam daftar Kenalan saya, namun jika ingin seluruh Email yang masuk mendapat jawaban otomatis, maka dikosongkan saja;
7. Terakhir klik Simpan Perubahan, selesai.

Nah jika Anda ingin langsung uji coba, silahkan alamat Email yang telah disetting menjawab otomatis tersebut dikirimi Email dari alamat Email yang berbeda dengan syarat jika Anda ingin mengirim pada hari itu, maka Anda harus mengatur setting tanggalnya dimulai pada hari itu juga, lalu perhatikan apa yang terjadi?

Demikianlah tutorial Cara Membuat Jawaban Email Otomatis Menggunakan Gmail Google ini, semoga bermanfaat.

Cara Pasang Yahoo Messenger (YM) di Blogger

Saya punya blog di Blogspot. Saya ingin pengunjung blog saya bisa chatting dengan saya lewat Yahoo! Messenger. Mungkinkah?

Untuk keperluan itu kita bisa memanfaatkan fitur Pingbox yang disediakan Yahoo!. Lewat Pingbox, kita akan mendapatkan kode yang harus kita pasang di blog, profil Friendster, atau website kita.

Berikut ini cara membuat Pingbox:

1. Klik http://messenger.yahoo.com/pingbox/studio/ untuk menuju ke halaman seperti pada gambar di bawah ini:
   
   
2. Pilih Background Theme sesuai dengan preferensi kita;
3. Di kolom Display name, masukkan nama yang akan kita tampilkan. Contrenglah opsi Show Yahoo! Messenger display image jika kita ingin menampilkan gambar yang sekarang muncul di YM kita.
4. Pilihlah salah satu ucapan selamat datang di kolom Online Greeting, atau pilih Enter custom message jika kita ingin membuat sendiri ucapan itu.
5. Pilihlah salah satu pesan bahwa kita sedang tidak online di kolom Offline message, atau pilih Enter custom message jika kita ingin membuat sendiri ucapan itu.
6. Contrenglah opsi Require visitors to enter Nickname to send IM agar setiap orang yang mengirim pesan ke kita diwajibkan mengisikan nama aliasnya (nick name);
7. Pada kolom Save Pingbox as, tulislah nama Pingbox kita. Misal, jika pingbox yang kita bikin sekarang ini akan dipasang di blog, berilah nama Pingbox Blogger atau sesuka anda.
8. Tekan tombol Save;
9. Akan muncul windows bar. Masukanlah Yahoo! ID dan passwordnya, lalu tekan tombol Sign In. Windows itu akan menutup sendiri.
10. Akan muncul kotak berisikan kode yang harus kita pasang. Untuk mendapatkan kode yang pas sesuai peruntukannya, pilihlah jenis blog atau website kita. Misal, jika kita ingin mendpatkan kode untuk Blogger maka kliklah logo dan tulisan Blogger yang tersedia.
11. Tentukan ukuran kotak yang kita inginkan. Sangat disarankan untuk memilih opsi Recommended.
12. Tekan tombol Copy to clippboard.

Tahapan selanjutnya Cara Pasang Yahoo Messenger (YM) di Blogger, langkah-langkahnya sebagai berikut:

1. Login ke Blogspot Anda => klik Rancangan/Design => Tambah/Add Gadget => pilih HTML/JavaScript atau baca Cara Pasang dan Hapus Widget Blog di Blogspot;
2. Setelah terbuka halaman baru, pada kolom Judul, tulislah Judul yang kita mau, misal: CHATBOX.
3. Pada kolom Konten masukan kode Pingbox yang telah dicopy sebelumnya, caranya letakkan Crusor ke dalam kolom Konten, lalu klik kanan dengan mouse dan pilih paste atau tekan Ctrl + V pada keyboard;
4. Klik Simpan, selesai.

Apabila proses dan langkah-langkah di atas telah di lakukan dengan benar, maka hasilnya akan seperti pada contoh di bawah ini (contoh akan muncul/tampil jika browser Anda dilengkapi plugins flash player):

Demikianlah tutorial Cara Pasang Yahoo Messenger (YM) di Blogger ini, semoga bermanfaat.

Cara Pasang dan Hapus Widget Blog di Blogspot

Tutorial Cara Pasang dan Hapus Widget Blog di Blogspot ini adalah untuk memenuhi permintaan sahabat blogger kita yaitu kang Widodo yang disampaikan melalui kolom komentar di posting saya yang berjudul Cara Memperbaiki Tampilan Form Komentar Yang Bermasalah.

Mungkin tutorial ini bagi sebagian blogger khususnya yang sudah terbiasa dan professional dianggap tidak penting, tetapi bagi sahabat blogger yang baru belajar buat blog, tutorial ini dapat dijadikan panduan ketika memasang/menambah dan menghapus widget di blog mereka.

Baiklah sahabat blogger, terlebih dahulu kita akan bahas Cara Menambah/Pasang Widget di Sidebar Blogspot, sebagai berikut:

1. Login dahulu ke account Blogspot Anda, selanjutnya akan tampil halaman seperti pada gambar di bawah ini:
   
   
2. Klik Rancangan/Design, lalu akan tampil halaman berikutnya seperti pada gambar di bawah ini:
   
   
3. Klik Tambah/Add Gadget, kemudian tampil lagi halaman baru seperti pada gambar di bawah ini:
   
   
4. Cari dan pilih HTML/JavaScript, lalu akan terbuka halaman baru seperti pada gambar di bawah ini:
   
   
5. Tulis Judul (wajib) pada kotak Judul/Title, lalu masukkan teks/kode yang ingin tampil di sidebar blog Anda ke dalam kotak Konten/Content. Jika Anda tidak ingin judul widget muncul di sidebar blog Anda, silahkan baca tutorial Cara Menyembunyikan Judul Widget di Blogspot ini;
6. Klik Simpan/Save, selesai.
7. Setelah selesai, apabila Anda ingin mengatur posisi widget berada pada tempat yang Anda inginkan, letakkan crusor mouse pada kotak judul widget lalu tekan dan geser ke posisi yang Anda inginkan, kemudian klik tulisan Simpan/Save yang terletak di pojok kiri atas pada halaman tersebut.

Adapun Cara Menghapus Widget di Sidebar Blogspot adalah sebagai berikut:

1. Seperti biasa Login ke Blogspot, lalu klik Rancangan/Design dan setelah muncul halaman seperti gambar di bawah ini:
   
   
2. Cari judul widget yang akan dihapus, lalu klik pada tulisan Edit dan akan terbuka halaman baru seperti contoh gambar di bawah ini:
   
   
3. Selanjut klik pada tulisan Hapus/Delete;
4. Klik OK, selesai.

Demikianlah tutorial sederhana tentang Cara Pasang dan Hapus Widget Blog di Blogspot ini, semoga bermanfaat.

= = = = = = = => Selamat Berkreasi, Semoga Sukses!!! <= = = = = = = =

Pengertian Related Post atau Artikel Terkait adalah posting atau artikel yang berhubungan dengan artikel lainnya berdasarkan atas kesamaan nama kategori atau label postingan, tetapi artikel tersebut tidak selalu sama topiknya, bisa juga membahas tentang hal lain, tetapi masih mempunyai relevansi dengan tujuan artikel tersebut, misalnya yang sedang anda baca sekarang adalah artikel dengan judul Cara Membuat Artikel Terkait (Related Post) Di Blogspot, kemudian terkait dengan artikel lain yang berjudul Cara Mengganti Header Blog pada Blogger, disini kesamaannya adalah artikel tersebut sama-sama membahas tentang blog.

Oleh karena itu jika hendak memasukan kategori atau label pada postingan sebaiknya betul-betul diperhatikan apakah postingan tersebut mempunyai relevansi dengan postingan lainnya atau tidak, apabila tidak sebaiknya dibuatkan kategori atau label baru saja, tujuannya supaya pembaca blog kita tidak kecewa.

OK, sekarang kita mulai mengulas tentang Cara Pasang Artikel Terkait (Related Post) pada Blogspot, silahkan ikuti langkah-langkah di bawah ini :

1. Login ke account blogger Anda.
2. Pilih menu Tata Letak/Layout » Edit HTML.
3. Beri tanda centang pada tulisan Expand Widget Templates.
4. Copy-paste script berikut di atas kode </head>:
   
   
   <script type="text/javascript">
   //<![CDATA[
   var relatedTitles = new Array();
   var relatedTitlesNum = 0;
   var relatedUrls = new Array();
   function related_results_labels(json) {
   for (var i = 0; i < json.feed.entry.length; i++) {
   var entry = json.feed.entry[i];
   relatedTitles[relatedTitlesNum] = entry.title.$t;
   for (var k = 0; k < entry.link.length; k++) {
   if (entry.link[k].rel == 'alternate') {
   relatedUrls[relatedTitlesNum] = entry.link[k].href;
   relatedTitlesNum++;
   break;
   }
   }
   }
   }
   function removeRelatedDuplicates() {
   var tmp = new Array(0);
   var tmp2 = new Array(0);
   for(var i = 0; i < relatedUrls.length; i++) {
   if(!contains(tmp, relatedUrls[i])) {
   tmp.length += 1;
   tmp[tmp.length - 1] = relatedUrls[i];
   tmp2.length += 1;
   tmp2[tmp2.length - 1] = relatedTitles[i];
   }
   }
   relatedTitles = tmp2;
   relatedUrls = tmp;
   }
   function contains(a, e) {
   for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
   return false;
   }
   function printRelatedLabels() {
   var r = Math.floor((relatedTitles.length - 1) * Math.random());
   var i = 0;
   document.write('<ul>');
   while (i < relatedTitles.length && i < 20) {
   document.write('<li><a href="' + relatedUrls[r] + '">' +
   relatedTitles[r] + '</a></li>');
   if (r < relatedTitles.length - 1) {
   r++;
   } else {
   r = 0;
   }
   i++;
   }
   document.write('</ul>');
   }
   //]]>
   </script>
5. Kemudian cari kode berikut:
   
   
   <b:if cond='data:post.labels'>
   <data:postLabelsLabel/>
   <b:loop values='data:post.labels' var='label'>
   <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
   </b:loop>
   </b:if>
   
6. Setelah itu tambahkan kode berwarna merah di antara kode yang berwarna biru hingga menjadi seperti di bawah ini:
   
   
   <b:if cond='data:post.labels'>
   <data:postLabelsLabel/>
   <b:loop values='data:post.labels' var='label'>
   <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
   
   <b:if cond='data:blog.pageType == "item"'>
   <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
   </b:if>
   
   </b:loop>
   </b:if>
   
7. Kemudian letakkan kode berwarna merah di bawah kode ini: </b:loop></b:if>, contohnya seperti di bawah ini:
   
   
   </b:loop>
   </b:if>
   
   <b:if cond='data:blog.pageType == "item"'>
   <h4>Artikel Terkait</h4>
   <script type="text/javascript">
   removeRelatedDuplicates();
   printRelatedLabels();
   </script>
   </b:if>
   
8. Simpan Template, Selesai.

= = = = = = = => Selamat Mencoba, Semoga Sukses!!! <= = = = = = = =

Cara Melakukan Edit HTML Pada Template Blogspot

Alasan pertama menulis posting ini adalah semata-mata untuk catatan dan sebagai pengingat diri Saya sendiri ketika hendak melakukan Edit HTML pada Template, karena sebagai blogger pemula Saya masih sering ngotak-atik Template untuk menambah fitur/widget Blog, sedangkan alasan kedua adalah Saya yakin masih ada diantara blogger pemula yang membutuhkan tutorial ini terutama yang benar-benar baru membuat blog.

Berdasarkan hasil observasi (ha ha ha…..) ke beberapa tutorial yang dibuat oleh blogger senior dan sesuai pengalaman pribadi ternyata Cara Melakukan Edit HTML Pada Template Blogspot yang benar adalah sebagai berikut:

1. Kunjungi blogspot.com untuk ke halaman Login seperti pada gambar di bawah ini:
   
   
2. Masukan Email dan Password lalu klik Masuk untuk menuju ke Dashboard, seperti gambar di bawah ini:
   
   
3. Klik Rancangan agar menuju ke halaman berikutnya, seperti dalam gambar di bawah ini:
   
   
4. Pilih dan klik Edit HTML untuk ke halaman Edit HTML, seperti gambar di bawah ini:
   
   
5. Sebelum mulai mengedit, menambah atau menghapus kode HTML pada Template, sebaiknya terlebih dahulu Download Template Lengkap dan simpan filenya untuk mengantisifasi jika terjadi kegagalan, maka hasil file Template tadi bisa digunakan untuk merestore atau mengembalikan kondisi template pada posisi sebelumnya. Selanjutnya beri tanda centang pada kotak Expand Template Widget, seperti contoh pada gambar di atas.
   
6. Cara mudah untuk mengedit kode HTML pada Template, silahkan perhatikan pada gambar di bawah ini:
   
   
7. Untuk memudahkan pencarian kode HTML yang akan diedit, gunakan tombol Find, caranya seperti pada gambar di atas (lihat tanda panah No.1) atau tekan Ctrl + F dari keyboard Komputer, lalu masukan kode yang akan dicari ke dalam kotak Find (lihat No.2 di gambar) kemudian Enter/Next (lihat tanda panah No.3), jika kode yang dicari tersebut terdapat di Template, maka kode tersebut akan tampil beda (lihat pada panah No.4).
   
8. Selanjutnya sudah bisa mulai mengotak-atik kode-kode HTML tersebut dan setelah selesai sebaiknya jangan di Save Template dulu, tapi klik Pratinjau untuk melihat hasil pengeditannya, apakah berhasil atau gagal? Jika gagal gunakan tab Bersihkan Edit untuk mengembalikan kode ke posisi awal dan silahkan coba lagi cara-cara di atas sampai berhasil, lalu Simpan Template, sebagaimana contoh pada gambar di bawah ini:
   
   

Demikianlah tutorial sederhana ini, semoga bermanfaat untuk kita semua, Amin!!!.

= = = = = = = => Selamat Berkreasi, Semoga Sukses!!! <= = = = = =

Cara Memperbaiki Tampilan Form Komentar Yang Bermasalah

Beberapa waktu lalu saya berkunjung ke beberapa blog yang telah berkunjung ke Blog Serba Tersedia ini, maksudnya sih untuk membalas kunjungan mereka, namun ketika saya hendak meninggalkan pesan di kotak komentar blog mereka koq tidak bisa, masalahnya ruang untuk memasukkan Word Verification-nya tidak ada, contohnya seperti gambar di bawah ini:

Dalam hati saya terbersit rasa keinginan untuk memecahkan masalah tersebut, ya hitung-hitung bila suatu saat saya memodifikasi kotak komentar dan mengalami masalah seperti itu, saya sudah tau cara memperbaikinya.

Dengan berbekal rasa penasaran kemudian saya googling dengan mengetikkan kata kunci Cara Memperbaiki Tampilan Form Komentar Yang Bermasalah, akhirnya saya dibawa ke blognya kang Zons di http://www.inimu.com. Setelah saya baca tutorialnya ternyata cocok dengan permasalahan di atas.

Nah di bawah ini adalah Cara Memperbaiki Tampilan Form Komentar Yang Bermasalah, silahkan ikuti langkah-langkahnya dengan benar, sebagai berikut:

1. Login ke Blogspot => klik Rancangan/Design => pilih Edit HTML, kasih centang pada kotak Expand Template Widget dan gunakan tombol Find (Ctrl + F) untuk memudahkan pencarian kode;
2. Sebelumnya Download Template Lengkap dulu untuk jaga-jaga jika terjadi kegagalan, lalu cari kode tag di bawah ini:
   
   <iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>
3. Perbaiki atribut scrolling pada tag tersebut, karena disinilah akar permasalahannya. Ada dua cara untuk memperbaikinya, silahkan pilih salah satu saja yaitu:
   
   1. Hapus atribut scrolling='no' pada tag tersebut; atau:
   2. Ganti atribut itu menjadi scrolling='auto', ini bertujuan untuk menampilkan scrollbar di samping form komentar bila form komentar melebihi area yang tersedia.
4. Setelah dilakukan perubahan, Save Template.

Tampilan form komentar Anda nantinya akan dilengkapi dengan scrollbar seperti pada gambar di bawah ini:

Anda juga boleh (tapi tidak harus) mengubah value atribut height menjadi 410px. Tujuannya untuk mempertinggi area form komentar sesuai dengan yang ada pada template standar Blogger.

Demikianlah tutorial tentang Cara Memperbaiki Tampilan Form Komentar Yang Bermasalah ini, semoga bermanfaat.

= = = = = = = => Selamat Mencoba, Semoga Sukses!!! <= = = = = = = =

Cara Membuat Tab View Menu di Sidebar Blogger

Untuk menghemat tempat, tab view menu sangat efisien dengan ukuran yang relatif kecil tapi bisa memuat banyak space. Hal ini pernah ditanyakan oleh sobat blogger pada kolom komentar beberapa waktu yang lalu tentang bagaimana cara membuat menu di sidebar seperti pada contoh gambar disamping? Mungkin yang dimaksud adalah Cara Membuat Tab View Menu di Sidebar Blogger.

Membuat menu dengan tab view memerlukan kode HTML yang lumayan panjang dan agak ribet, jadi sebaiknya simak baik–baik tutorial ini dan yang paling penting jangan lupa untuk backup template sobat terlebih dahulu.

Jika setelah jadi nanti lebar atau tinggi menu tidak sesuai, silahkan sobat sesuaikan sendiri dengan isi dari menu yang sobat gunakan. Baiklah sekarang silahkan ikuti langkah-langkahnya sebagai berikut:

1. Login ke Blogger => klik Rancangan/Design => klik Edit HTML, Download Template Lengkap dan kasih tanda centang pada kotak bertuliskan Expand Template Widget atau baca Cara Melakukan Edit HTML Pada Template Blogspot;
2. Gunakan tombol Find (Ctrl + F) untuk mencari kode </head>, kemudian letakkan kode javascript di bawah ini sebelum atau di atas kode </head>:
   
   <script type='text/javascript'>
   //<![CDATA[
   function tabview_aux(TabViewId, id)
   {
     var TabView = document.getElementById(TabViewId);
     // ----- Tabs -----
     var Tabs = TabView.firstChild;
     while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
     var Tab = Tabs.firstChild;
     var i   = 0;
     do
     {
       if (Tab.tagName == "A")
       {
         i++;
         Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
         Tab.className = (i == id) ? "Active" : "";
         Tab.blur();
       }
     }
     while (Tab = Tab.nextSibling);
     // ----- Pages -----
     var Pages = TabView.firstChild;
     while (Pages.className != 'Pages') Pages = Pages.nextSibling;
     var Page = Pages.firstChild;
     var i    = 0;
     do
     {
       if (Page.className == 'Page')
       {
         i++;
         if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
         Page.style.overflow = "auto";
         Page.style.display  = (i == id) ? 'block' : 'none';
       }
     }
     while (Page = Page.nextSibling);
   }
   // ----- Functions -------------------------------------------------------------
   function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
   function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }
   //]]>
   </script>
3. Setelah itu letakkan kode di bawah ini sebelum atau di atas kode ]]></b:skin>:
   
   div.TabView div.Tabs
   {
   height: 30px;
   overflow: hidden;
   }
   div.TabView div.Tabs a
   {
   float: left;
   display: block;
   width: 98px; /*Lebar Menu Utama Atas*/
   text-align: center;
   height: 30px; /* Tinggi Menu Utama Atas */
   padding-top: 3px;
   vertical-align: middle;
   border: 1px solid #BDBDBD; /* Warna border Menu Atas */
   border-bottom-width: 0;
   text-decoration: none;
   font-family: "Verdana", Serif; /* Font Menu Utama Atas */
   font-weight: bold;
   color: #000; /* Warna Font Menu Utama Atas */
   -moz-border-radius-topleft:10px;
   -moz-border-radius-topright:10px;
   }
   div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
   {
   background-color: #E6E6E6; /* Warna background Menu Utama Atas */
   }
   div.TabView div.Pages
   {
   clear: both;
   border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
   overflow: hidden;
   background-color: #E6E6E6; /* Warna background Kotak Utama */
   }
   div.TabView div.Pages div.Page
   {
   height: 100%;
   padding: 0px;
   overflow: hidden;
   }
   div.TabView div.Pages div.Page div.Pad
   {
   padding: 3px 5px;
   }
4. Kemudian Simpan Template.
5. Langkah selanjutnya, silahkan Anda klik Rancangan/Design => klik Add Gadget/Tambah Gadget => pilih yang HTML/Javascript atau jika diperlukan silahkan baca Cara Pasang dan Hapus Widget Blog di Blogspot;
   
6. Berilah judul pada kolom HTML/Javascript dan masukan kode di bawah ini ke dalam content HTML/Javascript:
   
   <form action="tabview.html" method="get">
   <div class="TabView" id="TabView">
   <div class="Tabs" style="width: 300px;">
   <a>Tab 1</a>
   <a>Tab 2</a>
   <a>Tab 3</a>
   </div>
   <div class="Pages" style="width: 300px; height: 300px;">
   <div class="Page">
   <div class="Pad">
   Tab 1.1 <br />
   Tab 1.2 <br />
   Tab 1.3 <br />
   </div>
   </div>
   <div class="Page">
   <div class="Pad">
   Tab 2.1 <br />
   Tab 2.2 <br />
   Tab 2.3 <br />
   </div>
   </div>
   <div class="Page">
   <div class="Pad">
   Tab 3.1 <br />
   Tab 3.2 <br />
   Tab 3.3 <br />
   </div>
   </div>
   </div>
   </div>
   </form>
   <script type="text/javascript">
   tabview_initialize('TabView');
   </script>
7. Kemudian Simpan.
8. Jika Anda ingin menyembunyikan judul content HTML/Javascript tersebut, silahkan baca tutorilanya Cara Menyembunyikan Judul Widget di Blogspot, semoga bermanfaat.

Keterangan:

• Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan sobat sesuaikan dengan isi;
• Kode yang berwarna biru silahkan sobat isi dengan judul - judul dari menu;
• Dan yang berwarna ungu, adalah isi dari menu. Anda bisa menambahkan link, gambar, banner, dll.

Demikianlah tutorial tentang Cara Membuat Tab View Menu di Sidebar Blogger ini, semoga bermanfaat.

Cara Membuat Teks Berjalan Atau Efek Marquee

Cara membuat teks berjalan pada blog sebenarnya sudah pernah saya buat postingannya dengan judul Cara Membuat Teks Berjalan di Menu Bar, namun yang membedakannya dengan Cara Membuat Teks Berjalan atau Efek Merquee pada blog adalah code HTML yang digunakan dan cara pemasangannya, dimana jika Teks Berjalan atau Efek Merquee dipasangnya di sidebar atau dalam postingan.

Sebelum saya menerangkan cara mudah buat teks berjalan atau efek merque, terlebih dahulu saya akan mendemonstrasikan apa yang dimaksud dengan efek merquee tersebut, berikut ini contohnya :

1. Contoh Teks Bergerak Bolak-Balik Secara Horizontal Teks Bolak-Balik Horizontal

1. Ini Adalah Code HTML Teks Bergerak Bolak-Balik Secara Horizontal <font face="arial" color="black" size="4"><marquee direction="right" behavior="alternate" direction="right" scrollamount="2" height="20px" scrolldelay="10" bgcolor="orange" width="450px"> Teks Bolak-Balik Horizontal</marquee></font>

2. Contoh Teks Berjalan Bolak-Balik Secara Vertikal Teks Bolak-Balik Vertikal

2. Ini Adalah Code HTML Teks Bergerak Bolak-Balik Secara Horizontal <font face="verdana" color="yellow" size="4"><marquee direction="up" behavior="alternate" scrollamount="2" height="100px" scrolldelay="10" bgcolor="green" width="450px"> Teks Bolak-Balik Vertikal</marquee></font>

3. Contoh Teks Berjalan Kekanan Secara Continu Teks Kekanan Continu

3. Ini Adalah Code HTML Teks Berjalan Kekanan Secara Continu <font face="times" color="green" size="4"><marquee direction="right" behavior="scroll" scrollamount="3" height="20px" scrolldelay="10" bgcolor="yellow" width="450px"> Teks Kekanan Continu</marquee></font>

4. Contoh Teks Berjalan Kekiri Sekali Saja Berjalan Kekiri Sekali

4. Ini Adalah Code HTML Teks Berjalan Kekiri Sekali Saja <font face="courier" color="red" size="4"><marquee direction="left" behavior="slide" scrollamount="1" height="20px" scrolldelay="100" bgcolor="blue" width="450px"> Berjalan Kekiri Sekali</marquee></font>

5. Contoh Teks Berjalan Kekiri Kekanan Tiga Kali Berjalan Kekanan Tiga Kali

5. Ini Adalah Code HTML Teks Berjalan Kekiri Kekanan Tiga Kali <font face="courier" color="blue" size="4"><marquee direction="right" loop="3" behavior="slide" scrollamount="1" height="20px" scrolldelay="50" bgcolor="red" width="450px"> Berjalan Kekanan Tiga Kali</marquee></font>

6. Contoh Teks Berjalan Efek Bounce Teks Berjalan Efek Bounce

6. Ini Adalah Code HTML Teks Berjalan Efek Bounce <font face="comic sans ms" color="orange" size="4"><marquee scrolldelay="10" behavior="alternate" direction="up" width="450px" scrollamount="2" height="100px" bgcolor="black"><marquee scrolldelay="10" behavior="alternate" direction="left" scrollamount="2"> Teks Berjalan Efek Bounce</marquee></marquee></font>

7. Contoh Teks Berhenti Jika Mouse Menyentuh Daerah Marquee Teks Berhenti Jika Mouse Menyentuh Daerah Marquee

7. Ini Adalah Code HTML Teks Berhenti Jika Mouse Menyentuh Daerah Marquee <font face="arial black" color="green" size="4"><marquee behavior="alternate" direction="up" onmouseover="this.stop()" width="450" height="100" onmouseout="this.start()" bgcolor="blue"> Teks Berhenti Jika Mouse Menyentuh Daerah Marquee</marquee></font>

Cara pasang code teks berjalan pada Sidebar blog adalah sebagai berikut :

1. Login ke Blogger, Klik Layout/Tata Letak;

2. Pada Elemen Halaman, klik Add Gadget/Tambah Gadget di lokasi yang Anda inginkan;

3. Pilih HTML/Javascript;

4. Copy paste code HTML diatas ke dalam Content yang telah tersedia;

5. Klik Tombol Simpan

Jika cara pasang code HTML ke dalam postingan, cukup copy paste kode tersebut ke dalam content postingan Anda.

Keterangan :
Width: Untuk mengatur panjang ruangan teks dalam satuan pixel.
Height: Untuk mengatur lebar ruangan teks dalam satuan pixel.
Scrolldelay: Untuk mengatur waktu tunda gerakan dalam satuan mili detik.
Scrollamount: Untuk mengatur kecepatan gerakan dalam satuan pixel.


Selamat Mencoba, Semoga Sukses!!!

cara membuat teks berjalan

Marquee merupakan kumpulan kode HTML yang jika diterjemahkan dalam bahasa web browser akan membentuk suatu animasi berupa teks atau image yang bergerak atau berjalan. Ketika kamu sedang melakukan silaturahim ke blog lain, tidak jarang kamu akan menemui blog yang menggunakan marquee ini. Tentunya hal tersebut mungkin akan menimbulkan satu pertanyaan tentang "bagaimana cara membuatnya?". Karena pokok bahasannya adalah "marquee", maka kode HTML-nya pun ikut-ikutan marquee, yakni <marquee> ... </marquee>.
Untuk lebih memahami tentang marquee (teks bergerak atau berjalan), mari bersama-sama kita telusuri trik blogger dengan menggunakan kode HTML marquee tersebut.

Berikut beberapa contoh dan manfaat dari kode teks berjalan (marquee) :

<marquee>Teks ini menggunakan marquee default</marquee>

Teks ini menggunakan marquee default

<marquee direction="right">Teks bergerak ke kanan</marquee>

Teks bergerak ke kanan

Catatan : "direction" merupakan kode yang berfungsi untuk menentukan arah gerakan teks atau image. Atributnya adalah left, right, up, dan down.

<marquee direction="up" height="50" width="50%">Teks berjalan ke atas yang dibatasi area tertentu</marquee>

Teks berjalan ke atas & dibatasi area tertentu

Catatan : "height" dan "width" berfungsi untuk menentukan tinggi serta lebar area marquee yang digunakan oleh teks, atributnya berupa nilai angka atau prosen (%).

<marquee bgcolor="#f2f5a9" scrolldelay="2000" direction="down" scrollmount="2" height="50" width="75%">Teks di kiri berjalan ke bawah dgn waktu tunda 2 detik, berkecepatan tertentu yang dibatasi area tertentu pula</marquee>

Teks di kiri berjalan ke bawah dgn waktu tunda 2 detik, berkecepatan tertentu yang dibatasi area tertentu pula

Catatan : "scrolldelay" berfungsi mengatur waktu tunda, atributnya adalah angka per-mili detik. Sedangkan "scrollmount" digunakan untuk mengatur kecepatan gerakan teks, atributnya berupa angka. Semakin besar angka, maka semakin cepat gerakannya.

<marquee bgcolor="#cecef6" scrollmount="2">Teks berkecepatan tertentu dengan menggunakan latar warna biru muda</marquee>

Teks berkecepatan tertentu dengan menggunakan latar warna biru muda

Catatan : "bgcolor" mempunyai fungsi memberikan warna latar teks, atributnya adalah kode warna.

<marquee bgcolor="#f2f5a9" loop="4">Teks 4x berjalan, kemudian hilang</marquee>

Teks 4x berjalan, kemudian hilang

<marquee bgcolor="#cecef6" loop="4" behavior="slide">Teks 4x berjalan, kemudian berhenti</marquee>

Teks 4x berjalan, kemudian berhenti

Catatan : "loop" mempunyai fungsi mengatur jumlah gerakan, atributnya adalah angka. Semakin besar nilainya, maka semakin banyak pula gerakannya. Biasanya kode loop diikuti dengan kode behavior="slide", agar teks tidak hilang.

<marquee hspace="25" width="25%" bgcolor=yellow><p>Teks berjalan</p>dan berjarak horizontal</marquee>

Teks berjalan
dan berjarak horizontalMarquee!

<marquee vspace="25" width="25%" bgcolor=yellow><p>Teks berjalan</p>dan berjarak vertikal</marquee>

Marquee!
Teks berjalan
dan berjarak vertikal
Marquee!!

Catatan : "hspace" berguna mengatur jarak marquee dengan teks atau tepi elemen secara horizontal, atributnya adalah angka. Sedangkan "vspace" berfungsi untuk mengatur jarak marquee dengan teks atau tepi elemen secara vertikal, atributnya angka juga. Semakin besar nilainya, maka semakin besar jaraknya.

<marquee behavior="alternate">Teks ini akan berjalan bolak-balik</marquee>

Teks ini akan berjalan bolak-balik

Catatan : "behavior" berfungsi untuk mengatur perilaku gerakan teks dgn atribut yang mengikutinya seperti scroll (gerakan default ke kiri), slide (bergerak sekali lalu berhenti), dan alternate (bolak-balik).

Nah, sekarang bagaimana jika kamu ingin memasukkan jenis huruf (font-family) dan warna huruf (color). Kamu tinggal menambahkan kode <span> ... </span> diantara kode marquee, singkat kodenya seperti di bawah ini.

<span style="font-family:arial;color:#0000ff;"><marquee bgcolor="#f2f5a9" direction="down" behavior="alternate" scrollamount="10" height="100" width="50&">Teks arial warna biru</marquee></span>

Teks arial warna biru

Selain itu terdapat variasi lain yang apabila mouse didekatkan, maka teks akan berhenti. Dan akan bergerak kembali ketika mouse dipindahkan ke area lain.

<marquee onmouseover="this.stop()" onmouseout="this.start()" bgcolor="#cecef6" scrollamount="2" direction="up" width="75%" height="100" align="left">
<a href="http://optimasi-blog.blogspot.com/2009/03/seo-optimasi-kualitas-link-dalam-blog.html">Optimasi Kualitas Link dalam Blog</a><br/>
<a href="http://optimasi-blog.blogspot.com/2009/03/gratis-7-seo-tool.html">Gratis 7 SEO Tool</a><br/>
<a href="http://optimasi-blog.blogspot.com/2009/03/seo-optimasi-posting-blog.html">Optimasi Posting Blog</a><br/>
<a href="http://optimasi-blog.blogspot.com/2009/03/seo-optimasi-judul-blog-dalam-title-tag.html">Optimasi Judul Blog dalam Title Tag</a><br/>
<a href="http://optimasi-blog.blogspot.com/2009/03/seo-optimasi-blog.html">Optimasi Blog</a><br/>
<a href="http://optimasi-blog.blogspot.com/2009/03/seo-optimasi-blog-lewat-kata-kunci.html">Optimasi Blog lewat Kata Kunci</a><br/>
<a href="http://optimasi-blog.blogspot.com/2009/03/apa-itu-search-engine-optimization-seo.html">Apa itu SEO?</a><br/>
</marquee>

Optimasi Kualitas Link dalam Blog
Gratis 7 SEO Tool
Optimasi Posting Blog
Optimasi Judul Blog dalam Title Tag
Optimasi Blog
Optimasi Blog lewat Kata Kunci
Apa itu SEO?

Kalau kamu ingin yang berjalan bukan teks, melainkan image maka tinggal mengganti teks yang berwarna merah dengan alamat penyimpanan file gambar kamu.

<marquee><img src="http://i647.photobucket.com/albums/uu191/ariamsi/powered-by.jpg"/></marquee>

Catatan : Kode warna merah merupakan teks yang dimasukkan dalam kode marquee.

Dan masih banyak lagi variasi kode yang dapat kamu optimasi, sehingga sesuai dengan tipe dan karakteristik elemen di blog kamu. Point pentingnya adalah jangan tidak pernah mencoba, karena kamu nanti tidak akan pernah pula tahu arti dan maknanya.

Selamat mencoba marquee menurut versi kamu...

Ingin agar artikel seperti ini langsung diterima melalui email kamu?
Silakan masukkan alamat email pada form di bawah ini, kemudian klik "Subcribe" :

permukaan bumi semakin tipis

Saat Anda membaca artikel ini, permukaan bumi di bawah Anda bergerak secara perlahan-lahan menuju ke  kutub utara. Menurut sejumlah ilmuwan, pergeseran ini lebih besar dibandingkan dengan yang mereka perkirakan. Akan tetapi, di luar efek minor pada satelit, tidak ada efek signifikan yang akan terasa.

Peneliti menemukan, pergeseran massa air di seluruh dunia, dikombinasikan dengan apa yang disebut dengan post-glacial rebound, telah menggeser permukaan bumi dari pusatnya sebanyak 0,035 inci atau 0,88 milimeter per tahun ke arah kutub utara.

Post-glacial rebound merupakan efek balik dari permukaan padat bumi terhadap berkurangnya gletser dan hilangnya beban berat. Dengan berkurangnya gletser pada akhir jaman es, tanah di bawah es mulai naik dan terus naik. Untuk itu, seperti sudah diperkirakan, lapisan padat di permukaan akan bergerak ke utara sebagai efek dari pusat massa planet.

Saat menghitung perubahan ini, para ilmuwan mengombinasikan data gravitasi dari NASA dan satelit German Aerospace Center Gravity Recovery and Climate Experiment (GRACE) yang mengukur pergerakan permukaan bumi lewat GPS dan model yang dikembangkan oleh Jet Propulsion Laboratory (JPL) milik NASA yang memperkirakan massa samudra di atas setiap titik di dasar samudera.

Xiaoping Wu, peneliti JPL di Pasadena, California memperkirakan, penyebab utama pergeseran permukaan bumi adalah karena melelehnya lapisan es Laurentide, yang menyelimuti sebagian besar Kanada dan bagian utara Amerika Serikat di jaman es lalu.

“Temuan baru ini ternyata jauh lebih besar dibandingkan perkiraan terdahulu yang hanya 0,019 inci atau 0,48 milimeter per tahun,” kata Wu, seperti dikutip dari Livescience, 28 September 2010.

Meski demikian, Wu menyebutkan, pergerakan permukaan ke arah atas tidak akan mempengaruhi kehidupan di bumi. “Pergeseran itu kurang dari satu milimeter per tahun, jadi tidak berpengaruh,” kata Wu. “Beda halnya jika pergeseran mencapai 1 sentimeter. Itu akan menghadirkan perubahan yang signifikan,” ucapnya.

Walaupun pergerakan lempeng tidak mempengaruhi kehidupan manusia sehari-hari, pergeseran ini akan berpengaruh pada pelacakan satelit dan pesawat luar angkasa. “Seatelit di orbit di mencatat informasi dari luar angkasa dan berkorespondensi dengan instrumen yang ada di permukaan bumi,” kata Wu. “Pergerakan ini akan berpengaruh pada bagaimana kita melacak pesawat atau satelit tersebut,” ucapnya.

Laporan terbaru seputar pergeseran permukaan bumi tersebut dibuat oleh para peneliti dari JPL, Delft University of Technology di Belanda, serta Netherlands Institute for Space Research. Hasilnya dipublikasikan pada jurnal Nature Geoscience edisi bulan ini.

dikutip dari vivanews.com