Tuesday, August 14, 2007

What is RSS

For other meanings of RSS, see RSS (disambiguation).
For RSS feeds from Wikipedia, see Wikipedia:Syndication.
RSS

Screenshot of an RSS feed as seen in Mozilla Thunderbird
File extension:
.rss, .xml
MIME type:
application/rss+xml (Registration Being Prepared)[1]
Extended from:
XML
RSS (which, in its latest format, stands for "Really Simple Syndication") is a family of web feed formats used to publish frequently updated content such as blog entries, news headlines or podcasts. An RSS document, which is called a "feed", "web feed", or "channel", contains either a summary of content from an associated web site or the full text. RSS makes it possible for people to keep up with their favorite web sites in an automated manner that's easier than checking them manually.
RSS content can be read using software called a "feed reader" or an "aggregator." The user subscribes to a feed by entering the feed's link into the reader or by clicking an RSS icon in a browser that initiates the subscription process. The reader checks the user's subscribed feeds regularly for new content, downloading any updates that it finds.
The initials "RSS" are used to refer to the following formats:
Really Simple Syndication (RSS 2.0)
RDF Site Summary (RSS 1.0 and RSS 0.90)
Rich Site Summary (RSS 0.91)
RSS formats are specified using XML, a generic specification for the creation of data formats.

Monday, August 13, 2007

Anything about Blog

A blog (a portmanteau of web log) is a website where entries are written in chronological order and commonly displayed in reverse chronological order. "Blog" can also be used as a verb, meaning to maintain or add content to a blog.
Blogs provide commentary or news on a particular subject such as food, politics, or local news; some function as more personal online diaries. A typical blog combines text, images, and links to other blogs, web pages, and other media related to its topic. The ability for readers to leave comments in an interactive format is an important part of many blogs. Most blogs are primarily textual, although some focus on art (artlog), photographs (photoblog), sketchblog, videos (vlog), music (MP3 blog), audio (podcasting) or sexual topics (Adult blog), and are part of a wider network of social media.
In May 2007, blog search engine Technorati was tracking more than 71 million blogs.[1]

New Blogger Label Cloud


Update : Tutorial ini sudah tidak berlaku lagi, silahkan baca tutorial terbaru, klik di sini!

Setelah kemarin mudik ke bandung selama dua hari nengokin si kembar yang semakin hari
semakin gemesin aja, akhirnya saya balik lagi deh ke jakarta untuk mencari rezeki buat membiayai istri tercinta serta si kembar yang sudah mulai pintar jajan. Yups, tidak usah lama-lama curhatnya, ntar jadi malah garing. OK, kita kembali ke......blog tutorial tentunya. Tutorial kali ini saya ingin membahas tentang pemasangan label Cloud atau Tag Cloud pada template baru/new blogger template.



What's the meaning of Label Cloud?



Label cloud adalah pemasangan label (kategori) dalam bentuk cloud.... ( desiiig kalau gitu doang ga usah di terangin atuh... abis ga tau definisinya jadi ya asalan-asalan deh), seperti yang sobat lihat pada sidebar sebelah kanan blog ini yaitu di bawah tulisan Kategori
di sana terdapat beberapa label (kategori) yang pada ujungnya tertera berapa jumlah kategori yang terpasang pada kateori tersebut.

Nah itu adalah label yang umum di pakai di blogger, bila ingin sedikit yang berbeda, sobat bisa memasang label cloud. Dengan label cloud, label (kategori) akan di tulis dalam ukuran font yang berbeda sesuai dengan banyaknya kategori yang di pasang, semakin sering kategori tersebut maka semakin besar pula font nya akan tercetak.



