Dayang Deno: Tutorial
Showing posts with label Tutorial. Show all posts
Showing posts with label Tutorial. Show all posts

13.5.14

Tutorial : Buat Read More Pada Blog
May 13, 2014 9 Comments
Tutor ni adik nasuha yang request. Sori dik sebenarnya terlupa! Adik nasuha nak tahu cara buat read mora pada blog. Ok jom mula buat!^^


1- Login > Dashboard > Template > Edit HTML

2- Ctrl +F dan search kod ini :
 </head>

3- Dah jumpa? Ok good. Sekarang copy kod di bawah ni, than paste di bawah / selepas kod step ke dua tadi
<!--ReadMore -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#CD7388;  text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 3px solid #EAEAEA;float:left;height:145px;width:190px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 2px 2px 2px #111;}
.grow img{height:145px;width:190px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;;
summary_noimg = 300;
summary_img = 250;
img_thumb_height = 145;
img_thumb_width = 190;
</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 = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
//]]></script>
</b:if>
</b:if>
<!--Auto Read More Akhir-->

4- Sekarang cari pula kod ini :
<data:post.body/>

5- Korang enter 2 kali, kemudian gantikan kod di step ke 4 tadi dengan kod kat bawah ni :
<!-- Auto read more Mulai -->
<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>
      <div class='read-more'>
      <a expr:href='data:post.url'>Read More &#187;</a>
      </div>
</b:if>
</b:if>
<!-- Auto read more Akhir -->

6- Preview.. Kalau dah ok takde error, Boleh klik Save Template :)



p/s: harap dapat membantu^^



Reading Time:

24.4.14

Tutorial : Letak Button Send Facebook Pada Setiap Entri
April 24, 2014 2 Comments
Request daripada blogger Siti Zuraida.. Siti inginkan tutorial ni, nanti nak ping entri blog ke group facebook senang kan? Just klik send button ^_^

Ok jom buat^^

1- Login > Dashboard > Template > Edit HTML

2- Ctrl+F dan search kod ni :
<data:post.body/>

3- Enter 2 kali, then paste kod bawah ni selepas kod di step 2 tadi^^
<!--Facebook Send button Start --><b:if cond='data:blog.pageType != &quot;static_page&quot;'><div style='float:right;padding: 01px 05px 05px 0;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><fb:send colorscheme='light' expr:href='data:post.url' font=''/></div></b:if>

<!--Facebook Send button End -->

4- Preview, kalau dah jadi boleh klik Save template :)


5- Nanti korang boleh send entri ke group blogger kat facebook ~

Selamat mencuba :)


Reading Time:

23.4.14

Tutorial : Cara Letak Gambar Dalam Entri Di Blog
April 23, 2014 8 Comments
Tutorial ini sambungan daripada tutorial sebleum ini :) Ok, simple je tutor ni.. Hanya untuk letak gambar di dalam entri :) **Klik gambar untuk lebih jelas

1 - Login > Dashboard > New Post

2- Taip tajuk entri, kemudian klik  "Insert Image" untuk masukkan gambar di dalam entri...

3- Kemudian akan keluar satu pop-up window

4- Ok, sekarang boleh pilih gambar :)

5- Gambar di"upload"

6- Yeay! Dah ada gambar dalam entri... ^_^ Boleh continue taip entri ....


Boleh upload gambar banyak-banyak dalam entri.. hehe :) 


Reading Time:
Tutorial : Update Entri Dalam Blog
April 23, 2014 3 Comments
Inilah tutorial basic untuk seorang blogger... :) Sebenarnya tutorial ini requested by kakyana.. Sorry kak yana, deno terlewat.. Ok, jom kakyana upadate entri! ^^

**Klik gambar untuk lebih jelas

1- Pastikan anda ada blog! Then bukak www.blogger.com ......
2- Continue  step kat bawah.. Tutorial mengikut gambar  :)












Senang kan? Hari-hari boleh update entri :)


Reading Time:

9.9.13

Tutorial : Letak Facebook Like Button Dalam Setiap Entri
September 09, 2013 5 Comments
Tutor ini request by adik Nasuha comel :) Okey, jom kita mula!


1. Login > dashboard > template > edit HTML

2. Ctrl F dan search kod ni
  <div class='post-body entry-content

3. Dah jumpa? Good. Sekarang copy pula kod bawah ni dan paste di bawah kod step nombor 2 tadi
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

4. Preview, kalau tak ada error, boleh Save :)



p/s: harap ini  dapat membantu :)



Reading Time: