GuruHowTodo: BLOGGER

Blog Archives

<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4mjYJCk2Jn80oT5JCD3krTjMHWL2PWFpYM8sRhFQD_QVcZf25umL8-onSZJCvLJGcaWxiJqUBLyW2fwOOiSyt5RH5FUzJtg2KHuHNkPRSLckPbwLW5NGKmLQdxbNBklEv0TGm2faBbmU/s1600/archive14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="313" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4mjYJCk2Jn80oT5JCD3krTjMHWL2PWFpYM8sRhFQD_QVcZf25umL8-onSZJCvLJGcaWxiJqUBLyW2fwOOiSyt5RH5FUzJtg2KHuHNkPRSLckPbwLW5NGKmLQdxbNBklEv0TGm2faBbmU/s1600/archive14.png" width="320" /></a></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white;">
<span style="color: #222222; font-family: arial, sans-serif;"><span style="font-size: 12.8000001907349px; line-height: 1.5;">Archive is a fundamental element for blogs.It is difficult for the user to get the right article they want when we have a huge number of articles listed. Archive will the search easier and smooth for the user to reach their required article without much scrolling or searching.</span></span></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<span style="font-size: 12.8000001907349px;"><br /></span></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<span style="font-size: 12.8000001907349px;"><br /></span></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
Generally, the structure of Archive is to show the recents posts and the previous posts will be available in the manner the blog Archive is designed. It could be Monthly or yearly basis, category basis. The user now can pick the required article with less effort.</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white;">
<div style="color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
Archive will help you maintain your blog, keep it simple and look attractive. If your blog does not have Archive, then you're missing something important. Once you have it in your blog, it will simplify your viewers search and also it will help authors to skip the duplication of posts.</div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
Have archive widget in google blogger is not that complex, simply following the given steps and you can achieve adding widget into your newly created/existing blogs.</div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
Happy blogging!!!</div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<span style="font-size: 12.8000001907349px;">There are many ways you can add have Archive widget in your blog, But in this tutorial will show you how to easily you can add Archive in to your blog simply following these steps: </span></div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<span style="font-size: 12.8000001907349px;"><br /></span></div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<span style="font-size: 12.8000001907349px;">1. Go to Blogger Home</span></div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<span style="font-size: 12.8000001907349px;">2. Open the existing blogger site from the list, if you don't have create new one clicking "New Blog" button from the left top.</span></div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<span style="font-size: 12.8000001907349px;">3.  Go to Layouts and click on Add Widgets</span></div>
<span style="color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">4.  From </span><span style="font-family: inherit;"><span style="color: #222222;">"</span><span style="line-height: 29px; white-space: nowrap;">Add a Gadget</span>"</span><span style="color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;"> windows select "Blog Archive".</span><br />
<span style="color: #222222; font-family: arial, sans-serif;"><span style="font-size: 12.8000001907349px;"><br /></span></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwG6AJ722_HSgwctTdo0-pmAVI4kevHOL2AEoJhjTkTFSoH2Mtv6nTiSoBkxa7oW3wvE4KC4yLN0LYbBI02Hrt70hk9Mbee4q0RcCk5vmlBW4C38OFbZBuMrvwVPP7IKfteafnTXva2Os/s1600/blogger+archieve.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="369" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwG6AJ722_HSgwctTdo0-pmAVI4kevHOL2AEoJhjTkTFSoH2Mtv6nTiSoBkxa7oW3wvE4KC4yLN0LYbBI02Hrt70hk9Mbee4q0RcCk5vmlBW4C38OFbZBuMrvwVPP7IKfteafnTXva2Os/s1600/blogger+archieve.png" width="640" /></a></div>
<span style="color: #222222; font-family: arial, sans-serif;"><span style="font-size: 12.8000001907349px;"><br /></span></span>
<span style="color: #222222; font-family: arial, sans-serif;"><span style="font-size: 12.8000001907349px;"><br /></span></span>
<span style="color: #222222; font-family: arial, sans-serif;"><span style="font-size: 12.8000001907349px;">5.  Go with default Configure Archive settings and click on Save.</span></span><br />
<span style="color: #222222; font-family: arial, sans-serif;"><span style="font-size: 12.8000001907349px;"><br /></span></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1YXu2IYL92aXicxEA6Ch3Q31gJE0AKniYN-gn1Fh1rXxzSbxuu74DU0HouqMfq07sg3fFyXA1Fle1aHZE5dTWWAO2zJgE2ZZqwWBH1obHFu9cykxTFnwdUo1DYUueUfCMoNExF4zGIiQ/s1600/ConfigureArchive.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1YXu2IYL92aXicxEA6Ch3Q31gJE0AKniYN-gn1Fh1rXxzSbxuu74DU0HouqMfq07sg3fFyXA1Fle1aHZE5dTWWAO2zJgE2ZZqwWBH1obHFu9cykxTFnwdUo1DYUueUfCMoNExF4zGIiQ/s1600/ConfigureArchive.png" width="500" /></a></div>
<div style="text-align: center;">
<span style="color: #222222; font-family: arial, sans-serif;"><span style="font-size: 12.8000001907349px;"><br /></span></span></div>
<span style="color: #222222; font-family: arial, sans-serif;"><span style="font-size: 12.8000001907349px;">6.  Save the changes. That's it, Now open the blog and can see the "Archive Widget" in your blog sidebar.</span></span><br />
<span style="color: #222222; font-family: arial, sans-serif;"><span style="font-size: 12.8000001907349px;"><br /></span></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="color: #222222; font-family: arial, sans-serif;"><span style="font-size: 12.8000001907349px;"><br /></span></span></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<h2>
Conclusion</h2>
<div>
<br /></div>
<span style="font-size: 12.8000001907349px;">Hope you understood the importance of having Archive gadget in your blogs. If you have any type of queries regarding this tutorial, please feel free to let us know.We will try our best to resolve them. If you like this tutorial and find it useful ,then please don’t forget to share this with your friends and social media too.</span></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br />
<br />
<b style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 21.6000003814697px;"><span style="background-color: yellow;">SOURCE: <a href="http://www.blogmaniacs.com/blog-archive-how-to-do-in-blogger/" style="color: #222222;" target="_blank">BlogManiacs.com</a><span id="goog_1358444262"></span><span id="goog_1358444263"></span><a href="https://www.blogger.com/" style="color: #999999; text-decoration: none;"></a></span> </b></div>

