2013 - Enet-World | World Best Infotainment Blog

Automatic Recent Posts Slider With jQuery For Blogger

<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 ...

Arrange blog posts in gallery view in blogger

<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...

Apple iPhone 5 in Bangladesh

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<img alt="Apple iPhone 5 Bangladesh" src="http://www.mobiledokan.com/wp-content/uploads/2013/02/Apple-iPhone-5-Bangladesh-300x300.jpeg" />
</div>
<div style="text-align: center;">
</div>
Apple iPhone 5 - Description and Specifications<br />
<br />
<div style="text-align: left;">
2G Network<span class="Apple-tab-span" style="white-space: pre;"> </span>GSM 850 / 900 / 1800 / 1900 - GSM A1428</div>
<div style="text-align: left;">
                        CDMA 800 / 1900 / 2100 - CDMA A1429</div>
<div style="text-align: left;">
3G Network<span class="Apple-tab-span" style="white-space: pre;"> </span>HSDPA 850 / 900 / 1900 / 2100 - GSM A1428</div>
<div style="text-align: left;">
                       CDMA2000 1xEV-DO - CDMA A1429</div>
<div style="text-align: left;">
4G Network<span class="Apple-tab-span" style="white-space: pre;"> </span>LTE 700 MHz Class 17 / 1700 / 2100 - GSM A1428 or LTE 850 / 1800 / 2100 - GSM                       </div>
<div style="text-align: left;">
                        A1429  LTE 700 / 850 / 1800 / 1900 / 2100 - CDMA A1429</div>
<div style="text-align: left;">
Alert types<span class="Apple-tab-span" style="white-space: pre;"> </span>Vibration, proprietary ringtones</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Battery </div>
<div style="text-align: left;">
Performance<span class="Apple-tab-span" style="white-space: pre;"> </span>Stand-by: Up to 225 h (2G) / Up to 225 h (3G)</div>
<div style="text-align: left;">
                        Talk time: Up to 8 h (2G) / Up to 8 h (3G)</div>
<div style="text-align: left;">
                        Music play: Up to 40 h</div>
<div style="text-align: left;">
Battery Type<span class="Apple-tab-span" style="white-space: pre;"> </span>Non-removable Li-Po 1440 mAh battery (5.45 Wh)</div>
<div style="text-align: left;">
Bluetooth<span class="Apple-tab-span" style="white-space: pre;"> </span>       v4.0 with A2DP</div>
<div style="text-align: left;">
Camera Features<span class="Apple-tab-span" style="white-space: pre;"> </span>Auto-focus, LED flash, Simultaneous HD video and image recording, touch focus, geo-tagging, face detection, panorama, HDR</div>
<div style="text-align: left;">
Camera Pixel<span class="Apple-tab-span" style="white-space: pre;"> </span>3264 x 2448 pixels</div>
<div style="text-align: left;">
Camera Resolution<span class="Apple-tab-span" style="white-space: pre;"> </span>8 Megapixel</div>
<div style="text-align: left;">
Chipset<span class="Apple-tab-span" style="white-space: pre;"> </span>Apple A6</div>
<div style="text-align: left;">
Colors Available<span class="Apple-tab-span" style="white-space: pre;"> </span>Black/Slate, White/Silver</div>
<div style="text-align: left;">
Data Speed<span class="Apple-tab-span" style="white-space: pre;"> </span>DC-HSDPA, 42 Mbps; HSDPA, 21 Mbps; HSUPA, 5.76 Mbps, LTE, 100 Mbps; EV-DO Rev. A, up to 3.1 Mbps</div>
<div style="text-align: left;">
Dimensions<span class="Apple-tab-span" style="white-space: pre;"> </span>4.87 x 2.31 x 0.30 inches</div>
<div style="text-align: left;">
Display Resolution<span class="Apple-tab-span" style="white-space: pre;"> </span>640 x 1136 pixels (~326 ppi pixel density)</div>
<div style="text-align: left;">
Display Size<span class="Apple-tab-span" style="white-space: pre;"> </span>4.0 inches</div>
<div style="text-align: left;">
Display Type<span class="Apple-tab-span" style="white-space: pre;"> </span>LED-backlit IPS LCD, capacitive touchscreen, 16M colors, Corning Gorilla Glass, oleophobic coating</div>
<div style="text-align: left;">
EDGE<span class="Apple-tab-span" style="white-space: pre;"> </span>Yes</div>
<div style="text-align: left;">
Front Camera<span class="Apple-tab-span" style="white-space: pre;"> </span>1.2 MP, 720p@30fps, face detection, FaceTime over Wi-Fi or Cellular</div>
<div style="text-align: left;">
GPRS<span class="Apple-tab-span" style="white-space: pre;"> </span>Yes</div>
<div style="text-align: left;">
GPS Function<span class="Apple-tab-span" style="white-space: pre;"> </span>Yes, with A-GPS support and GLONASS</div>
<div style="text-align: left;">
Graphics Processing Unit (GPU)<span class="Apple-tab-span" style="white-space: pre;"> </span>PowerVR SGX 543MP3 (triple-core graphics)</div>
<div style="text-align: left;">
Internal Memory<span class="Apple-tab-span" style="white-space: pre;"> </span>16/32/64 GB storage</div>
<div style="text-align: left;">
Java<span class="Apple-tab-span" style="white-space: pre;"> </span>No</div>
<div style="text-align: left;">
Loudspeaker<span class="Apple-tab-span" style="white-space: pre;"> </span>Yes</div>
<div style="text-align: left;">
Memory Card Slot<span class="Apple-tab-span" style="white-space: pre;"> </span>No</div>
<div style="text-align: left;">
Messaging<span class="Apple-tab-span" style="white-space: pre;"> </span>iMessage, SMS (threaded view), MMS, Email, Push Email</div>
<div style="text-align: left;">
Multitouch<span class="Apple-tab-span" style="white-space: pre;"> </span>Yes</div>
<div style="text-align: left;">
Operating System<span class="Apple-tab-span" style="white-space: pre;"> </span>iOS 6, upgradable to iOS 6.1</div>
<div style="text-align: left;">
Other Features<span class="Apple-tab-span" style="white-space: pre;"> </span>- Active noise cancellation with dedicated mic</div>
<div style="text-align: left;">
                        - Siri natural language commands and dictation</div>
<div style="text-align: left;">
                       - iCloud cloud service</div>
<div style="text-align: left;">
                       - Twitter and Facebook integration</div>
<div style="text-align: left;">
                       - TV-out</div>
<div style="text-align: left;">
                       - Maps</div>
<div style="text-align: left;">
                       - iBooks PDF reader</div>
<div style="text-align: left;">
                       - Audio/video player/editor</div>
<div style="text-align: left;">
                       - Organizer</div>
<div style="text-align: left;">
                       - Document viewer</div>
<div style="text-align: left;">
                       - Image viewer/editor</div>
<div style="text-align: left;">
                       - Voice memo/dial/command</div>
<div style="text-align: left;">
                       - Predictive text input</div>
