Tutorial : Letak scrollbox pada bloglist

Tutorial : Letak scrollbox pada bloglist:


Salam semua, kali nak share satu lagi tutorial. Kalau sebelum ni saya ada buat satu tutorial buat scroll box untuk widget  so kali ni nak share macammana nak letak scrollbox pada bloglist.

Bloglist merupakan satu widget yang selalu dipasang di dalam blog tetapi bloglist yang terlalu panjang membuatkan visitor yg dtg ke blog kita boring dan nampak tak kemas. So, bagi mengemaskan kt bloglist tu kita letakkan scrollbox pada bloglist tu.



Sumber:

LEPAK the place u should be

Tutorial : Letak lagu dalam blog

Tutorial : Letak lagu dalam blog:

Korang pernah tak bila visit blog lain ada dengar lagu berkumandang?  Pada sesiapa yang belum tahu lagi, kali ni saya nak share dengan korang semua macammana nak letakkan lagu dalam blog.




Note : Tukarkan perkataan yang berwarna merah itu mengikut kesesuaian blog korang. Dicadangkan kekalkan width dan tukarkan height kepada 20.



Sumber:

LEPAK the place u should be

Tutorial : Letak lagu autoplay dalam blog

Tutorial : Letak lagu autoplay dalam blog:


Minggu lepas saya mendapat pertanyaan daripada student yang belajar blog dengan saya macammana nak letak lagu autoplay dalam blog. Sebelum ni entry saya ialah tutorial letak lagu dalam blog.


Sumber:

LEPAK the place u should be

Tutorial : Buat Sticky Post untuk blog

Tutorial : Buat Sticky Post untuk blog:



Tutorial kali ni saya nak share dengan korang macammana nak buat sticky post di blog korang.

Sticky post ni kita letak dalam blog kita supaya entry yang kita jadikan sticky post tu sentiasa berada di bahagian atas sekali di antara entry2 kita yang lain.

Contohnya, pada blog saya ni, saya nak promote Contest SEO: Aku Seorang Blogger vs Buat Duit Dengan Tip Blogging Terbaik anjuran 2dayblogger sehingga pada tarikh tutup contest tersebut. So saya nak entry tu sentiasa berada di atas walaupun saya ada entry baru bagi tujuan promosi contest tersebut. Lebih kurang macam tu lah maksud dia.


Langkah2 untuk buat sticky post ni ialah:

i. Tulis entry/post dan publish ataupun pilih Edit Post kalau korang nak pilih entry yang sedia ada.

ii. Klik Post Option > Pilih Setting date and Time (Tukarkan tarikh dan masa untuk entry itu dijadikan sebagai sticky post).




iii. Klik Publish Post.

iv. Lihat hasilnya.



Sumber:

LEPAK the place u should be

Tutorial : Buat tulisan conteng pada blog

Tutorial : Buat tulisan conteng pada blog:




Pernah tak korang tengok ada tulisan yang diconteng macam kat atas ni?...Rasanya pernah lah kot. Biasanya kita tengok tulisan yang diconteng ni bila kita nak tukar ayat atau promosi iklan yang sebelumnya.

Cara dia mudah ajer....

1. Buka Posting > New Post > Edit HTML

2. Copy dan paste kod berikut

  <strike>(Tulis perkataan yang korang nak contengkan)</strike>


3. Save dan preview.




Sumber:

LEPAK the place u should be

Tutorial : Letak Related Post blog

Tutorial : Letak Related Post blog:

Salam dan selamat berpuasa semua....hari ni saya nak share dengan korang macammana nak letak widget related post dalam blog. Contoh related post adalah seperti dalam gambar di bawah yang terdapat di blog LEPAK.





Untuk pengetahuan, related post ni tak sama dengan linkwithin yang biasa kita letak dalam blog sebab dalam widget related post ni, post2 yang terpilih ialah post-post yang sama labels. Linkwithin pula akan pilih random post yang ada relate dengan post. Related post ni akan cari semua perkataan yang mempunyai label yang sama. (Ayat sedikit terbelit....huhuhu).

4. Cari code berikut dengan CTRL + F
  <data:post.body/> atau  <div class='post-body>



5. Kemudian copy code ini, dan paste selepas kod yang korang cari macam di step 4. 
    
<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>


6. Boleh ubah max-result=5 ikut kesesuaian.

7. Save dan Preview.



Sumber:

LEPAK the place u should be

Tutorial : Buat widget Copy Artikel

Tutorial : Buat widget Copy Artikel: Tutorial kali ni nak share macammana nak buat widget copy artikel macam gambar di bawah ni. Mesti korang selalu tengok gambar kt bawah ni di sesetengah blog kan.

Tujuannya ialah untuk membolehkan artikel yang menarik perhatian dicopy oleh visitor yg datang ke blog korang.

Langkah2:

1. Pergi ke Dashboard > Design > Edit HTML > Expand widget templates

2. Cari code berikut dengan CTRL + F

   <data:post.body/>