Untuk memasang label cloud, tehnik yang saya pakai kali ini adalah buah karya dari phydeaux.
Silahkan ikuti langkah-langkah berikut ini :




  1. Sign in di blogger




  2. Klik menu Layout




  3. Klik menu Edit HTML




  4. Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template




  5. Klik kotak kecil di samping tulisan Expand Widget Templates untuk memberi tanda centang.




  6. Tunggu beberapa saat sampai proses selesai




  7. Simpan kode berikut di antara kode <b:skin><![CDATA[ dan kode
    ]]></b:skin> , atau jika bingung simpan saja persis di atas kode
    ]]></b:skin>






  8. /* Label Cloud Styles

    ----------------------------------------------- */

    #labelCloud {text-align:center;font-family:arial,sans-serif;}

    #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}

    #labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}

    #labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}

    #labelCloud a{text-decoration:none}

    #labelCloud a:hover{text-decoration:underline}

    #labelCloud li a{}

    #labelCloud .label-cloud {}

    #labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}

    #labelCloud .label-cloud li:before{content:"" !important}







  9. Copy paste kode berikut sesudah kode ]]></b:skin> dan sebelum kode </head>
    atau jika bingung simpan saja persis di atas kode </head>





    <script type='text/javascript'>

    // Label Cloud User Variables

    var cloudMin = 1;

    var maxFontSize = 20;

    var maxColor = [0,0,255];

    var minFontSize = 10;

    var minColor = [0,0,0];

    var lcShowCount = false;

    </script>








  10. Cari kode berikut di dalam kode template sobat






  11. <b:widget id='Label1' locked='false' title='Labels' type='Label'>

    <b:includable id='main'>

    <b:if cond='data:title'>

    <h2><data:title/></h2>

    </b:if>

    <div class='widget-content'>

    <ul>

    <b:loop values='data:labels' var='label'>

    <li>

    <b:if cond='data:blog.url == data:label.url'>

    <data:label.name/>

    <b:else/>

    <a expr:href='data:label.url'><data:label.name/></a>

    </b:if>

    (<data:label.count/>)

    </li>

    </b:loop>

    </ul>

    <b:include name='quickedit'/>

    </div>

    </b:includable>

    </b:widget>









  12. Ganti kode di atas dengan kode berikut ini :






  13. <b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>

    <b:includable id='main'>

    <b:if cond='data:title'>

    <h2><data:title/></h2>

    </b:if>



    <div class='widget-content'>

    <div id='labelCloud'/>

    <script type='text/javascript'>



    // Don't change anything past this point --------------

    // Cloud function s() ripped from del.icio.us

    function s(a,b,i,x){

    if(a&gt;b){

    var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)

    }

    else{

    var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)

    }

    return v

    }





    var c=[];

    var labelCount = new Array();

    var ts = new Object;

    <b:loop values='data:labels' var='label'>

    var theName = &quot;<data:label.name/>&quot;;

    ts[theName] = <data:label.count/>;

    </b:loop>



    for (t in ts){

    if (!labelCount[ts[t]]){

    labelCount[ts[t]] = new Array(ts[t])

    }

    }

    var ta=cloudMin-1;

    tz = labelCount.length - cloudMin;

    lc2 = document.getElementById('labelCloud');

    ul = document.createElement('ul');

    ul.className = 'label-cloud';

    for(var t in ts){

    if(ts[t] &lt; cloudMin){

    continue;

    }

    for (var i=0;3 &gt; i;i++) {

    c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)

    }

    var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);

    li = document.createElement('li');

    li.style.fontSize = fs+'px';

    li.style.lineHeight = '1';

    a = document.createElement('a');

    a.title = ts[t]+' Posts in '+t;

    a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';

    a.href = '/search/label/'+encodeURIComponent(t);

    if (lcShowCount){

    span = document.createElement('span');

    span.innerHTML = '('+ts[t]+') ';

    span.className = 'label-count';

    a.appendChild(document.createTextNode(t));

    li.appendChild(a);

    li.appendChild(span);

    }

    else {

    a.appendChild(document.createTextNode(t));

    li.appendChild(a);

    }

    ul.appendChild(li);

    abnk = document.createTextNode(' ');

    ul.appendChild(abnk);

    }

    lc2.appendChild(ul);

    </script>



    <noscript>

    <ul>

    <b:loop values='data:labels' var='label'>

    <li>

    <b:if cond='data:blog.url == data:label.url'>

    <data:label.name/>

    <b:else/>

    <a expr:href='data:label.url'><data:label.name/></a>

    </b:if>

    (<data:label.count/>)

    </li>

    </b:loop>

    </ul>

    </noscript>

    <b:include name='quickedit'/>

    </div>



    </b:includable>

    </b:widget>






  14. Klik tombol Simpan template




  15. Selesai.





Bagaimana sobat, berhasilkah? mudah-mudahan tidak menemui kendala apapun. Untuk melihat contohnya, silahkan sobat klik di sini !



Ragam Jenis Blog

Banyak sekali ragam Blog!!!
ditinjau dari tipe medinya blog dibedakan :
1. Photoblog
2. Videoblog atau Vlog
3. LinkLog
4. Podcast