<div style="text-align: left;">
Processor<span class="Apple-tab-span" style="white-space: pre;"> </span>Dual-core 1.2 GHz</div>
<div style="text-align: left;">
Radio<span class="Apple-tab-span" style="white-space: pre;"> </span>No</div>
<div style="text-align: left;">
RAM<span class="Apple-tab-span" style="white-space: pre;"> </span>1 GB</div>
<div style="text-align: left;">
Release Date<span class="Apple-tab-span" style="white-space: pre;"> </span>September 2012</div>
<div style="text-align: left;">
Sensors<span class="Apple-tab-span" style="white-space: pre;"> </span>Accelerometer, gyro, proximity, compass</div>
<div style="text-align: left;">
SIM Card Type<span class="Apple-tab-span" style="white-space: pre;"> </span>Nano-SIM</div>
<div style="text-align: left;">
USB<span class="Apple-tab-span" style="white-space: pre;"> </span>v2.0</div>
<div style="text-align: left;">
Video Recording<span class="Apple-tab-span" style="white-space: pre;"> </span>1080p@30fps, LED video light, video stabilization, geo-tagging</div>
<div style="text-align: left;">
Web Browser<span class="Apple-tab-span" style="white-space: pre;"> </span>HTML (Safari)</div>
<div style="text-align: left;">
Weight<span class="Apple-tab-span" style="white-space: pre;"> </span>112 g</div>
<div style="text-align: left;">
Wireless LAN<span class="Apple-tab-span" style="white-space: pre;"> </span>Wi-Fi 802.11 a/b/g/n, dual-band, Wi-Fi hotspot</div>
</div>

Apple iPhone 5 in Bangladesh

Apple iPhone 5 - Description and Specifications 2G Network GSM 850 / 900 / 1800 / 1900 - GSM A1428 CDMA ...

এবার পালা চাইনিজ (China) উইন্ডোজের………..

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<img src="http://www.geek.com/wp-content/uploads/2013/03/ubuntu-kylin-os-china-567x440.jpg" />
</div>
<div style="text-align: center;">
কম্পিউটার চালনায় নিজস্ব অপারেটিং সিস্টেম [ওএস] ছাড়ার ঘোষণা দিয়েছে চীন। ওপেনসোর্স ভিত্তিক ওএস ডেভেলপ শেষ পর্যায়ে রয়েছে বলে এক প্রতিবেদনে জানিয়েছে বিবিসি। উবুন্টুর যাবতীয় সুবিধা যুক্ত এই উইন্ডোজ 'কাইলিন' নামে আত্মপ্রকাশ করতে পারে। কাইলিন ডেভেলপে বেইজিং গবেষণা সংস্থাকে সহায়তা করছে সফটওয়্যার নির্মাতা প্রতিষ্ঠান ক্যানোনিক্যাল।</div>
<div style="text-align: center;">
<img height="376" src="http://blog.laptopmag.com/wpress/wp-content/uploads/2013/03/ubuntu.jpg" width="640" />
</div>
<div style="text-align: center;">
আপাতত ডেস্কটপ কম্পিউটার এবং ল্যাপটপে কাইলিন চালানো যাবে। তবে পরবর্তী সংস্করণগুলোতে দরকারি কাজে সহায়তার জন্য বিল্টইন আকারে চাইনিজ সফটওয়্যার [যেমন- ইন্টারনেট ব্রাউজিংয়ের জন্য ওয়েব ব্রাউজার বাইদু এবং অনলাইন কেনাকাটা বিষয়ক সহকারী তাওবাও] সংযোজিত হবে।</div>
<div style="text-align: center;">
<img height="480" src="http://cdn-static.zdnet.com/i/story/60/80/003385/kylin_china_os.jpg" width="640" />
</div>
<div style="text-align: center;">
</div>
পাশাপাশি চাইনিজ ভাষায় কমান্ড দিতে পারবেন ব্যবহারকারীরা। বিশ্লেষকদের মতে, নিজস্ব উইন্ডোজের সহায়তায় প্রযুক্তি খাতে চীনকে আরও এক ধাপ এগিয়ে রাখবে। সবকিছু ঠিক থাকলে আগামী মাসে উইন্ডোজ কাইলিন অবমুক্ত হবে।<br />
<br />
বি:দ্র: ভালো লাগলে অবশ্যই জানাবেন।<br />
<br />
<div style="text-align: center;">
<br /></div>
</div>

এবার পালা চাইনিজ (China) উইন্ডোজের………..

কম্পিউটার চালনায় নিজস্ব অপারেটিং সিস্টেম [ওএস] ছাড়ার ঘোষণা দিয়েছে চীন। ওপেনসোর্স ভিত্তিক ওএস ডেভেলপ শেষ পর্যায়ে রয়েছে বলে এক প্রতি...

How to Add a Custom Header in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX3BUHvBYDOXW3qWt12RU_THjntNjXkoEZ4Qv4bBSHqQPonDIpUm-Rzc7UbdVPXqZNbF3vX1LMGCw-vuhB-eubiXVEfrZ4TrmMaD_L6a291iKdLTBqzxaj08eq0UD13GnKv4fpRabWy-Y/s1600/BloggerCustomHeader.png" />
</div>
<div style="text-align: center;">
</div>
By default, Blogger offers you a default static blog header including title and description of your blog. Further you can display image or logo with your header too. Does it bugging you? The way how your header is. Do you think you could have done more to your header if you can use a custom header instead of default one? If you are not prefer the default header style, you will seek around a way to customize or add a custom header for your blog. As far as if you have tried it by yourself, you may have find that current blog header is cannot move a bit or remove it. So you might have wonder why you can't remove default Blogger header and add a new custom header to your blog. Still wondering?<br />
<br />
It seems you can't touch or remove default header to use custom header, but you are absolutely wrong until you find how to do it. Blogger made the header element locked by itself to not to remove by general users. So they have to use default header with blog title, description and eligible header image. But it doesn't mean Blogger doesn't let you hack it and implement a new one. You just need to find how to do it. Here we will discuss how to remove your current header safely without affecting to your existing blog and let you implement your own header on it. I hope you would love to go through and add your own custom header to show off to your visitors. Why waiting? Let's start.<br />
<br />
Before You Go:<br />
<br />
* If you wanna know how to customize the existing blog header, read <a href="http://24solutionbd.blogspot.com/2013/03/how-to-customize-your-header-in-blogger.html" target="_blank">How to Customize Your Header in Blogger.</a><br />
<br />
* If you are looking for adding a header image for you blog using dynamic views, read <a href="http://24solutionbd.blogspot.com/2013/03/how-to-add-header-image-for-dynamic.html" target="_blank">How to Add a Header Image for Dynamic Views in Blogger.</a><br />
<br />
<br />
<b>Steps:</b><br />
<br />
1. Navigate to your <a href="http://www.blogger.com/" target="_blank">Blogger Dashboard.</a><br />
<br />
2. Click on your <b>Blog Title</b>.<br />
<br />
3. Move on to <b>Template</b> tab from left pane.<br />
<br />
<img height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVzOy6QNY0kSMLQpS0HVMohjVcLLxV3vH6CESse35Ka6W4jQM7anZfuSXvPZ8qswYbDG8iMKqywbVidJ0YS3SrjnY7lbkFxUNtnJT8xoH72PLO7vxLOT8C2dTKOz16uRccGhfXEngC8Pg/s200/BloggerTemplate.png" width="200" />
<br />
<br />
<b>Note:</b> Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.<br />
<br />
4. Click <b>Edit HTML</b> button.<br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7CyOYuC0iKqntTVP-J6FlHtrS_5T-4Eca3OoHGk6B-MjqW_8-miaa8hZozOGiiQeCTP8veUfu8nTLEQyG2tK-7axZF-Vhyphenhyphennz8ZePIhfzbVGyffdIgzYYsfdmh59HLlKfIBRH2kxnfSGM/s1600/BloggerTemplateEdit.png" />
<br />
<br />
5. Tick on, <b>Expand Widget Templates</b> option.<br />
<br />
<img height="134" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVA6Xmr_tZem07GGLDrGu3wYaOuxZB9MbdFhD4Da0j5s9q9MS9eWY89phgSt4GbAfWERMnsCWnBxyzxVJcKVS4Y5lEw7Ee8_stL2gLs2kJP2opFJoLaISFuuVF8LZ7ysbKgh6TKKcI27k/s320/BloggerExpandWidgetTemplates.png" width="320" />
<br />
<br />
6. Now search for following or similar line of code in your template which relates to your blog header section and alter attributes using regarding attribute information indicated.<br />
<br />
<span style="color: #a64d79;"><b:section class='header' id='header' maxwidgets='1' showaddelement='no'></span><br />
<br />
<u>Color Indication Information</u><br />
<br />
   - Maximum Widgets in Header Section<br />
