Halaman

Topik Terkini

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='http://2.bp.blogspot.com/_IKigl6y9hFA/TMdcT1jzo5I/AAAAAAAAAHA/hAKuT9rJpFU/noimage.jpg';}
    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







Ahad, 27 November 2011

TIPUUUUUUUUUUUUUUU


Tindakan Datuk Seri Anwar Ibrahim menuduh sistem kehakiman negara tidak bebas dalam siri ceramahnya di Indonesia baru-baru ini, disifatkan sebagai 'serangan awal' bagi menangkis apa jua keputusan mahkamah yang melibatkan perbicaraan kes liwatnya.

Ahli Parlimen Bayan Baru, Datuk Seri Zahrain Mohamed Hashim berkata, tujuan Anwar itu adalah supaya masyarakat di dalam dan luar negara melihat beliau kononnya berada di pihak yang benar.

Malah, katanya, taktik menyelamatkan diri itu turut digunakan oleh parti pembangkang untuk menghadapi pilihan raya.

"Anwar memang bermasalah di mahkamah, jadi dia serang awal-awal. Kalau keputusan tidak memihak kepadanya nanti, maka dia pun beritahu apa yang dikatakannya itu adalah benar.

"Dalam pilihan raya pula, pembangkang tuduh proses pilihan raya berat sebelah, jadi apabila kalah, mereka akan kata bukan tidak mendapat sokongan rakyat tetapi pilihan raya yang tidak telus," katanya ketika dihubungi di sini hari ini.

Beliau mengulas ucapan Anwar yang memburuk-burukkan Malaysia dengan menuduh sistem kehakiman negara tidak bebas kerana dikongkong pihak kerajaan.

Anwar turut mendakwa, hakim-hakim yang menjalankan tugas tidak mempunyai kewibawaan kerana mereka terikat dengan ketentuan yang telah dibuat oleh kerajaan apatah lagi sekiranya ia melibatkan orang berpangkat besar.

Menurut Zahrain, Anwar boleh dilabelkan sebagai penderhaka negara kerana tidak beretika dalam permainan berpolitik dengan membawa cerita-cerita pembohongan.

Bekas Setiausaha Sulit Anwar, Anuar Shaari pula berkata, Anwar memang sengaja memilih Indonesia kerana Ketua Pembangkang itu tahu sentimen kebencian di kalangan rakyat negara itu terhadap Malaysia memang sudah wujud.

"Dia pergi ke sana untuk menambah rasa kebencian itu demi kelangsungan politiknya yang telah luntur di peringkat antarabangsa," ujarnya.

Sementara itu, salah seorang pengasas Parti Keadilan Rakyat (PKR), Ng Lum Yong pula berkata, Anwar menunjukkan sikap 'cakap tak serupa bikin' kerana beliau sendiri telah memfailkan berpuluh-puluh kes menuntut ganti rugi di mahkamah yang dikatakan tidak bebas.

"Jika tidak puas hati, kenapa perlu failkan hingga berpuluh-puluh kes di mahkamah. Maksudnya dia masih percaya dengan sistem kehakiman

"Malah sebagai Ahli Parlimen, dia boleh gunakan Dewan Rakyat untuk membicarakan perkara ini, kenapa perlu pergi ke Indonesia?," ujarnya.

Ahli Parlimen Padang Serai, N. Gobalakrishnan pula berkata, Anwar perlu diberi amaran serta diambil tindakan tegas oleh mahkamah yang membicarakan kes beliau atas kritikannya itu.

Tindakan Datuk Seri Anwar Ibrahim memburukkan nama dan imej negara adalah perbuatan yang tidak bertanggungjawab dan memberi impak negatif kepada negara.

Dalam perkembangan sama, Naib Presiden Majlis Belia Malaysia, Datuk Irmohizam Ibrahim berkata, kenyataan memburukkan negara yang dilemparkan itu tidak selaras dengan falsafah dan tafsiran Perlembagaan Malaysia.

"Saya khuatir tindakan Anwar itu akan menjejaskan imej dan hubungan diplomatik negara yang telah dibina sejak merdeka,"

AYUH BERDEBAT DI WARUNG KOPI ADA BERANI HEHEHE ..
KLIK LINK DI BAWAH INI 
https://www.facebook.com/groups/Ceritawarungkopi/


Selamat datang ke komuniti Cerita Warung Kopi (CWK) - sebuah komuniti Malaysia Group Cerita Warung Kopi atau nama singkat nya CWK ditubuhkan untuk kita berbincang mengenai isu semasa dan cerita - cer...
Anda suka artikel ini ??
Sila LIKE dan anda bolih juga SEND di dalam GRUOP atau kepada RAKAN )