Sorokkan komen di blogspot

Ada reader tanya aku kat Fan Page Rojakstory, macam mana nak sorokkan kotak komen. Ha! Itu gunanya ada Fan Page tu. Untuk senang aku baca soalan korang instead of Formspring atau by e-mail. Sebab aku MALAS nak buka e-mail atau Formspring ok. Entah apa lah fungsinya Contact Me tu kan. Mesti ada yang cakap macam tu. Maaf aku tak ada jawapan untuk itu.haha.

Baiklah. Tutorial ini hanya untuk blogspot yang memakai embedded comments. Kalau pop up pun boleh tapi kotak komen akan hilang. ;). Btw, trick ni tak jalan kat blog yang pakai comment form dari third party contohnya Disqus Comment yang slow nak loading tu!

Tutorial ni aku dapat dari Teratak Muncet. Template blog ni pun aku cekau dari dia dan dengan SUKA SUKInya aku edit jadi theme lollipop.haha.

Untuk teruskan membaca, klik pada link di bawah.....

Penulis: Amoi
Blog : http://rojakstory.blogspot.com
Entri asal: Sorokkan Komen (blogspot)

Read More

Site Map

Read More

JQuery animated share button

Untuk memasang JQuery animated share button pada blog seperti yang boleh anda lihat di bahagian sidebar blog ini, hanya iku beberpa langkah yang mudah di bawah.

Langkah 1

Log in blog => Dashboard => Page Element => Add A Gadget => HTML/Javascript.

Langkah 2

Salin kod biru di bawah dan paste pada ruang content HTML/Javascrpit(rujuk gambar di bawah) dan Save.

<style>

#stage{

position:relative;

width:110%;

height:140px;

padding-left:15px;

background:transparent;

}

.btn{

background:transparent;

height:90px;

left:0;

top:0;

width:20px;

position:relative;

margin:20px 0 0 0px;

float:left;

}

.bcontent{

position:absolute;

top:auto;

bottom:20px;

left:0;

}

span.fb_share_no_count {

display:block;

}

span.fb_share_count_top.fb_share_no_count {

line-height:54px;

}

span.fb_share_count_nub_top.fb_share_no_count{

display:none;

}

span.fb_share_no_count span.fb_share_count_inner {

background:#3B5998 url(http://static.fbshare.me/f_only.png) no-repeat scroll 20px 5px;

display:block;

}

</style>

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

<script type="text/javascript" src="http://sites.google.com/site/jquery01/script.js"></script>

<div id="share">

<div id="stage">

<div class="btn digg"><div class="bcontent"><a class="DiggThisButton"></a><script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script></div></div>

<div class="btn tweetmeme"><div class="bcontent"><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div></div>

<div class="btn dzone"><div class="bcontent"><script language="javascript" src="http://widgets.dzone.com/links/widgets/zoneit.js"></script></div></div>

<div class="btn reddit"><div class="bcontent"><script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script></div></div>

<div class="btn facebook"><div class="bcontent"><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script</div</div>

</div>

</div>

Read More

Blogger Stats, feature terbaru dari Blogger.com

Blogger.com kini telah melancarkan Blogger Stats sebagai feature terbaru. Walaubagaimanapun,jika anda sedang atau pernah menggunakan Google Analytics, ciri-ciri yang ada pada ke dua-duanya adalah hampir sama.

Feature terbaru ini masih lagi dalam percubaan dan ianya boleh anda lihat di dashboard Blogger In Draft. Blogger Stats ini memaparkan maklumat dan analisis tentang view pada pages, lokasi pengunjung dan juga jenis browser yang di gunakan oleh visitors.

Read More

Cara pasang Tab menu Jquery versi 4

Pada tutorial sebelum ini, ada di tunjukkan beberapa tutorial untuk memasang jquery tab menu. Anda boleh membaca tutorial tersebut pada beberapa tajuk entri di bawah.

Tab menu Jquery versi 1
Tab menu Jquery versi 2
Tab menu Jquery versi 3

Untuk tutorial tab menu Jquery pada kali ini (sila klik untuk melihat contoh), mungkin cara ini mudah untuk anda cuba berbanding dengan cara pada tutorial yang sebelum ini kerana memerlukan anda untuk meletakkan kod tab menu jquery tersebut pada script template. Apa yang perlu anda lakukan adalah dengan membuat sedikit penambahan pada kod dan paste terus ke ruang content HTML/Javascript.

Untuk mencubanya, sila ikut beberapa langkah di bawah.

p/s: Mungkin cara ini tidak sesuai untuk beberapa jenis template kerana ianya memerlukan anda untuk masukkan kod di dalam script template. Harap maklum.

Langkah 1

Salin dan edit kod biru di bawah. Tukarkan kod yang di bold dengan menggantikan nama blog anda.

<style>

/******* GENERAL RESET *******/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,

font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,

tfoot, thead, tr, th, td {

vertical-align:baseline;

}

#container{

width: 100%;

line-height:12px;

font-size: 12px;

font-family: Arial;

margin:0pt;

cursor:pointer;

overflow: hidden;

}

.clear{

clear: both;

height: 0;

visibility: hidden;

display: block;

}

a{

text-decoration: none;

}

#container ul{

list-style: none;

list-style-position: outside;

}

#container ul.menu li{

float: left;

margin:0 0px 0 0px;

}

#container ul.menu li{

font-weight: 600;

display: block;

padding: 5px 2px 2px 2px;

background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmR6gKgWt1irXB0yyuYGIWJMoT5rHWd1e63tlFpfUuEVnCPTp3wiMl7fb720rCOIcB9NRvGw75KiyyX_RDW2l4EUP-KezJ49c0LazfrIENVeZgXo4mnMmqSzHXIwsKUDc28fXbOXJ7-a6S/s320/gradient.png)repeat-x 0 0;

