Cara pasang menu Multi Tab View di side bar blog

Multi Tab View Untuk Pengguna Blogger

Multi Tab View adalah cara yang baik untuk memaksimumkan ruangan site bar korang.

Terdapat banyak tutorial mengenai Multi Tab View ni... Macam-macam versi ada... Samada menggunakan CSS mahupun jQuery. Kebanyakannya memerlukan korang memerah otak untuk menyusun dan mengubahnya supaya sesuai dengan code template blog. Bukan tu je.. kandungan setiap tab pun korang kena buat manual.... Mesti rasa malas je nak baca code-code tu kan.. huhuhu... serabut-serabut...

Dengan tutorial Multi Tab View ni... korang boleh abaikan semua masalah tu... Hanya dengan 3 langkah korang dah ada Multi Tab View yang canggih.. hehehe.. Ia mampu mengubah widget sedia ada blog Blogger korang ke dalam tab, secara automatik! weeee~~~~

Lihat dema di sini.

Ciri-ciri Multi Tab View:

1. Boleh letak widget tanpa had. ikut suka korang nak letak berapa banyak pun.. ^_^
2. Mudah memasang dan membuang widget. Tak payah pening-pening nak delete code-code...

Langkah-langkah pemasangan Multi Tab View Yang awesome ni seperti berikut:


1. Buka Layout → Klik Add a Gadget.
2. Pilih HTML/Javascript widget.
3. Jangan letak tajuk pada widget tersebut
4. Copy Code di bawah dan pastekan dalam widget tadi.

<style type="text/css">

.tabber {

 padding: 0px !important;

 border: 0 solid #bbb !important;

}

.tabber h2 {

 float: left;

 margin: 0 1px 0 0;

 font-size: 12px;

 padding: 3px 5px;

 border: 1px solid #bbb;

 margin-bottom: -1px; /*--Pull tab down 1px--*/

 overflow: hidden;

 position: relative;

 background: #755668;

 cursor:pointer;

}

html .tabber h2.active {

 background: #993366;

 border-bottom: 1px solid #fff;

 border-radius: 10px 10px 0 0;

/*--"Connect" active tab to its content--*/

}

.tabber .widget-content {

 border: 1px solid #bbb;

 padding: 10px;

 background: #fff;

 clear:both;

 margin:0;

}

.codewidget, #codeholder {

 display:none;

}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

 $('#codeholder').bloggerTabber ({

  tabCount : 3

 });

});

</script>

<!-- to make sure the widget works, do not alter the code below -->

<div id='codeholder'><p>Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">tabber widget</a></p></div>

• Code yang berwarna biru adalah untuk loading jQuery library. Buang code ini kalau korang dah dah ada guna dalam blog.
• Code yang berwarna fuchia adalah bilangan tab yang korang nak. Saya pakai 3 je...
• Code yang warna hijau, korang boleh ubah ikut theme warna blog masing-masing ye...

5. Susunan widget HTML/Javascript adalah seperti berikut:

6. Klik Save dan boleh lah lihat blog korang. 

PENTING

→ Pastikan setiap tab widget ada tajuk. Multi Tab View takkan berfungsi kalau bahagian-bahagian tab takde tajuk.

→ Bagi menampak kan Tab cantik, tajuk bagi setiap tab tue kena pendek-pendek je. ( Tengok dalam gamabr di atas ye... )

Read more → Cara pasang menu Multi Tab View di side bar blog

Tutorial Auto Read More Untuk Blogspot

Auto Read More Untuk Blogspot

Dah lama tak buat tutorial.. kali ni nak share tutorial plak.. kalau layout rosak taklah susah nak edit balik sebab boleh tengok tutorial post sendiri.. hehe...

Tutorial kali nie mengenai Auto Read More macam kat gambar dia atas. Kalau guna Auto Read More ini, nampaklah macam blog tu ala-ala pro kan.. heheh.. jom layan tutorial kat bawah..

CARA PASANG AUTO READ MORE UNTUK BLOGSPOT

Ikut step dibawah:


1. Login akaun blog korang.
2. Back up template korang dulu ye... Dashboard →Template →Back up/Restore (sebelah kanan atas)   →Download Full Template
3. Pergi ke Dashboard → Template → Edit HTML.
4. Pada ruangan code HTML, klik ctrl + F untuk menghidupkan fungsi find kemudian cari kod berikut </head>
5. Copy code dibawah dan letakkan code tersebut dia atas code </head>

