JQuery Social Bookmark.

Tips And Tricks

Lihat Demo

01. Mula-mula sign in akaun blogger anda.

02. Pilih Layout --> Edit HTML.

03. Backup Template anda dahulu untuk mengelakkan sebarang masalah.

04. Klik pada Expand Widget Template seperti screenshot di bawah ini.

05. Cari kod ini.

]]></b:skin>

06. Copy kod di bawah dan Paste di atas kod tadi:

/* SosialBookmark
*/

#sharebox{
height:48px;
width:400px;
margin:0;
padding:5px 0;
}

ul.sharebox { margin:0px; padding:0px; list-style:none; position:relative; display:block;}
ul.sharebox li { float:left; margin:0 0 0 0px; padding:0px; position:absolute;}
ul.sharebox li a { margin:0 0 0 -24px; display:block;}
ul.sharebox li a:hover { margin:0 0 0 -8px; }
ul.sharebox li img { border:none;}

07. Setelah selesai meletakkan kod di atas.Cari kod ini.

</head>

08. Copy kod di bawah dan letakkan di atas kod tadi.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>
(function($){
$.fn.sharebox = function(){
var element = this;

$(element).find(&quot;li&quot;).each(function(i){
$(this).css(&quot;z-index&quot;, 10- i);
if (i&gt;0)
$(this).css(&quot;left&quot;, i * 24 + 100);
});

}
})(jQuery);
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#sharebox&quot;).sharebox();
});
</script>

09. Seterusnya, cari kod ini.

<data:post.body/>

10. Perhatian !!! Jika anda mempunyai kod di atas lebih dari satu cari yang paling akhir.

11. Sekarang Copy kod di bawah dan letakkan di bawah kod tadi.

<ul class='sharebox' id='sharebox'>

<li><img alt='Share this' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SmkuLMrwEhI/AAAAAAAABm8/SF6x9UfvEJA/s800/sharethis.png'/></li>

<li><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Digg' src='http://lh5.ggpht.com/_dfnTVAxeWMI/Smktud4qk8I/AAAAAAAABmk/z5vZVjTmD7k/s800/digg_48.png'/></a></li>

<li><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to StumbleUpon' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SmkuLCBTubI/AAAAAAAABm4/KwVHDJnT-EQ/s800/sumbleupon_48.png'/></a></li>

<li><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Delicious' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SmktubnHpoI/AAAAAAAABmg/b31Po_kEbnc/s800/delicious_48.png'/></a></li>

<li><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Technorati' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SmkuK1y0_cI/AAAAAAAABm0/C8EExNM-xjE/s800/technorati_48.png'/></a></li>

<li><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Reddit' src='http://lh3.ggpht.com/_dfnTVAxeWMI/Smkturrni-I/AAAAAAAABmw/AbGticB0wAs/s800/reddit_48.png'/></a></li>

</ul>

12. Save template.

Selamat Mencuba.

Sumber Janko

READ MORE...

Memasang 'Page Navigation #2'.

Panduan Blogspot

Untuk memasang 'Page Navigation #1' rujuk di sini.

Untuk memasang 'Page Navigation #2'.

Sila ikuti beberapa langkah ini.

1. Sign in akaun blogger.

2. Pilih Layout --> Edit HTML.

3. Klik / tandakan Expand Template Widget seperti screenshot di bawah ini.

Malaysia Blogger Hack

4. Cari kod ini.

<b:include name='nextprev'/>

5.Gantikan kod di atas dengan kod di bawah.

<b:if cond='data:blog.pageType == "index"'>
<style type="text/css">
.blogpager {
font-size:16px;
color: #060;
font-weight:bold;
padding:0px 4px;
}
</style>

<div align="center" style="margin:5px;">
<form action="#" name="pager20">
<span id="vwg-pager-first"></span> <span id="vwg-pager-prev"></span> <input name="showingpage" onfocus="this.select()" value="init..." type="text" size="4" title="Enter page number that You want to go" />/<input size="4" type="text" name="pagestotal" disabled="disabled" value="init..." /> <input type="button" onclick="checkpager()" value="Go" /> <span id="vwg-pager-next"></span> <span id="vwg-pager-last"></span>
</form>
</div>

<script type="text/javascript">

var blogID = "6930401002504091490";
var home_page = "http://www.syamzone.blogspot.com/";
var pager_max_main = 10;

var pager_first_text = "First";
var pager_last_text = "Last";
var pager_prev_text = "Prev";
var pager_next_text = "Next";

</script>
<script src="http://www.freewebs.com/anhvo/blogger/blogger_pager_script_v20.js"
type="text/javascript"></script>
</b:if>

6. Gantikan kod berwarna biru dengan ID dan Url blog anda.

7. Save Template.

8. Selamat Mencuba.

Sumber Jaloe.

READ MORE...

Memasang 'Random Header Image'.

Tutorial Blogspot

1. Sign in akaun blogger.

2. Pilih Layout --> Edit HTML.

3. Cari kod ini.

]]></b:skin>

4. Copy kod di bawah dan letakkan di bawah kod tadi.


