HTML Marque

Sample:

MARQUEE STANDAR

code:

<marquee>MARQUEE STANDAR</marquee>

Sample:

MARQUEE BEHAVIOUR-SCROLL DIRECTION-RIGHT WIDTH-70%

code:

<marquee behavior="scroll" direction="right" width="70%">MARQUEE BEHAVIOUR-SCROLL DIRECTION-RIGHT WIDTH-70%</marquee>

Sample:

MARQUEE BEHAVIOUR-SCROLL DIRECTION-UPMARQUEE BEHAVIOUR-SCROLL DIRECTION-DOWN

code:

<marquee behavior="scroll" direction="up">MARQUEE BEHAVIOUR-SCROLL DIRECTION-UP</marquee>



<marquee behavior="scroll" direction="down">MARQUEE BEHAVIOUR-SCROLL DIRECTION-DOWN</marquee>

Sample:

MARQUEE BEHAVIOUR-ALTERNATE (MEMANTUL)

code:

<marquee behavior="alternate">MARQUEE BEHAVIOUR-ALTERNATE (MEMANTUL)</marquee>

Sample:

MARQUEE BEHAVIOUR-SCROLL DIRECTION-LEFT SCROLLAMOUNT-1

MARQUEE BEHAVIOUR-SCROLL DIRECTION-LEFT SCROLLAMOUNT-5

MARQUEE BEHAVIOUR-SCROLL DIRECTION-LEFT SCROLLAMOUNT-10

MARQUEE BEHAVIOUR-SCROLL DIRECTION-LEFT SCROLLAMOUNT-15

MARQUEE BEHAVIOUR-SCROLL DIRECTION-LEFT SCROLLAMOUNT-20

code:

<marquee behavior="scroll" direction="left" scrollamount="1">MARQUEE BEHAVIOUR-SCROLL DIRECTION-LEFT SCROLLAMOUNT-1</marquee> <marquee behavior="scroll" direction="left" scrollamount="5">MARQUEE BEHAVIOUR-SCROLL DIRECTION-LEFT SCROLLAMOUNT-5</marquee> <marquee behavior="scroll" direction="left" scrollamount="10">MARQUEE BEHAVIOUR-SCROLL DIRECTION-LEFT SCROLLAMOUNT-10</marquee> <marquee behavior="scroll" direction="left" scrollamount="15">MARQUEE BEHAVIOUR-SCROLL DIRECTION-LEFT SCROLLAMOUNT-15</marquee> <marquee behavior="scroll" direction="left" scrollamount="20">MARQUEE BEHAVIOUR-SCROLL DIRECTION-LEFT SCROLLAMOUNT-20</marquee>

Berikut Penggunaan gambar pada tag marquee:

<- Mogok

Read more »

Membuat Artikel Terkait (Related Post) di Sidebar

Menampilkan Artikel Terkait atau Related Post  sekarang sudah menjadi hal yang umum ada di setiap Blog, sepertinya keberadaan Artikel Terkait ini sudah tidak bisa dipisahkan lagi dengan Blog.

Karena dengan salah satu cara inilah Page View blog akan meningkat (dampaknya akan kepada Alexa Ranking) lalu dengan cara ini pula (read: Artikel Terkait) para pengunjung Blog akan bisa menemukan artikel lainya yang masih dalam 1 kategori atau label.maka pada kesempatan kali ini saya ingin share kepada teman-teman semua tentang Cara Membuat Artikel Terkait (Related Post) di Sidebar Blog.

Sidebar blog merupakan salah satu tempat yang saya pikir sangat strategis apabila dipasang dengan Artikel Terkait ini karena akan terlihat terlebih dahulu ketimbang ditaruh di bawah postingan (tetapi dua cara itu sama baiknya, selera).

Ok, bagi teman-teman yang mau membuat Artikel Terkait di Sidebar Blog, silahkan ikuti langkah-langkah di bawah ini:

1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Klik Expand Templates Widget,
3. Cari kode </head> dan copy kode di bawah ini lalu pastekan persis di atas kode tadi:

<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>

 
4. Lanjutkan dengan mencari 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 != &quot;true&quot;'>,</b:if>
    </b:loop>
    </b:if>

 
5. Ganti kode tersebut dengan kode 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 != &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=10&quot;' type='text/javascript'/>
    </b:if>
    </b:loop>
    </b:if>

 
Ket: Sebelum di save kode max-results=10 (ini adalah kode untuk menampilkan berapa banyak artikel yang akan ditampilkan perlabel), bisa teman-teman ubah semisal hanya 5 atau 8.

6. Save Templates (belum selesai...)

7. Selanjutnya, masuk ke Page Element >> Add a Gadget >> HTML/JavaScript >> copy kode di bawah ini dan masukkan ke dalam konten HTML/Javascript:

Lalu masukkan kode berikut ini di gadget Anda.

<script type="text/javascript">
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>

 
8. Jika sudah klik Save dan lihat semua perubahannya.

Seperti itulah Cara Membuat Artikel Terkait (Related Post) di Sidebar Blog, semoga ini bisa bermanfaat dan selamat mencoba. Salam

Read more »

Back To Top jQuery

Back To Top sudah banyak digunakan oleh para blogger untuk memperindah tampilan blognya. Banyak ragam kreasinya, seperti salah satunya menggunakan jQuery.

Back to top memudahkan kita khususnya para pengunjung blog untuk kembali ke halaman atas, jadi kita tidak perlu men-scroll secara manual menggunakan mouse untuk kembali keatas, cukup dengan mengklik bacaan "back to top".

Tahapan Pembuatan Back to Top - Jquery:
1. Login ke blogger » layout / tata letak » edit HTML
2. Masukan script jquery berikut diatas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
<!-- Back To Top -->
<script src='http://riky-rizkiyana.googlecode.com/files/back-to-top.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.fn.topLink = function(settings) {
 settings = jQuery.extend({
  min: 1,
  fadeSpeed: 200
 }, settings);
 return this.each(function() {
  var el = $(this);
  el.hide();
  $(window).scroll(function() {
   if($(window).scrollTop() &gt;= settings.min)
   {
    el.fadeIn(settings.fadeSpeed);
   }
   else
   {
    el.fadeOut(settings.fadeSpeed);
   }
  });
 });
};

$(document).ready(function() {
 $(&#39;#top-link&#39;).topLink({
  min: 300,
  fadeSpeed: 500
 });
 $(&#39;#top-link&#39;).click(function(e) {
  e.preventDefault();
  $.scrollTo(0,300);
 });
});
</script>
<!-- End Back To Top -->

4. Cari kode <body>, lalu masukkan atribut id='top' ke dalam tag <body>, maka hasilnya akan seperti : <body id='top'>
5. Lalu masukan CSS dibawah sebelum kode ]]></b:skin>

#top-link {display:none;font-weight:bold;font-family:tahoma;font-size:10px;width:70px;background:#000;color:#fff;text-shadow:1px 1px 1px #666;font-size:11px;position:fixed;right:-20px;bottom:150px;padding:5px;-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);-webkit-border-radius: 4px;-moz-border-radius: 4px; border-radius: 4px;}

6. Lalu Masukkan kode HTML berikut diatas </body>

<a class="no-click no-print" href="#top" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a>

7. Simpan template. Dan berhasil.

Keterangan:
- Script jquery jika sudah memiliki tidak perlu dipasang lagi (biar tidak double)
- 'id=top' atau '#top-link' anda dapat rubah, itu merupakan kunci perintah dari effect.
- Anda dapat merubah warna, kata "Back To Top" dan posisinya sesuai selera anda.
- Script back to top ini dikembangkan dari smooth page scroll.

Read more »

Twitter Buttons Animasi Pilihan

Tiggal Pilih Sesuka hati anda.

<object data="http://www.twpics.com/BUTTON6/twitbutton.swf" height="80" type="application/x-shockwave-flash" width="180"><param name="movie" value="http://www.twpics.com/BUTTON6/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=your_id_here"></param><a href="http://www.gaming20.no" title="online casino">online casino</a><embed src="http://www.twpics.com/BUTTON6/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="180" height="80" menu="false" wmode="transparent" flashvars="username=your_id_here"></embed></object>

