Latihan Warna URL

#000000

Mengenal dan menulis kode HTML blog

Share on facebook Share on twitter Share on email Share on print More Sharing Services ?

Ketika anda menulis sebuah artikel yang di-dalamnya diperlukan kode khusus yaitu kode HTML blog, mungkin bagi anda seorang pemula/Newbie akan merasa kesulitan dan tidak tahu harus bagaimana, namun jika anda seorang yang sudah berpengalaman dalam kode HTML ini bukanlah sebuah perkara yang sulit.

Beberapa contoh penerapan kode HTML yang biasa/harus diterapkan adalah ketika anda membuat tulisan di sidebar kiri atau kanan dalam sebuah blog (blogger-gadget HTML/Javascript) atau tulisan yang ditulis di dalam Edit HTML pada sebuah template. ini berbeda ketika anda menulis pada bagian posting artikel atau ketika membuat halaman/artikel, karena sudah disediakan fungsi-fungsi edit tulisan, misalnya ketika anda akan menebalkan huruf, anda tinggal klik ikon bold "B" maka huruf/tulisan anda akan berubah menjadi tebal.

karena tidak sedikit pendatang baru merasakan kesulitan dalam menulis dengan kode HTML maka saya sedikit informasi kan beberapa kode HTML yang biasa digunakan untuk keperluan menulis:

1. Tengah, Kode HTMLnya: <center></center>
2. Huruf tebal, Kode HTMLnya: <b></b>
3. Garis bawah, Kode HTMLnya: <u></u> 
4. Paragrap baru, Kode HTMLnya: <p/>   
5. Baris baru, Kode HTMLnya: <br/>  
6. Huruf miring, Kode HTMLnya: <i></i> 
7. Besar, Kode HTMLnya: <big></big>
8. Coret, Kode HTMLnya <s></s> 
9. Ukuran huruf, Kode HTMLnya: <font size ="16"></font>         
10. Warnai huruf, Kode HTMLnya: <font color="red"></font> 
11. dan masih banyak lagi.

Contoh penerapan kode HTML diatas:

1. Membuat tulisan bergaris bawah, cara penulisan: <u>tulisan anda disini</u>
   hasilnya akan seperti ini: tulisan anda disini 
2. Mewarnai huruf dengan warna biru, cara penulisan: <font color="blue">tulisan anda disini</font>
   hasilnya akan seperti ini: tulisan anda disini

untuk kode lainnya silahkan anda mencobanya sendiri ya..

Cara menghilangkan Judul Blog di header

Sebuah judul pada sebuah blogger sangat penting, namun terkadang keberadaannya bisa sangat mengganggu ketika Anda tidak menginginkannya tampil pada header blog baru Anda. Tampilan judul bawaan memang terlihat kaku dan sulit bagi newbie dalam menyesuaikan-nya ke dalam header. Maka dengan cara menghilangkan atau menyembunyikan judul blog dan mengkreasikan judul blog kedalam headernya sendiri akan membuat tampilan blog Anda semakin menarik.

Selain judul blog, deskripsi blog akan ditampilkan secara otomatis di bawah judul blog, maka Anda perlu menyembunyikannya juga. Setelah Anda membuat header blog yang cantik maka tinggal menerapkan trik dibawah.

Cara menyembunyikan keduanya silahkan ikuti langkah-langkah berikut ini:

1. Log in blogger 
2. Pada dashboard > klik template kemudian pilih "Edit HTML"
3. Cari kode yang mirip seperti ini
   Judul Blog
   #header h1 {
   margin:5px 5px 0;
   padding:130px 0px 0px 130px;
   font-size: 28px;
   line-height:1.2em;
   text-transform:titlecase;
   letter-spacing:.1em;
   }
   
   Deskripsi Blog:
   #header .description {
   margin:0 5px 5px;
   padding:10px 0px 15px 130px;
   max-width:700px;
   text-transform:lowercase;
   letter-spacing:.1em;
   line-height: 1.4em;
   color:#e86c81;
   font-weight:bold;
   font-size:13px;
   }
    
