Thursday, December 31, 2009

Add Light Box Image


Greeting... this is my first 2010 year blogger tutorial. I feel very excited with this year because my feeling say that many good things will happen to me. Let's we start the year happily without thinking any bored things.  
Want to make your image stylish when you click on it, check this out!




Demo

Step 1 : Adding the Script

1. Find this </head> code.

2. Replace the </head> code with this code:


<link href='http://www.mydatanest.com/files/allblogtools/29603_izeup/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://www.mydatanest.com/files/allblogtools/29602_xemqf/lytebox.js' type='text/javascript'/>
</head>




Step 2 : Adding the CSS code

1. Use Crtl+F and search for this ]]></b:skin> tag.

2. Replace this ]]></b:skin> tag with this code:

.syafzpicbox {
display: block;
margin: 0px auto 10px;
text-align: center;
cursor: pointer;
cursor: hand;
width: 400px;
height: 324px;
}

]]></b:skin>

3. Click on the Save Template button.



Step 3 : Add the light box image in posts

This step will show how to add the light box image in your blog posts.

1. Make sure you use this code in where you want the Light Box Image to be appeared:


<div id='syafzpicbox'>
<a rel="lytebox" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="YOUR IMAGE URL"><img src="YOUR IMAGE URL" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>
</div>

2. Just replace the YOUR IMAGE URL with your own image url...

Enjoy them!

Please Leave a COMMENT

Award for friends here...

       When I open my eyes from sleep, I quickly get the laptop and quickly open my blog and friends. While blogwalking, have a cup of coffee. Visiting my friends who always on update everyday. Looking for something new to post. One of my best friends is Poter, who owned the poterpoenya.blogspot.com and a lot more.

        To all my friends who always support me in this blogging world, firstly, I want to thank you all because of being kind to me. Because of your kindness, I want to gave you all something that can be say special. I hope you all take this award from me. Just copy the code and paste it on your blog.

My Blog Award:





 To all my friends who didn't listed above, please tell me by leaving a comment on this post.


Multicolor effect when hovering on links in your blog




 



Hey, nice to meet all of you...2010 year is just an hour from now..
Now I will teach you how to make multicolor effect when hovering on links in your blog. Follow the easy steps below and you'll see the multicolor effects of the links in your blog

Demo 1  |  Demo 2

1. First, use Ctrl+F and search for this </head> code

2. Then, replace the </head> code with this code below:

<script type="text/javascript" src="http://www.sigmirror.com/files/49648_exral/multicolor_effect_by_syafzpic.txt"></script>
</head>

3. Done!

Add Tweet Me Button in your Blogger posts




 Hey, want to know how increase your connection with your blog readers? Check this out

1. Use Ctrl+F and search for this <data:post.body/> tag

2. Then, paste this code after the <data:post.body/> tag:

<a expr:href='"http://twitter.com/home?status=Reading " + data:post.title + " @syafiqzaimi " + data:post.url' title='Tweet it on Twitter'><img src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/twitter7gif.gif'/></a> 




Just replace the the red code, syafiqzaimi, with your twitter username... Enjoy it!

Tuesday, December 29, 2009

Put Related Post by Label with Thumbnail





#Step 1: Sign in to blogger using your blog ID.

#Step 2: Go to your Layout page and choose Edit HTML.










#Step 3: You must backup your template by clicking at the Download Full Templates.

#Step 4: To start editing your Templates, you must tick at the Expand Widget Templates.

#Step 5: Fing this </head> tag.

#Step 6: Paste this code before the </head> tag:




#Step 7: Find this code line:

<div class='post-footer-line post-footer-line-1'>

#Step 8: Paste this code after that code line:

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='#'>Related Posts with thumbnails for blogger</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=6;
var relatedpoststitle=&quot;Related Posts&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->



#Step 9: Save the template and Done!

Please leave your comment or suggestions...

Monday, December 28, 2009

Put Falling Leaves into Your Blog Page.

In the older post, I had posted about "Put Falling Snowflakes into Your Blog Page" and now I want to post something that related to it but it has a bit different. I want to tell you how to "Put Falling Leaves into Your Blog Page". If you feel intrested, you just need to read the whole post.




