Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Rabu, 02 Desember 2009

Cara Membuat Recent Post dengan Thumbnails

. Rabu, 02 Desember 2009
27 komentar

Recent Post dengan Thumbnails?? Masih gunain rencent post lama?? Sekarang sobat sekalian bisa menggantinya dengan versi thumbnails, mudah kok caranya. Ikuti tips Om Kempul ini :


  1. Tips ini tanpa merubah code templates (body) kita, jadi kita bisa langsung Add a Gadget lalu pilih HTML/Javascript, setelah itu Copas Script di bawah ini :
    <script language="JavaScript">
    imgr = new Array();
    imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
    imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
    imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
    imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
    imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";

    showRandomImg = true;
    boxwidth = 298;
    cellspacing = 8;
    borderColor = "#ffffff";
    bgTD = "#000000";

    thumbwidth = 40;
    thumbheight = 40;

    fntsize = 12;
    acolor = "#666";
    aBold = true;
    icon = " ";
    text = "comments";
    showPostDate = false;
    summaryPost = 40;
    summaryFontsize = 10;
    summaryColor = "#666";

    icon2 = " ";
    numposts = 5;
    home_page = "http://marchsya.blogspot.com/";
    </script>
    <script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>
  2. Jika ingin Merubah Codenya untuk menyesuaikan dengan temp, teman - teman bisa lihat fungsi code di bawah ini:

    boxwidth - Lebar widget
    cellspacing - Space antara cells (default adalah 1 sudah bagus)
    borderColor - Warna Border (Warna template widget bisa anda ganti.Defauld adalah putih)
    thumbwidth & thumbheight - Lebar dan panjang thumbnail (default adalah 40 sudah bagus)
    fntsize - Ukuran huruf judul postingan
    acolor - Warna huruf judul postingan
    aBold - Bila ingin ditebalkan adalah true, jika tidak false saja.
    numposts - Berapa banyak recent post yang akan ditampilkan
    home_page : http://putroweb.blogspot.com/ (Ganti dengan URL blog anda)
    Yakinkan seeting site feed anda sudah pada Allow Blog Feed dengan melihat pada Setting>Site Feed>Full>Allow Blog Feeds.

    Script dari : http://www.bloggertricks.com/2009/05/recent-posts-with-thumbnails-widget-for.html
    Selamat Mencoba . . .  =)



[ Baca Selengkapnya ]...

Sabtu, 12 September 2009

Cara Menyembunyikan Komentar di Blog

. Sabtu, 12 September 2009
24 komentar

Ini adalah jawaban dari pertanyaan yang di ajukan dari adminnya http://www.koleksimainan.info/, yaitu bagai mana Caranya Menyembunyikan Komentar di Blog kita yang sering dibanjiri komentar seperti punya Kang Rohman, Agus Ramadhani (OOM). Nah mari kita simak tutorialnya :
  1. Login ke Blogger

  2. Masuk Tata Letak --> Edit HTML

  3. Cari kode ]]></b:skin> dan tambahkan kode di bawah ini sebelum kode ]]></b:skin>
    .commenthidden {display:none}
    .commentshown {display:inline}
  4. Cari kode <dl id='comments-block'>, salin kode di bawah ini tepat sebelum kode
    <dl id='comments-block'>
    <a aiotitle='Hide Comments' href='javascript:togglecomments(&quot;hideshow&quot;)'> [+/-]Click to Show or Hide Old Comments </a><div class='commenthidden' id='hideshow'>
  5. Gerakkan mouse ke bawah dan cari kode berikut </b:loop>. Biasanya sebelum kode
    <b:if cond="data:post.commentPagingRequired">

  6. Salin kode di bawah ini sebelum kode  </b:loop>

    <a aiotitle='Hide Comments' href='javascript:togglecomments(&quot;hideshow&quot;)'>[+/-]Click to Show or Hide Old Comments</a>
  7. Terakhir, sobat cari kode </head> , dan taruh kode di bawah ini sebelum kode </head>

    <script type='text/Javascript'>function togglecomments (postid) {var whichpost = document.getElementById(postid);if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }} </script>
  8. Klik Simpan Templates.
    Tambahan :
    Sobat sekalian Bisa mengganti kata " [+/-]Click to Show or Hide Old Comments " dengan kata-kata sobat sendiri.
    Selamat mencoba . . . Good Luck . . . .   :D



[ Baca Selengkapnya ]...

Rabu, 09 September 2009

Cara Membuat Back to Top Melayang

. Rabu, 09 September 2009
10 komentar

Yah lama tak posting gara-gara pulsa IM2 habis, payah juga ah. Ini adalah postingan yang di request oleh Mas Qucluk, yaitu Cara Membuat Back to Top Melayang. Caranya mudah kok Mas Qucluk tinggal kita menambah di Widget blog kita tanpa harus mengutak-atik di dalam Edit HTML. Berikut adalah caranya :
  1. Login ke Blogger

  2. Masuk Tata Letak --> Tambah Widget --> HTML/Javascript

  3. Masukkan kode di bawah ini ke dalam HTML/Javascript

    <script type="text/JavaScript">
    var topMargin = 300
    var slideTime = 1200
    var ns6 = (!document.all && document.getElementById);
    var ie4 = (document.all);
    var ns4 = (document.layers);
    window.setInterval("main()", 10)

    function floatObject() {
    if (ns4 || ns6) {
    findHt = window.innerHeight;
    } else if(ie4) {
    findHt = document.body.clientHeight;
    }
    }

    function main() {
    if (ns4) {
    this.currentY = document.floatLayer.top;
    this.scrollTop = window.pageYOffset;
    mainTrigger();
    } else if(ns6) {
    this.currentY = parseInt(document.getElementById('floatLayer').style.top);
    this.scrollTop = scrollY;
    mainTrigger();
    } else if(ie4) {
    this.currentY = floatLayer.style.pixelTop;
    this.scrollTop = document.body.scrollTop;
    mainTrigger();
    }

    }
    function mainTrigger() {
    var newTargetY = this.scrollTop + this.topMargin
    if ( this.currentY != newTargetY ) {
    if ( newTargetY != this.targetY ) {
    this.targetY = newTargetY
    floatStart();
    }
    animator();
    }


    }
    function floatStart() {
    var now = new Date()
    this.A = this.targetY - this.currentY
    this.B = Math.PI / ( 2 * this.slideTime )
    this.C = now.getTime()
    if (Math.abs(this.A) > this.findHt) {
    this.D = this.A > 0 ? this.targetY - this.findHt : this.targetY + this.findHt
    this.A = this.A > 0 ? this.findHt : -this.findHt
    } else {
    this.D = this.currentY
    }
    }
    function animator() {
    var now = new Date()
    var newY = this.A * Math.sin( this.B * ( now.getTime() - this.C ) ) + this.D
    newY = Math.round(newY)
    if (( this.A > 0 && newY > this.currentY ) || ( this.A < 0 && newY < this.currentY )) {
    if ( ie4 )floatLayer.style.pixelTop = newY
    if ( ns4 )document.floatLayer.top = newY
    if ( ns6 )document.getElementById('floatLayer').style.top = newY + "px"
    }
    }
    //-->
    </script>
    <div id="floatLayer" style="position: absolute; height:20px; width:15; left:650px; top:400px; z-index: 100"><a href="#"><img vspace="0" border="0" hspace="0" alt="Back to Top" width="15" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUbWq6EjQHT2U5Wt154bGXBkmBGKYnAJCSAI9K72OjCwnaAFU19UAFqd41D-Fu8LjyPKSm4S-bytAs2y7nEe-ClyepZaycIVa3e-FNcr7rdCfWyid9cnIW9BqrElCMvB0I7-YEX829_ebU/s320/up_out.gif" height="25"/></a></div>


    <a name="top"></a>
  4.  Klik Simpan, dan lihat hasilnya. Selamat mencoba . . .  :D



