April 2013 - Enet-World | World Best Infotainment Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
</div>
<div dir="ltr" style="background-color: white; color: #343333; font-family: verdana; font-size: 12px; line-height: 20px; text-align: left;" trbidi="on">
<div dir="ltr" trbidi="on">
<div dir="ltr" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_w3W4XoSuZKwTFOchHyzWItdL_BtFVGNxlQ06cClnInh3rTolkIY2tD_A9PXUrmmo5HYnxRcua4DnyslyMaLrt5ewebcJe5r8jauWdaYZyJfotGbBkKhNmPXU8bNzFPpmCaZANtDF9_s/s1600/recent-content-image-slider-for-blogger.png" imageanchor="1" style="color: #26abe3; margin-left: 1em; margin-right: 1em; outline: 0px;"><img border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_w3W4XoSuZKwTFOchHyzWItdL_BtFVGNxlQ06cClnInh3rTolkIY2tD_A9PXUrmmo5HYnxRcua4DnyslyMaLrt5ewebcJe5r8jauWdaYZyJfotGbBkKhNmPXU8bNzFPpmCaZANtDF9_s/s320/recent-content-image-slider-for-blogger.png" style="background-color: transparent; border: none; padding: 0px;" width="320" /></a></div>
<br />Recent posts slider is a best way to show of you blog's recent posts as a slide show.You may see the slider such slider in many wordpress blogs but when coming to blogger it is certainly not much seen.This widget is shared by Abu-Farhan and using my own tricks further I customized this plugin to works perfect with your blog.If you are thinking that customization's will be hard then you are wrong,this gadget is very easy to customize and very easy to add.You don't need to add images,text or any links like other sliders all is Automatic :D.  Here I am giving a tutorial about adding recent post slider to blogger.First take a preview on slider.<br /></div>
<h3 style="border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-color: rgb(207, 21, 42); border-style: solid; border-top-left-radius: 10px; border-top-right-radius: 10px; border-width: 2px 10px; color: #cf152a; font-family: Consolas; font-size: 18px; line-height: 1; margin: 15px 3px; padding: 5px 15px; text-transform: capitalize;">
How To Add This Slider To Blogger?</h3>
<br /><h4 style="border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; color: #cf152a; padding: 4px;">
Step 1 - Applying Styles</h4>
<br /><ol>
<li>Go to Blogger Dashboard > Design > Edit HTML. (In new User Interface It Is - Dashboard > Template)</li>
<li>As always download a copy of your template first.</li>
<li>Now find for ]]></b:skin></li>
<li>Add below code <b>just before</b> <span style="background-color: #f9cb9c;">]]></b:skin></span></li>
</ol>
</div>
<br /><pre><code style="background-attachment: scroll; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNd0MuN6INJtyfnF-09OgzanY6R4BSBmhCEV_z-vpxwpGIuo8S7gNF-Jxiz3cFoaCrVOovvPFkMcwvTLxc58XVlXnTCo4E0cVpQnbfQqUjvqiCjHi8wDVvea2bUC5CDxsmPC7iESnKiJfx/s1600/btsnts-code.png); background-position: 0px 0px; background-repeat: repeat repeat; border: 2px solid rgb(204, 204, 204); clear: both; color: #333333; display: block; font-family: 'Courier new', Courier, mono; line-height: 15px; margin: 10px auto 10px 30px; overflow: auto; padding: 15px; width: 499.7833251953125px; word-wrap: break-word;">/* START EasySlider By helperblogger.com */

#slide-container {
    height: 360px;
    position: relative;
    width: 480px;
}

#slider {
    height: 360px;
    left: 25px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    width: 480px;
    font-family: calibri;
}

.slide-desc {
    background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
    color: #FFFFFF;
    padding: 10px;
    position: absolute;
    right: 0px;
    text-align: left;
    top: 0;
    width: 200px;
    z-index: 99999;
}

.slide-desc h2 {
    display: block;
}

.crosscol .widget-content {
    position: relative;
}

#slider ul, #slider li,

#slider2 ul, #slider2 li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#slider2 {
    margin-top: 1em;
}

#slider li, #slider2 li {
/*

define width and height of list item (slide)

entire slider area will adjust according to the parameters provided here

*/
    width: 480px;
    height: 360px;
    overflow: hidden;
}