untuk memulai membuat blog kita tentukan dulu jenis blog yang akan dibuat, setelah itu nantikan postingan saya selanjutnya!11

Langkah Awal Membuat Blog

Tanpa sadar seringkali kita mendengar kata blog, blogging, ataupun web blog. sebenarnya apa yang dimaksud dengan blog?? atau web blog?? kalau kita searching pada search engine (misalkan : google.com) pasti ketemu!!...
Secara gampang kita dapat mendefinisikan blog sebagai web yang mudah kita atur dan memuat tulisan-tulisan kita yang diarsipkan dengan kronologis terbalik (sesuai urutan tanggal posting)
Dengan blog kita dapat mengenalkan diri kita ke dunia maya, mempromosikan kemampuan kita, sampai dapat digunakan untuk mendulang dolar lewat internet
Anda tertarik?? ikuti postingan saya selanjutnya!

Thursday, August 9, 2007

Membuat Navbar


Setelah beberapa hari tidak ada tulisan baru di blog ini, akhirnya saya tulis juga tutorial baru. Kali ini saya akan memenuhi hasrat sobat muhhib yang pantang menyerah, jika di hitung mungkin sudah tiga kali lebih beliau menanyakan tentang hal ini yaitu cara membuat navbar yang berada di bagian footer seperti yang ada pada blognya mas anang.



Ada kemungkinan bahwa navbar yang saya buat ini agak berbeda dengan miliknya mas anang, maklum lah lain orang lain ilmu, walaupun sebenarnya ilmu ini saya pelajari dari templatenya mas anang sendiri. Apa itu navbar? agar tidak bingung, coba alihkan pandangan sobat ke bagian paling atas blog ini ! di sana terlihat satu frame miliknya blogger untuk memudahkan kita sigin di blogger, nah seperti itulah navbar yang saya maksud.




Untuk membuat gambar seperti itu, ada beberapa langkah yang harus sobat lakukan, di antaranya :




  1. Jika sobat menginginkan dalam navbar tersebut terpampang foto atau logo ataupun tanda tangan seperti miliknya mas anang, maka buatlah terlebih dahulu foto/logo atau gambar berbentuk tanda tangan, tapi tentunya dalam ukuran yang kecil. Contoh seperti gambar berikut ini :








  2. atau gambar tanda tangan seperti ini (tanda tangan saya agak mirip dengan yang punya mas anang) :







  3. jika foto/logo atau gambar tanda tangan sudah selesai di buat, maka langkah selanjut adalah meng upload foto tersebut ke hosting untuk menyimpan gambar, bisa ke blogger ataupun hosting lain. setelah di upload, catatlah alamat gambar tersebut untuk keperluan nanti di simpan di dalam navbar. Contoh alamat foto dan tanda tangan di atas seperti ini :




  4. http://favatar.myfavatar.com/amen24.png



    http://amen24.googlepages.com/TandaTangan_03.gif



  5. Langkah selanjutnya adalah memasukan kode CSS untuk navbar yang di buat, contoh kodenya seperti ini :



  6. /* kode untuk navbar

    --------------------------------------- */



    #navbar-bawah img {

    /* margin: 0px 0px -8px 0px; */

    vertical-align: middle;

    }


    #navbar-bawah p.info {

    float: right;

    padding-right:40px;

    line-height: 1.5;

    height: 100%;

    vertical-align: bottom;

    }


    #navbar-bawah p {

    float: left;

    margin: 0px;

    padding-top:4px;

    padding-left:40px;

    line-height: 1.2;

    vertical-align: bottom;

    }


    #navbar-bawah a {

    color:#00CCFF;

    text-decoration:none;

    }

    #navbar-bawah a:hover{

    color: #00FFFF;

    }

    #navbar-bawah {

    align: center;

    position: fixed;

    border-top: 1px solid #ddd;

    border-bottom: 5px solid #003366;

    background-color: #114477;

    width: 100%;

    left: 0px;

    text-align: left;

    color: #ffffff;

    font-family: verdana;

    font-size: 12px;

    z-index:10000;

    bottom:0;


    }




  7. Langkah berikutnya adalah memasukan kode navbar pada body template, contoh kodenya seperti ini :






  8. <br/><br/>

    <div id="navbar-bawah">

    <p><img border="0" src="http://favatar.myfavatar.com/amen24.png"/>&#160;&#160;&#160;

    <a href="http://template-unik.blogspot.com"><b>Template Unik</b>

    </a>&#160;&#160;&#169;&#160;2007&#160;|

    Design by <a href="http://kolom-tutorial.blogspot.com" target="_blank">Rohman Abdul Manap</a>

    &#160;&#160;&#160;<img border="0" src="http://amen24.googlepages.com/TandaTangan_03.gif"/></p>

    <p class="info">Powered by <a href="http://www.blogger.com">Blogger</a> |

    thanks to <a href="http://www.feedburner.com" target="_blank">Feed burner</a><br/>

    Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>

    </div>