4. Setelah ditemukan, silahkan tambahkan kode berikut: visibility:hidden; sehingga menjadi seperti dibawah:
   
   Judul Blog:
   #header h1 {
   margin:5px 5px 0;
   padding:130px 0px 0px 130px;
   font-size: 28px;
   line-height:1.2em;
   text-transform:titlecase;
   letter-spacing:.1em;
   visibility:hidden;
   }
   
   Deskripsi Blog:
   #header .description {
   margin:0 5px 5px;
   padding:10px 0px 15px 130px;
   max-width:700px;
   text-transform:lowercase;
   letter-spacing:.1em;
   line-height: 1.4em;
   color:#e86c81;
   font-weight:bold;
   font-size:13px;
   visibility:hidden;
   }
5. Untuk memastikan berhasil tidaknya judul dan deskripsi bisa disembunyikan, silahkan klik "preview template" pada halaman editing.
6. Apabila berhasil, silahkan simpan pekerjaan Anda dengan meng klik "save template".
7. Lihat hasilnya.

Cara Menghilangkan Tulisan Powered By Blogger Di Template Blog Kita

Langsung saja caranya :

• Log in ke akun blogger sobat
• Selanjutnya Klik Rancangan ➨ Edit HTML. Jangan lupa untuk selalu memback up template anda takut   terjadi kesalahan CentangExpand Template Widget ➨ Download Template. 
• Selanjutnya cari kode <!-- outside of the include in order to lock Attribution widget -->
• Jika sudah ketemu dibarisan bawahnya terdapat kode dibawah ini. hapusan barisan kode dibawah ini
  
  
      <b:sectionclass='foot'id='footer-3'showaddelement='no'> 
  

      <b:widgetid='Attribution1'locked='true'title=''type='Attribution'>

      <b:includable id='main'>
      <b:if cond='data:feedbackSurveyLink'>
      <div class='mobile-survey-link' style='text-align: center;'>
      <data:feedbackSurveyLink/>
      </div>
      </b:if>
  
      <div class='widget-content' style='text-align: center;'>
      <b:if cond='data:attribution != &quot;&quot;'>
      <data:attribution/>
      </b:if>
      </div>
  
      <b:include name='quickedit'/>
      </b:includable>
      </b:widget>
      </b:section>
   
• Simpan template anda. Ketika menyimpan template akan ada peringatan pertahankan widget atau hapus. tekan hapus. seperti pada gambar dibawah ini

Bagaimana mudah bukan menerapkannya di blog anda. Jika anda kesulitan silahkan tinggalkan komentar

..: Selamat Mencoba :..

Mengatur jarak antar widget pada Blog

Caranya sangat simple.
Ok dah langsung kita mulai aja tutorialnya.

1. Login ke akun Blog anda.
2. Pilih Menu Template.
3. Klik "Edit HTML".
4. Centang "Expand Template Widget".

5. Sekarang cari kode /* Widgets, lengkapnya seperti dibawah ini. (gunakan CTRL+F untuk mempermudah)

/* Widgets
----------------------------------------------- */

6. Jika sudah, Copy kode dibawah, dan letakkan setelah kode diatas.

.main-inner .widget {
margin: 10px  0px;
}

7. Klik "Pratinjau", untuk memastikan hasilnya sesuai keinginan anda.

8. Jika anda sudah sesuai keinginan anda, klik "Simpan template".

Selesai.

MMembuat File PDF Ke Dalam Postingan Blog

Ok langsung saja, berikut ini adalah langkah-langkah yang harus anda gunakan untuk memasukan sebuah file PDF ke dalam blog anda.

• Kunjungi https://docs.google.com/ 
• Jika sudah, login menggunakan akun google anda, apabila anda belum memilikinya anda bisa registrasi terlebih dahulu.
• Setelah anda login, unggah file yang akan anda tampilkan dengan meng-klik simbol unggah.
• Tunggulah beberapa saat sampai proses unggah selesai.