#prevBtn, #nextBtn,

#slider1next, #slider1prev {
    display: block;
    width: 30px;
    height: 77px;
    position: absolute;
    left: -30px;
    text-indent: -9999px;
    top: 71px;
    z-index: 1000;
}

#nextBtn, #slider1next {
    left: 520px !important;
}

#prevBtn, #nextBtn, #slider1next, #slider1prev {
    display: block;
    height: 77px;
    left: 0;
    position: absolute;
    top: 132px;
    width: 30px;
    z-index: 1000;
}

#prevBtn a, #nextBtn a,

#slider1next a, #slider1prev a {
    display: block;
    position: relative;
    width: 30px;
    height: 77px;
    background: url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}

#nextBtn a, #slider1next a {
    background: url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
}

/* numeric controls */

ol#controls {
    margin: 1em 0;
    padding: 0;
    height: 28px;
}

ol#controls li {
    margin: 0 10px 0 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 28px;
    line-height: 28px;
}

ol#controls li a {
    float: left;
    height: 28px;
    line-height: 28px;
    border: 1px solid #ccc;
    background: #DAF3F8;
    color: #555;
    padding: 0 10px;
    text-decoration: none;
}

ol#controls li.current a {
    background: #5DC9E1;
    color: #fff;
}

ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {
    outline: none;
}

/* END EasySlider By helperblogger.com */
</code></pre>
<br /><br />You can edit above CSS values as you wish.You may use our <a href="http://editor-btsnts.blogspot.com/" style="color: #017db0; outline: 0px;" target="_blank">HTML Editor</a> to see a live preview of your changes.(Note - If you are editing this gadget in HTML Editor then you have to add all three codes simultaneously in editor)<br /><br /><h4 style="border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; color: #cf152a; padding: 4px;">
Step 2 - Adding JavaScript</h4>
<br /><ul>
<li>Now find for </body> tag</li>
<li>Add below code just <b>after/below</b> <span style="background-color: #ea9999;"></body></span> tag.</li>
</ul>
</div>
<br style="background-color: white; color: #343333; font-family: verdana; font-size: 12px; line-height: 20px; text-align: left;" /><pre style="background-color: white; color: #343333; font-size: 12px; line-height: 20px; text-align: left;"><code style="background-attachment: scroll; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNd0MuN6INJtyfnF-09OgzanY6R4BSBmhCEV_z-vpxwpGIuo8S7gNF-Jxiz3cFoaCrVOovvPFkMcwvTLxc58XVlXnTCo4E0cVpQnbfQqUjvqiCjHi8wDVvea2bUC5CDxsmPC7iESnKiJfx/s1600/btsnts-code.png); background-position: 0px 0px; background-repeat: repeat repeat; border: 2px solid rgb(204, 204, 204); clear: both; color: #333333; display: block; font-family: 'Courier new', Courier, mono; line-height: 15px; margin: 10px auto 10px 30px; overflow: auto; padding: 15px; width: 499.7833251953125px; word-wrap: break-word;">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $("#slider").easySlider({
 auto: true,
 continuous: true
 });
});
//]]>
</script>