Blog Archives

Archive is a fundamental element for blogs.It is difficult for the user to get the right article they want when we have a...

Adding Vertical Floating Sharing Bar To Blogger

<br />
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_pAiav0c8WfBZTwavd6In3URkkBSFZwcGATJ7dZPynedOvIYZr19G6OdGFb3XjDNhCt-wH7n4d-9ZabLtcekN4pH46RgYbkBQ4E5dflYikPIgkF2CzX8IZ1ZVC71ZyawDAXlSzxZNsNs/s1600/verticalSocial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_pAiav0c8WfBZTwavd6In3URkkBSFZwcGATJ7dZPynedOvIYZr19G6OdGFb3XjDNhCt-wH7n4d-9ZabLtcekN4pH46RgYbkBQ4E5dflYikPIgkF2CzX8IZ1ZVC71ZyawDAXlSzxZNsNs/s1600/verticalSocial.png" width="320" /></a></div>
<br />
<br />
We might have seen many popular blogs/websites with a vertical floating sharing widget where Facebook like/Share, Google+, Twitter, Pin it.Now days, social sharing is very important for blogs traffic and popularity. Facebook, Google+, Twitter,Pinterest,Linkedin have many users and its a great opportunity for site owners and bloggers to gain traffic from social networks while sharing the content. So as a blogger/publisher,you should provide a sharing options for your users to share your content.<br />
<br />
<br />
<div style="text-align: center;">
<h2>
<a href="http://guruhowto007.blogspot.in/2015/03/lorum-ipsum.html" target="_blank">DEMO</a></h2>
</div>
<br />
<h2>
How to add Vertical Floating sharing bar to Blogger?</h2>
<div>
<br /></div>
1. Go to Blogger Dashboard > Template > Download a copy of your current template for backup purpose.<br />
2. Click on Edit HTML<br />
3. Click CTRL + F and search the code  <b:includable id='post' var='post'><br />
4. Copy paste the given below code just after<br />
<b:includable id='post' var='post'><br />
<b:includable id="post" var="post"></b:includable><br />
<h2>
Code:</h2>
<pre class="css" name="code"><b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:blog.pageType != "static_page"'>
<style>
.g_social_floating {
    position: fixed;
    bottom: 10%;
    margin-left: -94px;
    padding: 5px 0 0px 0px;
    float: left;
    width: 70px;
    background-color: #f7f7f7;
    z-index: 9999px !important;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    -moz-border-radius: 5px;
    border-bottom: 1px solid #ddd;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.g_social_floating .g_side_social_button {
    width: 60px;
    float: none;
    margin-bottom: 5px;
    height: auto;
}
.g_social_floating .stButton_gradient {
    background: none !important;
    height: 21px !important;
    padding-left: 0 !important;
}
.g_social_floating .st_fblike_vcount {
    margin-left: 5px;
}
.g_social_floating .st_twitter_vcount, .g_social_floating.st_plusone_vcount, .st_email {
    margin-left: 5px;
}
.g_social_floating .chicklets, .g_social_floating .stMainServices {
    background: url(&#39;
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgfeIQIbqHW7U4lFxJ7Lo0SBoLPRFIbsSGFh64xnbfgFA4B4JfrgXv8DNCqbqfIkbSrbSoSAmTCccyi0XDz_5yY9i1Xdtejv55oIPS3SF2ALzMhZqjIxBHL8xDhrOvmQ1_mVK2NjW8jGA/s1600/gc_social_sprite.png'
    ) no-repeat !important;
    width: 45px !important;
    padding: 0 !important;
    height: 19px !important;
}
.st_email .chicklets {
    background-position: 0 -77px !important;
    background-image: url(&#39;
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgfeIQIbqHW7U4lFxJ7Lo0SBoLPRFIbsSGFh64xnbfgFA4B4JfrgXv8DNCqbqfIkbSrbSoSAmTCccyi0XDz_5yY9i1Xdtejv55oIPS3SF2ALzMhZqjIxBHL8xDhrOvmQ1_mVK2NjW8jGA/s1600/gc_social_sprite.png'
    ) !important;
}
.g_social_floating .st_twitter_vcount .st-twitter-counter {
    
}
.g_social_floating  .stButton_gradient {
    border: none !important;
}
.g_social_floating .stBubble_count {
    width: 44px !important;
    font-size: 15px !important;
    font-weight: normal !important;
    padding-top: 7px !important;
    height: 23px !important;
    background: none !important;
}