• Setelah selesai, maka file yang anda unggah barusan akan muncul dalam daftar "Driver Saya".

• Klik file tersebut, maka akan muncul tampilan dari isi dokumen yang anda unggah barusan.
• Sekarang anda klik "Buka".

• Maka file akan terbuka keseluruhan dalam sebuah tab baru.
• Pilih menu File >> Sematkan file PDF ini.

• Jika sudah maka akan keluar sebuah tampilan dengan menyertakan kode dari file tersebut, silakan anda copy kode tersebut.

• Langkah terakhir anda letakkan kode yang sebelumnya anda copy kepostingan HTML blog anda.
• Selesai :D

Cara agar BLOG tidak bisa di copy paste

iki carane:

1. Login ke blogger Kamu, Klik Rancangan/ Design  > Edit HTML.
   
2. Beri tanda centang pada Expand Widget Templates. Kemudian cari kode<head>
   
3. Copy kode berikut :
   <SCRIPT type='text/javascript'> if (typeof document.onselectstart!="undefined") { document.onselectstart=new Function ("return false"); } else{ document.onmousedown=new Function ("return false"); document.onmouseup=new Function ("return true"); } </SCRIPT>
   kemudian tempatkan tepat dibawah kode <head>
   
4. Yang terakhir Klik Simpan Template/ Save Template
   

Membuat Judul Blog Bergerak

• Anda Login ke dashbor blog anda.
• Kemudian anda Klik Tata Letak --> Tambah Gadget --> Pilih HTML/Java Script.
• Selanjutnya anda Copy code dibawah ini dan pastekan pada kotak HTML/Javascript tadi

<script language=javascript>
msg = "Test Blog ...Test Blog ...";

msg = "..." + 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>

Keterangan: Ubah kode berwarna merah 'Test Blog ...Test Blog ...' dengan teks yang diinginkan.

• Kemudian anda Save/Simpan, dan lihat hasilnya.

Membuat headline news/news update/berita terbaru bergerak di blog

berikut ini:

1. Pertama anda harus masuk/ login ke akun Blogger akun blogger anda.
2.Kemudaian anda  Klik Template --> Edit HTML --> Lanjutkan (jangan lupa centang Expand Template Widget).

3. Setelah itu Cari kode ]]></b:skin> (untuk mempermudah pencarian gunakan CTRL + F atau).
4. Setelah ketemu, letakkan kode dibawah ini tepat diatas kode  ]]></b:skin>