</code></pre>
<br style="background-color: white; color: #343333; font-family: verdana; font-size: 12px; line-height: 20px; text-align: left;" /><br style="background-color: white; color: #343333; font-family: verdana; font-size: 12px; line-height: 20px; text-align: left;" /><span style="background-color: white; color: #343333; font-family: verdana; font-size: 12px; line-height: 20px; text-align: left;">Now save your template.</span><br style="background-color: white; color: #343333; font-family: verdana; font-size: 12px; line-height: 20px; text-align: left;" /><br style="background-color: white; color: #343333; font-family: verdana; font-size: 12px; line-height: 20px; text-align: left;" /><h4 style="background-color: white; border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; color: #cf152a; font-family: verdana; font-size: 12px; line-height: 20px; padding: 4px; text-align: left;">
Adding The Gadget</h4>
<ul style="background-color: white; color: #343333; font-family: verdana; font-size: 12px; line-height: 20px; text-align: left;">
<li>Now go to Page Layout</li>
<li>Add a Gadget > HTML/JavaScript</li>
<li>Paste below piece of code and save it.</li>
</ul>
<br style="background-color: white; color: #343333; font-family: verdana; font-size: 12px; line-height: 20px; text-align: left;" /><pre style="background-color: white; color: #343333; font-size: 12px; line-height: 20px; text-align: left;"><code style="background-attachment: scroll; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNd0MuN6INJtyfnF-09OgzanY6R4BSBmhCEV_z-vpxwpGIuo8S7gNF-Jxiz3cFoaCrVOovvPFkMcwvTLxc58XVlXnTCo4E0cVpQnbfQqUjvqiCjHi8wDVvea2bUC5CDxsmPC7iESnKiJfx/s1600/btsnts-code.png); background-position: 0px 0px; background-repeat: repeat repeat; border: 2px solid rgb(204, 204, 204); clear: both; color: #333333; display: block; font-family: 'Courier new', Courier, mono; line-height: 15px; margin: 10px auto 10px 30px; overflow: auto; padding: 15px; width: 499.7833251953125px; word-wrap: break-word;"><div id="slider">
<script style="text/javascript" src="http://code.helperblogger.com/easySlider.min.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>