.st_fblike_vcount {
    margin-bottom: 0px;
    display: block;
}
.st_twitter_vcount {
    margin-bottom: 3px;
    display: block;
}
.st_email {
    margin-bottom: 5px;
    margin-top: 3px;
    display: block;
}
.g_social_floating .st_twitter_vcount .stBubble_count {
    color: #00a6df;
    background-color: #f8fbfc !important;
}
.g_social_floating .stBubble {
    background-position: 21px 31px !important;
    height: 35px !important;
}
</style>
<div class='g_social_floating'>
 <script type='text/javascript'>var switchTo5x=true;</script>
 <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
    <script type='text/javascript'>stLight.options({onhover:false});</script>
 <span class='st_fblike_vcount' displaytext=''/>
 <span class='st_twitter_vcount' displaytext='' st_via='GURUHOWTODO'/>
 <div style='margin:5px 0 0px 0;'>
  <center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
  <a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
  <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
  </script>
  </center>
 </div>
 <div style='margin:0px 0 0 5px;'>
  <span class='st_plusone_vcount' displaytext=''/>
 </div>
 <div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
  <a class='addthis_counter'/>
 </div>
 <script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: &quot;GURU HOWTODO&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#CF152A&quot;
}
 </script>
 <span class='st_email' displaytext=''/>
 <p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'>
  <a href='http://guruhowtodo.blogspot.in/2015/04/adding-vertical-floating-sharing-bar-to.html' style='color:#CAC8C8;'>Widgets</a>
 </p>
