Tutorial : Kelebihan Related Posts berbanding dengan LinkWithin

Rasanya masih ramai lagi yang tidak tahu akan kelebihan menggunakan coding Related Posts berbanding LinkWithin.. Walaupun cara untuk install LinkWithin agak senang berbanding coding Related Posts, tapi uols akan rugi backlink jika menggunakan LinkWithin..

Tak silap saya, backlink ni mempengaruhi jugak SEO dan ALEXA ranking (kalau salah..sila perbetulkan..hehehe) Selain itu, kalau uols guna Related Posts, loading page akan lebih cepat compare dengan uols menggunakan LinkWithin, nak2 skang ni tersangatlah ramai yang menggunakan LinkWithin kan..

Apa gunanya Related Posts ni? Memudahkan pembaca blog uols untuk melihat entri-entri dahulu yang berkaitan dengan topik-topik yang menarik minat mereka.. So, takdela entri lama tu bersawang je kan..

Macam biasa, 1st sekali pi kat Dashboard > Design > Edit HTML, then tick Expand Widget Templates. Untuk langkah keselamatan, sila backup dahulu template uols. Dengan menggunakan CTRL + F, search </head>, dan paste coding di bawah ni sebelumnnya atau di atas </head>..

<!--Related Posts with thumbnails Scripts and Styles Start-->     <style type="text/css">     #related-posts {     float:center;     text-transform:none;     height:100%;     min-height:100%;     padding-top:5px;     padding-left:5px;     }     #related-posts h2{     font-size: 1.6em;     font-weight: bold;     color: black;     font-family: Georgia, “Times New Roman”, Times, serif;     margin-bottom: 0.75em;     margin-top: 0em;     padding-top: 0em;     }     #related-posts a{     color:black;     }     #related-posts a:hover{     color:black;     }     #related-posts  a:hover {     background-color:#d4eaf2;     }     </style>     <script type='text/javascript'>     var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvbcplu1t9YWicxqpoiKWv95bT2JkXTGsoMhyphenhyphen04iq7yYwCOnYlrArMrwYhg_E-xObdDbHM3vCOzixZPgopxi8QzUh8XH8K7h-o4N_R7LdhSLEqEQZahVJ3OIoeUSNAUxpIXtVx03V-CVs/s400/noimage.png";     var maxresults=5;     var splittercolor="#d4eaf2";     var relatedpoststitle="Related Posts";     </script>     <script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>     <!--Related Posts with thumbnails Scripts and Styles End-->

Untuk yang berkaler merah tu,

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvbcplu1t9YWicxqpoiKWv95bT2JkXTGsoMhyphenhyphen04iq7yYwCOnYlrArMrwYhg_E-xObdDbHM3vCOzixZPgopxi8QzUh8XH8K7h-o4N_R7LdhSLEqEQZahVJ3OIoeUSNAUxpIXtVx03V-CVs/s400/noimage.png" = uols boleh tukar image bagi entri tidak bergambar dengan menggantikan url nomage ini

var maxresults=5 = uols boleh tukar jumlah topik berkaitan samaada nak 2,3,4 or berapa saja uols nak

var splittercolor="#d4eaf2" = uols boleh tukar color pembahagi topik mengikut citarasa

var relatedpoststitle="Related Posts" = uols boleh tukar tajuk related post ni sama ada nak Entri Berkaitan ke, or ape ape je lahh..

Dan, coding kat bawah ni uols paste dibawah <data:post.body>.. 

<!-- Related Posts with Thumbnails Code Start-->         <div id='related-posts'>         <b:loop values='data:post.labels' var='label'>         <b:if cond='data:label.isLast != "true"'>         </b:if>         <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>         <script type='text/javascript'>         removeRelatedDuplicates_thumbs();         printRelatedLabels_thumbs("<data:post.url/>");         </script>         </div><div style='clear:both'/>         <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>         <a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://www.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Widgets" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>         </b:if></b:if>         <!-- Related Posts with Thumbnails Code End-->

Preview dulu, dah berkenan then boleh save.. Tapi untuk yang guna 'read more hack', laman utama blog uols tidak akan terpapar widget Related post ini.. Harap maklum..


credit to : Riwayat Hariku 

Tutorial Recent Post Bergerak

