Micro

How To Add Navigation Menu Bar To Blogger

noreply@blogger.com (Unknown) — Mon, 20 Nov 2017 08:34:00 +0000

You can Add navigation menu easy. try these steps.

1. Go to blogger dashboard and click Layout and

click Page Element

2. Click Add Gadget and select HTML/JavaScript widget.

3.You can see navigation bars code below.you can copy the code paste it to inside HTML/JavaScript widget.
Style 1:

<style> #navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #fff; background-color: #FE9C54; } </style> <div id="navcontainer"> <ul id="navlist">
<li><a href="Link 1"><span>Name 1</span></a></li> 
<li><a href="Link 2"><span>Name 2</span></a></li>
<li><a href="Link 3"><span>Name 3</span></a></li>
<li><a href="Link 4"><span>Name 4</span></a></li>
<li><a href="Link 5"><span>Name 5</span></a></li>
<li><a href="Link 6"><span>Name 6</span></a></li> 
<li><a href="Link 7"><span>Name 7</span></a></li>
</ul> </div>

Style 2:

<style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvA5SCr4aI/AAAAAAAACvs/z9n_NmrOa5s/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvA5lGRr2I/AAAAAAAACvw/691UrUgNOOA/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } </style> <div id="tabsE"> <ul>
<li><a href="Link 1"><span>Name 1</span></a></li> 
<li><a href="Link 2"><span>Name 2</span></a></li>
<li><a href="Link 3"><span>Name 3</span></a></li>
<li><a href="Link 4"><span>Name4</span></a></li>
<li><a href="Link 5"><span>Name 5</span></a></li>
<li><a href="Link 6"><span>Name 6</span></a></li> 
<li><a href="Link 7"><span>Name 7</span></a></li>
</ul> </div>

Style 3:

<style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style> <div id="navcontainer"> <ul id="navlist">
<li><a href="Link 1"><span>Name 1</span></a></li> 
<li><a href="Link 2"><span>Name 2</span></a></li>
<li><a href="Link 3"><span>Name 3</span></a></li>
<li><a href="Link 4"><span>Name4</span></a></li>
<li><a href="Link 5"><span>Name 5</span></a></li>
<li><a href="Link 6"><span>Name 6</span></a></li> 
<li><a href="Link 7"><span>Name 7</span></a></li>
</ul> </div>

Style 4:

<style> #tabsH { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsH ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsH li { display:inline; margin:0; padding:0; } #tabsH a { float:left; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvBBx63ZtI/AAAAAAAACwE/lOu0RDcHs_c/s1600/tableftH.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsH a span { float:left; display:block; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvBB9V8tWI/AAAAAAAACwI/rmnQz1WjK-g/s1600/tabrightH.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsH a span {float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; } #tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span { background-position:100% -42px; } </style> <div id="tabsH"> <ul>
<li><a href="Link 1"><span>Name 1</span></a></li> 
<li><a href="Link 2"><span>Name 2</span></a></li>
<li><a href="Link 3"><span>Name 3</span></a></li>
<li><a href="Link 4"><span>Name4</span></a></li>
<li><a href="Link 5"><span>Name 5</span></a></li>
<li><a href="Link 6"><span>Name 6</span></a></li> 
<li><a href="Link 7"><span>Name 7</span></a></li>
</ul> </div>

TeleMag

noreply@blogger.com (Admin) — Fri, 09 Jun 2017 14:39:00 +0000

TeleMag is 100% responsive, 2 columns free blogger theme with a right sidebar and 3 columns widgets area in footer. TeleMag Blogger template has a mobile friendly featured posts slider, primary and secondary menus, auto post summaries, social icons and share buttons, web fonts, header banner widget, related posts with thumbnails and more.

Demo Download

Apple's new 27-inch iMac is finally a formidable system

noreply@blogger.com (Admin) — Wed, 07 Jun 2017 16:45:00 +0000

A 27-inch iMac is one overwhelming piece of digital machinery. Sit close enough to it and there’s only screen, and the iconic aluminum chin and polished chrome Apple logo below.

It’s always been a good system, the kind that your co-workers lust after, even if they didn’t know that under the hood were relatively mid-level components. The iMac is easily Apple’s most popular desktop and, even though it lacks the performance of a Mac Pro, it’s been the choice of many professionals for years. Of course, if you use a non-pro-system for pro-level tasks, you may be frustrated. Apple heard the complaints and decided to give these hard workers what they always wanted: more powerful components in the same stunning profile.

This is not, though, Apple’s ultimate solution to the iMac vs. pro-use problem. That comes later this year in the form of the iMac Pro. That space-gray system will offer up to 18 cores of performance, insane graphics and, at $4,999, it’s probably not going to be the iMac for everyone.

Thankfully, Apple did not forget the middle-to-high ground. It’s upped the components on the entire iMac line to Intel’s more powerful and efficient 7th-generation Core i CPUs (AKA Kaby Lake) and now offers powerful discrete graphics.

I’m using one of these new systems right now, a 27-inch 5K Retina iMac running a 3.4GHz Intel Core i5 chip, 8GB of DDR4 RAM, a 1TB Fusion hard drive, and AMD’s Radeon Pro 570 GPU with 4GB of VRAM. It lists for a more reasonable $1,799.

It also now has two Thunderbolt 3 USB-C posts, along with four USB 3.0 ports, and a Gigabit Ethernet port. The iMac is not yet loaded with the upcoming version of macOS, High Sierra, which, with its Metal 2 graphics engine, might take better advantage of the new CPU, but it’s still a fast and powerful system.

It’s also easy to set up. The all-in-one 27-inch iMac is a solid 20 pounds, but once I unboxed it and put it on a desk, I only needed a fingertip to adjust the giant screen on its L-shaped aluminum base. There’s a single power cord and a large power button on the back that I can reach without craning my head around the display, and both the rechargeable mouse and keyboard auto-connect via Bluetooth. After that, I followed the brief setup routine, signed into my iCloud account (which includes using iCloud to store documents and everything that’s on my desktop) and the system was ready to go.