</div>
</b:if></b:if>
<span style="font-family: Times New Roman;"><span style="white-space: normal;">
</span></span></pre>
<br />
5. Click CTRL + F and search <b>"GURUHOWTODO"</b> and replace with your twitter username. 6. Finally save all your changes and you're done.<br />
<br />
<br />
<h2>
<span style="color: #38761d;"> Conclusion</span></h2>
<br />
So, this was all about adding Vertical Floating sharing bar to Blogger . If you have any type of queries regarding this tutorial please feel free to let us know, We will try our best to resolve them. If you like this tutorial and find this useful and meaningful then please don’t forget to share this with your friends and social media too.

Adding Vertical Floating Sharing Bar To Blogger

We might have seen many popular blogs/websites with a vertical floating sharing widget where Facebook like/Share, Google+, Twitter, Pin...

How to install SyntaxHighlighter in Blogs

<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsfTw2ujkF_D6xXo93X4_83AZylJvTpuoI-2We-7wZBaFMfr6r2DpGM5ivmF-xH10zO6KR9sHpfTn5bYwl2LQ54kmwwpJ3a00YmDvLqZcbjbhZXbibPdDhb0B3PowwDOcaL6XjcKCZVMg/s1600/SyntaxHighlighter+in+Blogs.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="257" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsfTw2ujkF_D6xXo93X4_83AZylJvTpuoI-2We-7wZBaFMfr6r2DpGM5ivmF-xH10zO6KR9sHpfTn5bYwl2LQ54kmwwpJ3a00YmDvLqZcbjbhZXbibPdDhb0B3PowwDOcaL6XjcKCZVMg/s1600/SyntaxHighlighter+in+Blogs.png" width="400" /></a></div>
When publishing blogger posts/articles which contains text, image, audio and videos in it. but when you're a developer and wants to share your technical code snippets over your blog post with proper color highlighting and according language specific syntax, then unfortunately blogger doesn't really support. So we need to relay on third party tools to fulfill this need. Among many of Code/Syntax Highlighting tools over web, I was attracted to Syntax Highlighter tool by Alex Gorbatchev. Its pretty proven and widely used Syntax Highlighter on websites and over blogs. The big advantage of this tool is that it is built/written on pure Java Script and it can be easily integrated into your blogs.<br />
<br />
<h2>
Syntax Highlighter features:</h2>
<ul>
<li>100% client side, no server dependency</li>
<li>Multiple languages support</li>
<li>Easy to use and deploy, just copy files and link them in your templates</li>
<li>Wide browser support</li>
<li>Very lightweight, compressed core library is 11kb plus whatever brushes you need</li>
</ul>
<br />
<div>
In this tutorial you will learn how to add syntax highlighter on your blog on Google blogger. In order to the add the Syntax highlighter scripts and make it work on your blog follow the steps.</div>
<div>
<div>
<br /></div>
<div>
1. First, take backup of your current blogger template or try with sample template.</div>
<div>
<br /></div>
<div>
2. Navigate to Edit HTML mode. </div>
<div>
<br /></div>
<div>
3. Copy syntax highlighter css code from below location</div>
<div>
<br /></div>
<div>
"<a href="http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css">http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css</a>"</div>
<div>
<br /></div>
<div>
4. Copy and Paste the code above </b:skin> <br />
<div>
<br /></div>
<div>
5. Copy paste the below given code before </head> tag in your template</div>
<br />
<pre class="css" name="code"><script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'/>