Hari tu, saya dah share bagaimana nak letak Facebook Like & Retweet button, kali ni saya nak kongsikan pulak bagaimana mahu membuat recent post bergerak seperti kat fresh entries di sidebar tu..

Macam biasa, pi kat Dashboard > Design > Page Elements > Add a Gadget.. Then pilih HTML/ JavaScript. Pehtu, hangpa copy code ni dan paste kat bahagian content..

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>         <style media="screen" type="text/css">         <!--         #spylist {         overflow:hidden;         margin-top:5px;         margin-bottom:-20px;         padding:0px 0px -20px 0px;         height:350px;         }         #spylist ul{         width:220px;         overflow:hidden;         float:center;         list-style-type: none;         padding: 0px 0px;         margin:0px 0px;         }         #spylist li {         width:200px;         padding: 2px 2px;         margin:0px 0px 5px 0px;         list-style-type:none;         float:center;         height:70px;         overflow: hidden;         background:#FFFFFF;         border:1px solid #ddd;         }         #spylist li a {         text-decoration:none;         color:#A32929;         font-size:12px;         height:0px;         overflow:hidden;         margin: 0px 0px;         padding:0px 0px 0px 0px;         }         #spylist li img {         float:left;         margin-right:10px;         background:#EFEFEF;         border:0;         }         .spydate{         overflow:hidden;         font-size:0px;         color:#0284C2;         padding:2px 0px;         margin:1px 0px 0px 0px;         height:0px;         font-family:Tahoma,Arial,verdana, sans-serif;         }         .spycomment{         overflow:hidden;         font-family:Tahoma,Arial,verdana, sans-serif;         font-size:0px;         color:#262B2F;         padding:0px 0px;         margin:0px 0px;         }         -->         </style>             <script language="JavaScript">         imgr = new Array();         imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";         imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";         imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";         imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";         imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";         showRandomImg = true;         boxwidth = 255;         cellspacing = 6;         borderColor = "#232c35";         bgTD = "#000000";         thumbwidth = 70;         thumbheight = 70;         fntsize = 12;         acolor = "#666";         aBold = true;         icon = " ";         text = " ";         showPostDate = false;         showcomments = false;         summaryPost = 40;         summaryFontsize = 10;         summaryColor = "#666";         icon2 = " ";         numposts = 20;         home_page = "http://URL BLOG ANDA/";         limitspy=4         intervalspy=4000         </script>         <div id="spylist">         <script src="http://sites.google.com/site/testingsahaja/recentpostslide.js?attredirects=0&d=1" type="text/javascript"></script>         </div>

Part yang kaler merah tu, tukar ngan alamat blog uols. Yang kaler hijau tu pulak, uols leh tukar mengikut saiz dan kesesuaian sidebar blog uols. Yang kaler biru tu, numposts = 20 adalah jumlah post yang akan dipapar secara bergilir-gilir.. Yang limitspy = 4 tu pulak adalah jumlah paparan post pada masa yang sama..

Dah adjust comey-comey, preview pon dah berkenan di hati, maka uols leh save dan voila!! ^_*


p/s : credit to Riwayat Hariku

    

Tutorial Pasang Facebook Like & Retweet Button

Dah lama saya tak berkongsi tutorial kat sini kan..hehehe.. Sebenarnya, banyak tutorial yang ingin saya kongsikan, tapi masa tak berapa mengizinkan..hohoho.. Tanpa melengahkan masa lagi, jom kita tengok cara-cara untuk pasang Facebook Like & Retweet Button pada setiap entri..

Macam biasa, 1st sekali pi kat Dashboard > Design > Edit HTML, then tick Expand Widget Templates. Untuk langkah keselamatan, sila backup dahulu template uols. Dengan menggunakan CTRL + F, search <div class='post-header-line-1'>, jika kod tersebut tiada, uols boleh menggantikannya dengan kod <div class='post-header-line-1'> ataupun <data:post.body> macam kat bawah ni..

Untuk Facebook Like button, copy coding ini dan paste di bawah kod tersebut.. Yang kaler hijau tu, uols leh tukar kedudukan button samaada nak right or left. Begitu juga yang kaler merah tu, boleh ditukar saiz button ini mengikut kehendak uols.