Tadinya saya mau menerangkan tentang kode CSS yang saya pasang di atas, akan tetapi rasanya saya agak kurang enak badan jadi pinginnya singkat saja. sebagai catatan, kode yang saya cetak merah berarti harus di ganti dengan link atau tulisan yang sobat miliki.



Untuk cara pemasangan kode di atas, silahkan ikuti langkah berikut ini :



Untuk Template Klasik




  1. Sign in di blogger




  2. Klik menu Template




  3. Klik menu Edit HTML




  4. Copy seluruh kode template sobat, paste di notepad kemudian save di komputer sobat sebagai backup data




  5. Copy paste kode berikut ! simpan antara kode <style type="text/css"> dan kode </style>.
    atau jika bingung, simpan saja persis di atas kode </style>



  6. /* kode untuk navbar

    --------------------------------------- */



    #navbar-bawah img {

    /* margin: 0px 0px -8px 0px; */

    vertical-align: middle;

    }


    #navbar-bawah p.info {

    float: right;

    padding-right:40px;

    line-height: 1.5;

    height: 100%;

    vertical-align: bottom;

    }


    #navbar-bawah p {

    float: left;

    margin: 0px;

    padding-top:4px;

    padding-left:40px;

    line-height: 1.2;

    vertical-align: bottom;

    }


    #navbar-bawah a {

    color:#00CCFF;

    text-decoration:none;

    }

    #navbar-bawah a:hover{

    color: #00FFFF;

    }

    #navbar-bawah {

    align: center;

    position: fixed;

    border-top: 1px solid #ddd;

    border-bottom: 5px solid #003366;

    background-color: #114477;

    width: 100%;

    left: 0px;

    text-align: left;

    color: #ffffff;

    font-family: verdana;

    font-size: 12px;

    z-index:10000;

    bottom:0;


    }







  7. Copy paste kode berikut persis di atas kode </body> (ganti yang tercetak merah dengan milik sobat) :






  8. <br/><br/>

    <div id="navbar-bawah">

    <p><img border="0" src="http://favatar.myfavatar.com/amen24.png"/>&#160;&#160;&#160;

    <a href="http://template-unik.blogspot.com"><b>Template Unik</b>

    </a>&#160;&#160;&#169;&#160;2007&#160;|

    Design by <a href="http://kolom-tutorial.blogspot.com" target="_blank">Rohman Abdul Manap</a>

    &#160;&#160;&#160;<img border="0" src="http://amen24.googlepages.com/TandaTangan_03.gif"/></p>

    <p class="info">Powered by <a href="http://www.blogger.com">Blogger</a> |

    thanks to <a href="http://www.feedburner.com" target="_blank">Feed burner</a><br/>

    Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>

    </div>






  9. Klik tombol Simpan Perubahan Template




  10. Selesai.