[ Baca Selengkapnya ]...

Selasa, 08 September 2009

Photo Thumbnails ala Linkwithin

. Selasa, 08 September 2009
8 komentar

Ada layanan gratis lagi yang akan menguntungkan buat kita para Blogger mania, yaitu Linkwithin. Layanan ini terletak dibagian bawah postingan kita, yang bertujuan meng-capture link postingan lain di Blog kita. Link akan ber-rotasi selama kita me-refresh halaman Blog kita.

  1. Masuk ke Linkwithin

  2. Isi form yang telah di sediakan.

  3. Klik Get Widget setelah mengisi form-nya.

  4. Klik Instal Widget. Secara otomatis widget akan terpasang di Blog anda.

  5. Lihat hasilnya, Selamat mencoba . . . .


[ Baca Selengkapnya ]...

Rabu, 02 September 2009

Membuat Tulisan Bergaya Koran

. Rabu, 02 September 2009
4 komentar

Membuat tulisan bergaya koran sangatlah cocok untuk Blog yang bersifat berita, informasi. Untuk membuat postingan bergaya ala koran, sobat cuma butuh sedikit meng-edit script pada Edit HTML. Pengen tau lebih lanjut, tapi seperti biasanya, lihat dulu Demonya berikut :

- Untuk Template Klasik
  1. Login ke Blogger

  2. Masuk ke Tata Letak - -> Edit HTML - -> Jangan lupa di beckup dulu kode tempalte-nya

  3. Copy paste kode berikut di antara kode <style type='text/css'> dan kode </style> dan kalau sobat merasa bingung, maka tempatkan saja di atas kode </style>

    /* kode untuk hurup awal
    ----------------------------------------------- */
    .awal {
    float:left;
    color: #000000;
    background:#ffffff;
    line-height:80px;
    padding-top:1px;
    padding-right:5px;
    font-family:times;
    font-size:100px;
    }
  4.  Klik Simpan Template

- Untuk Template Baru
  1. Login ke Blogger

  2. Masuk ke Tata Letak - -> Edit HTML - -> Jangan lupa di beckup dulu kode tempalte-nya

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

    /* kode untuk hurup awal
    ----------------------------------------------- */
    .awal {
    float:left;
    color: #000000;
    background:#ffffff;
    line-height:80px;
    padding-top:1px;
    padding-right:5px;
    font-family:times;
    font-size:100px;
    }
  4.  Klik Simpan Template
Langkah selanjutnya :
Pada waktu sobat melakukan posting, sobat harus masuk pada posisi Edit HTML bukan pada Compose, pada awalan huruf postingan sobat cukup memasukkan kode berikut :


<span class="awal"> hurup awal </span>


Berikut contoh dari Demo postingan di atas :
<span class="awal">B</span>log, tiga tahun yang lalu mungkin kata tersebut masih asing, tapi kini merupakan kewajiban untuk memilikinya seperti masa email booming dulu. Blog adalah semacam buku harian yang di pajang di internet. Disamping sebagai catatan pribadi si empunya blog, juga sebagai tempat saling sharing pengalaman pribadi masing-masing. Dan yang menjadi asiknya, catatan pribadi kita bisa di-comment si pembaca.

Selamat mencoba . . . Good Luck . . .

[ Baca Selengkapnya ]...

Selasa, 01 September 2009

Cara Membuat Efek Foto Blur

. Selasa, 01 September 2009
3 komentar

Apakah di benak sobat sekalian terlintas pikiran, gimana caranya membuat Blog kita lebih menarik?? Membuat efek foto blur (kabur) adalah salah satu cara supaya Blog kita terlihat lebih menarik. Karena jika kita posting gambar atau foto yang biasa akan terlihan kesannya monoton. Maka dari itu kita membuat sedikit perubahan supaya kesannya lebih menarik yaitu dengan menambahi efek blur. Yupz langsung saja kita bahas Cara Membuat Efek Foto Blur, tapi jangan lupa lihat demo nya, klik priview :
Cara 1
  1. Login ke Blogger

  2. Masuk ke Tata Letak - -> Edit HTML - -> Download Template Lengkap (supaya terjadi kesalahan bisa dikembalikan)

  3. Cari kode ]]></b:skin>

  4. Copy paste code berikut diatas code ]]></b:skin>

    .linkopacity img {
    filter:alpha(opacity=30);
    -moz-opacity: 0.30;
    opacity: 0.30;
    border:0;
    }
    .linkopacity:hover img {
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    border:0;
    }
    .linkopacityxtra:hover img {
    filter:alpha(opacity=1.1);
    -moz-opacity: 1.1;
    opacity: 1.1;
    border:0;
    }
  5.  Klik Simpan Template