Steps to follow:

1: Log in to the blogger using your blog ID.

2: Go to the Layout > Page Elements. Click at the Add a Gadget.








3: Take the HTML/JavaScript at the Add a Gadget.



4: A content box will appeared in a small, new window.

5: Copy the code below:

<script language="JavaScript" src="http://www.sigmirror.com/files/49303_vndna/falling_leaves_script.txt">
</script>
 
6: Paste the code in the box.

7: You just need to SAVE IT.

Now, you can enjoy your Falling Leaves.

Put Falling Snowflakes into Your Blog Page




If you want to learn how to put falling snowflakes into your blog, you have come to the right time. To put falling snowflakes, you just need to read this post. Adding this falling snowflakes will make your blog cool and cold. It can also make your blog's visitors feel calm to see and visit your blog. Now, you must follow the below steps:  

1: Sign in to blogger. Go to your Layout page and choose the Page Elements.







 2: Click at the Add a Gadget and take HTML/JavaScript.







3: A small window will appeared and there will be a content box.

4: Copy and paste the code below into the content box appeared.

<script language="JavaScript" src="http://www.sigmirror.com/files/49304_agqc2/falling_snowflakes.txt">
</script>

5: Save it.

Now, the work is DONE. You can view your blog now.

Upin & Ipin Widget for all



Upin & Ipin is an animation cartoon series made by Les'Copaque Production House.  Upin & Ipin are  5 years old twins. They are so funny.... Let's not talk too long and we just go straight to our main topic "Upin & Ipin Widget". This widget is very creative. Do you want your house (blog) is decorated with this widget? If you want this widget in your blog, you just need to follow the steps below. Through the 5  easy, simple steps below, you will see the result in your blog.

Step 1: Login to blogger with your ID.

Step 2: Go to your Edit HTML at the Layout.













Step 3: Use Ctrl+F to find this </body> tag.

Step 4: Right before the </body> tag, you must paste the code below:

<script language="JavaScript" src="http://adiwidget.com/js/adiWidget.js" type="text/javascript"></script><script language="JavaScript" type="text/javascript">eXl1lXc('http://adiwidget.com/flash/atuk.swf','top','0px','left','0px','100001','95','170','transparent','ffffff');</script> 




Step 5: Click at the SAVE TEMPLATE and it is DONE!!

You can see the Upin & Ipin widget at your blog now.

Please LEAVE A COMMENT!!

Sunday, December 27, 2009

Cute Bouncing Bookmark Icon


Have you put this type of things on your blog?
If you did not put it yet, I suggest you to use it now! Make your blog more perfect with it. After this you can share your post easily with  Twitter, Facebook, StumleUpon, Digg and Del.icio.us. The icon will be bounce when you mouse over at the icon. Follow the steps below and enjoy it!


Step 1: Find this </head> tag

Step 2: Paste this code before this </head> tag

<!--Bounce icon bookmark end here-->
<link href='http://www.sigmirror.com/files/49026_ox7kn/bounce%20icon%20bookmark.css' media='all' rel='stylesheet' type='text/css'/>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script src='http://www.sigmirror.com/files/49024_khzo0/bounce%20icon%20bookmark.txt' type='text/javascript'/>
<!--Bounce icon bookmark end here-->



Step 3: Find this <data:post.body/> tag



Step 4: Paste this code after the <data:post.body/> tag

<!--Bounce icon bookmark start here--><br/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center>
<ul id='nav-shadow'>

<li class='button-color-1'><a expr:href='&quot;http://twitter.com/home/?status=Currently reading-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank' title='Tweet This Post'/></li>

<li class='button-color-2'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='button-color-3'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='button-color-4'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='button-color-5'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>
</center>
</b:if>
<!--Bounce icon bookmark end here-->



Step 5: Now Save your template...

Enjoyed it! 


-------------------------------------------------------------------------------------------------------------------

Update!

If u want to put the twitter and facebook only, u just delete the other codes...