<div style='float:left;padding:4px;'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show-faces=true&width=450&height=80&action=like&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height::80px'/>
</div>
 

Untuk retweet button, copy coding ni dan paste dibawah coding like button ni (saya buat camgitu ler..) Nak letak kat atas coding like button pon boleh, asalkan di bawah <data:post.body>. Macam saya hari tu, banyak kali adjust jugakla nak bagi comey2 je terletak dua-dua button ni..

<script type='text/javascript'>
tweetmeme_style = "compact";
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>

p/s : Credit to maribinablog. Kay, selamat mencuba..

Mahu Letak Floating Icon Di Tepi Blog?

Kali ni, saya nak shara cara-cara untuk letak icon2 seperti facebook, twitter, feedburner, youtube, & flickr, serta home & back to top button..

1st sekali, pi kat Dashboard > Page Elements > Add a Gadget dan pilih Html/Javascript. Copy dan pastekan coding kat bawah ni di gadget tersebut.

<br></p><blockquote><div style="color: blue;"><style type='text/css'></div><div style="color: blue;">a.linkopacity img {</div><div style="color: blue;">filter:alpha(opacity=50);</div><div style="color: blue;">-moz-opacity: 0.5;</div><div style="color: blue;">opacity: 0.5;</div><div style="color: blue;">-khtml-opacity: 0.5;}</div><div style="color: blue;"><br> </div><div style="color: blue;">a.linkopacity:hover img {</div><div style="color: blue;">filter:alpha(opacity=100);</div><div style="color: blue;">-moz-opacity: 1.0;</div><div style="color: blue;">opacity: 1.0;</div><div style="color: blue;">-khtml-opacity: 1.0; }</div><div style="color: blue;"></style></div><div style="color: blue;"><br> </div><div style="color: blue;"><div style='display:scroll; position:fixed; top:240px; right:-12px;'></div><div style="color: blue;"><br> </div><div style="color: blue;"><a class='linkopacity' href='<b style="color: rgb(255, 0, 0);">http://facebook.com/akaun facebook anda/</b>' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8RkFhfxHC155u_rbtn_ILWLCLuXx2Cs0bxNJhdS0MML55Tq5wfBDdCK3g4xgtO-N1tRy1eMhWHDy3mVtQ7jxhD9TwLA2erqyDlIqCASQAI9pPsu257pNZsI-Ps3eulygoYkUL4k4PEKL7/s320/facebook.png" /></a><br /></div><div style="color: blue;"><br> </div><div style="color: blue;"><a class='linkopacity' href='<b style="color: rgb(255, 0, 0);">http://twitter.com/akaun twitter anda/</b>' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRKiTLbJlMmClX_xOF_RPtUQEHTaKVmNFYHwaQ8ERWIJyeoK2CfSyfRmtxED7o4QYEUK_USyZu-o4TiIhhJ_o4pY5CsDrzOD3aQGAa0QA2bMYaVqcWUF9IauBXq5VnrNuJieUkZ0AbsOCu/s320/twitter.png" /></a><br /></div><div style="color: blue;"><br> </div><div style="color: blue;"><a class='linkopacity' href='<b style="color: rgb(255, 0, 0);">http://feedburner.com/akaun feedburner anda/</b>' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feedburner'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTt12EKXwKxmoYavzjKmIjh5oG2fzacLze2fAiKud82EwSc8ShcRzNao8lsJouC9FWBmX2wnC-eUZrgunEkS7Idpwdsdztz8_Q81KNpmaC-eeFhvCLWy5iAs-MXQ4Hk4FPaxSveCu_LRbI/s320/feedburner.png" /></a><br /></div><div style="color: blue;"><br> </div><div style="color: blue;"><a class='linkopacity' href='<b style="color: rgb(255, 0, 0);">http://youtube.com/akaun youtube anda/</b>' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='youtube'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiANtu7f9D6cdg7pfCwsayBD8Qik4h3qj1OsncYmX85JkvGQGJKh0jz3Bzdfn2X0SfNNXlZQojptsrnLjj1F3nROowjvHVEG_v7XzpiXrLe1SB5OKffYIx6A-DoNfRgRGNR64esaOkH2DXn/s320/youtube.png" /></a><br /></div><div style="color: blue;"><br> </div><div style="color: blue;"><a class='linkopacity' href='<b style="color: rgb(255, 0, 0);">http://flickr.com/akaun flickr anda/</b>' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='flickr'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIHMj_ZU1xH3J3VefPAJmyptqFYkh0nBkyz_8dQIUtfbbsK7MhDl8PzSCPZ6Unk3BHPbkF_lvNFW5rHSMNarsY1YByyKHPoGoFOeWOOV2b8zwbqlllJGpnOSzd57vw4tYaOa-_rY_M5FTs/s320/flickr.png" /></a><br /></div><div style="color: blue;"><br> </div><div style="color: blue;"></div></div></blockquote><p><span style="color: orange;"></span>

Sebelum save, jangan lupa untuk letak alamat akaun uols. Sekiranya takmo letak let say flickr, then uols just buang ajela coding untuk flickr. Kalau rasa dah bosan ngan icon tersebut, uols leh tukar icon2 lain di http://www.iconspedia.com.

Dah setel tang icon, jom tengok coding untuk letak home & back to top button. Uols nak asignkan pon boleh, or nak paste kat ruang content Html bagi icon kat atas tu pon boleh. Macam saya, saya asingkan.

</p><p><a href='#' style='position: fixed; right: 1px; bottom: <span style="color: rgb(0, 0, 255);">100</span>px;' title='back to top'><img height="21" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Ggv8cUMHQS8iebC1_oIXMhx_zPkLbyN2OfXkn3sgLOKVaDruagAczNtQqwju_AI6eyclVrLkYcdG4LviSIn-XUBMyCrsJJ0bP4sACZeJqsU8V-L6hmOhO4wX28BBeriLZpNfV70K2fU/s320/up.png" width="21" /></a><a href='<span style="color: rgb(255, 0, 0);">http://myapeapeaje.blogspot.com</span>/' style='position: fixed; right: 1px; bottom: <span style="color: rgb(0, 0, 255);">129</span>px;' title='home'><img height="21" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIYvaUX0age05inD_iJrxTcv27VJV1O2pVvBBwEZ_zdQeC5gKJxGPZt6_tABPyJEkqlruE8Yx0c0szINA0MRGsO1JrM3rPtSfLbCxJg_6QE7ogzI1A8M76GzOfBN5RP9dL1eibA7pDyH8/s320/home1.png" width="21" /></a>

Kalau perasan, ade bottom: 100px, yang kaler biru tu uols leh tukar position mengikut kehendak uols. Sekalii lagi, jangan lupa untuk tukar kepada alamat website uols. Selamat mencuba.. ^_^


p/s : Kredit to MariBinaBlog

Nak Letak Icon Comel bagi Button Comment?

Ha, aritu kat Happy Mode, saya ade gitau yang saya telah berjaya letak icon comment kat bawah post. Maklumla, template saya ni link commentnyer kat atas, jadi kekadang orang tak prasan coz biasanya link komen ni duk kat bawah..

So hari ni, saya nak sharelah cara2 utk letak icon comment yang comel lote.. Macam biasa, pi kat Dashboard > Design > Edit Html, then tick Expand Widget Templates. Menggunakan CTRL + F, search <span class='post-comment-link'> macam kat bawah nih..

Copy code kat bawah ni dan paste dekat bawah <span class='post-comment-link'> tadi..

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<center><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='Klik untuk komen!'><img class='post-comment-link' src='URL ICON'/>
</a></center>
</b:if>
</b:if>
</span>

Coding ni saya amik kat Liyana Lunia. Yang kaler hijau tu, uols nak tukar ayat berbunga2 pon boley.. Yang kaler merah tu, url untuk icon comment tu.. Macam saya, saya amik kat glitter graphics.. Kat situ macam2 ade.. Dah siap, save template dan siap sudaaa...

Tapi bagi kes template macam saya, which is link komen kat atas, icon comment uols tu akan berada kat atas. So cane nak solve problem ni? Senang aja, instead of uols paste coding atas tu kat bawah <span class='post-comment-link'>, uols search data:post.body macam kat bawah ni, then paste kat bawah tu..


Hasilnya, jadikla cam blog saya.. Suka tak?

Jom letak Scroll Box di Blog Archive