Apple also provided me with a brand-new Magic Keyboard ($129, not included), which looks a lot like the keyboard that ships with the iMac, except that it adds direction and function keys as well as a full numeric keypad. Physically, it’s the most distinctly different thing about my setup.

I like the Magic Keyboard. The keys have good travel and response, and I don’t even mind that the tilt — which brings the rear keys a little closer to my fingers — is not as extreme on this keyboard.

What I don’t like, though, is that the left Shift key has shrunk, which meant I sometimes missed it and hit the relocated single quote instead. On the right, the return key has a little cutout to accommodate the back slash. Essentially, Apple added so much to this keyboard that, to keep it from getting too wide, they apparently squished a couple of keys. It’s not a big deal, but will take some getting used to.

Screen dream and performance
I was already a big fan of Apple’s 5,120 x 2,880 5K Retina display, but with the added brightness (500 nits) and richer colors, images move a giant step closer to reality. Not only do photos look amazing, but the clarity of every app screen and icon is as sharp as can be. Apple says the display can show a billion colors. It’s not exactly something I can verify, but based on the image quality the count is definitely up there.

Since virtually all the changes on the latest iMac are at a component level, I decided to run a few benchmarks.

I started with GeekBench 4. The single-core numbers and multi-core numbers were among the highest I’ve seen for an Intel Core i5 running on an iMac, but not by a wide margin. The system's read and write speeds on the AJA test suite blew away those on my 2.4GHz Core i5-running Microsoft Surface Pro 4.

I also ran Cinebench’s 3D graphics test where I got a pleasing 87.54 frames per second (fps) on the OpenGL test.

Finally, I ran a little file-copy test where I created a 1GB file, made 16 copies, and then duplicated the entire folder. That folder duplication took almost 8 minutes. I’d call that impressive.

In general, though, benchmarks are like Little League participation trophies. They don’t really mean anything. What matters is day-to-day performance on critical tasks in demanding apps like Photoshop, AutoCAD, and Strata 3D. Based on the numbers I saw and even my minute-to-minute experiences with the 27-inch iMac, I’d say it will handle all those jobs with ease.

I did a bunch of other, more mundane tasks on the system, like Safari browsing, email, photo manipulation, and uploading. There were no issues and everything worked as it did before. I’m honestly eager to try macOS High Sierra on this big rig.

mashable

You Have Got To See This Rare And Insanely Beautiful Sunset

noreply@blogger.com (Admin) — Wed, 07 Jun 2017 16:11:00 +0000

How to add a damn cool Lightbox to blogger (PrettyPhoto Lightbox)

noreply@blogger.com (Admin) — Wed, 07 Jun 2017 14:09:00 +0000

There are so many blogger lightbox alternative but, i came up with top jQuery lightboxes. These custom lightboxes provides basic key benefits with additional features like auto slideshow, responsive to desktop tablets and mobiles, easy to customize etc. If you want to replace your simple blogger image lightbox viewer with a cool custom stylish responsive jQuery lightbox plugin to show off your pictures gallery in a stylish manner then just follow the below given step by step tutorial with images and demo:

Lightbox Demo

Installation Guide

If this is what you're looking for, follow the simple steps to install it.

STEP - 1: Go to Your Blogs Home > Template > Edit HTML

STEP - 2: Add jQuery script. (If your template already have a jQuery script installed then skip this step.)

Place the following code just before the closing head tag </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

STEP - 3: Add PrettyPhoto plugin.

Place the following code just before the closing head tag </head>

<script src='https://cdnjs.cloudflare.com/ajax/libs/prettyPhoto/3.1.6/js/jquery.prettyPhoto.min.js' type='text/javascript'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/prettyPhoto/3.1.6/css/prettyPhoto.min.css' rel='stylesheet' type='text/css'/>

STEP - 4: Initialize the Lightbox (Final step)

Place the following code just before the closing body tag </body>

<script type='text/javascript'>
  $(".post-body").each(function(i) {
      $(this).find("img").closest('a').attr("rel", "prettyPhoto[gallery" + (i + 1) + "]");
  });
</script>
<script charset='utf-8' type='text/javascript'>
  $(document).ready(function(){
      $(".post-body a[rel^='prettyPhoto']").prettyPhoto({
          animation_speed:'normal',
          slideshow: 5000, 
          theme: 'pp_default',
          autoplay_slideshow: true
      });
  });
</script>

You've successfully installed the PrettyPhoto Lightbox. Any question or any suggestion to improve this widget is more than welcome.

Mostheme Blogger template

noreply@blogger.com (Admin) — Wed, 07 Jun 2017 12:55:00 +0000

Mostheme is powerful Blogger template designed in a clean and minimalistic style. Template can be used for any type of website, business, corporate, portfolio, products, marketing, etc. Primary has been coded in HTML5 & CSS3 and little bit using jQuery. It contains a lot of HTML pages with flexible responsive layout and mobile responsive. Tt very recommended to all of publisher, because this template really high CTR absolutely

LIVE DEMO | DOWNLOAD

Orchid

noreply@blogger.com (Admin) — Wed, 07 Jun 2017 11:43:00 +0000

Orchid is a Clean Responsive Personal Blogger Template. It is easy to customize and specially designed for Personal Blog like Travel Blog, Fashion Magazine Blog, Fashion Blog, Travel Blog, Food Recipe Blog, Life Style Blog, Adventure Blog, Tech Blog, and any other awesome blog Website.

LIVE DEMO | DOWNLOAD

Trendy Blogger Template

noreply@blogger.com (Admin) — Wed, 07 Jun 2017 10:28:00 +0000