<object data="http://www.twpics.com/BUTTON7/twitbutton.swf" height="200" type="application/x-shockwave-flash" width="180"><param name="movie" value="http://www.twpics.com/BUTTON7/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=your_id_here"></param><a href="http://www.gamblinginsider.ca/casino-games/roulette/" title="Canadian roulette">Canadian roulette</a><embed src="http://www.twpics.com/BUTTON7/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="180" height="200" menu="false" wmode="transparent" flashvars="username=your_id_here"></embed></object>

<object data="http://www.twpics.com/BUTTON8/twitbutton.swf" height="200" type="application/x-shockwave-flash" width="200"><param name="movie" value="http://www.twpics.com/BUTTON8/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=your_id_here"></param><a href="http://www.gaming20.no" title="Kasino på nett">Kasino på nett</a><embed src="http://www.twpics.com/BUTTON8/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="200" height="200" menu="false" wmode="transparent" flashvars="username=your_id_here"></embed></object>

<object data="http://www.buzzbuttons.com/BUTTON12/twitbutton.swf" height="202" type="application/x-shockwave-flash" width="182"><param name="movie" value="http://www.buzzbuttons.com/BUTTON12/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=MasDalang"></param><a href="http://www.gamblinginsider.ca/casino-games/" title="gamblinginsider.ca">gamblinginsider.ca</a><embed src="http://www.buzzbuttons.com/BUTTON12/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="182" height="202" menu="false" wmode="transparent" flashvars="username=MasDalang"></embed></object>

<object data="http://www.buzzbuttons.com/BUTTON4/twitbutton.swf" height="120" type="application/x-shockwave-flash" width="120"><param name="movie" value="http://www.buzzbuttons.com/BUTTON4/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=MasDalang"></param><a href="http://www.gamblinginsider.ca" title="up your game at Gambling Insider">up your game at Gambling Insider</a><embed src="http://www.buzzbuttons.com/BUTTON4/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="120" height="120" menu="false" wmode="transparent" flashvars="username=MasDalang"></embed></object><br />

<object data="http://www.buzzbuttons.com/BUTTON1/twitbutton.swf" height="90" type="application/x-shockwave-flash" width="180"><param name="movie" value="http://www.buzzbuttons.com/BUTTON1/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=MasDalang"></param><a href="http://www.gamblinginsider.ca/casino-games/roulette/" title="Canadian roulette">Canadian roulette</a><embed src="http://www.buzzbuttons.com/BUTTON1/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="180" height="90" menu="false" wmode="transparent" flashvars="username=MasDalang"></embed></object>

<object data="http://www.buzzbuttons.com/BUTTON2/twitbutton.swf" height="90" type="application/x-shockwave-flash" width="180"><param name="movie" value="http://www.buzzbuttons.com/BUTTON2/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=MasDalang"></param><a href="http://www.gamblinginsider.ca" title="online gambling insider.ca">online gambling insider.ca</a><embed src="http://www.buzzbuttons.com/BUTTON2/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="180" height="90" menu="false" wmode="transparent" flashvars="username=MasDalang"></embed></object>

<object data="http://www.twpics.com/BUTTON0/twitbutton.swf" height="80" type="application/x-shockwave-flash" width="100"><param name="movie" value="http://www.twpics.com/BUTTON0/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=your_id_here"></param><a href="http://www.gaming20.no" title="online casino">online casino</a><embed src="http://www.twpics.com/BUTTON0/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="100" height="80" menu="false" wmode="transparent" flashvars="username=your_id_here"></embed></object>

<object data="http://www.twpics.com/BUTTON3/twitbutton.swf" height="100" type="application/x-shockwave-flash" width="100"><param name="movie" value="http://www.twpics.com/BUTTON3/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=your_id_here"></param><a href="http://www.gamblinginsider.ca/casino-games/roulette/" title="Canadian roulette">Canadian roulette</a><embed src="http://www.twpics.com/BUTTON3/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="100" height="100" menu="false" wmode="transparent" flashvars="username=your_id_here"></embed></object><br />

