Latest: Download Microsoft All Product Activator | Hot: Active IDM in 1 Click | Blogger Gadget
  • Posts
  • Comments
  • Pageviews

Stylish Twitter Follower Button For Your Blogger

11 comments
Twitter is a most popular social site at now & it helps to collect a large amount of visitors for your blog. So always you want to increase your twitter follower. This widget helps you to increase your follower. This widget is different from another follower widget. Read this post & apply this stylish widget on your lovely blog.

Twitter


  • Login to your Blogger Dashboard. 
  • Select your blog. 
  • Select Layout. 
  • In the blog layout select Add a Gadget option.. 
  • From the list of the Gadgets select HTML/JavaScript widget. 
  • In the HTML/JavaScript widget paste following code and save the widget 
  • Now the Drag this HTML/JavaScript to the place where you want to add twitter followers button and save the changes.
<style>
.twitter-button
{
border:1px solid #d7d7d7;
padding:10px;
}
</style>
<div class="twitter-button">
<a href="https://twitter.com/tonufz" class="twitter-follow-button" data-show-count="true" data-size="large">Follow @tonufz</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>

How To Add This Widget on Every Post Bellow Your Post Title

  • Go to Template 
  • Then Edit HTML 
  • Search (ctrl+f) <data:post.body/> 
  • Copy Twitter Follower widget code & paste just above <data:post.body/>

Stylish Another Sitemap Page For Blogger

6 comments
Sitemap page is a most important widget for visitors because visitors can see all category of your blog post. Visitors can known about your all post & article from your sitemap page.If you want to increase yours readers so you should to have a sitemap page. If You like our sitemap widget so just try to use it & i am sure you do not dislike our widget.


<script src="http://blogger-tabbed-widget.googlecode.com/files/SITEMAP%20v3.JS">
</script><script src="http://tech-everyday.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

You Have to change  http://tech-everyday.blogspot.com/
Just Visit our sitemap Page

Another Hex Color Code Generator For Your Blog

1 comments
In the previous post i know you How To Add Color Wheel Hex Code Generator. Now i want to sharing with yours another Hex Color Code Generator. This Color Code Generator helps you match your colors. You can add this code generator to your own blog. Your visitors can find any color code easily if they need one. Just follow this post for adding this Code generator to your blog. 

Color Hex Code

<center><object border="0" classid="clsid:D27CDB6E -AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="480" id="obj1" width="480"> <param name="movie" value="http://www.2createawebsite.com/build/color.swf"><param name="quality" value="High"><embed src="http://www.2createawebsite.com/build/color.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="485" height="485" quality="High"></embed></object></center>
If you will be grateful so please give us your comments for impressing us

How to Add Color Wheel Hex Code Generator To Your Blog?

9 comments
Color Code is most important tool for Blog Designer. We can not remember corer of color hex code so we depend on a color code generator. Today i am sharing with yours "How To Add A color Hex Code Generator To Your Blog". Your visitors can find any color code easily if they need one. So get ready for knowing new something.


Color Hex Code


Color Wheel Hex Code Generator

 
 
<center><object border="0" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="480" id="obj1" width="480">            <param name="movie" value="http://www.2createawebsite.com/build/col.swf"><param name="quality" value="High"><embed src="http://www.2createawebsite.com/build/col.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="485" height="485" quality="High"></embed></object>
</center>

If you will be grateful so please give us your comments for impressing us

Another Stylish Bubble Threaded Comment

2 comments
Threaded comment is most stylish & popular system for blogger. For a stylish blog you have to need a stylish comment bar. Through which visitors can give their opinion & advice. Today you can to know about a stylish comment bar. Just follow this post to add this threaded comment.

Threaded Comment

We use css based code so its do not increase your page loading time. Get ready to add this threaded comment.......

  • First Log in your blog
  • Just click Template
  • Backup your Template
  • Then click  Edit Html
  • Search (ctrl+f) ]]></b:skin>
  • Just paste the bellowing code before/abode ]]></b:skin>