Trendy is a Clean, bright, and classy Responsive Minimal Blogger Template. It has a minimalistic layout that focuses on simplicity and readability. Easy installation allows you to start post blogs immediately after the activation. Theme supported Customizer which allows you to customize and change the design of your blog. Perfect choice for your personal blog, corporate blog, marketing blog, authority blog or any type of creative blog.

LIVE DEMO | DOWNLOAD

Facebook celebrates Pride month with rainbow reaction, frames, and filters

noreply@blogger.com (Admin) — Tue, 06 Jun 2017 17:04:00 +0000

It’s Pride month, so Facebook is adding several new features to help you celebrate and support the LGBTQ community.

Of course, it wouldn’t be a Facebook celebration without some kind of profile photo frame. Throughout June, you’ll see a message atop your feed inviting you to add a frame (react to this message and you’ll get a little animated surprise). I’m a fan of the rainbow swish Facebook is using as a frame this time around.

That said, there doesn’t seem to be any way of manually enabling Facebook’s official frame at the moment – you’ll have to wait for the message to show up on your feed. You can go to Facebook’s frame selection tool and search for a Pride frame, but I’m not seeing the official Facebook one yet, only those submitted by the community. Still, there are plenty of alternatives to choose from.

There’s also now an extra reaction you can use to indicate your support (a rainbow flag, naturally) on posts and comments. We’ve seen Facebook use extra reactions previously, so it’s nice to see the company deploying it for pride.

Within the camera, you’ll find a variety of new masks and frames. Just tap on the magic wand to bring up the effects. Instagram and Messenger aren’t being left out either, each with their own set of stickers and effects. There’s a new rainbow brush I particularly like on Instagram.

All that being said, Facebook isn’t specifying how widely it’s rolling out the new Pride features. I imagine it’s limited to countries where the LGBTQ community has wide support, but we’ve contacted the company for clarification.

thenextweb

How to Creating Colorful Float Buttons With CSS Very Easy

noreply@blogger.com (Unknown) — Mon, 11 Apr 2016 11:50:00 +0000

Box float burrons are made using some CSS. So you can apply CSS its function for other elements such as menu navigation buttons, download button, or possibly the key back-to-top. Because, basically, this box using CSS: hover and: active to create effects such as clicking on an element.

See Demo Here

Well, let's start it:

Go to blogger dashboard and choose blog you want to add these buttons.

Click the Edit HTML and find ]]></skin> tag.

Just above that, add next code:

CSS:

body {
  background-color: #eee;
  padding: 50px;
  text-align: center;
}

#box-melayang {
  display: inline-block;
  position: relative;
  background-color: white;
  width: 70px;
  height: 40px;
  margin: 0 5px;
  -webkit-box-shadow: 0 10px 5px -4px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 10px 5px -4px rgba(0, 0, 0, .2);
  box-shadow: 0 10px 5px -4px rgba(0, 0, 0, .2);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  font: normal normal 20px/40px "helvetica", Oswald, Arial, Sans-Serif;
  text-align: center;
  color: #888;
  cursor: default;
  width: auto;
  padding: 0px 8px;
}

.custom {
  background: #007AC3 !important;
  color: #fff !important;
}

.custom1 {
  background: #3853B1 !important;
  color: #fff !important;
}

.custom2 {
  background: #DD3636 !important;
  color: #fff !important;
}

.custom3 {
  background: #DD369A !important;
  color: #fff !important;
}

#box-melayang:hover {
  top: 5px;
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
  box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
}

#box-melayang:active {
  top: 6px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

Don't forget to backup tempalate. Also, before saving you can preview your blog to see is everything ok. If isn't, editor will not save your template.

Now go to Layout → Add Widget/Gadget → Choose HTML and Paste next code:

<div id="box-melayang" class="custom1">Like us</div>
<div id="box-melayang" class="custom2">Share +</div>
<div id="box-melayang" class="custom3">Love it !</div>
<div id="box-melayang" class="custom">Follow us</div>

You can customize it very easy, like, follow me, change color (you can find color codes here)
That's it. I hope it's working fine

Translate widget

noreply@blogger.com (Unknown) — Fri, 08 Apr 2016 05:07:00 +0000

Translate widget is necessary for any native website or Blog. Suppose your site is in Bangla or Hindi language but containing some unique articles, in this case by using translator, people from any other language speaking area can read your contant and enrich their knowledge. In many cases we have seen that some local website with native language publish article or information first at that case if that website or blog content translator widget then readers from around the world can read that
article. Similarly in Google Blogger we have a default widget but may users don't like to add it because of generic style and looks. So here is custom translate widget which will look professional and this will match with many types of template. It is very easy to install in Blogger template. And note that this widget will use Google translator to translate your Blog. So custom code has added to customize the original Google translate widget.

First log into blogger first
Click Layout
Click the tab Page Element
Click Add a Gadget
Select Add HTML / JavaScript Copy paste code translate down into the fields.

Style 1 - Copy this code:

<style>
.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>
<div>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=sr%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="http://lh6.ggpht.com/_pt7i0nbIOCY/SWwjycGEnLI/AAAAAAAAA1o/7p6S3-tipsA/English_thumb%5B3%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=sr%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj1AdOWZI/AAAAAAAAA1w/lWUkGNrOFYo/French_thumb%5B5%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=sr%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwj4Ab0NaI/AAAAAAAAA14/3H56LPKtijA/German_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=sr%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj8KhadjI/AAAAAAAAA2A/GNyl8VBie3o/Spain_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=sr%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj-14HeyI/AAAAAAAAA2I/TN52dIqkO9Q/Italian_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=sr%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkBmKewNI/AAAAAAAAA2Q/43NEAnyNo1I/Dutch_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<br> 
 <br> 
