surfingfeed widget

Bila Seorang Penulis Blog, Berperangai Diva

February 15, 2012

Wah dah lama rasanya M'Rie tak update blog kerana dek kemalasan dalam diri ini. Tapi hari ini tetiba pula teringin nak update blog. Kali ini M'rie nak mengupas isu berkaitan "Bila Seorang Penulis Blog, Berperangai Diva".

Mesti anda semua tertanya-tanya macam mana seorang penulis blog itu boleh dikategorikan dalam golongan yang berperangai DIVA. Sebenarnya penulis blog berperangai diva ni lebih kurang sama sahaja dengan penulis blog yang digelar "Blogger Retis" tapi bezanya depa ni up sikit dari blogger retis. Up yang macam mana tu erk ?

Okay depa ni sebenarnya digelar Blogger Diva. Adalah kerana depa ni suka sangat menagih simpati serta suka memaksa orang lain untuk buat sesuatu untuk mereka. 

Apa yang mereka suruh buat tu ?

Kebiasaannya Blogger Diva ni akan meminta rakan-rakan facebook mereka supaya mengundi, mengelike, mengeshare dan sebagainya. Kira depa ni minta tolong untuk bagi depa menang dalam sesuatu pertandinganlah senang citer.

M'Rie menulis artikel ni bukanlah nak memalukan depa tu. Tapi penulisan ini hanyalah sekadar luahan perasan hati M'Rie sahaja. Mana taknya, bila depa buat macam tu dan kita pun tak memberi respon yang positif. Mulalah Blogger Diva tadi buat status di facebook dengan ayat-ayat sinis. Gara-gara permintaan mereka itu tidak ditunaikan oleh rakan blogger yang lain.

Sebenarnya rakan-rakan blogger bukanlah tak mahu menolong. Tapi ianya adalah disebabkan oleh blogger yang meminta pertolongan itu sendiri. Sebab utama mengapa rakan-rakan blogger tidak mahu memberikan kerjasama adalah disebabkan tiadanya konsep "Win win situation".

Kesilapan Yang Sering Dilakukan Bila Meminta Pertolongan Dari Rakan Blogger.

Kesilapan blogger yang meminta pertolongan dari rakan blogger lain adalah dimana mereka ini sering mementingkan diri sendiri. Di mana mereka ingin memenangi pertandingan yang disertai, akan tetapi mereka hanya membalas pertolongan dengan hanya mengucapkan ucapan "Terima Kasih" sahaja. 

Di sini sahaja sudah menampakkan tiadanya konsep "Win win situation". Yang kelihatan hanya keuntungan kepada sebelah pihak sahaja. Iaitu si peminta tolong tadi sahaja yang mendapat manfaat. Manakala yang menolong cuma mendapat ucapan "Terima Kasih" sahaja.

Inilah kesilapan yang sering dipandang remeh oleh blogger-blogger yang selalu mengharapkan pertolongan dari rakan blogger mereka. Mereka terlupa ataupun terlepas pandang akan perkara kecil ini.

Ya, ianya memang nampak kecil sahaja. Tetapi impaknya besar di masa akan datang. Sebab itulah anda tidak mendapat maklum balas yang positif bila anda meminta bantuan dari rakan blogger anda.

Anda menyalahkan rakan blogger anda disebabkan oleh kesilapan yang dilakukan oleh anda sendiri sama ada anda sedar ataupun tidak akan kesilapan itu. Sebab itu tanpa segan silu anda menyalahkan rakan blogger anda sebab mereka memberikan respon yang dingin terhadap permintaan anda itu.

Apa yang perlu dilakukan ?

Jawapannya ada pada diri anda sendiri. Anda sepatutnya tahu apa yang patut dilakukan sebelum anda ingin meminta sesuatu dari rakan blogger anda.

Mungkin mereka-mereka yang telah menghulurkan bantuan itu tidak meminta sebarang balasan. Tapi kita kenalah berfikir di luar ruang pemikiran. Janganlah bila mereka kata tak perlukan apa-apa balasan, kita pun ikutkan sahaja.

