Pages - Menu

Thursday 31 December 2009

Add Advanced Three Wrapper Widget in blogger

You have seen the three wrapper widget in many modified templates. It is very useful in blogging platform. You can add html and javascript gadgets like recent posts, recent articles, popular posts or whatever you like. It is better to add gadgets in sidebar. But it's more better to keep widget in bottom of the page.

As it is bottom of the page, readers can read your full article first and widget in last. Where widgets are not much important your post. See the following example:




You can add this widget by following the steps.

First Log in to Blogger.com

Go to Layout -> Edit Html Tabs.

Now search for these code:

   

   

   Paste your code here. And paste the below code as show above:






 
 
   


 
 

   
 


 









 
 
   


 
 

   
 


 









 
 
   


 
 

   
 


 






If you get some problems, you have to add the CSS code.

Now, find ]]>

Paste the following code before ]]>


#lower {
       margin:auto;
       padding: 0px 0px 20px 0px;
       width: 100%;
       background:#F6F6F6;
      
     
} 
#lower-wrapper {
       margin:auto;
       padding: 30px 0px 20px 0px;
       width: 960px;

}

#lowerbar-wrapper {
       border:1px solid #DEDEDE;
       background:#FFFFFF;
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
       overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


       .lowerbar {margin: 0; padding: 0;}
       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}


.lowerbar h2 {
       margin: 0px 0px 10px 0px;
       padding: 6px 0px 10px 6px;
       background: #7AA1C3;
       text-align: left;
       color:#FFF;
       font-weight: normal;
       font-size:16px;
}

.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}

.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px solid #ccc;
}

.lowerbar a {color:  #698CAB; text-decoration: none;}
.lowerbar a:hover {text-decoration: underline; color: #B5BFC9;}
.lowerbar a:visited {text-decoration: none; color: #B5BFC9;}

You can customize the CSS code as your like and Save The Template. And you're Done!



See in the layout section. You can find three new advanced 'Ad a Gadget'. Now add whatever you like!

View This Article / Download>>
Posted by at 00:10 0 comments
Labels: , , ,

Sunday 13 December 2009

Making Flash Website Using Free Service

 The flash sites are mostly used for advertisements and good for web developments training. Wix is the best site which provide to make free flash websites. It is better and great for the web developers who are searching for making flash website. You have not to edit the layouts and other sources, just it is easy and cool:) Click, Drag and Drop only. It is simply like blogger, but blogger is in Editing HTMLs composing text etc..etc... In Wix you have to put the text in main editing text. This service has other extra tools like making animations, behavior. effects Look at my flash site provided by Wix. http://www.wix.com/kayastha/Hack-Tutors  . Isn't it cool?



Easy to customize and easy to edit. Register in Wix with your account and you can see the create button on the main page. Simply choose a design theme as you like and click EDIT.

 You have to allow the pop-up to edit the theme. To enable pop-up got to Tools>> Options>> Un check Block pop-up windows. Or you can use exceptions also.




 And you can edit the theme which opens in pop-up. See something like this.


Use this free service as you like. As I say this is simply like blogger adding widget, text, Image..etc... But you cannot use external links. You have to remember this is a flash website.

To edit the text containing in main page, you have to double click the text which you want to edit.

Use other tools to make perfect flash site.

Using this full service you can develop your web design skills and makes you perfect in creating flash sites. Hope you will like this service.Share me if you know more service like this :)

View This Article / Download>>
Posted by at 03:28 0 comments
Labels:

Saturday 5 December 2009

Arrange your Comments Avatar with CSS in blogger

Showing the profile image in blogger comments is being popular now a day. But, it comes to have many problems based on CSS code. Many of them are searching for good CSS based codes. As I have got some problem like there is no extra place for profile image avatars. Look at the below screenshot.



 Playing with CSS and having some fun I have a trick for that. Now, look at this solved problem.

Isn't it cool? Of course it is:)

Now how to do it.
First of all Go to Blogger > Settings > Comments and enable “Show profile images on comment” as before.

In your blogger's Edit Html section search for the following code in CSS area.

    #comments-block
    width: 580px;
    float: left;
    padding: 0;
    margin: 0;
Search only #comments-block for easy (Press Ctrl+F). Now you have to customize that CSS. Change the width 580px to 545px (The width must have different according to your template) and float: left; to float: right; or you can change it's width according to your template.

Now go to Blogger Layout >Edit HTML and backup your template. Don't forget to check "Expand widget templates". And find the following code:


Or if you haven't find the above code, try to find this:


 And finally you found it? Ok then replace it with this.


Now again find this line in code: ( You can find this code easily press Ctrl+F)


And replace it with below codes.










Now Just Go to blogger edit/Html and find for ]]> tag and place the below css codes before it.
/* Avatar */
.avatar-image-container img {
background:url(http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=35);
width:35px;
height:35px;
}
Of course you can just edit the image link, height and width in above css codes as you like.

And save the template, you are Done! :) Look at my comments how it looks as better than before.
I hope your problem is solved like mine. If you have still some problem leave your comment I will try to solve it. Feel free to ask questions.

View This Article / Download>>
Posted by at 02:18 0 comments
Labels: , , ,

Saturday 28 November 2009

Warning: Do Not Turn your Blog to "DoFollow" Blog

