Showing posts with label blog. Show all posts
Showing posts with label blog. Show all posts
Tuesday, March 14, 2017
Translate blog post to any language using Google Language Translate widget on your blog
Translate blog post to any language using Google Language Translate widget on your blog
The google language translating widget, helps your readers Translate your blog post to any language among the 12 languages provided. This will make non English speak country also visit your blog, since they can adjust your blog write up to there language for understanding. So let no one say "I dont understand English that why I dont visit your blog".
It can also auto detect language and also translate your blog post to the reader chosen language.
Follow the steps below to add Google language translating widget to blogger.
Step 1.
Login in to your blogger dashboard; select LayOut then next click on AddWidget.
Step 2
Scroll down to HTML/JavaScript.
Now highlight your cursor if on screen touch smartphone simply long press to see the select and copy option.
Now paste the below code you copied into the blank box you see after clicking on AddWidget.
<script type="text/javascript">function showHide(shID) {if (document.getElementById(shID)) {if (document.getElementById(shID+-show).style.display != none) {document.getElementById(shID+-show).style.display = none;document.getElementById(shID).style.display = block;}else {document.getElementById(shID+-show).style.display = inline;document.getElementById(shID).style.display = none;}}}</script><style>.google_translate img {margin: 10px 20px 0px 20px;height: 24px;width: 24px;}.google_translate:hover img {filter:alpha(opacity=0.30);-moz-opacity: 0.30;opacity: 0.30;border:0;}.more {display: none;a.showLink, a.hideLink {text-decoration: none;color: #0880C4;padding-left: 18px;background: transparent(down.gif) no-repeat left; }a.hideLink {background: transparent url(up.gif) no-repeat left;color: #0880C4;}a.showLink:hover, a.hideLink:hover {color: #0880C4;}</style><div><a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open(http://translate.google.com/translate?u=+encodeURIComponent(location.href)+&langpair=auto%7cen&hl=en); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_EoBdDqbSJlQ3vXAgCWlFyaSHFtDBanJkvF-Ax05CeL_M2AHr4h0Cjw8sMUhmoC9YogG6nUhNRi5PJWo2iR6FuPV6i_ZSvgY_khzRz_GpNelUsu4RRjE4NYu6kS8vWxMVwxL4qWODitPy/s1600/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open(http://translate.google.com/translate?u=+encodeURIComponent(location.href)+&langpair=auto%7cfr&hl=en); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1WR7yc6THy3UaDDD4ZckBSIUtWSZz1AdrcpkGNY81TVrYbKswdWiNbKPLH2UEIP2znBG6Lj5uLZG2NaWxLL_bsKW9xrsvN0q4pdtmxquIwmyEi3YOd3C95-GRcpIl9WpuLdX6QZxojfvz/s1600/France.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open(http://translate.google.com/translate?u=+encodeURIComponent(location.href)+&langpair=auto%7cde&hl=en); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkG4Q_P1wZwRe4tLtUnkTwBQQ0oQmEswgdnpQz9gPbAS075rrpvVqYg-msMaO819q7YZ29_yyjmNz9hIlShJsWCGPF3Jc-6YjVLy0SX1sKGluuToX7wjeOlo5CWr2DJT_ZgY-79xgKCPMG/s1600/Germany.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open(http://translate.google.com/translate?u=+encodeURIComponent(location.href)+&langpair=auto%7ces&hl=en); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmYnpVR_mWxzvcK2771JRAS8VAqz-EdBNBhPzFnZWELfdJsWX3uzku5HroyLu683C100OYYsD-M1bLh_D3dYdwFDtBPS5YlMzkS78davnyu0pVzm0TL5QSEmbia_qArqXbJH2lqq9hr5yW/s1600/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a href="#" id="example-show" class="showLink"onclick="showHide(example);return false;">More</a><div id="example" class="more"><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open(http://translate.google.com/translate?u=+encodeURIComponent(location.href)+&langpair=auto%7cit&hl=en); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggCSHeZxKcbkA1kBq5dOxLZvbRpOA3k-AsOXwNALEZQwsSaAE-9hUS7Faya1EETpK__27diy9MXghFMSHAYMJqtie_8FwHWSp1f0rijf6pAY_gwThMLMaM-1RKEevTcRXnQDfW8tpJyD-I/s1600/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open(http://translate.google.com/translate?u=+encodeURIComponent(location.href)+&langpair=auto%7cnl&hl=en); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSWmgjIO_sHi3vPFErCeEDhYzCq_bBC4RcmmfinzVx6_L0Uu2-6w7u9E1Y1t5oAur8zHvbDVUSqtl2RCYHMsXHuIuf4Hwl5oMQ86N3_5dxfdIntD6T1FkZV68tuPlc-zFQVYOf0HgzYZ95/s1600/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open(http://translate.google.com/translate?u=+encodeURIComponent(location.href)+&langpair=auto%7cru&hl=en); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf7m8tzVlRmoIr81lVPnM88ufWYJU-52D3J-si-Fql4JWA-fKJUQUBJIXFiIYwHcrj5DXqMKe2m5-Iq9Nf1nwEXnBnHv_cbJxVfjnjnq7DsYArzDLYXmFvfsD6atxg_Irn8dJyIjS6PHSr/s1600/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open(http://translate.google.com/translate?u=+encodeURIComponent(location.href)+&langpair=auto%7cpt&hl=en); return false;"><img alt="Portuguese" border="0" align="absbottom"title="Portuguese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2QoyxDgPTjv3fiWtOTb-trdT42eGhYYVS1HdIj6HMN1Y31fDjmjkt-iY9jyfYdGSvEoYFIkOqicyK1eqEsPkQ5HLnwrTSs6411JRTVLmPlHkwDuudZSlLtI2TFZvPUxcE9Ht5sqnl37oQ/s1600/Brazil.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open(http://translate.google.com/translate?u=+encodeURIComponent(location.href)+&langpair=auto%7cja&hl=en); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl8VyTJpa6vCoPItOlRd9IruKw03Yyk7zoNGvl5TXZfZbMiZ4RudfNa807rHzA2rBbhVJSPOvWJoVkz5Q1_rMybj9nfCBcHFjg_SfCQTkQ5gLCBEow7vXoWANcJRmgMcdCGYk1ZdsqE0Sb/s1600/Japan.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open(http://translate.google.com/translate?u=+encodeURIComponent(location.href)+&langpair=auto%7cko&hl=en); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiniG-SsgwvhwEhclBXgKnj_oI9sPcG_0p5zG22itUmOY1y1rvRkeQO3eEUhO0a72de1UJOKAJ7wBjtYTKJ3BvzmaJe_a-7p9wrcajq01mDPKdR3Yzq1g6e1gXwXfCCFUBX4U1vb8oXePC3/s1600/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open(http://translate.google.com/translate?u=+encodeURIComponent(location.href)+&langpair=auto%7car&hl=en); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj3IBgKtLW4E2fMeOpMBEHa_VPo2xTB4PKJawmeGPiNIYUo0hxlpFJb8Wr09EY8Lx1SiXQHtCLoxxdA6jpQGaP1OL7ntnFRu_p4fYHMo8JzoQl6Ch3vpg655GhOZWcFlGByP3CP5KTYFBa/s1600/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open(http://translate.google.com/translate?u=+encodeURIComponent(location.href)+&langpair=auto%7czh-cn&hl=en); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYvrKBEs9-geogyz4WnBqk0atUgubBTFdN9AooX98-5mQx-CUOVk3aKtTP5OafvmNcmeO0eilz2fDiugJo84-tkYR_QTH4W9jQBh8kHJGhq8erk5SFsrslC9NfYQ0Bw24JYsqiwnwlag7A/s1600/China.png" style="cursor:pointer;margin-right:8px" width="24"/></a><p><a href="#" id="example-hide" class="hideLink"onclick="showHide(example);return false;">Hide</p>
</div>
</div>
NB; Never you write any thing in the title box provided above the blank box.
Step 4
Click on Save to save the changes you have made in your blogger blog layout.
Comment are attended to immediately, do not hesitate to ask questions and let us know if this trick helped you.
posted from Bloggeroid
Available link for download
Wednesday, March 1, 2017
How to Change your BlogSpot Blog Post Permalink and still Retain the old Permalink Valid
How to Change your BlogSpot Blog Post Permalink and still Retain the old Permalink Valid
All individual blog post have a permalink that differs from that of any blog post in the web today. It is unique in the way it is made.
Read:Regain Access to your hacked Facebook Account
Now how do we change or edit a published blog post permalink? Doing this is a capital yes effective and online need your attention on this post.
But before I take you along I would like to give you an example of what permalink looks like.
Read an Example Below
Below is the permalink of one of my blog post . Now I feel like it is too long and I want to change it.
STEP 1
All i did is convert the link below
https://legendtechny.blogspot.com/2016/09/get-free-blogspot-blog-using-blogger_7.html
To
https://legendtechny.blogspot.com/2016/09/free-blogspot-blog-on-blogger_7.html.
Now looking at the second permalink, I only used key words to make it much short for search engine to display.
How to change a blog post permalink with out breaking the existing link.
Login to your blogger Dashboard, click on post>all.
The list of all your blog post will be displayed on your screen, mark the post you want to change the permalink and click on Revert to Draft.
Use the Edit mode to open post.
Locate the permalink option at the Right mid side of your screen, click on it and select costom.
On the blank box manually input the phrase you want to use as you blog title.
Now click on Publish.
STEP 2
To setup Permalink Redirection
Now if u visit the old parmalink
https://legendtechny.blogspot.com/2016/09/free-blogspot-blog-on-blogger.7.html.
A 404 Error message will display on your screen.
On your blog Dashboard, on the bottom left side of your screen, click on setting> Search Preferences. Under Errors and Redirection > Custom Redirects, click Edit.
If you have made a previous Permalink redirection, you have to click on the "New Redirect" button to make a new URL redirection.
Read:4 must things to do before buying a new laptop or pc.
In blank box written "From" input the old changed URL, then in the box "TO" input the new URL gotten from changing the the old URL.
...see example below.
From: /2014/07/free-BlogSpot-blog-on blogger_7.html
To: /2014/07/blogspot-blog-on-blogger_7.html
Select the ‘Permanent’ check box.
Click Save to Save Changes.
*Read:How to add Masonry grid view on Blogspot Blog Post
Why do we add Redirection.
You might have share the URL of a post in some social network or shared it to friends, for them not to get 404Error message you have to add a URL redirection.
posted from Bloggeroid
Available link for download
Wednesday, February 15, 2017
Create and add Sitemap on your Blog
Create and add Sitemap on your Blog
Not long I wrote on the costly mistake I made while playing with the /robot.txt file, and I promised to drop a tutorial later on how to generate and add a /robot.txt file to your blog.
I vividly remember and can tell that i first setting I made on my blog is to create and add a /robot.txt file to my search preferences, because of the importance.
By default a BlogSpot blog setting permits search engine to index only 26 pages of your blog posts. Now think of when you have written more that that, how do you tell search engine to index other of your pages?.
Therefore a /robot.txt file is needed on your blog, this file tells any search engine what to index on your pages, something like the photos, videos, files e.t.c to index on your blog, now you can see why the /robot.txt file is of importance.
Read
1. How to add WhatsApp share Button to Blog Post
2. How to spot a Samsung Galaxy s7 that has an Exploding Battery
3. (Tecno and Nokia) War between Android and Java OS Phone
How to create and add a /robot.txt file on your blog
1. Click <a href="http://ctrlq.org/blogger">here</a> to open the Sitemap Generator tool.
2. Input your blog URL (starting with http//:) inside the box write *Generate Sitemap under.
3. Now click on the Generate Sitemap button.
Read: Qualities that Makes a Successful blogger
Copy the generated sitemap to your clipboard
Login to your blogger Dashboard > click on Settings, scroll down to see /robot.txt, click the Edit option, a blank box will open, paste the copied sitemap into the box and click on Save.
Read**: How to know your phone specification using the IMEI code
If you are find this tutorial difficult use the comment box to let us know. ...i will help you out.
posted from Bloggeroid
Available link for download
Saturday, January 21, 2017
How to add masonry Gride post view in bloggspot blog
How to add masonry Gride post view in bloggspot blog
Embellished blog improves user experience and makes them stick around you blog, coming back the next time, due to how blog posts are arranged an beautified. The masonry widget blog post view adds more life to a blog home page with it is numerous advantages, it helps web page load quick than before, because only pics with little writing are displayed, it also helps in SEO ranking.
This time I will show you in step by step tutorial on how to setup Masonry Gride post view in your blog, the value is worth the effort used to set it up.
Features of grid style post in blogspot blog; what to expect...
1. Posts will change to grid style when switching to grid mode or view.
2. Automatic read more will be applied on all post.
3. The first picture in the blog post will be used as Thumbnail.
4. Customization of codes leaves the post untampered, only the length can be changed accordingly.
5. Codes are improve to risk(secure) and is used across the board, about 99% of bloggers are using similar code to apply grid post view in blogspot blog.
Advantages of Gride post view in blogger...
1.Increase the load time of your blog home page, because only the post snippet are loaded in certain pages, or caption and thumbnail, might get quicker when pulling up archive, user experience is raised when loading time decreases.
2. Make blog look professional, without the chaos and concern on reading ability. It can leave a visual impact due to the colour and pictures(images)
3. Elevated or increased website ranking, because blog readers have to click in order to view the rest of the post. Page views of site will increase making a better SEO ranking.
4. Irrespective of the change in CSS code to apply the Grid style view and make it rhyme with a blog template, all the effort will give a good result once it is up and running.
Advice...
Make sure you back up your blog template! If any problem arises with your edit, you can then revert or restore the template back to it previous status by restoring the template.
How to back up a blog template.
Click on "Backup/Restore " button
Select the folder where you want to save the template in you computer hard disk, click on "save".
Now you can start editing your blog template, click on the "Backup/Restore" button to revert the template.
Complete guide line to creating Masonry, Grid Style Posts in Blogger.
1. Login in to your blog and select the blog account you want to make these changes, for a multiple account user.
2. Look at the left side of you blog dashboard to locate and click on template.
3. Select the Edit HTML button, to start editing.
4. Move you mouse to the code body and single click, press CTRL+F to open a search bar.
5. Input this code </head> into the search bar. Click the enter button on your keyboard to locate the word match in the HTML code.
Now copy the below code and paste it before the </head> tag.
<script type=text/javascript>posts_no_thumb_sum = 100;posts_thumb_sum = 100;</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, pURL, pTITLE){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = posts_no_thumb_sum;if(img.length>=1) {imgtag = <span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="+ pURL+"><img src="+img[0].src+" /></a></span>;summ = posts_thumb_sum;}else {imgtag = <span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="+ pURL +" title="+ pTITLE+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYVBnT6iO0H4aNLIjO3VfCZRwnTy_m3kQ8qTWb6ewu7RSgUByecTPc6qvj1sndRqO17VabkuMAa4U_p-pHApY-_kpowpAOOE6ZnlMpQSY1DM6WA-o6_BVn-ptYRd634ober4rtbWFYo6xF/s1600/sorry-image-not-available.png" style="margin-top: -30px;" /></a></span>;summ = posts_thumb_sum;}var summary = imgtag + <a href="+ pURL +"> + removeHtmlTag(div.innerHTML,summ) + </a>;div.innerHTML = summary;}//]]></script>
6. Now using the CTRL+F key command inputs this word <data:post.body/> in to the search box to locate word match.
The code might appear in 3 place, replace the second and last code, using the code below.
<b:if cond=data:blog.pageType !="static_page"><b:if cond=data:blog.pageType!= "item"><data:post.body/><script type=text/javascript>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>");</script><b:if cond=data:post.allowComments><a class=comment-bubble expr_href=data:post.addCommentUrl expr_onclick=data:post.addCommentOnclick><data:post.numComments/></a></b:if></b:if></b:if><b:if cond=data:blog.pageType =="item"><data:post.body/></b:if><b:if cond=data:blog.pageType =="static_page"><data:post.body/></b:if>
7. Using the CTRL+F command input this code </head> into the search box and hit the "ENTER" key in your keyboard.
Different styles of masonry grid posts view. Read more below.
Style 1
Simple Grid view.
Copy the below code and paste it above the </head> tag
<b:if cond=data:blog.pageType !="static_page"><b:if cond=data:blog.pageType!="item"><style>#blog-pager {clear:both;}.post {height: auto;width:30.8%;overflow: hidden;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding: 0px !important;}h3.post-title a {font-size:75%;font-family: 'Open Sans Condensed', sans-serif;text-transform:uppercase;padding:0;color:#444;}h3.post-title {height: 26px;text-align:center;width:100%;margin:0!important;padding-bottom: 4%;}.date-header {display: none;}.post-body a {text-decoration: none;}.posts-thumb {width:100%!important;height:190px!important;overflow:hidden;clear:both;}.post-body img {display:block;width:100%!important;height:auto!important;max-width:800px!important;max-height:400px!important;min-width:190px!important;min-height:190px!important;border:none;outline:none;position:relative;margin: 0px;padding:0;}.post-summary-text {color:#777;font-size:100%!important;font-family: 'Open Sans Condensed', sans-serif;text-align:center;clear:both;overflow:hidden;margin:5px 0 0;padding:7% 10%;}a.comment-bubble {color:#fff;text-decoration:none;font-size:100%;font-weight: bold;right:10px;position:absolute;top:165px;text-shadow:1px 2px 1px #333;font-family: 'Open Sans Condensed', sans-serif;}a.comment-bubble:before {content: "Comments: ";}.post-header,.post-footer {display:none;}</style></b:if></b:if><link href=http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300 rel=stylesheet type=text/css/>
Style 2
Grid Layout with Post Summary and Thumbnail
Copy the below code and paste it above the </head> tag
<b:if cond=data:blog.pageType !="static_page"><b:if cond=data:blog.pageType!="item"><style>#blog-pager {clear:both;}.post {height:auto;width:31%;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important;}h3.post-title a {font-size:75%;font-family: 'Open Sans Condensed', sans-serif;text-transform:uppercase;color:#111;padding:0;}h3.post-title {text-align:center;height:22px;position:absolute;bottom:23%;width:100%;z-index:101;overflow:hidden;margin:0!important;padding:10px 0;}.date-header {visibility:hidden;height:0!important;width:0!important;margin:0!important;padding:0!important;}.posts-thumb {width:100%!important;height:190px!important;overflow:hidden;clear:both;border-bottom:3px solid #00C8BD;border-top:3px solid #558ABB;}.posts-thumb:hover {border-top:3px solid #FF664E;border-bottom:3px solid #FEBE36;}.post-body {border-radius:2px;box-shadow:0 0 6px 1px rgba(0,0,0,0.1);position:relative;height:auto;}.post-body a {text-decoration: none;}.post-body img {display:block;width:100%!important;height:auto!important;max-width:800px!important;max-height:400px!important;min-width:190px!important;min-height:190px!important;border:none;outline:none;position:relative;margin: 0px;padding:0;}.post-summary-text {color:#555;background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Yt9B00RiOumU995bovTYCwQ6V247VFJ8rjVjKwsl77nMnXxE692usoTvBcXw0GpiENC3fYSmkpJ7y6sEao3wvtiMDS0xCiXl8GQLXLIrU3SJzVKopWijEbxh7KSDS3NDydlmP2RNK7y3/s1600/blueprint.png);font-size:100%!important;font-family: 'Open Sans Condensed', sans-serif;text-align:center;clear:both;overflow:hidden;margin:5px 0 0;padding:17% 10% 6%;}a.comment-bubble {color:#fff;text-decoration:none;font-size:110%;right:10px;position:absolute;top:165px;text-shadow:1px 2px 1px #333;font-family: 'Pacifico', cursive;}a.comment-bubble:before {content: "Comments: " url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6QcBQL0LmeDmW5_7JT9RaLNYo1NncAJ1kdIFdIbR78cK_5Jgd7Jss-Ro5GPcRwDB_c9xO732MtwAdoUhbNcJcEKfBI61rhNvpAgBziVckEmgoUinY3RkRxCWJdnFY8mQwPItWEBX-o3Oj/s1600/heart-active.png);}.post-header,.post-footer {display:none;}</style></b:if></b:if><link href=http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300 rel=stylesheet type=text/css/><link href=http://fonts.googleapis.com/css?family=Pacifico rel=stylesheet type=text/css/>
Style 3
Grid Layout with Text Snippet on Hover
Copy the below code and paste it above the </head> tag
<b:if cond=data:blog.pageType !="static_page"><b:if cond=data:blog.pageType!="item"><style>#blog-pager {clear:both;}.post {height:auto;width:31%;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important;}h3.post-title a {font-size:95%;font-family: 'Open Sans Condensed', sans-serif;text-transform:uppercase;color:#fff;padding:0;text-shadow: 2px 2px 3px #222;}h3.post-title {height: 22px;text-align:center;position:absolute;top:1%;width:100%;z-index:101;overflow:hidden;margin:0!important;padding:10px 0;}.date-header {visibility:hidden;height:0!important;width:0!important;margin:0!important;padding:0!important;}.posts-thumb {width:100%!important;height:190px!important;overflow:hidden;clear:both;}.post-body {border-radius:2px;box-shadow:0 5px 4px 1px rgba(0,0,0,0.1);position:relative;overflow: hidden;}.post-body a {text-decoration: none;}.post-body img {display:block;width:100%!important;height:auto!important;max-width:800px!important;max-height:400px!important;min-width:190px!important;min-height:190px!important;border:none;outline:none;position:relative;margin: 0px;padding:0;}.post-summary-text {cursor: pointer;background-color: rgba(44, 77, 163,0.8);color:#fff;font-size:120%!important;font-family: 'Open Sans Condensed', sans-serif;clear:both;overflow:hidden;padding:25% 10% 0%;left: 0;position: absolute;text-align: center;vertical-align: bottom;text-shadow: 1px 1px 0 rgba(0, 0, 0,0.1);top: 0;transform: scale(1);opacity: 0;z-index: 10;height: 100%;transition: all 300ms ease-out 0s;}.post-summary-text:hover {opacity: 1;}a.comment-bubble {color:#fff;text-decoration:none;font-size:100%;width: 100%;text-align: center;position:absolute;top:165px;left: 0px;text-shadow:1px 2px 1px #333;font-family: 'Pacifico', cursive;z-index: 122;}a.comment-bubble:before {content: "Comments: ";}.post-header,.post-footer {display:none;}</style></b:if></b:if><link href=http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300 rel=stylesheet type=text/css/><link href=http://fonts.googleapis.com/css?family=Pacifico rel=stylesheet type=text/css/>
Style 4
Masonry Layout (Pinterest Like Grid)
Copy the below code and paste it above the </head> tag
<b:if cond=data:blog.pageType !="static_page"><b:if cond=data:blog.pageType!="item"><style>#blog-pager {clear: both;position: absolute;bottom: 0px;left: 0px;}.blog-feeds {display: none;}.post {height: auto;width: 100%;padding: 0px !important;margin: 0px 0px 30px;display: inline-block;text-decoration: none;}h3.post-title a{font-size: 95%;font-family: 'Open Sans Condensed', sans-serif;text-transform: uppercase;padding: 0px;color: #fff;text-shadow: 3px 2px 2px #222;font-weight: bold;}h3.post-title, .comments h4 {margin: 0px !important;text-align: center;padding: 10px 0px;position: absolute;top: 10px;width: 100%;z-index: 200;}.post-header {display: none;}.date-header {visibility: hidden;height: 0px !important;width: 0px !important;padding: 0px !important;margin: 0px !important;}.posts-thumb {width: 100%;height: auto;overflow: hidden;clear: both;}.post-body {overflow: hidden;position:relative; }.post-body a {text-decoration: none;}.post-body img {display: block;width: auto;height: auto;max-width: 100%;max-height: none;min-width: 100%;min-height: auto;margin: 0px;padding: 0;border: none;outline: none;position: relative;}.post-summary-text {cursor: pointer;background-color: rgba(44, 77, 163,0.8);color:#fff;font-size:120%!important;font-family: 'Open Sans Condensed', sans-serif;clear:both;overflow:hidden;padding:25% 10% 0%;left: 0;position: absolute;text-align: center;vertical-align: bottom;text-shadow: 1px 1px 0 rgba(0, 0, 0,0.1);top: 0;transform: scale(1);opacity: 0;z-index: 10;height: 100%;transition: all 300ms ease-out 0s;}.post-summary-text:hover {opacity: 1;}.post-footer {display: none;}a.comment-bubble {color: #fff;text-decoration: none;font-size: 120%;right: 5px;z-index: 222;position: absolute;top: 5px;text-shadow: 1px 2px 1px #333;font-family: 'Open Sans Condensed', sans-serif;}a.comment-bubble:before {content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6QcBQL0LmeDmW5_7JT9RaLNYo1NncAJ1kdIFdIbR78cK_5Jgd7Jss-Ro5GPcRwDB_c9xO732MtwAdoUhbNcJcEKfBI61rhNvpAgBziVckEmgoUinY3RkRxCWJdnFY8mQwPItWEBX-o3Oj/s1600/heart-active.png);}.main-inner .column-center-inner {-moz-column-count: 3;-moz-column-gap: 1px;-webkit-column-count: 3;-webkit-column-gap: 1px;column-count: 3;column-gap: 1px;width: 100%;padding: 0px !important;}</style></b:if></b:if><link href=http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300 rel=stylesheet type=text/css/>
Now click the "preview" button above to view your edit, if it looks fine, click "save".
Note; the masonry grid style might not work if you have a customized template, old posts will appear in full vertically(top to bottom) instead of left to right. My advice is "start with the simple template"
Use the comment box below to tell me where you are having trouble and I will help you
posted from Bloggeroid
Available link for download
Tuesday, January 17, 2017
Add WhatsApp Share Button to Blogspot Blog
Add WhatsApp Share Button to Blogspot Blog
Not long I wrote on how to use AddThis social share Button on blogger.
Read:Change Blog Post parmalink without Breaking the Old Link
Read:Get back Access to your Hacked Facebook account
Read:Convert, and download YouTube video
...WhatsApp share button do help, when you share a blog post to a WhatsApp friend or group, there is a high chance of the post being re-shared, this can help to skyrocket your blog traffic status.
Read:Add whatsapp Share Button to Blog Post
The use of mobile phone compared to PC is high, and it is certain that the large percentage of your blog visitors are mobile users, this increases the chance of the WhatsApp share button been used by your blog visitors.
Read
Read More Below...
1. Login to your blog dashboard, click on Template.
2. Click on Edit HTML
3. Hover your mouse over to the Blog Template code(see image below), click command CTRL+F on your PC keyboard.
A search box will appear at the top right hand of your screen, copy this code <data:post.body/>
Read:How I flashed my MediaTek Stock ROMs With SP Flash Tool (MTK Android Smartphone
4. Copy the code below and paste above the searched code.
<!
At the top of these screen click on Preview, if the code worked fine, then click on Save.
Use the comment box below to let us know how helpful is this post to you.
posted from Bloggeroid
Available link for download
Subscribe to:
Posts (Atom)