Friday, February 28, 2014

Subscribe Widget


I can tell you that this is a very beautiful widget, has almost everything for one pro blog. You have all options to Subscribe, plus email. The design is great, minimalism and it is still the best solution. We all love those shiny widgets but why if this one has the same function and this is just great. See how it looks and how to install it.

DEMO

See Also: - Stylish Rss Feed Subscription Box For Blogger




Go to layout-->Add a gadget-->HTML/JavaScript and put above code in it.

Change YOUR-URL with yours and that's all.

Save template and happy blogging.




Monday, February 24, 2014

How to add popup window in blogger?











How to add popup window in blogger? Well answer is preety much same for all platforms, including wordpress, joomla or some site you made custom.
Few words about it:
JavaScript has three kind of popup boxes: Alert box, Confirm box, and Prompt box.

Also you have to know positions the popup over the link that opens it. 
But let's try with JavaScript. Works everywhere and you can use JavaScript to create popup windows. Popup windows are different to simply opening a new browser window.

This is on click "Opening Popup"
Here is the basic script for generating a popup window:

This is flat and responsive template & button is a little more "Plastic" but works great. On every template looks normal and smooth button.


This is "Link open popup"
Open a popup window



To create a JavaScript prompt, you use the prompt() method. Here's an example:



To create a JavaScript alert box, you use the alert() method. Here's an example:



I hope you like it, if you want more, like, write, share, whatever you want. Happy blogging dear friends.



Sunday, February 23, 2014

How to make / create "Sticky" Sidebar

Sticky sidebar is not necessary, but again, not that it is not, if you have a blog that goes almost to infinity, then this is the gadget for you and looks nice. To mention what it is, what it's for, what you can add and stuff. 


  • You can add your Subscription Form. 
  • You can add a Facebook Widget 
  • You can add any widget except adsense (advertising) because Google may prohibit your blog if you didn't know or  didn't have that information

And again: Always do "back up" of your template because you can restore it if something goes wrong.

Live Demo


How to create what you saw? Let's go step by step

CTRL + F and find </head> tag in blogger  
Next code copy and paste just above </head> tag

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/> <script type='text/javascript'> /*<![CDATA[*/ // Sticky Plugin // ============= // Author: Anthony Garand // Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk) // Created: 2/14/2011 // Date: 9/12/2011 // Website: http://labs.anthonygarand.com/sticky // Description: Makes an element on the page stick on the screen as you scroll // For Blogger by : http://www.makingdifferent.com (function($) { var defaults = { topSpacing: 0, bottomSpacing: 0, className: 'is-sticky', center: false }, $window = $(window), $document = $(document), sticked = [], windowHeight = $window.height(), scroller = function() { var scrollTop = $window.scrollTop(), documentHeight = $document.height(), dwh = documentHeight - windowHeight, extra = (scrollTop > dwh) ? dwh - scrollTop : 0; for (var i = 0; i < sticked.length; i++) { var s = sticked[i], elementTop = s.stickyWrapper.offset().top, etse = elementTop - s.topSpacing - extra; if (scrollTop <= etse) { if (s.currentTop !== null) { s.stickyElement.css('position', '').css('top', '').removeClass(s.className); s.currentTop = null; } } else { var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra; if (newTop < 0) { newTop = newTop + s.topSpacing; } else { newTop = s.topSpacing; } if (s.currentTop != newTop) { s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className); s.currentTop = newTop; } } } }, resizer = function() { windowHeight = $window.height(); }; // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer): if (window.addEventListener) { window.addEventListener('scroll', scroller, false); window.addEventListener('resize', resizer, false); } else if (window.attachEvent) { window.attachEvent('onscroll', scroller); window.attachEvent('onresize', resizer); } $.fn.sticky = function(options) { var o = $.extend(defaults, options); return this.each(function() { var stickyElement = $(this); if (o.center) var centerElement = "margin-left:auto;margin-right:auto;"; stickyId = stickyElement.attr('id'); stickyElement .wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>') .css('width', stickyElement.width()); var elementHeight = stickyElement.outerHeight(), stickyWrapper = stickyElement.parent(); stickyWrapper .css('width', stickyElement.outerWidth()) .css('height', elementHeight) .css('clear', stickyElement.css('clear')); sticked.push({ topSpacing: o.topSpacing, bottomSpacing: o.bottomSpacing, stickyElement: stickyElement, currentTop: null, stickyWrapper: stickyWrapper, elementHeight: elementHeight, className: o.className }); }); }; })(jQuery); /*]]>*/ </script>