<br />
This attribute specifies the maximum number of widgets can be included in header section. The default value is <b>1</b>. So, by default, you can't add widgets more than one for your header section. By changing this value, you can allow adding more widgets for header section.<br />
<br />
i.e: <b:section ... maxwidgets='<b>3</b>' ...<br />
<br />
   - Enable/Disable Adding New Elements<br />
<br />
Though you specified a new maxwidgets attribute value, you may not see <b>Add a Gadge</b>t link at Page Elements page until you change this attribute value to <b>yes</b>. Change value to <b>yes</b> as you gonna add new custom header.<br />
<br />
i.e: <b:section ... showaddelement='yes'<br />
<br />
7. Now you can add custom header for your blog. But before you proceed, let's remove current header on your blog. You can find the line similar to below, j<b>ust after the line of code we discussed in step 7.</b><br />
<br />
<span style="color: #a64d79;"><b:widget id='Header1' locked='true' title='Header (Header)' type='Header'/></span><br />
<br />
8. Change the locked attribute value to false.<br />
<br />
i.e: <b:widget id='Header...<b> locked</b>='<b>false</b>'...<br />
<br />
9. Now <b>Save</b> <b>Template</b>.<br />
<br />
10. Go to <b>Layout</b> tab.<br />
<br />
<img height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGvY1leYVyUN_JMZm5usut1pyAiU2eu4OT4l8w4nIrxY646ZFhgz_U9vRoe1C5Ii5E1YDTjubqbjWR9sRGfHrFkpOyszlJOOQYYzRZDC7mVJ5UXQqmdHYndusU81OwAMb-b4rNBCMHhlg/s200/BloggerLayout.png" width="200" />
<br />
<br />
11. Find the Header element of your blog.<br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyJr7dYNePdT7MJV4MlBKxEkDW21emAqp-KcYI9ylhLTqQESNCutqjb8rW4DLkWfFqxJTAMJTCTlQK7Rr90nZkt7Myj5JdluIh4ux2MFNhE9cXH4PQDB9onDZCIDvSQ54cXDYc37WGerU/s1600/BloggerHeader.png" />
<br />
<br />
12. Now click <b>Edit </b>link correspond to the header.<br />
<br />
13. On the immediate pop-up box, click <b>Remove</b> button and <b>confirm</b> removal.<br />
<br />
14. Now your default header has been removed. You can see <b>Add a Gadget</b> link at the place where default header was placed before. <b>Click</b> on the link to implement custom header.<br />
<br />
15. Now find suitable element for header from the gadget list. You can add image box if you prefer adding custom image as your header or else HTML/JavaScript element to implement header with dynamic or static content with the help of your HTML knowledge.<br />
<br />
Note: You can add more gadgets which seems to be suite to your header section (except to the main header) upto the number of widgets you allowed in the header layout code at step 7.<br />
<div>
<br /></div>
</div>

How to Add a Custom Header in Blogger

By default, Blogger offers you a default static blog header including title and description of your blog. Further you can display imag...