“Do follow” is the opposite of “No-Follow”. Wordpress blogs, by default, use the HTML nofollow attribute on links that point away from the blog. This no follow attribute comes into play with the posting of blog comments. The no-follow tag tells the search engines NOT to follow the link to any other web sites. And I suggest you to don't turn your blog to Do Follow Blog. It will be really bad to your blog. Why to turn blog to "DoFollow" blog?
Removing rel="nofollow" will bring the bad flood to your blog SEO and your pagerank. After that you can't find your page indexed in google. Making a blog a dofollow badly divides your PageRank amongst all those who come to comment and leave a link to your site. It turns a blog into a spam spot because people will comment on your blog and spam respectively (non-stop). Not only that Yahoo and Live search, you can't even get them to index your site properly much less quickly. Search Engine Optimization (SEO) can't get you properly and none of you can find your post in Search Engine. I am experienced about it.

Now I am going to tell you my story. My previous blogs Get Blogger Tricks (I changed its domain to blogspotter.co.cc) crawler rate was high. When I post something in that blog, Google can crawl my posts in just less than 2 minutes(For the proof see this post). In that time my alexa rank was increasing tremendously. But now...It is so bad. Neither my blog url is in google nor my pagerank is saved. My blog is not indexed in Google Search. I lost lots of visitors from google and other source. It all happen because rel="nofollow" attribute was removed. I can't believe that removing just a attribute can create this type of flood.

Dofollow Social Bookmark services will  decrease your PageRank and you will loose traffic. So, do it or not at your own risk. I am just giving you a simple information.
Now I have changed my blog's url and name Get Blogger Tricks to BlogSpotter. I hope google will index my blog soon.
Note: It just happen to my blog or your blog also have same problem, I don't know. But I know that I can solve your problem as mine.

Upadted: My blog url is now listed search engine. Thank God!!! :) 


Also see this, google is crawling my blog faster and faster. Look at this.








My latest post Making Flash website using free service. I have check that post's URL immediately in google search after posting that article. It just takes a minute to crawl my blog. It is really cool. My crawler access is going faster.

View This Article / Download>>
Posted by at 22:23 0 comments
Labels: , ,

Friday 27 November 2009

Useful Windows 7 Sidebar Gadgets

Windows 7 , the  latest operating system by Microsoft, has been introduced with plenty of new features to take over its predecessors  Windows XP and Vista. Few previous features has been improvised to further strengthen Windows 7.
One such feature is Desktop Gadgets.  Gadgets are light-weight single-purpose applications that can sit on the user’s computer desktop to ensure higher usability. They are generally designed to do simple tasks, such as clocks, calendars, RSS notifiers or search tools and can be placed on the sidebar, on which they are automatically aligned.

Here is list of 6 most useful Windows 7 Sidebar Gadgets:
1. App Launcher:
aplauncher
You can add applications, folders or Local drives to the App Launcher by dragging and dropping or by using  settings.
Download App Launcher
2. Ultimate Search Explorer:
Ultimate Search Explorer
The Ultimate Explorer allows you to search different websites conveniently from your desktop in a single compact tool. You can search Amazon, Google, Digg, YouTube, Yahoo, Drugstore, The Pirate Bay, Wikipedia etc.
Download Ultimate Search Explorer
3. Media Player Gadget:
MediaPlayer
This ties into your Windows Media Player library and allows you to easily search it.  It also displays album artwork, track information and enables visualizations while playing a song.
Download Media Player Gadget
4. TweetZ:
tweetz-300x221
TweetZ is specially designed for Twitter users, as it work s like twitter client. You can tweet and reply by accessing your twitter account using this gadget. It includes  URL shortener that automatically shorten long links.
DownloadTweetZ
5. FB Explorer:
fbexplorer
If you are a Facebook addict then this is one is the best Gadget for your windows 7 desktop. With the help of FB Explorer you can check all the information about your Facebook account on your Windows 7 desktop.
Download FB Explorer
6. AdSensor:
windows-7-sidebar-gadget-application-google-adsense1
This  gadget is for Adsense users.  AdSensor shows your current AdSense earnings on your desktop and saving time from checking every time on website.
Download AdSensor

View This Article / Download>>
Posted by at 23:48 0 comments
Labels:

Friday 20 November 2009

Cool CSS Hacks For Blogger/Blogspot

I have posted Making more professional blogger blogs before this. I suggest you to play with CSS because it is one of the cool stuff to make blog professional and well manage. And today I am sharing you some cool & good looking CSS hacks for your blog. It helps you to have more professional:) So, let's try it.

Create a stunning 3D push button

Nowadays, we can see 3d push buttons nearly everywhere. Most of them are achieved via JavaScript. The main problem of using these scripts is that there are greater chances that they might get blocked by the browser. And with the advent of many ad blockers it has become a serious drawback. In this situation, the CSS comes to rescue. Thought we can’t create 3d push buttons as professional as created by using JavaScript, we can create a basic 3d push button with the help of CSS.



The main CSS commands you’ll need are:
    a.pushbut {

    color:#26a;
    display:block;
    border:1px solid;
    border-color:#aaa #000 #000 #aaa;
    text-decoration:none;
    width:8em; text-align:center;
    height:2em; line-height:2em;
    background:#fc0; font-weight:bold
    }
    a.pushbut:hover
    {
    color:#26a;
    background:#ffd633;
    position:relative;
    top:1px;
    left:1px;
    border-color:#000 #aaa #aaa #000
    }
These must be within