Showing posts with label Blog Tricks. Show all posts
Showing posts with label Blog Tricks. Show all posts

Need to earn money and don't want to add banners because there is no space for Ads and having trouble to get AdSense or BuySellAds then this is where Infolinks come. Infolinks is a Text Advertising Network that will pay you for per click on the links or ads on a blog/website. Infolinks ads help publishers earn money from advertising on content they're already developing for their site.

AWeber Communications is a service provider of email marketing software.

As of April 2011, the company claims to serve over 100,000 customers globally. Primary AWeber features include email newsletters, autoresponders, and converting RSS to email.

Scrollbar is one of element that very often used to navigate the website content. Scroll-bar was also known as a handle in the very first GUI (Graphical User Interface).


Quick Note About Browsers.

When we refer to Webkit-based browsers were essentially talking about Apple Safari and Google Chrome. Together they currently hold more than 40% of the overall desktop browser market. For tablets, Apple’s iPad will always use webkit no matter which company’s browser is used. Google also added Chrome to its Android OS and Chromebooks are of course based on Google Chrome. Looking at these figures there should be a very bright future for scrollbar styling!

Features


It will make your website or blog more stylish and suitable for your template!
It will be more attractive!

Let's Start


Let’s style something, using the -webkit- prefix and webkit’s custom scrollbar properties. Keep in mind that I’m sticking to just the basic CSS properties for ease of understanding
/* Scrollbar learnt from http://www.riteshsonavane.com (Don't remove this it will not appear) (compulsory) */
::-webkit-scrollbar {
 background:#ffffff; /* This changes the background of the scroll bar */
    width: 10px; /* This changes the width of the scroll bar */
} /* This targets the default scrollbar (compulsory) */
::-webkit-scrollbar-thumb {
 background:#02B0E6; /* This changes the scroll box */
 border-top:1px solid #dec470;
 border-bottom:1px solid #dec470;
}
::-webkit-scrollbar-button {
      background-color: #7c2929;
} /* Optional, you can style the top and the bottom buttons (left and right for horizontal bars) */
:-webkit-scrollbar-corner {
      background-color: black;
} /* Optional, If both the vertical and the horizontal bars appear, maybe the right bottom corner also needs to be styled */

Remember

  1. 1-5 line is compulsory.
  2. You can change which is coded in yellow.
  3. At Line 3 you can change the color background of scrollbar and if you want you can add image by just replacing the line with
    background: url(image.png);
  4. At line 4 you can change the width of the scrollbar.
  5. At line 7 you can change the color of the scroll box.
  6. At line 12 you can change the color of the buttons!
  7. At line 15 you can change the color of the right bottom corner where vertical and horizontal scrollbar meet.
  8. Point 6 and 7 are optional if you want you can remove them!

Apply It.

Put these codes after the below tag. Make sure the codes should be at the first!

That's it if you have any problems comment here. Have any Interesting post to share?
Send us a Mail. Contact Us
Click to go to Contact us Form!.


download

Hi Friends, today I am giving you a small css and html editor which will give you the live preview of it. The main use of this is to create widgets. How I will say now. You just add your CSS codes between the style code and then add your HTML to load your css. Then click on the preview button and see it on the next box. If that was wrong, click on the clear button to revert settings. With this go start creating widgets here.




Blogger Page Navigation Widgets_thumb[21]Sometimes hard to find working number navigation gadget for Blogger. So this post will help you to add page number navigation easily. It will help to your visitors to keep watching your other post. So you can increase Page-Views. Its just blogger widget, Try yourself.. Open-mouthed smile

 

navigation_thumb[16] 

  1. Login to Blogger >> Go to Layout >> Add Gadgets >>’ Html/JavaScript’
  2. Copy this below code.
  3. Paste it to ’ Html/JavaScript’ box.
  4. You are done…

Any Questions Feel free to Comment below.. Hot smile






This article is for absolute blogger beginners, about how to backup/restore your blogger blog's template. This is very important thing that every blogger should beware of it. When ever you add codes and by mistake it doesn't works and you don't know where you have edited it! In this Case you should have Backup your Template! So whenever you edit something you should Backup Your Template Before Editing.