3.  Copy code di bawah ni dan paste kan di bawah code yang korang cari di step ke 2 tadi


<form action='http://www.blogger.com/blog-this.g' method='post' target='_blank'>
<textarea cols='45' name='t' onclick='select()' readonly='readonly' rows='5'>
<data:post.body/> <br/> Sumber:
<a expr:href='data:post.url'>
<data:blog.title/>
</a>
</textarea> <br/>
<input expr:value='data:post.url' name='u' type='hidden'/>
<input expr:value='data:post.title' name='n' type='hidden'/>
<input type='submit' value='Blog This!'/>
</form>
</b:if>
</div> 


Sumber:

LEPAK the place u should be

Tutorial : Cara buat entry Autopublish

Tutorial : Cara buat entry Autopublish: Rasanya dah lama tak buat tutorial kan...huhuhu.....Buat sekian lamanya, hari ni saya nak buat satu tutorial macammana nak buat entry autopublish.

Entry autopublish ni sesuai kalau kita nak setkan bila kita nak entry kita publish. Contohnya nak buat entry yang banyak dalam satu hari atau nak buat entry sekaligus dalam seminggu ke.....kita siap2kan entry dan kemudian setkan tarikh dan masa. Sangat2 sesuai kalau korang ni bz sangat2 dan siapkan 2,3 entry sekali gus dan setkan masa.









Sumber:

LEPAK the place u should be

Tutorial : Cara buat kotak SELAMAT DATANG ke dalam blog

Tutorial : Cara buat kotak SELAMAT DATANG ke dalam blog: Korang pernah tak bila masuk blog orang lain tiba2 ada box yang mengalu-alukan kedatangan korang...contohnya "selamat datang ke blog saya" dan sebagainya lah.


Nak tahu macammana nak buat kotak tu?....Senang jer cara dia ..jom ikut tutorial kt bawah ni yek....

1.  Log in blog => Dashboard => Layout => Add A Gadget. Seterusnya klik pada HTML/Javascript.

2. Copy kod di bawah ni

<script type='text/javascript'>alert("Masukkan sebarang ucapan yang korang nak kt sini")</script>

3. Save dan preview





4. Mudah bukan?...Cubalah...




Sumber:

LEPAK the place u should be

Tutorial : Cara letak energy saving mode

Tutorial : Cara letak energy saving mode: Rasanya ramai yang tahu kot tentang energy saving mode ni. Tapi bagi yang tak tahu saya nak share dengan korang semua tutorial untuk letakkan energy saving mode ni.



1.  Log in blog => Dashboard => Layout => Add A Gadget. Seterusnya klik pada HTML/Javascript.

2. Copy kod di bawah ni dan paste kan






3. Save dan Preview

4. Biarkan blog korang untuk beberapa minit dan akan terpapar skrin seperti di bawah dan itu maknanya energy saving mode yang korang pasang tu dah menjadi.







Sumber:

LEPAK the place u should be

Tutorial: Buat Dropdown Menu

Tutorial: Buat Dropdown Menu:


Gambar yang ditunjukkan di atas ini ialah dropdown menu yang boleh kita buat untuk blog kita. Tujuan utama adalah bagi menampakkan blog kita lebih kemas terutamanya bagi korang yang ada byk sangat list yg korang nak letak dalam blog. So tak adalah berjela-jela list yang korang senaraikan dan visitor yang datang pun tak pening kepala. Cara dia senang je. Jom kita terjah cara-cara dia k.



1. Pergi ke dashboard > layout > page element > add a gadget > HTML/javascript

2. Masukkan code berikut

*Link 1: Masukkan link untuk dibuka

*Text 1: Masukkan perkataan/ayat untuk link korang tadi



3. Save dan Preview




Sumber:

LEPAK the place u should be

Tutorial : Disable Right Click

Tutorial : Disable Right Click:


Sebelum ni saya ada tulis satu post tentang elak content dicopy dengan mematikan terus function CTRL+C. Tutorial kali ni pula ialah bagi disable right click. Sama jugak konsep dengan tutorial sebelum ini iaitu menghalang orang lain untuk copy content blog kita.



Okaylah intai2 sikit cara dia.





3. Save



Note: Kalau korang guna kod ni, pengunjung still boleh copy content korang dengan guna function CTRL+C. So korang boleh pilih nak guna tutorial yang mana satu. Kalau orang nak curi content ni memacam dia buat kan. Huhuhu......



Sumber:

LEPAK the place u should be

Tutorial : Cara buat Featured Content Slider guna Jquery (Slideshow-type 2)

Tutorial : Cara buat Featured Content Slider guna Jquery (Slideshow-type 2): Sebelum ni saya ada tulis post tentang macammana nak buat Jquery Features Image Slideshow, so kali ni saya nak tunjuk pulak tutorial berkaitan Featured Content Slider guna Jquery macam gambar kt bawah ni. Kalau dah boring dengan slideshow sedia ada tu, bolehlah bertukar angin plak yer. Bezanya dgn tutorial sblm ni ialah, tutorial ni boleh link terus kepada artikal atau post yang pernah korang buat sebelum ni.