<br> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=sr%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkESa-0pI/AAAAAAAAA2Y/i0X4cKgxq3g/Russian_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=sr%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkG0osjzI/AAAAAAAAA2g/_kM2A16R_Ho/Portuguese_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=sr%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkJ6RBJAI/AAAAAAAAA2o/lpsTh893J3k/Japanese_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=sr%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkMouNMKI/AAAAAAAAA2w/L5l6J-Hh8XA/Korean_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=sr%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkPdkvXBI/AAAAAAAAA24/A1LSG1lcuac/Arabic_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="http://lh6.ggpht.com/_pt7i0nbIOCY/SWwkSgrv4ZI/AAAAAAAAA3A/jQqZ1l6avts/Chinese-Simplified_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

</div> <div style=font-size:10px;margin:8px 0px 3px 0px>
by : <a href=http://mix--er.blogspot.com/>MicroNet</a>
</div>

Style 2 - Copy this code:

 <style>
.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>
<div>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=sr%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="http://lh6.ggpht.com/_pt7i0nbIOCY/SWwjycGEnLI/AAAAAAAAA1o/7p6S3-tipsA/English_thumb%5B3%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=sr%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj1AdOWZI/AAAAAAAAA1w/lWUkGNrOFYo/French_thumb%5B5%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=sr%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwj4Ab0NaI/AAAAAAAAA14/3H56LPKtijA/German_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=sr%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj8KhadjI/AAAAAAAAA2A/GNyl8VBie3o/Spain_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=sr%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj-14HeyI/AAAAAAAAA2I/TN52dIqkO9Q/Italian_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=sr%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkBmKewNI/AAAAAAAAA2Q/43NEAnyNo1I/Dutch_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=sr%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkESa-0pI/AAAAAAAAA2Y/i0X4cKgxq3g/Russian_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=sr%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkG0osjzI/AAAAAAAAA2g/_kM2A16R_Ho/Portuguese_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=sr%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkJ6RBJAI/AAAAAAAAA2o/lpsTh893J3k/Japanese_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=sr%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkMouNMKI/AAAAAAAAA2w/L5l6J-Hh8XA/Korean_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=sr%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkPdkvXBI/AAAAAAAAA24/A1LSG1lcuac/Arabic_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=sr%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="http://lh6.ggpht.com/_pt7i0nbIOCY/SWwkSgrv4ZI/AAAAAAAAA3A/jQqZ1l6avts/Chinese-Simplified_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
</div> <div style=âfont-size:10px;margin:8px 0px 3px 0pxâ>
by : <a href=http://mix--er.blogspot.com/>MicroNet</a>
</div>

Let your readers easily translate your blog with this highly compact widget. This blog translator is powered by Google Translate. The languages available at the click of a flag are Chinese, German, French, Japanese, Korean, Russian, Spanish and other languages.

How To Make Facebook Cover for Anime in Photoshop - Tutorial

noreply@blogger.com (Unknown) — Fri, 08 Apr 2016 01:30:00 +0000

Bootstrap

noreply@blogger.com (Unknown) — Thu, 07 Apr 2016 10:09:00 +0000

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.

Bootstrap is completely free to download and use!

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <div class="jumbotron">
    <h1>My First Bootstrap Page</h1>
    <p>Resize this responsive page to see the effect!</p> 
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>
</body>
</html>

Astonish, Sora,

noreply@blogger.com (Unknown) — Tue, 01 Mar 2016 08:26:00 +0000

Astonish is a one of the most Modern, Clean and Creative Blogger Theme. A creative and unique style with fantastic slider, numerous post formats and excellent promo blocks will attract new visitors and you will breathe new life into your blog. Just give your blog a little Astonish. Fully responsive, fits any size of display from lower to higher resolutions and supports all modern browsers. Let’s make your blog the source of inspiration.

Download .zip
No Virus, Analyzed by AVG
Live Demo Here
Just One Click Between Us

Automated Recent Posts Slider for Blogger

noreply@blogger.com (Unknown) — Fri, 12 Feb 2016 23:16:00 +0000

The number of bloggers worldwide has increased tremendously. Many of us would have more than 1 blog. If yes this widget may help you a lot to share the traffic in both the blogs. Even if you don't have more than one blog you may add this widget to your very own blog. This will help your blog have less bounce rate and more pageviews.

Automated Recent Posts Slider is a widget for blogger which will show the recent posts of your desired blog with nice and awesome interface. This widget updates automatically and you do not have to edit the widget and add images, titles and description again and again. You just have to add the URL of the blog and your setup will be complete.
A live demo of this widget can be seen here.

Adding the Widgets code in Blog Layout
In order to add this widget's code go to Blog Title → Layout → Add Widget → HTML/JavaScript and paste the given code in the box opened.

<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/><div id="slider-rotator" class="slider-rotator loading"></div><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script><script type="text/javascript">makeSlider({ url: "http://YOURURL.blogspot.com" // Add your blog URL});</script>

After adding the code change the URL in Bold Blue with your own desired URL and save the widget. Finally save the template which will make the widget live.

You are done now. Now you and your visitors can see this awesome Automated Recent Posts Slider in your blogger blog.

How to Create Full Screen Preloading Effect

noreply@blogger.com (Unknown) — Thu, 11 Feb 2016 05:24:00 +0000

LIVE DEMO | DOWNLOAD

In this tutorial, We will learn how to create full screen simple,clean preloading effect by html/css/image. Sometimes your website contents taking more times to loading. That's can be frustration of your readers. By adding full screen preloading effect, it can reduce readers frustration.

When readers visit your site, they will see it. Then after full website page content load, it will be removed. You can add it anywhere by choosing any image. We created this script by simple way so that you can understand easily. Read from A to Z carefully.

HTML - You need to add following html code after <body> tags

<div id='preloader'>
   <div id='status'>
      <img alt='' height='64' src='images/preloader.gif' width='64'/>
   </div>
</div>

First div id preloader we used for full page screen background color and Second div id status we used for set up image. You will fully understand when you will see css code. You can replace default preloader image url by creating a new one as your like and replace this default image url from html.

CSS - You need to add following css code in your css file

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #222222;
    z-index: 99999;
    height: 100%;
}
#status {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    padding: 0;
}