/* Headline News
-------------------*/
.newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAwmwawSVRD811AGIAYU-bWQxjfu54APu27SLQVx-jKsL7dT59YCw4_TitXnZNGUByxAy9VvFIcsE47PbVMbfRVhlQ3hBbrvac_U6KXgYOh_r3fgTzAnzOLziTeZl_nEjVa9xsH2FFyR8/s1600/news.gif) no-repeat top left;width:970px;margin:0 auto;padding:0 auto;height:32px;color:#fff;}
.news {width: 970px;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#fff;text-decoration:none;}
.news a:hover {color:#ddd;text-decoration:underline;}  

Keterangan :
> Warna merah adalah ukuran panjang headline news.
> Warna biru adalah ukuran tinggi headline news.

5. Selanjutnya anda cari kode </head>
6. Kemudian anda copas kode dibawah ini tepat diatas kode </head>

<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'></script>
<script type='text/javascript'>
//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};

var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]>
</script>
<style type='text/css'>
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;}
.labelfield{ /*CSS for label field in general*/
color:#aaa;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#aaa;font:normal 14px Arial;text-transform:none;}
#example1{ /*Demo 1 main container*/
width: 780px;
height: 14px;
border: 0px solid #aaa;
padding: 0px;
font:bold 16px Arial;
text-transform:none;
text-align:left;
background-color:transparent;}
code{ /*CSS for insructions*/
color: #fff;}
#example1 a:link, #example1 a:visited {color:#f2f2f2;text-decoration:none;}
#example1 a:hover {color:#C8D3F2;text-decoration:none;}
</style>

7. Selanjutnya anda cari kode   <div id='header-wrapper'> atau   <div id='header-outer'> (pilih salah satu saja)
8. Jika sudah ketemu letakkan kode berikut tepat di bawah kode nomor 7 tersebut.

<div class='newspic'>
<div style='float:left;width:780px;padding:6px 0 6px 180px; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://www.temukancara.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>

Keterangan: Ubah kode yang berwarna biru dengan URL blog anda.

9. Jika sudah Simpan template anda dan lihat hasilnya.

Demikianlah postingan yang dapat saya sampaikan pada kali ini mengenai cara mudah membuat headline news di blog. Semoga bermanfaat buat anda semua.

Membuat Link Download Dengan Text Biasa

1.Cara Membuat Link Download Dengan Text Biasa

 <a href="Isi dengan link download yang ingin Anda bagikan " target="_blank"><b>DOWNLOAD</b></a>

Ganti tulisan yang bewarna merah dengan Link Anda sendiri

Ganti tulisan yang bewarna biru dengan Bacaan Anda sendiri

2.Cara Membuat Link Download Dengan Gambar

 <a href="http://www.4shared.com/rar/-Z5BCwMT/Adobe_Photoshop_CS4.html" style="background-color: white; border: 0px; clear: left; color: steelblue; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 16px; margin-bottom: 1em; margin-right: 1em; margin-top: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;"><img height="69" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0T4BHN3pCuC_e9fpy9lBwCBLHVNttfrNqLLZyYEdjS-luG7hnaWgtXMYJVIDDRHDW4qcHamP-CPqwHIVJnSVJZbToeGOOW2LhnuTqMZOufCH-oYwiY_MuErz_XK54_FRlBKJgkx5vKEQ/s320/download-785680.png" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; margin: 0px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: baseline;" width="320" /></a><span style="font-family: 'MS UI Gothic', sans-serif; font-size: 14pt; line-height: 17.35pt;"></span>

 

<a href="http://how-yourblog.blogspot.com /" title="Download"><img alt="download[4]" height="74" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMrUaehHtkr_1_eRVs8Et2W6wRIbwHdMqrD3M1R-H47xL301IrLz156hbk_sav3_SL4kKkxvDZwHGnQwCo5P7k0QEcOa83nBgRj2eYCPL5PhMAoogyf1AgXqFNmgcdUBiPPA5l9xI6eSHK/s1600/download+oke+1.jpg" width="216" /></a>

 <a href="http://how-yourblog.blogspot.com/" title="Download"><img alt="download[4]" height="74" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-KzPaSWZzp9Y3Kyopfv3UmjJwxanpZ__bO2X430wSVxHozNqpP4se4oWgO9bimVC7flr8OXt6_IS0GrD8dXbBA78Uve59diGarFsArK8YF49V-zav3L9AQSYQ_yd1futTK2iByodWAMgn/s1600/download+oke+2.jpg" width="216" /></a>

Tulisan yang merah ganti dengan link yang ingin Anda bagikan.

Untuk memunculkan gambar download seperti di atas pada artikel Anda, caranya cukup gampang. Setelah Anda memilih salah satu dari ketiga kode di atas, lihat pada bagian kiri atas. Ada bacaan Compose dan HTML.Sekarang klik yang HTML, lalu paste kan kode yang sudah Anda pilih tadi, lalu kembalikan ke Compose. Hasilnya akan muncul gambar dengan bacaan download

tulisan berjalan (marquee) Di Blog

Cara membuat tulisan berjalan (marquee) Di Blog

Minggu, 14 Oktober 2012 | 3komentar

Untuk Cara Membuat Tulisan Berjalan (Marquee) Di Blog  itu cukup mudah karena hanya dengan kode HTML sederhana sudah akan tercipta sebuah tulisan berjalan. Kode HTML untuk Cara Membuat Tulisan Berjalan (Marquee) Di Blog di kenal dengan perintah Marquee. Kode dasar perintah marquee adalah sebagai berikut :

<marquee>Tulisan disini akan berjalan</marquee>

Selain kode dasar marquee, ada perintah lain (umumnya disebut sebagai atribut) yang disisipkan untuk mengatur keindahan tampilan tulisan yang berjalan. Atribut yang sering di gunakan dalam kode marquee adalah :

• bgcolor="warna" » Untuk mengatur warna background (latar belakang) teks

• direction="left/right/up/down" » Mengatur arah gerakan teks

• behavior="scroll/slide/alternate" » Untuk mengatur perilaku gerakan

• Scroll » teks bergerak berputar

• Slide » teks bergerak sekali lalu berhenti

• Alternate » teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik )

• title="pesan" » Pesan akan muncul saat mouse berada di atas teks

• scrollmount="angka" » mengatur kecepatan geraka, semakin besar angka semakin cepat gerakannya.

• scrolldelay="angka" » Untuk mengatur waktu tunda gerakan dalam mili detik

• loop="angka|-1|infinite" » Mengatur jumlah loop

• width="lebar" » Mengatur lebar blok teks dalam pixel atau persen

Agar lebih jelas akan Kang Rohman sertakan contohnya :

Contoh marquee dari gerakan :

<marquee align="center" direction="left" height="200" scrollamount="2" width="30%"> marquee dari kanan ke kiri </marquee> 

Contoh hasilnya :

marquee dari kanan ke kiri

ganti kata "left" dengan keinginan anda yaitu bisa : right,  up, down .

Contoh marquee dengan variasi hurup dan warna latar belakang :

<div align="left"><font face="georgia" color="White"><strong><marquee bgcolor="red" width="70%"> marquee dengan variasi hurup </marquee></strong></font></div>

Contoh hasilnya :

marquee dengan variasi hurup

Agar lebih menarik, kode marquee juga bisa dipadukan dengan javascript sederhana, seperti onmouseover="this.stop()" onmouseout="this.start()" . Dengan kode javascript tersebut, tulisan berjalan akan seketika berhenti apabila pointer mouse komputer pengunjung blog kita mengarah ke tulisan yang berjalan, dan akan berjalan kembali apabila pointer mouse dipindah ke tempat lain.

Contoh, silahkan arahkan pointer mouse anda ke area marquee di bawah ini :

Contoh kodenya :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center"> silahkan tunjuk ke sini </marquee> 

Contoh hasilnya :

silahkan tunjuk ke sini

Contoh kode marquee yang di dalam nya terdapat link :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center"> 
<a href=" http://blogzafar.blogspot.com/">Panduan Lengkap Membuat Blog di Blogger</a><br/> 
<a href="http://blogzafar.blogspot.com/p/blog-page.html">TUKAR LINKS </a><br/> 
<a href="http://blogzafar.blogspot.com/p/ptc-terpercaya.html">PTC TERPERCAYA  </a><br/> 
</marquee> 

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="down" width="100%" height="100" align="center"> 
<a href="http://blogzafar.blogspot.com/p/ptc-terpercaya.html">PTC TERPERCAYA </a>
<a href="http://blogzafar.blogspot.com/p/blog-page.html">TUKAR LINKS </a><br/> 
<a href="http://blogzafar.blogspot.com/">Panduan Lengkap Membuat Blog di Blogger </a><br/> 
</marquee> 

Contoh hasilnya :


Panduan Lengkap Membuat Blog di Blogger

TUKAR LINKS 

PTC TERPERCAYA 



PTC TERPERCAYA 
TUKAR LINKS 

Panduan Lengkap Membuat Blog di Blogger 

Itu adalah beberapa contoh variasi kode marquee yang bisa di berikan, silahkan anda otak-atik sendiri agar tercipta variasi-variasi dari marquee ini.

Cara memasang tulisan berjalan di blog

Bila anda bertanya, sesudah membuat kode marquee lalu untuk di pasang di blognya bagaimana? Tentu jawabannya ya terserah anda mau di pasang di mana. Namun, sebagai contoh berikut adalahcara memasang kode marquee di sidebar blogger. 

