Windows Live writer offers an option where you can ping social networks and search engines whenever you publish a new post. Pinging is not a bad thing unless you do it frequently like 3-4 times a day. According to some previously asked questions WLW team has confirmed that the Ping function if turned on can put unnecessary burden on the servers that can cause you getting banned by search engines, blog directories and social networks.
Password Protecting widgets sometimes becomes necessary when you want to share the content inside the widget with selected people. You can lock the widget completely and it can be accessed only with a correct password. The text inside the widget will be in encrypted form which can not easily be cracked. This works exactly the same as we did for password protecting Posts in Blogger. For this tutorial to understand you must first read the earlier one.
I recently shared a floating widget that contained Twitter, Google +1 and Facebook Counters and it would slide up and down with the movement of the page. Some Twitter lovers amongst you asked for just a twitter button so the script below will help you add a floating twitter button with count on your blogger blogs. The Demo is the same as the previous one but this time with only one button:
Syntax highlighter is the big name that you see on major tutorial sharing blogs may that be Wordpress or Blogger. Web Owners who use it are growing in numbers. In the last post we discuss how to add Syntax Highlighter to your Blogger Blogs and today we will learn how to change its look and feel and customize it to some extent with 7 different color themes available so far.
Most bloggers use the standard blockquote to share tutorials based on scripts and codes with their visitors but Alex Gorbatchev has created an amazing fully functional Highlighter that neatly displays web technologies such as HTML, CSS, JavaScript, Php, Python, Sql, xml etc. The codes are displayed line by line number wise. It also provides the user with options to Print the code, copy it to clip board or to see the code Source.
BSA updates your Alexa Rank and PageRank very slowly and often you see the same old compete ranks for weeks. Keeping your public stats updated is be very effective for selling Ad spots. You can manually update your twitter, facebook, Subscribers number, Yahoo Inbound inks along with Alexa and PageRank. To do this follow the steps below:
Now you can password protect widgets too!
The Custom Facebook Like box will soon be adopted everywhere soon InshAllah however there is something you must know before adding it to your blogs. Most of you might have observed that upon adding the custom like box, you often receive that the plugin can not be rendered with this and that parameters.
Some complained that the footer widget in MONOP Blogger Template is not properly aligned with the rest of the blog post body. I have fix the design alignment with some changes that you can make your self. You just need to make these changes in your templates,
Google's recently introduced +1 Button is now going to be displayed worldwide on all Google domains. Previously this new plugin was added to English search results only but now all Google owned domains from India, Japan, till New Zealand and Australia will be equipped with this great tool giving publishers a better chance to improve their traffic. +1 Button is now available in 44 different languages. An amazing fact is that the +1 button will not only be added to search results but on Google Ads also. Following are the mega sites that are indirectly sponsoring and using the +1 button at the moment:
Google PageRank updated just an hour ago and thanks to all my loyal and highly valuable readers MBT BLog is now a PR 4.0 Blog with 24K Alexa Rank Alhamdulillah!. I am thankful to Allah Almighty for all His support and blessings. I wish and pray that you guys may too hear a good news day and night for the hard work that you do. It's a day to celebrate! Spent every day of my summer vocations trying to bring something new to blogosphere and a gift like PR and Alexa is a wish come true.
I previously shared a Facebook Like button that included a send button by default. One of the problems I noticed with it was the load time. I then shifted to this new like button which loads like a flash at my internet connection speed. If you wish to add this new like button code just below the post titles of your blogger blogs then follow these easy steps:
/*---------------MBT's Custom Like Box Start--------------*/To keep it simple make these changes:
.fan_box a:hover{
text-decoration: none;
}
.fan_box .full_widget{
height: 200px;
border: 0 !important;
background: none !important;
position: relative;
}
.fan_box .connect_top{
background: none !important;
padding: 0 !important;
}
.fan_box .profileimage, .fan_box .name_block{
display: none;
}
.fan_box .connect_action{
padding: 0 !important;
}
.fan_box .connections{
padding: 0 !important;
border: 0 !important;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #666;
}
span.total{
color: #0080ff;
font-weight: bold;
}
.fan_box .connections .connections_grid {
padding-top: 10px !important;
}
.fan_box .connections_grid .grid_item{
padding: 0 10px 10px 0 !important;
}
.fan_box .connections_grid .grid_item .name{
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-weight: normal;
color: #289728 !important;
padding-top: 1px !important;
}
.fan_box .connect_widget{
position: absolute;
bottom: 0;
left: 0px;
margin: 0 !important;
}
.fan_box .connect_widget .connect_widget_interactive_area {
margin: 0 !important;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
padding: 0 !important;
}
/*---------------MBT's Custom Like Box End--------------*/
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>The above code structure consists of 4 important sections which must be filled properly.
<script type="text/javascript">FB.init("");</script>
<fb:fan profile_id="LIKE PAGE ID" stream="0" connections="10" width="300px" height="200px" header="0" logobar="0" css="STYLE SHEET LINK"></fb:fan>
https://www.facebook.com/pages/My-Blogger-Tricks/147104632016744
]]></b:skin>
/*------- MBT ZOOM-OUT ZOOM-IN -------*/
.mbtzoom {
padding:5px;
position:fixed;
bottom: 35px;
right:10px;
cursor: pointer;
text-decoration: none;
border: 0px solid transparent;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.mbtzoom:hover {
zoom: 2;
text-enlarge: 2;
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
<a href="URL OF PAGE" class="mbtzoom"><img width="60px" height="60px" src="IMAGE LINK" alt="back to top" /></a>
<style>
.mbtzoom {
padding:5px;
position:fixed;
bottom: 35px;
right:10px;
cursor: pointer;
text-decoration: none;
border: 0px solid transparent;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.mbtzoom:hover {
zoom: 2;
text-enlarge: 2;
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
</style>
<a href="#" class="mbtzoom"><img width="60px" height="60px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikiUzaR70eQDgIbkGfKElYqn7VmdyFasdQQOize3Y5HbmOrVgv_YWe5fEZJmwX1bc_hKMMffjfsypVs-W0Slr4V63aZwhYC3toIIZOChW01cCHj6SZrdkcKK0odFlHvd5yb52cvPB9Qdk/s800/rss-128.png" alt="back to top" /></a>
After the beautiful Facebook Iframe tabs experience, I started understanding on how to customize Facebook plugins. Due to tons of helpful online support from forums and blogs, MBT blog is proud to announce that the new Facebook Like Box can now easily be customized using pure CSS. Detail Info on this will be shared on my next post. For the time being see it appearing in action at the top with complete custom look and feel. Thanks for being a great support and motivation.
<div id='subnavbar'>Replaced the bolded black texts with your link titles and the # sign with link URLs
<ul id='subnav'>
<li>
<a expr:href='data:blog.homepageUrl'>Home</a>
</li>
<li>
<a href='#'>About</a>
</li>
<li>
<a href='#'>Contact</a>
</li>
<li>
<a href='#'>Sitemap <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhICIlJw81DKzoU9Pc_2uEOJoPMt5hwTz2UkQrC98nWmIO0MkzaZFPBD8c7vCJG5IHIs-Og84ZoCwD_cIP0gOTdd1nxRmm9Nrw7QoJguY2cUkKZY8Z88P5-FmCS_NzvvsNinJzeNW6yrVc/s400/arrow-down.png'/></a>
<ul>
<li><a href='#'>Sub Page #1</a></li>
<li><a href='#'>Sub Page #2</a></li>
<li><a href='#'>Sub Page #3</a></li>
</ul>
</li>
<li>
<a href='#'>Download This Theme</a>
</li>
</ul> </div>
<li><a href='#'>Title</a></li>If you wish to add a drop down menu to any tab then simply add the code below before the </li> tag of any tab (for example see carefully how I added it to the Sitemap tab),
<ul>
<li><a href='#'>Sub Page #1</a></li>
<li><a href='#'>Sub Page #2</a></li>
<li><a href='#'>Sub Page #3</a></li>
</ul>
<style>To customize the above code with your twitter, facebook and Feed links then read this tutorial: Create RSS Form
.mbtbar{width: 100%; float: left; padding:0; margin:0;}
.mbtbar .count{color:#333; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; background: none; line-height: 35px; vertical-align: middle; width: 300px; padding: 0 10px 0 4px;}
.mbtbar .count span.bigcount{color:#BF0100; font-size: 24px; font-family: Helvetica, Arial; line-height: 35px; vertical-align: top; padding-right:3px;}
.mbtbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 14px;}
.mbtbar .subicons a{text-decoration: none; color:#333333;}
.mbtbar .subicons a:hover{text-decoration: underline; color:#333333;}
.mbtbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNDHqd2EnCntBhvN_pMEVMjh9dMw_Mj6Ko705StjOZy3yanwXT8RhcqCQFyd5Dw_B3ngy7oegSSn0EaKiuie_nHC94LMf7x0ugdoMpReTkVrXqOn6M7OgkreiN0s9gpM8ZzEhlPWolWgE/s400/rss.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.mbtbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjszh9RNnEZNIm0NgYU0Bh-tMExkDMYRTjOd37VrGUntyIFwEaOl23TqpOzqBE5K3ji1NWFo-UHR1SoXBbS2fx4zcRFGSxsJYF8dejGBRdVW4SK00jPBEFV6bjchKcZ6_W6Hy8Jwa6YVEs/s400/facebook.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.mbtbar .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLvmWG20lAEOkb8uXstEU8SgFiboQWHdbn7faodvEFSTvS2UgOosZDwbFNlTa3xxMwPdxcMfdNR5_9Shrl_9rSt-4frOn3R6NfN1WB8QxiX5e6PqP0N2x5PD2Ewk0RZwrzD1cZsiLf5hY/s400/twitter.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.mbtbar .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
.mbtbar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguSsr17J4LE6WaGPytUfnyU8YlND2BVH0jnocKrBK8sxfbvKBRsB73SyfGDEG8HwFQ4PkPM5A15m7a7V4qoHbdQxieN7fDNLaFSYnYCNFtDDndBSGvQPW6wNXziutpkS4T-LRhHpnX1p0/s400/email.png) no-repeat left center; float: left; padding: 5px 15px 0px 35px; margin: 0 0 0 5px; width: 300px; height: 28px; line-height: 28px; vertical-align: middle; font-size: 14px; color: #333; }
.mbtbar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 200px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#bf0100 0%,#ac0100 100%); background:-webkit-gradient(linear,left top,left bottom,from(#bf0100),to(#ac0100)); border: 1px solid #ac0100; text-transform: uppercase; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
</style>
<!--[if IE 7]>
<style>
.mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }
.mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:#AC0100; border: 1px solid #AC0100; text-transform: uppercase; color: #ffffff; font-weight:bold; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; }
</style>
<![endif]-->
<div class="mbtbar"><div class="count">Join <span class="bigcount">1807+</span> People Following MBT</div><div class="subicons"><div class="rssicon"><a href="http://www.mybloggertricks.com/feeds/posts/default" target="_blank">RSS</a></div><div class="fbicon"><a href="http://www.facebook.com/pages/My-Blogger-Tricks/147104632016744" target="_blank" rel="nofollow">Facebook</a></div><div class="twittericon"><a href="http://twitter.com/mybloggertricks" target="_blank" rel="nofollow">Twitter</a></div></div>
<div class="emailsub">
<div class="emailicon">Stay Updated via Email Newsletter</div>
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email..." onblur="if (this.value == '') {this.value = 'Enter your email...';}" onfocus="if (this.value == 'Enter your email...') {this.value = '';}" type="text" /><input value="tntbystc" name="uri" type="hidden" /><input value="Join" class="joinemailupdates" type="submit" /></form></div></div></div>
<b:includable id='comment-form' var='post'>
<data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div> <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='520'/></div>
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:510px;'>Facebook Blogger Plugin: Bloggerized by <b><a alt='blogger templates' href='http://www.allblogtools.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>AllBlogTools.com</a></b> Enhanced by <b><a alt='blogger widgets' href='http://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>MyBloggerTricks.com</a></b></div></div>
</b:if>
Another way to stand out from the crowd is to have a customized blog Text Highlighting color. This can ensure that when users highlight text on your blog, it matches your blog’s theme, and may also look professional at the same time.
Blogger recently introduced there Most Viewed Widget which is also called Popular Posts widget. This gadget displays the posts which has the maximum number of pageviews in three ways i.e. All time, monthly or weekly. It is a great tool to engage your readers more and increase your page views. It will also help you know which of your posts leads the row.
Installing the Recent Comments Widget provided by Feedburner is a better option but if you think that method is a long one then I am sure you will like installing this easy widget provided by blogger team.
I shared a tutorial earlier on how to add a Recent Posts Widget provided by Feedburner. However just this year blogger introduced their own Feed widget that takes the URL of your FEED and displays the links to your posts with some limited options. The widget by feedburner however has many options but if you need a shortcut then here it is:
Developing widgets, gadgets or plugins has become a productive hobby for all. Technology is changing its face rapidly with enhancements and better updates. Technologies once dreamt off are fast becoming realities. Till now you kept on following tutorials on this blog and several others.
rel="nofollow"
<a href="htpp://xyz.com">LINK TEXT HERE</a>
<a rel="nofollow" href="htpp://xyz.com">LINK TEXT HERE</a>
Display thumbnails of posts having same labels or categories at the bottom of each blog page engages the reader more and increases the pageviews. By far we have two best related posts gadgets created so far one is by linkwithin which I am sharing in this tut and another one displays just links and I will share it in my next post. This widget Loads fast and you don't need to install any scripts for this as the widget codes are stored on linkwithin servers.
Hope you liked the first part of this article where I discussed how can you make better use of your skills by writing blogs. That post and today's post is for those, who are enthusiastic about writing and testing their skills, enriching and elevating the talent that is hidden in them. So, for who have started blogging its well and good, but those who haven’t, there might be some reason then? why still waiting?? Do you think you can’t write properly? or you don’t know what topic to write on? If you think like that then I must say that almost everyone of us had this natural fear but it does not prove that you can not write!
An International Facebook Like and Send Button Plugins can not directly be created at Facebook Developer page however we can tweak the code to change the language of the buttons to any country we choose. I previously shared a tutorial on how to add Facebook Like and Send buttons in blogger but those buttons were by default in English USA. Now suppose you live in England but run a Spanish blog. When you go to the Facebook developer page, you will be given a code that will let your users to share your posts in English but your users are from Spain and they will be much more satisfied with your work. In order to make things smoother for your visitors follow the simple steps below:
Half an hour ago I published 10 ways of customizing Read More links. However some of you might be facing a problem in styling the read more link in official blogger Designer templates. In order to apply the style effects to such templates you will first need to delete the read more link provided by blogger and install a custom read more link or button in less then 3 minutes.
Creating 'After the jump' summaries using Read More Link makes your homepage load fast and keep things organized and well managed. Till now I shared many tutorials on free "Read More" Buttons and Continue Reading Links but today we will learn to create beautiful Read More buttons without using any image at all. We will use pure CSS to make this happen. I have styled a total of 10 buttons which I hope you will find interesting to further customize. Please see a demo first:
Many bloggers make the mistake of not fully customizing their links and images. In fact, customizing the two can help you stand out from the competition! However, rather than using some JavaScript to enhance our blogs, which increases loading time and is not accessible to users who disable JavaScript, we are going to use pure CSS3 to let your links and images swing from left to right and vice versa! Let's get further into it shall we? Take a look at this demo:
CSS3 has many new powers with which we can further enhance our websites, without extensive knowledge of JavaScript, or without really effecting our website’s loading time. With less than ten lines of CSS coding, we can achieve each of the following effects. Changing CSS properties on mouse-hover and using CSS3 transitions were used for these enhancements. You can now easily animate the images on your WordPress or Blogger blogs using the simple image opacity effect below that rotates the image on mouse hover.
Blogger recently announced their Blogger application for Android platform for mobile devices but unfortunately couldn't really set a mark there. The new application though looks great appearance wise but have many bugs to deal with. Thousands of people who have downloaded this android application are not satisfied with what Google present them.
Most of you asked what fonts I use to create my intro images on Photoshop or the fonts I use while designing blogger templates. I have compressed and gathered the complete list of all my fonts I had on my PC for free download. I just hope you will enjoy using them for your design works and make your blogs even more eye catching.
Ever since i got my iPhone, i always wanted to pop it up with some blogging app. I didn't had a single penny in my budget so i had to search for some free blogging apps. I would say at this point blogger has betrayed us all. I couldn't find any Official Blogger iPhone app at the app store however we do have Blogger Official Blogging App for Android Device or the unofficial Blogaway. I feel so envious about those really professional looking and free applications like WordPress, Tumblr, HubPages etc. available for their respective users.