Blogger Archives - Page 5 of 10

Category: Blogger

Highlight Author Comment in Blogspot

This trick is to give a Highlight Author Comment . This will make the blogs owner and authors comments looks different from the visitors comments. It’s very useful and interesting blogger hack tips. You can see the example in my blog. Here is what to do to make a “Highlight Author Comment” effect in Blogspot.

Login to blogger, then choose “Design –> Edit HTML”. Don’t forget to backup your template first.
Check the “Expand Widget Templates” box.

Copy this script and put it before ]]></b:skin> or copy to your CSS area.

.comment-body-author {
background: #E6E6E6;<span style="color: red;"> /* Background color*/</span>
color: #000; <span style="color: red;">/* Text color*/</span>
border-top: 1px dotted #223344;
border-bottom: 1px dotted #223344;
border-left: 1px dotted #223344;
border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px; <span style="color: red;">/* Position*/</span>
}

Then Find this Code
<dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p><data:comment.body/></p> </b:if> </dd>
<dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p><data:comment.body/></p> </b:if> </dd>

Then Replace the above code with the below code

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>

Then Preview and Save your Template.

Random post with Summary widget for blogger

Hi to all you might have seen my previous Random Post widget but it was good this widget i have made has a facility to display the summary of that random post. why to display summary when the visitors visit your blog you might have not have an attractive title but your content is Rich but the earlier Random Post Only shows the title it results in loss of visitors.Again i have made it easy for all of you to install this widget.
Just Fill the Below form and enjoy your widget.

If you wish to show only title in recent post widget then use the earlier widget by clicking here.

Top 5 Jquery Slide Gallery

Do you have minimal traffic from your website or blogsite? Is it too plain you wish you could afford to hire web developers and graphic artists to achieve the getting high standard of Internet users and clients?

You need no expertise to achieve that standard. So i gathered the simplified but best and user friendly JQuery to suit your needs and to give hype for your business and personal portfolios to help you maximize your traffic.

SLIDEDECK for WordPress

Though this Slide Jquery Gallery requires more time and effort to have that professional look of your blog or website, this slide deck will give the impression of PERFECTIONISM driving to marketing and advertising strategy. For its free? there is no room for second thoughts of having this and change your life for real.

YOXVIEW

Aside from its ability to beautify your gallery, it is also capable of embedding your videos. Don’t you think its great to have that creative look in your site? Though i do not advice for business or e-commerce sectors to have this to present your gallery and advertising portfolios.

TRANSPARENT SLIDE GALLERY | tutorial

This is open for Blogger and WordPress users. It has the simplest and easiest to understand tutorial among jqueries i used. It has automatic slide so i suggest to add more pictures to maximize the slideshow.

SLIDE SHOW JQUERY | tutorial

I personally like it for your client testimonials. Lets put different strategy to your website. The idea of giving your clients to be heard is a win-win advertisement. The logic? “you value your clients, and your service will speak for it”.

JC FLASH PLAYLIST

It has 3 categories to choose from. The best thing about this Flash playlist, it is 100% FREE. Its like a touch screen, automatically move up and down when you point your cursor to the list. It has quite delay if you have too much pictures loaded in the playlist so have a separate gallery for best views of your work.

If you are familiar with Flash, this one is for you.

Now, doze off to your dashboard and change your blog into more inviting and fun to read. Having second thought? i bet not. On a positive note, for blogger users, they can maximize or minimize the size of their slide. check out tutorials to learn more about the products.

For FREE inquiries for your creative and professional web design,
email riteshhanap@gmail.com.
For FREE inquiries for advertising and marketing strategies for small business websites, email kumi.atienza@gmail.com.

Trily – Blogger Template

In my previous post I have told all of you that i m converting a wordpress template to blogger . and yes today its ready to be published in front of you this little but sweet template is named as trily its a magazine style template with fixed pages its widgetize and has cool looks its really a template that all of us should use, it has two navigation bar.

Clean Layout :

Comment Style :

Screen shot of template :

Live Preview : Click Here
Download : Click Here

Automatic Read More Hack with fixed pages

After a long time the most awaited Blogger feature called static pages or stand alone pages has been launched in drafts . But it has some issues with automatic expandable summaries read more trick for blogspot. With this new code you can minimize your blogger posts so that only some of your description and image appears on the homepage and the rest of all is shown when you visit that post or static page.
you might have familiar with earlier read more hack.

Just Follow this simple steps :

First log in to your blogger account.
Then click on Design Link.
Then Click on Edit HTML.
Check Expand widget content.
Then Search for below code :
</head>