• Silahkan login ke blogger dengan akun anda.

• Klik pada nama blog anda.

• Klik menu Tata Letak

• Klik Tambah Gadget

• Klik pada widget HTML/Javascript

 

• Pasanglah kode marquee yang telah anda buat sesuai degan yang saya terangkan diatas.

• Klik tombol Simpan

• Selesai.

Semoga artikel cara membuat tulisan berjalan (marquee) ini dapat bermanfaat bagi anda.

Memasang Lagu Di Blog

Cara Memasang Lagu Di Blog

Sabtu, 06 Oktober 2012 | 7komentar

Cara Memasang Lagu Di Blog,  Cara memasang/memberi musik/lagu mp3 di blog - Aneka widget memang bisa kita pasang di blog kita, baik widget yang berguna ataupun widget yang kurang bermanfaat keberadaannya,

•  Dan pada kesempatan kali ini saya akan share salah satu widget blog yang sifatnya hiburan. Mau kan setiap blognya klo dikunjungi ada musik/lagunya? Relatif. . Tapi gak ada salahnya buat dipasang di blog sebagai penghilang penat, sambil baca isi postingan. Apalagi klo lagu yang disajikan enak-enak. Jadi pengunjung blog yang mampir baca-baca merasa nyaman dengan lagu yang kita putar di blog. hehe.. Banyak penyedia layanan Music Player untuk blog dengan berbagai macam model dan bentuk. Dan kali ini saya akan coba Share Widget Musik Player yang bentuknya toolbar yang bisa kita pasang diatas maupun dibawah blog. Kita akan menggunakan jasa gratis dari http://scmplayer.net/. Ini dia sedikit kelebihan yang diberikan dari web musik player gratis ini :

- Support Blogger, Wordpress, Tumblr

- Mp3, Mp4, RSS Podcast atau Youtube Playlist

- Compatible dengan Crome, Firefox, Opera, Safari, IE

- Desain bebas utk Custom Skin RSS

Tertarik untuk mencoba ? Langsung aja berikut cara memasang musik mp3 di blog kita:

Cara membuatnya cukup mudah hanya ada 3 Step: Choose Skin > Edit Playlist > Configure Settings

• Pertama Choose Skin. Disini kita bisa memilih Toolbar Skin yang akan kita pasang nantinya di blog atau kita bisa menggunakan Custom Skin CSS. Sebagai contoh disini saya akan menggunakan Skin yang berwarna hitam, seperti gambar dibawah ini:

• Selanjutnya berlanjut pada Edit Playlist. Pada tahap ini kita bisa menyusun Playlist lagu secara manual dengan memasukkan judul dan link lagu yang bisa kita dapatkan di youtube, 4shared atau dari web penyedia musik lainnya. Atau kita bisa memanfaatkan RSS Podcast dari Playlist Youtube yang kita miliki. Bagi pengguna jasa Mbah Google pasti sangat mudah utk mempunyai akun dari Youtube selain G+, Blogger,  dll.  Sebagai contoh pemasangan disini saya akan memasang lagu secara manual dengan memasang link lagu dari Youtube. Buka Youtube > pilih lagu yang diinginkan. sebagai contoh saya pasang lagu dari Seconhandserenade - Is There Anybody Out There. Ambil/copy Linknya dan pastekan di edit playlist.

• Berlanjut ke langkah Configure Settings, setting sesuai keinginan kita, Auto Start/Tidak, Shuffle Playback'a, Volume'a, Toolbar'a diatas/dibawah. Contohnya saya akan setting seperti gambar di bawah ini:

  

Terakhir klik Done utk mengambil kode scriptnya

• Proses terakhir pemasangan pada blog. Sobat dapat memasangnya di dalam Template HTML atau pada Add Gadget/HTML di tata letak. Copy kode script'a dan pastekan dibawah <body> atau pada add gadget/HTML di tata letak.

Nomor Halaman Blog

Berikut Contoh nomer halaman blog yang telah saya pasangi nomer halaman untuk 2 blog saya sendiri