So Lets Start.....
It is a simple method to backup/rtore your template, follow the steps.


Backup Template

  • Go to Template »» Click Backup/Restore on your right hand side at top.
  • Now Click on Download Full Template.
  • The Download File be .xml format.

Restore Template

Now If you have Backup your template or have bought or downloaded a template, here are the steps to restore the template.
  • Just do the the Same Steps during 1 point of Backup.
  • Now click on Choose File.
  • Now where ever is your backup file- .xml Click on it and Click Browse or Open!
  • Now Click on Upload...
That's It you have successful restore your template!
Windows Live Writer_2

Blogger Supports XML-RPC Protocol which enables 3rd part Clients to make posts on Blogger.One of the Best Blogging Clients is Windows Live Writer.It comes for free.They just need you to have a windows live id (Sign up for one if you don’t have any)


Download Windows Live Writer By Going to Softwares or By Click Here!

What is Windows Live Writer?

 

Windows

Its a Software which lets you to make posts to your blog from your desktop.This Software has a very simple and easy to use post editor with live preview and a bunch of very useful features

Features

1.Easy Upload of Images with Effects Watermarks and Borders.
Live Writer Allows you to easily add pictures. In addition to that you can also add watermarks,effects, and special borders to your pictures. Its Awesome.. (You can see the Preview by seeing this Images)
2.Easy Upload of Videos.
Live Writer allows you to easily upload your videos.You can post your video files to youtube and soapbox from this software and publish it on your blog. In addition you can also embed existing youtube videos onto your blog posts.
3.Offline Editing.
It is possible Windows live writer helps you to make posts offline and publish it when you want to. You will also get a live preview feature.
4.Availability of Plugins.
There are lots of plugins available for Windows Live Writer.
To download Plugin go to Softwares or By Click Here!
Recommend to download Plugins:
Code Plugin – This Plugin allows you to insert code into your blog posts.If you are a programmer who posts code snippets in posts,then this will surely be useful.

6. More Options for Hyper links.
There are more options for making link.You can opt to open link in new window, add title to the link and add nofollow tags and lots more.
Have more nice features, plugins or I missed something. If i did please let me know so that i can update this post.

Want tips for WLW just see this Windows Live Writer Tips
This article is Great for Blog or Web Beginners. In this I will tell you a simple Trick on how to find Codes or Words for your Blogger/ Web. Like If you want to add a code between <head>, its not easy to find a code manually. So a simple Trick is to Use Ctrl+F. A search bar will appear and type the code or word you want to find and it will redirect you. As simple as That! Enjoy... Have A Best Life...
More- Blog Tricks and Web Tricks!
Preview of Search Bar
XOXOXOXOXOXOXOXOXOXOXOXOXOXOXOXOXOXOXOXOXOXOXOXOXOXOXOXOXOXOXO
Preview of Search Result:


  • Hold Ctrl+F (It is the Shortcut to Search Bar)
  • A Find Bar will display, Type the code or Word you want to search.
  • At once that code will highlight on the Page/Blog (As Shown Above)
  • Now You can modify/edit/delete your highlighted codes or words!
Any Question Please Comment Bellow and Have Any Tips Please Tell Us!
And Remember to Follow my Blog and If you Want Follow us By Mail! (see you bottom right corner)

When you share a post on Facebook, it will display a thumbnail picked from the post page along with a short description of the post. But in many cases Facebook fails to  identify the correct image and description that it should use. This leads to irrelevant images and description coming up in Facebook when you or your readers share the post. This is totally annoying, and I had got many queries regarding this on my Facebook page and via email. So for those who are trying to figure a way out of this, here is the solution.

Which image and Description does Facebook pick from your Post Page

Facebook regularly scrapes your page and caches the data to your servers. They look for meta data information(Open-Graph tags and others) in your post page. The meta data can explicitly specify the image and the description to use when the page is shared.If Facebook doesn't find any meta data, then their Algorithms will fetch some description and image from your Page. Facebook shows a wrong description or image when their Algorithms are not able to fetch the correct image and description from your Post Page.
We will solve both of these issues using two different techniques.