/* http://tech-everyday.blogspot.com */
.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}
.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}
.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;background:#fff}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.comments .comments-content .comment:first-child{padding-top:16px}
.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative}
.comments .comments-content .user{font-style:normal;font-weight:normal}
.comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none}
.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}
.comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-left:48px}
.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed{display:none}
.comments .thread-toggle{display:inline-block}
.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-right:4px}
.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}
.avatar-image-container{background:url(https://lh5.googleusercontent.com/-Wmy6bwNKzbo/T0miLZkuJsI/AAAAAAAAChc/orbwMGHyBxA/s51/arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}
.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}
/* http://tech-everyday.blogspot.com */ 

  • Save your template

How to add colorful Total Pageviews widget?

13 comments
Widget can helps you to make a wonderful blog. Total Pageview widget is a important widget for your blog. Everyone can to know about your blogs statistics. How number of  visitors visit your blog. Total post & total comments are also shown through this widget. This widget is more colorful & attractive.  We use some css code so don't be afraid because css code never use your memory. To add this widget just follow this post steps by steps.
Pageviews widget

How to add ?


  • Log in your blog
  • Go to Templates
  • Then click Edit Html
  • Search (ctrl+f) ]]></b:skin>
  • Add bellowing css code just before/above ]]></b:skin>

#Stats1 ul{margin:0px 0;border:0;padding:0}
#Stats1 li{
display:inline;
width:30%;
border:0;
color:#fff;
float:left;
text-decoration:none;
margin:0;font-size:12px;
list-style-type:none
}
#Stats1 li:hover{
opacity: 0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
}
#Stats1 h4{margin:0;font-size:18px;line-height:1.2em;color:#fff;padding: 0 5px 0 5px;}
#Stats1 span{font-size:12px;color:#fff;padding: 0 5px 0 5px;}
#totalposts{
background: #0090D5;
}
#totalComments{
background: #FFB200;
}
#totalCount{
background: #FF3300;
} 

  • Then you have to search
<b:widget id='Stats1' locked='false' title='Total Pageviews' type='Stats'>...</b:widget>
  • Replace the following code

Pageviews widget


<b:widget id='Stats1' locked='false' title='' type='Stats'>
  <b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
    <div class='widget-content'>
      <ul>
        <li id='totalposts'>
          <h4 id='Stats1_totalPosts'>&amp;hellip;</h4>
          <span>Posts</span>
        </li>
        <li id='totalComments'>
          <h4 id='Stats1_totalComments'>&amp;hellip;</h4>
          <span>Comments</span>
        </li>
        <li id='totalCount'>
          <h4 expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>&amp;hellip;</h4>
          <span>Pageviews</span>
        </li>
      </ul>
      <script type='text/javascript'>
//<![CDATA[
function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>');
//]]>
      </script>
    </div>
  </b:includable>
</b:widget>

Note:You should back up your template first.

How to add Rounded Corners Popular Post Widget

0 comments
Popular Post Widget

Popular post widget is an essential widget for a blog. Every visitors can to see which post are most view. This widget is very cool & stylish than other popular post widget. Post thumbnail shown as a circle. Every bloggers use popular post widget for visitors attraction because through it visitors can to know which post are most read. If you want to use this widget just follow this post.

  • Log in your blog --> then click Templates --> Edit Html
  • Then Search (ctrl+f) ]]></b:skin>
  • Paste the bellowing code before/above ]]></b:skin>

