OUR ADVERTISEMENT

Showing posts with label Tutorial. Show all posts
Showing posts with label Tutorial. Show all posts

Wednesday, July 20, 2011

Tutorial: Cara membuat Auto Read More pada entri

Assalamualaikum dan salam sejahtera semua...


Baiklah kepada blogger yang dah pasang auto read more tu memang mereka dah tau keseronokan aplikasi ini. Auto read more merupakan aplikasi blog yang berfungsi secara automatik ke atas entri-entri yang diterbitkan menjadi sekerat (potongan) entri...kelebihan lainya pula gambar pada entri-entri akan menjadi kecil jika dilihat pada paparan halaman utama blog.


Contoh aplikasi auto read more yang aku print screen dari blog aku ni...




Entri nampak kemas dan teratur....jom ikut step by step...


Langkah 1:


Pergi ke design --> Edit HTML --> Expand Widget Templates


Langkah 2:


Tekan Ctrl+F, papan search akan keluar serta merta. Cari </head> pada ruangan papan search tadi.


Langkah 3:


Copy kod HTML di bawah ni dan paste di atas </head> yang korang cari tadi tu.


<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 300;
img_thumb_height = 150;
img_thumb_width = 150;
</script>
<script src='http://keerthiset2.110mb.com/excerpt.js' type='text/javascript'/>


Langkah 4:


Cari <data:post.body/> pada ruangan papan search then kalau dah jumpa korang gantikan <data:post.body/> tadi tu kepada <div class='post-body entry-content'> (maksudnya korang replace)


Langkah 5:


Copy kod HTML di bawah ni dan paste di bawah kod yang korang replace tadi tu.


<b:if cond='data:blog.pageType != &quot;item&quot;'><br/> <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><br/> <span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src='http://www.consumerguardian.org/images/CG_Button_ReadMore.gif'/></a></span><br/> </b:if><br/> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


Langkah 6:


Preview dulu. Kalau dah ok tekan save.


Good Luck!



Panduan:


  • Warna jingga: Mengubah saiz tinggi gambar.
  • Warna biru: Mengubah saiz lebar gambar.
  • Warna merah: 'Read More' button..yang ni kalau korang nak ubah pun boleh tapi mestilah bersesuaian dengan saiznya.


*Jika ada sebarang pertanyaan, korang boleh ajukan pertanyaan di ruangan komen entri ni.


Friday, May 27, 2011

Tutorial: Cara mudah view gambar di facebook

Assalamulaikum & salam sejahtera buat pembaca FdS...


Jum kita buat tutorial ni sama-sama...cara mudah lagi stylo view gambar-gambar dalam fb dengan hanya menggerakkan cursor pada gambar..tak perlu klik kat gambar tu..macam pic aku di bawah ni...ingat! google chrome ja dapat support benda ni..



login first fb kamu tu...
then kelik kat sini dan install seperti biasa....sudah???..
refresh fb kamu tu...korang akan nampak di sebelah ruang chat tu terpampang board FB Photo Zoom..hanya klik pada board photo zoom tu untuk setting 'on' atau off'. Selesai...





~good luck~

Petua: kalau masih tak berfungsi korang off on off on ja pada board photo zoom tu a.k.a refresh la tu..insyaAllah berjaya...

Sunday, March 13, 2011

Tutorial: Cara buat reply to comment button

Seperti biasa, tema segmen tutorial aku ni "sharing is caring" (^_^)v
kali ni aku nak kongsi ilmu tentang bagaimana membuat pautan reply komen pada mesej kat entri kita...walaupun ianya tak berapa penting sangat namun ia akan lebih penting kepada mereka yang memerlukan. Mari ikut cara2nya, senang jew...



Langkah pertama:

Go to >> New Post >> Copy Blog Id Korang dan Save dalam wordpad (salin kat kertas pun boleh)


Copy kod html di bawah ni,
<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=BLOG ID KORANG&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'><img alt='Reply To This Comment' src='http://3.bp.blogspot.com/_3TLQUQnfZ8A/TBsk-ANVrPI/AAAAAAAAAHs/0NIewfyVreQ/s1600/replygray+2.png'/></a></span>
Replace atau gantikan BLOG ID KORANG dengan no Id Blog yang korang copy dalam wordpad tadi. 


Cara Buat Reply Comment Blogspot : Langkah kedua

  • Go to >> Design
  • Edit Html
  • Ctrl F dan cari perkataan : <data:commentPostedByMsg/>
  • Paste kod html dalam kotak selepas perkataan <data:commentPostedByMsg/> 
  • Preview blog
  • Save
~Good Luck~

Thursday, February 24, 2011

Tips setting gambar pada shoutbox

Aku nak kongsi sikit ilmu tentang tips meng'adjust posisi gambar yang kita pasang pada shoutbox. Alaaa sikit ja, tapi amat bergunalah kepada sesiapa yang memerlukan.

Tips ni aku dapat hasil daripada experiment aku sendiri tau. Saya suka main ngan kod2 HTML..hehe...

<style type="text/css">
#gb{position:fixed; top:50px; z-index:+1000}
* html #gb{position:relative}