<script type='text/javascript'>
var gbr= new Array()
gbr[0]="http://IMEJ1.png"
gbr[1]="http://IMEJ2.png"
gbr[2]="http://IMEJ3.png"
gbr[3]="http://IMEJ4.png"
gbr[4]="http://IMEJ5.png"
var random=Math.floor(5*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + gbr[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>

5. Gantikan text / kod berwarna biru.

6. Save.

Sumber EasyBlogTricks.

READ MORE...

Memasang 'Side Fixed Menu'.

Blogspot

1. Sign in akaun blogger anda.

2. Pilih Layout --> Edit HTML.

3. Back Up Template anda dahulu untuk mengelakkan sebarang masalah.

4. Klik pada Expand Widget Template seperti screenshot di bawah ini.

Malaysia Blogger Hack

5. Cari kod ini.

]]></b:skin>

6. Copy kod di bawah dan letakkan di atas kod tadi.

#menulateral{
position:fixed; text-align:left;
/*Si la ubicación del menú no es la adecuada modifica los valores siguiente: */
margin-top:100px; margin-left:-28px; }
* html #menulateral{ /*para IE*/
position:absolute; }
#menulateral a img{
opacity:1; -moz-opacity:1;
filter:alpha(Opacity=100); }
#menulateral a:hover img{
opacity:0.8; -moz-opacity:0.8;
filter:alpha(Opacity=80);
position:relative;top:0px;left:2px; }
* html #menulateral a img{
filter:alpha(Opacity=100); }
#menulateral img{
margin-bottom: -5px; }
* html .menulateral{
margin-bottom: -3px; }

7. Cari kod ini.

<div id='content-wrapper'>

8. Copy kod di bawah dan letakkan di bawah kod tadi.

<div id='menulateral'>
<span>
<a href='http://syamzone.blogspot.com/' style='border:0;' title='Home'><img alt='Home' class='menulateral' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYH_JDDsAFNnUDT1TiUejEZp1OVBNs0T37f7B2u8oSgeqw5i4-qUlUs4pAjrkzsnYeLoCT_5_MxslV-xBaJiQnScaZoBzh3wdBwz4czfEATlwBPanN9o7LEpHGd513m0fScrGjmGio1RY/s1600/menu-lateral-inicio.png'/></a>
<br/><a href='http://syamzone.blogspot.com/search/label/?max-results=999' style='border:0;' title='Show All Posts'><img alt='Archivo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRztVWL8CO8POxdv4WgmJmnEa6SfzEzO34EaJ-KdO7ir4w6nOrSzKWCApAXwPo2NwSNiXGkZFB5PPiBruwQJVJzlw0Ib5TtMrMzbwR8PGXr3iXCv6c08PGd8hiD6JqQ0KjpQlMQHhvZ6k/s1600/menu-lateral-archivo.png'/></a>
<br/><a href='mailto:EMAILANDA@yahoo.com' style='border:0;' title='Subscribe By Email'><img alt='Subscribe By Email' class='menulateral' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7VJpp2OCazkXFxSTHt4wMS96_nxwI9Z3-gVBFioz9IQUcLhU_dvidO3djKMfmyWjWpM8npyut0b8l6IwFGGwDvG-35dxUCAydTrdXB9CeKbXdyd3h-jULtLjPZYHSVUaTrlmya4n9cTQ/s1600/menu-lateral-contacto.png'/></a>
<br/><a href='http://syamzone.blogspot.com/feeds/posts/default' rel='alternate' style='border:0;' title='Subscribe a post Feed' type='application/rss+xml'><img alt='Suscribe a post Feed' class='menulateral' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgukdW1x_OuqpdDQUPHBxbd_YidbcjSSzU4PjuWt3IPvIJKi_65_cEaU8DhFpDDXp1Vj0K0gjeyvkw3endZ30zXax3-2r06xxCWXRWl6Xyi3ss_a5X51BZUzj4_H32nB1U3LQ5Sikh1aow/s1600/menu-lateral-feed.png'/></a>
<br/><a href='http://syamzone.blogspot.com/feeds/comments/default' style='border:0;' title='Subscribe a comment Feed'><img alt='Suscribete a comment Feed' class='menulateral' src='http://i120.photobucket.com/albums/o190/jaloewig/jaloe/Menu%20Fixed/feed-icon-16x16b_BG_G.png'/></a> <br/><a href='#header' style='border:0;' title='Back to top'><img alt='Back to top&quot;' class='menulateral' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8eGpdD7nIeR5mmdfxtvo0FJEw3i-wyhTeqFpqDTHOknpPzTl3FoI0nquJTkRAUH7TRoGJLIbzITpbyGcmdvQe0cKYR28M3gr5aJFBbXL1IvIu5nNOBigv3y1AZpTqvfJ79EJVCqFJJW4/s1600/menu-lateral-arriba.png'/></a>
</span>
</div>

9. Gantikan text / kod berwarna biru.

10. Anda mungkin perlu mengubah kod berwarna merah margin-top:100px margin-left:-28px mengikut kesesuaian template.

11. Pilih Preview.

12.Sekiranya anda berpuas hati Save template.

Perhatian !!! Kod <div id='content-wrapper'> mungkin berbeza jadi cari kod yang seumpama dengannya.

Rujukan Jaloe

READ MORE...