</pre>
<br />
<span style="background-color: yellow;">NOTE: Here, You don't need all that brushes , just keep what you really need.</span></div>
<div>
<br /></div>
<div>
6. Copy Paste the below given code before tag.<br />
<pre class="css" name="code"><script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</pre>
</div>
<div>
</div>
<div>
7. Now click the save button to save all the changes you have made to your blogger template.</div>
<div>
</div>
<div>
8. Now lets proceed, how to use it in your posts:</div>
<div>
</div>
<div>
How to write source codes in pre-tag?, well, you need to do is just invoke the classes in pre tag.</div>
<div>
</div>
<div>
<br />
For example, you might wants to java code, you should do this:</div>
<div>
<br />
Some examples of codes in my Blog:</div>
<div>
<b> </b></div>
<div>
1. <a href="http://guruhowtodo.blogspot.in/2015/03/how-to-create-letterpress-text-effect.html">http://guruhowtodo.blogspot.in/2015/03/how-to-create-letterpress-text-effect.html</a><br />
<br /></div>
<div>
<h2>
Examples:</h2>
</div>
<div>
Below is a comparison of a snippet of java code with standard and syntax highlighting :<br />
<br /></div>
<div>
</div>
<h2>
Standard rendering </h2>
<div>
/*</div>
<div>
Java Hello World example.</div>
<div>
*/</div>
<div>
</div>
<div>
public class HelloJava</div>
<div>
{</div>
<div>
 public static void main(String args[])</div>
<div>
{</div>
<div>
   /*</div>
<div>
    Use System.out.println() to print on console.</div>
<div>
    */</div>
<div>
    System.out.println("Welcome to Java!");</div>
<div>
  }</div>
<div>
}</div>
<div>
</div>
<h2>
Syntax highlighting</h2>
<pre class="css" name="code">public class HelloJava
{
public static void main(String args[])
{
/*
Use System.out.println() to print on console.
*/
System.out.println("Welcome to Java!");
}
}
</pre>
<div>
For more usage, demo and more information, Visit: <a href="http://alexgorbatchev.com/wiki/SyntaxHighlighter">http://alexgorbatchev.com/wiki/SyntaxHighlighter</a><br />
<br /></div>
<div>
</div>
<h2>
<span style="color: #38761d;">Conclusion</span></h2>
<div>
<span style="color: #38761d;"><br /></span></div>
<div>
</div>
<div>
So, this was all about How to install SyntaxHighlighter in Blogs. If you have any type of queries regarding this tutorial please feel free do let us know, We will try our best to resolve them. If you like this tutorial and find this useful and meaningful then please don’t forget to share this with your friends and social media too.</div>
</div>

How to install SyntaxHighlighter in Blogs

When publishing blogger posts/articles which contains text, image, audio and videos in it. but when you're a developer and wants t...