How to Add a Header Image for Dynamic Views in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTnzMnT3bqFa-XXUAgnfvzqtYwaUcbGHxrxtkLy6JnrmGpCONp420g5_kIGU-yxZ7jwHdNPTosi03Unodn6DmwG2UfaaaDAKRNucVZy6hBDsj4Qie0_JO7NRmKyvtMgoHG32yDt_OifNQ/s1600/BloggerDVCustomHeader.png" />
</div>
<div style="text-align: center;">
</div>
I know, as a blogger, you care your blog design, template or theme you use on your blog. It's reflecting your personality in a way, don't you think? If you are on Blogger platform, there are different sorts of themes you can use for your blog. Most of them are layout templates where you can arrange widgets on your layout easily and I have no doubt that you have heard about wonderful addition of new templates too - Dynamic Views. Have you been using dynamic views with its all glossy and interactive features and enjoying the latest web technologies it use? If you do, you probably need to take different routes to make some changes there. Now let me ask you - Did you ever wanted to add a header image for your blog configured with dynamic views?<br />
<br />
<br />
<h3>
It's Possible</h3>
<br />
Do you think it's impossible as it doesn't work the way it works for layout templates? But nothing to worry about. You can have a header image you like but there's another way out. The thought didn't crosses my mind to write about. But recently a reader, Dilek Turan, came up with this question for me via a comment under the post that I've written about customizing the blog header. But as the route was not valid for dynamic views, I had to explain it. I was wondering why I didn't talk about it until now, but now here I am gonna help you out with it. Better late than never, right?<br />
<br />
<br />
<h3>
Get Your Header Image Ready</h3>
<br />
Unlike in layout templates, on dynamic views, the room for a header image is limited. Actually it's more like a header bar and you need to make use of the space available there. Let me share some information about how you need to have your header image created before you jump onto the tutorial. Well, before that, take a look at Blogger Buzz blog to see how they have added a header image and it will help avoid confusions as I mention about header here.<br />
<br />
When you selecting a header image, make sure it has height of 65 pixels. No more or less. Keep it that way and consider the width too. You can use the width of your blog for header image or actually don't need to worry much as you can let the image repeat horizontally. However your header image will be placed behind the blog title on header bar. If you feel you need to remove blog title from the header not to interfere with the header image or your header image already have the title mentioned, then here I'll let you know how to get rid of the header title text too. Well, let's talk about all the tricks while proceeding with the steps below. Now time to get your blog a attractive header.<br />
<br />
<h4>
Steps:</h4>
<br />
1. Go to <span style="color: blue;"><b><a href="http://www.blogger.com/" target="_blank">Blogger Dashboard</a></b></span>.<br />
<br />
2. Click on your <b>Blog Title</b>.<br />
<br />
3. Jump to <b>Template</b> tab from left pane.<br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVzOy6QNY0kSMLQpS0HVMohjVcLLxV3vH6CESse35Ka6W4jQM7anZfuSXvPZ8qswYbDG8iMKqywbVidJ0YS3SrjnY7lbkFxUNtnJT8xoH72PLO7vxLOT8C2dTKOz16uRccGhfXEngC8Pg/s1600/BloggerTemplate.png" />
<br />
<br />
Note: Before editing your template, you may want to save a copy of it.<br />
<br />
4. Click <b>Customize</b> button beneath the blog preview.<br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMUNbrmdb2RQTLMCNa7AIJgX9-wPp9mUeAGPRWMgDkl-DXpdCATuaC7kNNyrA33Hx6rbc3l_8Z33j2bsv6cHb2Jf6OPLiQJWod19NF12RoIKwzH7TIpAGP8YYP3BSCLOcJ6eXXANexcVQ/s1600/BloggerTemplateCustomize.png" />
<br />
<br />
5. Now you will be directed to Template Designer. Jump to <b>Background</b> pane.<br />
<br />
<img height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlnluNJLJmW76jwvKcUysojTybfTZYoVk6KpeKh3ROohGOxIa5CJdlL1obVWT0EFo_88YjPuL4yHG26PHGn2jhs6lTiah66ncz6ZGWMlZAzS1RMCAhd8inmBQEdfO_m67Ptp6lLD4Q9DU/s320/BloggerTDBackground.png" width="249" />
<br />
<br />
6. Click on the <b>box</b> under the Background image option.<br />
<br />
<img height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdwaAxeXH3Rxq37LWeS-3GdEJtfS9lcvvEgDswRGMioY8jhPHMMyMJ3azZ1NW0qhWNppzcFG5G0JTawWOsWVBeg-XjGTaHDRHR-7JPX6h-ygoP5fkVoVDTCcjKnLZnDUPZej64yRS4u9M/s320/BloggerDVBackgroundImageBox.png" width="320" />
<br />
<br />
7. Navigate to <b>Upload image</b> from pop up box.<br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTAEMISOjzHP4U34BXOQraLMoA-w2P1ztOkgvoNiH-xSXKg3MswTVX309dpJ_sbntK0cdVIa8QZ0Lm8oaXxJO0EWI2QEvqSyB_HalNT6caYQ6zVVtaPMf4yBUd051CLcdh2dPyOBwYXCI/s1600/BloggerDVBackgroundImageUpload.png" />
<br />
<br />
8. Click <b>Choose File</b> button on right.<br />
<br />
9. <b>Select</b> the header image you wanna use from your computer and click <b>Open</b>.<br />
<br />
<b>Note</b>: Make sure the height of your header image is 65 pixels.<br />
<br />
10. Now you might see your header image is all over the blog. Don't panic. Click <b>Done</b> button on pop up box after the image get uploaded.<br />
<br />
11. Now click on drop down button with <b>Tile</b> option. Select <b>Don't tile</b> if your image fits with the blog width or select <b>Title horizontally</b> if it's shorter than your blog width to tile image horizontally to cover the width.<br />
<br />
<img height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgau_4TxCShQzW55l1LEuN-RJA72EfwaOgLf19caKqA1VXIgpQOJ1S0sQALT9-9_8-Ax8nx6hI1LrVdr38lI8uXeN0YlZ-py-1wUgmsLShKayltL2gJ6Wwy7pC-me0zvMHn9IxF-iZdDN8/s200/BloggerDVTileBackgroundImage.png" width="200" />
<br />
<br />
<br />
<b>More Information:</b><br />
<br />
* Use <b>Alignment </b>drop down button to manage alignment of the header image there.<br />
<br />
<img height="123" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVWplk36ASr8fVAf11-Znf6Hy2RIrmCMs51pvwDTaTTwg1YdXhl4H0XDHSGPhXqP1OQ5gC_B09GD1k7CthtpVi-WnuqIBr9qPMVz3QhWMpTUyDN14FXSdOd3uF4sgUhHBVwgb6ghKvdfk/s200/BloggerDVBackgroundImageAlignment.png" width="200" />
<br />
<br />
* Click <b>Remove image</b> link if you need to remove your current header image.<br />
<br />
<img height="145" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6dDfwLUuyqYVpmHCz9tmw1UnJnSaq7TRnHZXR5-LeNRwGH5yLwLSUGdvAj0kEGZzUuSwBQ1L2-eO2rDYBLiliSaclIvOKctCfkExCx60cKP4Vo6k0y1JO3KOxVj-UnONzFt9X4L7IrS0/s200/BloggerDVRemoveBackgroundImage.png" width="200" />
<br />
<br />
* In case if you wanna get rid of your blog title on header bar, add following CSS style code just before the <b>]]></b:skin></b> line in your template.<br />
<br />
<span style="color: #a64d79;">.header-bar {</span><br />
<span style="color: #a64d79;">display: none !important;</span><br />
<span style="color: #a64d79;">}</span><br />
<br />
Note: If you don't know how to edit your template, read <a href="http://24solutionbd.blogspot.com/2013/03/how-to-edit-your-blogger-template_25.html" target="_blank">How to Edit Your Blogger Template</a>.<br />
<br />
<br />
Enjoy :-)<br />
<div>
<br /></div>
</div>

How to Add a Header Image for Dynamic Views in Blogger

I know, as a blogger, you care your blog design, template or theme you use on your blog. It's reflecting your personality in a way...