SOCIAL BOOKMARK CODE
For Twitter:
<li class='button-color-1'><a expr:href='&quot;http://twitter.com/home/?status=Currently reading-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank' title='Tweet This Post'/></li>

For StumbleUpon:
<li class='button-color-2'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

For Facebook:
<li class='button-color-3'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

For Digg:
<li class='button-color-4'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

For Del.icio.us:
<li class='button-color-5'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>



Just paste the social bookmark code inside the code:


<!--Bounce icon bookmark start here--><br/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center>
<ul id='nav-shadow'>

 PUT THE SOCIAL BOOKMARKS CODE HERE

</ul>
</center>
</b:if>
<!--Bounce icon bookmark end here-->



If you have any question or suggestion, please leave your comment... Thank You

Saturday, December 26, 2009

Nice Social Bookmarks Icon




Many bloggers have put social bookmarks in their blogs. For the blogger who haven't use it, please follow the easy steps below. This social bookmarks will be located below your post. Through the steps below you'll be able to bookmark your post easily...

Step 1: You must sign to blogger. You go to Layout and take the Edit HTML.

Step 2: You tick at the Expand Widget Template.

Step 3: Find this <data:post.body/> tag

Step 4: Paste this code after the <data:post.body/> tag

<!--nice social bookmarks icons start here-->
<b:if cond='data:blog.pageType == "item"'>
<!--Digg-->
<script type='text/javascript'>digg_url=&quot;<data:post.url/>&quot;;</script><script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
<!--Stumble-->
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/stumbleupon_32.png'/></a>
<!--Delicious-->
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/delicious_32.png'/></a>
<!--Technorati-->
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/technorati_32.png'/></a>
<!--Twitter-->
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/twitter_32.png'/></a>
<!--Facebook-->
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/facebook_32.png'/></a>
</b:if>
<!--nice social bookmarks icons end-->


Step 4: Save your template

Smiley for Comments




Today is a nice day and I've something special to tell you...
From this post, you'll be able to put smileys in your comment box.
Enjoy the easy steps!


#Step 1: You must sign to blogger. You go to Layout and take the Edit HTML.

#Step 2: You tick at the Expand Widget Template.

#Step 3: Use Ctrl+F to find the code below:

Code:
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>


#Step 4: Paste this code between the two lines code above.



#Step 5: Find this </head> tag

#Step 6: Add this code before the </head> tag

<script src='http://www.sigmirror.com/files/49022_rcu7z/smiley.txt' type='text/javascript'/><noscript><span style='font-size: x-small;'>Add Smilies</span></noscript> 

Step 7: Save your template

Friday, December 25, 2009

Add Images Gallery Widget With jQuery Hover


If want your blog look attractive, I think you should try this. This thing is very useful for you.It is the best way for you to show your photo or images to your readers. With this post, you will be glad to have your own images gallery. Follow the 10 steps below and you will be amazed!




#Step 1: You must sign in to blogger. Go to your layout and click at the Edit HTML.

#Step 2: Tick at the Expand widget template.

#Step 3: Use Ctrl+F to find this code.

Code: ]]></b:skin>


#Step 4: Paste the code below before ]]></b:skin>.

/* Blogger Zoom Gallery By AllBlogTools.com */
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;  /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeGAX6FW39LNnJe3bEFsS7D6DSni78nAGunM3nzeig7xWEoRV3THF_hE3JhAOrypXCy_qkJVJqTPb00cLcoBM3Wk0itUyHyM5O5viEcTkN8UofUaoBh9mehKgUImny6k5YgfjurDZddk6R/) no-repeat center center;  /* Image used as background on hover effect
border: none; /* Get rid of border on hover */


#Step 5: You must use Ctrl+F again but this time you must find the tag below:

</head>


#Step 6: After you had found the </head> tag, you must paste this code before it.

<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false;
});

});
</script>


#Step 7: Click at the Save template. Now, we have done editing the template. Just a few steps left.

#Step 8: After that, you need to go to your Page Elements at the Layout. Click at the Add a Gadget and choose HTML/JavaScript.

#Step 9: Paste the code below in the box appeared. Don't forget to put the title of your image gallery.