.gbtab{height:300px; width:195px; float:left; cursor:pointer; background:url('http://i1143.photobucket.com/albums/n633/fahmi911/pamikusb.png') no-repeat}
.gbcontent{float:left; border:5px solid #84229D; background:#DF91F2; padding:0px}
</style>

<script type="text/javascript">
function showHideGB(){var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0,195-w):moveGB(195-w,0); gb.opened = !gb.opened}
function moveGB(x0, xf){var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) >10 ? 5:1; var dir = xf>x0 ? 1:-1; var x = x0+dx * dir; gb.style.right = x.toString()+"px"; if(x0!=xf){setTimeout("moveGB("+x+","+xf+")",0)}
}
</script>
<div id="gb">
<div class="gbtab"onclick="showHideGB()">  </div>
<div class="gbcontent">

<!-- Begin ShoutMix - http://www.shoutmix.com --><iframe title="fahmi_haseok91" src="http://www.shoutmix.com/?fahmi_haseok91" width="100%" height="400" frameborder="0" scrolling="auto"><a href="http://www.shoutmix.com/?fahmi_haseok91">View shoutbox</a></iframe><br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br /><!-- End ShoutMix -->

<div style="text-align:right">
<a href="javascript:showHideGB()">
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb"); 
gb.style.right = (-68-gb.offsetWidth).toString()+"px"; 
</script>

Aku just highlight kan pada kod html di atas yang ber'bold saja sebab kod2 ni memainkan peranan yang penting ketika kita memasang gambar yang kita mau taruh kat shoutbox tu nanti.

- height:300px : untuk meng'adjust tinggi gambar kita tu. Ikutlah suka ati korang.

- width:195px : untuk mengubah posisi gambar ke kiri dan ke kanan, nombor besar akan ke kiri dan sebaliknya

- 0,195-w : untuk meng'adjust posisi shoutbox apabila kita hide'nya semula. Ini kita perlu buat experiment sendiri. Nak lebih cantik adjust melalui gambar kita tu dengan cara memastikan posisi gambar kita tu apabila shoutbox di hide, gambar tersebut ngam2 berdekatan dengan scroll up and down.

-195-w,0: ikut ja macam kat atas ni 0,195-w. Contoh: (0,200-w) = (200-w,0).

- -68-gb: fungsinya untuk menetapkan posisi shoutbox korang pada view yang pertama. Cara mau kesan posisi shoutbox tu adalah dengan cara membuat new view dengan me'refresh/reload blog korang tu. Then, korang akan nampak posisi asal shoutbox korang tu sebelum korang klik apa-apa pada shoutbox korang tu.

okay itu saja...kalau korang ada sebarang pertanyaan tinggalkan ja komen korang tu kat entri ni.
daaaaaa....

Saturday, February 5, 2011

Cara membuat shoutbox tersembunyi dan tambah gambar di sebelahnya



nampak tak kelibat shoutbox 2...mcm la org x nampak....hehe


ooo....dia bawa kotak sembang pulak.....ngeee~~

Salam semua, mesti ada di antara korang ni yg mahukan shoutbox sebegini rupa kan??….di cini aq kongsikan cara-cara membuat shoutbox spt shoutbox aq kat sebelah kanan blog aq ni...’SHARING IS CARING’...xpa, walaupun ada yg dah tw 2 komen ja klu t’silap ajar yar…

Jom ikut cara2 di bawah:

langkah 1 : klik Design,
langkah 2 : Add A Gadget,
langkah 3 : HTML/Javascript,
langkah 4 : Copy dan paste kod di bawah pada content HTML/Javascript,

<style type="text/css">
#gb{position:fixed; top:50px; z-index:+1000}
* html #gb{position:relative}
.gbtab{height:300px; width:310px; float:left; cursor:pointer; background:url('http://paste’kan direct link anda di sini.png') no-repeat}
.gbcontent{float:left; border:0px solid #666; background:#fffffg; padding:10px}
</style>
<script type="text/javascript">
function showHideGB(){var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0,30-w):moveGB(20-w,0); gb.opened = !gb.opened}
function moveGB(x0, xf){var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) >10 ? 5:1; var dir = xf>x0 ? 1:-1; var x = x0+dx * dir; gb.style.right = x.toString()+"px"; if(x0!=xf){setTimeout("moveGB("+x+","+xf+")",10)}
}
</script>
<div id="gb">
<div class="gbtab"onclick="showHideGB()">  </div>
<div class="gbcontent">

(copy & paste html shoutbox anda di sini)

<div style="text-align:right">
<a href="javascript:showHideGB()">
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString()+"px";
</script>

Langkah 5 : Preview dulu kalau tak ada problem,
langkah 6 : Save.

CHOOPPPP!!
masukkan gambar?? -  perlu diingat anda perlu menyediakan gambar yg hendak dimasukkan terlebih dahulu di dlm PC anda, set kan brapa saiz gambar yg anda mahu , spt yg saya bt 300(width) x 400(height).

Dari mana mau dptkan direct link/url?? - utk dapatkan direct link/url pic kmu 2 dgn mudah, buka photobucket & upload pic kmu 2 di sana, bagi yg sdh register 2 xpa la…tp bg yg blum 2, apa tggu lagi...

Sdh upload?? - ok…copy direct link di bawah pic yg kmu uploaded 2 then paste’kan ke dalam tulisan yg b’highlight merah spt dlm langkah 4.

Tulisan yg b’highlight biru 2 utk apa? – ok, teman2 ku sekalian, tulisan yg b’highlight biru 2 digunakan utk m’adjust kedudukan gambar di sebelah shoutbox kmu 2….

GOOD LUCK~~~

MY SWEET HEART

SUKA SAMA SUKA

LinkWithin

Related Posts Plugin for WordPress, Blogger...
2leep.com