Cara 2

Setiap sobat memasang foto atau gambar, sisipkan code berikut :
<a href="url tujuan" class="linkopacity"><img src="url sumber gambar"></a>
Dibawah ini adalah contoh code demo gambar diatas :
<a href="http://blogg-tutorial.blogspot.com/" class="linkopacity"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUxlbDnEEL5E507Y9pcIXXlsKc77Gtal2JV5PNTAvKwaOAp01cjvGGtu4ixj0OkctB2hL1pVcNPqnCLRSGX2-3Xoppvt81ECBrxsgf0anP2muWDwWiyo-PVlDZHKzAXAuYwbZZkn53GDg/s400/wonogiri.gif"></a>
 Selamat Mencoba . . . Good Luck . . .



[ Baca Selengkapnya ]...

Minggu, 30 Agustus 2009

Cara Membuat Caption Foto Menarik

. Minggu, 30 Agustus 2009
7 komentar

Akan lebih menarik jika di Blog kesayangan kita terdapat foto yang di kasih sedikit sentuhan  yang berbeda.   Solusinya adalah dengan modifikasi Caption. Pengen Coba?? Tapi sebelum ke tutorialnya, akan saya tunjukkan contoh foto dengan caption menggunakan teknik modifikasi HTML, klik Preview :


Cara 1 :

  1. Login ke blogger

  2. Masuk 'Layout' ---> 'Edit HTML' ---> centang 'Expand widget template' (jangan lupa backup buat jaga-jaga)

  3. Cari kode </head>

  4. Letakkan script berikut ini di atas kode </head>

    <style type="text/css">
    .caption {
    border: 1px solid #DDDDDD;
    text-align: center;
    background-color: #EEEEEE;
    padding: 4px 0px 5px 0px;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }

    .caption img {
    margin: 0px 0px 5px 0px;
    padding: 0px;
    border: 0px;
    }

    .caption p.caption-text {
    margin: 0px;
    padding: 0px 0px 0px 0px;
    font-size: 11px;
    font-weight: normal;
    line-height: 12px;
    }
    </style>
  5.  Klik Simpan Template

Cara 2 : 


Untuk memunculkan foto dengan teks pada postingan, sisipkan kode dibawah ini pada postingan anda :
<div class="caption" style="width: 410px;"><img src="URL foto yang sudah diupload"/><p class="caption-text">Tulis teks disini</p></div>
 Contoh kode gambar saya:
<div class="caption" style="width: 410px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUxlbDnEEL5E507Y9pcIXXlsKc77Gtal2JV5PNTAvKwaOAp01cjvGGtu4ixj0OkctB2hL1pVcNPqnCLRSGX2-3Xoppvt81ECBrxsgf0anP2muWDwWiyo-PVlDZHKzAXAuYwbZZkn53GDg/s400/wonogiri.gif" /><div class="caption-text"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUxlbDnEEL5E507Y9pcIXXlsKc77Gtal2JV5PNTAvKwaOAp01cjvGGtu4ixj0OkctB2hL1pVcNPqnCLRSGX2-3Xoppvt81ECBrxsgf0anP2muWDwWiyo-PVlDZHKzAXAuYwbZZkn53GDg/s400/wonogiri.gif">Liburan bersama keluarga di Wonogiri</a></div></div>
Slamat mencoba . . . . Good Luck . . . .


[ Baca Selengkapnya ]...

Membuat Navigasi Halaman Bernomor/Paging

.
15 komentar

Kali ini Om Kempul akan membahas tentang bagaimana Cara Membuat Navigasi Halaman Bernomor/Paging, tapi sebelumnya saya akan jelaskan dulu paging itu apa? Paging adalah salah satu teknik menampilkan data perhalaman dengan n jumlah data. Keuntungannya, biar komputernya gak hang kalau nampilin 200 data atau lebih dalam satu waktu ! kan berbeda tuh kalau nampilin 10 atau 20 data per halaman ketimbang 200 atau lebih perhalaman. Masih belum da gambaran? Lihat demonya berikut, Pagingnya terletak di paling bawah. Klik Preview

  1. Login ke blog anda

  2. Klik 'Layout/Tata Letak'

  3. Klik 'Tambah Widget'

  4. Pilih 'HTML/Java Script'

  5. Masukkan kode HTML di bawah ini




    <style>
    .showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
    }
    .showpageArea a {border: 1px solid #505050;
    color: #000000;font-weight:normal;
    padding: 3px 6px !important;
    padding: 1px 4px ;margin:0px 4px;
    text-decoration: none;
    }
    .showpageArea a:hover {
    font-size:11px;
    border: 1px solid #333;
    color: #000000;
    background-color: #FFFFFF;
    }

    .showpageNum a {border: 1px solid #505050;
    color: #000000;font-weight:normal;
    padding: 3px 6px !important;
    padding: 1px 4px ;margin:0px 4px;
    text-decoration: none;

    }
    .showpageNum a:hover {
    font-size:11px;
    border: 1px solid #333;
    color: #000000;
    background-color: #FFFFFF;

    }
    .showpagePoint {font-size:11px;
    padding: 2px 4px 2px 4px;
    margin: 2px;
    font-weight: bold;
    border: 1px solid #333;
    color: #fff;
    background-color: #000000;


    }

    .showpage a:hover {font-size:11px;
    border: 1px solid #333;
    color: #000000;
    background-color: #FFFFFF;

    }
    .showpageNum a:link,.showpage a:link {
    font-size:11px;
    padding: 2px 4px 2px 4px;
    margin: 2px;
    text-decoration: none;
    border: 1px solid #0066cc;
    color: #0066cc;
    background-color: #FFFFFF;}

    .showpageNum a:hover {font-size:11px;
    border: 1px solid #333;
    color: #000000;
    background-color: #FFFFFF;
    }
    </style>



    <script type="text/javascript">

    function showpageCount(json) {
    var thisUrl = location.href;
    var htmlMap = new Array();
    var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
    var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
    var isPage = thisUrl.indexOf("/search?updated")!=-1;
    var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
    thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
    var thisNum = 1;
    var postNum=1;
    var itemCount = 0;
    var fFlag = 0;
    var eFlag = 0;
    var html= '';
    var upPageHtml ='';
    var downPageHtml ='';

    var pageCount=10;
    var displayPageNum=5;
    var firstPageWord = 'Home';
    var endPageWord = 'Last';
    var upPageWord ='Previous';
    var downPageWord ='Next';



    var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

    for(var i=0, post; post = json.feed.entry[i]; i++) {
    var timestamp = post.published.$t.substr(0,10);
    var title = post.title.$t;
    if(isLablePage){
    if(title!=''){
    if(post.category){
    for(var c=0, post_category; post_category = post.category[c]; c++) {
    if(encodeURIComponent(post_category.term)==thisLable){
    if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
    if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
    }

    postNum++;
    htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
    }
    }
    }
    }//end if(post.category){

    itemCount++;
    }

    }else{
    if(title!=''){
    if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
    if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
    }

    if(title!='') postNum++;
    htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
    }
    }
    itemCount++;
    }
    }

    for(var p =0;p< htmlMap.length;p++){
    if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
    if(fFlag ==0 && p == thisNum-2){
    if(thisNum==2){
    if(isLablePage){
    upPageHtml = labelHtml + upPageWord +'</a></span>';
    }else{
    upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
    }
    }else{
    upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
    }

    fFlag++;
    }

    if(p==(thisNum-1)){
    html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
    }else{
    if(p==0){
    if(isLablePage){
    html = labelHtml+'1</a></span>';
    }else{
    html += '<span class="showpageNum"><a href="/">1</a></span>';
    }
    }else{
    html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
    }
    }

    if(eFlag ==0 && p == thisNum){
    downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
    eFlag++;
    }
    }//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
    }//end for(var p =0;p< htmlMap.length;p++){

    if(thisNum>1){
    if(!isLablePage){
    html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
    }else{
    html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
    }
    }

    html = '<div class="showpageArea"><span style="font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;" class="showpage">Page '+thisNum+' for '+(postNum-1)+': </span>'+html;

    if(thisNum<(postNum-1)){
    html += downPageHtml;
    html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
    }

    if(postNum==1) postNum++;
    html += '</div>';

    if(isPage || isFirstPage || isLablePage){
    var pageArea = document.getElementsByName("pageArea");
    var blogPager = document.getElementById("blog-pager");

    if(postNum <= 2){
    html ='';
    }

    for(var p =0;p< pageArea.length;p++){
    pageArea[p].innerHTML = html;
    }

    if(pageArea&&pageArea.length>0){
    html ='';
    }

    if(blogPager){
    blogPager.innerHTML = html;
    }
    }

    }
    </script>

    <script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
  6.  Klik Simpan dan lihat hasilnya.

  7. Selamat mencoba, Good Luck . . . . . .