<ul class="thumb">
<li><a href="#"><img src="picture 1 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 2 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 3 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 4 Link" alt="" /></a></li>
</ul>


#Memo: Change the picture 1 Link in the code above with your Image Link Location and so do picture 2
Link and such as that.

     : To make the image goes to another url, you just need to replace the # with the target url. 

     : If you want to add more image, you just need to repeat the code below and paste it.

Code = <li><a href="URL 1 #"><img src="picture 1 Link" alt="" /></a></li>


#Step 10: You just need to save it and the work is Done!!

Thursday, December 24, 2009

Add Snow Effect in your blog




Wow...Have you know yet that we can customize our blog with snow effect. This snow effect will make your blog look very beautiful and trendy. It is very suitable for this season since this is Christmas season. Without snow, there will be Christmas (Western Style). This snow effect is suitable to be used by dark template. This is because snow with dark template will make a beautiful scenery of the blog. You can see the picture above. The picture is an example of one of the dark template and when they are compounded with the snow, they will look very-very gorgeous. If you want to add snow effect in your blog, follow the steps below...

Follow the steps below:


#Step 1: Copy the code below:

<script src="http://snow-effect.googlecode.com/files/snow.js" type="text/javascript">


#Step 2: Go to Page Elements at the Layout and click Add a Gadget.

#Step 3: You must choose HTML/JavaScript.

#Step 4: Paste the code that had been copied just now.

#Step 5: You just need to save it and you will see the snow effect in your trendy blog.

Please leave this post with your comment.


Wednesday, December 23, 2009

How to delete comment in our own Shoutmix Chatbox?




When I was checking all of my comments, I found a comment from a blogger.In the comment, he asked me "How to delete comment in our own shoutmix chatbox? He also asked me whether I know or not. He had gave me the comment on October 28, 2009. Do you know that we can delete comment in our own Shoutmix chatbox? I bet plenty of you did not know yet? If you want to learn how to delete comment in our own Shoutmix chatbox, follow the steps below.



Steps to delete comment in our own shoutmix chatbox.


Step 1: You must go to www.shoutmix.com.

Step 2: You need to log in using your Shoutbox ID and password. To sign in, you must click at the login at the menu bar.



Step 3: After you had fill the blank below and click at the login button,you will directly go to your Shoutmix-Settings.



Step 4: To start delete the comment in the Shoutmix, you must go to your shoutbox and click at the Delete button.



Step 5: After that, the message or comment in your shoutbox will disappeared.


Done!! Don't forget to leave this post a comment...

Wednesday, December 9, 2009

Make Image Slider for Blogger


image-slider

Customize your blog to become more better than usual by adding Image Slider. The slider can make your blog trendy and stylish. This Image Slider also can make the visitors who come to your blog feel very attractive as it is one of the famous fashion for the blogger(blog). I bet you all will like this things after you make your own Image Slider after you follow the steps below.


1. Use Ctrl+F to find the </head> code.

2. Paste this code below the </head> code:




3. Then find this ]]></b:skin> code

4. Paste this code above the  ]]></b:skin>  code:




5. Then, click Add a gadget at the Page Elements and choose HTML/JavaScript

6. And add this code in it:

<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">

<!-- Picture 1 -->
<div class="panel">
<a href="http://www.blogging-style.blogspot.com" target="blank" title="Blogging-style"> <img width="160" alt="Blogging-style" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn-y_OIjOQyLRLb1ImgZsOXnZI0XSswLeFvDjS8CLsbaHu6bfiEIVzmMxpVwG1DIvkA73zlQfhAFHvvl4xieR0vP_GXPg20I6Lp0ajuwIjOQDKZo-W8f9T_L1GX_Nk5scWw-OTW5NTlYY/s400/newtwocolumndenimtemplate.jpg" height="110"/> </a>
</div>
<!-- Picture 1 end -->

<!-- Picture 2 -->
<div class="panel">
<a href="http://www.blogging-style.blogspot.com" target="blank" title="Blogging-style"> <img width="160" alt="Blogging-style" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl3vO5qgK1AhQGqzyz-p-75fFVBo5dO2O4-8IDXcCqFaAtZTwVremYFNAPaiGJuVGD-dZsEe_adCEhA-eeAWUFMT8DEYaYyMMnHeu5f82Zs9IIX77DUQSi7ZROgO4vKJzAie09FC0J3Mg/s400/simple+Blog+Template.png" height="110"/> </a>
</div>
<!-- Picture 2 end -->

<!-- Picture 3 -->
<div class="panel">
<a href="http://www.blogging-style.blogspot.com" target="blank" title="Blogging-style"> <img width="160" alt="Blogging-style" src="http://img2.pict.com/91/27/d5/ad3dbaa7835b554ec0d06a4e0c/XG7ZL/800/woork2520257c2520web2520design25.png" height="110"/> </a>
</div>
<!-- Picture 3 end -->

<!-- Picture 4 -->
<div class="panel">
<a href="http://www.blogging-style.blogspot.com" target="blank" title="Blogging-style"> <img width="160" alt="Blogging-style" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5WB76x3CEoAyg8MPTEWZAA_QfAUFZ7QmLDnD_0zpNhs5bK1HP3ctKqB3szz170RQKIo_osXp0R67Oy63SBVSzP7qcQDKOCbfFw4CA-HIs5MmqDaSN72u28l_dRVbg_fPKTwKM244ggpg/s400/Preview.jpg" height="110"/> </a>
</div>
<!-- Picture 4 end -->

<!-- Picture 5 -->
<div class="panel">
<a href="http://www.blogging-style.blogspot.com" target="blank" title="Blogging-style"> <img width="160" alt="Blogging-style" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5WB76x3CEoAyg8MPTEWZAA_QfAUFZ7QmLDnD_0zpNhs5bK1HP3ctKqB3szz170RQKIo_osXp0R67Oy63SBVSzP7qcQDKOCbfFw4CA-HIs5MmqDaSN72u28l_dRVbg_fPKTwKM244ggpg/s400/Preview.jpg" height="110"/> </a>
</div>
<!-- Picture 5 end -->

</div></div></div>



Change the links, images url, the titles with yours...
  • Links = Red colour
  • Image url = Yellow colour
  • Titles = Blue colour
You just keep on adding links to in this format to any number you want as you can add thousand of images and posts in this format, no limit to it.

Please leave your comments on this post...

Tuesday, December 8, 2009

Put Recent Post with Thumbnail

Recent post with thumbnail



Wow!! What a special tips for you all today. Have you know how to put recent post with thumbnail in our blog. I bet you only know how to put recent post without thumbnail. you do not need to use recent post without thumbnail bacause I have something better than that. Recent post with thumbnail allow you to see the image of the post. It is very-very great and good. Below are steps to put recent post with thumbnail into your blog. 


1. First, click 'Add a gadget' at the 'Page Elements' and choose 'HTML/JavaScript'

2. Then, copy this code and paste in the 'HTML/JavaScript' box

 


3. Third, click the save button. Finished

Easy Coding

  • boxwidth - Width of the widget
  • cellspacing - Space between cells (default one is good)
  • borderColor - Border color (add the background color of your template to perfectly blend it in the template)
  • thumbwidth & thumbheight - Width and Height of the thumbnail (default are good)
  • fntsize - Font size of the title
  • acolor - Color of the title
  • numposts - How many posts you want to show?
  • home_page : http://www.blogging-style.blogspot.com/ (change this with your blog url)  
Please leave me a comment

How to Create Image Hover Effect in Your Blog?

We meet again bloggers. Today I have something that I want to share with you all. This thing is good for the bloggers who have blogs about art and anything else. After this, you will be able to create image hover effect in your blogger. Ohio!  Hey, talking about it, want to know how to create image hover effect In your Blogger? As usual, you just need to follow the steps below and you will get the result.





!!Check this out!!


#Step 1:
- Go to Layout Edit HTML

#Step 2:
- Use Ctrl+F and find this </head> code.

#Step 3:
- Then, put these codes before the </head> code:.





#Step 4:
- Save your template...

# Step 5:
- Now, you should put this code in every post that you want the Image Hover Effect to appear...


DONE!!


Tips to choose a Template for a blog.

Hey guys, are you bored of your blog template and want to change it. Make your blog template better and more stylish. Blogger will take such a lot of time to choose for a template for the blog. I also take such a lot of time to do so. To change the template, you also need some tips to bring along with you so your template will be the best choosen one.

Place of templates
We must know where to find for the best template. This is because, different places have different templates. We can find such a lot of good templates at the  btemplates.com. I suggested you to take template at the btemplate.com. This is because a lot of bloggers like btemplate.com very much. They can find a lot and good templates there.  It's all up to you. There are a lot more places so choose for the best one that you like.


What type of blog do we have??
Next, you must know what type of blog do you have. If you have a blog about art, you must choose a template that related to art and if you have a blog about music, you must choose a template that related to music. It is very-very simple. Am I right again readers??

The Highest Comment 
If you want your blog readers feel attractive to your blog , you must know with one of the template is most liked by the people. For example, you must choose for the most commented template. This is because more comment, more popular. This is also because the highest comment have high attractive. People will comment if they feel very attractive to something.

Take A Look First
If you find template that you like, you must make sure that you have take a look first by see it using Live Demo. Although in small preview look elegant and stylish, it cannot guarantee that the template is beautiful. What I mean is, a lot of templates look beautiful when we just look them in small preview but when we take a live demo on them, they will look very chunky.   


Example templates according to their categories 

((=Photo=))
 


((=Music=))


((=Art=))



You can get the templates above at btemplates.com

After you had finished searching for a template for your blog using the tips above,you must download it into your computer. After that, you must upload it to your blog. As you had finished uploaded the template, the work is !!DONE!! 

Please Leave Me A Comment!!!

Bad vs Good of Blogwalking

Although blogwalking can give us a lot of benefits, there are also bad about it. From this post, I will discuss with you all (blog readers) about bad and good of blogwalking. People always say that blogwalking is a good activity for blogger but did they know behind the good there are also bad.I am not joking but I am telling the truth. I admit that blogwalking is good and can give us a lot of benefit.

Here Are Percentage for good and bad of blogwalking!!




MEMO:
Blue: Brings Good
Yellow: Brings Bad

The different percentage of good and bad are 20% so be careful. Although the percentage for good more than bad, that not mean that you were in good condition.You all don't be worry because blogwalking

BAD and GOOD BENEFIT of blogwalking.Let's see at below...

Good benefit of blogwalking
1: Can Find A lot of friends(visitors).
2: Can find more ideas and experience.
3: Can promote our blog.
4:Can read on new things.
5:Can make a lot of followers.
6: Can increase blog rank.


Bad benefit of blogwalking
  1. Wasting time.
  2. Can fill the time with posting on new things.
  3. If we does know that we had made wrong on blogwalking such as spam, we will easily banned.
  4. Make our fingers feel tired.

There goes some tips for today. If you take decision to stay blogwalking be careful from be banned.I also like blogwalking very much.I understand if you like blogwalking.It's all up to you.


!!ATTENTION!!

Please leave me a comment.

Monday, December 7, 2009

Put Recent Comment in your blog now!!



Hey you guys, do you want your reader know your newly comment.Hahaha..It is easy as ABC.People will know if your post had be commented by someone by looking at The Recent Comment that we had put in our blog.After you read this article, you will be able to show your recent comment in the blog. To start having your recent comment, you must follow the steps below..Let's go for it........................

Step 1:
You must log in and go to your blog Dashboard.

Step 2:
You go to your Layout--Page Elements and click at the Add a Gadget.





Step 3:
At the Add a Gadget, you choose HTML/JavaScript.

Step 4:
Copy the code below and paste them on it(HTML/JavaScript box).

<script style="text/javascript" src="http://anas.ku93.googlepages.com/comments.js"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="blog url here/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

You must change the Highlighted code with your blog url.
Example:

http://blogging-style.blogspot.com

One more thing that I want to tell you. Number 5 in the code are number of latest comment.