How to Edit Your Blogger Template

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh65ObhaBkZclSPAVDg0sQUz70-m60G83DmJQI46-dgzZQocc9oEU8Tnhqzc78DdOf_f_f_FmsRXJsHzH6P732Qs7qyVfjv0hmoQb2YwWZZmpeMzFYeZ5lv81Wp26EOpi3lqqBorW9J_UU/s1600/EditHTMLBlogger.png" />
</div>
<div style="text-align: center;">
</div>
Sometimes you may wonder how do some bloggers take control of their template and customize their templates or position widgets as they need. But there is no wonder at all. All you need is giving up resistance to change and  know what you need to do exactly to result your intended changes. As other websites, Blogger is also based on markup languages. Eventhough you are much familiar with HTML and other markup languages, you may unable to find where you should deploy your expertise in Blogger. Are you still wondering where you find and take charge of your template?<br />
<br />
<br />
<h3>
Trick and Get into Template?</h3>
<br />
You don't have to trick your blog to get into your blog template. Blogger offers you the core template code and let you edit your current blog template directly via its Template Editor. All you need is basic knowledge in HTML and you have to spend some time with template code to understand structure and apply relevant changes. If you are not good with HTML sort of markup languages, it may end up being broken too. However you can reset them if something has gone wrong and also backup feature is available for your template. However if you have a reference which depicts how to do all things, you just need to follow and make necessary changes here.<br />
<br />
<br />
<h3>
What Can I Find in Template?</h3>
<br />
There you can find each and every HTML code and relevant styles used to build up your template including widget templates. If you get to template editor, you just need to modify them as your preference with the knowledge of your markup languages. Different people can customize their template in different ways. However you don't need to touch your template always to make changes to your template. Blogger let you customize background image and color of your blog, add and arrange widgets easily, change blog template without stepping into your template and more. But still there are limitations. So here you will find the way to modify your template directly. Wanna edit your template now?<br />
<br />
<h4>
Steps:</h4>
<br />
1. Go to your <b><a href="http://www.blogger.com/" target="_blank">Blogger Dashboard.</a></b><br />
<br />
2. Click on your <b>Blog Title</b>.<br />
<br />
3. Jump to <b>Template</b> tab.<br />
<br />
<img height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVzOy6QNY0kSMLQpS0HVMohjVcLLxV3vH6CESse35Ka6W4jQM7anZfuSXvPZ8qswYbDG8iMKqywbVidJ0YS3SrjnY7lbkFxUNtnJT8xoH72PLO7vxLOT8C2dTKOz16uRccGhfXEngC8Pg/s200/BloggerTemplate.png" width="200" />
<br />
<br />
Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.<br />
<br />
4. Click <b>Edit HTML</b> button below your blog preview.<br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7CyOYuC0iKqntTVP-J6FlHtrS_5T-4Eca3OoHGk6B-MjqW_8-miaa8hZozOGiiQeCTP8veUfu8nTLEQyG2tK-7axZF-Vhyphenhyphennz8ZePIhfzbVGyffdIgzYYsfdmh59HLlKfIBRH2kxnfSGM/s1600/BloggerTemplateEdit.png" />
<br />
<br />
5. Click <b>Proceed</b> button to view Template Editor.<br />
<br />
6. Tick on, <b>Expand Widget Templates</b> option to expand your element code and see detailed view of your template.<br />
<br />
<img height="134" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVA6Xmr_tZem07GGLDrGu3wYaOuxZB9MbdFhD4Da0j5s9q9MS9eWY89phgSt4GbAfWERMnsCWnBxyzxVJcKVS4Y5lEw7Ee8_stL2gLs2kJP2opFJoLaISFuuVF8LZ7ysbKgh6TKKcI27k/s320/BloggerExpandWidgetTemplates.png" width="320" />
<br />
<br />
7. Now you can <b>add</b> codes or <b>modify</b> content of your template.<br />
<br />
8. Once you done with modifications, <b>Save</b> your template.<br />
<div>
<br /></div>
</div>

How to Edit Your Blogger Template

Sometimes you may wonder how do some bloggers take control of their template and customize their templates or position widgets as they...

How to Customize Your Header in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNWW5q5WmKRbtmqWN_p-iLMPPIWyP7i4LP313sqNLCQFpY-tmWCXjY0woHolc2krUhdYhZunQEKsIXXP37P_xFbkvRp0l_87ZtR0SJ7RGbBdSVoTO9no9Wt0OZ7upTjxDpgzFe34DCHGQ/s1600/CustomizeBloggerHeader.png" />
</div>
<div style="text-align: center;">
</div>
Do you have a blog header on your blog? Does that question sounds funny? Yeah... sort of. I bet you have a header on your blog too. Generally almost all blogs have their own unique header to show off blog title, description or simply to convey the idea behind the blog. In Blogger, you just don't worry about implementing header as it is included right when you create your blog. Basically your blog header will consist of your blog title specified when you create your blog. But it may not the way you wanna set up your blog header. So what if you wanna go beyond and customize your standard Blogger header?<br />
<br />
Blogger doesn't restrict you from customizing header and it offers few prominent options to customize yours. By default, once after creating your blog, you will see only blog title on your header. If you are not prefer to keep it as it is, Blogger let you customize your header in these ways.<br />
<br />
● Show blog title and description on header<br />
<br />
● Show blog title with background header image<br />
<br />
● Show blog title and description with background header image<br />
<br />
● Add an image as header<br />
<br />
● Show header image with blog description<br />
<br />
I got few more queries recently asking how to create headers or customize them. Yeah, it seems much easy for most users. But I see some novices couldn't figure it out at all and confused. So I'd like to contribute them via this post to style their blog header. So if you are wondering about customizing your Blogger header, here you will find how to customize your standard Blogger header with available options.<br />
<br />
<br />
<b>Steps:</b><br />
<br />
1. Go to <a href="http://www.blogger.com/" target="_blank">Blogger Dashboard.</a><br />
<br />
2. Click on your <b>Blog Title</b>.<br />
<br />
3. Jump to <b>Layou</b>t tab.<br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGvY1leYVyUN_JMZm5usut1pyAiU2eu4OT4l8w4nIrxY646ZFhgz_U9vRoe1C5Ii5E1YDTjubqbjWR9sRGfHrFkpOyszlJOOQYYzRZDC7mVJ5UXQqmdHYndusU81OwAMb-b4rNBCMHhlg/s1600/BloggerLayout.png" />
<br />
<br />
4. Now find the <b>Header</b> element just below Favicon element.<br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyJr7dYNePdT7MJV4MlBKxEkDW21emAqp-KcYI9ylhLTqQESNCutqjb8rW4DLkWfFqxJTAMJTCTlQK7Rr90nZkt7Myj5JdluIh4ux2MFNhE9cXH4PQDB9onDZCIDvSQ54cXDYc37WGerU/s1600/BloggerHeader.png" />
<br />
<br />
5. Click <b>Edit</b> link correspond to your header element.<br />
<br />
6. Now you will see the <b>configuration window</b> of your header. Either you can display your <b>blog title and description</b> on header or specify a <b>custom image</b> which is suitable to use as your header. Or you can use mix of them. See what's best suite for you and follow relevant instructions.<br />
<br />
<u><b>Show Blog Title and Description</b></u><br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp_x8ivUuieMy1CG3BpYetYiJHmFQ0XxM9WXV6XvO1i0H92OxRBcLbntGoqe7CQPPOtSeX7zCdnZzsCsNIJgWeYAOtPb_2F6tlkd16oEJeO-HXu0sosCeqoo5SJ1F9UYzHHAPq7sNvq2I/s1600/BloggerHeaderTD.png" />
<br />
<br />
Just enter values for <b>Blog Title</b> and Blog <b>Description fields</b>.<br />
<br />
<b>Note</b>: If you just wanna show only your blog title, leave Blog Description field as blank.<br />
<br />
<br />
<u><b>Show Blog Title and Description with Background Header Image</b></u><br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMHuNO0jJJIzPp8MbXoFhQu1JQuTAlH4jrbw2xyX8fdBbCcZcUOl-9xNj_xlDV__U_pjLXFQOMvVHQwO2S1qA-PlQ79UTqxvc3vcSYII0JIBTuoNP58f3aFPI4BteKD0ud5DAkciQMkwM/s1600/BloggerHeaderTDImg.png" />
<br />
<br />
i. Make sure you have entered values for <b>Blog Title</b> and <b>Blog Description</b> fields.<br />
<br />
Note: If you just wanna show only your blog title, leave Blog Description field as blank.<br />
<br />
ii. Now <b>upload</b> your image from your computer or from web by specifying<b> image URL</b> in relevant field.<br />
<br />
Note: If you believe your image is much wider than your blog width, you can select <b>Shrink to fit </b>option <b>before</b> upload or specify image URL, to shrink image and adjust automatically for header.<br />
<br />
iii. Now select <b>Behind title and description</b> option under Placement.<br />
<br />
<br />
<b><u>Add an Image as Header</u></b><br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVFsOB69fpt_OJECnYSSlk-U6z2HcgMWuBnxwQRbS69U7ogtM1WOKvHAkAQHveHaEzmiZg8E5ttPUK6IvKj0I85FDHe_AQSOr0lH0uPW-0JavSrLZ7-hzHQexYfOPtl8xhUFb9y2jpmC4/s1600/BloggerHeaderImg.png" />
<br />
<br />
i. <b>Upload</b> your image from your computer or from web by specifying <b>image URL</b> in relevant field.<br />
<br />
<b>Note</b>: If you believe your image is much wider than your blog width, you can select <b>Shrink to fit</b> option <b>before</b> upload or specify image URL, to shrink image and adjust automatically for header.<br />
<br />
<br />
ii. Now select <b>Instead of title and description</b> option under Placement.<br />
<br />
<br />
<u><b>Add Header Image and Place Blog Description Beneath the Image</b></u><br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCpwyjSa9_HWeuJnw_AYXya7iSQZYgCj0RsLOaOBtknt1baff2UJCnvlphCSuEFvopfZ68X1z-oVA8FCYjIrPnSFwhzDhK8NljMJKpWIKajH2HbVPJUApWpHemTVBJl8eRp3KkElWvKAY/s1600/BloggerHeaderImgD.png" />
<br />
<br />
i. <b>Upload</b> your image from your computer or from web by specifying image URL in relevant field.<br />
<br />
<b>Note</b>: If you believe your image is much wider than your blog width, you can select <b>Shrink to fit</b> option <b>before</b> upload or specify image URL, to shrink image and adjust automatically for header.<br />
<br />
<br />
ii. Now select <b>Have description placed after the image</b> option under Placement.<br />
<br />
<br />
7. Now <b>save</b> your header element.<br />
<br />
8. <b>Preview</b> your blog and see how it goes.<br />
<div>
<br /></div>
</div>

