Monday, April 11, 2016

Download SORAMAG Blogger Templates - FREE

Sora Mag is a complete Blogger theme for a news or magazine site with the focus of attracting and keeping visitors on their site. It uses the best clean SEO practices, and on top of that, it’ s fast, simple, and easy to use.

SEE ALSO: Download SNews Responsive Magazine Blogger Template - FREE

Sora Mag Blogger Template Theme, News or Magazine Blogger Template, New Blogger Template 2016
SORA MAG Blogger Templates
Not only is it responsive but it also keeps that magazine feel right down to mobile screen sizes. Practically every typographic element has been endlessly tweaked for different screen sizes to make sure it looks great no matter what the device.


Tuesday, April 5, 2016

Windows 10 All Editions Direct Download Links with Activator

Windows 10 is familiar and easy to use, with lots of similarities to Windows 7 including the Start menu. It starts up and resumes fast, has more built-in security to help keep you safe, and is designed to work with software and hardware you already have. So Why become late ? Get Windows 10 Final Build on your devices today !


Download Button, Microsoft, Windows 10, Laptop, KMS Auto, RAR, 2016, Updated File



Direct Links
Windows 1032 bit64 bit
Windows 10 All in One !Download (4.80 GB) / Google Drive Mirror


Download Button, Windows 10, KMS Auto, RAR, 2016, Updated File
Download Windows 10 Activator


  • Extract the Windows 10 Activator.rar File.
  • Open the KMSAuto Folder.
  • Then Open the KMSAuto.exe File.
Download Button, Windows 10, KMS Auto, RAR, 2016, Updated File
KMS Auto
  • And then click on the Activate Windows. (You Also Activate Microsoft Office By Clicking on Activate Office)


SEE ALSO: Windows 10 Activation Key All Editions (UPDATED)



Download Button, Windows 10, KMS Auto, RAR, 2016, Updated File
Windows Activation Completed Message



  • After 4-5 Seconds Windows is Automatically Activated.


Windows 10 Activation Key All Editions (UPDATED)




windows 10, Microsoft, Activation Key, Laptop, PC, Lenovo, HP


Windows 10 Professional
VK7JG-NPHTM-C97JM-9MPGT-3V66T


Windows 10 Professional
W269N-WFGWX-YVC9B-4J6C9-T83GX


Windows 10 Professional N
MH37W-N47XK-V7XM9-C7227-GCQG9


Windows 10 Enterprise
NPPR9-FWDCX-D2C8J-H872K-2YT43




Windows 10 Enterprise N
DPH2V-TTNVB-4X9Q3-TJR4H-KHJW4


Windows 10 Education
NW6C2-QMPVW-D7KKK-3GKT6-VCFB2



SEE ALSO: Windows 10 All Editions Direct Download Links with Activator



Windows 10 Education N
2WH4N-8QGBV-H22JP-CT43Q-MDWWJ


Windows 10 Enterprise 2015 LTSB
WNMTR-4C88C-JK8YV-HQ7T2-76DF9


Windows 10 Enterprise 2015 LTSB N

2F77B-TNFGY-69QQF-B8YKP-D69TJ



Optimize Image for SEO by Adding Alt and Title Attributes

All Bloggers optimize their posts to get a better rank in search results that helps us to increase our blog's traffic. As well as we optimizes our posts we should have to optimize images in the posts also. Optimizing Images also brings us a lot of traffic from Search Engines. Most of us use Google Images Search to find suitable image for blog posts so if we optimize our images then surely it will get better position and hence we get more organic traffic. Prettily it has two benefits one is getting traffic from images search and second is that it helps Web Crawlers to understand our post more accurately hence higher SERP. So today I will show how you can add alt and Title tags to your blogger blog posts images.

SEE ALSO: Add Stylish Vertical Floating Sharing Buttons to Blogger


Benefits Of Alt and Title Tags:

Both Alt and Title tags works as a description of the image. Web crawlers cannot read the images but they can understand it by name i.e Title and Alt tags. We have to choose always best and short keywords to name our images.

Adding Alt and Title Tags:

  • Go to blogger dashboard.
  • Write new post.
  • Upload an image by clicking the image icon from the top menu bar as shown below.