/* http://tech-everyday.blogspot.com */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px;
list-style-type: none;padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
height: 40px;
-moz-box-shadow: 3px 2px 5px #242424;
-webkit-box-shadow: 3px 2px 5px #242424;
box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;height: 40px;
}
.popular-posts ul li a {
font-style: italic;
}
.popular-posts ul li:hover {
border:1px solid #d10202;
 -moz-box-shadow: 3px 2px 5px #d10202;
-webkit-box-shadow: 3px 2px 5px #d10202;
box-shadow: 3px 2px 5px #d10202;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
height:40px;width:40px;
webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.popular-posts .item-thumbnail img:hover{
-moz-box-shadow: 0px 0px 5px #d10202;
-webkit-box-shadow: 0px 0px 5px #d10202;
box-shadow: 0px 0px 5px #d10202;}

  • Then go to Layout --> Add A Gadget and select Popular Posts

Popular Post Widget
 For without description so please unchecked snippet option. You can change post displaying number. Noe save & refresh your blog.


Coolest Comment System For Your Blog!!!

1 comments
Everybody want to make a beautiful & stylish website or blog. If you want to make a stylish blog or website you should have to use different kinds of widget or plugin. Some widget or plugin makes your blog/website look like a professional blog. Always you should to remember your bloggers readers attraction & intention. For visitor attraction & opinion you have to place a stylish comment system which every visitors give their opinion & they can discuss about your blogs. Now i am sharing with yours about a Stylish,Coolest,Rocking & awesome comment system, which you can make a beautiful & attractive blog. I am sure you do not dislike it & over sure that you want to place this comment system on your blog. So get ready to know & adding a stylish comment system.

Disqus,Coolest Comment System 
Disqus is a most popular website which cang give you a stylish comment system for your online platform. You should to try this system. just for one time.

Advantage: 

  • Beautiful looking
  • You can add this comment system to your Wordpress,Blogger,Tumblr,Squarespace,Typepad,Movabletype,Drupal,Joomla
  • You can increase Your web-traffic
  •  Get Follower
  • You can import Blogger Comment

How do you install Disqus?

To install Disqus comment system in your online platform you have to need an e-mail address. Just go to this website & create an account.

  • Log in to Disqus. After log in go to Dashboard &click to Add.

Disqus,Coolest Comment System

  • Then just give your website or blog URL & Title. Give a short name through this short name you can log in to Disqus.

Disqus,Coolest Comment System

  • Then click Continue & chose your Online platform. Like as Wordpress,Blogger,Tumblr,Squarespace,Typepad,Movabletype,Drupal,Joomla.

Disqus,Coolest Comment System 

  • After choosing just add this comment system on your Platform

Disqus,Coolest Comment System

 How do you import Previous/Old comments?

Disqus,Coolest Comment System 

  • Just go to Dashboard & click your website. Click Discussion --> Import--> Click your platform

Disqus,Coolest Comment System

  • Just follow step by step

Disqus,Coolest Comment System

Note: Imports may take up to 24 hours to complete.

Open Heart Sliding Social Bookmarking Widget For Blogger

0 comments
Open Heart Sliding Social Bookmarking Widget widget is gifted by sharethis team for Valentines Day. Looking cool & stylish widget that displaying several bookmarking button like Facebook,Twitter,Pinterest, LinkedIn, Stumble Upon, Email & much more. Open Heart Sliding Social Bookmarking Widget comes with a fixed position & stay in the corner on every page. Just try for one times & give your opinion about Open Heart Sliding Social Bookmarking Widget.

Social Bookmarking Widget

  • Log In your blogger account
  • Then go to Template
  • Click Edit Html
  • Search (ctrl+F) </head>
  • Paste the bellowing code just above/before  </head>

<!-- Start Open Heart Bookmarking Gadget From http://tech-everyday.blogspot.com/ -->
<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: &quot;ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee&quot;, onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>
<!-- End Open Heart Bookmarking Gadget From http://tech-everyday.blogspot.com/ -->

  • Then Search (ctrl+F) </body>
  • Paste the bellowing code just above/before </body>

<!-- Start Open Heart Bookmarking Gadget From http://tech-everyday.blogspot.com/ -->
<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareHeart&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;pinterest&#39;,&#39;linkedin&#39;,&#39;stumbleupon&#39;,&#39;email&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareheart&#39;});</script><a href="http://tech-everyday.blogspot.com">Blogger Gadgets</a>
<!-- End Open Heart Bookmarking Gadget From http://tech-everyday.blogspot.com/ -->

Get ready for stylish open heart sliding social bookmarking widget. Keep visiting our blog..........

How to change blogger default avatar?

1 comments
In this post i want to share with yours about "How to change blogger default avatar"?  You can change your anonymous blogger comments avatar & blogger user who do not add any avatar. So get ready to change your default blogger avatar. Follow this post & encourage us by your feedback to know more.



  • Just go to your Dashboard
  • Then Template --> Edit Html
  • Search (ctrl+F) </body>
  • paste the bellowing code just above/before </body>

<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(&quot;img[src=&#39;http://img1.blogblog.com/img/anon36.png&#39;]&quot;)
.attr(&#39;src&#39;, &#39;http://4.bp.blogspot.com/-JiDE_eCZOTA/UdTqntyxStI/AAAAAAAAAcM/wPAbPDMDjQI/s128/Tech-Everyday+(2).png&#39;)
.ssyby(&#39;blank&#39;)
</script>
<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(&quot;img[src=&#39;http://img2.blogblog.com/img/b36-rounded.png&#39;]&quot;)
.attr(&#39;src&#39;, &#39;http://2.bp.blogspot.com/-LDhN63sedn4/UdTvedHdoTI/AAAAAAAAAcc/xJBFCoMdYXY/s128/Tech-Everyday.png&#39;)
.ssyby(&#39;blank&#39;)
</script>


You can change this avatars


 
http://1.bp.blogspot.com/-Zphr2YJH_6w/T6ZZE4YeNBI/AAAAAAAACF0/Tyuj8hkOpdc/s200/default_avatar.gif


http://3.bp.blogspot.com/-p4JvM7rWNG4/T6ZcU5eKqTI/AAAAAAAACGM/K0DB35A5brE/s1600/facebook.gif


 http://2.bp.blogspot.com/-5nGzg5T-9qA/T6ZbL9JF0iI/AAAAAAAACF8/TvTnURwsNb0/s1600/anonymous3.png


http://3.bp.blogspot.com/-oivPlkvBNBY/T6ZoNQhfAII/AAAAAAAACGY/3gem5DBmmQ8/s1600/blogger-user.png


http://icons.iconarchive.com/icons/pixelmixer/basic-2/64/user-anonymous-icon.png

How to add a beautiful image divider between every visitors comment?

0 comments
Comments are the most essential part for every blog because visitors give there opinion for blog or post through this comment. For that you should to take a step which visitors can know from where this comments is started & where its end. You should place a beautiful divider image for every comment. If you need so follow this post.

image divider

How to add image divider through every comment?


  • Just Log In your blog
  • Then go to Template & Backup your template
  • After Edit Html
  • Search For ]]></b:skin> & paste bellowing code just  above/before ]]></b:skin>

.comment-block {
background-image:url(http://1.bp.blogspot.com/-YaY5yi0UcbM/UTpA2jWBJFI/AAAAAAAAC_0/UXbviThYl2w/s1600/74.gif);
background-repeat:no-repeat;
background-position:center bottom;
padding-bottom:30px;
margin-top: -10px;
}

.comments .continue {
border-top: 0px solid $(widget.alternate.text.color);
}

  •  Save your template & look your visitors comment

 Note: you can change this divider image

How To Add Multi-Column Footer Widget?

0 comments
Sometimes we need to keep more ads or widget in our blog. To add more widget or add we need a multi-footer or sider bar widget but multi-footer widget is very attractive more than sidebar. You can add many column which you want. This multi-column widget is stylish & an advanced version. If you need just follow this post.


How to add?

  • First Log In your blog
  • Then Go to Template & Backup your template
  • Then Edit Html Search (ctrl+F) for ]]></b:skin>
  • Paste the bellowing code just before/above ]]></b:skin>
/*----- MULTI COLUMN FOOTER WIDGET -----*/
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}

Then Search for </body> & paste the bellowing code just above/before </body>


<div id='lower'>
<div id='lower-wrapper'>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>


<div style='clear: both;'/>
</div> </div>
 
Save your template & enjoy multi-footer widget
Note: You can change widget width & column number

Fast,Smart & Stylish Recent Post Widget For Smart Blogger 2014

0 comments
Hi My Friends,Now i am sharing with yours most stylish & fastest Recent Posts Widget. Visitors Can known about your recently posts with thumbnail. More faster loading, speedy & more attractive widget for your blog. If you like this widget so just follow this post.


How to add This Widget to your blog?


  • First Log in your blog
  • then go to Layout
  • after Add A Gadget
  • then Html/JavaScript
  • Then Paste Following Code


<style type="text/css">
#post-gallery {
  width:304px;
  margin:0px auto;
  font:normal 11px Arial,Sans-Serif;
  color:#494848;
  padding:8px;
  background-color:#99cc00;
  -webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
#post-gallery h2 {
  font:20px Arial,Sans-Serif;
  color:white;
  text-shadow:0px 3px 2px black;
  text-transform:uppercase;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#48D;
  text-align: center;
}
#post-gallery .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('http://3.bp.blogspot.com/-1x8jl-JgoS4/UbX9CILmkvI/AAAAAAAADXs/-d6Pc70yRpw/s1600/loading_small.gif') no-repeat 50% 50%;
  width:72px;
  height:72px;
}
#post-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}
#post-gallery .rp-item .rp-child {
  position:relative;
  top:10%!important;
  left:10%!important;
  z-index:1000;
  width:200px;
  background-color:white;
  border-top:5px solid #FA7C19;
  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
  opacity: 0.9;
}
#post-gallery .rp-item .rp-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#FA7C19;
}
#post-gallery .rp-item:hover .hidden {display:block;}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var rpTitle     = "Recent Post",       // Widget Title
    numposts    = 20,      // The number of thumbnail / posts to display
    numchar     = 200,      // Number of characters in the description tooltip
    rcFadeSpeed = 600,      // Speed of the effect. fadeIn () tooltip appears
    pBlank      = "http://2.bp.blogspot.com/-rAlZN1aIuP0/UbYEyYtyhRI/AAAAAAAADX8/ua86u-xDG0I/s1600/no-image-found-100x100-s2free-blog.png",      // Image that show up if the post doesn't have a image
    blogURL     = "http://tech-everyday.blogspot.com/";       // Your Blog Address