Your preloader image size must be 64x64. If your image background color white or other, you can use same color for full page screen from #preloader css code by replacing #222222 background color code.

Javascript - You need to add following javascipt code

/*====================================
  Preloader
======================================*/

 $(window).load(function() {

   $("#status").fadeOut("slow");

   $("#preloader").delay(500).fadeOut("slow").remove();     

 })

$("#status").fadeOut("slow"); This code will first fade out the loading animation.
$("#preloader").delay(500).fadeOut("slow").remove(); This code will fade out the whole DIV that covers the website.

How to Add Image Gallery with Thumbnails to Blogger

noreply@blogger.com (Unknown) — Wed, 10 Feb 2016 05:05:00 +0000

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:

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.

How to Add CSS Animated Share Buttons on Blogger

noreply@blogger.com (Unknown) — Sun, 07 Feb 2016 05:33:00 +0000

Let your blog readers to show their love by sharing your blog post with friends and connection on social networking sites. In this tutorial we will see how to add CSS animated share buttons on blogger which contains 4 social media share buttons/icon (Facebook, Twitter, Google+ and Pinterest) with cool hover effect. Also you can replace the social networks by changing the links provided below.

How to Add CSS Animated Share Buttons on Blogger?

Step 1: Go to Blogger Dashboard> Template > Edit HTML

Step 2: Press CTRL + F to enable search box, and search for ]]></b:skin> tag.

Step 3: Just above ]]></b:skin> tag add following code.

.share_button {
width: 300px;
height: 50px;
margin: 10px auto;
}
.share_button ul {
width: 50%;
height: inherit;
float: left;
list-style: none;
margin: 0 !important;
padding: 0 !important;
}
.share_button ul h1 {
margin-top: 9%;
overflow: hidden;
width: 100%;
color: #4889F0;
font-size: 18px;
text-shadow:2px 2px 2px #fff;
}
.share_button ul li {
position: absolute;
height: inherit;
width: 150px;
margin: 0 !important;
padding: 0 !important;
background: #EEEEEE;
-webkit-transition: all 600ms;
-moz-transition: all 600ms;
-o-transition: all 600ms;
-ms-transition: all 600ms;
transition: all 600ms;
text-align: center;
}
.share_button ul li h2 {
display: inline-block;
width: 32%;
height: 40px;
overflow: hidden;
margin-top: 5%;
cursor: pointer;
border: 0 !important;
}
.share_button ul:first-child li:first-child{
text-align: right;
}
.share_button ul:last-child li:first-child{
text-align: left;
}
.share_button ul:first-child li:last-child,
.share_button:hover ul:first-child li:first-child {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
transform: rotateY(90deg);
}
.share_button ul:last-child li:last-child,
.share_button:hover ul:last-child li:first-child {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.share_button:hover ul:first-child li:last-child,
.share_button:hover ul:last-child li:last-child {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}

Step 4: Next, Search for the <div class='post-footer'> - find the second and paste the following code just above it:

<div class='share_button'>
<ul>
<li><h1>
Share t
</h1></li>
<li><h2>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.canonicalUrl + "&t=" + data:post.title ' title='Share on Facebook'><img src="http://2.bp.blogspot.com/-UK3OEVM0cVw/UwJfjtO-exI/AAAAAAAAGPA/CqQmlIlNJAE/s1600/Facebook.png"/></a></h2>
<h2><a expr:href='"http://twitter.com/home?status=" + data:post.title + " " + data:post.canonicalUrl ' title='Share on Twitter'><img src="http://4.bp.blogspot.com/-XyPHPVsfdz4/UwJfkJmI3JI/AAAAAAAAGPQ/QRGykJJtGow/s1600/Twitter.png"/></a></h2>
</li>
</ul>
<ul>
<li><h1>his page</h1></li>
<li>
<h2><a expr:href='"https://plus.google.com/share?url=" + data:post.canonicalUrl ' title='Share on Google Plus'><img src="http://3.bp.blogspot.com/-_YGvQ_Nrw10/UwJfjhXOGGI/AAAAAAAAGPU/tv1WNfkHdgg/s1600/Google-plus.png"/></a></h2>
<h2>
<a href='javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'><img src="http://4.bp.blogspot.com/-oZgH_AD169o/UwJfjl3ON0I/AAAAAAAAGPE/BLj5lWbsZyE/s1600/Pinterest.png"/></a>
</h2>
</li>
</ul>
</div>

Step 5: Click on the Save template button and we're done! Enjoy ;)

Recipes blogger template

noreply@blogger.com (Unknown) — Sat, 03 Oct 2015 02:31:00 +0000

Recipes is a blogger template specially designed for food and health bloggers. It's loaded with lots of amazing features which extracts out the best form your blog's content and display it in a very beautiful way. This theme is included with a well documentation file which will guide you in easy installation of this template.

LIVE DEMO | DOWNLOAD

Masterpiece

noreply@blogger.com (Unknown) — Sat, 03 Oct 2015 02:18:00 +0000

Masterpiece is a Clean and Minimalist blogging theme , Simple yet elegant template that will keep your visitors intrigued the minute they land up on your site, This Template is created for the people who loves to share their stories, writing blogs about Fashion, Décor, Lifestyle and many more. MASTERPIECE is a clean and Light Weight blog template that gets rendered very fast and it is a Responsive Blogger Template optimized for all Devices from mobile phones to tablets and from laptops to other big screens. Masterpiece is very flexible, easy to customize template and it is very well documented, which will help you to get familiar with all the tweaks needed while installation of this blog template. It is an easy-to-use blogger template, a perfect match for Fashion/Beauty Bloggers, Personal Bloggers, Content Providers, and Simple Creative Magazines etc. who need a beautiful yet powerful platform to showcase their work.

LIVE DEMO | DOWNLOAD

Basic Instructions: How to install a Blogger template

Author: Yo..! Templates

StagoMag Blogger Template - Configuration Guide

noreply@blogger.com (Unknown) — Sat, 01 Aug 2015 03:21:00 +0000

How To Configure Top Navigation Menu

<ul class='menu-itemsnbt' id='menu-primary-items'>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li class='menu-item-has-children'><a href='#'>Business</a>
<ul class='sub-menu'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>

...

</ul>

How To Configure Featured Content Slider:

There are 3 slides in the slider. You can add or remove more slides if you want.

This is the code for the first slide:


<li>
<article class='slidenbt'>
<a href='ENTER-SLIDE-1-LINK-HERE'><img src='https://3.bp.blogspot.com/-8uZFXjeAfTE/VtuJ7XYCljI/AAAAAAAARSA/gRh9edmPSvA/s1600/slide-1.jpg'/></a>
<div class='bx-caption'>
<h2 class='slider-titlenbt'><a href='ENTER-SLIDE-1-LINK-HERE'>Enter Slide 1 Title Here</a></h2>
<p>This is slide 1 description. Go to Edit HTML of your blogger blog. Find these sentences. You can replace these sentences with your own words.</p>
</div>
</article>
</li>



Now replace,
"ENTER-SLIDE-1-LINK-HERE"s with your real slide link,
"Enter Slide 1 Title Here" with your real slide title,
"This is slide 1 description. Go to Edit HTML of your blogger blog. Find these sentences. You can replace these sentences with your own words." with your real slide description,

"https://3.bp.blogspot.com/-8uZFXjeAfTE/VtuJ7XYCljI/AAAAAAAARSA/gRh9edmPSvA/s1600/slide-1.jpg" with your real slide image URL.

Do the same thing for next 2 slides.

How To Configure Social Followers Count

Find this:
<div class='widget swt_followers_number'>
<ul>


<li>
<a class='swt-facebook' href='https://www.facebook.com/blogosphere/' rel='nofollow' target='_blank' title='Join us on Facebook!'>
<i class='fa fa-facebook-square'/>
<span class='f-socialnum'>20111</span>
<span class='swtfans'>Fans</span>
</a>
</li>

...

</ul>

</div>

Code is self-explanatory. Change social followers numbers and social profile URLs as you like.

How To Configure Social Buttons

Find this in "Edit HTML":

<ul id='social-profilesnbt'>
<li><a class='fa fa-facebook' href='#' rel='nofollow' target='_blank' title='Facebook'/></li>
<li><a class='fa fa-twitter' href='#' rel='nofollow' target='_blank' title='Twitter'/></li>
<li><a class='fa fa-google-plus' href='#' rel='nofollow' target='_blank' title='Google Plus'/></li>
...

</ul>

Add your own social links replacing "#" marks.

How To Configure Footer Navigation Menu

Go to "Layout". Click on "Edit" link of "Edit This Menu" widget.

Now add your links to that link list widget.

StagoMag Blogger Template Responsive View

How to install "Back to the Top" button

noreply@blogger.com (Unknown) — Sun, 07 Jun 2015 18:11:00 +0000

ht - arlinadesign
In the this post I'l show how to install smooth back top top button. This button is useful for visitors to go back on the content or the menu at the top briefly and coupled with attractive animation effects.
Different from the button back to top I've ever shared, this button using the image of rocket that slide with a touch animated fire effect when the button is clicked.
For those who want to try it, please follow these steps:

Open Blogger→Click Template →Edit HTML→ Find the code ]]></skin> then copy the code below right before or above it