margin-bottom: -1px;

margin-left:2px;

-moz-border-radius-topleft:6px;

-moz-border-radius-topright:6px;

border: 1px solid #d0ccc9;

border-width: 1px 1px 1px 1px;

position: relative;

color: #898989;

cursor: pointer;

}

#container ul.menu li.active{

background: #fff;

top: 1px;

border-bottom: 0;

color: #5f95ef;

}

.content{

margin: 0pt auto;

background: #efefef;

background: #e5e5e5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmR6gKgWt1irXB0yyuYGIWJMoT5rHWd1e63tlFpfUuEVnCPTp3wiMl7fb720rCOIcB9NRvGw75KiyyX_RDW2l4EUP-KezJ49c0LazfrIENVeZgXo4mnMmqSzHXIwsKUDc28fXbOXJ7-a6S/s320/gradient.png)repeat-x 0 0;

-moz-border-radius-topleft:5px;

-moz-border-radius-topright:5px;

-moz-border-radius-bottomleft:5px;

-moz-border-radius-bottomright:5px;

border: 1px solid #d0ccc9;

text-align: left;

padding: 10px;

padding-bottom: 20px;

font-size: 11px;

}

.content h1{

line-height: 1em;

vertical-align: middle;

height: 26px;

padding: 10px 10px 10px 35px;

font-size: 15px;

}

.content.news h1{

background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfSCUBuGUHqO9sOyoGLjf1tkI_7ryBO9ZM2xsymD6Gnmt4nAQa4l2exeHpyftVx-ws7OHnysY3gxmlv1adtdTmepqcE3-hxnuoKmQpNsJwC7gDM6PrG2eyZo3vR1MZ6ZuQt-iyAxOoV88/s320/favorite.png) no-repeat scroll left top;

}

.content.news{

display: block;

font-size: 11px;

color: #000000;

text-align: justify;

}

.content.news a{

font-size: 11px;

color: #5f95ef;

text-align:left;

padding: 0 0 0 0px;

}

.content.tutorials h1{

background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHKWRIDgLOyOwMvp-Pg2L2xgMNgK21RjYB24grLWnw53xWXGr-VOrLpDJnUZUGGtJRnz8NZ5JXO_ReaPI-KHZfWyGykWyHG-JnXwX5peSZTp0c2fliHen8soY58Skxu9cfQ54ls5wur7M/s320/heart.png) no-repeat scroll left top;

}

.content.tutorials{

display: none;

color: #000000;

text-align: justify;

}

.content.tutorials a{

color: #5f95ef;

text-align: left;

padding: 0 0 0 0px;

}

.content.links h1{

background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ644K7ldgtzafYUGc9AAqyH_HXb6YJB28vmr4bosQ-37P3Q8fbwb1JwiyTWztjy5e2IUAh70lUb8AKFFDkLEzPIA_-J1TXUpwkiA1cg5g0l6HS6A6TvyNCE7KSwwSUxyJZeZ1wlBik1I/s320/comment.png) no-repeat scroll left top;

}

.content.links{

display: none;

color: #000000;

font-size: 11px;

text-align: justify;

}

.content.links a{

color: #5f95ef;

text-align: left;

}

</style>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>

<script type="text/javascript" src="http://sites.google.com/site/javascript10/tabs.js"></script>

<div id="container">

<ul class="menu">

<li id="news" class="active">Recent</li>

<li id="tutorials">Popular</li>

<li id="links">Comments</li>

</ul>

<span class="clear"></span>

<div class="content news">

<h1>Recent Posts</h1>

<ul>

<script style='text/javascript' src='http://blogergadgets.googlecode.com/files/recentpostswidgetv1.js'></script><script style='text/javascript'>var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;</script><script src='http://maribinablog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts'></script>

</ul>

</div>

<div class="content tutorials">

<h1>Popular Posts</h1>

<ul>

<script language='javascript'>

aBold = false;

numposts=1000;

maxshowresult=5;

home_page = "http://maribinablog.blogspot.com/";

</script>

<script src='http://sites.google.com/site/testingsahaja/toppost.js' type='text/javascript'></script>

</ul>

</div>

<div class="content links">

<h1>Recent Comments</h1>

<ul>

<script style="text/javascript" src="http://sites.google.com/site/testingsahaja/recentcomments.js"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = false;var showposttitle = false;var numchars = 40;</script><script src="http://maribinablog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

</ul>

</div>

</div>

Langkah 2

Log in blog => Dashboard => Design => Page Elements => Add A Gadget => HTML/Javascript.

Langkah 3

Paste kod yang telah siap di edit(rujuk langkah 1) dan paste pada ruang content HTML/Javascript dan Save.

Gunakan kod <h2></h2> untuk mengosongkan bahagian Title.

Langkah 4

Klik Preview, dan jika bahagian button atas ataupun Link jadi seperti gambar di atas, edit semula pada kod yang di bold hitam pada kod yang berwarna merah di bawah.

Button:

#container ul.menu li{

font-weight: 600;

display: block;

padding: 5px 2px 2px 2px;

Tukarkan angka 2px kepada 15px atau 20px. Ubah angka tersebut sehingga anda berpuas hati dengan kedudukannya.

Link:

.content.news a{

font-size: 11px;

color: #5f95ef;

text-align:left;

padding: 0 0 0 0px;

dan

.content.tutorials a{

color: #5f95ef;

text-align: left;

padding: 0 0 0 0px;

Tukarkan padding 0px kepada 10px atau 15px. Ubah angka tersebut sehingga anda berpuas hati dengan kedudukannya.

Read More