</script>
<script src="http://f.3eeweb.com/js/post-gallery.js" type="text/javascript"></script>

 Change The Following Link & code

  • Your Widget Width
  • Your Blog Site Link Address

Stylish Sitemap Page For Blogger

2 comments
Hi Guys,
Now i am sharing with yours about a beautiful sitemap widget for your blog. Visitors can known about your all post & article from your sitemap page. Everybody should keep a sitemap page for his/her blog. If you need so just see my sitemap page, i am sure that you do not dislike  this widget.


Visit my sitemap page & give your feedback about it.

How to add this widget to your blog?


  • First log in your blog
  • then Pages --> New Page


  • After paste this bellowing code to HTML format page
 <h2>Thanks For Visiting Our Blog</h2>
<img src="http://3.bp.blogspot.com/-aMdIvc1Tq1E/Ucz8BenWqJI/AAAAAAAAAYU/8BoTFjoCjXI/s368/tech-everyday.png"/>
<h2>Please Search Your Topic From The Given List...</h2>
<style type="text/css">
.judul-label{
background-color:#E5ECF9;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top, #888, #575757);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}
.list-ganjil{
background-color:#F6F6F6;
}
.headactive{
color: #fef4e9;
 border: 2px solid white !important;
 background: #f78d1d;
 background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
 background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
</style>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://tech-everyday.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript"> var accToc=true; </script>
  • Note: Change Your Blog Site URL & Image

Mbt Style Subscribe Widget

0 comments
MBT  is a popular website about tips & tricks. Who is there loyal visitor, most of them want their Subscriber widget for their stylish designing. Its really looking beautiful & Stylish. I hope everybody like this widget. Stylish widget for only smart blogger.  If you like their Subscriber widget then just follow with this post.

  • Log in to Blogger
  • Then go to Layout
  • After Add  A Gadget
  • Then just paste following Code





<div id="HTML10" class="widget HTML">
<h2 class="title">Subscribe Now!</h2>
<div class="widget-content">
<style>

  .tech-everydaybar{width: 300px; float: left;}

.tech-everydaybar .count{color:#F17C18; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; height: 40px; line-height: 40px; vertical-align: middle; width: 310px; padding: 0 0px 0 4px; margin:0;}

  .tech-everydaybar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: middle; margin:0px; padding:10px 0px 0px 0;}

  .tech-everydaybar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 12px;}

  .tech-everydaybar .subicons a{text-decoration: none; color:#898993; font-size:11px;}

  .tech-everydaybar .subicons a:hover{text-decoration: underline; color:#666;}

  .tech-everydaybar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(http://3.bp.blogspot.com/-OjveKOolerY/Tlk-Nb76eAI/AAAAAAAAEz8/b2VcUPdzLUQ/s400/rsssprite.png) no-repeat; background-position: 0px 5px; min-width: 2px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}

  .tech-everydaybar .subicons .googleicon{border-right: 1px solid #e6e6e6; background: url(http://3.bp.blogspot.com/-OjveKOolerY/Tlk-Nb76eAI/AAAAAAAAEz8/b2VcUPdzLUQ/s400/rsssprite.png) no-repeat; background-position: 0px -37px; min-width: 2px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}

  .tech-everydaybar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(http://3.bp.blogspot.com/-OjveKOolerY/Tlk-Nb76eAI/AAAAAAAAEz8/b2VcUPdzLUQ/s400/rsssprite.png) no-repeat; background-position: 0px -79px; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}

  .tech-everydaybar .subicons .twittericon{background: url(http://3.bp.blogspot.com/-OjveKOolerY/Tlk-Nb76eAI/AAAAAAAAEz8/b2VcUPdzLUQ/s400/rsssprite.png) no-repeat; background-position: 0px -121px; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}

  .tech-everydaybar .emailsub{border-bottom: 0px solid #e6e6e6; padding: 10px 0 0px 0; float: left; width: 100%; font-family: Helvetica, Arial;}

  .tech-everydaybar .emailsub .emailicon{background: url(http://1.bp.blogspot.com/-U-4ZhBpAgNA/Tg6tvahbz2I/AAAAAAAAEE8/R94nynUlGoM/s400/email.png) no-repeat 0 2px; float: left; padding: 0px 15px 0px 40px; margin: 0 0 0 5px; width: 300px; line-height: 20px; vertical-align: middle; font-size: 14px; color: #333; }

  .tech-everydaybar .emailsub .emailupdatesform{margin: 10px 0 5px 5px; width: 300px; float: left;}

.tech-everydaybar .emailsub .emailupdatesform input.emailupdatesinput {

  background: none repeat scroll 0% 0% rgb(255, 255, 255) !important;

  float: left;

  border: 1px solid rgb(210, 210, 210);

  padding: 0px 5px;

  color: rgb(161, 153, 153);

  font-size: 12px;

  height: 25px;

  width: 195px;

  border-radius: 5px 5px 5px 5px;

  margin-right: 5px;

  margin-top: 2px;

}

.tech-everydaybar .emailsub .emailupdatesform input.joinemailupdates {

  padding: 5.5px 11px;

  border: 1px solid #241F1F;

  background: -webkit-gradient(linear, left top, left bottom, from(#41464A), to(#292D30));

  background: -webkit-linear-gradient(top, #41464A, #292D30);

  background: -moz-linear-gradient(top, #41464A, #292D30);

  background: -ms-linear-gradient(top, #41464A, #292D30);

  background: -o-linear-gradient(top, #41464A, #292D30);

  background-color: #292D30;

  box-shadow: inset 0px 0px 0px #404040;

  -webkit-box-shadow: inset 0px 0px 0px #404040;

  -moz-box-shadow: inset 0px 0px 0px #404040;

  -webkit-border-radius: 8px;

  -moz-border-radius: 8px;

  border-radius: 8px;

  text-shadow: #2E2C2C 1px 1px 0px;

  color: #FFFFFF;

  font-size: 11px;

  font-family: Arial;

  text-decoration: none;

  font-weight: bold;

  -webkit-transition: 0.2s;

  -moz-transition: 0.2s;

  -o-transition: 0.2s;

  cursor: pointer;

  }

.tech-everydaybar .emailsub .emailupdatesform input.joinemailupdates:hover {

  background: -webkit-gradient(linear, left top, left bottom, from(#292D30), to(#41464A));

  background: -webkit-linear-gradient(top, #292D30, #41464A);

  background: -moz-linear-gradient(top, #292D30, #41464A);

  background: -ms-linear-gradient(top, #292D30, #41464A);

  background: -o-linear-gradient(top, #292D30, #41464A);

  background-color: #292D30;

  box-shadow: 0px 0px 8px 0px #FFFFFF;

  -webkit-box-shadow: 0px 0px 5px 0px #FFFFFF;

  -moz-box-shadow: 0px 0px 5px 0px #FFFFFF;

  border: 1px solid #ffffff;

  color: #ffffff;

  }

.tech-everydaybar .emailsub .emailupdatesform input.joinemailupdates:active {

  top: 1px;

  position: relative;

  }

.FB-class {

width: 300px;

height: 40px;

margin: 0px;

padding: 0px 0px 15px 0px;

}
 </style>
  <!--[if IE 9]>
  <style>

  .tech-everydaybar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }

  .tech-everydaybar .emailsub .emailupdatesform input.joinemailupdates{background:#333; border: 1px solid #000; font:bold 12px arial; color: #fff; height: 25px; padding: 5.5px 11px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}
  </style>
  <![endif]-->

  <div class="tech-everydaybar"><div class="count"><span class="bigcount"></span> 
Learn Free Pro Tricks daily </div> 
<div class="subicons">

<div class="rssicon">&nbsp;<a target="_blank" href="http://feeds.feedburner.com/tonufz" rel="nofollow"> RSS</a></div>
<div class="googleicon">&nbsp;<a target="_blank" rel="author" href="http://gplus.to/tonufz"> G+</a></div> 
<div class="fbicon"> &nbsp;<a rel="nofollow" target="_blank" href="https://www.facebook.com/your-page-link">FB</a></div>
<div class="twittericon">&nbsp;<a rel="nofollow" target="_blank" href="http://twitter.com/tonufz">Twitter</a></div></div>
<br style="clear:both;" />
<!--<div class="FB-class">
<div style="float:left; margin-top:12px;"><p style="color:#292929; font:bold 13px Helvetica;">Like us on Facebook &#9658; </p></div> 
<div style="float:right; margin-top:12px;"><iframe src="//www.facebook.com/plugins/like.php?href=https://www.facebook.com/your-page-link&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21&amp;appId=216583408397853" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowtransparency="true"></iframe></div> 
</div>-->
<div class="FB-class">

<!-- Place this tag where you want the badge to render. -->

<div style="height: 69px; width: 300px; display: inline-block; text-indent: 0px; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline;" id="___plus_0"><iframe width="100%" scrolling="no" frameborder="0" hspace="0" marginheight="0" marginwidth="0" style="position: static; top: 0px; width: 300px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 69px;" tabindex="0" vspace="0" id="I0_1363458070717" name="I0_1363458070717" src="https://plusone.google.com/u/0/_/pages/badge?bsv&amp;rel=publisher&amp;height=69&amp;hl=en&amp;origin=http%3A%2F%2Fwww.tipsntricks4fun.in&amp;url=http%3A%2F%2Fplus.google.com%2F109501801304882653518&amp;gsrc=3p&amp;jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.Rgj1UDMEWsA.O%2Fm%3D__features__%2Fam%3DQQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAItRSTOBGIO78ke1nPq-lUpNLXIVFuLQXA#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Conauth%2Conload&amp;id=I0_1363458070717&amp;parent=http%3A%2F%2Fwww.tipsntricks4fun.in&amp;rpctoken=43809772" allowtransparency="true" data-gapiattached="true" title="Google+ Badge"></iframe></div> 
<!-- Place this tag after the last badge tag. --> 
<script type="text/javascript">
 (function() {
  var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
  po.src = 'https://apis.google.com/js/plusone.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
 })(); 
</script> 
</div>
<div style="width:300px;  border-bottom:1px solid #ddd; margin:8px 5px 0px 0px; padding-bottom:7px;">
<iframe scrolling="no" frameborder="0" allowtransparency="true" src="http://platform.twitter.com/widgets/follow_button.1363148939.html#_=1363458078387&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=tonufz&amp;show_count=true&amp;show_screen_name=true&amp;size=m" class="twitter-follow-button twitter-follow-button" style="width: 266px; height: 20px;" title="Twitter Follow Button" data-twttr-rendered="true"></iframe> 
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> 
</div>
  <div class="emailsub">
 <div class="emailicon"><p style=" width:270px; color:#3A3A3A; font-size: 12px; font-weight: normal; font-family: Arial; padding:0; margin:0;">Receive Quality Tutorials Straight in your Inbox &nbsp; by submitting your Email ID below.</p></div>

  <div class="emailupdatesform">

  <form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tonufz', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify"><input type="text" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" value="Enter your email here..." name="email" class="emailupdatesinput" gtbfieldid="10" /><input type="hidden" name="uri" value="tonufz" /><input type="submit" class="joinemailupdates" value="Submit" /></form></div></div></div>

</div> 
<div class="clear"></div> 
<span class="widget-item-control"> 
<span class="item-control blog-admin">

<a title="Edit" target="configHTML10" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;HTML10&quot;));" href="//www.blogger.com/rearrange?blogID=2880957506989443513&amp;widgetType=HTML&amp;widgetId=HTML10&amp;action=editWidget&amp;sectionId=sidebar" class="quickedit">
 <img width="18" height="18" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" alt="" /></a> 
</span> 
</span> 
<div class="clear"></div>
</div>


Change The Following Link:


  • Feedburner link: http://feeds.feedburner.com/tonufz
  • Your Google+ Shorten link: http://gplus.to/tonufz
  • Your Facebook Page Link: https://www.facebook.com/your-page-link
  • Your Twitter Id: http://twitter.com/tonufz 
  • Twitter Nick Neme: tonufz
  • Feedburner Email RSS Link: http://feedburner.google.com/fb/a/mailverify?uri=tonufz
  • Feedburner Nick Name: tonufz
  • Your Blogger Id: blogID=2880957506989443513
  • And all Colourful Link

 Enjoy stylish subscriber widget for your blog

Recent Comments

ALEXA RANK

Copyright © 2013-2014 Tech-Everyday