<script src="http://yourblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>
</code></pre>
<br style="background-color: white; color: #343333; font-family: verdana; font-size: 12px; line-height: 20px; text-align: left;" /><br style="background-color: white; color: #343333; font-family: verdana; font-size: 12px; line-height: 20px; text-align: left;" /><br style="background-color: white; color: #343333; font-family: verdana; font-size: 12px; line-height: 20px; text-align: left;" /><ul style="background-color: white; color: #343333; font-family: verdana; font-size: 12px; line-height: 20px; text-align: left;">
<li>Now replace <code style="color: #000099; font-family: 'Courier new', Courier, mono; font-size: 13px; line-height: normal; padding: 0px 2px; white-space: nowrap;">yourblog.blogspot.com</code> with your own blog url.[Code Line - 10] (Only change blog URL don't change any other things.</li>
</ul>
<br style="background-color: white; color: #343333; font-family: verdana; font-size: 12px; line-height: 20px; text-align: left;" /><br style="background-color: white; color: #343333; font-family: verdana; font-size: 12px; line-height: 20px; text-align: left;" /><ul style="background-color: white; color: #343333; font-family: verdana; font-size: 12px; line-height: 20px; text-align: left;">
<li>To change number of post find this <code style="color: #000099; font-family: 'Courier new', Courier, mono; font-size: 13px; line-height: normal; padding: 0px 2px; white-space: nowrap;">var numposts_gal = 6;</code> line in above code. (Code Line - 4)</li>
</ul>
<br style="background-color: white; color: #343333; font-family: verdana; font-size: 12px; line-height: 20px; text-align: left;" /><br style="background-color: white; color: #343333; font-family: verdana; font-size: 12px; line-height: 20px; text-align: left;" /><ul style="background-color: white; color: #343333; font-family: verdana; font-size: 12px; line-height: 20px; text-align: left;">
<li>If you want to change number of characters to show in description find this piece of code <code style="color: #000099; font-family: 'Courier new', Courier, mono; font-size: 13px; line-height: normal; padding: 0px 2px; white-space: nowrap;">var numchars_gal = 150;</code> (Code Line - 5)</li>
</ul>
<div style="background-color: white; color: #343333; font-family: verdana; font-size: 12px; line-height: 20px; text-align: left;">
Now save your all the changes and you are done.Visit your blog to see this beautiful slide.</div>
</div>

Automatic Recent Posts Slider With jQuery For Blogger

Recent posts slider is a best way to show of you blog's recent posts as a slide show.You may see the slider such slider in many ...

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div style="background-color: white; font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 24px;">
Gallery view means arranging the blog posts one after another side wise as in a magazine. This is also referred to as magazine view. Unlike usual blogs, you can change your blog from the monotonous old look into a magazine side-by-side view.<br />This image shows how post will be arranged side by side.<br /><br /><div class="separator" style="clear: both; text-align: center;">
<a href="http://am-anand.blogspot.com/2011/07/arrange-blog-posts-in-gallery-view-in.html" imageanchor="1" style="color: #4da3ce; margin-left: 1em; margin-right: 1em; outline: 0px; text-decoration: none;"><img border="0" height="230" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_idB5pB0bNW5YOB6aoF8OcTUeN1qjVjK8S5jRrArCDiX7QRFsxiHyRuWNxprOoLSTUflqaLQOs1kPRw8jUTZ88HJorrEwDbl32j4hS9CryNg24CPVwvr9b1LA6uPp7u4b8ilkfSRKmwbB/s400/Gallery+preview.JPG" style="border: 0px; max-width: 100%; padding-top: 5px;" width="400" /></a></div>
<div style="color: #cc0000; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">
<span style="color: black; font-family: inherit;"></span></div>
<div style="color: #cc0000; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">
<span style="color: black; font-family: inherit;"><a href="" name="more" style="outline: 0px;"></a> This is how to do it</span></div>
<div style="color: #cc0000; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">
<span style="font-size: medium;"><b><u>Steps :</u></b></span></div>
<ul>
<li><b>Go to <span style="color: #660000;">Blogger Dashboard => Design => Edit HTML</span></b></li>
<li><b>Look for the piece of code <span style="color: #3d85c6;">]]></b:skin> </span></b></li>
<li><b>Add the following piece of code after this line</b></li>
<li><b> Save your template</b></li>
</ul>
</div>
<b style="background-color: white; color: #3d85c6; font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 24px;"><span style="color: black;">Code Starts  -></span></b><br style="background-color: white; font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 24px;" /><br style="background-color: white; font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 24px;" /><div style="background-color: white; font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 24px;">
<div style="color: #3d85c6;">
<b><i><b:if cond='data:blog.pageType != &quot;static_page&quot;'><br /><style><br /><br />#main-wrapper {<br />margin:0px 0px 0px 8px;<br />float:left;<br />border:0;<br />padding:0px;<br />background:none;<br />overflow:hidden;<br />width:760px;<br />}<br /><br />.post{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyozpp3Ov2hasAlsf83DO5eeec-cQCU_IW_FGdt_7Y6D8G5UhouEfA-QQeyy5fVQk4fWFJXwCsrk7WLTPP-pHLmea5v3-PXnv1KNWCa8Oy1RMNFPZ7yK6qdr-skqcj5Xxu685TMqEv26-W/s1600/post.jpg);<br />background-repeat:no-repeat;width:227px;height:195px;<br />margin:0px 15px 20px 0px;<br />padding:10px 0px 0px 10px;border:0;<br />display:inline;float:left;overflow:hidden;position:relative;}<br /><br />.post img {max-height:151px;max-width:217px;padding-top:8px;}<br />.post h3{font-size:11px;padding-top:5px;margin:0;line-height:6px;}<br />.post-labels{display:none;}.post-author{display:none;}<br />.post-body{padding:0px;}<br /></style><br /></b:if></i></b></div>
<br /><u><b>Code End</b></u><br /><br /><div style="color: #660000;">
<span style="font-size: medium;"><u><span style="font-family: Georgia, 'Times New Roman', serif;"><b>Suggestions</b></span> :</u></span><i> </i></div>
<ul>
<li><b><i>Edit <span style="color: #3d85c6;">width:227px;height:195px</span> in above code to resize the size of each block</i></b></li>
<li><strike><b><i>This piece of code shows bugs when used for formatting individual pages in blog, I'm trying to fix it. If you find any solution do let me know. Works perfectly otherwise </i></b></strike><b><i> "EDIT - Fixed"</i></b></li>
<li><b><i>If you dont want the background image remove the line</i><i style="color: #3d85c6;">background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyozpp3Ov2hasAlsf83DO5eeec-cQCU_IW_FGdt_7Y6D8G5UhouEfA-QQeyy5fVQk4fWFJXwCsrk7WLTPP-pHLmea5v3-PXnv1KNWCa8Oy1RMNFPZ7yK6qdr-skqcj5Xxu685TMqEv26-W/s1600/post.jpg);</i></b></li>
</ul>
</div>
</div>

Arrange blog posts in gallery view in blogger

Gallery view means arranging the blog posts one after another side wise as in a magazine. This is also referred to as magazine view. Unli...