DEMO 1
Berikut Cara Membuat Nomer Halaman Pagenavi Blog

1. Masuk ke akun Blogger anda
2. Klik Template >> Edit HTML >> tekan Ctrl+F pada keyboard
3. Cari kode ]]></b:skin>
4. Tambahkan kode berikut tepat diatas atau sebelum ]]></b:skin>
   
   .showpageArea a{text-decoration:none}
   .showpageNum a{ display:inline-block; padding:0px 15px; margin-right:4px; border-radius:2px; border:solid 1px #c0c0c0; background:#e9e9e9; box-shadow:inset 0px 1px 0px rgba(255,255,255,.8),0px 1px 3px rgba(0,0,0,.1); font-size:.875em; font-weight:bold; text-decoration:none; color:#000000; text-shadow:0px 1px 0px rgba(255,255,255,1)}
   .showpageNum a:hover{padding:0px 15px; margin-right:4px; border-radius:2px; border:solid 1px #9168C9; background:#9168C9; box-shadow:inset 0px 1px 0px rgba(255,255,255,.8),0px 1px 3px rgba(0,0,0,.1); font-size:.875em; font-weight:bold; text-decoration:none; color:#FFFFFF; text-shadow:0px 1px 0px rgba(255,255,255,1)}
   .showpagePoint{ display:inline-block; padding:0px 9px; margin-right:4px; border-radius:2px; border:solid 1px #c0c0c0; background:#e9e9e9; box-shadow:inset 0px 1px 0px rgba(255,255,255,.8),0px 1px 3px rgba(0,0,0,.1); font-size:.875em; font-weight:bold; text-decoration:none; color:#000000; text-shadow:0px 1px 0px rgba(255,255,255,1)}
   .showpageOf{margin:0 3px 0 0; padding:7px 14px; text-decoration:none}
   .showpage a{ display:inline-block; padding:0px 15px; margin-right:4px; border-radius:2px; border:solid 1px #c0c0c0; background:#e9e9e9; box-shadow:inset 0px 1px 0px rgba(255,255,255,.8),0px 1px 3px rgba(0,0,0,.1); font-size:.875em; font-weight:bold; text-decoration:none; color:#000000; text-shadow:0px 1px 0px rgba(255,255,255,1)}
   .showpage a:hover{text-decoration:none}
   .showpageNum a:link, .showpage a:link{color:#000000; text-decoration:none}
5. Selanjutnya cari </body>
6. Tambahkan kode berikut tepat diatas atau sebelum </body>
   
   <script type='text/javascript'>;
   var home_page=&#39;/&#39;;
   var urlactivepage=location.href;
   var postperpage=4;
   var numshowpage=4;
   var upPageWord =&#39;Prev&#39;;
   var downPageWord =&#39;Next&#39;;
   </script>
   <script type='text/javascript'>
   //<![CDATA[
   eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 I;6 i;6 f;6 n;1f();C 1g(15){6 5=\'\';J=K(N/2);4(J==N-J){N=J*2+1}A=f-J;4(A<1)A=1;d=K(15/j)+1;4(d-1==15/j)d=d-1;D=A+N-1;4(D>d)D=d;5+="<3 7=\'1A\'>1B "+f+\' 1C \'+d+"</3>";6 16=K(f)-1;4(f>1){4(f==2){4(i=="o"){5+=\'<3 7="1D"><a 9="\'+B+\'">\'+O+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">\'+O+\'</a></3>\'}}b{4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+16+\');w x">\'+O+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+16+\');w x">\'+O+\'</a></3>\'}}}4(A>1){4(i=="o"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}4(A>2){5+=\' ... \'}1h(6 l=A;l<=D;l++){4(f==l){5+=\'<3 7="1E">\'+l+\'</3>\'}b 4(l==1){4(i=="o"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}b{4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+l+\');w x">\'+l+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+l+\');w x">\'+l+\'</a></3>\'}}}4(D<d-1){5+=\' ... \'}4(D<d){4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+d+\');w x">\'+d+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+d+\');w x">\'+d+\'</a></3>\'}}6 17=K(f)+1;4(f<d){4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+17+\');w x">\'+1i+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+17+\');w x">\'+1i+\'</a></3>\'}}5+=\'<1j><a 9="1F://1G.1H-1k.1I" 1J="1K-1L: 1M; 1N: 1O; 1P: 1Q;" 1R="1S">1T 1U 1V-1k</a></1j>\';6 E=y.1W("E");6 18=y.1X("1Y-1Z");1h(6 p=0;p<E.P;p++){E[p].1l=5}4(E&&E.P>0){5=\'\'}4(18){18.1l=5}}C 1a(Q){6 R=Q.R;6 1m=K(R.21$22.$t,10);1g(1m)}C 1f(){6 h=u;4(h.e("/r/s/")!=-1){4(h.e("?S-c")!=-1){n=h.F(h.e("/r/s/")+14,h.e("?S-c"))}b{n=h.F(h.e("/r/s/")+14,h.e("?&c"))}}4(h.e("?q=")==-1&&h.e(".5")==-1){4(h.e("/r/s/")==-1){i="o";4(u.e("#G=")!=-1){f=u.F(u.e("#G=")+8,u.P)}b{f=1}y.1n("<m T=\\""+B+"U/V/W?c-k=1&X=Y-Z-m&11=1a\\"><\\/m>")}b{i="s";4(h.e("&c-k=")==-1){j=20}4(u.e("#G=")!=-1){f=u.F(u.e("#G=")+8,u.P)}b{f=1}y.1n(\'<m T="\'+B+\'U/V/W/-/\'+n+\'?X=Y-Z-m&11=1a&c-k=1" ><\\/m>\')}}}C L(H){12=(H-1)*j;I=H;6 13=y.1o(\'1p\')[0];6 z=y.1q(\'m\');z.1r=\'1s/1t\';z.1u("T",B+"U/V/W?1v-1w="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1x(z)}C M(H){12=(H-1)*j;I=H;6 13=y.1o(\'1p\')[0];6 z=y.1q(\'m\');z.1r=\'1s/1t\';z.1u("T",B+"U/V/W/-/"+n+"?1v-1w="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1x(z)}C 1b(Q){1c=Q.R.24[0];6 1y=1c.1z.$t.F(0,19)+1c.1z.$t.F(23,25);6 1d=26(1y);4(i=="o"){6 1e="/r?S-c="+1d+"&c-k="+j+"#G="+I}b{6 1e="/r/s/"+n+"?S-c="+1d+"&c-k="+j+"#G="+I}27.9=1e}',62,132,'|||span|if|html|var|class||href||else|max|maksimal|indexOf|nomerhal|showpageNum|thisUrl|jenis|postperpage|results|jj|script|lblname1|page|||search|label||urlactivepage|onclick|return|false|document|newInclude|mulai|home_page|function|akhir|pageArea|substring|PageNo|numberpage|nopage|nomerkiri|parseInt|redirectpage|redirectlabel|numshowpage|upPageWord|length|root|feed|updated|src|feeds|posts|summary|alt|json|in||callback|jsonstart|nBody||banyakdata|prevnomer|nextnomer|blogPager||hitungtotaldata|finddatepost|post|timestamp|alamat|halamanblogger|loophalaman|for|downPageWord|div||innerHTML|totaldata|write|getElementsByTagName|head|createElement|type|text|javascript|setAttribute|start|index|appendChild|timestamp1|published|showpageOf|Page|of|showpage|showpagePoint|http||||style|font|size|0pt|float|right|margin|0px||||||getElementsByName|getElementById|blog|pager||openSearch|totalResults||entry|29|encodeURIComponent|location'.split('|'),0,{}))
   //]]>
   </script>
7. Selesai. Simpan template dan lihat hasilnya
8. var postperpage=4; menunjukkan jumlah post atau artikel dalam satu halaman
   var numshowpage=4; menunjukkan jumlah halaman yang tampila pada nomer halaman