Bloggerdaddy - A guide for new blogger

TopGames- A wordpress template

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<img alt="live demo" class="preview" height="285" src="https://i2.wp.com/btemplates.com/wp-content/uploads/2016/04/topgames-blogger-template.jpg?ssl=1" width="500" /></div>
<div style="text-align: center;">
<br /></div>
<table id="details" summary="Template's details"><tbody class="clearfix">
<tr><td class="litlerow"><br /></td><td class="summary"><strong><br /></strong>
<br />
<table id="details" summary="Template's details"><tbody class="clearfix">
<tr><td class="litlerow">Description:</td></tr>
</tbody></table>
<strong>TopGames</strong> is a free blogger <a href="http://blogerdaddy.blogspot.in/search/label/Template">template</a> adapted from WordPress with 3 columns, <strong>responsive design</strong>,
 magazine-styled, right sidebar, ads ready, footer columns, slider, 
social bookmarking icons, posts thumbnails, breadcrumbs, a background 
pattern, related posts support and 3D effect.<br />
 Excellent template for blogs about games, kids or news.<br />
<br />
Ref: btemplates<br />
<br />
<div style="text-align: center;">
<a href="http://btemplates.com/2016/blogger-template-topgames/demo/" style="font-family: "times new roman"; font-size: x-large;" target="_blank">Demo</a><span style="font-family: "times new roman"; font-size: large;"> | </span><a href="https://btemplates.com/2016/blogger-template-topgames/download/" style="font-family: "times new roman"; font-size: x-large;" target="_blank">Download</a></div>
<div style="text-align: center;">
<br /></div>
<h3 style="text-align: left;">
<a href="http://www.bloggerdaddy.tk/2016/06/famemag-free-minimalist-blogger.html">FameMag – Free Minimalist Blogger Template for News & Magazine</a></h3>
<br />
<br /><br /></td></tr>
</tbody></table>
</div>

Description: TopGames is a free blogger template adapted from WordPress with 3 columns, responsive design , magazine-styled, r...

FameMag – Free Minimalist Blogger Template for News & Magazine

9:25:00 AM Bloggerdaddy 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<img alt="Banner FameMag – Free Minimalist Blogger Template for News & Magazine" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLLwMt6K44MxNdXdZ1Rn_SgzCts7U9nNG6oYlVmQZf0mV-_8xBXpxQJrvDz0eT_Q4rOTPQ4XzfCZPqQwrV-6QeO1qR4_c6MF68Yl-mhSUaCvMIz4LJjW9_tMFM2UrCmkBaNsUQ1vDraX5b/s1600/famemag_preview_banner.jpg" title="Banner FameMag – Free Minimalist Blogger Template for News & Magazine" /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: left;">
FameMag is a minimalist Blogger template for multi-purposes. You can use
 this blogspot <a href="http://blogerdaddy.blogspot.in/search/label/Template">template</a> for writing a personal blog or invite your 
friend to write as a magazine website (tech, travel, fashion, ... all 
are ok).</div>
<div style="text-align: left;">
<br /></div>
<h2>
 Features</h2>
<ol>
<li>Fully responsive (included IE)</li>
<li>Auto split columns for post content</li>
<li>First cap css for magazine effect</li>
<li>Easy slider by add, drag, drop Image widgets</li>
<li>Easy drop-down menu, add sub-menu by add LinkList widget</li>
<li>Separate Section (with name) in Admin Panel</li>
<li>Support change color scheme by use Advance Editor</li>
<li>Support Social icons</li>
</ol>
<div>
Ref: famemag-free-minimalist-blogger-magazine-template</div>
<div>
<br /></div>
<div>
<div style="margin: 0px; text-align: center;">
<div style="font-family: "times new roman";">
<a href="http://famemagdemo.blogspot.com/" style="font-size: x-large;" target="_blank">Demo</a><span style="font-family: "times new roman"; font-size: large;"> | </span><a href="http://www.sneeit.com/2014/05/famemag-free-minimalist-blogger-magazine-template.html#template-code-result" style="font-size: x-large;" target="_blank">Download</a></div>
<div style="font-family: "times new roman";">
<br /></div>
<h3 style="text-align: left;">
<span style="font-family: "times new roman";"><a href="http://www.bloggerdaddy.tk/2016/05/how-to-make-all-links-in-blog-to-open.html">How to make all Links in Blog to Open in Another Tab</a></span></h3>
</div>
<div style="font-family: "times new roman"; margin: 0px; text-align: center;">
</div>
</div>
</div>

