Memasang Jam Pada Blog

jamJam selain berfungsi sebagai penunjuk waktu juga bisa dijadikan sebagai aksesoris bagi blog. Dengan memasang jam, blog kita akan terlihat lebih hidup dan menarik.

Bagi Anda yang lebih mengutamakan konten daripada tampilan lebih baik tidak usah memasangnya karena akan memperlambat loading page pada blog Anda. Tapi bila tidak terlalu mempermasalahkan loading blog maka tidak ada salahnya untuk memasang aksesoris ini.

Saat ini ada cukup banyak layanan yang menyediakan aksesoris jam gratis seperti timeanddate.com, clock4blog.eu, clocklink.com, widgetbox.com dan masih banyak lagi. Pada postingan kali ini saya akan membahas tentang memasang jam analog dari World time server. Karena layanan ini bisa menyediakan waktu yang lebih akurat dan banyak pilihan warna yang bisa Anda pilih sesuai selera.

Untuk memasangnya, silahkan ikuti langkah
-langkah dibawah ini:

1. Kunjungi situs http://www.worldtimeserver.com/clocks

2. Pilih salah satu bentuk jam analog yang Anda inginkan dengan mengklik link dibawah gambarnya masing-masing


3. Kemudian Anda akan masuk kehalaman kustomasi seperti ini:



  • Clock Color : Pilih warna sesuai dengan selera dan template Anda

  • Size : Pilih ukuran yang Anda inginkan

  • Location : Pilih lokasi Anda

  • City Name : Isi nama kota Anda. Ini bersifat optional. Jika Anda tidak ingin menampilkan tinggal dikosongkan aja

  • 4. Jika sudah, klik Update HTML Code
    5. Copy kode
    dalam kotak Object HTML Code

    6. Buka blogger. Klik menu Layout -> Page Elements

    7. Klik Add a gadget. Klik tombol + pada HTML/ Javascript

    8. Pastekan kodenya dalam kotak lalu klik Save
    9. Selesai.
    Silahkan klik View blog untuk melihat tampilannya

    Selamat berkreasi...
    senyum

    Cara Membuat Widget Tab View Seperti Yang Diblog Ini
    Berhubung cukup banyak yang bertanya kesaya mengenai cara membuat widget tab view yang ada categories, comment dan popular post seperti di blog ini. Maka pada kesempatan ini, saya akan mencoba untuk menjelaskannya dipostingan ini. Sebenarnya postingan mengenai cara membuat widget tab view beserta cara memasukkan konten kedalamnya sudah pernah saya bahas. Namun karena cara untuk memasukkan label cloud kedalam widget tab view agak berbeda dan lebih rumit. Maka saya akan menjelaskan caranya disini.

    Agar to the point, saya akan memberikan tutor tentang cara membuat widget tab view seperti yang ada diblog ini yaitu berisi Categories, Comment, dan Popular Post.

    tab view, label cloud
    Ok mari kita mulai.

    1. Buka Blogger -> Design -> Edit HTML

    2. Backup template anda terlebih dahulu untuk mengantisipasi terjadi kegagalan. Setelah itu beri tanda centang pada Expand Widget Templates.

    3. Letakkan kode berikut diatas kode ]]></b:skin>

    #labelCloud {text-align:center;font-family:arial,sans-serif; line-height:23px}
    #labelCloud .label-cloud li{display:inline; background-image:none !important; padding-left:1px; margin:0px; vertical-align:baseline !important; border:0 !important;}
    #labelCloud ul{list-style-type:none; margin:0 auto; padding:0px;}
    #labelCloud a img{border:0; display:inline; margin:3px; padding:0px}
    #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:&quot;&quot; !important}
    4. Lalu letakkan kode dibawah ini diatas kode </head>

    <script type='text/javascript'>
    // Label Cloud User Variables
    var cloudMin = 1;
    var maxFontSize = 18;
    var maxColor = [28,66,109];
    var minFontSize = 11;
    var minColor = [51,97,148];
    var lcShowCount = false;
    </script>
    5. Kemudian cari kode yang dibawah ini. (Pastikan anda telah memasang widget label diblog anda. Jika tidak, anda tidak akan menemukan kode dibawah ini)

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

    6. Kalau sudah ketemu, ganti kode diatas dengan kode dibawah ini

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

    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>
    7. Jika sudah. Klik Save Template lalu masuk ke menu Design -> Page Element

    8. Klik Add a gadget -> HTML/Javascript lalu masukkan script dibawah ini kedalamnya

    <style type="text/css">
    div.TabView div.Tabs
    {
    height: 30px;
    overflow: hidden;
    }
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 100px;
    text-align: center;
    margin: 0px 0px 0px 3px;
    background-color: #1c426d;
    height: 24px;
    padding-top: 6px;
    vertical-align: middle;
    border: 1px solid #ffffff;
    border-bottom-width: 2;
    text-decoration: none;
    font-family: "Arial, Helvetica, sans-serif", Arial;
    font-weight: 900;
    color: #000;
    }
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    background-color: #336194;
    }
    div.TabView div.Pages
    {
    clear: both;
    border: 1px solid #cccccc;
    overflow: hidden;
    background-color: #ffffff;
    }
    div.TabView div.Pages div.Page
    {
    height: 100%;
    padding: 5px;
    overflow: hidden;
    }
    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;
    }

    </style>


    <form action="tabview.html" method="get">
    <div id="TabView" class="TabView">
    <div style="width: 385px;" class="Tabs">
    <a><span style="gt;Categories</span></a>
    <a><span style="gt;Comments</span></a>
    <a><span style="gt;Popular Post</span></a>
    </div>
    <div style="width: 385px; height: 270px;" class="Pages">

    <div class="Page">
    <div class="Pad">
    <div id="labelCloud"/>
    <script type="text/javascript">

    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 var="label" values="data:labels">
    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(&#39;labelCloud&#39;);
    ul = document.createElement(&#39;ul&#39;);
    ul.className = &#39;label-cloud&#39;;
    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(&#39;li&#39;);
    li.style.fontSize = fs+&#39;px&#39;;
    li.style.lineHeight = &#39;1&#39;;
    a = document.createElement(&#39;a&#39;);
    a.title = ts[t]+&#39; Posts in &#39;+t;
    a.style.color = &#39;rgb(&#39;+c[0]+&#39;,&#39;+c[1]+&#39;,&#39;+c[2]+&#39;)&#39;;
    a.href = &#39;/search/label/&#39;+encodeURIComponent(t);
    if (lcShowCount){
    span = document.createElement(&#39;span&#39;);
    span.innerHTML = &#39;(&#39;+ts[t]+&#39;) &#39;;
    span.className = &#39;label-count&#39;;
    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(&#39; &#39;);
    ul.appendChild(abnk);
    }
    lc2.appendChild(ul);
    </script>

    <noscript>
    <ul>
    <b:loop var="label" values="data:labels">
    <li>
    <b:if cond="data:blog.url == data:label.url">
    <data:label.name/>
    <b:else/>
    <a expr:href="data:label.url"><data:label.name/></data:label.name></a>
    </b:else></data:label.name></b:if>
    (<data:label.count/>)
    </data:label.count></li>
    </b:loop>
    </ul>
    </noscript>
    </div>
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    <script style="text/javascript" src="http://hbhost.googlecode.com/files/recent-comments.js"></script><script style="text/javascript">var a_rc=10;var m_rc=false;var n_rc=true;var o_rc=40;</script><script src="http://hermanblog.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    <script type="text/javascript">
    function pipeCallback(obj) { document.write('<ol style="text-transform: capitalize;">'); var i; for (i = 0; i < obj.count ; i++) { var href = "'" + obj.value.items[i].link + "'"; var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>"; document.write(item); } document.write('</ol>'); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=1a1c6e4e6d4f148e3650fda46910e15f&url=http%3A%2F%2Fhermanblog.com&num=10" type="text/javascript"></script> <noscript><a href="http://hermanblog.com" target="_blank">Herman Blog</a></noscript>

    </div>
    </div>

    </div></div></form>

    <script style="text/javascript" src="http://hbhost.googlecode.com/files/tab_view.js"></script>

    <script type="text/javascript">tabview_initialize('TabView');
    </script>
    Keterangan:
    Teks berwarna merah adalah kode untuk label cloud alias Categories, teks berwarna orange adalah kode untuk recent comment alias Comment, dan teks berwarna cokelat adalah kode untuk popular post alias Popular Post. Silahkan diganti kodenya jika anda ingin memasang widget lain.
    Teks berwarna hijau adalah nama dari masing-masing tab. Silahkan diganti sesuai dengan nama widget yang anda pasang
    Teks berwarna ungu bold adalah ukuran wigdet tab view. Silahkan diganti sesuai ukuran sidebar blog anda.

    9. Kalau sudah Klik Save.

    10. Masih pada halaman Page Element, klik Edit pada Label.

    label

    11. Hapus tulisan yang ada dalam kotak Title (bila ada) lalu klik Save.

    12. Selesai. Silahkan klik View blog untu melihat hasilnya.


    Untuk keterangan mengenai cara mengganti warna, font, ukuran dari widget tab view dan label cloud. Silahkan baca disini (untuk tab view) atau disini (untuk label cloud).

    Selamat mencoba. Jika ada yang kurang jelas silahkan ditanyakan melalui kotak komentar

    cara mengganti template pada blog
    Bosan dengan tampilan blog anda ? silahkan ganti tampilan nya dengan template yang dapat anda cari secara gratis di banyak situs penyedia template gratis.

    Untuk merubah template sbb :

    • Cari Situs Penyedia Template Gratis
    • Untuk informasi template gratis bisa lihat di www.zoomtemplate.com atau anda bisa langsung kesini : http://btemplates.com/ atau disini http://freetemplates.blogspot.com/
    • Di situs penyedia template pilih template yang anda sukai .
    • Lalu klik 'download'.
    • Simpan hasil download dihardisk anda,.
    • Setelah di download Klik kanan ikon hasil download itu ,
    • lalu klik " extrak here"
    Cara Merubah Template Blogspot
    Catatan : Pastikan terlebih dulu bahwa anda telah mengetahui template lama anda memakai yg mana, apakah dengan classic(HTML) template, atau New (XML) template
    Ciri2 nya bisa dilihat di dalam halaman editor HTMl sbb :
    Untuk yg classic(HTML) , cirinya di paling atas..diawali dengan <! DOCTYPE html...dst..dst.., seperti tampak dalam gambar sbb :
    Tips Cara Merubah Template BlogspotDan untuk yang New (XML) template cirinya di paling atas..diawali dengan <!?xml version="1.0.....dst..dst.., seperti tampak dalam gambar sbb :
    Tutorial Cara Merubah Template Blogspot

    Ciri lain perbedaan template antara yg classic dan New, bisa kita lihat saat kita berada di halaman awal dashbor blogspot, dimana jka kita mempunyai banyak blog dalam satu akun, maka disitu akan terlisting deretan blog milik kita, yaitu sbb :

    Panduan Cara Merubah Template Blogspot


    Di gambar atas, bisa kita lihat satu blog saya : Bisnis Air OXY , adalah ber template "NEW" disitu ada link utk "LAYOUT"  Design dimana di link itu lah tempatnya kita untuk mengotak-atik tampilan blog,
    sedangkan blog Belajar HTML Mencari Usaha Halal, ber template "Classic" dan link untuk mengotak-atik Tampilan blog , adanya di link "TEMPLATE"
    Update 16 Juni 2011 : Ada perubahan pada dashbor blogspot sbb : Untuk Template New XML akan tertulis tab Design ( Bukan Layout:lagi seperti yg di Dashbor lama )

    Nah..jika kita sudah mengetahui jenis template lama kita, maka langkah selanjutnya adalah mencari template yg sesuai dengan template lama, misalnya yg lama pakai New (XML) , maka carilah template dengan yg New (XML) pula..dan sebaliknya...

    Ciri hasil download New (XML) ( setelah di ekstrak dari ZIPfile) seperti terlihat dalam gambar :
    Dan Ciri hasil download classic(HTML) seperti terlihat dalam gambar :

    Setelah proses men download template selesai, dan sudah sesuai dengan pilihan template antara yg lama dengan yg baru, Langkah selanjutnya sbb :
    • Signup (Masuk) ke dashboar blogspot milik anda.
    • Pilih "LAYOUT"  Design  atau "tata letak".

    • Pilih Edit HTML.

    • Klik "Download Full Template" untuk menyimpan template lama anda dan agar anda mempunyai backup unuk jaga-jaga jika terjadi "gagal"
    • lalu klik tab "Telusuri" atau "browse" .
    • Nah anda akan mencari file hasil download anda di dalam file hardisk yang tadi anda simpan.
    • Jika sudah ketemu klik 'open'.
    • anda akan kembali ke halaman blogspot.
    • Lalu klik "Unggah" atau Upload.
    • Setelah proses upload selesai, akan ada konfirmasi bahwa template baru itu akan menghapus beberapa wdiget/gadget yang telah terpasang di blog anda sebelumnya.
    • Oleh sebab itu jika anda ingin gadget itu tampil kembali di template anda yang baru ,maka sebelum anda merubah template, sebaiknya kode-kode html dari widget dicopy dulu dan bisa anda simpan di notepad sementara.
    • Selesai.
    Update 19 Maret 2010 :
    Menjawab pertanyaan : Bagaimana merubah template dari Classic ke versi NEW ?
    Lihat caranya disini :"Cara merubah template dari Classic ke versi NEW"

    cara membuat blog di blogger.com
    Langkah-langkahnya adalah sebagai berikut:
    1. Pada address browser anda ketik http://blogger.com
    2. Setelah itu akan tampil seperti terlihat pada gambar dibawah ini:
    1. Klik CREATE YOUR BLOG NOW.
    2. Tunggu sampai muncul tampilan seperti berikut ini:
    1. Email address => di isi dengan alamat email kita (sebaiknya pake alamat email di gmail.com).
    2. Enter a Password => di isi password anda
    3. Retype Password => di isi dengan password yang sama dengan yang di atas.
    4. Display Name => di isi dengan nama kita (ini akan ditampilkan pada blog anda nantinya)
    5. Word Verification => isi persis sama dengan tulisan yang diatasnya, huruf besar ditulis dengan huruf besar gitu sebaliknya.
    6. Klik/centang pada “I Agree the Term Service”.
    7. Setelah itu tekan tombol Continue.
    8. Selanjutnya muncul tampilan seperti berikut ini:
    1. Blog Title => di isi dengan judul dari blog kita, posisinya ada pada header (bagian atas blog/pada bagian atas browser anda)
    2. Blog Address (URL) => untuk ini bisa anda buat sendiri, misalnya seperti punya saya http://lbsfighter.blogspot.com. Utuk URL saya cukup dimasukkan lbsfighter pada input text, tentunya untuk URL anda lain lagi.
    3. Word Verification => anda isi persis sama dengan kata yang ditampilkan dibawahnya, karena klo salah tidak akan bisa melanjut kelangkah berikutnya.
    4. Jika semua sudah benar anda akan melihat seperti pada tampilan berikut ini:
    1. Sekarang kita memilih template yang disediakan oleh Google, sebaiknya sebelumnya ada baiknya kita mem-Preview dulu sebelum melanjutkan kelangkah berikutnya.
    2. Jika sudah cocok dengan templatenya tinggal di klik Continue.
    1. Langkah selanjutnya anda tekan tombol Star Posting, untuk melakukan posting pada blog anda.
    Ok, sekarang kita sudah berhasil membuat blog di Blogger.com, kalau ada masalah tinggal hubungi via email danisayutimandela@yahoo.co.id, atau kalau ada kesalahan penulisan atau langkah-langkah harap tinggalkan komentar anda dibawah ini.