/* Back to Top Roket meluncur */
#scrolltop{display:none}
#rocketmeluncur{position:fixed;bottom:50px;z-index:7;display:none;visibility:hidden;width:26px;height:48px;right:25px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) 50% 0 no-repeat;opacity:0;-webkit-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-webkit-transform .6s cubic-bezier(.6,.04,.98,.335);-moz-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-moz-transform .6s cubic-bezier(.6,.04,.98,.335);transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),transform .6s cubic-bezier(.6,.04,.98,.335)}
#rocketmeluncur i{display:block;margin-top:48px;height:14px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) 50% -48px no-repeat;opacity:.5;-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;transition:transform .2s;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0}
#rocketmeluncur:hover{background-position:50% -62px}
#rocketmeluncur:hover i{background-position:50% 100%;-webkit-animation:flaming .7s infinite;-moz-animation:flaming .7s infinite;animation:flaming .7s infinite}#rocketmeluncur.showrocket{visibility:visible;opacity:1}
#rocketmeluncur.launchrocket{background-position:50% -62px;opacity:0;-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);transform:translateY(-800px);pointer-events:none}
#rocketmeluncur.launchrocket i{background-position:50% 100%;-webkit-transform:scale(1.4,3.2);-moz-transform:scale(1.4,3.2);transform:scale(1.4,3.2)}

To be safe, save images in each directory:

http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png

2. Next, copy the code below shelf just above </body> tag

<a href="javascript:void(0);" id="rocketmeluncur" class="showrocket" ><i></i></a>

3. JQuery

