Showing posts with label Blogger Tips and Tricks. Show all posts
Showing posts with label Blogger Tips and Tricks. Show all posts
Every blogger loves to display their talents to their visitor.The main motivation of a blogger is to busy their visitor in their posts. This also helps your visitor to get the lates posts. The main advantages of this kind of slider that it is light weight and the helps your blog to gain more page view.
Following some simple steps you can easily add Newsticker slider to your blog.
Step 1: Login to blogger.com
Step 2: From your blogger dashboard select Template and click on "Edit Html"
Step 3: Now click on any code section and press Ctrl+F from keyboard. This function allows you to find any code snippet in that page.
Step 4: Now in the search box type "<body>" or you can copy the below tag.
Step 5: Now add the following script just below <body> tag.
Step 6: Now press Ctrl+F and search </head> tag and put the following style just above </head> tag.
Any changes you want to make in in newsticker slider can be done from this style sheet.
Step 7: Now visit to blogger layout and add a widget "HTML/JavaScript"
Step 8: Add the following code in it and save it. Now drag this Widget and place below header section (You can place it anywhere in your page) for optimal use.
To change post title Just change Put "Put your xxxxx post title" with your own post title.
Don't forget to change post description in every list item section.
Hope you have successfully implemented this slider to your blog. Feel free to comment on any problems and suggestion.
Following some simple steps you can easily add Newsticker slider to your blog.
Step 1: Login to blogger.com
Step 2: From your blogger dashboard select Template and click on "Edit Html"
Step 3: Now click on any code section and press Ctrl+F from keyboard. This function allows you to find any code snippet in that page.
Step 4: Now in the search box type "<body>" or you can copy the below tag.
<body>
Step 5: Now add the following script just below <body> tag.
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
function newsticker(){
$('#news-ticker-1 li:first').animate({'opacity':0}, 200, function () {
$(this).appendTo($('#news-ticker-1')).css('opacity', 1); });
}
setInterval(function(){ newsticker () }, 3000)
</script>
Step 6: Now press Ctrl+F and search </head> tag and put the following style just above </head> tag.
<style type='text/css'>
/*Newsticker by studyinfozone*/
.ticker {
width: auto;
overflow: hidden;
border: 1px solid #DDD;
margin: 0;
padding: 0;
list-style: none;
border-radius: 10px;
box-shadow: 0px 0px 5px #DDD;
font-family:Georgia, 'Times New Roman', Times, serif;
}
#ticker_02 {
height: 110px;
background: ghostwhite;
}
.ticker li {
overflow: hidden;
height: 55px;
border-bottom: 1px dotted #DDD;
padding: 5px;
margin: 0px 5px;
}
</style>
Any changes you want to make in in newsticker slider can be done from this style sheet.
Step 7: Now visit to blogger layout and add a widget "HTML/JavaScript"
Step 8: Add the following code in it and save it. Now drag this Widget and place below header section (You can place it anywhere in your page) for optimal use.
<div style="position:relative;"> <div style="position:absolute; right:-35px; top:-5px; z-index:5; font-family:Georgia, 'Times New Roman', Times, serif;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi61MCZREkaCC-tCnBjNHv0Ak41gv6EFsbjcq-dfTS-IiqCi49gShCIV9PGMspawfb_j-0W0b_VyAvPfr9Ej7xH7joogb1yH3zhjlE2fA8a6touQOTzTzeg7jqT2Ar_9zpTz9sDDqjYIzw/s1600/newimage.png" /></div> <div> <ul id="ticker_02" class="ticker"> <li> <a style="text-decoration:underline" href="http://Put_your_first_post_link.html">Put your First post title</a><br /> Download this and more Blogger Templates at . For tutorials, tips and tricks about Blogger visit our Blog.» A normal paragraphEa eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora maluisset definitiones, eam m </li> <li> <a style="text-decoration:underline" href="http://Put_your_second_post_link.html">Put your Second post title</a><br />An ImageDownload this and more Blogger Templates at . For tutorials, tips and tricks about Blogger visit our Blog.» A floating image with link and text Ea eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora </li> <li> <a style="text-decoration:underline" href="http://workshop.rs/2009/12/image-gallery-with-fancy-transitions-effects">Put your Third post title</a><br /> Download this and more Blogger Templates at . For tutorials, tips and tricks about Blogger visit our Blog.» A normal paragraphEa eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora maluisset definitiones, eam m </li> <li> <a style="text-decoration:underline" href="http://workshop.rs/2010/02/moobargraph-ajax-graph-for-mootools/">Put your Fourth post title</a> <br />An ImageDownload this and more Blogger Templates at . For tutorials, tips and tricks about Blogger visit our Blog.» A floating image with link and text Ea eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora </li> </ul> </div> </div>
To change post title Just change Put "Put your xxxxx post title" with your own post title.
Don't forget to change post description in every list item section.
Hope you have successfully implemented this slider to your blog. Feel free to comment on any problems and suggestion.
Creating a sitemap for your blog or website will give instruction to search engine to crawl your web pages. If you are using blogger platform then you will be happy to know that blogger has created a sitemap for you. You can see it by typing http://your_blog_name.blogspot.com/sitemap.xml. Put your own blog URL to see the sitemap.
It is seen that site/blog with a sitemap is more popular than site with no sitemap. Sitemap also help your visitor to look for posts they are looking for. This also increases your page view.So, don't waste your time and learn how Create a blogger HTML sitemap for all blog posts and for specific label.
(1) Login to blogger.com
(2) Select your blog to visit blogger dashboard.
(3) Now click on "Pages".
(4) Click on "New page"
(5) Now click on "HTML" view.
(6) Now add the following code in post body.
(7) Don't forget to replace studyinfozone.blogspot.com with your own blog URL
(8) Now click on Publish and you are done.
Perform 1 to 5 steps as you did earlier and just add the following code.
Replace http://studyinfozone.blogspot.com with your own address and change Label%20Name with your own label name.
Hope you have successfully created the html sitemap for your blog. Any problems you faced or any suggestion you want to give is always welcome.
It is seen that site/blog with a sitemap is more popular than site with no sitemap. Sitemap also help your visitor to look for posts they are looking for. This also increases your page view.So, don't waste your time and learn how Create a blogger HTML sitemap for all blog posts and for specific label.
How to Create a blogger HTML sitemap for all blog posts ?
As I already mentioned that you can either create sitemap for whole contents or for single label. First section will cover for all posts sitemap. Lets follow the simple steps.(1) Login to blogger.com
(2) Select your blog to visit blogger dashboard.
(3) Now click on "Pages".
(4) Click on "New page"
(5) Now click on "HTML" view.
(6) Now add the following code in post body.
<script type=”text/javascript”>
var numposts = 100;
var standardstyling = true;
function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == ‘alternate’) {
posturl = entry.link[k].href;
break;
}}
posttitle = posttitle.link(posturl);
if (standardstyling) document.write(‘<li>’);
document.write(posttitle);}
if (standardstyling) document.write(‘</li>’);
}
</script>
<ul>
<script
src=”http://studyinfozone.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-scrip
t&callback=showrecentposts&max-results=999″></script>
</ul>
(7) Don't forget to replace studyinfozone.blogspot.com with your own blog URL
(8) Now click on Publish and you are done.
How to Create a blogger HTML sitemap for a specific blog label ?
Applying the following code you will be able to show only sitemap from a specific label.Perform 1 to 5 steps as you did earlier and just add the following code.
<script type=”text/javascript”>
var numposts = 100;
var standardstyling = true;
function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == ‘alternate’) {
posturl = entry.link[k].href;
break;
}}
posttitle = posttitle.link(posturl);
if (standardstyling) document.write(‘<li>’);
document.write(posttitle);}
if (standardstyling) document.write(‘</li>’);
}
</script>
<ul>
<script src=”http://studyinfozone.blogspot.com/feeds/posts/default/-/Label%20Name?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999″></script>
</ul>
Replace http://studyinfozone.blogspot.com with your own address and change Label%20Name with your own label name.
[N.B: If your label has any space then put %20 between each word]
Hope you have successfully created the html sitemap for your blog. Any problems you faced or any suggestion you want to give is always welcome.
You may have searched too many blogs for this tutorial, but most of them have some compatibility problems. This related post widget shows related post from blogger label. You can display any number of thumbnails in related post depending on the layout size of your blog. You will get a demo of this tutorial at the bottom of the page.
Step 1: From blogger dashboard select Template and click on "Edit Html"
Step 2: Now click on any code section and press Ctrl+F from keyboard. This function allows you to find anything in that page.
Step 3: Now in the search box type "</head>" or you can copy the below code
Step 4: Now paste the following code above the </head> tag
[
To change number of posts in Related post list change the value of "var relatedPostsNum"
To change number of character in Related post summary list change the value of "var relatedmaxnum"
To change the default image of posts with no image in Related post list, change the value of "var relatednoimage"
]
Step 5: Now we need to style up the thumbnail. To do so copy the following code and paste above "</head> tag.
Step 7: Now add the following code just below the above code snippet
Step 8: Again press Ctrl+F and search the following tag
Step 9: Now above </b:includable> tag add the following tag
Hope this tutorial is useful to you. Don't forget to make any comments regarding any problem and any suggestion.
Step 1: From blogger dashboard select Template and click on "Edit Html"
Step 2: Now click on any code section and press Ctrl+F from keyboard. This function allows you to find anything in that page.
Step 3: Now in the search box type "</head>" or you can copy the below code
</head>
Step 4: Now paste the following code above the </head> tag
<script type='text/javascript'> //<![CDATA[ var relatedTitles = new Array(); var relatedUrls = new Array(); var relatedpSummary = new Array(); var relatedThumb = new Array(); var relatedTitlesNum = 0; var relatedPostsNum = 4; // number of entries to be shown var relatedmaxnum = 75; // the number of characters of summary var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Ex9w3bPVB42sG_zMdLdN7rB15VmDoZKxWMH0rPIvo6rQwceW00p1qQk74a5mBMXOMBcEv_v_3ysx2x5u6KZz3QauvVjodj641rZkp6cHQjqsgmR7ediyL9vGJGHPm8NLy4fZ7aIV7B0/s1600/readme-icon.png"; // this is a default picture for entries with no image //]]> </script> <script type="text/javascript" src="https://googledrive.com/host/0BzIJx1OUtMgzRjFHSVJibVZSSWM"></script>
[
To change number of posts in Related post list change the value of "var relatedPostsNum"
To change number of character in Related post summary list change the value of "var relatedmaxnum"
To change the default image of posts with no image in Related post list, change the value of "var relatednoimage"
]
Step 5: Now we need to style up the thumbnail. To do so copy the following code and paste above "</head> tag.
<style>
.relatedsumposts {
float: left;
padding: 0px 10px;
overflow: hidden;
text-align: center;
/* width and height of the related posts area */
width: 132px;
height: 225px;
border-right: 1px solid #E5E5E5;
display: inline-block;
}
.relatedsumposts:hover {
background-color: #F7F7F7;
}
.relatedsumposts img:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
.relatedsumposts a {
/* link properties */
color: #000;
display: inline;
font-size: 12px;
line-height: 1;
}
.relatedsumposts img {
/* thumbnail properties */
margin-top: 2px;
height: 100px;
padding: 5px;
width: 100px;
border: 1px solid #fff;
-webkit-border-radius: 0px 25px;
-moz-border-radius: 0px 25px;
border-radius: 0px 25px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow: hidden;
}
.relatedsumposts h6 {
/* title properties */
display: table-cell;
height: 3em;
margin: 5px 0 0;
overflow: hidden;
padding-bottom: 2px;
vertical-align: middle;
width: 130px;
}
.relatedsumposts p {
/* summary properties */
border-top: 1px solid #E5E5E5;
border-bottom: 1px solid #E5E5E5;
color: #summarycolor;
font-size: 10px;
height: 4em;
line-height: 1;
margin: 5px 0 0;
overflow: hidden;
padding: 5px 0 15px 0;
text-align: left;
}
#relatedpostssum {
background: #F3F3F3;
height: 200px; /* related posts container */
padding: 5px;
width: 100%;
}
.relatedpoststitle {
font-size: 19px;
font-weight: bold;
border-top: 3px solid #FB8227;
color: #777;
display: inline-block;
padding: 5px 10px;
width: 190px;
float: left;
margin: 0px -200px 0px 20px;
transform: rotate(90deg);
transform-origin: left top 0;
-ms-transform: rotate(90deg);
-ms-transform-origin:left top 0;
-webkit-transform: rotate(90deg);
-webkit-transform-origin:left top 0;
font-family: Gill Sans / Gill Sans MT, sans-serif;
}
</style>
Step 6: Now press Ctrl+F and search the following code<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
Step 7: Now add the following code just below the above code snippet
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=readpostlabels&max-results=50"' type='text/javascript'/>
</b:if>
Step 8: Again press Ctrl+F and search the following tag
</b:includable> <b:includable id='postQuickEdit' var='post'>
Step 9: Now above </b:includable> tag add the following tag
<b:if cond='data:blog.pageType == "item"'>
<div class='post-footer-line post-footer-line-4'>
<div class='relatedpoststitle'>RELATED POSTS</div>
<div id='relatedpostssum'>
<script type='text/javascript'>showrelated();</script>
</div>
<div style='clear:both;'/>
</div>
</b:if>
Step 10: You are almost done. Now what you have to do is Save the Template.Hope this tutorial is useful to you. Don't forget to make any comments regarding any problem and any suggestion.
Every blogger loves to display new things in their blogs and also wants to display recent posts to blog visitors. This can be easily achieved by blog News Ticker. Today I will show you how you can make a simple JavaScript horizontal news ticker for your blog. The script will grab your recent posts list and display as a news ticker.
Step 2: Now from dashboard select "Layout"
Step 3: Now click on "Add a Gadget" and
Step 4: Add Html/JavaScipt
Step 5: Now copy the following code and paste in Html/JavaScript
Step 6: Save it
Step 7: Place this Html/JavaScript widget before "Blog Post" in layout and click on "Save Arrangement".
If you want to change the scroll speed then modify the "w2bScrollDelay" value.
If you want to increase the number of post in ticker then modify the "w2bnumPosts" value.
Replace http://studyinfozone.blogspot.com with your own blog URL
If you want to change text color then modify the "w2blinkcolor" value.
If you want to change the text link hover color then modify the "w2blinkhovercolor" value.
If you want to change the font size then modify the "w2bfontsize" value.
How to add news ticker to my Blog template?
Step 1: Login to Blogger and Select your blogStep 2: Now from dashboard select "Layout"
Step 3: Now click on "Add a Gadget" and
Step 4: Add Html/JavaScipt
Step 5: Now copy the following code and paste in Html/JavaScript
<script type='text/javascript'> var w2bWidth="100"; var w2bScrollAmount="1"; var w2bScrollDelay="150"; var w2bDirection="left"; var w2btargetlink="yes"; var w2bnumPosts="5"; var w2bBulletchar =">>>"; var w2bimagebullet="yes"; var w2bimgurl="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGftDyCi_wEs5Y4ojrHCsMkLQ-zbMvVa7jL6nLW782of9wx9WHWTCgTE2hdC6XaLlImtHqsdzBL228rdZ1ORLD2Mzdi5thG-hP-YI4jlr14abl7oo-1Dxu4MMNHSOvpQsrgYfECVFAcZQ/s1600/NAV2.png"; var w2bfontsize="14"; var w2bbgcolor="transparent"; var w2blinkcolor="333333"; var w2blinkhovercolor="3366CC"; </script><br /> <script type='text/javascript' src='https://www.opendrive.com/files/M18yMTMzNzE2X3hGNmlpXzE4ZmI/smritirogi-rpscroller-v3.js' ></script><br /> <script type='text/javascript' src=" http://studyinfozone.blogspot.com//feeds/posts/default?alt=json-in-script&callback=w2bAdvRecentPostsScrollerv3&max-results=10"></script>
Step 6: Save it
Step 7: Place this Html/JavaScript widget before "Blog Post" in layout and click on "Save Arrangement".
If you want to change the scroll speed then modify the "w2bScrollDelay" value.
If you want to increase the number of post in ticker then modify the "w2bnumPosts" value.
Replace http://studyinfozone.blogspot.com with your own blog URL
If you want to change text color then modify the "w2blinkcolor" value.
If you want to change the text link hover color then modify the "w2blinkhovercolor" value.
If you want to change the font size then modify the "w2bfontsize" value.
It is tough to display any code directly in blog and it is very difficult but obviously not impossible. If you are creating a blog to post some cool coding tutorial or if you are a coder and want to display code to your visitors then Alexgorbatchev syntax highlighter is best for you.
Step 2: Visit template and first backup your blog template and then click on "Edit html".
Step 3: Now click inside html code and press Ctrl + F and search </head>
Step 4: Now Copy the following code and paste before "</head>" tag.
Step 5: Save tour blog template
Step 1: Parse your code first. Use this free online tool to perse your code. Online perse tool.
Step 2: Now visit your blog post and click on html view and add following code
Step 3: publish or update your blog post.
You have now successfully installed syntax highlighter in your blog. Thanks for reading this article. A comment is highly appreciated.
How can you apply syntax highlighter in your blog template?
Step 1: Visit your blogStep 2: Visit template and first backup your blog template and then click on "Edit html".
Step 3: Now click inside html code and press Ctrl + F and search </head>
Step 4: Now Copy the following code and paste before "</head>" tag.
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/> <script type='text/javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all(); </script>
Step 5: Save tour blog template
How can you apply syntax highlighter in your blog post ?
To display any code in your blog first you need to parse your html code. The basic use of parse is to convert your code to a decodable browser code. As an example <li> after parse will become < li >Step 1: Parse your code first. Use this free online tool to perse your code. Online perse tool.
Step 2: Now visit your blog post and click on html view and add following code
<pre class="brush: js"> Put your parsed code here </pre>
Step 3: publish or update your blog post.
You have now successfully installed syntax highlighter in your blog. Thanks for reading this article. A comment is highly appreciated.
Subscribe to:
Posts (Atom)