[ Baca Selengkapnya ]...

Rabu, 26 Agustus 2009

Cara Memasang Slider

. Rabu, 26 Agustus 2009
6 komentar

Banyak sekali manfaat dari memasang Slider, salah satunya adalah akan membuat blog kita semakin lebih atraktif dan bergaya sehingga banyak respone dari pengunjung untuk tertarik membacanya lebih lanjut. Ngomong-ngomong sobat sekalian udah tau belum sih tentang slider yang saya maksud??? Untuk lebih jelasnya tentang slider, kita lihat demonya bersama, klik dibawah ini.
 
Nah sekarang sudah jelaskan tentang slider yang saya maksud? yuk langsung ja kita bahas Cara Membuat Slider:
  1. Login ke Blogger

  2. Masuk Tata Letak --> Edit HTML

  3. Cari kode  ]]></b:skin> , dan letakkan kode dibawah ini di atas kode ]]></b:skin>


    #slider {
    background:url(http://img526.imageshack.us/img526/3091/slide3d.png);
    height: 254px;
    overflow: hidden;
    position: relative;
    margin: 5px 0;
    }

    #mover {
    width: auto;
    position:absolute;
    overflow:hidden;
    }

    .slide {
    padding: 20px 0px;
    width: 800px;
    float: left;
    position: relative;
    height:200px;
    }

    .slide h2 {
    font-family:georgia, Helvetica, Sans-Serif;
    font-size: 24px;
    color: #ac0000;
    padding:0px 0px 0px 30px;
    margin:0px 0px;
    width:500px;
    overflow:hidden;
    }

    .slide h2 a:link, .slide h2 a:visited {
    color:#fff;
    background-color: transparent;
    }

    .slide h2 a:hover {
    color: #ddd;
    background-color: transparent;
    }

    span.slmet {
    color: #ee0909;
    font-size: 10px;
    font-family:Tahoma, georgia, Helvetica, Sans-Serif;
    line-height: 20px;
    width: 500px;
    padding:0px 0px 0px 30px;
    margin:0px 0px;
    text-transform:uppercase;
    }
    .slide p {
    color: #999;
    font-size: 12px;
    font-family:georgia, Helvetica, Sans-Serif;
    line-height: 20px;
    width: 300px;
    padding:0px 0px 0px 30px;
    margin:0px 0px;
    }

    .slide img {
    position: absolute;
    top: 20px;
    left: 400px;
    background:#fff;
    padding:10px 10px;
    }

    #slider-stopper {
    position: absolute;
    font-family: Georgia, Helvetica, Sans-Serif;
    top: 113px;
    right: 30px;
    color: #AC0000;
    padding: 3px 8px;
    font-size: 14px;
    text-transform: uppercase;
    z-index: 1000;
    }
  4. Kemudian letakan kode javascript dibawah ini dibawah kode ]]></b:skin>


    <script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
    <script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/slider.js' type='text/javascript'/>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    sfHover = function() {
    var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    //--><!]]></script>
  5. Cari kode dibawah ini:


    <div id='header-wrapper'>
    ..........
    .........
    </b:section>
  6. Kalu sudah ketemu kode diatas, letakkan kode dibaawah ini di bawahnya


    <!-- Casing -->
    <div id='casing'>
    <!-- Slider -->
    <div id='slider'>
    <div id='mover'>

    <div class='slide'>
    <span class='slmet'> Posted by Om Kempul </span>
    <h2><a href='http://blogg-tutorial.blogspot.com/2009/08/cara-daftar-dan-membuat-feedburnercom.html'>Pengen Nyoba Feedburner?</a></h2>
    <p>Rasa-rasanya da yang kurang kalau di Blog kita belum
    ada feedburner. Tanya kenapa? Karena banyak sekali
    keuntungan dari feedburner. Pengen nyoba?</p>
    <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5UNe5LBVmzLYKnYG672qlNK2DxOm4vJQvBZGO-5hH5xOefl9eJVV7NADG6WjxsinJ5TZSBc1URBecbiBfiYRouE8wYRj8iCkKGQvtKLeyUZg53f92FkckvXRZ-LDu9ul6z6qCcTIQC5uh/s320/feedburner.png'/>
    </div>

    <div class='slide'>
    <span class='slmet'> Posted by Putry Rasya </span>
    <h2><a href='http://blogg-tutorial.blogspot.com/2009/08/cara-pasang-auto-read-more-terbaru.html'>New Read More
    </a></h2>
    <p>Masihkah Anda menggunakan read more versi jadul??? Sekarang ada
    Auto Read More yang lebih praktis dan mudah untuk digunakan.
    Penasaran???.</p>
    <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZwMk3WUq2tF9f5-ih0B0-HnHV6oq3tDieXHe0zuSv76bSLESUSrnEPwiCBYhQLtl2tcnOLfEqMd1mKw6VHj_nM-8cIZJ7XnbOVNj26FHOSu90rqpxXJ518qALTdWBEUzgjzrc-XM9eyIi/s320/read+more.png'/>
    </div>

    <div class='slide'>
    <span class='slmet'> Posted by Om Kempul </span>
    <h2><a href='http://blogg-tutorial.blogspot.com/2009/08/cara-membuat-banner-di-blog.html'>Banner = Simbol</a></h2>
    <p>Banner juga merupakan simbol bagi Blog kita. Apakah Anda sudah
    membuat Banner untuk Blog kesayangan Anda??? Segera buat, disini
    kami menyediakan panduan praktis membuat Banner..</p>
    <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJuEP7jWqfhEGoJNa2Exv5Yg8_8_jCc3UIex1wR85dk63HbUCTVynl3KIjYtb0yXz_99HC79UGQurbtyQsFrkXRl91KC3ynWO0pkocboQRDYs7ykyqNehEwuiEFkjFJXBzohIOKAoB0ASj/s320/bikin+banner.png'/>
    </div>

    </div>
    <!-- /Mover -->
    </div>
    <!-- /Slider -->
    </div>
    <div class='clear'/>
  7. Simpan, dan lihat hasilnya.