Okaylah, jom kita terjah langkah2nya:



1. Pergi ke Layout>Design>Edit HTML

2. Cari kod berikut :  ]]></b:skin>

3. Paste code di bawah ini sebelum kod yang korang cari di step 2 tadi.

#featured{
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
 #featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}

#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
overflow:hidden;
}
#featured .ui-tabs-hide{
display:none;
}

#featured li.ui-tabs-nav-item a{/*On Hover Style*/
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
background:url('selected-item.gif') top left no-repeat;
}
 #featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}

#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px; width: 400px;
background: url('transparent-bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}

 4. Cari kod berikut :   ]]></b:skin>

 5. Paste code di bawah ini selepas kod yang korang cari di step 4 tadi.

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

<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);
});
</script>


6. Pergi ke Dashboard >Layout >Add A Gadget >HTML/Javascript dan paste kan code berikut:

<div id='featured'>
<ul class='ui-tabs-nav'>
<li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'><img alt='pic1' src='http://i49.tinypic.com/e1aohv.jpg'/><span>Install Mac OS X on Intel/AMD PC using iATKOS v7</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt='blogger' src='http://i438.photobucket.com/albums/qq108/fooble11/image2-small.jpg'/><span>How to remove &quot;showing post with label&quot; in Blogger</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt='buzz' src='http://i438.photobucket.com/albums/qq108/fooble11/new1.jpg'/><span>How to add Google Buzz to Blogspot blog</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt='chat' src='http://i50.tinypic.com/34xfg4m.jpg'/><span>Chat live with your blog visitors using Yahoo Pingbox</span></a></li>
</ul>
<!-- First Content -->
<div class='ui-tabs-panel' id='fragment-1' style=''>
<img alt='mac' src='http://i47.tinypic.com/rsbi80.jpg'/>
<div class='info'>
<h3><a href='#'>Install Mac OS X on Intel/AMD PC using iATKOS v7</a></h3>
<p>Description goes here, this is just a test description....<a href='http://www.bloggermint.com/2010/02/install-mac-os-x-on-intelamd-pc-using.html'>read more</a></p>
</div>
</div>
<!-- Second Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
<img alt='' src='http://i50.tinypic.com/33kprh5.jpg'/>
<div class='info'>
<h3><a href='#'>How to remove &quot;showing post with label&quot; in Blogger</a></h3>
<p>Description goes here, this is just a test description....<a href='#'>read more</a></p>
</div>
</div>
<!-- Third Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
<img alt='' src='http://i47.tinypic.com/2191lqt.jpg'/>
<div class='info'>
<h3><a href='#'>How to add Google Buzz to Blogspot blog</a></h3>
<p>Description goes here, this is just a test description....<a href='#'>read more</a></p>
</div>
</div>
<!-- Fourth Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
<img alt='' src='http://i48.tinypic.com/10pwp3o.jpg'/>
<div class='info'>
<h3><a href='#'>Chat live with your blog visitors using yahoo</a></h3>
<p>Description goes here, this is just a test description....<a href='#'>read more</a></p>
</div>
</div> </div>



Sumber:

LEPAK the place u should be

Tutorial : Buat Jquery Features Image Slideshow

Tutorial : Buat Jquery Features Image Slideshow:

Contoh slideshow

Sebelum ini saya ada berkongsi tutorial berkaitan macammana nak edit HTML iaitu lebih kepada untuk edit slideshow yang dah sedia ada di dalam template yang disediakan seperti slideshow saya sebelum ini.



Tutorial kali ini pula bagi korang yang pilih template yang tidak datang sekali dengan template slideshow. Korang boleh juga buat slideshow korang sendiri. Slideshow ni menggunakan JQuery. Caranya mudah sahaja. Jom kita tengok cara-cara untuk buat slideshow ni.



1. Pergi ke Dashboard > Design > Page Elements > Add a Gadget

2 Salin code di bawah dan letakkannya di HTML/Javascript



3. Tukarkan link berikut mengikut kesesuaian gambar dan teks korang.


* Kalau nak dapatkan URL untuk image sila dapatkan tutorial dapatkan URL untuk image.


4. Save dan lihatlah hasilnya.


UPDATE : Berdasarkan kepada pertanyaan dari Zarul, untuk masuk terus ke link bila visitor klik pada gambar ialah dengan cara berikut:


<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMUFt1cEJAvZkpmXN-EEivprPoGQkfCUS_9FlZS4VHPSEkc9tV1pFjrWArcNdu6jLk3btigULX7uMMWNqhmhRIy5_kGJAMkZinbNbi1GFQEwRK7-i-onZSMjCujL2tftPn56WnRWAT7_o/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." />a>li>


Tukarkan # kepada URL yang korang nak link kan.

<li><a href="#"><img





Sumber:

LEPAK the place u should be