Halaman

Jumaat, 30 Disember 2011

Automatic Category with Thumbnail

Automatic Category with thumbnail actually is advanced trick from previous one about Displaying category based on the label name. This feature can be used to display the categories based the names of the categories with the thumbnail and summary.
The example of automatic category with thumbnail can be seen at the demo of Fresh Revolution Template:
Live Demo

The category or label you want to display will automatically be displayed without having to edit at anytime.
What to prepare? You have to prepare is the category name only you want to display. But need to know that the label name is case sensitive. It means that the label name should be exactly as that of in your blog, e.g. Health is different from health. Therefore, make sure the label name you will use is exactly as it is.
The easiest way to know the label name exactly is to display the label widget on your blog. Point the label name you want and see the status bar of your internet browser.

You will find that the label Featured, the exact label name is featured (all lower case). It happens because the blog display is affected by the CSS setting. In this case, we need the original label name.

Create automatic category with thumbnail.


The following is how to create automatic category with thumbnail.
Step I

  1. Login to blogger with your ID.
  2. Click Design.
    design blogger template
  3. Click Edit HTML.
    edit html
  4. Please backup your full template first by clicking Download Full Templatedownload full template
  5. Find the code ]]></b:skin>, copy and then paste the code below exactly above the code]]></b:skin>
    /*** Featured Categories ***/
         img.label_thumb{
            float:left;
     padding:5px;
     border:1px solid #8f8f8f;
     background:#D2D0D0;
     margin-right:10px;
     height:55px;
     width:55px;
     }
         img.label_thumb:hover{
     background:#f7f6f6;
     }
         .label_with_thumbs {
     float: left;
     width: 100%;
     min-height: 70px;
     margin: 0px 10px 2px 0px;
     adding: 0;
     }
         ul.label_with_thumbs li {
     padding:8px 0;
     min-height:65px;
     margin-bottom:10px;
     }
        .label_with_thumbs a {}
        .label_with_thumbs strong {}
  6. Find the code </head>, copy and then paste the code below exactly above the code </head>
    <script type='text/javascript'>
    //<![CDATA[
    function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
    if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
    {s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSS4N23kwInMnh4NPxK5goKjHw_GNsF3aI7SWERdtENO98akh38RfFiikdmC4HC17c6jcWwhq5ianvi9vRLeUggzvAz9fWg45xCu8Sod4TZCS3KE3n_C4VCjz76vGf0m-Ek0e5Qv1SZBdF/';}
    var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
    document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
    else
    if("summary"in entry){var postcontent=entry.summary.$t;}
    else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
    else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
    var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
    if(showcommentnum==true)
    {if(flag==1){towrite=towrite+' | ';}
    if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
    if(displaymore==true)
    {if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
    document.write(towrite);document.write('</li>');if(displayseparator==true)
    if(i!=(numposts-1))
    document.write('');}document.write('</ul>');}
    //]]>
    
    </script>
  7. Click SAVE TEMPLATE.
  8. Step 1 done.
Step 2

  1. Click Page Element, if you are not yet in the position.
    page elements
  2. Click Add a Gadget to add new gadget.
    add a gadget
  3. A new window will pop up. Click the sign plus (+) for HTML/JavaScript
    html javascript gadget
  4. Copy the following script and then paste in the field available. Give the title as you want, but previously, you have to replace the word in red with the category name you want.

    <script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>
    <script type="text/javascript" src="/feeds/posts/default/-/Gadget?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

    automatic category gadget
  5. Click SAVE
  6. Step 2 done.
If you want to add another gadget for the other category, repeat the above steps.
Is above script customizable? Yes, in the above script, you can customize some parts, such as the character, thumbnail, number of posts, post date, comment, and more link.
In the script, you will find the texts as below:
var numposts = 3;
var showpostthumbnails = true;
var displaymore = false;
var showcommentnum = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 80;
The red-printed code is editable. True means display, false means don’t display, 80 is number of character. Just try to edit them.
Happy trying!

<div class="more_topic"><a href="http://cpu.blogspot.com/search/label/Agama">More for this topic &raquo;</a></div>

Rabu, 21 Disember 2011

2

oding tutorial | Blog tutorial untuk blogspot | Panduan untuk Blogger

02/10/2011
Tutorial cara memaparkan widget pada laman utama sahaja

Mula2 pergi ke design>>> edit html...kemudian tick expand widget templates...kemudian cari title widget yang anda hendak paparkan pada laman utama sahaja... dalam tutorial ni aku namakan widget yang aku hendak paparkan pada laman utama sebagai  hide this...



dalam tutorial ni widget ni aku akan paparkan pada laman utama...


tekan Ctrl + F....kemudian taipkan nama widget..contoh seperti gambar diatas...


masukkan code ni  
<b:if cond='data:blog.homepageUrl == data:blog.url'>
   
 selepas selepas selepas code <b:includable id="main">  .. sila rujuk dan teliti gambar di atas...



kemudian masukkan code
 
</b:if>

  selepas selepas selepas code
 
<div class='widget-content'><data:content></div> 

.....sila rujuk dan teliti gambar diatas...

kemudian klik preview..jika tiada masalah..save template...kemudian pergi ke blog anda dan masuk mana2 entri... mesti widget tu hilang....
 cara ni terbaik untuk membuatkan entri anda mesra pembaca...
sekian

1

Tutorial cara memaparkan widget pada post entri sahaja
Mula2 pergi ke design>>> edit html...kemudian tick expand widget templates...kemudian cari title widget yang anda hendak paparkan pada laman utama sahaja... dalam tutorial ni aku namakan widget yang aku hendak paparkan pada post entri sebagai page only...



pada gambar diatas widget dalam kotak merah tu adalah iklan adverlets..iklan tu hanya akan muncul pada post entri sahaja...widget tu aku namakan page only...



tekan Ctrl + F dan taip page only  ...



masukkan code

<b:if cond='data:blog.pageType == &quot;item&quot;'>

selepas , selepas , selepas code <b:includable id='main'>  ...sila teliti dan rujuk gambar di atas....




kemudian masukkan code
 
</b:if>

      selepas , selepas , selepas code
  
 <div class='widget-content'>
    <data:content/>
  </div>


sila teliti dan rujuk gambar diatas...kemudian klik preview,,jika ok klik save...

sekian

Jumaat, 16 Disember 2011

Assalamualaikum warahmatullahi wabarakatuh.
Kali ni Mia nak buat tutorial scroll box untuk ruangan komen atas pertanyaan Encik Boni. Kalau komen banyak, takdelah berserabut sangat bila ada scroll box kan. Haa.. Apa tu scroll box ruangan komen ?
Macam ni haa..
Okay, jom belajar !

1. Pergi Dashboard > Design > Edit HTML

2. Tick Expand Widget

3. Tekan ctrl+F serentak cari kod ni.
<div class='comments' id='comments'>
4. Kalau dah jumpa, buang kod tersebut dan gantikan dengan kod kat bawah ni.
<div class='comments' id='comments' style='overflow:auto; width:ancho; height:500px;'>
Yang merah tu, boleh ubah mengikut ketinggian scroll box yang korang nak. 

5. Preview dulu, kalau takde masalah, bolehla klik SAVE!

Rabu, 14 Disember 2011

gdfgadfg

Cara Menambah 2 atau 3 kolom dibawah header


menambahkan 2 kolom baru dibawah header
menambahkan 3 kolom baru dibawah header
Caranya sangat mudah, ikuti langkah-langkah berikut:

Cara menembahkan dua dan tiga kolom elemen halaman dibawah header:
1. Pada dasbor klik Tata Letak=> Edit HTML=> Cari kode berikut ]]></b:skin> jika sudah dapat, letakkan kode berikut diatasnya:

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}
Kalau sobat dah bisa ngedit CSS atau sedikit bisa membaca maksud perintahnya silahkan edit exp: padding, margin atau bordernya!
2. Kemudian cari kode<div id='main-wrapper'>

[jika tidak bisa cari yang ini:
<div id=’outer-wrapper’>
<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1′>
<b:widget id=’Header1′ locked=’true’ title=’NAMA BLOG ANDA’ type=’Header’/>
</b:section>
</div>

setelah dapat letakkan kode beikut diatasnya (untuk dua kolom dibawah header):



<div id='box-main-container'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>


Jika ingin tiga kolom dibawah header maka kode berikut yang sobat letakkan diatas kode


<div id='box-main-container'></div>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/> 
 


3. Simpan template dan lihat hasilnya dibagian elemen halaman, jika berhasil sobat akan melihat seperti screenshot diatas.
Apabila hasil kolom yang baru berada di atas posting atau dengan kata lain tidak sesuai harapan coba cyber mania taruh code diatas tadi di bawah code 


<div id='content-wrapper'&gt
dan lihat lagi hasilnya..

testing