Add the below code before </head> :

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 430;
summary_img = 300;
img_thumb_height = 130;
img_thumb_width = 160;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTagundefinedstrx,chop){
ifundefinedstrx.indexOfundefined"<")!=-1)
{
var s = strx.splitundefined"<");
forundefinedvar i=0;i<s.length;i++){
ifundefineds[i].indexOfundefined">")!=-1){
s[i] = s[i].substringundefineds[i].indexOfundefined">")+1,s[i].length);
}
}
strx = s.joinundefined"");
}
chop = undefinedchop < strx.length-1) ? chop : strx.length-2;
whileundefinedstrx.charAtundefinedchop-1)!=' ' && strx.indexOfundefined' ',chop)!=-1) chop++;
strx = strx.substringundefined0,chop-1);
return strx+'...';
}
function createSummaryAndThumbundefinedpID){
var div = document.getElementByIdundefinedpID);
var imgtag = "";
var img = div.getElementsByTagNameundefined"img");
var summ = summary_noimg;
ifundefinedimg.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTagundefineddiv.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Then Find this <data:post.body/>

Then Replace <data:post.body/> with the below code :

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><b:else/> <b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumbundefined&quot;summary<data:post.id/>&quot;);
</script> <span class='rmlink' style='float:right;padding-top:10px;'><a expr:href='data:post.url'><img src='http://i37.tinypic.com/351icqx.jpg'/></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if><b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Then Click on Preview if no error occurs then just click on save.

Customization :

Now let us see how to customize the code to suit your style :

summary_noimg = 500 ;

This code will decide how much characters must be shown in the post if that post doesn’t contain any images. I have selected 500 characters.. you can customize it to suit ur template.

summary_img = 400 ;

If the post contains image , then this code will decide how many characters must be shown in that post. Change the number of characters to be shown to suit your template.

img_thumb_height = 130;

This tag decides the height of the thumbnail to be shown in the post. Vary the number 130 to suit your template.

img_thumb_width = 281 ;

This tag decides the width of the Thumbnail image to be shown

Changing Read More Image :

1. Find this :

http://i37.tinypic.com/351icqx.jpg

2. Change it to your desired image you want.

Having Text Instead Image :
1. Find this :

<img src=’http://i37.tinypic.com/351icqx.jpg’/>

2. And Replace it with the desired text you want to use.

How to add Attribution widget in blogger

In my previous post I told all of you that their is a new blogger widget name Attribution. As this new widget has come of our visitor named Khaled . wanted to put this widget on his blog. so he contacted through comment.If you also want anything you can do it. So now lets come to the point of to add this widget . Adding this widget is too simple .

Just Follow this simple steps :

Log in to your blogger account.
Click on the Design link.
Click on Edit HTML.
Then go to your sidebar or footer were you want to add this widget.
Their add the below code before </b:section>
<b:widget id=’Attribution1′ locked=’false’ title=” type=’Attribution’/>
Then preview it and if its ok then save it.
Then you are done.

Note if the above code doesnt work then try with below code :

<b:widget id=’Attribution1′ locked=’false’ title=” type=’Attribution’>
<b:includable id=’main’>
<div class=’widget-content’ style=’text-align: center;’>
<b:if cond=’data:attribution != ""’>
<data:attribution/>
</b:if>
</div>

<b:include name=’quickedit’/>
</b:includable>
</b:widget>
</b:section>

If you like this post then please share it with your friends and help us to grow and don’t forget to subscribe us.

Attribution : New Blogger Widget

As Now a days blogger is upgrading with all new stuffs . for the bloggers who use blogger. always while using blogger many people want their site to look professional . So they don’t put the word “by powered by blogger” because blogger is simple and some people feels ashamed while using because of it cheapness and Simple stuff. Like not have much powerful control like wordpress platform. So to get rid of all this problems and to increase bloggers rating or to bring it more in-front blogger made a new widget which is not yet launched officially . Its Name is “Attribution” the widget puts an simple text of powered by Blogger . This Widget can also be used to write our copy rights or disclaimer without going in the Edit HTML page.

Screen shots :

1. The Main Preview (The Preview of the widget appeared in the template):

2. Page Layout (widget appeared in Page Layout) :

3. Widget Page (The page when we click on the Edit Link of the Widget) :

How I found this widget ?
It was just a little coincident that we met each other. I was converting a new blogger template to share with all of you. After creating the blog i went to page layout and then pick template section. after picking an Minima template. I returned back to page layout page and then i found it their.

Dont Worry friends the template which i m converting is completed and i will share it with you tomorrow