How To Remove/Hide "Powered By Blogger" Attribution widget From Blogger Templates

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWYov-f5wt1k27wcf-U5c7FwObrmm3rS4gkjgTzUZ5tIn5Nr4VOSIyYx876_ce3jraFyXun69L1ivJ9JpkwUpp58AmeT3iCMODrYlO9KpTLm6CAetI-XoI0iAQemIIAk_5awip_mjlYDo/s1600/How+To+Remove-Hide+Powered+By+Blogger+Attribution+widget+From+Blogger+Templates.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWYov-f5wt1k27wcf-U5c7FwObrmm3rS4gkjgTzUZ5tIn5Nr4VOSIyYx876_ce3jraFyXun69L1ivJ9JpkwUpp58AmeT3iCMODrYlO9KpTLm6CAetI-XoI0iAQemIIAk_5awip_mjlYDo/s1600/How+To+Remove-Hide+Powered+By+Blogger+Attribution+widget+From+Blogger+Templates.png" width="320" /></a><br />
Blogger is the most popular and powerful platform provided by Internet giant <span style="font-size: large;">GOOGLE</span>. In starting point with Blogger, you can use built-in template designs provided by blogger service as freely to users. By default, All Blogger templates include attribution gadget at the bottom/footer of each template page. But how can we remove it?.<br />
<br />
<h2>
What is Attribution gadget: </h2>
Attribution gadget is the widget in the footer section that says <span style="font-size: large;">"Powered By Blogger"</span>. We can modify the <span style="font-size: x-large;">"Copyright"</span> statement from the Layout widget editing. Unlike the normal widgets, you won't be able to remove/delete this, because it doesn't have a "Remove" button.<br />
Does you violate the conditions of Google by removing "Powered By Blogger" from the blog?. Straight answer is "No!" actually there is no user agreement or any message informing that you don't have any rights to remove or modify.<br />
Now, the question is how to remove or hide from template. Here is the detailed steps to hide or remove "Powered By Blogger" from blogger following below methods.<br />
<br />
<h2>
</h2>
<h2>
</h2>
<h2>
Method I:</h2>
<div>
<br /></div>
Simply hiding the Attribution gadget applying CSS code listed below.<br />
<br />
<h3>
Steps:</h3>
<br />
1. Log into blogger.<br />
2. Goto dashboard > Open Blogger template > Click on Edit Html.<br />
<br />
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0L_oSKLvK-H9MOflqm0mt6zn4Z96PdLK-0UHdUx5N4dpUyYulkU0XkSSGVgUiJyUzj44vU7HZmkWzxfRGdVdPSyLagRhig_Ms85LnGwbagDIEHBNjRjfDMS2U_tyXIncyEb_qEgDmeIs/s1600/EditHTML.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0L_oSKLvK-H9MOflqm0mt6zn4Z96PdLK-0UHdUx5N4dpUyYulkU0XkSSGVgUiJyUzj44vU7HZmkWzxfRGdVdPSyLagRhig_Ms85LnGwbagDIEHBNjRjfDMS2U_tyXIncyEb_qEgDmeIs/s1600/EditHTML.png" width="362" /></a></div>
<br />
3.  Inside the Template Editor find "]]><br />
4. Copy the below given CSS code and paste it before  "]]><br />
<br />
<h2>
CSS Code for hiding the Attribution Widget:</h2>
<blockquote class="tr_bq">
#Attribution1<br />
{<br />
     display:none;<br />
     visibility:hidden;<br />
     font-size:0px;<br />
}</blockquote>
<br />
<br />
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRFfTP1ZumyttiX3g8_9bYBDA0yk1RTjSYLBeu3myPet0R_YnZtrJQMRLt4EI1FFQ6kmFyANvsJs8ir4oVImMZ9gFDlU_x_Z1vLlZmUIPk_abu7AMq4_TDeZVPG4LfEj3J6WuQCh6qU9k/s1600/search+add+css.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRFfTP1ZumyttiX3g8_9bYBDA0yk1RTjSYLBeu3myPet0R_YnZtrJQMRLt4EI1FFQ6kmFyANvsJs8ir4oVImMZ9gFDlU_x_Z1vLlZmUIPk_abu7AMq4_TDeZVPG4LfEj3J6WuQCh6qU9k/s1600/search+add+css.png" width="640" /></a></div>
<br />
5. That's it. Save the template and observe the CSS trick opening view blog. Now the Copyright message "Powered By Blogger" have been successfully hidden from the current template.<br />
<br />
<h2>
Method II:</h2>
<div>
<br /></div>
1. Log into blogger.<br />
2. Goto dashboard > Open Blogger template > Edit Html.<br />
3.  Inside the Template Editon search for <b>"Attribution1"</b><br />
or  Click on "Jump to widget" again click on Attribution1 from the list.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbcOv3sr6vn58vKIkXJM5rlhN99Yw8a6Q9gAN3uV1S4bB7hwfGBoTmG9Y2sz0qqfAdC_R4IFCkCjmarLt1Fbq0k63wkgxAH-1MdLJxJixuW0ydmG12PHIcSAxvoPa4UrEuMtBdb-Xv6JQ/s1600/Attribution+link+removal2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbcOv3sr6vn58vKIkXJM5rlhN99Yw8a6Q9gAN3uV1S4bB7hwfGBoTmG9Y2sz0qqfAdC_R4IFCkCjmarLt1Fbq0k63wkgxAH-1MdLJxJixuW0ydmG12PHIcSAxvoPa4UrEuMtBdb-Xv6JQ/s1600/Attribution+link+removal2.png" width="640" /></a> <br />
<br />
<br />
Find the below line in that editor,<br />
<b:widget id="Attribution1" locked="true" title="" type="Attribution"></b:widget><br />
4. Now change the locked value 'true' to 'false" in the line of code.<br />
5. Save template with the latest changes.<b:widget id="Attribution1" locked="false" title="" type="Attribution"></b:widget><br />
6. Now, Navigate to Layout tab, scroll down and find the Attribution element.<br />
7. Click on Edit element.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5CyGCIOJIM2PUKyHdzvGtbFD0H7yivCq_bwA-x0eHsB31cLrG2xdbXhD020ay5wK6koLKMGizsTFrIpocgWj46Ykz2GdJgxLDwpvB83ymL0jGtouCUB6CH0Kx1_3Y080j0yI0oxvQYrs/s1600/Click+on+Edit.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="63" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5CyGCIOJIM2PUKyHdzvGtbFD0H7yivCq_bwA-x0eHsB31cLrG2xdbXhD020ay5wK6koLKMGizsTFrIpocgWj46Ykz2GdJgxLDwpvB83ymL0jGtouCUB6CH0Kx1_3Y080j0yI0oxvQYrs/s1600/Click+on+Edit.png" width="400" /></a></div>
<br />
<br />
8. Now click on Remove button<br />
<br />
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGGS_wmM1v0QjhUIQK_zUcmivhIvD2fUsm6AQRlLSpxe0qD8hO9Ssu9cgGAWDv_eTVeJZ8eeNQWBOT7BtrJe1_lfHp8i6RDCObTuh8HU-O4PrSeT5urcrhNDKe80foIep4zpXcS6591U8/s1600/click+on+remove.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="271" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGGS_wmM1v0QjhUIQK_zUcmivhIvD2fUsm6AQRlLSpxe0qD8hO9Ssu9cgGAWDv_eTVeJZ8eeNQWBOT7BtrJe1_lfHp8i6RDCObTuh8HU-O4PrSeT5urcrhNDKe80foIep4zpXcS6591U8/s1600/click+on+remove.png" width="320" /></a></div>
<br />
<br />
<span style="font-size: large;">:-) </span>Attribution element has been removed from the layout.<br />
<br />
<blockquote class="tr_bq">
<b>NOTE:</b> If you wants to add custom Attribution, follow the below steps to achieve.</blockquote>
1. Search "footer-3" inside the template editor.<br />
2. Find the below code<br />
<blockquote class="tr_bq">
<b><b:section class="foot" id="footer-3" showaddelement="no"></b:section></b></blockquote>
3. Now change showaddelement='no' to showaddelement='yes' as below<br />
<blockquote class="tr_bq">
<b><b:section class="foot" id="footer-3" showaddelement="yes"></b:section></b></blockquote>
4. Save the current changes and goto Layout tab.<br />
5. Scroll down the page and new element had been present with Add a Gadget.<br />
<br />
<h2>
</h2>
<h2>
Conclusion</h2>
<br />
So, this was all about Remove/Hide "Powered By Blogger" Attribution widget From Blogger Templates. If you have any type of queries regarding this tutorial please feel free to let us know.We will try our best to resolve them. If you like this tutorial and find it useful ,then please don’t forget to share this with your friends and social media too.<br />
<br />
<br />
<br />

How To Remove/Hide "Powered By Blogger" Attribution widget From Blogger Templates

Blogger is the most popular and powerful platform provided by Internet giant GOOGLE . In starting point with Blogger, you can use built-in ...