<script type='text/javascript'>
//<![CDATA[
jQuery(window).scroll(function(){jQuery(window).scrollTop()<50?jQuery("#rocketmeluncur").slideUp(500):jQuery("#rocketmeluncur").slideDown(500);var e=jQuery("#ft")[0]?jQuery("#ft")[0]:jQuery(document.body)[0],t=$("rocketmeluncur"),n=(parseInt(document.documentElement.clientHeight),parseInt(document.body.getBoundingClientRect().top),parseInt(e.clientWidth)),r=t.clientWidth;if(1e3>n){var l=parseInt(fetchOffset(e).left);l=r>l?2*l-r:l,t.style.left=n+l+"px"}else t.style.left="auto",t.style.right="10px"}),jQuery("#rocketmeluncur").click(function(){jQuery("html, body").animate({scrollTop:"0px",display:"none"},{duration:600,easing:"linear"});var e=this;this.className+=" launchrocket",setTimeout(function(){e.className="showrocket"},800)});
//]]>
</script>

4. Click Save and see result

LIVE DEMO

How to Hide / Remove spam links from your blog's comment form

noreply@blogger.com (Unknown) — Mon, 01 Jun 2015 16:15:00 +0000

Fighting against comment spam is among the most frustrating job for a blogger, especially when you don’t have enough money to hire a comment moderator that trashes the spam comments while publishing all the useful comments to your blog. Obviously you don’t want to delete your all comments just for the sake of few spam ones? Since, Blogger doesn’t have a real-time comment spam detection plugin the reason why we have to implement some techniques to make sure that spam comments are staying away from our blogger site. Today, in this article, we will show you How to Automatically Remove Spam links from Blogger Comments.

Method # 1: Use CSS to Remove Spam Links From comments:

These days search engines are smart and they know what you are referring is useful and what they should ignore. By removing spam links from comments with the help of CSS could not only hide those links but would stop search engines from indexing them too. So go to Blogger >> Template >> Edit HTML >> Search for Skin tag and just above it paste the following piece of code:

.comment-content a {
display: none;
}

Method #2: Use jQuery To Remove Links:

Some people might not recommend the above process they might argue that the spam link is still there, because we have just hide it with the help of a simple display:none; CSS. So go to Blogger >> Template >> Edit HTML >> Search for starting <body> tag and just below it paste the following piece of JavaScript code:

<script>$('.comment-content a[rel$=nofollow]').replaceWith(function(){return ($(this).text());});
</script>

Once everything is done, Save the template and now you can sleep with worrying about comment spam. Whenever, a user will leave a link into his comments the link will be considered as spam and he the script will automatically remove it within seconds.

How To Make My Blogger Template Responsive

noreply@blogger.com (Unknown) — Sun, 31 May 2015 06:52:00 +0000

What is Responsive Web Design?

Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)

These days, almost everyone have updated their web themes to fit in every screen but some old websites and lazy designers like me don't have updated yet. Yeah! Blogger Yard is not yet responsive because we're busy right here but soon we'll introduce the totally new version of Blogger Yard which will also be responsive.

Navigate to Blogger Dashboard → Template.
Click the gear icon for the mobile.
Now select “Yes. Show mobile template on mobile devices.” and choose your theme.
Click the save button.

Option 2: Make Your Template Responsive

Things To Know Before

Before we start the tutorial, let me know either you will be able to turn responsiveness in your blogger template or not.

CSS Skill: Do you have cascading style sheet skill? Yes? Great! Bringing responsiveness to blogger template is all CSS work and if you've skill in it than you might not face any issue in it.
Template Structure: Do you know the structure of your blogger template? If the template is designed by you than you must know how you've wrapped the header, content and other sections. While making responsive blogger template, we play with each HTML element and for that we must know how the template is structured. If the the template is not designed by you than you can take a look on its structure and study it than you may continue making it responsive.
Useful Chrome Extension: This is not the thing to be known before but we're recommending a useful chrome extension here that will help you a lot to work on responsiveness. Its Resize Window chrome extension that will help you to resize browser window with the size of different device screens. I recommend to work on every screen size that is listed in this extension.

Adding Meta Tag For Responsiveness

1. Go To Blogger → Template → Backup Your Template
2. Click Edit HTML → Search For <head>
3. Paste The Following Code Below It.
Save!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

There is nothing much difficult with this viewport meta tag. You have to just add it below your <head> and it will start working.

Working With Media Queries
Simple css code will render both - on desktop and phone. So we need to specify that the code should be rendered only in specific devices. In this case, we will need to use CSS3 @media Query. Here are created basic @media query css structure:
At last click “Apply to Blog”.

@media screen and (max-width : 1280px) {
/* For Screen Width Less than Or Equal To 1280 ---*/
/* CSS CODE HERE FOR DESKTOP DESIGN ---*/
}

@media screen and (max-width : 1024px) {
/* For Screen Width Less than Or Equal To 1024 ---*/ 
/* CSS CODE HERE FOR TABLETS DESIGN ---*/
}

@media screen and (max-width : 768px) {
/* For Screen Width Less than Or Equal To 768 ---*/ 
/* CSS CODE HERE FOR SMALL TABLETS DESIGN ---*/
}

@media screen and (max-width : 640px) {
/* For Screen Width Less than Or Equal To 640 ---*/
/* CSS CODE HERE FOR IPHONE ---*/
}

@media screen and (max-width : 480px) {
/* For Screen Width Less than Or Equal To 480 ---*/
/* CSS CODE HERE FOR SMARTPHONES ---*/
}

@media screen and (max-width : 320px) {
/* For Screen Width Less than Or Equal To 320 ---*/
/* CSS CODE HERE FOR SMALL MOBILES ---*/
}