Step 5: You must save it and the work is done.Very Very Easy...


PEOPLE WHO READ THIS ARTICLE PLEASE LEAVE A COMMENT!!



How To Make A Banner?


Plenty of the blogger like BLOGWALKING very much..When they come to your blog, they will ask you to EXCHANGE LINK with them..Some of the junior blogger do not know what is EXCHANGE LINK but not for the senior bloggers who had a lot of experience in blogging world. Exchange link mean that we give our link to them and they give their link to us.In other mean, we give our banners and take theirs.


WHAT IS BANNER??
Banner is divided into two use.It is either a graphic image that show the name or the identity of our site. It is also called advertising image..If they click our banner in other bloggers' blogs..It will directly goes to our blog since banner is our link...It is very good for the junior bloggers to promote their blog.


HOW TO MAKE A BANNER???
Since you have know what is banner, I will tell how to make it???Follow the steps below and you will have your own banner..


Step 1: You must find an image that you want to make it as a banner.It is either a JPG, GIF or TIFF image type.

Step 2: To make work easier, you must sign up into a web album.You can sign up with photobucket.com or picasa.


Step3: Make sure you had uploaded the image that you want to make it as a banner into one of the web album that you had already sign up.

Step 4: You go to the image that had been uploaded and make a right click on the image.To get the image url, click at the Copy Image Location.SEE THE EXAMPLE BELOW:
 


My URL image for the link banner:http://i625.photobucket.com/albums/tt337/syafzpic/syarhan/syazchess-banner.png.


Step 5: Paste the image URL in the Notepad.Now, you got your image for the link banner but how to make it open our blog when we click at it.

            HOW TO MAKE THE IMAGE  OPEN OUR BLOG WHEN WE CLICK AT IT??

Example:
= Your Blog URL : http://blogging-style.blogspot.com
= Your Image URL : http://i625.photobucket.com/albums/tt337/syafzpic/syarhan/syazchess-  banner.png


ATTENTION!!
You must change the Yellow Highlighted Text with your image URL and blog URL.

<a href ="blog url/" target="_blank"> <img src=" banner image url" target="_blank"/>

Now we have know how to make a banner but how to make a code box so that the bloggers who come to our blog can take our banner code to be put in their blogs.  


To make a banner code box just like the diagram above, you just need to add

<textarea rows="3" cols="23" name="code">

at the front of your link banner code and at the end of the link banner code, you must add

</textarea>


AND the result will be like this

<textarea rows="3" cols="23" name="code">
<a href ="blog url/" target="_blank"> <img src=" banner image url" target="_blank"/>
</textarea>


Done!! Hope you all will successed..If there is any problem, you just need to leave a comment for this post.

How to put Top Commenter in the blog?

In the older post, I had wrote about how to put top post in the blog and today I want to wrote about how to put top commenter in the blog.Both of them look familiar.Am I right?By addding this top comment, you will be able to see the visitors who give the highest number of comment to your blog.To start having your own top comment,follow the steps below.Let's go for it. 

Step 1:
You must log in to blogger as usual.

 Step 2:
You must go to Layout--Page Element.Click at the Add a Gadget.


Step 3:
You must click at the HTML/JavaScript.

Step 4:
Copy and paste the code below in HTML/JavaScript


<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
if(obj.value.items[i].link == "")
var item ="<li>" + obj.value.items[i].title + "</li>";
else
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a55cb97ebb368bb1b89b7f6bdeb35336&url=http%3A%2F%2Fblog name.blogspot.com&num=10&filter=The name of commenter that you don't want at the top commenter" type="text/javascript"></script>



!!ATTENTION!!
You must change the blog name in the code text with your blog name without put http://. You can change the  
The name of commenter that you don't want at the top commenter   with your name.What I mean is,if you had also commented your post,you can put your name so the visitors cannot see your name in the top commenter.

Step 5: You must save it.
 DONE.

Hope you will successed.


PLEASE LEAVE A COMMENT ON THIS POST> 

 

 

Blogger Tips and Style Copyright © 2009 Community is Designed by Free Blogger Template