<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(thumbnail_mode == "yes") {
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script End -->

6. Kemudian cari plak perkataan ni articleBody. Bawah dari perkataan tersebut ada code ini <data:post.body/>

Auto Read More

7. Copy code dibawah dan ganti kan pada code <data:post.body/> ini.

<!-- Auto read more Start -->
<!-- http://ieza-usagi.blogspot.com/ -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->

8. Klik Preview Template dan lihat hasilnya... Bila dah menjadi, klik Save

Template ^_^

Read more → Tutorial Auto Read More Untuk Blogspot

[TUTORIAL] Facebook comment untuk blogspot

Lama dah tak buat tutorial. disebabkan banyak kali gagal buat facebook comment, so saya nak share yang saya dah berjaya buat seperti yang diinginkan... ^_^

Jom follow step by step insyaallah tidak mengecewakan [macam ayat jual barang..hehehe..]

p/s: Jangan lupa save dulu coding template asal yer untuk keselamatan ^_^.

[TUTORIAL] Facebook comment untuk blogspot

STEP 1

Hide kan comment yang sedia ada.

Setting => Posts and Comment => comment Location: "hide" => Save

STEP 2

Create facebook app.

Klik link >>facebook developers<<  

  1. Tekan +Create New App disebelah kanan atas

  2. Nama aplikasi pilihan yang belum pernah digunakan.

  

 3. Taipkan text security.

 

 

 4. Copy App ID ke dalam notepad => masukkan App domain "blogspot.com" => masukkan url blog dalam website with facebook login =>save

STEP 3

Masukkan code aplikasi kedalam template HTML

1. Pergi ke Template => edit HTML => tandakan expand widget templates.

2. Tekan CTRL+F dan cari kod dibawah.

<head>

3. Pastekan link dibawah selepas perkataan <head> dan gantikan YOUR_FACEBOOK_APPLICATION_ID dengan App ID yang telah di copy pada STEP 2 seperti dalam gambar.

<meta content='YOUR_FACEBOOK_APPLICATION_ID'   property='fb:app_id'/>

4. Tekan CTRL+F dan cari salah satu kod dibawah.

<div class='post-footer-line post-footer-line-3'>

kalau tak jumpa boleh cari yang ni:

<p class='post-footer-line post-footer-line-3'>

kalau takde jugak boleh cari yang ni:

<data:post.body/>

5. Paste kan kod dibawah selepas salah satu kod yang ada kat atas.

<b:if cond='data:blog.pageType == "item"'>
<div id="fb-root"></div>
<script>(function(d){
 var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<fb:comments width='450' colorscheme='light' expr:title='data:post.title' expr:href='data:post.canonicalUrl' expr:xid='data:post.id'/>
</b:if>

5. Tekan CTRL+F cari <html
Tambahkan kod dibawah seperti dalam gambar.

xmlns:fb="https://www.facebook.com/2008/fbml"

STEP 4
Klik >>disini<< untuk Setting comment.
Setting => Moderation mode => tick kan pada "Let me approve each comment before it appears." seperti dalam gambar.

STEP 5
Untuk paparan facebook comment, tekan CTRL+F, cari kod dibawah.

<data:post.body/>

Letakkan kod dibawah selepas kod diatas dan klik save template.

<b:if cond='data:post.isFirstPost'>
<script>(function(d){
 var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if>
<a expr:href='data:post.url + "#fb-root"'><fb:comments-count expr:href='data:post.canonicalUrl'></fb:comments-count> comments</a>

Dah siap... Boleh lah test untuk tengok hasilnya.. ^_^

Just sharing what I've experienced... 

Read more → [TUTORIAL] Facebook comment untuk blogspot

'Hide' dan Show' Shoutbox/Shoutmix

Walaupun tutorial' Hide' dan 'Show' Shoutbox/Shoutmix ni banyak dah ada, tapi saya buat jugak atas permintaan sesuciceriterakasih...dan untuk simpanan saya.. jom layan..hehehe...

Read more → 'Hide' dan Show' Shoutbox/Shoutmix