How to Customize Your Header in Blogger

Do you have a blog header on your blog? Does that question sounds funny? Yeah... sort of. I bet you have a header on your blog too. Ge...

How to setup Microsoft Office 2013 KMS Host on Windows Server 2012

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
</div>
<b>Overview:</b><br />
The KMS activation process for Microsoft Office 2013 is the same as what it was for Microsoft Office 2010. However, the interface to setup the KMS host for Microsoft Office 2013 on a Windows Server 2012 has been updated to use the Volume Activation Tools.<br />
<br />
<b>Prerequisites:</b><br />
Microsoft Office 2013 running on both Windows 7 and Windows 8 client computers can be activated by installing the Microsoft Office 2013 Volume License Pack on a Windows Server 2012, or on one of the other supported host systems including Windows 7 VL edition, Windows 8 VL edition and Windows Server 2008 R2.<br />
<br />
<b>Installation:</b><br />
<br />
STEP 1: Download the Microsoft Office 2013 Volume License Pack from the Microsoft Download Center (<b><span style="color: blue;"><a href="http://www.microsoft.com/en-us/download/details.aspx?id=35584" target="_blank">MSDL</a></span></b>) site:<br />
<br />
<br />
<br />
STEP 2: Double-click the downloaded EXE to run it:<br />
<br />
<img src="http://blogs.technet.com/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-74-72/5102.Cmd.PNG" />
<br />
<br />
<br />
<br />
STEP 3: Once the EXE finishes running, the Volume Activation Tools wizard will appear:<br />
<br />
<br />
<img src="http://blogs.technet.com/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-74-72/6087.Screen1.PNG" />
<br />
<br />
<br />
STEP 4: On the next screen, choose Key Management Service (KMS) and browse to, or specify the name of, the system running Key Management Service. Typically, this would be the system you are running the Volume Activation Tools on:<br />
<br />
<img src="http://blogs.technet.com/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-74-72/3666.Screen2a.PNG" />
<br />
<br />
<br />
<br />
STEP 5: Next, enter the KMS host (CSVLK) key:<br />
<br />
<br />
<img src="http://blogs.technet.com/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-74-72/0827.Screen3a.PNG" />
<br />
<br />
<br />
STEP 6: Choose activation method, online or phone:<br />
<br />
<br />
<img src="http://blogs.technet.com/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-74-72/6087.Screen4a.PNG" />
<br />
<br />
<br />
STEP 7: Activation Succeeded:<br />
<br />
<img src="http://blogs.technet.com/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-74-72/4721.Screen5.png" />
<br />
</div>

How to setup Microsoft Office 2013 KMS Host on Windows Server 2012

Overview: The KMS activation process for Microsoft Office 2013 is the same as what it was for Microsoft Office 2010. However, the interf...

Eject and Close CD/ DVD Tray by Mouse!

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<img alt="Eject and Close CD tray" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDqbFc4dAeQuTQOSxgMXiCUCtbHJ31x-tYwMsBWEXvo1wd81OcCTRe1wVJl-n4R6Afp3RcodjLRVFAn2Tkp0ofhhYfrB1aLweZpknrgA4T4qJ2nhVlScf24TLtSrKwyEy8I9mQ7svU/s320/Open-Close-CD.png" width="320" />
</div>
<div style="text-align: center;">
</div>
Dear Friends! Today I will share a small soft with you. Soft means 22 KB. And its zipped size is just 8 KB! This software is made for handling your CD/ DVD tray.<br />
<br />
You can open your CD/ DVD tray by pressing the button or by ejecting option from My Computer. But you can't close it by mouse click from My Computer. With this software you can open or close your CD/ DVD drive just by mouse click!<br />
<br />
You can place this software anywhere you like. Maybe you like to keep it on your Desktop. This application supports all running version of Windows:<br />
Windows XP<br />
Windows Vista<br />
Windows 7 and 8<br />
Now do the following to use this cute soft:<br />
Download the zipped folder from the link below.<br />
Unzip it.<br />
Keep it on your Desktop<br />
Double click to eject CD/ DVD tray, and click twice again to close it.<br />
<br />
<b>Tips: If you're using Windows 7 or 8 then right click on it and select pin to task bar. Now you will see a quick link of this software on your task bar. And you will be able to close and open your CD/ DVD tray just by single click! </b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://sites.google.com/site/munnamark/eject-close/Eject%20and%20Close.zip?attredirects=0&d=1" target="_blank"><img border="0" height="104" src="http://3.bp.blogspot.com/-1OIPBeJfM6E/UJWOXZrPY0I/AAAAAAAAAEY/C-XbrgnUvt8/s200/Download_button.png" width="200" /></a></div>
<div>
<br /></div>
</div>

Eject and Close CD/ DVD Tray by Mouse!

Dear Friends! Today I will share a small soft with you. Soft means 22 KB. And its zipped size is just 8 KB! This software is made for ...