Replace the example text inside /* with the CSS rules you want to use for the above above device types according to their screen widths.
In the above queries, max-width is used to specify the screen width up to which the CSS codes will work. In the above example we have set max-widths for nearly all type of devices. By using separate coding for each class of devices, we make sure that they don't interfere each other and responsive design works properly on each device.
For example CSS coding for max-width 480px in above quries will work upto 480px but will not work below 321px because we have placed separate CSS for device sizes up to 320px.

Tips for writing responsive css:
Change all the main element’s width from pixel (px) to percent (%). So the width will respond according to the width.

Example:

.class {
width: 100%;
}

If any unwanted scroll bar appears, you can use overflow in your css.

Example:

.class {
overflow: hidden;
}

If you think making the current template responsive is quite harder, you can use free or premium blogger templates which are already made by the developers. For premium themes, you can check HERE

Add This Mega Subscribe Widget to Your Blogger Blog - version²

noreply@blogger.com (Unknown) — Wed, 27 May 2015 11:26:00 +0000

Social media, with the introduction of Web 2.0 user services, from one-way information sharing is a media system that enables double-sided and simultaneous information sharing is reached. In addition, social media; His dialogue is a set of people and sharing with each other on the internet. Social networks, thanks to the web sites and applications that allow people to share content and information with each other, everyone is looking for, is available to take care of the content. Without limitations of time and space (mobile based), sharing is a form of human communication that merits discussion. You will find and meet with people on social media platforms to communicate.

Technology, telecommunications, the words in social communication, images, audio files having a structure as provided by the path. Stories and experiences of people and also has a shared framework in this regard. Social media also "content produced by the user" and "where customers produce media" concepts also revealed, has the meaning of a commercial plan with this building. You may increase your followers on social media account, by adding the social menu code to your site, you share can increase your ease delivering traffic article to your users.

LIVE DEMO

1. Log into your blogger account

2. Design —> Edit HTML

3. Place the following code into the HTML / JavaScript box in the sidebar

<div class='metro-social'><li><a class="fb" href=http://www.facebook.com/YOUR URL rel="nofollow"></a></li><li><a class="tw" href=http://twitter.com/YOUR URL></a></li><li><a class="gp" href="https://plus.google.com/+YOUR URL"></a></li><li><a class="pi" href=http://pinterest.com/YOUR URL rel="nofollow"></a></li><li><a class="in" href=https://www.linkedin.com/in/YOUR URL rel="nofollow"></a></li><li><a class="yt" href=http://www.youtube.com/YOUR URL></a></li><li><a class="fd" href=http://feeds.feedburner.com/YOUR URL rel="nofollow"></a></li></div><style>.metro-social{width:285px}.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}.metro-social .fb{background:url(http://3.bp.blogspot.com/-gDUOorsTaS8/URoqPnM84zI/AAAAAAAAJ6U/Xhmy7cIpz2M/s75/facebook.png) no-repeat center center #1f69b3;width:140px;height:141px}.metro-social .tw{background:url(http://1.bp.blogspot.com/-ACiFLecWLrU/URom7CIU1aI/AAAAAAAAJ5o/FpAf2PXkzH0/s60/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5;width:68px;height:70px}.metro-social .gp{width:69px;height:70px;background:url(http://1.bp.blogspot.com/-xLeqmsg2KY0/URoqO5Y5ikI/AAAAAAAAJ58/RaxLc_hv-Fc/s50/google%252Bplus.png) no-repeat center center #da4a38}.metro-social .pi{background:url(http://1.bp.blogspot.com/-namunMjzveg/USC_mj8e7fI/AAAAAAAAKIo/hfylnwqGQmo/s40/pinterest.png) no-repeat center center #d73532;width:68px;height:69px}.metro-social .in{background:url(http://4.bp.blogspot.com/-joDwAv84KDs/USC_mviM2uI/AAAAAAAAKIs/KZB9EsNAKIA/s40/linkedin.png) no-repeat center center #0097bd;width:69px;height:69px}.metro-social .yt{background:url(http://3.bp.blogspot.com/-hLKJ60klMs0/USC_mh_GWYI/AAAAAAAAKIk/6CmSTv8xQGE/s40/youtube.png) no-repeat center center #e64a41;width:140px;height:69px}.metro-social .fd{background:url(http://1.bp.blogspot.com/-s-lGqHCMnbA/URoqPH64IJI/AAAAAAAAJ6I/99a4xAxc98Q/s40/feed.png) no-repeat center center #e9a01c;width:140px;height:69px}.metro-social li:hover .fb{background:url(http://3.bp.blogspot.com/-gDUOorsTaS8/URoqPnM84zI/AAAAAAAAJ6U/Xhmy7cIpz2M/s200/facebook.png) no-repeat center center #1f69b3}.metro-social li:hover .tw{background:url(http://1.bp.blogspot.com/-ACiFLecWLrU/URom7CIU1aI/AAAAAAAAJ5o/FpAf2PXkzH0/s74/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5}.metro-social li:hover .gp{background:url(http://1.bp.blogspot.com/-xLeqmsg2KY0/URoqO5Y5ikI/AAAAAAAAJ58/RaxLc_hv-Fc/s200/google%252Bplus.png) no-repeat center center #da4a38}.metro-social li:hover .pi{background:url(http://1.bp.blogspot.com/-namunMjzveg/USC_mj8e7fI/AAAAAAAAKIo/hfylnwqGQmo/s45/pinterest.png) no-repeat center center #d73532}.metro-social li:hover .in{background:url(http://4.bp.blogspot.com/-joDwAv84KDs/USC_mviM2uI/AAAAAAAAKIs/KZB9EsNAKIA/s45/linkedin.png) no-repeat center center #0097bd}.metro-social li:hover .yt{background:url(http://3.bp.blogspot.com/-hLKJ60klMs0/USC_mh_GWYI/AAAAAAAAKIk/6CmSTv8xQGE/s45/youtube.png) no-repeat center center #e64a41}.metro-social li:hover .fd{background:url(http://1.bp.blogspot.com/-s-lGqHCMnbA/URoqPH64IJI/AAAAAAAAJ6I/99a4xAxc98Q/s45/feed.png) no-repeat center center #e9a01c}</style>

Replace all with this COLOR with your titles and usernames