Blogger Smasher | The Ultimate Portal for Blogger Tricks: Template

Template

Showing posts with label Template. Show all posts

Adding Special Effects in Blog Images

Masking is a brilliant way to make a picture of any type look more attractive. It ultimately became a favorite technique of me as I knew how to mask a image for the first time in photoshop. After a long journey in Adobe Photoshop, I came to blogger and I desired to mask a image in blogger too.
But for the few days I couldn't, but as the day passed on, I ultimately knew how to mask the picture easily in a blogger blog.
Being an excellent designer our job is to provide the best quality things, and mask technique also falls in it. I know that many of you guys may already know about it, but still wide range of bloggers fall in the group who are not aware of it. So i came up with this post.
But before see a LIVE DEMO of masking a image:

So what is your remarks for this. Probably the masked image is better than that of real image. So what are you waiting for. Lets know how to do it:

Go to dashboard>template>template designer.
Add the below CSS code in your blog.

.maskeffect { -webkit-mask-image: -webkit-gradient(radial, center center, 0, center center, 350, from(rgba(0,0,0,3)), to(rgba(0,0,0,0))); }

Apply to Blog and save it !

Now, it's turn to mask the pictures. For masking any pictures, just use these below codes;

<div class="maskeffect">
<img src="imageurl">
</div>

Replace "image url" with your image URL which you want to be masked.
Thanks for taking your time to read this post ! If you're having any difficulties regarding masking your blogger image, simply comment down below !
Thank you,
Blogger Smasher

Read Our Other Useful Posts;

Remove Powered By Blogger Attribution From Blogger

Blogger-how-tos Template

7 Comments

Hello guys, It's Nischal Again and today i'm going to show you how to remove powered by blogger attribution permanently from your blog.

Before many moments, I had written a post on removing the footer credit links from blogger templates. You can read that post here

Now, in this post, we will be discussing how to remove Powered By Blogger attribution from our blogger templates.

This attribution automatically comes if you upload a custom template for blogger and it looks too ugly. So, many bloggers are complaining this gadget to be removed.

I received a mail from an author about the way to remove the powered by blogger attribution. So, I shared this trick with you guys.

Follow my easy steps to get rid of this ugly gadget.

Steps to remove this attribution;

Go To Blogger Dashboard
Click On Template
Click On Edit HTML
Click Anywhere inside and Search For This Code using CTRL + F
Now, just before it, add this code;

<style>
#Attribution1 {
display: none;
</style>

Save Your Template
You are Done

Now, you will completely get rid of that ugly attribution. If you guys have any problems, comment and I shall be helping you.

Happy Blogging!!!!

Read Our Other Useful Posts;

Remove Footer Credit Links From Any Blogger Templates

Blogger-how-tos Template

81 Comments

Hello guys, I'm back again. I was busy somewhere else due to my studies so, I couldn't post for a long...
Umm... Never Mind. Today, we will be discussing on removing credit links from blogger.

Most of the default blogger templates looks ugly. So, most of us use custom blogger templates but there is a problem; the template creator writes their credit links in footer of blog. This makes us to be more rude. The blog is ours but the template creator writes their name in credits.

So today, I will reveal you the ways to remove the footer credit links from blogger.

You can see the picture of our blogger footer credit below;

Now, Let's Remove this ugly credit links;

Go To Blogger Dashboard >> Template >> Edit HTML

Click anywhere and Search For Designed By Using CTRL + F, If you can't find Designed By keyword, search For Template By Or similar word
You can see the following codes there;

Now, Just Before Designed By letter, copy and paste this code; <div style="visibility:hidden"> and at last, </div> after </a> like The Given Picture;

The Code should Be Like This;

<div style="visibility:hidden">Copyright (c) 2012 <a href="http://www.bloggingsentral.blogspot.com/" target="_blank" title="Blogger Templates">Blogging Sentral</a> by<a href="http://www.bloggingsentral.blogspot.com/" target="_blank" title="Blogger Templates"> Martin Gajurel</a></div>

Save The Template
You Are Done

If you have any queries then you can ask us via comments.
If you guys couldn't remove credits from any templates, you can send that template to;

nischalkhanal123@gmail.com

And I will remove credit links from there and will provide the template to you guys!

Happy Blogging!!!

Design Your Blogger Template

Template

5 Comments

After much time of the establishment of blogger, it had introduced blogger template designer. Now you can design your template yourself very easily using this amazing designer. It is very easy and smooth to use as well. You don't need to edit any sorts of codes. To use this template designer go to dashboard>template>customize.

Using this template designer one can easily uplift the taste of his/her blog. The settings which this designer allows are;

Change Your Blogger Template.
Change your Blog Background.
Adjust the width of various sections of your blog.
Access the layout page.
Add CSS codes directly.

So, I recommend my pupil to use this designer for improving their blog.

Thanks!

Using Post Title Instead Of Old And New Post

Blogger-how-tos Post Template

18 Comments

You might have see older post and newer post link at the below part of each blog post. They are the links to the post publish a step earlier and later. Actually most of the people don't pay much attention to it as they don't attract much visitors.
But by replacing the old post and new post text with their post titles, remaining the link same, we can attract much more visitors, as we've seen in Harry Potter where we're busy seeing the exploration of wonders of wizarding world!

This trick surely looks cool, isn't it. After all it's meant to be cool, hehe, just kidding. Now we shall move forward to accomplish this trick. Follow below;

1. Adding Jquery Code;

Before you implement this trick you will need to add a Jquery code. If you have already added this Jquery code while doing other blogger tricks then you don't need to add it again. Just skip it and go for next step. See below for how to add Jquery code;