Peringatan :
  • Jika gambar latarnya tidak sesuai dengan template, bisa diubah ukurannya lalu di upload di tempat yang sama dan masukkan URL nya didalam scriptnya.Contoh yang berwarna merah.


    #slider {
    background:url(http://img526.imageshack.us/img526/3091/slide3d.png);
  • Untuk penempatan gambar jika tidak seperti yang kita inginkan, bisa kita edit dengan cara atur ukuran yang berwarna merah.


    .slide img {
    position: absolute;
    top: 20px;
    left: 400px;
    background:#fff;
    padding:10px 10px;
    }
  • Jika ingin melakukan pengeditan pada tulisan STOP, bisa di edit pada script berikut yang berwarna merah.


    #slider-stopper {
    position: absolute;
    font-family: Georgia, Helvetica, Sans-Serif;
    top: 113px;
    right: 30px;
    color: #AC0000;
  • Jika ingin melakukan pengeditan tulisan paragraf, (ingin memperpanjang ukuran tulisan atau memperpendek) edit script berikut yang berwarna merah.


    .slide p {
    color: #999;
    font-size: 12px;
    font-family:georgia, Helvetica, Sans-Serif;
    line-height: 20px;
    width: 300px;
    padding:0px 0px 0px 30px;
    margin:0px 0px;
    }
  • Pengeditan pada isi.Edit yang berwarna merah


    <div class='slide'>
    <span class='slmet'> Posted by Om Kempul </span>
    <h2><a href='http://blogg-tutorial.blogspot.com/2009/08/cara-membuat-banner-di-blog.html'>Banner = Simbol</a></h2>
    <p>Banner juga merupakan simbol bagi Blog kita. Apakah Anda sudah
    membuat Banner untuk Blog kesayangan Anda??? Segera buat, disini
    kami menyediakan panduan praktis membuat Banner..</p>
    <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJuEP7jWqfhEGoJNa2Exv5Yg8_8_jCc3UIex1wR85dk63HbUCTVynl3KIjYtb0yXz_99HC79UGQurbtyQsFrkXRl91KC3ynWO0pkocboQRDYs7ykyqNehEwuiEFkjFJXBzohIOKAoB0ASj/s320/bikin+banner.png'/>
    </div>
Selamat mencoba.... Good Luck . . .

[ Baca Selengkapnya ]...

Selasa, 25 Agustus 2009

Cara Membuat Efek Marquee (Tulisan Berjaalan)

. Selasa, 25 Agustus 2009
2 komentar

Sobat sekalin udah tau belum Cara Membuat Efek Marquee (Tulisan Berjaalan)?? Caranya mudah kok, bagi sobat sekalian yang belum tau, tenang aja om kempul akan membahasnya di postingan kali ini. Inti dari kode HTML Marquee adalah di awali dengan tag tag <marquee> dan di akhiri tag </marquee>. Lihat contoh berikut :



marquee berjalan dari arah bawah ke atas, silahkan tunjuk ke sini


marquee dengan variasi hurup


marquee berjalan dari arah kanan ke kiri

Nah sekarang kita pelajari kode HTML nya :
  1. Kita harus memahami dulu atribut-atribut yang nanti akan kita gunakan :

    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 gerakan dalam pixel, semakin besar angka semajin 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

  2. Marquee yang berjalan dari arah Kanan ke Kiri :






    <MARQUEE align="center" direction="right" height="200" scrollamount="2" width="30%">

    Marquee yang berjalan dari arah Kanan ke Kiri

    </MARQUEE>
  3. Marquee yang berjalan dengan arah Memantul :






    <MARQUEE align="center" direction="left" height="200" scrollamount="3" width="70%" behavior="alternate">

    Marquee yang berjalan dengan arah Memantul

    </MARQUEE>
  4. Marquee dengan Mengunakan Latar :






    <div align="left">&ltFONT FACE="georgia" color="White"><B><MARQUEE BGCOLOR="RED" width="70%" scrollamount="3" behavior="alternate">

    Marquee dengan Mengunakan Latar



    </MARQUEE></b></FONT></div>
  5. Marquee dari arah Bawah ke Atas, jika di sorot mouse akan berhenti gerakannya.






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

    Marquee dari arah Bawah ke Atas

    </marquee>
  6. Marquee juga bisa di isi dengan link






    <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">

    <a href="http://boso-inggris.blogspot.com/" target="new">Learn English</a><br/>

    <a href="http://updatechordgitar.blogspot.com/" target="new">Update Chord Gitar</a><br/>

    <a href="http://blog-qucluk.blogspot.com/" target="new">Bloggig </a><br/>

    </marquee>
  7. Peringatan :
    a. Direction bisa diganti sesuai dengan kebutuhan, seperti :left, right, up, down.
    b. Semua settingan seperi width, scrollamoun,height, bisa diganti sesuai kebutuhan.
    c. Jika mengiginkan didalam marquee terapat tulisan berbentuk link, sobat sekalian tinggan menulis isinya dengan ditambahi:
    <a href="alamat tujuan" target="new">Kata-kata</a>

  8. Selamat mencoba . . . Salam Blogger.,...


[ Baca Selengkapnya ]...

Senin, 24 Agustus 2009

Navbar Kelap-kelip

. Senin, 24 Agustus 2009
14 komentar

Coba sobat sekalian arahkan mouse ke atas pada bagian navbar saya, jika disorot mouse navbar akan muncul jika tidak disorot mouse maka navbar akan menghilang. Nah, Navbar Kelap-kelip ini akan saya kupas pada artikel saya kali ini.
  1. Login ke Blogger
  2. Klik Tata Letak
  3. Klik Edit HTML
  4. Cari kode body {
  5. Copy kode di bawah ini dan paste di atas kode  body {

    #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
    #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
  6. Klik Simpan Template
Nah sekarang sobat sekalian bisa melihat hasilnya... Selamat mencoba yah...

[ Baca Selengkapnya ]...

Cara Menampilkan Navbar di Blog

.
8 komentar

Perlu sobat sekalian ketahui bahwa sebenarnya menghilangkan navbar di Blogger itu ternyata melanggar TOS blogger. Dan resikonya, Blog kesayangan kita ditutup oleh pihak Blogspot. Dalam tanda kutip Kalau kita sudah memiliki domain sendiri yang berbayar barulah kita bisa hilangkan itu Navbarnya. Kebanyakan saat kita mengganti template dari jasa penyedia template gratis external Navbar telah di hilangkan. Nah, bagi sobat sekalian yang belum tahu Cara Menampilkan Navbar di Blog, sekarang ikuti tips saya berikut :
  1. Login di Blogger

  2. Klik Tata Letak

  3. Klik Edit Enteri

  4. Cari kode :


    #navbar-iframe {
    height: 0px;
    visibility: hidden;
    display: none;
    }
  5. Kalau sudah ketemu, Hapus kode tersebut.

  6. Klik Simpan Template
Dan lihat hasilnya . . . Selamat mencoba . . . .


[ Baca Selengkapnya ]...

Minggu, 23 Agustus 2009

Cara membuat Favicon

. Minggu, 23 Agustus 2009
5 komentar

Favicon adalah gambar kecil di samping kiri address bar. Favicon juga salah satu cara mempercantik blog kita, dan juga bisa jadi logo blog kita. Apakah sobat sekalian sekarang tertarik untuk membuatnya?? Tenang saja bagi yang belum tau Cara membuat Favicon, kali ini ikuti tips dari Om Kempul :
 
  1.  Sobat tentuin gambar yang akan di jadikan favicon.

  2. Ubah gambar yang sudah sobat tentuin menjadi icon (.ico). Gunakan Favicon Generator untuk mengubah extensinya menjadi .ico

  3. Tekan tombol Browse, cari lokasi gambar yang akan di pilih.

  4.  Tekan tombol Generate Favicon!

  5.  Klik Click Here to Download Your Favicon!

  6.  Save gambar yang sudah di Generate ke komputer sobat.

  7.  Upload gambar tadi di hostingan, bisa di http://photobucket.com/ atau yang lainya.

  8.  Copy URL gambar sobat. ini contoh URL gambar saya


    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibb_p28z9ZXH2ql73zXx3mKwnf6yxcqbKMtoVTbct_glIN1KAja-0kKv0paUw0b7jTIkFlxAGJ6T1lDpCebYZJlTzdI-0CyqoSMPL1rwg9PqAuuQPEi9whMVwhG6xZVizzT3n_S4Les0AS/s320/favicon(3).ico
  9.  Sobat ubah alamat URL gambarnya menjadi Seperti ini:


    <link rel="shortcut icon" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibb_p28z9ZXH2ql73zXx3mKwnf6yxcqbKMtoVTbct_glIN1KAja-0kKv0paUw0b7jTIkFlxAGJ6T1lDpCebYZJlTzdI-0CyqoSMPL1rwg9PqAuuQPEi9whMVwhG6xZVizzT3n_S4Les0AS/s320/favicon(3).ico"/>

    atau bisa juga di ubah seperti berikut:


    <link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibb_p28z9ZXH2ql73zXx3mKwnf6yxcqbKMtoVTbct_glIN1KAja-0kKv0paUw0b7jTIkFlxAGJ6T1lDpCebYZJlTzdI-0CyqoSMPL1rwg9PqAuuQPEi9whMVwhG6xZVizzT3n_S4Les0AS/s320/favicon(3).ico' rel='shortcut icon' type='image/x-icon'/>
  10. Login ke blogger

  11.  Klik Tata Letak

  12.  Klik Edit HTML

  13. Klik Download Template Lengkap, biar nanti jika ada kesalahan bisa dikembalikan seperti semula

  14. Cari kode <b:skin><![CDATA[/*

  15.  Paste kode URL gambar sobat yang sudah di edit tadi sebelum kode <b:skin><![CDATA[/*

  16. Atau dengan cara lain, cari kode </head>, Paste kode URL gambar sobat yang sudah di edit tadi persis di atas kode </head>

  17. Klik Simpan Template

  18. Dan rasakan hasilnya . . . Good Luck . . .



[ Baca Selengkapnya ]...

Cara Membuat Tab View

.
5 komentar

Apakah sobat sekalian ingin membuat tab view?? Sobat sekalian belum tau cara membuatnya?? Tepat sekali bagi sobat sekalian yang belum tau Cara Membuat Tab View membuka blog saya, karena kali ini saya akan membahasnya, yuk langsung ja :
  1.  Login ke blogger

  2. Klik Tata Letak

  3. Klik Edit HTML

  4. Kemudian cari kode ini ]]></b:skin>

  5. Kemudian masukkan kode di bawah ini sebelum kode ]]></b:skin>




    div.TabView div.Tabs
    {
    height: 24px;
    overflow: hidden;
    }
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
    height: 24px; /* Tinggi Menu Utama Atas */
    padding-top: 3px;
    vertical-align: middle;
    border: 1px solid #000; /* Warna border Menu Atas */
    border-bottom-width: 0;
    text-decoration: none;
    font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
    font-weight: 900;
    color: #000; /* Warna Font Menu Utama Atas */
    }
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    background-color: #FF9900; /* Warna background Menu Utama Atas */
    }
    div.TabView div.Pages
    {
    clear: both;
    border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
    overflow: hidden;
    background-color: #FF9900; /* 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;
    }
  6. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. Untuk mengetahui kode-kode warna silahkan lihat DISINI

  7. Cari kode <./head> , dan pasang kode di bawah ini sebelum </head>




    <script src="http://h1.ripway.com/khantry/javascript/tabview.js" type="text/javascript"></script>
  8. Klik Simpan Template

  9. Masuk ke Elemen Halaman

  10. Klik Tambah Gadget

  11. Klik HTML/Javascript, dan masukkan kode berikut kedalamnya.



    <form action="tabview.html" method="get">
    <div class="TabView" id="TabView">
    <div class="Tabs" style="width: 350px;">
    <a>Tab 1</a>
    <a>Tab 2</a>
    <a>Tab 3</a>
    </div>
    <div class="Pages" style="width: 350px; height: 250px;">

    <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>
  12. Perhatian :
    -  Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
    -  Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
    -  Kode yang berwarna merah adalah isi dari tabview tersebut. Sobat bisa mengisinya dengan link, gambar, banner, script dll.

  13. Selamat mencoba yaahhh.....



[ Baca Selengkapnya ]...

Sabtu, 22 Agustus 2009

Mempercepat Loading Page Blog

. Sabtu, 22 Agustus 2009
10 komentar

Apakah blog sobat sekalian Loading Page nya lola alias loading lambat?? Apakah sobat sekalian inginkan Mempercepat Loading Page Blog setelah merasakan lola yang lama banget??
Jika iya ikuti tips dari saya :
  1. Silahkan buka alamat CSS Drive

  2. Pada Compression mode, saya sarankan untuk pilih Light bagi yang baru pertama mulai utak-atik CSS, jangan langsung mencoba mode Super Compact.

  3. Pada Comments handling, saya sarankan untuk memilih don't strip any comments terlebih dahulu bagi yang baru coba pertama kali.

  4. Login ke blogger

  5. Klik Tata Letak

  6. Klik Edit HTML, beri tanda centang pada Expand Template Widget

  7. Backup template, dengan cara klik Download Templates Lengkap. Supaya jika ada kekeliruan bisa dikembalikan seperti semula.

  8. Selanjutnya adalah cari kode diantara :





    <b:skin><![CDATA[

    dan

    ]]></b:skin>
  9. Copy semua script diantara kode diatas, kemudian paste di Insert CSS code

  10. Kalau sudah klik Compress it!

  11. Seteah di compress, klik tombol Highlight Code, lalu copy codenya kemudian paste kan code yang baru di compress tadi ke kode yang lama yang terletak diantara kode <b:skin><![CDATA[  dan ]]></b:skin>, jangan salah "code yang lama dihapus terlebih dahulu baru di paste code yang baru di compress"

  12. Klik Simpan Template, dan rasakan kecepatan Loading Page yang berbeda dari sebelum di edit.

  13. Selamat mencoba . . . .



[ Baca Selengkapnya ]...

Cara Mudah Mengetahui Kode Warna

.
8 komentar

Sekarang sobat-sobat sekalian tidak perlu membingungkan sagi soal kode-kode warna, karena kita sekarang sudah disediakan banyak sekali layanan-layanan yang akan mempermudah kita dalam aktivitas Blogging. Ini tentunya adalah kabar gembira buat sobat-sobat sekalian yang gemar mengutak-atik kode HTML template.




Kode warna yang terpilih :
Get it


Yuk langsung aja kita bahas Cara Mudah Mengetahui Kode Warna :
  1. Login ke Blogger

  2. Klik Tata Letak

  3. Klik Elemen Halaman

  4. Klik Tambah Widget

  5. Pilih HTML/Java Sript

  6. Lalu masukkan kode di bawah ini :

            <script language='javascript'>
        function Barva(koda)
        {
        document.getElementById("vzorec").bgColor=koda;
        document.hcc.barva.value=koda.toUpperCase();
        document.hcc.barva.select();
        }
        function BarvaDruga(koda)
        {
        document.getElementById("vzorec2").bgColor=koda;
        document.hcc.Barva2.value=koda.toUpperCase();
        document.hcc.Barva2.select();
        }
        </script>

        <script type='text/javascript'>

        var hue;
        var picker;
        //var gLogger;
        var dd1, dd2;
        var r, g, b;

        function init() {
        if (typeof(ygLogger) != "undefined")
        ygLogger.init(document.getElementById("logDiv"));
        pickerInit();
        //ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"
        //ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"
        }

        // Picker ---------------------------------------------------------

        function pickerInit() {
        hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
        hue.onChange = function(newVal) { hueUpdate(newVal); };

        picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180);
        picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };

        hueUpdate();

        dd1 = new YAHOO.util.DD("pickerPanel");
        dd1.setHandleElId("pickerHandle");
        dd1.endDrag = function(e) {
        // picker.thumb.resetConstraints();
        // hue.thumb.resetConstraints();
        };
        }

        executeonload(init);

        function pickerUpdate(newX, newY) {
        pickerSwatchUpdate();
        }


        function hueUpdate(newVal) {

        var h = (180 - hue.getValue()) / 180;
        if (h == 1) { h = 0; }

        var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);

        document.getElementById("pickerDiv").style.backgroundColor =
        "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";

        pickerSwatchUpdate();
        }

        function pickerSwatchUpdate() {
        var h = (180 - hue.getValue());
        if (h == 180) { h = 0; }
        document.getElementById("pickerhval").value = (h*2);

        h = h / 180;

        var s = picker.getXValue() / 180;
        document.getElementById("pickersval").value = Math.round(s * 100);

        var v = (180 - picker.getYValue()) / 180;
        document.getElementById("pickervval").value = Math.round(v * 100);

        var a = YAHOO.util.Color.hsv2rgb( h, s, v );

        document.getElementById("pickerSwatch").style.backgroundColor =
        "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";

        document.getElementById("pickerrval").value = a[0];
        document.getElementById("pickergval").value = a[1];
        document.getElementById("pickerbval").value = a[2];
        var hexvalue = document.getElementById("pickerhexval").value ='#'+
        YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
        ddcolorposter.initialize(a[0], a[1], a[2], hexvalue)
        if (hexvalue!="#FFFFFF") document.getElementById("pickerhexval").select();
        }

        </script><!--[if gte IE 5.5000]>
        <script type="text/javascript">

        function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
        {
        for(var i=0; i<document.images.length; i++)
        {
        var img = document.images[i]
        var imgName = img.src.toUpperCase()
        if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
        {
        var imgID = (img.id) ? "id='" + img.id + "' " : ""
        var imgClass = (img.className) ? "class='" + img.className + "' " : ""
        var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
        var imgStyle = "display:inline-block;" + img.style.cssText
        if (img.align == "left") imgStyle = "float:left;" + imgStyle
        if (img.align == "right") imgStyle = "float:right;" + imgStyle
        if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
        var strNewHTML = "<span " + imgID + imgClass + imgTitle
        + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
        + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
        + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
        img.outerHTML = strNewHTML
        i = i-1
        }
        }
        }

        YAHOO.util.Event.addListener(window, "load", correctPNG);

        </script>
        <![endif]-->
  7. Klik Simpan

  8. Klik Tab Posting, untuk menampilkan warna-wana kedalam postingan kita, kayak punya saya di atas.

  9. Masukkan kode HTML berikut kedalam postingan :

    <center><form name="hcc" id="hcc">
    <table style="border-collapse: collapse;" align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0"><tbody><tr><td><table align="center" border="0" cellpadding="0" cellspacing="1" width="375"><tbody><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190707">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#b40404">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#df0101">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#f78181">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef">
    </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#61380b">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#df7401">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#faac58">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef">
    </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#868a08">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef">
    </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#1b2a0a">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#243b0b">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#38610b">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#4b8a08">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#5fb404">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#74df00">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#80ff00">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#9afe2e">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#acfa58">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#bef781">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#d0f5a9">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#e3f6ce">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#ecf8e0">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#f5fbef">
    </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071907">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a0a">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b0b">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#0b610b">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#088a08">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#04b404">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#01df01">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#00ff00">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#2efe2e">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#58fa58">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#81f781">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5a9">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#cef6ce">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8e0">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#effbef">
    </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071910">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a1b">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b24">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#0b6138">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#088a4b">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#04b45f">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#01df74">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#00ff80">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#2efe9a">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#58faac">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#81f7be">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5d0">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#cef6e3">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8ec">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#effbf5">
    </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071918">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a29">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b39">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#0b615e">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#088a85">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#04b4ae">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#01dfd7">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#00ffff">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#2efef7">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#58faf4">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#81f7f3">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5f2">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#cef6f5">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8f7">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#effbfb">
    </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071019">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#0a1b2a">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#0b243b">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#0b3861">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#084b8a">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#045fb4">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#0174df">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#0080ff">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#2e9afe">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#58acfa">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#81bef7">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#a9d0f5">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#cee3f6">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#e0ecf8">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#eff5fb">
    </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#070719">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#0a0a2a">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b3b">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b61">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#08088a">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#0404b4">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#0101df">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#0000ff">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#2e2efe">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#5858fa">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#8181f7">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#a9a9f5">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#cecef6">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#e0e0f8">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#efeffb">
    </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#100719">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#1b0a2a">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#240b3b">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#380b61">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#4b088a">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#5f04b4">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#7401df">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#8000ff">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#9a2efe">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#ac58fa">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#be81f7">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#d0a9f5">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#e3cef6">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#ece0f8">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#f5effb">
    </td></tr><tr height="24"> <td onclick="Barva(this.bgColor)" bgcolor="#190718">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a29">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b39">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#610b5e">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#8a0886">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#b404ae">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#df01d7">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#ff00ff">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#fe2ef7">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#fa58f4">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#f781f3">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9f2">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#f6cef5">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0f7">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#fbeffb">
    </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190710">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a1b">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b24">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#610b38">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#8a084b">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#b4045f">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#df0174">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#ff0080">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e9a">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#fa58ac">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#f781be">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9d0">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#f6cee3">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0ec">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#fbeff5">
    </td></tr><tr height="10"><td>
    </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#000000">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b0b">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#151515">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#1c1c1c">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#2e2e2e">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#424242">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#585858">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#6e6e6e">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#848484">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#a4a4a4">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#bdbdbd">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#d8d8d8">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#e6e6e6">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#f2f2f2">
    </td><td onclick="Barva(this.bgColor)" bgcolor="#ffffff">
    </td></tr></tbody></table></td></tr></tbody></table>
    <table align="center" border="0" cellpadding="0" cellspacing="2"><tbody><tr height="24"><td id="vzorec" width="24" height="24">
    </td><td valign="bottom"><p>Kode warna yang terpilih : <input name="barva" id="barva" style="font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;" maxlength="7" size="9" type="text"></p></td></tr></tbody></table>
    </form><p><a href="http://forantum.blogspot.com/" target="new">Get it</a></p></center>
  10. Setelah selesai, klik Terbitkan Entri dan lihat hasilnya

  11. Selamat mencoba ya . . . . .


[ Baca Selengkapnya ]...

 

Recent Comment

Sahabat Setia

Recent Post

Related Websites

This Blog is proudly powered by Blogger.com | Template by miscah.blogspot.com