Blogger Template Template FameMag – Free Minimalist Blogger Template for News & Magazine

FameMag is a minimalist Blogger template for multi-purposes. You can use this blogspot template for writing a personal blog or invit...

How to make all Links in Blog to Open in Another Tab

3:16:00 PM Bloggerdaddy 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<b>Many <a href="http://www.bloggerdaddy.tk/search/label/Widgets" target="_blank">Blogger Tricks and Widgets</a>
 have been shared on this blog recently. So today, I want to share a 
trick with you on how you can make all the links on your blog to show in
 a new tab. This trick can help increase blog page view and decrease 
your bounce rate.</b><br />
<b><br /></b>
<div style="text-align: center;">
<b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgiuMNHOq4neQSkbxs3Pzn4bifnG3ZQj_tb1PO72v49jOXvTbgwzTDphT8HLq_sl3wLb9G2Z_6jIuQ4u4Dw6KXAvjqV8zD7lkAf-IREoLSMi15Vmprc41RQA8vKxGrOrK14rjjz3Q3M50/s1600/45+%25282%2529.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgiuMNHOq4neQSkbxs3Pzn4bifnG3ZQj_tb1PO72v49jOXvTbgwzTDphT8HLq_sl3wLb9G2Z_6jIuQ4u4Dw6KXAvjqV8zD7lkAf-IREoLSMi15Vmprc41RQA8vKxGrOrK14rjjz3Q3M50/s400/45+%25282%2529.png" /></a></b></div>
<b><br /></b>
<b><br /></b>
<b>This trick is simple and easy to install on blogger blogs to make the
 entire link on your blog to open in another tab as default. Follow the 
process below to install it on your blog by adding a code to your 
template.</b><br />
<b><br /></b>
<b>==> Sign in to your blogger blog >> Template</b><br />
<b>==> Search for<span style="color: blue; font-size: large;"> <code><head></code></span> in your template by using <span style="color: blue;">CTRL+F</span> and then after it add below code</b><br />
<b><u><code><br /></code></u></b>
<blockquote class="tr_bq">
<b><code><base target='_blank' /></code></b></blockquote>
<b><code><br /></code></b>
<b><br /></b>
<b>==>Finally save your template.</b><br />
<b><br /></b>

<br />
<b>By now all the link on your blog will automatically open in another tab whenever it is clicked on.</b></div>

Tips Tricks Widgets How to make all Links in Blog to Open in Another Tab

Many Blogger Tricks and Widgets have been shared on this blog recently. So today, I want to share a trick with you on how you can make a...

How to Create a Sitemap or Table Of Contents Page For Blogger

2:53:00 PM Bloggerdaddy 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<b>Sitemap </b> is a page on your blog where all 
posts are arranged in accordance to their type, and it shows the links 
to all posts published on your blog so far. Sitemap (Table of Contents) 
is important for all bloggers to have on their blog. This make blog look
 professional, and it helps your blog visitors and readers to navigate 
through your blog post.<br />
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKPo3Im1yv8KkwbXNszOU-0GNR0miHUNMo1x94TPyht5ZRUfTwJ7UnuPBuSBWp9SN8jQdxPzY_JTaGjjGL67vNXM39ZTYzF6JbRkyVS7UIZ5PS9ApRw49f4Ovp-jTENIBNYTSnLhvPJb4/s1600/20160529144225362.png" imageanchor="1"><img border="0" height="286" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKPo3Im1yv8KkwbXNszOU-0GNR0miHUNMo1x94TPyht5ZRUfTwJ7UnuPBuSBWp9SN8jQdxPzY_JTaGjjGL67vNXM39ZTYzF6JbRkyVS7UIZ5PS9ApRw49f4Ovp-jTENIBNYTSnLhvPJb4/s320/20160529144225362.png" width="320" /></a><br />
<br /></div>
<br />
Here is a script that saves time and helps to update all new posts 
made on your blog to your sitemap (Table of Contents) page 
automatically. This script will display all posts made on your blog 
under their specified categories (Labels). This widget also comes with a
 CSS & Jquery to make it attractive. <br />