Self Assessment Test by Brain Works !!

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<img alt="Self Assessment Test to evaluate brain usage" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKZ0YY60z0pUibnBwcj_H2s61KAEadaDc7JR6OiJEay5yaQ8KvCUHw7gdCvNtB2dKQUIJe2uk17YbmAFs5kPnj5ljIXEa_rKRulkmZkpzhKZIUjZ4xt-S7ZkEfE6Zmdz0ElnZaypqw/s320/Brain.GIF" width="294" /></div>
<div style="text-align: center;">
</div>
<br />
Today I'm gonna talk about something different. It can be compared to a psychological test. If you take this test you will be able to know which part of your brain works more than other parts. How you respond to new situations or experiences.<br />
<br />
This test will also help you to realize what will be the effective learning system for yourself. It will show you how you use the parts of your brain and by what percentage.<br />
<br />
This self assessment test is prepared by Synergistic Incorporation Ltd.<br />
<div style="text-align: left;">
</div>
<ul style="text-align: left;">
<li><b>Download</b> the zipped file from the link below and <b>unzi</b>p it. </li>
<li>Click twice on <b>Brain.exe</b> file.</li>
<li>Now you will see the Welcome Screen. Click anywhere or <b>press any key to continue</b>.</li>
<li><b>Enter Your Name</b> and press Enter.</li>
<li>Read the Introduction message if you want or <b>press any key to continue</b>.</li>
<li>Another message may appear. Read this or skip. Reading will increase your understanding of this software. </li>
<li>Now you've to answer 20 questions. Answer all the questions. You can use mouse or press A, B or C to answer a question. (<b>Remember: There is no right or wrong answer</b>)</li>
<li>When you finish you will see an image of your <b>brain usage</b>. Focus on your percentage of Auditory, Visual, Left and Right brain usage. </li>
<li>Then hit on <b>Personal Evaluation </b>and read the <b>full report</b> about your brain. That's it. </li>
</ul>
<br />
<br />
Note: When you run this application on your PC you can't close it, or go to the desktop. <b>To close this program press Alt + F4.</b> And simply press <b>Start + D to go to the Desktop</b>.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://sites.google.com/site/munnamark/software/BRAIN.zip" target="_blank"><img border="0" height="104" src="http://3.bp.blogspot.com/-1OIPBeJfM6E/UJWOXZrPY0I/AAAAAAAAAEY/C-XbrgnUvt8/s200/Download_button.png" width="200" /></a></div>
<div>
<br /></div>
</div>

Self Assessment Test by Brain Works !!

Today I'm gonna talk about something different. It can be compared to a psychological test. If you take this test you will be able...

Download Free Flash Game: Flamingo Drive Download

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<img alt="Yet in Africa Flamingo Drive Screen Shots" height="476" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizX5oJ1fzSivB_rGIULfjhoo_7RypZ1WEOZcqX953o6K6o6jXZrDqVCAZZTYJ6_61NyU0qqVQl3gxBvtiWrWzuXiUSKLqANN3-3V_dT0_cgZ_ls5_HR71kteudZKJxSE4oH6KoWrwf/s640/Capture.JPG" width="640" />
</div>
<div style="text-align: center;">
</div>
Gamers love to play large games like GTA, NFS, IGI. But still few of you may like to play Flash Games like me. Though I love to play Racing, Action or Cricket but still I've a great attraction to small Flash Games. Today I'm gonna share such a game with you. It is named as Yet in Africa- Flamingo Drive. You can download this for free!<br />
<br />
This game is very small in size. You've download a zipped file which is less than 2 MB. It is a flash game. You've to operate it by mouse.<br />
<br />
Download the zipped file from the link below and unzip it.<br />
Now click twice on Flamingo Drive to run the game.<br />
Just at the right bottom corner you will see the Play button. Hit this 4 times.<br />
Now you're ready to play.<br />
You've 5 chance available to hit.<br />
In each chance you've to click twice. The first click will set your direction. And the second one will set your power.<br />
You can also see the preview just at the bottom of the game.<br />
Play n Enjoy!<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://sites.google.com/site/munnamark/flamingo-drive/Flamingo%20Drive.zip" target="_blank"><img border="0" height="104" src="http://3.bp.blogspot.com/-1OIPBeJfM6E/UJWOXZrPY0I/AAAAAAAAAEY/C-XbrgnUvt8/s200/Download_button.png" width="200" /></a></div>
<div>
<br /></div>
</div>

Download Free Flash Game: Flamingo Drive Download

Gamers love to play large games like GTA, NFS, IGI. But still few of you may like to play Flash Games like me. Though I love to play R...

Activate Windows 8 Just by Double Click (All Versions) !!!

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<img height="315" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxhu4CZn2N32YsrHHXOLgpfGwTWADt94KyajIieingLoW8cScrmER38-TmWbhPcfSZ9BOs_7YQQ7Bf9Vj87ZQg32MIV5s_j7lQ8zMjYG9RelOQ4OhVprgbdTOMzkyb9t1tQC7T2hua/s320/Windows+8+Final+Logo.png" width="320" />
</div>
<div style="text-align: center;">
</div>
Couple of weeks ago the final version of Windows 8 has been launched by Microsoft. Versions are-<br />
Windows 8<br />
Windows 8 Pro<br />
Windows 8 Enterprise<br />
These are the main versions which have other segments too. ie. Pro N, Pro VL, Enterprise N, Enterprise VL etc.<br />
<br />
If you've any trouble to activate Windows 8 you can solve it just by double click. Have any doubt? Try it now!<br />
<br />
Whatever the version of your Windows 8, a single activator can activate any all versions. Follow the steps below:<br />
Download the zipped file from the link below.<br />
Now extract the file. (It can also work in zipped condition)<br />
Then double click on the file Windows 8 Activator.exe.<br />
Now within 2/3 seconds your PC will be restarted.<br />
After restarting you will get some message about activation. Hit OK button in the all boxes that appear.<br />
Enjoy the benefit of full version.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://sites.google.com/site/munnamark/windows-8-final-version-activator/Windows%208%20Activator.zip?attredirects=0&d=1" target="_blank"><img border="0" height="104" src="http://2.bp.blogspot.com/-UDqhrp4mnp8/UKQgCjskxGI/AAAAAAAAAFk/kcvVv73MsQk/s200/Download_button.png" width="200" /></a></div>
<br />
<br />
<br />
<br />
If you can successfully perform this task, then your Windows activation status will be as image shows below:<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXQEbb2ckDPsgxXfjAV4__XPJ40JimdJivZJNcRBWx8y7BZo0lqbVU6bPq0SE5x7tW-1hMLZjq13udSdKehPMC5qHywYTKIPqoXTcrWCsQjORDhnDgN3H3z00zEty30aqM8lAXc0bQ/s320/Capture.GIF" />
<br />
</div>

Activate Windows 8 Just by Double Click (All Versions) !!!

Couple of weeks ago the final version of Windows 8 has been launched by Microsoft. Versions are- Windows 8 Windows 8 Pro Windows 8 ...