Semoga Bermanfaat bagi anda. ^^

Read more »

Daftar Isi

Read more »

RCTI TV : RCTI ONLINE

Catatan: 1. Perbesar tampilan (full screen) tekan tombol bagian kanan bawah TV (nomor 3 dari kanan).

Read more »

Metal Slug

Read more »

Google Sitemap

Google Sitemap adalah sebuah Peta Situs yang memberikan anda kesempatan untuk menampilkan halaman situs anda ke Google. Google akan datang kemudian melalui spider mengindeks halaman anda dengan lebih cepat. Membuat dan mengirimkan peta situs membantu memastikan bahwa Google mengetahui tentang semua halaman di situs anda, termasuk URL yang mungkin tidak ditemukan oleh proses normal Google.

Sebelum meneruskan artikel ini anda harus sudah Submit dan Verifikasi Blog ke Google Webmaster Tools. Untuk lebih jelasnya Cara Submit Sitemap ke Google Webmaster Tools, silahkan ikuti langkah-langkah berikut ini :

1. Silahkan Masuk ? Google Webmaster Tools.

2. Login dengan akun anda.

3. Silahkan klik nama blog anda.

Perhatikan pada bagian kiri atas, klik menu Site Configuration.

Klik Sitemaps.

4. Kemudian klik “Submit a Sitemap” disitu:

- Dan masukin Seluruh kode sitemap ini, satu-satu :

1. atom.xml?redirect=false

2. atom.xml?redirect=false&start-index=1&max-results=500

3. atom.xml?redirect=false&start-index=501&max-results=500

4. atom.xml?redirect=false&start-index=1001&max-results=500

5. atom.xml?redirect=false&start-index=1501&max-results=500

6. atom.xml?redirect=false&start-index=2001&max-results=500

7. atom.xml?redirect=false&start-index=2501&max-results=500

8. atom.xml?redirect=false&start-index=3001&max-results=500

9. feeds/posts/default?orderby=updated

Contohnya:

Dan ulangi langkah digambar, hingga semua atau Seluruh url atom Sitemap diatas anda submit, jangan lupa klik Submit Sitemap. Setelah itu biarkan Google mengidentifikasi sitemap yang anda submit dan berserta statusnya, dan hasilnya akan seperti ini:

 Atau Bisa juga pkai cra berikut :

Semoga bermanfaat.

Read more »

Navigasi Breadcrumb

Seberapa penting Navigasi Breadcrumb di Blog? Jawabannya cukup penting, karena dengan adanya navigasi ini, mempermudah user ataupun spider dalam menelusuri blog kita (tidak tersesat).

Konon pula katanya, dengan menambahkan fasilitas navigasi breadcrumb ini pada blog, mampu meningkatkan nilai SERP (Search engine results page) dari blog kita.
agar lebih jelas kira-kira akan seperti dibawah ini.

 

Browse » Home » turorial blogger » Membuat breadcrumb navigation.

Langkah-langkahnya adalah sebagai berikut:

1. Pertama Login Blog
2. Pilih Layout untuk memulai pengeditan pada Blog yang diinginkan
3. Pilih Tab Edit HTML
4. Letakkan kode berikut ini, tepat di bawah kode <b:if cond='data:post.title'>

<!-- Navigasi Breadcrumb Start -->
<b:if cond='data:blog.pageType == "item"'>
<a href='http://uttajadoel.blogspot.com/'>Home</a> &#187;
<b:if cond='data:post.labels'>
<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>
&#187;
</b:if>
<data:post.title/>
</b:if>
<!-- Navigasi Breadcrumb Stop -->

5. Kemudian Simpan Template. dan lihat hasilnya.

Ket:
- Teks yang berwarna Hijau anda dapat menggantinya dengan alamat blog sobat.
Jika tidak ada kesalahan dalam penempatan script, maka akan terlihat tampilan berbeda (navigasi breadcrumb) di atas judul artikel, seperti berikut ini:

Read more »