new year poetry in saraiki.2 line saraiki poetry,saraiki poetry with girls photos,saraiki best poetry,sad saraiki poetry.shakir shuja aabadi sad poetry,saraiki best poetry photos,funny saraiki poetry,lovly saraiki poetry wallpapers,saraiki photos,
Thursday 31 December 2015
New Saraiki Poetry Collaction
new year poetry in saraiki.2 line saraiki poetry,saraiki poetry with girls photos,saraiki best poetry,sad saraiki poetry.shakir shuja aabadi sad poetry,saraiki best poetry photos,funny saraiki poetry,lovly saraiki poetry wallpapers,saraiki photos,
Monday 28 December 2015
Happy New Year - jQuery Popup For Sites!
Time fly too fast! Two years back we released a combination of 2 different popups to wish your website visitors happy winter holidays and happy new year, we are releasing today a dynamic popup for new year so that you may not remain dependant on a fixed background theme and instead change the date and time by editing the text.
This Popup plugin contains 4 Unique Features!
- Falling snowflakes,
- It has a digital countdown timer,
- It has 3 different animations,
- Supports HTML5 sessionStorage functionality to set cookie in order to control the popup display. You can choose to show the popup once or several times.
It is perfectly compatible with all major browsers. A perfect way to greet your website visitors. You can add it easily to your blogspot or wordpress blogs or on HTML webpage you may have. It is extremely easy to customize. View the demos below and then proceed to the installation guide.
Note: I have willingly set the counter to 2017 so that the demo may live longer :)
How to install this popup?
All steps are exactly similar to the ones we already shared on our christmas popups tutorial except for the styling which I will discuss here. Kindly therefore follow all steps shared in the Winter Holidays tutorial linked below. Follow all steps there and skip step#5.
Add the following CSS code instead of the code shared in step#5 of previous tutorial:
/* --------------------------------------------------
New Year Popup by MBT
-------------------------------------------------- */
#mbt-counter {
padding: 10px;
font-family: oswald,verdana;
background-color: transparent !important;
position: relative;
top: 28%;
font-size: 25px;
left: 28%;
text-shadow: 1px 2px 4px rgb(51, 51, 51);
color: rgb(255, 254, 198) !important;
border: 2px solid orange;}
.reveal-modal h2 {
position: relative;
top: 25%;
font-family: oswald,arial;
font-size: 1.7em;
text-shadow: 2px 4px 10px #000;
color: orange;
text-align: center;}
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: rgba(0,0,0,.8);
z-index: 100;
display: none;
top: 0;
left: 0;
}
.reveal-modal {
visibility: hidden;
left: 50%;
top:170px;
margin-left: -300px;
width: 550px;
height: 305px;
background: rgba(51, 51, 51, 0) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT_LDoLCtP6aCWSiHW9XSPR69Z4l2cYsgZkyrG8P2MyRY0VkDHcr9OwGHmexW60vJscYEmkD8iEHRQT5pmATI86KC2RP6hSKVzNe8_83mI642bFwQkuzalw4sYtTq39UvOC1sYavks1rg/s1600/happy-new-year-png.png) no-repeat -17px 0px;
position: absolute;
z-index: 101;
padding: 30px 40px 34px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
color: #FFF;
}
.reveal-modal.small { width: 200px; margin-left: -140px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}
.reveal-modal .close-reveal-modal {
font-size: 32px;
line-height: 0.5;
position: absolute;
right: 25px;
font-weight: bold;
cursor: pointer;
bottom: 25px;
color: orange;
}
.reveal-modal .close-reveal-modal:hover {
color:#2d2d2f;
}
That's all!
Hide Winter Snow Fall
If you don't want to show the falling snow then kindly remove this code:
$(document).snowfall({deviceorientation : true, round : true, minSize: 1, maxSize:8, flakeCount : 250});
This code is given in step#4 of previous tutorial.
The HTML
For step#6 use the following HTML code
<div id="myModal" class="reveal-modal" >
<h2>Count Down Begins...</h2>
<script type='text/javascript' src="http://tools.mybloggertricks.com/mbt-counter.js"></script>
<a class="close-reveal-modal">×</a>
</div>
Need Help?
Kindly let me know if you needed any help. I whole heartedly expect that you will like this pleasant gift for new year. Happy new year 2016 buddies but before I go here goes my new year resolution:
"Spending more time with my newly born baby "Ifza" and ofcourse blogosphere."
Love you all buddies! What are your new year resolution? =)
Friday 25 December 2015
HTTPS: Blogger Images Given Relative Paths
I guess blogger heard us finally! =) We reported back some 5 major disadvantages of switching to HTTPS for blogspot blogs and among these disadvantages was the serious concern of mixed content issue majorly caused by picasa images inserted inside the blog posts. These images was given absolute paths and we discussed that unless images are given relative paths, switching to https at this stage could be a nightmare. Fortunately just recently all blogspot blogs which uses the encrypted and secure HTTPS connection will get all its media content auto replaced with Relative URLs. All images are auto served with relative paths
Note: Click the Button below to see full list of topics under discussion.
Topics List
How are Images Stored in Relative URLS?
All images that you upload in a blogger blog are stored inside Picasa web album. Previously even if you had enabled HTTPS, your visitors would continue seeing the following http error in their address bar. It was caused mainly due to image links stored in http:// instead of https://
Connection is Not Secure
The connection to this website is not fully secure because it contains unencrypted elements (such as images) or the encryption is not strong enough.
But now this issue has been fixed thanks to relative paths which automatically replaces your Image HTTP URLS with HTTPS URLS.
In Relative URLS case you don't need to change the URLs from http to https because the image src will pick the current Domain URL structure of your site no matter how many times you change it.
BEFORE:
Before switching to https, blogger images are stored in absolute paths which looks like the one below:
http://3.bp.blogspot.com/-uH6EWDyC8uc/URKlnspDBRI/AAAAAAAAJGw/z_6DsQvaH9g/image%25255B7%25255D.png?imgmax=800
AFTER:
After switching your .blogspot.com domain to HTTPS, the images will get a relative path or naked paths without the hyper text protocol as shown below:
//3.bp.blogspot.com/-uH6EWDyC8uc/URKlnspDBRI/AAAAAAAAJGw/z_6DsQvaH9g/image%25255B7%25255D.png?imgmax=800
Thanks to this relative URLS your connection will remain secure and your visitors wont see "connection Is Not Secure" Instead they will now see a "Secure connection" alert box in the address bar as shown below:
Secure Connection
Firefox has blocked parts of this page that are not secure
Areas which are blocked are your widget scripts which are using the HTTP connection. You will need to manually replace it with HTTPS or upload your scripts at a secure https hosting.
Your views?
Just two months ago we raised this SEO blunder that was causing serious trouble but I am really glad now that blogger has fixed this mixed content issue and has handled it effectively at server side. This was exactly was we recommended in our post. Do read that post to get a clear idea of what we mean. Although I will still request that blogger team may now also fix the http to https redirection problem which is not yet sorted out. Only then switching to HTTPS could effect a blog's search ranking positively.
How do you think this latest development will help publishers better fix the mixed content errors? What else would you request from blogger to fix? Do share your views in the comment box below.
Finally for bloggers with over 1K-10K posts, relative paths are surely no less than a heaven! =)
Monday 21 December 2015
Open Live Writer � Keyboard Shortcuts
Windows Live Writer is dead now for Blogger users and replaced with its Open Source alternative "Open Live Writer (OLW)" which is the perfect blogging toolkit for publishers using Wordpress, Blogger, TypePad and all other popular blogging CMS platforms. As an addicted user of this new blog editor I just figured out some useful keyboard shortcuts that you can use to save time updating your blog using Open Live Writer. I have compiled below the complete list of keyboard shortcuts supported by OLW. Indeed most of these shortcuts are inherited from OLW's parent - Microsoft's Windows Live Writer.
Note: Click the Button below to see full list of topics under discussion.
OLW Topic List
Following is a categorized list of the most common keyboard shortcuts used in Open Live Writer:
BLOG & POSTING Shortcuts
| Shortcut | Function |
|---|---|
| Ctrl + N | Creates a new post |
| Ctrl + G | Creates a new page |
| Ctrl + O | Open recently posted |
| Ctrl + S | Save a post |
| Ctrl + Shift + P | Publish a post |
| Ctrl + Shift + D | Post draft to blog |
| Ctrl + K | Insert hyperlink |
| Ctrl + J | Add picture from computer |
| Ctrl + Shift + C | Set categories or Labels |
| Ctrl + Shift + J | Add picture from the web |
| Shift + F11 | Switch to source view |
| Ctrl + F11 | Update blog theme |
| F11 | Switch to edit view |
| F12 | Switch to preview view |
| F2 | See post properties like keywords and post date |
TEXT Formatting Shortcuts
| Shortcut | Function |
|---|---|
| Ctrl + B | Bold |
| Ctrl + I | Italicize |
| Ctrl + H | Strikethrough |
| Ctrl + U | Underline |
| Ctrl + = | Subscript |
| Ctrl + Shift + = | Superscript |
| Ctrl + Shift + L | Bullets |
| Ctrl + Space | Clear formatting |
| Ctrl + E | Center text |
| Ctrl + L | Align text left |
| Ctrl + R | Align text Right |
| Ctrl + Shift + N | New paragraph |
| Ctrl + Left Alt + 1 | Heading 1 |
| Ctrl + Left Alt + 2 | Heading 2 |
| Ctrl + Left Alt + 3 | Heading 3 |
| Ctrl + Left Alt + 4 | Heading 4 |
| Ctrl + Left Alt + 5 | Heading 5 |
| Ctrl + Left Alt + 6 | Heading 6 |
| Ctrl + Left Shift | Set text direction from left to right |
| Ctrl + Right Shift | Set text direction from right to left |
PHOTO Editing Shortcuts
| Shortcut | Function |
|---|---|
| PrntScr + Ctrl + V | Takes screenshot from your desktop screen and then press Ctrl + V to paste it in OLW |
GENERAL Shortcuts
| Shortcut | Function |
|---|---|
| Ctrl + X | Cut |
| Ctrl + C | Copy |
| Ctrl + V | Paste |
| Ctrl + Left Alt + V | Ctrl+Left Alt+V |
| Ctrl + A | Select all |
| Ctrl + F | Find |
| Ctrl + Z | Undo |
| Ctrl + Y | Redo |
| Ctrl + P | |
| Ctrl + F1 | Show or hide ribbon |
| F1 | Get Help for OLW |
Need Help?
This is so far the complete list of keyboard shortcuts which are supported by Open Live Writer's latest build. I will keep updating the list to add more useful shortcuts. I hope this makes your posting hobby even more worthwhile. Let me know if you needed any help. Peace and blessings buddies! =)
Saturday 19 December 2015
Open Live Writer � Edit Blog Labels and Pages
Now when Windows Live Writer is dead and Open Live Writer has taken its place as its Open source clone, many blogger users have started complaining about errors and absence of features in OLW. We have already discussed how to fix these OLW errors and today we will share some exciting tweaks to help you organize blog labels and edit Blogger static Pages using the new Open Live Writer. Note that the official download copy of OLW has no option to set categories but do supports to add/create stand-alone pages but with this simple tweak you will be able to create new categories and assign multiple categories to a post. This tutorial is first time shared online to help you make the best possible use of OLW's unreleased features.
Note: Click the Button below to see full list of topics under discussion.
OLW Topics List
Category Option is available only in the Nightly Copy
Inside your OLW window, Click the tab "Blog Account" followed by "Blog options"
Then click the link "See blog capabilities" just below the password field.
You can clearly see that the following options are not supported:
- Categories
- Multiple Categories
- New Categories
Which means neither can you apply a label or multiple labels nor can you create a new label for your blog posts.
To enable the Category box, you will need to download and install the "Nightly" setup copy.
Download OLW (Build 0.5.1.2) - Nightly
Difference between Nightly and Release
According to Scott hanselman (OLW co-developer) they have two builds of Open Live Writer, the NIGHTLY (they build it many times a day) and the RELEASE. They use the nightly for testing, but it means that Open Live Writer will be downloading 5 megabytes every day, a few times a day and updating itself with features they are testing. Release copy is updated a few times a year, maybe once a month but the Nightly copy is updated on daily basis to test new features. .
So if you want to get the most updated copy each time just like I did and had the benefit of getting an extra feature of "Category", you can surely uninstall your Release copy and replace it with a Nightly one.
No Category Option in Release
Category Option in Nightly
As you can see there exists a Category box just to the left of "Set post date" utility.
Organize Labels in Open Live Writer
(1) Setting a Label
Blogger labels are case sensitive but OLW has handled this problem quite smartly. You don't need to worry about letter casing while assigning labels to your posts in OLW. All you need to take care is to ensure you are not making any spelling mistakes.
For example if your blogger label is "Affiliate Marketing" , you can easily set this label to your post inside OLW by writing "affiliate marketing" or even "AffiLiatE markETING" , no matter what you write as long as the spelling is correct, OLW will apply the label correctly. Spelling mistakes would create new labels in your blog!
To set multiple labels to a blog post, comma separate labels inside the "Category box" . As shown below:
(2) Create a New Label
You can also create new labels inside Open Live Writer to tag your blog posts.
Simply write down your new Label inside the "Category Box" and publish your post to Blogger! That's it.
New Label will be created and added automatically to your blog post. Thus OLW helps better organization of your blog categories. You can easily create, remove or apply label to a specific post but if you wish to delete a label from your blog completely then you will need to do that through your blogger dashboard.
Creating and Editing a Static Page
This is an amazing new feature that OLW has which "Windows Live Writer" lacked. This option was only available for WordPress blogs but now thanks to "Open Live Writer" opensource courtesy, blogspot users can create static pages for their blog using OLW editor.
To create a new Page go to File Menu > New post > Choose "New page"
That's it! Give your page a title and hit publish.
To delete a Static Page in blogger, you will need to do that by going to Blogger > Pages
Need Help?
Let me know if you needed any assistance in better understanding the technical configurations of OLW. I would love to help. I hope this tutorial series may help most of you in better configuring the blogging tool. Peace and blessings buddies! =)
Friday 18 December 2015
Open Live Writer: Fix Blogger Login Errors
Congratulations! You can now successfully connect Open Live Writer to Google Blogger.
Windows Live Writer's clone, the Open Live Writer (OLW), was officially updated yesterday with Google's OAuth 2 modern authentication system. The Blogger accounts login errors or credential connection issues have been fixed and solved. Some bugs still exist when it comes to multiple blog posting, post formatting and assigning labels to your posts. We have figured some tweaks to troubleshoot all these minor errors to make sure you connect your BlogSpot blog with Open Live Writer correctly without facing any future troubles.
This is our first blogger post published with Open Live Writer! =)
Note: Click the Button below to see full list of topics under discussion.
OLW Topics List
1. Fix Login Connection Errors
The Volunteers at Microsoft has released a new version of OLW that has fixed the connection issue. OLW now works fine with Google Blogger v3. I have included below the direct link to the team's frequently updated setup copy called "Nightly" which contains several unrelased features that you can try out. Download the latest version from the link below:
Download OLW (Build 0.5.1.2) - Nightly
During the installation you will now see a separate option entitled as "Google Blogger"
Note: I will publish a detailed post on how to setup Blogger with OLW correctly in next 24 hours.
2. Fix Remote Server Errors
OLW will publish your first post without errors but sooner as you try to publish a second post or Close OLW and the reopen it to publish a new post, you will encounter the following error during publishing:
The remote server returned an error: (403) Forbidden.
The remote server error is caused because OLW is not able to remember your blog account's password. To fix this issue follow these steps:
1 Go To File > Options > Accounts
2 Select your preferred 'Blog' and then click Edit
3 You will observe that the Password field is empty or set to null. You
4 Click the button "Update account information"
5 Enter your Gmail password inside the password box and also check "Remember my password".
6 Hit "Next" and your blog theme will be updated!
Thus this stops the server errors from promoting again and OLW will remember each time what your blog password is.
Note: If you encounter this error again then it means you had not chosen the option "Remember my password". Repeat the process again to sort it properly.
3. Fix Label Issue
Note: The Label option is only available in the Nightly download copy that we shared above. It is not present in the official release copy. Therefore you may download OLW using the link we provided above.
Windows Live Writer has a tagger tool, on clicking which all your blog labels are displayed inside a drop down menu. You can then select a Label easily to set your post categories.
WLW also helps you easily add new categories or labels in blogger.
But in Open Live Writer you need to manually add or set the Labels for your blogspot post. There exists no automatic way to display full category list for blogger although it exists for Wordpress and other platforms. However there is an easy old traditional work around to apply labels to your post inside OLW.
OLW displays this old-school "Category Box" above your blog post.
(a) Set category in OLW for your blogger blog
Blogger labels are case sensitive, any mistake in uppercase and lowercase letters could lead to error but OLW has handled this problem quite smartly. You don't need to bother about letter casing while assigning labels to your posts in OLW.
For example if your blogger label is "Affiliate Marketing" , you can easily set this label to your post inside OLW by writing "affiliate marketing" or even "affiLiatE MARKETING" , no matter what you write as long as the spelling is correct, OLW will assign the label correctly.
To set multiple labels to a blog post, comma separate labels inside the "Category box" . As shown below:
(b) Add New Labels To Your Blog using OLW
You can also create new labels inside Open Live Writer to assign to your blog posts.
Simply write down your new Label inside the "Category Box" and publish your post to Blogger! That's it.
Bingo! New Label created and added successfully to your blog post!
4. Fix Formatting Errors
Just Like WLW, Open Live Writer also makes unnecessary editing changes by replacing hyphens with dash, double quotes with smart quotes, test smileys with graphical emoticons and so on. This creates a serious formatting error in your code if you share scripts or HTML inside your blog posts as tutorials. To fix these errors do this.
1. Go To File > Options > Editing.
2. You may uncheck all these boxes. Especially the first two.
Need Help?
This was a quick post to help you troubleshoot some of the most common errors blogger users are encountering currently. I hope this post proves helpful for most of you. Let me know if you need any help with regard to any part of the tutorial above. What other errors could you report? Are you facing any error that we have not discussed above. Kindly let us know so that we may include it in the list above. Start posting happily now during these holidays with your new Blogging friend i.e. Open Live Writer. =)
Wednesday 16 December 2015
Windows Live Writer Stopped Support For Blogger "Permanently"!
Sad but true! Blogger users will no longer be able to publish blog posts using Windows Live Writer.
UPDATE: Open Live Writer Connection Error has been fixed. Read how to fix the blogger login errors and other formatting issues.
Microsoft has finally stopped support for its Blog-Publishing tool Windows Live Writer but fortunately it was kind enough to Open-Source the project by allowing the online community to continue its development. On 9th Dec, 2015, Microsoft's employee, "Scott Hanselman" announced that some engineers within Microsoft has successfully open sourced and forked Windows Live Writer and gave it a new name entitled as Open Live Writer (aka OLW) and it is now part of the .NET Foundation and managed by this group of independent volunteers from Microsoft. Windows Live Writer will continue working but due to no future updates since 2012 it has shut down its support for Blogger blogs permanently due to Google's modern OAuth 2 authentication system. Scott said it in clear words that WLW will never support this new OAuth 2 authentication system, so if you are a Blogger.com user, you'll have no choice but to switch to Open Live Writer. WLW will no longer work with blogspot blogs but it will continue working with WordPress and other blogging platforms. None of our Forum Tricks for fixing the 2 step authentication will work now.
Note: Click the Button below to see full list of topics under discussion.
OLW Topics List
Blogger Users Will See These Errors
Windows Live Writer will return the error "NotFound: Not Found" for Blogger Blogs from now onwards and there is currently no solution or fix for this bug and there will never be one as per the Microsoft employee: Scott Hanselman.
Unfortunately currently even "Open Live Writer" uses the old authentication endpoint and does not support connection to Blogger accounts. OLW throws an error "The username or password is incorrect. Please try again".
The following error is shown when you try to connect your blogspot blog with OLW.
The good news is that Scott has confirmed that in recent days OLW will be updated to support OAuth2 so that blogger users could continue using it without errors. He mentioned this OLW-Blogger connection issue in his blog post:
Google runs the excellent Blogger blog service. We've worked with the Blogger Team within Google on this project, and they've been kind enough to keep an older authentication endpoint running for many months while we work on Open Live Writer. Soon, Google and Blogger will finally shut down this older authentication system. Blogger will use the more modern OAuth 2 and Open Live Writer will be updated to support OAuth 2.
Google has also confirmed that Windows Live Writer will no longer work with Blogger.com:
A few months ago, the Windows Live Writer and Blogger integration stopped working for a few days due to improvements in Google�s authentication systems. We agreed to keep the old authentication systems for a few more months but starting December 11th, they will be retired and Windows Live Writer will stop working.
This means if you use Windows Live Writer and would like to keep using it to post on Blogger, you will need to migrate to Open Live Writer since Windows Live Writer will not ever support our new authentication system. However, we would like to warn you the connection between the Blogger and Open Live Writer might not work for a while.
Download Open Live Writer!
Open Live Writer is surely the next big blog editor that will allow you to create blog posts, add photos and videos then publish to your website. You can also compose blogs posts offline and then publish on your return just like you did using WLW. Open Live Writer works with many popular blog service providers that were previously supported by WLW. Platforms include WordPress, SharePoint, Blogger, TypePad, Moveable Type, DasBlog and many more.
Note: Blogspot accounts are currently facing authentication issues and OLW team has promised to fix this issue as soon as possible through a github thread. I will keep you updated with all latest developments.
Open Live Writer is NOT a Microsoft product
Scott made it quite clear that OLW is an open source project under the .NET Foundation and is managed and coded by volunteers. Although Open Live Writer may look like an exact clone of WLW but it is not a Microsoft product. Some of the volunteers work for Microsoft and are doing this work in their spare time.
Do not delete Windows Live Writer
You must not delete WLW, Open Live Writer installation will not override your WLW files. They both will act as different tools in your Windows PC. I wrote this blogger post offline using Windows Live Writer and I simply copied the Source HTML and pasted inside blogger editor to publish the blog post. So you can continue using WLW to format your posts. OLW currently have no Spell Check support for Windows 7 so if you are a Win7 user, WLW could still prove a lot useful to write quality posts offline with no grammatical mistakes.
Your Views?
Open Live Writer is surely going to make content generation methods a lot more easier and advanced. I just hope they will soon fix existing issues and technical errors related BlogSpot blogs. I also tweeted Scott and have shared blogger users concerns with him. Do you really think you will miss "Windows Live Writer" when you have a better open source alternative which in other words is WLW itself but with a new name and management? =)
Thursday 10 December 2015
Blogger Sitemap Generator - Version 2016
Blogger XML Sitemap Generator and Pinger was our first PHP tool that we released back in 2012. We received great feedback from all of you and based on that precious comments we are releasing the updated version of this online tool to help you build both Dynamic Sitemaps and Atom Feed Sitemaps. Lets call it version 2016! This tool is much more advanced due to a better optimized algorithm and its capability to create sitemaps for unlimited posts. It will also help you ping your multiple sitemaps to Bing Webmaster tools for faster indexing. Since Blogger has decreased the number of items or entries from 500 URLS to just 150, we needed a quick update to help you encounter this sitemap indexing bug.
It's the complete toolkit required to create correct XML sitemaps for BlogSpot blogs. The tool does the hectic mathematical calculation on your behalf that we discussed earlier in the following post:
How To Use it?
The UI is extremely easy to understand. I have mentioned all details. All you need to do is to submit your Blog URL and total number of your Published Posts.
Your blog URL must end with a forward slash. For example:
Correct URL
http://www.YourBlog.blogspot.com/
Incorrect URL
http://www.YourBlog.blogspot.com
Reason: No forward slash at the end.
To find published posts count go to Blogger > Posts > Published
- Type both URL and Post count inside the text boxes and click the submit button.
- The page will load to generate Dynamic Sitemaps and Atom Feed sitemaps along with Ping links for Bing.
- Finally go to Google Search Console and submit the sitemaps one by one. For doing this just follow this tutorial: submit Multiple sitemaps to Google
- To learn how to submit your blog sitemaps to Yahoo and Bing then Please read Submit sitemap to Yahoo and Bing without errors.
Your Feedback!
Do share your feedback about this latest update and let us know what needs to be done to make it even better. I hope this tool may help you create better xml sitemaps for your blogspot blogs and help you encounter the ongoing traffic drop issues that you are facing due to incomplete sitemap index file. Enjoy using it and remember me in your prayers. Peace and blessings buddies! =)
Why Blogger Sitemap Submits only 20 Pages & 3000 URLS?
Blogger Dynamic sitemap.xml due to some technical cache problem, is generating only 20 sub-pages where each page contains only 150 links (i.e. 20 X 150 = 3000 urls). That means, your blogspot Sitemap Index File will only submit a maximum of 3000 Posts to Google Webmaster Search Console due to this technical bug. Upon exploring the organization of sitemap pages inside the index file (i.e. Parent Sitemap.xml), I came to discover that the blogger server is successfully generating sitemap pages in sequential order, the reason why they are not listed inside the Sitemap Index is because the Parent page is not pinged or refreshed after 20 pages are registered. I am sure I may be sounding a little confusing at this moment to newbies but the illustrations and solutions below will help you understand and fix this ongoing problem where most users complained that webmaster is indexing only 3000 URLS and not indexing the remaining of your blog posts.
If you just heard about Blogger Dynamic sitemaps that I strongly recommend that you first read the following post:
Calculate the number of Sitemaps Pages Your Blog Needs
The Blogger Sitemap Index File groups your blog posts into subpages where each page contains a total of 150 Posts. A new page is created each time your post count inside an existing page exceeds 150.
For example if your blog contains a total of 600 published posts then your sitemap index file will create a total of 4 pages where each page will contain 150 links (i.e. 600/150 = 4 Pages). The pages will be listed inside sitemap.xml in this order:
Note: Your Sitemap Index file is located at Your-Blog.blogspot.com/sitemap.xml
<loc>http://www.Your-Blog.blogspot.com/sitemap.xml?page=1</loc>
<loc>http://www.Your-Blog.blogspot.com/sitemap.xml?page=2</loc>
<loc>http://www.Your-Blog.blogspot.com/sitemap.xml?page=3</loc>
<loc>http://www.Your-Blog.blogspot.com/sitemap.xml?page=4</loc>
Now suppose you have around 717 published blog posts. In this case if you apply old school math then you need to create ( 717/150 = 4.78 ~ 5 Pages ). Always take one page extra if you get a divisional result in decimals. We would have considered only 4 pages if the result would have been exactly 4.00.
Sitemap index will automatically create these pages as long as your posts does not exceed a maximum of 3000. It creates only 20 pages to accommodate those 3000 posts (i.e. 20x150 = 3000). The remaining pages are not listed though created by the server and we will discuss here how to generate those extra pages manually and submit them separately to Google search console.
We need to submit the dynamic sitemap in two ways which are discussed below:
1. Submit Sitemap if your Posts are less than 3000
If your published posts are less than 3000 articles in all then you just need to submit the following sitemap to Google search console and Bing webmaster tools:
http://www.Your-Blog.blogspot.com/sitemap.xml
2. Submit Sitemap if your Posts are greater than 3000
If the count of your published posts is greater than 3,000 then you need to manually submit the subpages using the calculation we did earlier.
Follow this formula:
1 Suppose you have published up to 4,127 posts. Then you need to create subpages for only (4,127 - 3,000 = 1127) Posts. We will call them the leftover posts.
2 Divide the leftover posts by 150 to find how much sitemap pages you need to submit.
1127 / 150 = 7.513 ~ 8 Pages
3 Start the page count from 21 because 20 pages are already included inside the Parent sitemap.xml. So the sitemap pages that we need to submit along with the index sitemap are:
http://www.Your-Blog.blogspot.com/sitemap.xml
http://www.Your-Blog.blogspot.com/sitemap.xml?page=21
http://www.Your-Blog.blogspot.com/sitemap.xml?page=22
http://www.Your-Blog.blogspot.com/sitemap.xml?page=23
http://www.Your-Blog.blogspot.com/sitemap.xml?page=24
http://www.Your-Blog.blogspot.com/sitemap.xml?page=25
http://www.Your-Blog.blogspot.com/sitemap.xml?page=26
http://www.Your-Blog.blogspot.com/sitemap.xml?page=27
http://www.Your-Blog.blogspot.com/sitemap.xml?page=28
The above is a screenshot of the sitemaps I submitted for one of our clients who had more than 11,147 posts. I need to create a total of 55 Pages.
Good news!
If the above method seems quite a lot like elementary math to you then wait for just 6 hours and I will release a PHP tool that will automatically create sitemaps for you. I will release this tool today inshAllah.
Need Help?
Let me know if you need any further clarification or help in calculating your sitemap subpages. I would love to help in this case. Do post your comments below. I hope all those who were encountering the traffic drop issue due to sitemap indexing problems may find this tutorial helpful.
Peace and blessings buddies! =)
Saturday 5 December 2015
Extract YouTube Thumbnails From Blog Posts via JSON
Today's tutorial is first time shared online Alhamdulillah that will discuss the most advanced and unique technique of extracting thumbnails from a YouTube Video Iframe embedded inside your blog posts. Our technique is unique because it will ignore all images inside the post and will only pull out the Iframe Image provided by YouTube and will display it as the featured thumbnail. If no video Iframe was found only then the existing third party images inside the blog post will be considered to play a thumbnail role. We have already discussed the manual method of displaying YouTube thumbnails in blogspot posts and today we will discuss the dynamic method to automatically do the job for you. Although Blogger now provides a default link to YouTube thumbnail in its JSON feed API but due to its low resolution we still need a better dynamic method to do the job for us. Lets get to work!
Note: Click the Button below to see full list of topics under discussion.
Topics List
Location of Thumbnail URL
We will use the second method that we discussed in part#9 to extract an image from inside the post content using the path:
json.feed.entry[i].content.$t
Kindly go through part#9 to know the basic technical details
Display YouTube Featured Thumbnails in Recent Posts Widget
Now comes the coding part. We will use the exact same script that we have shared in part#10. Major modifications made have been highlighted in Purple with white text.
<!-- ######### Writing Callback Function ############# -->
<script type="text/javascript">
//----------------------------Defaults
var ListBlogLink = window.location.hostname;
var ListCount = 5;
var TitleCount = 70;
var ListLabel =" ";
var ChrCount = 80;var ImageSize = 100;
//----------------------------Function Start
function mbtlist(json) {
document.write('<ul class="mbtlist">');
for (var i = 0; i < ListCount; i++)
{
//-----------------------------Variables Declared
var listing= ListUrl = ListTitle = ListConten = ListContent =ListImage =thumbUrl =sk = "";
//----------------------------- Title URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
//----------------------------------- Title Stirng
if (json.feed.entry[i].title!= null)
{
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);
}//----------------------------------- Content Check
ListConten = json.feed.entry[i].content.$t;
ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substr(0, ChrCount);//------------------------------------ Thumbnail Check
// YouTube Thumbnail Search
if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null)
{ var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();
if (youtube_id.length == 11) {
var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'";
}
}
// Blogger Default Thumbnail Searchelse if (json.feed.entry[i].media$thumbnail)
{
thumbUrl = json.feed.entry[i].media$thumbnail.url;sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");
ListImage= "'" + sk.replace("?imgmax=800","") + "'";
}// Support For 3rd Party Images
else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)
{
ListImage = json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];
}else
{
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRS8JlNqJynK19QFPAfjfEF2iNoqGX0_goRZLVHf6QEZio8WEN7NBFxcZ4uUjdqN1_xc21qqxcP3ahJ4LPYczMMuh6dibtZHA3GcKUrrrd8tTraE98gUXZLrzJ1ptr_suFT-6sGP2wqOs/s200/Icon.png'";
}
//----------------------------------- Printing List
var listing = "<li><a href="
+ ListUrl+
"><img src="
+ListImage+
"/></a><a class='mbttitle' href="
+ListUrl+
"target='_blank'>"
+ListTitle+
"</a><span class='icontent'>"
+ListContent+
" ... <a href="
+ListUrl+
" class='imore'>�</a></span></li>";
document.write(listing);
}
document.write("</ul>");
}
</script>
<!-- ######### Invoking the Callback Function ############# -->
<script>
ListBlogLink = "http://www.mybloggertricks.com";
ListCount = 4;
TitleCount = 70;
ListLabel = "Video";
ChrCount = 100;document.write("<script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtlist'></"+"script>");
</script>
<!-- ######### Styles for Look ############# -->
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style>
.mbtlist {list-style-type:none;overflow:hidden}
.mbtlist li {margin:0px auto 20px auto; clear:both; color:#666; font-family:Helvetica; font-size:12px; border-bottom:1px dotted #ddd;padding-bottom:10px;}
.mbtlist .mbttitle {font-family:oswald; font-size:16px; color:#0080ff; font-weight:normal; text-decoration:none;}
.mbtlist .mbttitle:hover {color:#00A5FF;}
font-family:georgia; font-size:15px; font-weight:bold}
.mbtlist div span{margin:0 10px 0 0; display:inline-block;}
.mbtlist span {display:block; margin:5px 0px 0px; padding-right:5px;}
.mbtlist .imore {font-size:16px; font-weight:bold; text-decoration:none; color:#666; line-height: 0.7em;}
.mbtlist img {float:left; margin:0px 10px 10px 0px; border:6px solid #fff; padding:0px; width:100px; height:65px; box-shadow:-1px -1px 4px #777; }
.mbtlist .icontent {text-align:justify;}</style>
OUTPUT:
Note:
If you visit our Label Video, you will notice that the posts also contain images and our blog is displaying those images as thumbnails and not displaying the youTube thumbnail. But with the above advanced widget, you will actually display youTube thumbnails. I will update the Summary plugin that our blog is using shortly.
How it works?
- First we ran a loop to check if a YouTube Iframe actually exists.
- Next we stored the 11 Characters Video ID inside the variable youtube_id using the
.pop()method..pop()method returns the last group match of the regular expression i.e. {11} - the video ID - Finally we inserted the Video ID inside the standard URL structure of YouTube Thumbnails. We stored the Image URL inside ListImage and passed this value for printing.
- That's it!
How to use it?
To use this plugin for your blogs, simply copy paste the code inside a HTML/Javascript widget and replace ListBlogLink and ListLabel with your Blog URL and Label respectively. For more details read part#6.
Need Help?
Let me know if you ran through any problems in understanding the interesting concept shared above. I hope this method will take blogger to the next level and will help young developers to build better widgets for their blogspot blogs. Feel confident to ask any question by posting your comments. Your brother is here for any help needed. =)
Thursday 3 December 2015
Blogger Now Supports Creating Featured Thumbnails for YouTube Videos
While developing a JSON based Plugin for blogger blogs, we observed that Blogger now creates a featured thumbnail image automatically for YouTube videos embedded inside blog posts. This means now you don't need to extract YouTube Thumbnails using an advanced JavaScript method. This is done dynamically by Blogger through its JSON Feed API. In this tutorial I will demonstrate in brief how this thumbnail is created and stored inside a json object. If you are a developer, you may find this discovery extremely interesting because it helps to shorten your code and optimize it for better performance as no search for YouTube thumbnail is required now on your behalf. So far the thumbnail support only exists for YouTube videos, I tested vimeo and dailymotion videos but the thumbnails were not created.
In our coming JSON series we will surely discuss the JavaScript technique that we previously used to develop widgets for clients because though blogger creates an auto thumbnail for YouTube Iframe but the disadvantage of this method is that the thumbnail is in square format having dimensions 72 x 72. Blogger is actually extracting the default small YouTube thumbnail which has dimensions 120 x 90 (pixels).Therefore if you wish to display large HQ thumbnails inside your apps then you may wait for our next tutorial.
If you are new to Blogspot JSON feeds, I would recommend that you at least read part1 and part2 of this tutorial series.
Note: Click the Button below to see full list of topics under discussion.
Topics List
The YouTube Thumbnail is stored inside media$thumbnail
Assuming you already have read how to view your JSON feed in a human readable format, I am sharing below the steps to locate where exactly the thumbnail is stored.
1. Embed a YouTube Iframe inside your blog and publish the post.
2. Copy your new JSON code. In our case we are using a test blog and the url for its JSON feed is:
http://www.facebook-comments-box.blogspot.com/feeds/posts/default?alt=json
3. Next Navigate to JSON > feed > entry
Select the most recent post which of course is inside the element { } 0
4. Expand the node media$thumbnail to see its elements.
From the image above you can observe that Blogger JSON feed provides 4 basic information about the thumbnails. The important among which is the url.
- xmlns$media: This tag provides the link for Media RSS specification directory which provides meta data info for video clips. Currently though it points to search.yahoo.com/mrss/ but it will soon be replaced with rssboard.org/media-rss in future. Full Details
- url: This is the Image link to the default YouTube Thumbnail. Its default size 120 X 9.
- height: default size for height
- width: default size for width
The thumbnail that blogger creates ends with extension default.jpg. If you replace it with 0.jpg, you will get a much larger High Quality thumbnail. We will discuss how to do it in our coming tutorial.
http://img.youtube.com/vi/ht866-K1JeU/default.jpg (120 x 90)
Replace with 0.png for large thumbnails
http://img.youtube.com/vi/ht866-K1JeU/0.jpg (480 x 360 )
Need Help?
For a more advanced approach I will share the JavaScript technique in next part of this tutorial series. Let me know if you have any queries with regard to the above tutorial. I have tested vimeo videos and also dailymotion videos by embedding them in blogspot posts but so far only YouTube thumbnails are supported in Blogger.