Get Facebook Comment Notifications via Email in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS7HBvp0G5dfUsjrEQi7XkLgF1p24Eadqd4aJT5hiuk5xYRU9yksklmK3ShsWRBwv_Od03c4A8NMqEXWm-OEGq44d8cAJEsucwKMXnDcGCbujQWWZ6UAjdbLBiQsaRnL9mHS7NzNb_ZnI/s1600/FBCommentNotifications.png" />
</div>
<div style="text-align: center;">
</div>
Did you implement Facebook comment social plugin on your blog? We have already discussed about implementation via <a href="http://24solutionbd.blogspot.com/2013/03/add-facebook-comment-social-plugin-to.html" target="_blank">Add Facebook Comment Social Plugin to Blogger </a>post. If you have implemented it on your blog, you may have find that you can moderate comments easily with Facebook comment moderation tool. But as you have more number of posts on your blog, you may find it buggy to keep an eye on Facebook comment moderation tool to see recent comments made on your blog. Sometimes you may have missed comments that needs more attention and users may have to wait for long hours until you reply for them. Therefore you will find it somewhat disturbing as no way of notifying new comments. Would you like to get notified whenever someone made a comment via Facebook comment plugin?<br />
<br />
Facebook has no official solutions for get notifications other than checking out Facebook comment moderation tool. But as I browse web I was able to find a working solution to get comment notifications via email developed by a Facebook developer. It will help you to notify every comment via email whenever someone made comments on your blog via Facebook comment plugin. Also it's capable of sending notifications to your Facebook email address if you wish to. So it will save lot of time and you don't need to keep eye on Facebook comment moderation tool for new comments made on your blog. Interested? Let's find out how to set up notifications for Facebook comments.<br />
<br />
Before You Go:<br />
<br />
* You should specify <a href="http://24solutionbd.blogspot.com/2013/03/how-to-implement-facebook-javascript.html" target="_blank">Facebook JavaScript SDK</a> and <a href="http://24solutionbd.blogspot.com/2013/03/how-to-personalize-your-pages-using.html" target="_blank">Open Graph Protocol</a>, in order to wok this out.<br />
<br />
* Make sure you have a file hosting site like <a href="https://sites.google.com/" target="_blank">Google Sites</a> to upload and access few files we gonna need for this process.<br />
<br />
<br />
<b>Steps:</b><br />
<br />
1. Go to <a href="http://www.blogger.com/" target="_blank">Blogger Dashboard.</a><br />
<br />
2. Click on your <b>Blog Title</b>.<br />
<br />
3. Navigate to <b>Template</b> tab.<br />
<br />
<img height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVzOy6QNY0kSMLQpS0HVMohjVcLLxV3vH6CESse35Ka6W4jQM7anZfuSXvPZ8qswYbDG8iMKqywbVidJ0YS3SrjnY7lbkFxUNtnJT8xoH72PLO7vxLOT8C2dTKOz16uRccGhfXEngC8Pg/s320/BloggerTemplate.png" width="320" />
<br />
<br />
<br />
Note: Before editing your template, you may want to save a copy of it.<br />
<br />
4. Click on <b>Edit HTML</b> button.<br />
<br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7CyOYuC0iKqntTVP-J6FlHtrS_5T-4Eca3OoHGk6B-MjqW_8-miaa8hZozOGiiQeCTP8veUfu8nTLEQyG2tK-7axZF-Vhyphenhyphennz8ZePIhfzbVGyffdIgzYYsfdmh59HLlKfIBRH2kxnfSGM/s1600/BloggerTemplateEdit.png" />
<br />
<br />
5. Tick on, <b>Expand Widget Templates</b> option.<br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVA6Xmr_tZem07GGLDrGu3wYaOuxZB9MbdFhD4Da0j5s9q9MS9eWY89phgSt4GbAfWERMnsCWnBxyzxVJcKVS4Y5lEw7Ee8_stL2gLs2kJP2opFJoLaISFuuVF8LZ7ysbKgh6TKKcI27k/s1600/BloggerExpandWidgetTemplates.png" />
<br />
<br />
<br />
6. Now search for <b><fb:comments</b> which is Facebook Comment plugin code.<br />
<br />
7. Add attribute<b> class='fbcomments'</b> and <b>expr:title='data:post.title'</b> to your Facebook Comment plugin code.<br />
<br />
i.e: <fb:comments <b>class='fbcomments' expr:title='data:post.title'</b> expr:href='data:post.url' num_posts='2' width='500'/><br />
<br />
8. Now add below code snippets just after <b><head></b> in your template.<br />
<br />
<span style="color: #a64d79;"><script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/> </span><br />
<span style="color: #a64d79;"><script src='<b>[URL of fbCommentsEN.js]</b>' type='text/javascript'/></span><br />
<br />
Note: If you are using migrated Facebook Comment plugin which use <b>migrated='1'</b> attribute, use following code snippets instead of above.<br />
<br />
<span style="color: #a64d79;"><script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/> </span><br />
<span style="color: #a64d79;"><script src='<b>[URL of fbCommentsEN-migrated.js]</b>' type='text/javascript'/></span><br />
<br />
Color Indication Information<br />
<br />
   - URL of fbCommentsEN.js<br />
<br />
Download<a href="https://sites.google.com/site/mayuradocs/fbCommentsEN.js?attredirects=0&d=1" target="_blank"> fbCommentsEN.js </a>and upload it on your server. Add the path/URL of the file here.<br />
<br />
   - URL of fbCommentsEN-migrated.js<br />
<br />
Download <a href="https://sites.google.com/site/mayuradocs/fbCommentsEN-migrated.js?attredirects=0&d=1" target="_blank">fbCommentsEN-migrated.js </a>and upload it on your own server. Then add the path/URL of the file here.<br />
<br />
<br />
9. Now add following code snippet into JavaScript SDK, just after <b>FB.init()</b> method but just before <b>};</b> - i.e: FB.init ({....}); [Add Code Snippet Here] };<br />
<br />
<span style="color: #a64d79;">var fromMail = '<b>info@blogspot.com</b>';</span><br />
<span style="color: #a64d79;"><br /></span>
<span style="color: #a64d79;">var toMail = '<b>you@mail.com</b>';</span><br />
<span style="color: #a64d79;"><br /></span>
<span style="color: #a64d79;">var sendPath = '<b>[URL of fbCommentsEN.php]'</b>;</span><br />
<span style="color: #a64d79;"><br /></span>
<span style="color: #a64d79;">fbCommentsEN(fromMail,toMail,sendPath);</span><br />
<br />
Color Indication Information<br />
<br />
   - Your Blog Email<br />
<br />
This is the mail address which states as the sender mail address in the mail you will be received. You can specify it as you prefer such as info@blogspot.com or whatever.<br />
<br />
   - Email Recipient<br />
<br />
This is email recipient address which is your email for notifications to be received. Facebook allowed you to add any email address including the @facebook.com, new Facebook mailing system. You can add multiple recipients too.<br />
<br />
i.e: var toMail = 'you@gmail.com, friend@facebook.com, member@yahoo.com';<br />
<br />
   - URL of fbCommentsEN.php<br />
<br />
Download <a href="https://sites.google.com/site/mayuradocs/fbCommentsEN.php?attredirects=0&d=1" target="_blank">fbCommentsEN.php </a>and upload it on a server where supports PHP files.<br />
<br />
<b>Note</b>: In case of you are not receiving emails, download <a href="https://sites.google.com/site/mayuradocs/fbCommentsEN_nc.php?attredirects=0&d=1" target="_blank">fbCommentsEN_nc.php </a>and upload it on your server. Then set new path here. This is PHP file which configured with no spam check.<br />
<br />
i.e: var sendPath = '<b>http://MySite.com/fbCommentsEN_nc.php';</b><br />
<br />
<br />
Credits: This has been implemented by Gil Goldshlager, a Developer of Facebook and credits should goes to.<br />
</div>

Get Facebook Comment Notifications via Email in Blogger

Did you implement Facebook comment social plugin on your blog? We have already discussed about implementation via Add Facebook Comment...