Last time, saya dah share cara-cara untuk letak scroll box di bloglist & widget2 lain seperti feedjit & popular posts.. Kali ni saya nak share cemana nak letak scroll box di blog archive pulak supaya nampak lagi kemas tetapi dapat tunjuk semua tajuk2 post uols yang best2 tu..

1st skali, cam biasala pi kat Dashboard, klik Design, then klik Edit Html.. Pastu tick Expand Widget Templates. Dengan menggunakan CTRL + F, search <div id='ArchiveList'> macam kat bawah ni..

Copy code warna hijau ni <div style='overflow:auto; width:auto; height:100px;'> dan letak di atas <div id='ArchiveList'> dan code ini </div> sebelum <b:include name='quickedit'/>, macam kat bawah ni..

<div style='overflow:auto; width:auto; height:100px;'>
<div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + "_ArchiveList"'>
    <b:if cond='data:style == "HIERARCHY"'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == "FLAT"'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == "MENU"'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div></div>
  <b:include name='quickedit'/>

Yang kaler merah tu, uols leh adjust ketinggian ikut kehendak uols.. Klik Preview dulu untuk tengok jadi ke tak, kalu ok leh save dan voilaaaa.. It's done and cun!!!


Kredit : Kak Syamila

Nak bagi Recent Comments bergerak?

Sebelum saya berkongsi cara-cara untuk letak scroll box di blog archive, saya nak share dulu macamana nak bagi recent comments uols tu bergerak..

Tapi kan, saya guna recent comments dari sini.. Takde problem kalau uols guna recent comments dari website lain pon boleh. Yang saya concern skang ni kalu uols guna recent comments widget kat Blogspot ni, ha yang tu korang kena godek2 sendiri lorr cane nak jadikan ia bergerak..hehehe..

Pada yang takde recent comments widget, leh copy codingnya kat sini..

<script style=text/javascript src=http://www.freewebs.com/filer/blogger/rc1blogger.js ></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=80;</script><script src=http://YOUROWNBLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><small>↑ <a href=http://www.madtomatoe.com/recent-comments-widget-for-blogger/>Get </a><a href=http://www.madtomatoe.com/ target=_blank title=recent comments widget>Recent Comments Widget</a></small> <style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} </style>

Yang kaler biru tu, gantikan dengan address blog uols. Untuk kaler merah tu, jumlah comment yang uols nak papar. Kalau nak 10, ganti ajela 5 tu kepada 10. Rasenya sumer dah tau cane nak letak coding ni kan, cam bese add html gadget then paste. Nak bagi gerak pula, uols ambil coding bawah ni dan letak seperti yang tertera..

<marquee behavior="scroll" direction="up" onmouseover="this.stop()" scrollamount="2" onmouseout="this.start()">LETAKKAN CODING RECENT COMMENTS DI SINI</marquee>

Kalu uols perasan, coding kat atas ni adalah lebey kurang sama ngan coding Marquee scrolling image, so kalu nak adjust halaju ke, arah comments tu bergerak, sila rujuk kat coding Marquee scrolling image. Selamat mencuba!!

Cara membuat Scroll Box di Bloglist & Html Widget

Mahu memperkemaskan lagi blog dengan memasang scroll up & down pada list blog yang berjela-jela? Kalu uols perasan, kat my bloglist ngan feedjit ada scroll box. Begitu juga kat blog archive, tapi tutorial ni tidak applicable pada blog archive (tunggu next entriii..)

1st skali, uols kena dapatkan id widget yang ingin diletak scroll box. Camane nak dapat id ni? Pi kat dashboard, klik design, pilih page elements. Kat sidebar hangpa ada list2 widget. Klik edit bloglist widget (contoh widget yang ingin diletak scrollbox), hangpa cari widgetId kat atas tu.. biasanya dia duk last skali, cam gambar ni..

id widget ni ialah BlogList1

Dah dapat id tu, hangpa replace kat coding ni di tulisan kaler merah tu.. *sila copy betui2 coz aritu saya gi memandai dekatkan dot dengan BlogList1 trus tak jadi..* Pastekan dulu coding ni di notepad/word or mana-mana yang menyenangkan uols.. Yang kaler hijau tu, uols leh adjust mengikut ketinggian yang uols mahu..