insert image upload an image alt tag image seo
insert-image
  • Now to add title and alt (description) attribute to your image left click on the image and choose properties.
insert image upload an image alt tag image seo
Properties


Once you click on the properties link, a pop up box will appear. Enter title and alt tag there as shown in below screenshot.

insert image upload an image alt tag image seo
title and alt tag
Now click Ok and you are done!

Use this feature very neatly. This will surely help your blog to rank well in search engines. Don’t use too many keywords in these tags. Only use one keyword that describes your blog post image very well.
I hope you can understand the benefits of these tags and know how to add them. Now Its your turn to optimize your post images and write your feedback in the comment box till then Stay Amazed!


Facebook Showing Wrong Thumbnail Image While Sharing Blogger Posts : Error Fixed

As a Blogger, everyone would like to promote his/her posts and largely shared the idea on Facebook. Ever if you have tried sometime you might have observed that there is wrong thumbnail or no thumbnail shown by facebook of our blog post . This is among the most popular issue through Facebook from a few years back nonetheless it will not be resolved till yet. However Facebook isn't much clever to pickup the correct image from your post. You should make the post easy to understand by adding a little piece of chunk code within your blogger template to express to the Facebook robot which usually show image in the Round thumbnail at your wall or groups. So here we are discussing about such a popular topic to fix this error to get proper image of our blog post on facebook.

How to Fix this Issue:

To get accurate thumbnail of our posts by facebook we have to add a little piece of code in our blog templates which tells the facebook that what is our post's main image. Follow steps below:


SEE ALSO: How to Change Links Color in Blogger ?


SHARE Facebook twitter wrong thumbnail image sharing blogger posts error fixing
sharing contenton facebook


  • Go to Template >> Edit >>Html:
  • Find for <head> tag In template:
  • Past the below given code just after the <head> tag

 <meta content='article' property='og:type'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
Now click on save button: You are almost Done !

Quick Tips to Remember:

Follow these quick tips while you are sharing your blog posts on facebook:

  1. I recommended you to use the PNG format for main image.
  2. Use JPG image format for the rest of all ordinary image inside the post except the main picture.
  3. Always try to add intro image inside the post.
  4. Share your Post on facebook immediately after publishing.
  5. If you change your blogger template make sure to add the above coding again. 

Add Stylish Vertical Floating Sharing Buttons to Blogger

Sharing is the best method to increase blog traffic so after publishing our blog posts we share them to social media and in return we get a lot of traffic. When our visitors landed on our blog's page and like our post then they thought to say thanks to the author so they do comment on the post but there is one another way by which visitors can say thanks to us i.e. sharing. By this method visitors can share the post to their favourite social media and we get a lot of visitors and pageviews. So, here we are discussing about a great floating sharing widget for blogger which floats vertically with the page. This widget contains all major social media on which your visitors can easily share or like your posts in a click. This widget contains Facebook like and share, google +1, Pinterest Pin buttons. So if you like this widget and wants to add it to your blog just follow the easy steps below.

SEE ALSO: Optimize Image for SEO by Adding Alt and Title Attributes

New Stylish Vertical Floating Share Button

How to add the new floating share buttons to blogger

 Log in to your Blogger account and go to Template > Edit HTML
 Search for <html , leave a space and add xmlns:fb=”http://ogp.me/ns/fb#”  just after it. The resulting code should lok like this:

<html xmlns:fb=”http://ogp.me/ns/fb#”


  •  If this is already there, you don’t need to do it again.



 Search for <data:post.body/> If you have more than one of it in your template, search for <div class='post-footer-line post-footer-line-1'/>


  •  And just below that paste the following code:


<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<!–Start Floating Share Buttons with Pinterest–>
<style type=’text/css’>
#dc-float {position:fixed; bottom:15%; right:10px; float:left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#FFFFFF;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding:0 0 2px 0;z-index:10;}
#dc-float .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id=’dc-float’ title=’Share with your friends’>
<div class=’sbutton’ id=’rt’>
<a class=’twitter-share-button’ data-count=’vertical’ href=’http://twitter.com/share’>Tweet</a><script src=’http://platform.twitter.com/widgets.js’ type=’text/javascript’/>
</div>
<div class=’sbutton’ id=’su’>
<script src=’http://www.stumbleupon.com/hostedbadge.php?s=5′/>
</div>
<div class=’sbutton’ id=’digg’ style=’margin-left:3px;width:48px’>
&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
&lt;script&gt;(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=167544263382192&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));&lt;/script&gt;
<div class=’fb-like’ data-layout=’box_count’ data-send=’false’ data-show-faces=’false’ data-width=’48′/>
</div>
<div class=’sbutton’ id=’gplusone’>
<script src=’https://apis.google.com/js/plusone.js’ type=’text/javascript’/>
<g:plusone size=’tall’/>
</div>
<div class=’sbutton’ id=’gb’>
<a class=’pin-it-button’ count-layout=’vertical’ expr:href=’&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url’>Pin It</a>
<a href=’javascript:void(run_pinmarklet())’ style=’margin-left:-46px; width:43px; height:20px; display:inline-block;’/>
<script src=’http://assets.pinterest.com/js/pinit.js’ type=’text/javascript’/>
<script type=’text/javascript’>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script>
</div>
<div class=’fb_button_share’>
&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
&lt;script&gt;(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=112973755438933&quot;; // appId must be valid
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));&lt;/script&gt;
&lt;fb:share-button type=&quot;box_count&quot;&gt;
&lt;/fb:share-button&gt;
</div><br/>
<!–End Floating Share Buttons with Pinterest–>
</b:if>

 Hit the Save Template button and view your blog.

To make the share butons float to the left instead of right, search for this code:

dc-float {position:fixed; bottom:15%; right:10px; float:left;

Replace with this:


dc-float {position:fixed; bottom:15%; left:10px; float:left;

Thats it.


How to Change Links Color in Blogger ?

Being a blogger you must got worried about your website design and appearance. There are lots of professional blogger templates together with custom patterns and format. But not really a single template comes with 100% fulfilment. We need to customize them to give a real look which we want to show to the readers. Obviously blog site design is the very first thing that encourage readers to stay longer on our blog to learn to read more content present on our blog. Best layout with excellent text font as well as link color makes our blog additional professional looking. When we use custom templates in our blog site, we must customize it according to our need like changing text fonts, font measurement, hyperlink coloration etc. This is exactly why to produce things possible for newbie web owners today I bring a tutorial on how you can change Hyperlink color in Blogspot blog.

How to Change HyperLinks Color?

Just follow the simple steps mentioned below to change the hyperlinks color in your blogger blog:

  • Go to your Blogger account.
  • Navigate to Template > Edit HTML.
  • Now press Ctrl+F and search <b:skin> in your template.
  • Click on black arrow to expand the code.in your template.
Edit html - blogger

Now look at the CSS code of hyperlink in your template which something look like this:


Hyperlink colors


Now edit a { color:#0084CE; } with that color you want to use for hyperlinks.

Edit a:visited {color: #289728;} to change color of visited link.

SEE ALSO: Create A Rollover Image Effect (change image on mouseover)


Preview and save the template.

That's it.

You can use this Color Codes Tool to get hexadecimal code of your favorite color.

Sunday, April 3, 2016

How To Add an Instagram Widget in a Blogger Blog

If you're not familiar with Instagram, it's a photo-sharing network that can be downloaded to your smart phone as an application. Think of it as Facebook without the status updates. By developing a simple service that does one thing, and does it well, Instagram has become one of the most prominent photo sharing apps on the market.

The great thing about using Instagram is that it's not just for individuals. Businesses and non-profits alike can take advantage of this service to share their day and passions with their dedicated customers and fans. These fans number nearly 200 million active users a month, and approximately 7.3 million new daily posts. That's an astonishing number of potential new customers available for you to capture.

SEE ALSO: Create A Rollover Image Effect (Change Image On Mouseover)


By adding Instagram on Blogger as a widget, you can unleash a new visual aspect of that site and allow visitors to go beyond just words on a page. With the convenience to carry the application around on your smartphone wherever you go, you can snap pictures, apply filters, and upload that content to your profile. From the profile, a widget specially designed for Instagram on Blogger would translate that data and display the image on your site. Even those visitors that aren't members of Instagram could benefit from such a service.

It doesn't matter what you are sharing. Whether you're the type of person that loves to share pictures of your dinner with the world, or business owner that loves showcasing their brand in everyday life, Instagram can work for you. Adding Instagram on Blogger as a widget also offers an incredibly accessible tool for stock photos to use in new posts.

This guide will explain how to add an Instagram widget to your site with step-by-step instructions. The design of your new Instagram widget is entirely customizable and will allow you to modify the background color, font, and how the widget is actually displayed on the site. When you're finished, you'll find that the Instagram widget will blend together effortlessly with your current theme and make your Blogger site truly stand out from the rest.

How to Add An Instagram Widget in Blogger

1. To get the Instagram widget, access the Intagme website here: Intagme

2. Type in your username > select Grid or Slideshow:

Instagram Widget For Blogger

3. Select the Thumbnail size of your images (100px is the default) and choose if you want a border around your Photos or not

Thumbnail Size and Photo Border

4. To change the Background Color, simply click on the empty box and pick your favorite color

Background Color and Sharing Buttons


5. If you want to show the Sharing buttons on your widget, select 'Yes', otherwise, click 'No'.

6. Once you're satisfied with the widget, press the "Get Code" button and copy your code.

Get Code

7. Log into your Blogger account and select your blog > navigate to Layout and click on the "Add a Gadget" link on the right side:


Add a Gadget
8. In the pop-up window, scroll down and click on the "HTML/JavaScript" gadget:


html/javascript
9. Paste the code that you got from the Instagme website into the content section and press the 'Save' button to save the widget. 

Add Instagram Widget Code

10. Click and drag your widget if you want to change its position and press the "Save Arrangement" button on the upper right side


Click and Drag

And that's it! Now you have your very own Instagram widget on your Blogger blog to share new photos with visitors, and provide just a glimpse of your life when you're away from the computer. To change or add any of the photos that are displayed in the widget, you'll have to go directly through the app itself, or log on to your account via Instagram's website.

SEE ALSO: How To Add Disqus Comment System On Blogger


Once you're ready to show off your new work, let all your customers or fans know by posting a Facebook link to the site or a tweet about the changes and asking them to follow you. Just make sure that you've added a few photos before making the announcement, so that they have something to look at. After they access your widget, they can like your new photos and interact with you in entirely new ways.



Create A Rollover Image Effect (change image on mouseover)

The Rollover effect is one in which an image web object changes (swaps itself) on mouse over to another web object (called rollovers) and reverts back to the original image on mouse out. Rollover images are preloaded into the page when it is loading, this ensures that the rollovers are displayed quickly. The onMouseOver and onMouseOut attributes of the link tag are used to make this functional.

Demo:  Place your mouse over the image below to see its rollover effect






Making Rollover Effect Image

You have the following code:



<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" /></a>

 Change the colored texts as it follows:


1. URL ADDRESS


This is the address where somebody will be sent when clicks on the image.
Example, my blog address: http://techloggerx.blogspot.com


2. URL OF THE FIRST IMAGE GOES HERE


Replace the orange text (two times) with the URL address of the image which will appear before you hover over it.


3. URL OF THE SECOND IMAGE GOES HERE

Replace the text in blue with the url of  the image that will appear when the cursor hovers over it.

Now you can paste your image inside a blog gadget, going to Layout > click on Add a Gadget link (right side) > Select HTML/JavaScript from the pop-up window, then add it to your sidebar.

SEE ALSO: 5 Lesser Known On-Page SEO Optimization Techniques in 2016


You can also add it inside your post by going to New Post > Switch to HTML tab and then paste the code in the empty box.

That's it. Enjoy ;)

5 Best Popular Posts Widgets for Blogger

If you're using Blogger as the platform for your personal or business blog, you're probably looking for ways to customize it and make it your own. This way, you'll make your webpages unique and eye-catching and ensure they'll stand out from the many other pages on the internet. You'll also grab the attention of your target market, encourage them to browse through your blog and become your loyal readers and followers.


SEE ALSO: Create A Rollover Image Effect (change image on mouseover)



Fortunately, there are lots of ways to personalize your Blogger blog, and one of these is to customize your Popular Posts widget. Haven't installed this yet? Don't worry since putting it in your blog easy.


Adding the Popular Posts Widget for Blogger

Just click on your blog title, access the Layout menu, click "Add Widget" and choose "Popular Posts". A window will appear asking you to configure the widget by choosing which posts you'll feature (e.g. those that were most viewed in the past 7 days or 30 days or from the beginning of your blog). You'll also be asked to choose how many posts you'll feature in your Popular Posts section and select if you'll show the post title only or along with the image thumbnail and/or the snippet. (Remember that each widget style has different requirements, so follow the instructions carefully to know if you'll need the snippet and image thumbnail or not).


Popular Posts Configure 5 best popular posts widget
Configure Popular Posts

Once you've followed these instructions, you'll get to see the basic version of the Popular Posts Widget for Blogger in your blog. You can stick with this if it matches your blog design but, if it sticks out like a sore thumb or doesn't suit your taste, there's no need to fret since you can personalize it.

Popular Posts Style 1 - Box within a box

This is an interesting widget style since it uses your snippet and image thumbnail in a unique way. Your snippet is written in opaque text and placed in a small transparent box. This, in turn, is placed in a bigger rectangular box, wherein your image thumbnail is used as a background. Choosing this Popular Posts Widget for Blogger can be a great option if you want to brighten up your blog and grab the attention of readers with your colorful photos.


Popular posts widget, popular posts style
Popular Posts Style 1


<style type='text/css'>
.sidebar .PopularPosts ul {
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
list-style: none !important;
padding: 0 !important;
margin-bottom: 10px;
}
.sidebar .PopularPosts .item-thumbnail {
height: 190px;
margin: 0;
overflow: hidden;
width: 100%;
}
.sidebar .PopularPosts .item-title {
position: relative;
}
.sidebar .PopularPosts img {
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title a {
color: #FFFFFF;
font: 15px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
font-size: 20px;
padding: 10px;
position: absolute;
right: 0;
left: 0px;
margin: 0px auto;
text-align: center;
text-decoration: none;
top: 40px;
width: 60%;
height: 26px;
overflow: hidden;
z-index: 2;
}
.sidebar .PopularPosts .item-snippet {
background: rgba(0, 0, 0, 0.35);
border-top: 6px solid rgba(0, 0, 0, 0.1);
border-bottom: 6px solid rgba(0, 0, 0, 0.1);
color: #FFFFFF;
left: 0px;
right: 0px;
margin: 0px auto;
padding: 65px 10px 10px;
position: absolute;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
text-align: center;
top: 35px;
width: 60%;
z-index: 1;
}
.sidebar .PopularPosts .item-content {
position: relative;
}
</style>


 Popular Posts Style 2 - Large thumbnails with small post titles underneath

This uses the same code as the basic Blogger Popular Posts Widget with a few tweaks. Popularized by well-known blogs, this style is eye-catching because it focuses on pictures, which don't only summarize the posts' content but also add visual drama to the entire page. This is particularly useful for blogs that focus on clothes, makeup, art and other topics that highly depend on visual presentation to better express ideas.

Popular Posts Style Popular Posts widgets blogger
Popular Posts Style 2



<style type='text/css'>
.sidebar .PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
width: 100%;
list-style: none !important;
padding: 0 !important;
margin-bottom: 20px;
position: relative;
border: 0;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
height: 120px;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100%;
position: relative;
margin-bottom: 15px;
}
.sidebar .PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border-bottom: 29px solid #fff;
border-left: 29px solid transparent;
border-right: 29px solid transparent;
bottom: 0px;
content: &quot;&quot;;
height: 0;
width: 0px;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
position: absolute;
z-index: 3;
}
.sidebar .PopularPosts .item-thumbnail:after {
color: #000;
content: counter(popularcount, decimal);
counter-increment: popularcount;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
list-style-type: none;
position: absolute;
bottom: 0;
text-align: center;
margin: 0px auto;
left: 0px;
right: 0px;
z-index: 4;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
width: 100%;
height: 120px;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
font: 15px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
text-align: center;
margin: 0px auto;
padding-bottom: 10px;
border-bottom: 1px solid #000;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
padding: 10px 15px;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
text-align: center;
}
</style>


 Popular Posts Style 3 - Colorful boxes

If your blog needs a pop of color, this is the right choice for you. This widget style presents your Popular Posts in several boxes that feature a thumbnail image and have bright, eye-catching shades like light green, ocher yellow and vivid orange. Each box has a different color, and you can add up to four boxes.

Popular Posts Style Popular Posts widgets blogger
Popular Posts Style - 3

<style type='text/css'>
.sidebar .PopularPosts ul {
padding: 0;
margin: 0;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
overflow: hidden;
}
.sidebar .PopularPosts .item-thumbnail {
width: 130px;
height: 130px;
border-right: 5px solid #fff;
margin: 0px 10px 0px 0px !important;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts ul li {
float: left;
margin-bottom: 5px;
max-height: 130px;
min-width: 250px;
overflow: hidden;
}
.sidebar .PopularPosts ul li:first-child {
background: #D9EDF7;
}
.sidebar .PopularPosts ul li:first-child + li{
background: #F2DEDE;
}
.sidebar .PopularPosts ul li:first-child + li + li {
background: #DFF0D8;
}
.sidebar .PopularPosts ul li:first-child + li + li + li {
background: #FFEEBC;
}
.sidebar .PopularPosts ul li:first-child + li + li + li + li{
background: #E0E0E0;
}
.sidebar .PopularPosts .item-title {
font: 13px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
padding: 10px 5px 10px;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
padding-right: 5px;
}
.sidebar .PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px!important;
}
</style>

 Popular Posts Style 4 - Grid layout

Just like the large-picture widget style, the grid layout is an excellent option if you want to showcase your pictures or if your blog depends on visual information. However, the title of your posts won't be included in the layout, so readers will have to hover their mouses on the images to read the titles.

Popular Posts Style - 4


<style type='text/css'>
.sidebar .PopularPosts ul {
padding: 0;
}
.sidebar .PopularPosts ul li:first-child{
width: 100%;
max-height: 100%;
opacity: 0.9;
}
.sidebar .PopularPosts ul li:nth-child(even){
margin-right: 2%;
}
.sidebar .PopularPosts ul li {
box-sizing: border-box;
position: relative;
padding: 0px !important;
width: 49%;
max-height: 120px;
opacity: 0.4;
overflow:hidden;
float: left;
margin-bottom: 2%;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.sidebar .PopularPosts ul li:hover {
opacity: 1;
}
.sidebar .PopularPosts .item-thumbnail {
margin: 0;
width: 100%;
}
.sidebar .PopularPosts ul li img {
box-sizing: border-box;
width: 100%;
height: 100%;
object-fit: cover;
padding:0;
}
.sidebar .PopularPosts .item-content:hover .item-title a,
.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a {
visibility: visible;
opacity: 1;
}
.sidebar .PopularPosts .item-title a {
color: #fff;
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);
text-decoration: none;
position: absolute;
text-align: center;
font: 13px &#39;Oswald&#39;, sans-serif;
left: 0;
right: 0;
bottom: 0%;
padding: 100px 10px 10px;
opacity: 0;
visibility: hidden;
}
.sidebar .PopularPosts .item-snippet {
display: none;
}
</style>


Popular Posts Style 5 - Numbered posts

If you love numbered lists, or if you'd like to make your blog more organized, this can be the perfect option. By using the code for this widget style, your Popular Posts will be automatically numbered and will feature clean, minimalistic boxes that include your snippet and image thumbnail.

Popular Posts Style - 5

<style type='text/css'>
.sidebar .PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
float: left;
max-height: 130px;
min-width: 250px;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail::after {
color: rgba(255,255,255, 0.63);
content: counter(popularcount, decimal);
counter-increment: popularcount;
font: 70px &#39;Oswald&#39;, sans-serif;
list-style-type: none;
position: absolute;
left: 5px;
top: -5px;
z-index: 4;
}
.sidebar .PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0.3);
bottom: 0px;
content: &quot;&quot;;
height: 100px;
width: 100px;
left: 0px;
right: 0px;
margin: 0px auto;
position: absolute;
z-index: 3;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
overflow: hidden;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100px;
height: 100px;
margin: 0px 10px 0px 0px !important;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail:hover:before {
display: none;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
padding-right: 0px !important;
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
font: 13px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
padding: 0px 5px 10px;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
}
.sidebar .PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px !important;
}
.sidebar .PopularPosts .item-content {
padding: 5px 0px;
border-bottom: 1px dotted #dedede;
overflow: hidden;
height: 100px;
position: relative;
}
</style>

These are just some of the widget styles you can choose from. When you've picked a style you want, make sure to copy its CSS code. Once you do so, go to your blog, click "Template" on the left side and select "Edit HTML" under the template preview.


SEE ALSO: How To Display Most Commented Posts In Blogger




These next codes need to be pasted above the "</body> " or "</head>" tags, so check the instruction to know exactly where you need to put the code.

Adding the CSS

When the template editor has opened, click anywhere inside the code area and hit CTRL + F or Command F to search the following tag:


<head>

Just ABOVE the </head> tag, copy-paste the CSS code of one of the styles above.


Important: If the Popular Posts widget is located in the footer of your blog, remove the .sidebar class found in the CSS code in order to make it work.

Please note that most of the styles are using the Oswald font which you need to add to your template's code as well.

So, search for this tag:


<head>


Just BELOW it, add this line:


<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

Adding the JavaScript

These styles also require JavaScript codes in order to resize the popular posts image / thumbnail and trim the post snippet and title. To add the JavaScript, search the </body> tag and paste the following script just above it:


<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {
return t.replace(&#39;/s72-c/&#39;, &#39;/s350-c/&#39;)
});
$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
</script>

 Note: if you have already the jQuery library in your template, remove the line in red.

SEE ALSO: Add 6 Stylish Custom Search Boxes To Blogger


Once you have added all the codes in the right place, press the "Save template" button to save the changes.

That's it!

The five Popular Posts widgets for Blogger featured today are all great solutions for adding a popular post section to your blog. They all have different appearance for determining what makes a post popular, but the end result is the same: visitors are always one click away from your best content. Try some of these styles, find your favorite, and see how it impacts the performance of your blog.

How to Display Most Commented Posts in Blogger

One of the best gadgets for your Blogger blog is a popular posts widget for your sidebar. This lets visitors see what your trending posts are right now and encourages them to click on them to read them. This basic widget is just a little too basic, however, for the modern day website visitor. Not only do they want to see your trending posts, but they also want to join the discussions that are happening on your blog. To do that, you'll need a most commented posts widget for Blogger.

SEE ALSO: How to add Disqus Comment System on Blogger


Having a customized widget on your site is a lot easier than you might think. In order to have an effective widget, however, you're going to need a few specific things to help you out.

techloggerx comment box comment posts widget blogger template
Comment Posts Widget

Here's What You're Going To Get

There are certain aspects in the design of a most commented posts widget that you should expect. That's why you'll find these specific components with this custom widget:

  • Ordered by popularity. The posts that have the most comments are the most likely to have visitors want to read the post and join in with the conversation. By ordering your posts based on the popularity of them, you'll give each visitor the chance to see what the hype really is about! This lets you have a charted graphic that gives a visitor easy recognition, but also allows you to keep it straight and aligned if you're looking for a cleaner look.
  • Graphic incorporation. Blog posts that have at least one graphic incorporated with them will receive 100% more traffic than posts that have no images at all. For every graphic that you include with a blog post, the more likely you are to get a click! The same is true with your most commented posts widget, so be sure to incorporate graphics that stand out with your design.

  • Descriptions that blend in. The internet today revolves around the value that you can provide each individual user. People don't just click on things because they look visually tempting. They click on them because they promise a level of value that another website like yours isn't able to provide. By having descriptions that blend in, you'll be able to enhance the perceived value that your site can provide. This leads to more clicks!



Add the Most Commented Posts Widget to Blogger

Step 1. Log in to your Blogger account and go to Template, press the "Edit HTML" button.

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box. Type the following tag inside it and hit Enter to find it:


</Group>


 Step 3. Just below </Group>, add this code:

<Group description="Most Commented" selector=".most-commented">
<Variable name="most.commented.background1" description="background color1" type="color" default="#fa4242" value="#ee377a"/>
<Variable name="most.commented.background2" description="background color2" type="color" default="#ee6107" value="#fcad37"/>
<Variable name="most.commented.background3" description="background color3" type="color" default="#f0f" value="#f8e000"/>
<Variable name="most.commented.background4" description="background color4" type="color" default="#ff0" value="#c7e93d"/>
<Variable name="most.commented.background5" description="background color5" type="color" default="#0ff" value="#5ebded"/>
</Group>


Add  code to blogger html
Note: if you can't find the </Group> tag, try to find the following tag instead and add the variables just below it:



<b:skin><![CDATA[


 Step 4. Now search for the following tag (CTRL + F):


]]></b:skin>

 Step 5. And just above it, add this CSS code:


.comment-count {
    padding: 3px 10px;
    background: #fff;
    color: #000;
    font-size: 10px;
    float: right;
}

.most-commented ul {
    padding: 0px !important;
    font-family: Century Gothic, sans-serif;
}

.most-commented ul li {
    list-style-type: none;
    padding: 10px;
    color: #555;
    margin-top: -10px;
}

.most-commented ul li a {
    color: #444;
    font-weight: bold;
    text-decoration: none;
    font-size: 11px;
}

.most-commented ul li img {
    float: left;
    margin: 0px 5px 0px 0px;
    width: 60px;
    height: 60px;
}

.most-commented:nth-child(3n+0) {
    background: $(most.commented.background1);
    width: 100%;
}

.most-commented:nth-child(4n+0) {
    background: $(most.commented.background2);
    width: 95%;
}

.most-commented:nth-child(5n+0) {
    background: $(most.commented.background3);
    width: 90%;
}

.most-commented:nth-child(6n+0) {
    background: $(most.commented.background4);
    width: 85%;
}

.most-commented:nth-child(7n+0) {
    background: $(most.commented.background5);
    width: 80%;
}


 Step 6. Save the template.

Now, let's add the Most Commented Posts widget to the Layout of our Blogger blog. Head over to the "Layout" section of your Blogger dashboard and click on the "Add a gadget" link on the right side. From the pop-up window, scroll down the list and select the "HTML/JavaScript" gadget:


Add html/javascript code to blogger

Copy and paste this script inside the content box:


<script type="text/javascript">
function stripTags(s,n) {
    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
    var i;
    for (i = 0; i < feed.count ; i++) {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postthumbnail = "<img src="+feed.value.items[i].postthumbnail+" />";
var postDescription = feed.value.items[i].postdescription;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="most-commented"><ul><li><div class="comment-count">' + postComments + "</div>" + postthumbnail + "<a href="+ postURL + '">' + postTitle + "</a>"  + '<p>' +stripTags(postDescription,10)+'...</p>' + '</li></ul></div>';
 document.write(postList);
     }
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
AddUrlHere=http://techloggerx.blogspot.com
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json"
type="text/javascript"></script><span style="font-size: 80%; float:left;"><a href="http://techloggerx.blogspot.com/2016/04/most-commented-posts-blogger-widget.html">Add this widget</a></span>

 .... and replace http://techloggerx.blogspot.com with your address.
To add the "comments" text after the comments number, replace the line in red:


<div class="comment-count">' + postComments + "</div>"

 with:


<div class="comment-count">' + postComments + " comments" + "</div>"


Once you have finished adding your own settings, press the "Save" button to enable the gadget in the sidebar of your blog. That's it!


To change the background colors of the most commented posts, go to "Template" > hit the "Customize" button and navigate to "Advanced" > "Most Commented" tab. Here you can pick 5 different colors by clicking on the color boxes:


 Once you've selected your favorite color scheme, click the "Apply to blog" button to save the changes... and you're done.


Why Use the Most Commented Posts widget?

The basic psychology in every human is that they want to feel like they belong to a community. That's exactly what this customized widget will bring to your site. No matter what content drew a visitor to see your content, this widget will invite them to join the lively parts of your piece of the internet. This helps to build relationships, with you and with other visitors, and this relationship-building engagement is what you need to start having real value.

Take the time to install this most commented posts widget on your site and you'll see for yourself why this is one of the most useful widgets that is available right now. Enjoy ;)