This code is the same as above just I put in a box


  If you have jQuery plugin, then don't add this line
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>

Now search for </body>  tag 
Copy next code and add just above him. 

<script type='text/javascript'> $(document).ready(function(){ $(&quot;#mdstickybar&quot;).sticky({topSpacing:0}); }); </script>

Now search ]]></b:skin> tag and next line paste just above it

#mdstickybar { background-color:#ECEEF5; padding-top:10px; width:300px!important; padding-bottom:15px; color:#474747; }

Go to layout and choose widget you wish


When you click edit, you will see something like this


Blogger gives you uniqe ID for each widgets so you just find ID and copy number which is at the end of widget/gadget

Now this: Template—>Edit HTML 

CTRL + F and find ID which you've got 

Take a look how and where to search

Final result would be something like this
<b:widget id='HTML1' locked='false' title='Subscribe' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget>

Now copy this code ( bold, above )  <b:includable id=’main’> and add below 
<div id="mdstickybar">

Now copy and paste code just below this one code <data:content/> 
</div>

Finally is this:

<b:widget id='HTML1' locked='false' title='Subscribe' type='HTML'> <b:includable id='main'> <div id="mdstickybar"> <!-- only display title if it's non-empty --> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> </div> <b:include name='quickedit'/> </b:includable> </b:widget>

Save template and I really hope that you can manage with this. If there is some problem, let's try to fix it. Happy blogging.


Saturday, February 22, 2014

Flat Mag – Responsive Blogger Template (Premium)



FlatMag Blogger Template is a simple & clean designed with a fresh flat style and with a great responsive design. This theme perfect for magazine or personal websites.


Grid Pin Responsive Masonry Photography Free Blogger Template




Grid Pin is professional responsive Photography Blogger Template for sharing photos and designs. Grid Pin is making use of responsive masonry feature to give pinterest like masonry effect in home page, search pages, category pages and archive page. Posts and pages will have default 2 column layout.




Thursday, February 20, 2014

How To Remove Google Plus Account Permanently




Good day dear friends. You know that Google change also their Interface as much as it does facebook just Google doing it much more cunning and fainter so you can't see it so well. Facebook always has always reveal to all bells so everyone know even before they did it.
But let's get to the point. 
How To Remove Google Plus Account - new updates.
Althought everyone knows, not bad to remind from time to time.
If you are not logged in, which is almost impossible because Google basically force you to join Google + , then log in to your account.
2.Click on the Google Profile and select Account Setting or click here to open setting page directly.
Note: Lot of things changed so might look diferent to you.


3. Now look for settings and click on it.



4.  Go to settings and click on Delete your entire Google profile here

5. This time google didn't gave options like before to  remove only Google+ and profile. Now we have to remove all google products.

Unfortunately, this is no more on google 


The only way I found is this:



Scroll down the page and find this:


Click on fields you need but before you click, I suggest you to read all on the page so you can save precious information on Google, YouTube and other products.

Be careful while deleting your account because once deleted will not be recover back.



Wednesday, February 19, 2014

Subscription Widget for Blogger

Another widget with beautiful design. Very useful for any blog or site. It's easy to install and really gives a new and refreshing style to blogger/site.

Take a look at demo.It's gorgeous and really easy for user to spot in a momment.  





How to install:

Find this (CTRL + F ) ]]></b:skin> tag

Just above him, add next code:

#subscription {list-style: none;margin-top: 0px;}#subscription li {padding: 5px 10px 5px 10px;height: 60px;}#subscription li a {color: #000;}#subscription li a:hover {color: #DC002C;}#subscription li h4 {margin: 0 0 0 45px;font-size: 18px;color: #000;font-weight: bold;border: none;font-family: 'Droid Sans', Helvetica, Arial, sans-serif;}#subscription li p {margin: 0 0 0 45px;font-size: 13px;line-height: 1.4em;color: #666;}#subscription li img {float: left;padding: 0px;margin: 0px 10px 0px 0px;}#subscription li:hover {background-color: #ff4444;}

Click "Save template"

Next Step:

Layout-->Page Elements --> "Add a gadget"--> "html/java script" 

Add this code to HTML gadget

<div id="subscription">
<ul id='subscription'>
<li>

<a href="https://twitter.com/bloger_girl">
<img alt="Twitter" src="http://cdn5.iconfinder.com/data/icons/Social_store/64/twittershop.png"/></a>
<h4><a href="https://twitter.com/bloger_girl">Follow me</a></h4>
<p>You can follow my updates on Twitter</p>
</li>
<li>
<a href="http://feeds.feedburner.com/blogspot/ekWMe">
<img alt="Feed" src="http://cdn5.iconfinder.com/data/icons/Social_store/64/rssshop.png"/></a>
<h4><a href="http://feeds.feedburner.com/blogspot/ekWMe">Posts RSS</a></h4>
<p>Read my full posts on your favorite feed reader</p>
</li>
<li>
<a href="https://www.facebook.com/pages/Bloger-Girl/732237670136151">
<img alt="Facebook" src="http://cdn5.iconfinder.com/data/icons/Social_store/64/FacebookShop.png"/></a>
<h4><a href="http://www.facebook.com/">Facebook</a></h4>
<p>Become a fan of Bloger Girl on Facebook</p>
</li>
</ul>
</div>


Replace URL adress (colored) with yours URL and that's all. Have Fun :))



Tuesday, February 18, 2014

NewTek Free WordPress Theme


A simple and light WordPress theme. Great for blogging and tech sites. Features:- Full width featured images, Custom background, Custom logo, Footer widgets, Neat typography.

DEMO/DOWNLOAD






Unite – Free WordPress Wedding Theme




Unite is a clean, modern and fully responsive flat design WordPress wedding theme developed using Bootstrap 3 and made for simplicity and ease of use. It is a fully customizable theme with unlimited color variations that can be tweaked for various elements such as footer, navigation menu, fonts and much more. This theme is the best suited for wedding websites/blogs but can be used for other creative websites that require image-centric design. This theme has featured image slider which is powered by Bootstrap just like theme itself. Unite theme is a piece of art which will make your wedding or any other website to stand out.








Sunday, February 16, 2014

Foodie Free Blogger Template




Foodie Free Blogger Template

Foodie is a health and lifestyle magazine blog designed for cookery and health blogs this template comes loaded with tonnes of quality widgets which you’ll need for setting up a perfect cookery blog. To make this template more dynamic in functioning jQuery has been used.

LIVE DEMO DOWNLOAD

Theme Details

Theme Name : Foodie
Platform : Blogger/Blogspot
Author : www.templatetrackers.com
License : Creative Commons Attribution 3.0


Foodie is a health and lifestyle magazine blog designed for cookery and health blogs this template comes loaded with tonnes of quality widgets which you'll need for setting up a perfect cookery blog. To make this template more dynamic in functioning jQuery has been used.

Theme Features

Magazine Style Template
Foodie is a magazine style blogger template ideal for cookery blogger sites.

Browser Support
Foodie works perfectly in all major browsers Chrome, Safari, Firefox, IE etc.

SEO Optimized
Like all our templates Foodie is also optimized for SEO. Codes has been put in the template file which integrates itself with SEO plugin of blogger.

Drag & Drop Layout
Arrange all your widgets easily using drag & drop layout feature in this template.

Responsive Design/Fluid Width
Modern web-design techniques has been adapted to make the design of this blogger template responsive and fluid. Focus on content has been given more emphasis on mobile screen devices.

Fixed Sidebar
Fixed sidebar has been used in this template which gives a crisp feel to this template.

See the Demo
See the demo for more features in this template.


Guide For Geeks

Guide#1 Customize Menubar
To Customize top Menubar edit the following