#BlogList1 .widget-content{
height:200px; width:auto;
overflow:auto;
}

Pastu, uols gi kat Edit Html, tick bahagian Expand Widget Templates, dan dengan menggunakan Control + F, search ]]> macam kat bawah ni.. 

Dah jumpa ]]>, maka bolehla uols amik coding dari 1st step tadi dan paste di atas kod ]]>. Di atas yer, bukan di bawah..hihihi.. Buatla kat widget2 lain yang uols nak bagi pendek sket.. 




p/s : Sumber : Kak Syamila
 

Tutorial Marquee Code : Scrolling Image

Kali ni, saya nak share bagaimana uols boleh buat blog uols nampak lebey organize dengan bantuan Marquee code.. Apa gunanya Marquee code? Banyak sebenarnya yang leh buat ngan Marquee code nih, tapi untuk entri ni, saya nak kongsi tips membuat scrolling image dengan menggunakan Marquee code..

Kalu uols perasan, kat sidebar blog nih, ade part Won, part ni saya gunakan Marquee code laa.. Actually, nak buat gambar tu gerak dari kiri ke kanan pon buleh, and the other way round pun boleyy..

First skali, copy code ni..

<marquee direction="up" width="200" onmouseover="this.stop()" scrollamount="4" onmouseout="this.start()" height="200" align="center">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinMKgUyTpfM_STummWpcjeEtp6YQxZi_lwU9Dv2S3tpmM6PVqR4Soo9XkhG5Bu9_10KyfzkMdDW205_e78c9NuJygwI-jT_gy-2gGvK1k0dQ5-3Z9fZicLhvKZdEdHhy7AS0jVx1hrk8Mf/s320/aidilfitri_s.jpg" width="160" height="160" /align="center" /><p><a href="http://myapeapeaje.blogspot.com/2010/10/me-bertuah-in-ramadhan-raya-ga.html">One of the Lucky Winners</a></p>

</marquee>

Yang warna merah tu, uols leh tukar ikut suka hatila.. Cumenyer part scrollamount = 4 tu adalah halaju gambar. Kalau nak lagi laju, guna nombor lagi besau dari 4, cthnyer 5 -10. Kalau nak slow, kurangkanla..

Yang part kaler hijau, img src tu adalah image location (yang ni uols leh dapat ngan right click then select copy image location) bagi gambar tersebut, a href tu adalah link blog/entri..

Yang kaler biru tu adalah text yang dilinkkan kepada url blog/entri.. Ok, sekian suda.. Kalau nak buat cool effects yang lain2 guna coding Marquee leh tengok kat sini..

Mahu Pasang Button Add This atau Facebook Share?

Perasan tak kat blog ni sudah banyak berubah sedikit, dah ade widget2 such as twitter la, feedjit la, malah ketiga-tiga nuffnang pon dah diletak..hihiihi..

Ok, sblom tersasar lebih jauh, kali ni saya nak share on how to put button ADD THIS in your every post. Kalu prasan, kat smua entri saya, bahagian bawah je mesti ade button +share. Cemana nak wat? Ok, 1st skali uols kenala gi website ini, untuk dapatkan button kesukaan anda..

Dah buat sampai dapat coding, then uols pegila kat dashboard, klik design. Then, edit html, sila tick kat expand widget templates. Pastu, dengan menggunakan CONTROL + F, type la data:post.body macam kat bawah ni..

Dah jumpa tu, uols lehla copy coding button tu dan tempek kat bawah command tu.. Kalu rasa nak lagi best, tulislah ape2 such as sharing is caring ke.. silalah share kalau suka ke.. before tempek coding tu.. ha, tapi nak bagi ape yang uols tulis tu di perenggan baru aka new line, uols kena type <p>Ayat bunga-bunga hangpa </p>  then paste ajela coding add button tuhh..

Semua dah selesai, sila save aje template kome tu.. Voila!! Dah siap dan ready untuk diklik oleh pembaca2 kowang sumer.. Amacam, anda suker ngan entri ini? Ape lagi..klik ajela button aii tuhh..hihihi.. Harap dapat membantu kawan-kawan sumer..


p/s: Tapi kan.. yang aii konpius2 lagi, adekah kalu kita pasang button nih akan memberatkan lagi loading website kesayangan kite nih?? Hmm..