13/06/2011

Buat Background Shoutmix

Assalamualaikum dan salam sejahtera semua.Mohon maaf kerana lama menyepikan diri.Hari ni aku mahu kongsi pasal nak buat backgound untuk shoutmix.Langkahnya senang je.
1.Anda mestilah mempunyai akaun shoutmix.Kalau xde boleh daftar sini.
2.Copy kod di bawah.
<center>
<div id="edited" style="width:250px; height:400px; background:url(http://www.soiphone.com/uploads/200902/f/1235098340.jpg) no-repeat left top; padding-top:-5px; padding-left:0px; position:relative" align="center">
<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe frameborder="0" title="PANDUANBERBLOG" height="400" src="http://www.shoutmix.com/?jinaljamal" id="r" style="filter:alpha(opacity=50);opacity:0.55;-moz-opacity:0.55; display:block; " scrolling="auto" width="250">
<a style="" href="http://www.shoutmix.com/?jinaljamal">View shoutbox</a>
</iframe>></div>
<!-- End ShoutMix --></center>
3.Paste kod diatas kat add a gadget =>HTML/Javascript..
4.Kod Hitam ialah saiz shoutmix korang.Jadi ubah ikut citarasa sendiri.
5.Kod Hijau tu ialah link gambar untuk dijadikan background.Korang boleh letak gambar sendiri ikut saiz shoutmix.
6.Kod Merah ialah untuk tajuk blog.
7.Kod Oren ialah link shoutmix korang.Jadi kena ubah.
8.Dah ubah semua.korang boleh save..

Korang boleh try link gambar kat bawah ni jgk.
-http://www.bestiphonewallpapers.com/bulkupload/081109/Cartoon/PinkHelloKitty.jpg
-http://www.dreamstime.com/blue-background-thumb2315107.jpg
-http://www.dreamstime.com/floral-background-thumb4863792.jpg

kredit to http://chekguisza.blogspot.com

12/04/2011

Buat Auto Read More pada setiap post

1.Log in blog => Dashboard => Layout => Edit HTML=> tick pada kotak Expand Widget Templates.
2.Cari kod </head>.Untuk mudahkan pencarian tekan CTRL+F.Letak kod tersebut kat ruang find yang akan muncul.
</head>
3. Copy kod dibawah.
<script type='text/javascript'>

var thumbnail_mode = "float" ;

summary_noimg = 350;

summary_img = 450;

img_thumb_height = 140;

img_thumb_width = 140;

</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(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>
4.Paste kod diatas atau sebelum kod </head>.
5.Kemudian cari kod <data:post.body/>.Cari kat ruang find k.
6.Dah jumpa?ok.Copy kod dibawah pulak.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src='http://1.bp.blogspot.com/_LZtXSNcp76A/SxuOVTvCKgI/AAAAAAAAAr8/rFJNAYKSomY/s320/read+more_thumb%5B1%5D.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

7.Gantikan@paste kod <data:post.body/> dengan kod diatas.Ini bermakna korang kena buang kod <data:post.body/> dan ganti dengan kod yang korang copy diatas.
8.Sebelum SAVE korang preview terlebih dahulu k.
9.Tak ada mesej Error bolehlah korang save.

02/04/2011

Buat Burung Twitter terbang di blog

Kali ini pasal nak buat burung Twitter terbang dalam blog korang..Kalau korang ada akaun twitter boleh korang buat.Dengan cara ini bolehlah korang promote akaun twitter korang.Caranya senang je.
1.Log in ke akaun blogger=>Rekabentuk=>Tambah Alat(add widget)=>Html/Javascript.
2.Copy kod dibawah k.
<script type="text/javascript" src="http://techgyo.com/wp-content/FlyingTwitbird/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/USERNAME";var tweetThisText = "Twitter - techGyo http://www.techgyo.com/";tripleflapInit();
   </script>
<a id="theBird" href="http://twitter.com/USERNAME" target="_blank" style="display: block; position: absolute; width: 64px; height: 64px; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; z-index: 947; left: 0px; top: 587px; background-position: 0px 0px; background-repeat: no-repeat no-repeat; "></a>
<a id="theBirdLtweet" href="http://twitter.com/home?status=Twitter%20-%20techgyo%20http%3A//www.techgyo.com/" target="_blank" title="tweet this" style="position: absolute; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; width: 58px; height: 30px; z-index: 951; left: 49px; top: 583px; display: none; opacity: 0; background-position: -64px 0px; background-repeat: no-repeat no-repeat; "></a>
<a id="theBirdLfollow" href="http://twitter.com/USERNAME" target="_blank" title="follow me" style="position: absolute; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; width: 58px; height: 20px; z-index: 952; left: 54px; top: 613px; display: none; opacity: 0; background-position: -64px -30px; background-repeat: no-repeat no-repeat; "></a>

3.Tukar USERNAME ke username akaun twitter anda k.
4.Paste kod diatas dalam HTML/Javascript.
5.Kemudian boleh SAVE..Tengoklah burung Twitter terbang diblog anda.

31/03/2011

Buat Tab Menu di sidebar Blog

Kali ini tutorial untuk buat tab menu di tepi sidebar.Dengan cara ini korang boleh jimat ruang kat sidebar blog korang.Kalau tak faham apa aku cakap korang boleh rujuk gambar kat atas..Ada menu Tajuk 1,Komen dan Kod Warna.Caranya senang je.
1.Seperti biasa buka akaun blogger=>Reka Bentuk=>Tambah Alat(add widget)=>HTML/Javascript.
2.Copy kod dibawah ni.
<center><style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* 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: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Tajuk 1</a>
<a>Tajuk 2</a>
<a>Tajuk 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
<center>
Kod tab  1
</center>
</div>
</div>
<div class="Page">
<div class="Pad">
<center>
Kod tab  2
</center>
</div>
</div>
<div class="Page">
<div class="Pad">
<center>
Kod tab  3
</center>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script></center>
3.Paste kat ruang HTML/Javascript.Kosongkan ruangan tajuk HTML/Javascript k.
4.Tajuk 1,Tajuk 2,Tajuk 3 tu korang letak tajuk yang korang mahu.
5.Kod tab tu bermaksud Kod yang korang mahu letak seperti kod Shoutmix@apa-apa kod,
6.Pastikan Tajuk 1 untuk Kod tab 1.
7.Dah letak tajuk,kod korang boleh save.Dan tengok penampilan sidebar blog.