Go to dashboard>Template>Edit Html.
Then in your template search for </head> tag and insert the below code just above </head>;

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

Now, save your template and go for next step.

2. Adding The JavaScript Code;

This trick is only possible because of Javascript. We will need to add it. Follow below;

Go to you template code;dashboard>Template>Edit Html.
Then find for </body> tag and paste the below code just above </body>.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){ 
var newerLink = $("a.blog-pager-newer-link").attr("href"); 
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() { 
var newerLinkTitle = $("a.blog-pager-newer-link").text(); 
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle); 
}); 
var olderLink = $("a.blog-pager-older-link").attr("href"); 
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() { 
var olderLinkTitle = $("a.blog-pager-older-link").text(); 
$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt 
}); 
}); 
//]]>
</script>

Now click on template and you are done.

3. Styling The Posts Links;

Sometimes it happens that your post name may be a bit more longer than usual, or you may like to change it's colour to suit your taste. If this is the case then;

Add the below CSS code to your blog;

#blog-pager-newer-link  {
font-size:85%;
width:220px;
background:#fafafa;
} 

#blog-pager-older-link {
font-size:85%;
width:220px;
background:#fafafa;
}

You can directly edit the CSS above. Adjust according to your need and save it.

I hope you guys have succeed in this.

Read Our Other Useful Posts;

Adding Auto Read More Link With Thumbnail

Blogger-how-tos Post Template

88 Comments

Adding Auto Read More Link With Thumbnail

Before some days I had published a post regarding blogger jump break feature. But many people had problems so I thought to provide my visitors with a more flexible auto read more link.

But first of all I would like to distinguish it from blogger page break. As we know that blogger jump break requires to be included in each post but auto read more link doesn't requires to place any code while editing your post.

And the most important feature which it has is that it also displays thumbnail which the default jump break doesn't. You just have to add a one time code in your template and you are done.

Just follow the steps below;

Go to dashboard>Template>Edit Html.
Click on Expand Widget's Template.
Then search for </head> tag in your template.
After finding this tag, you should copy the below code and paste it just after </head>;

<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){ 
 if(strx.indexOf("<")!=-1)
 {
  var s = strx.split("<"); 
  for(var i=0;i<s.length;i++){ 
   if(s[i].indexOf(">")!=-1){ 
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
   } 
  } 
  strx =  s.join(""); 
 }
 chop = (chop < strx.length-1) ? chop : strx.length-2; 
 while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
 strx = strx.substring(0,chop-1); 
 return strx+'...'; 
}

function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
 if(img.length>=1) { 
  imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
  summ = summary_img;
 }
 }
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script End -->

Now search for this piece of code; <data:post.body/>
After finding <data:post.body/> replace it with the below code;

<!-- Auto read more code Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more code End -->

Finally save your template and you are done.

Some Tweaks;

Here are some tweaks that you can perform in the code;

You may find <data:post.body/> twice or thrice. If it is the case than i strongly recommend you to choose the first one.
You can change the value of "img_thumb_height" and "img_thumb_width" to change the height and width of the thumbnail in pixels respectively.
You can edit the value of "summary_noimg" and "summary_img" to change the number of characters to appear when there is no image and when there is image respectively.
Change "Read more ..." with the text to appear as read more link. For eg:see more>>,get more>>,show more..,etc.

Now, you can see your auto read more link working perfectly in your site. I expect that you will get more improvements. BYE!

Some Best Blogger Templates Sites

Template

238 Comments

Hello friends. Last time I wrote about the way to change your default template to a more complex. But in that post many people did not got good templates.
I was quite amazed from my visitors. But even though I have written the solution. There are numerous sites which hosts free high quality templates. So, in this post we shall be discussing about the site which offers high quality and free blogger templates. I would be writing about only some of the common sites !

Btemplates.com

This is my favourite site when the term comes to blogger templates. It is a vast collection of numerous templates, (above 5000). Just select one suitable one from among these and keep it in your blog.

Besttheme.net

It is also a collection of professional templates both of blogger and wordpress. It is the site powered by CSS3 and Html5.

bestbloggertemplates.net

It is a giant collection of blogger templates and is searched highly. The author of this site is Paul Crown who also enjoys blogger.

deluxetemplates.net

Deluxe Template is the collection of Blogger Template which is simple, faster and highly customizable.

bloggermint.com

Blogger Mint is the site hosting all sorts of tutorials and Template.Even Sometimes I need to get there for discovering something new.

Allblogtools.com

All Blog Tools is the collection of blogger Templates same as the other ones, but the one with high defination.

Before you leave do you know other template hosting sites?

Changing Your Blogger Default Template

Blogger-how-tos Template

Add Comment

Blogger is a vast world. You can't cross it but only peep. There are many things why blogger has grown larger. And among these thing, a important one is template. A template is the style of your blog.

There are many templates available by default. But rather than this you will be also amazed to know that you can create your own template. Beside there are thousands of templates available and plenty of site also host blogger templates. These are called 3rd party templates. They are way more greater than blogger default templates which are meant for beginners. You can take an example of this site Blogger Smasher which also runs in a 3rd party template. So there have been many queries about changing the template. Today we shall be discussing how to change your blogger template. Just follow these steps;

STEP-I(Get A Template);
First you need to get a template before you upload it. Just search the internet for it and download a XML copy of the template. If the downloaded file is zipped just extract it and get the XML file.

STEP-II(Uploading Template);
Now, the turn comes to upload the template you downloaded before. Follow below steps;