<h4>
<span style="background-color: black; color: lime;">
Steps To Add Automatic Sitemap (Table of Contents) Generator</span></h4>
<br />
1. <u>Add the CSS code below to your template</u>. This can be done by going to <span style="color: purple;"><b>Blogger </b>>>> <b>Template</b>, use <b>(CTRL+F)</b></span> to search for<b> <span style="color: blue;">]]></b:skin></span></b><span style="color: blue;"> </span>in your template and finally paste the CSS code below above <code><b><span style="color: blue;">]]></b:skin></span></b></code> tag.<br />
<br />
<blockquote class="tr_bq">
<code>/*--------bloggerdaddy.tk TOC-----*/</code><code>
.judul-label{</code><code>
background-color:#E5ECF9;</code><code>
font-weight:bold;</code><code>
line-height:1.4em;</code><code>
margin-bottom:5px;</code><code>
overflow:hidden;</code><code>
white-space:nowrap;</code><code>
vertical-align: baseline;</code><code>
margin: 0 2px;</code><code>
outline: none;</code><code>
cursor: pointer;</code><code>
text-decoration: none;</code><code>
font: 14px/100% Arial, Helvetica, sans-serif;</code><code>
padding: .5em 2em .55em;</code><code>
text-shadow: 0 1px 1px rgba(0,0,0,.3);</code><code>
-webkit-border-radius: .5em;</code><code>
-moz-border-radius: .5em;</code><code>
border-radius: .5em;</code><code>
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);</code><code>
-moz-box-shadow: 1px 1px 4px #AAAAAA;</code><code>
box-shadow: 0 1px 2px rgba(0,0,0,.2);</code><code>
color: #e9e9e9;</code><code>
border: 2px solid white !important;</code><code>
background: #6e6e6e;</code><code>
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));</code><code>
background: -moz-linear-gradient(top,  #888,  #575757);</code><code>
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');</code><code>
}</code><code>
.data-list{</code><code>
line-height:1.5em;</code><code>
margin-left:5px;</code><code>
margin-right:5px;</code><code>
padding-left:15px;</code><code>
padding-right:5px;</code><code>
white-space:nowrap;</code><code>
text-align:left;</code><code>
font-family:"Arial",sans-serif;</code><code>
font-size:12px;</code><code>
}</code><code>
.list-ganjil{</code><code>
background-color:#F6F6F6;</code><code>
}</code><code>
.headactive{</code><code>
    color: #fef4e9;</code><code>
    border: 2px solid white !important;</code><code>
    background: #1C8DFF;</code><code>
    background: -webkit-gradient(linear, left top, left bottom, from(<span style="color: magenta;">#9dc2e7</span>), to(<span style="color: magenta;">#438cd2</span>));</code><code>
    background: -moz-linear-gradient(top,  <span style="color: magenta;">#9dc2e7,  #438cd2</span>);</code><code>
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='<span style="color: magenta;">#9dc2e7</span><span style="color: red;">'</span>, endColorstr='<span style="color: magenta;">#438cd2</span>');</code><code>
} </code></blockquote>
<br />
<br />
<b>Save your Template</b> after inserting the CSS<br />
<br />
2.    <b><span style="color: #660000;"><u>Create a Page</u>:</span></b> to create a new page, go to<span style="color: #4c1130;"> <b>Blogger</b> >>> <b>Pages </b>>>> <b>New Page</b>.</span> Now give the page a title such as “Table of Contents” “Site Maps” or any title you wish. Click <b><span style="color: purple;">EDIT HTML</span></b> button on the compose mode screen, now paste the code below in it.<br />
<br />
<br />
<blockquote class="tr_bq">
<script src="https://www.dropbox.com/s/20wu2kszj4droq8/Justnaira-tos-file.js?dl=1"></script><br />
<script src="<span style="color: red;"><b>http://www.bloggerdaddy.tk</b></span>/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script><br />
<script type="text/javascript"><br />
var accToc=true;<br />
</script><script src="https://www.dropbox.com/s/5m7gwnjqm4w5rft/oncordian-tos.js?dl=1" type="text/javascript"></script></blockquote>
<br />
Make sure you change <b style="color: red;">http://www.bloggerdaddy.tk</b> to your own blog URL and then publish the page. Visit the page link to view your awesome blog sitemap (Table of Contents).<br />
<h4>
<span style="background-color: black; color: lime;">
Sitemap (Table of Contents) Customization</span></h4>
The color of the category when in active mode is blue while when it is inactive it appears as dark gray.<br />
<br />
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisqCX7IRfbqzr2BEt5rJrW08Hxc63f15HQ-pXu0d-CVtIXnjb6HKDOWTuospVTQWLaUmdeqYAdG014VEPxD2kgIMl4BjkBB5O7dSoCWjQED1g1XxPqfvmrQqvfFHg6ppb1YVPMDEergc0/s1600/20160529144239952.png" imageanchor="1"><img border="0" height="231" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisqCX7IRfbqzr2BEt5rJrW08Hxc63f15HQ-pXu0d-CVtIXnjb6HKDOWTuospVTQWLaUmdeqYAdG014VEPxD2kgIMl4BjkBB5O7dSoCWjQED1g1XxPqfvmrQqvfFHg6ppb1YVPMDEergc0/s400/20160529144239952.png" width="400" /></a></div>
<br />
So to change the active mode, simply change <b><span style="color: magenta;">#9dc2e7</span></b> and <b><span style="color: magenta;">#438cd2</span></b>. Here is a <a href="http://www.bloggerdaddy.tk/2015/11/color-code-generator.html" target="_blank"><b>color generator tool</b></a> that will aid you to select the best color code that you love.<br />
If you encounter any difficulties in the process of setting up your blog Sitemap, don’t hesitate to use the comment box below.</div>

Tricks Widgets How to Create a Sitemap or Table Of Contents Page For Blogger

Sitemap is a page on your blog where all posts are arranged in accordance to their type, and it shows the links to all posts published o...

Animated Colour changing Background for Blogger

6:47:00 PM Bloggerdaddy 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimw-3ELh0LDL-mgjwX4IosPR2WgIUtg3FzB15rxYmMafb89_zju647Qz8pZ3VRegKGFmqiL2HrjdJD5RVH031kSnh0XodvubmOPDijVn3-WAzNTLFA-qm2mK_QcXrWHnRUDJjxH09cApM/s1600/Animated+color+background.jpg" imageanchor="1"><img border="0" height="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimw-3ELh0LDL-mgjwX4IosPR2WgIUtg3FzB15rxYmMafb89_zju647Qz8pZ3VRegKGFmqiL2HrjdJD5RVH031kSnh0XodvubmOPDijVn3-WAzNTLFA-qm2mK_QcXrWHnRUDJjxH09cApM/s400/Animated+color+background.jpg" width="400" /></a></div>
<br />
<div style="text-align: justify;">
This post will tell you that how you 
can make your background change to different colours with animation 
using keyframes CSS. Inspite of using big images you can use these CSS 
codes which load extremely fast and you the user too gets too see some 
interaction on the background.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<h3>
Removing existing code:</h3>
<div>
First of all you have to remove the existing background code to avoid 
any conflict in between and minimize excessive code. For this search the<b> <span style="background-color: #d9ead3;">body</span> </b>selector from the CSS codes in your blog. Under that search for <b style="background-color: #d9ead3;">background</b> property and remove the property with the value (Do Not Remove the Selector). </div>
<div>
<br /></div>
<div>
<h3 style="text-align: left;">
Adding the code:</h3>
</div>
<div>
Now we have to add the animation codes in the blog template. For this paste the below given code just above <b><span style="background-color: #d9ead3;">]]></b:skin> </span></b><span style="background-color: #d9ead3;"><</span></div>
<div>
<span style="background-color: #d9ead3;"><br /></span></div>
<blockquote class="tr_bq">
body {<br />
    animation: colorBackground 20s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */<br />
     -webkit-animation: colorBackground 20s infinite; /* Chrome, Safari 5+ */<br />
      -moz-animation: colorBackground 20s infinite; /* Firefox 5-15 */<br />
        -o-animation: colorBackground 20s infinite; /* Opera 12.00 */<br />
}<br />
@keyframes colorBackground {<br />
      0% { background-color: #fbcf61; color: #fbcf61; }<br />
     20% { background-color: #6bd57e; color: #6bd57e; }<br />
     40% { background-color: #ff6f6f; color: #ff6f6f; }<br />
     60% { background-color: #57cff4; color: #57cff4; }<br />
     80% { background-color: #0ed4c8; color: #0ed4c8; }<br />
    100% { background-color: #fbcf61; color: #fbcf61; }<br />
}<br />
@-webkit-keyframes colorBackground {<br />
      0% { background-color: #fbcf61; color: #fbcf61; }<br />
     20% { background-color: #6bd57e; color: #6bd57e; }<br />
     40% { background-color: #ff6f6f; color: #ff6f6f; }<br />
     60% { background-color: #57cff4; color: #57cff4; }<br />
     80% { background-color: #0ed4c8; color: #0ed4c8; }<br />
    100% { background-color: #fbcf61; color: #fbcf61; }<br />
}<br />
@-moz-keyframes colorBackground {<br />
      0% { background-color: #fbcf61; color: #fbcf61; }<br />
     20% { background-color: #6bd57e; color: #6bd57e; }<br />
     40% { background-color: #ff6f6f; color: #ff6f6f; }<br />
     60% { background-color: #57cff4; color: #57cff4; }<br />
     80% { background-color: #0ed4c8; color: #0ed4c8; }<br />
    100% { background-color: #fbcf61; color: #fbcf61; }<br />
}<br />
@-o-keyframes colorBackground {<br />
      0% { background-color: #fbcf61; color: #fbcf61; }<br />
     20% { background-color: #6bd57e; color: #6bd57e; }<br />
     40% { background-color: #ff6f6f; color: #ff6f6f; }<br />
     60% { background-color: #57cff4; color: #57cff4; }<br />
     80% { background-color: #0ed4c8; color: #0ed4c8; }<br />
    100% { background-color: #fbcf61; color: #fbcf61; }<br />
}<br />
}</blockquote>
Code Source - Immam Vel<br />
<br />
<div class="content section" id="content">
<div class="widget Blog" data-version="1" id="Blog1">
<div class="blog-posts hfeed masonry">
<div class="date-outer">
<div class="date-posts">
<div class="post-outer">
<div class="post hentry">
<div class="post-body entry-content" id="post-body-4898190721721462044">
<div dir="ltr" style="text-align: left;" trbidi="on">
After
 adding the code, save the template. You are done now. Now you and your 
visitors can see this animated colour changing background in your 
blogger blog.
<br />
<h3 style="text-align: left;">
<a href="http://www.bloggerdaddy.tk/2016/05/facebook-popup-like-box-widget-for.html" target="_blank">Facebook Popup Like Box Widget For Blogger</a></h3>
</div>
<div style="margin-top: 5px; margin: 0 auto;">
<ins class="adsbygoogle" data-ad-client="ca-pub-2958296951649807" data-ad-slot="2165359970" data-adsbygoogle-status="done" style="display: inline-block; height: 60px; width: 468px;"><br /></ins></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Tips Tricks Animated Colour changing Background for Blogger

This post will tell you that how you can make your background change to different colours with animation using keyframes CSS. Inspite...

TopGames- A wordpress template

FameMag – Free Minimalist Blogger Template for News & Magazine

How to make all Links in Blog to Open in Another Tab

How to Create a Sitemap or Table Of Contents Page For Blogger

Animated Colour changing Background for Blogger

Popular Posts

COMMENT

Blog Archive