Untuk Template baru (new blogger template)

  1. Sign in di blogger




  2. Klik menu layout




  3. Klik menu Edit HTML




  4. Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template




  5. Copy paste kode berikut ! simpan di atas kode ]]></b:skin>



  6. /* kode untuk navbar

    --------------------------------------- */



    #navbar-bawah img {

    /* margin: 0px 0px -8px 0px; */

    vertical-align: middle;

    }


    #navbar-bawah p.info {

    float: right;

    padding-right:40px;

    line-height: 1.5;

    height: 100%;

    vertical-align: bottom;

    }


    #navbar-bawah p {

    float: left;

    margin: 0px;

    padding-top:4px;

    padding-left:40px;

    line-height: 1.2;

    vertical-align: bottom;

    }


    #navbar-bawah a {

    color:#00CCFF;

    text-decoration:none;

    }

    #navbar-bawah a:hover{

    color: #00FFFF;

    }

    #navbar-bawah {

    align: center;

    position: fixed;

    border-top: 1px solid #ddd;

    border-bottom: 5px solid #003366;

    background-color: #114477;

    width: 100%;

    left: 0px;

    text-align: left;

    color: #ffffff;

    font-family: verdana;

    font-size: 12px;

    z-index:10000;

    bottom:0;





  7. Copy paste kode berikut persis di atas kode </body> (ganti yang tercetak merah dengan milik sobat) :






  8. <br/><br/>

    <div id="navbar-bawah">

    <p><img border="0" src="http://favatar.myfavatar.com/amen24.png"/>&#160;&#160;&#160;

    <a href="http://template-unik.blogspot.com"><b>Template Unik</b>

    </a>&#160;&#160;&#169;&#160;2007&#160;|

    Design by <a href="http://kolom-tutorial.blogspot.com" target="_blank">Rohman Abdul Manap</a>

    &#160;&#160;&#160;<img border="0" src="http://amen24.googlepages.com/TandaTangan_03.gif"/></p>

    <p class="info">Powered by <a href="http://www.blogger.com">Blogger</a> |

    thanks to <a href="http://www.feedburner.com" target="_blank">Feed burner</a><br/>

    Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>

    </div>






  9. Klik tombol Simpan Template




  10. Selesai.








Itu tadi langkah-langkah yang di lakukan untuk membuat navbar, untuk melihat contoh dari hasil pemasangan kode di atas, sobat bisa mengunjungi blog saya yang satunya yaitu di http://template unik.blogspot.com. Arahkan scroll bar ke bagian paling bawah blog, maka nanti sobat bisa melihat navbar yang mirip punya blogger. Agar lebih cepat melihat contoh hasilnya silahkan sobat klik di sini !



Selamat mencoba !



Wednesday, August 1, 2007

Blue Lover Template (XML)


Template lagiii.....iiiii setelah semalaman kutak-katik kode, akhirnya ada juga yang jadi nih. Nama nya Blue Lover, yo'i karena secara default nya template ini dominan berwarna biru walaupun untuk masalah warna sebenarnya bisa saja di ubah. Agar lebih menarik, coba deh di klik gambar di bawah untuk melihat contoh blog yang memakai template Blue Lover :








Berbeda dengan template-template sebelumnya, template ini sengaja tidak saya masukan fungsi Readmore, ini di maksudkan memberi kebebasan terhadap pemakainya apakah mau memakai Read more versi lama atau yang baru. Tentunya bagi sobat yang menginginkan kecepatan, sobat lebih baik memakai sistem yang baru, tapi bagi sobat yang mempunyai iklan Google Adsense sebaiknya memakai Read more versi yang lama. Untuk memasang fungsi Read more dengan versi yang lama, silahkan sobat baca di sini !
dan bagi yang mau memasang Read more dengan versi baru, silahkan sobat baca di sini !



Dalam hal pewarnaan, saya telah membubuhkan banyak variable warna, sehingga sobat lebih leluasa mengubah warna sesuai keinginan. Tentunya untuk mengubah warna, sobat bisa jumpai di menu Font dan Warna. Bagi sobat yang berminat, silahkan download template nya, kemudian jangan lupa untuk mengekstraknya terlebih dahulu dengan program Winzip sebelum di upload ke blogger.



Jika ada yang bertanya, apakah boleh mengotak-atik template ini sesuai keinginan sobat? jawaban saya yaitu silahkan saja, akan tetapi saya harap sobat tidak menghapus banner untuk blog Template Unik dan kalau berkenan silahkan untuk membuat link ke blog ini, nanti akan saya linkback kalau untuk yang ke blog ini.



Satu hal yang penting untuk di ketahui apabila sobat mau mengganti template, sebaiknya sobat mengcopy terlebih dahulu seluruh aksesori ataupun link yang ada
agar tidak pusing lagi mencari kode-kodenya. Caranya silahkan ikuti langkah-langkah berikut ini :




  1. Sign in di blogger




  2. Klik menu layout




  3. Klik menu Elemen Halaman




  4. Klik tulisan Edit pada setiap elemen




  5. Copy seluruh kode yang ada, kemudian paste pada notepad untuk nanti di masukan lagi apabila sudah mengganti template




  6. Selesai





Apabila sobat tidak mengcopy kode-kode yang sudah di pasang, maka niscaya nanti akan kerepotan dalam hal mendapatkan kembali kode yang sudah dipasang.



Agar tidak terlalu lama membaca, untuk mendownload template Blue Lover, silahkan sobat klik di sini !



Selamat mempunyai wajah baru !