Seboleh-bolehnya balaslah pertolongan itu tadi dengan mempromosikan blog mereka, mengklik iklan-iklan di blog mereka, ataupun bantulah mereka semula dengan mengklik iklan-iklan yang mereka publish di wall facebook mereka.

Lagipun jika anda berbuat demikian. Barulah wujudnya "Win win situation" diantara kedua-dua belah pihak. Bahkan ianya tidak merugikan pun. Dua-dua pihak mendapat manfaat dari kerjasama yang dilakukan.
{ 0 ♥ comment }

Navigation Menu v1 | Customize Thesis For Blogspot

February 2, 2012

M'Rie kembali lagi dengan siri Tutorial Customize Thesis For Blogspot (D.I.Y Theme:Thesis For Blogspot).

Okay, tutor kali ni simple jer. Kita cuma perlu tambah sedikit code ke dalam CSS code template untuk menampakkan kelainan pada Navigation Menu kita. Hanya masukkan 2 baris code di bawah ini ke dalam CSS Code Horizontal Menu di ruangan edit HTML.

box-shadow:0px 0px 5px #000000;
-webkit-box-shadow:0px 0px 5px #000000;
-moz-box-shadow:0px 0px 0px #000000;

1. Cari CSS Code Ini:

Perkara pertama yang perlu anda buat adalah mencari CSS Code ini .menuhorizontal li a:hover{, bila dah jumpa code berkenaan. Masukkan 2 code di atas ke dalam code berkenaan. Seperti di bawah ini:


.menuhorizontal li a:hover{
    background:#99CC33;
    color:#fff;
    text-decoration:none;
    box-shadow:0px 0px 5px #000000;
    -moz-box-shadow: 0px 0px 5px #000000;
    -webkit-box-shadow: 0px 0px 5px #000000;
    }

2. Bonus Tutor:

Jika anda nak cantikkan lagi menu anda itu anda boleh tambahkan border pada hover menu berkenaan. Masih lagi menggunakan code yang sama seperti di atas. Cuma anda perlu tambah 1 sahaja lagi baris CSS Code.


.menuhorizontal li a:hover{
    background:#99CC33;
    color:#fff;
    text-decoration:none;
    box-shadow:0px 0px 5px #000000;
    -moz-box-shadow: 0px 0px 5px #000000;
    -webkit-box-shadow: 0px 0px 5px #000000;
    border: 2px solid #ddd;
    }

3. Arahan Untuk Customize:

Jika anda ingin mengubah warna latar bagi hover menu anda. Sila tukar code warna ini #99CC33 kepada code warna yang lain.

Akan datang, M'Rie akan ajar anda. Bagaimana hendak menukar Navigation Menu sedia ada di dalam template D.I.Y Theme: Thesis For Blogspot kepada Navigation menu yang lain.

{ 0 ♥ comment }

Related Post MagzEvo Version | Customize Thesis For Blogspot

February 1, 2012

Related Post adalah merupakan widget yang akan memaparkan beberapa artikel yang berkaitan dengan sesuatu artikel. Kebiasaannya ianya akan memaparkan minimum 5 artikel yang berkaitan dengan sesuatu artikel di bahagian bawah artikel yang dibaca.

Kali ni M'Rie nak kongsikan dengan anda semua. Bagaimana hendak memasukkan widget berkenaan ke dalam template D.I.Y Theme: Thesis For Blogspot.

1. Log In ke Dashboard:

Okay, macam biasalah. Perkara pertama yang perlu anda buat adalah anda perlu log in ke dashboard > template > edit HTML > Proceed.

Sila tanda tick pada "Expand Widget Templates".

2. Memasukkan Code CSS/Style Sheet:

Sekarang kita teruskan dengan langkah-langkah memasukkan code yang berkaitan ke dalam ruangan edit HTML. Anda dinasihatkan untuk membuat back up sebelum melakukan proses ini.

Sila cari code </head> dengan menggunakan button "Ctrl + F". Bila dah jumpa, sila copy dan paste code dibawah sebelum code </head>.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style>
#main-wrapper {width: 610px;}
.post {border-bottom: 1px solid #ddd;}
  }
</style>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related_posts{}
#related_posts h4{ border-top:1px solid #333;  border-bottom:1px solid #333;  color:#333;  font-size:14px;  letter-spacing:0;  line-height:20px;  margin:0 0 5px;  padding:5px 10px; background:#03C}
#relpost_img_sum{/* height:320px; overflow:auto; */margin:0; padding:0px; line-height:16px}
#relpost_img_sum:hover{background:none}
#relpost_img_sum ul{list-style-type:none; margin:0; padding:0}
#relpost_img_sum li{border:1px solid #ccc; background:#fff; margin:0 0 5px; padding:5px; height:65px; list-style:none}
#relpost_img_sum .news-title{display:block; font-weight:bold !important}
#relpost_img_sum .news-text{display:block; text-align:justify; font-weight:normal; text-transform:none; color:#333}
#relpost_img_sum img{float:left; margin-right:5px; padding:4px; border:solid 1px #ccc; width:50px; height:50px; background:#fff}
</style>
<script type='text/javascript'>//<![CDATA[
var relnum = 0;
var relmaxposts = 5;
var numchars = 200;
var morelink = "readmore";

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\' I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... <a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a><17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnum|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxposts|li|span|text|split|join|relpostimgthum|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|relatpost|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
//]]></script>
</b:if>

3. Langkah Memasukkan Code HTML:

Selepas selesai dengan langkah ke 2. Kita teruskan dengan langkah ke 3 iaitu memasukkan code HTML Related Post.

3.1 Code HTML :

Ini pula arahan buat mereka yang masih menggunakan sistem komen asal template D.I.Y Theme: Thesis For Blogspot. Anda cuma perlu mencari code:
<span class='st_sharethis_hcount' displayText='ShareThis'/></div></div>
Selepas anda menjumpai code berkenaan sila copy dan paste code di bawah selepas code </div> dan pastikan anda meletakkannya sebelum code </b:if>.

<div id='related_posts' style='margin-top:35px;'>  
<h4 style='color:#fff; text-shadow:none; border-radius:5px;  border:2px solid #ddd;  background:#000;'>Related Posts</h4>  
<b:loop values='data:post.labels' var='label'>  
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/>  
</b:loop>  
<ul id='relpost_img_sum'>  
<script type='text/javascript'>relatpost();</script>  
</ul>  
</div> 

Bagi pengguna template TFBv2. Sila cari "<!-- Hook After Post Start -->", paste kan code related post selepas barisan ayat berkenaan (Jika anda tidak jumpa dengan code share this yang dimaksudkan diatas).

3.1.1 Arahan Untuk Customize Code HTML:

  1. Code yang di highlight dengan warna biru itu adalah code warna tulisan bagi perkataan "Related Post" dan ianya berwarna putih.
  2. Code yang di highlight dengan warna hijau itu pula adalah code warna latar bagi perkataan "Related Post" dan ianya berwarna hitam.
  3. Perkataan "Related Post" yang di highlight dengan warna merah itu. Anda boleh ubah dengan ayat anda sendiri.

Note:

Tutor ini boleh digunapakai untuk TFBv1 & TFBv2. Pengguna custom template lain pun boleh try guna juga. Tapi kena tahu nak letak kat mana jer code di step 3 tu.

Tutor Related Post di atas akan memaparkan gambar (artikel yang ada gambar). Bagi artikel yang tiada gambar, gambar default akan terpapar.
{ 0 ♥ comment }

Customize Title Sidebar | Customize Thesis For Blogspot

Okay kali ini M'Rie nak kongsikan dengan anda. Bagaimana nak mengubah rupa template D.I.Y Theme : Thesis For Blogspot yang dihasilkan oleh Bro Shah Danial. Kali ini kita akan belajar macam mana nak mengubah bahagian Tittle Sidebar. Okay kita teruskan dengan tutornya.

1. Sila cari code CSS

Perkara pertama yang perlu anda buat adalah anda perlu Log In ke dashboard blog anda. Pilih Template > Edit HTML > Proceed.

Selepas itu sila cari code .sidebar h2 dengan menggunakan "Ctrl + F" di keyboard anda. Anda akan jumpa code sama seperti di bawah ini. Kalau tak sama pun, may be lebih kurang cam tu ar. Bergantung kepada template yang u all gunakan.

.sidebar h2 { #fff;border-bottom:3px solid $bordercolor;
  margin:0em 0 0em;
  font:Segoe UI, Serif;
  line-height: 1.5em;
  letter-spacing:.1em;
  color:#669933;
        font-size:130%;
        margin-top:10px;
        margin-bottom:4px;
}

2. Arahan Untuk Customize

Okay, kalau anda nak mudah. Anda cuma perlu gantikan code di atas dengan code yang dibawah ini sahaja.  Sebab ianya lebih mudah, senang, cepat, dan pantas.
Version 1
.sidebar h2 { #fff;border:3px solid #ddd;
  margin:0em 0 0em;
  font:Segoe UI, Serif;
  line-height: 1.5em;
  letter-spacing:.1em;
   color:#ffffff;
   font-size:130%;
   margin-top:10px;
   margin-bottom:4px;
   text-align:center;
   background:#000000;
}
  1. Code warna yang berwarna merah tu adalah code warna bagi border. Itu adalah warna kelabu. Anda boleh tukar dengan code warna lain. Sila rujuk di sini.
  2. Code warna yang berwarna biru tu pula adalah code warna untuk font title sidebar. Code diatas adalah berwarna Putih. Sama seperti di point nombor 1. Anda boleh tukar dengan code warna lain mengikut kesesuaian warna latar yang anda pilih.
  3. Code warna yang berwarna hijau itu pula adalah code warna untuk latar title sidebar. Dalam code berkenaan ianya adalah berwarna hitam. Sila rujuk point nombor 1 untuk tukar code warna.
Version 2
Okay, version 2 ni yang membezakannya dengan version 1 adalah dari segi background sahaja. Di mana kita boleh membuat backgroundnya seperti dari warna cerah kepada warna gelap. Kiranya kita bermain dengan tone warna di sini. Code sama seperti di atas. Cuma ada pertukaran code pada code background sahaja.

 .sidebar h2 { #fff;border:3px solid #ddd;
  margin:0em 0 0em;
  font:Segoe UI, Serif;
  line-height: 1.5em;
  letter-spacing:.1em;
  color:#ffffff;
     font-size:130%;
     margin-top:10px;
     margin-bottom:4px;
     text-align:center;
     background-image:-moz-linear-gradient(top,#E600E6,#800080);
  background-image:-webkit-gradient(linear,0% 0%,0% 100%, from(#E600E6), to(#800080), color-stop(1,#800080));  
}
  1. Code warna yang berwarna merah tu adalah code warna bagi border. Itu adalah warna kelabu. Anda boleh tukar dengan code warna lain. Sila rujuk di sini.
  2. Code warna yang berwarna biru tu pula adalah code warna untuk font title sidebar. Code diatas adalah berwarna Putih. Sama seperti di point nombor 1. Anda boleh tukar dengan code warna lain mengikut kesesuaian warna latar yang anda pilih.
  3. Code warna yang berwarna hijau & pink itu pula adalah code warna untuk latar title sidebar. Dalam code berkenaan ianya adalah berwarna pink. Sila rujuk point nombor 1 untuk tukar code warna. Yang berwarna hijau itu adalah warna pink cerah dan yang warna pink pula adalah warna pink gelap.
Okay, dah siap dah. Selamat mencubalah ya buat pengguna-pengguna template D.I.Y Theme: Thesis For Blogspot. Kalau ada apa-apa yang tak faham. Sila tinggalkan jejak di ruangan komen. Pastikan anda tidak buat spammed komen ya.
{ 0 ♥ comment }
 

Google+ Badge

Artikel Terkini