<ul class='menu' id='menu-main'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Categories</a>
<ul class='sub-menu'>
.
.
.
</ul>
</ul>



Guide#2 Customize Social Icons
Edit the following to customize social icons
<div class='s-visible-large' id='social-top'>
<div class='social-profiles'>
<a class='zocial-twitter' href='https://twitter.com/temptrackers' target='_blank'/>
<a class='zocial-facebook' href='#' target='_blank'/>
<a class='zocial-dribbble' href='#' target='_blank'/>
<a class='zocial-vimeo' href='#' target='_blank'/>
<a class='zocial-googleplus' href='#' target='_blank'/>          
</div>



Original template adress is this: Template Trackers





BRTDesign - Free Blogger Template





BRTDesign Free Blogger Template

BRTDesign is a perfect choice for free premium blogger template which is having a magazine style. This template is designed with maximum colours that makes this theme more cool with 100% responsive design.
Author : ZmTemplates - http://zmtemplates.com






Blogger Template - Photorama, Responsive Photo Magazine


Photorama – Responsive Photo Magazine Blogger Template (Premium)

Photorama is an new Blogger template for many uses. Can cover multiple pages. You can use it as a diary to share your photos in internet. It’s responsive and easy to setup, very friendly with users.



MORE INFO DEMO

Template Features

  • Fully responsive
  • Post by Category
  • 404 error page.
  • Carousel Lite
  • Big jQuery Slider
  • Easy to setup
  • Dropdown Menu
  • and more …




Blogger Template - Icy Responsive Free Blogger Template


Icy Responsive Free Blogger Template

Icy is a clean and elegant blogger template with Post Formats. Special thanks to ‘Artur Biernacki’ Wildweblab’s owner for allowing us to release blogger template version of Icy template. Icy blogger theme is a surprise for all those bloggers, who were anxiously waiting for another elegant responsive template. Responsive layout and Retina ready icons and images makes this template look more beautiful on any device. This Grid style template is easy to use, with responsive slider and responsive related post area.






MORE/INFO  |   DEMO  DOWNLOAD










Thursday, February 13, 2014

How to add Question Captcha form


Question Captcha is anti - spam device but, by my opinion it is totally stupid thing, isn't it. Anyway, who like it or who ever need it, here is code. 
How to instal: Just paste next code bellow comment form and that's all. Simple thing and it's short but effective post.




How to Add Image Gallery with Thumbnails to Blogger


For those who would like to show pictures in an image gallery, here's a gallery made with JavaScript and CSS that includes some thumbnails with which you will be able to pick different images on mouse click.

With the help of CSS, we can then place the <img> element to make it appear at the same position for each thumb and we'll be able to style the thumbnails as small blocks with a defined height/width. The script will add a click-event for each <li> object that changes it's child's <img> visibility and assigns an "active" class name to the <li>.

Step 1. Log in to your Blogger dashboard, go to Template > Edit HTML



Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box





Step 3. Inside the search box type </head> and click enter to find it.

Step 4. Now pick one of the styles below that you like the most, then copy the code associated with it:


Style 1






















          <style type='text/css'>
          #image-gallery {display: none;}
          #jquery-gallery {padding:0;margin:0;list-style: none; width: 500px;}
          #jquery-gallery li {width:84px; height: 80px;background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; border: 3px solid #fff; outline: 1px solid #E3E3E3; margin-bottom: 10px;opacity: .5; filter:alpha(opacity=50); float: left; display: block; }
          #jquery-gallery li img { position: absolute; top: 100px; left: 0px; display: none;}
          #jquery-gallery li.active img { display: block; border: 3px solid #fff; outline: 1px solid #E3E3E3; width:490px; max-height: 375px;}
          #jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #DFDFDF; opacity: .99;filter:alpha(opacity=99);}
          </style>


          Style 2


          <style type='text/css'>
          #image-gallery { display: none; }
          #jquery-gallery {padding:0;margin:0;list-style: none; width: 200px; }
          #jquery-gallery li {background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; width: 80px; height: 80px; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; opacity: .5;filter:alpha(opacity=50); float: left; display: block; }
          #jquery-gallery li img { position: absolute; top: 0px; left: 200px; display: none; }
          #jquery-gallery li.active img { display: block; width:370px; border: 3px solid #fff; outline: 1px solid #E3E3E3; }
          #jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}
          </style>


          Note: The display: none; of the first ID (#image-gallery) is to prevent images appear with their actual size before they go inside the gallery container, this is while loading the code. In #jquery-gallery we have the width of the container for the thumbnails (200px), so that they display in two rows and for this we need to count the width of the thumbnail (80px) plus the margins between them. The left declaration of #jquery-gallery li img is to move the larger thumbnail that shows on mouse click so that it won't overlap with the smaller thumbnails. 

          Step 5. Paste the code that you copied earlier just above the </head> tag.

          Step 6. Just above the same </head> tag, add this script:



          <script type='text/javascript'>
          //<![CDATA[
          var gal = {
          init : function() {
          if (!document.getElementById || !document.createElement || !document.appendChild) return false;
          if (document.getElementById('image-gallery')) document.getElementById('image-gallery').id = 'jquery-gallery';
          var li = document.getElementById('jquery-gallery').getElementsByTagName('li');
          li[0].className = 'active';
          for (i=0; i<li.length; i++) {
          li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
          li[i].title = li[i].getElementsByTagName('img')[0].alt;
          gal.addEvent(li[i],'click',function() {
          var im = document.getElementById('jquery-gallery').getElementsByTagName('li');
          for (j=0; j<im.length; j++) {
          im[j].className = '';
          }
          this.className = 'active';
          });
          }
          },
          addEvent : function(obj, type, fn) {
          if (obj.addEventListener) {
          obj.addEventListener(type, fn, false);
          }
          else if (obj.attachEvent) {
          obj["e"+type+fn] = fn;
          obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
          obj.attachEvent("on"+type, obj[type+fn]);
          }
          }
          }
          gal.addEvent(window,'load', function() {
          gal.init();
          });
          //]]>
          </script> 


          Basically what this script does is to look if there is any ID named "image-gallery" and get the different list items that may exist within it. These elements will be displayed as thumbnails and a function will decide what to do when they are clicked. So, each time we click on a thumbnail, the "active" class will be assigned and the thumbnail should be visible in a larger container.

          Step 7. Save the changes by clicking on the Save template button.

          And finally, here's the HTML code. This is a normal list with the image-gallery ID, enclosed within a DIV with a relative position to avoid side effects of other pre-existing positions.

          Step 8. Paste the below HTML to where you want to display the gallery by going either to Layout and adding a new gadget (click on the Add a gadget link and choose HTML/JavaScript), or inside a post or page within the HTML section.


          <div style="position:relative;">
          <ul id="image-gallery">
          <li><img src="IMAGE-URL1" /></li>
          <li><img src="IMAGE-URL2" /></li>
          <li><img src="IMAGE-URL3" /></li>
          <li><img src="IMAGE-URL4" /></li>
          <li><img src="IMAGE-URL5" /></li>
          </ul>
          </div>


          Note: if elements on your page overlap with this gallery, you might need to add the height declaration after the position: relative; The value of height depends on the size of your gallery.


          Example:


           <div style="position:relative; height: 500px;"> 


          Change IMAGE-URL1 with the image URL. 

          <div style="position:relative;">
          <ul id="image-gallery">
          <li><a href="page-URL"><img src="IMAGE-URL1" /></a></li>
          <li><a href="page-URL"><img src="IMAGE-URL2" /></a></li>
          <li><a href="page-URL"><img src="IMAGE-URL3" /></a></li>
          <li><a href="page-URL"><img src="IMAGE-URL4" /></a></li>
          <li><a href="page-URL"><img src="IMAGE-URL5" /></a></li>
          </ul>
          </div>



          Here you need to replace the page-URL text with the URL of your page/post
          Few tips:

          To add space for more rows, increase the 100px value from this line:
          #jquery-gallery li img { position: absolute; top: 100px; left: 0px; display: none;}


          Save your widget and Happy Blogging.