1. Fixing the Wrong Image Problem.

You might have noticed that comment avatars, and other  irrelevant images come up when you share the post on Facebook . The solution to this is to specify the image in the page meta data. We will be using open graph tags for the same.
Go to Template > Edit HTML and just above
</head>
Paste the following code snippet.

<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ_BnKCCQHm2ip-urSIk9QphINBLZ1pY_d_9z2vIpwaf88BEnONVQ14BvjiJ9kbczaTc2-6JA6ZcSH5yqktfkUEsau8b08DIl3UNrH9J0Pd_FglAC0GS-HobEy-9l2zv8Xs8rLeVv5mfg/s72-c/default.png' property='og:image'/>
</b:if> 
You can alter the image URL in the above snippet. That image will be used when no post thumbnail is present.
Now when you share posts to Facebook, a proper post thumbnail will be displayed. If the post doesn’t have images, then the fall back image which we have specified in the snippet will be used. If you don’t see results right away , then it is because of the caching done by Facebook. You can force Facebook to update the cache by debugging the post URL using this tool.

2. Fixing the Wrong Description Problem

Wrong description comes up when Facebook is not able to recognize the content and structure of your page. This also can be rectified by using meta data, but since blogger doesn’t provide a post snippet tag outside the blog post widget, it is impossible to do that using valid HTML. So we will have to go for other alternatives. If meta data is not found, then Facebook normally uses the First paragraph in your page(which is big enough). So it will be a good idea to get used to the paragraph HTML tag <p>content</p>. The Blogger Post Editor doesn’t use paragraph tags but uses lots of line break tags instead. So if you are using the Blogger Post Editor, then you will have to go into the HTML mode of the post Editor, and make sure that you use paragraph tags(I do agree that it is a difficult thing to do).If you can’t take that headache, then you can use a third party Publishing Tool like the Windows Live Writer which has superior Editing Controls. After doing this, you will again have to force a Cache refresh using the Facebook Debug tool and your post should show a proper description on Facebook.

3. Scripts coming up in the Facebook Description

I had seen a couple of cases where JavaScript snippets come up in the Facebook Description. Facebook somehow mistook the script for content, and this is probably because of the way you have added the script. Go to your template and see if there are any special characters in front of that particular script tag. If you find one, then remove it, and force a Facebook Cache Refresh.
If you found this tutorial useful, then do share it with your Facebook Friends who use Blogger ♥♥. If you have any questions do ask here in the comments. Have any tips please comment and I will mail you!

A labels widget displays your posts’ labels and each label is linked to a page containing posts which fall under that label. Usually as your posts increases, so will your labels. If you don’t limit them, sooner or later your labels widget will take over your sidebar!
Fortunately you can prevent that from happening by converting the widget into a a drop-down (or is it a Pull Down? ) Menu. Your labels widget will be reduced to just one line! And it only expands into a full list when you click it.

Before applying this hack, you must already have a Labels widget installed. If you don’t have one, go to Layout (old UI: Design > Page Elements) and add it.
Now let’s make the drop-down:
  1. Go to Template > Edit HTML > Proceed (old UI: Dashboard > Design > Edit HTML).
  2. Back up your template.
  3. Make sure you DO NOT check the  Expand Widget Templates checkbox.
  4. Look for the following lines in your HTML code (F3): 
 
 5.  Replace that line with this code:

 
 
 

  • Change the width of the drop-down menu bay changing 100% to any percentage, or pixel (px).
  • You can change “Click to choose a label” phrase in line 8 to your preferred phrase.
  • Code line 11 is for post count, if you do not want to show post count at the end of each label, delete this line.
 6.  Preview before saving.
 7. Congratulations you have shrunk your labels widget and created more space. 
 8. Enjoy!

If you want to change "LABEL" name see the first line, in "Title" change the LABELS to whatever name you want.
If you want to change "CLICK TO CHOOSE LABEL" sentence see the ninth line inside option tag and change to whatever sentence you want.
+
Powered By:

Networking Fever © 2014. All Rights Reserved | | Conact Us | Sitemap

Blogger Tricks