Skip to main content

Amazing Popular Posts Grid Style

As a blogger and an site holder, it is must needed to show out the most popular post of your own blog. In that way, people like to read the post which is most readable by the most of users of your blog.

Grid Style is one of best way to show out the popular posts on the blogger's blog. I like this very much because of its fantastic way of representation of popular posts.

Amazing Grid Style Popular Posts for Blogger
Grid Style Popular Posts
In order for adding, Amazing Grid Style, First of all you need to call a font stylesheet that is hosted by google. The following stylesheet should be added before </body> in Blogger's Template Edit function. This will not affect much on the site speed.
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>
Afterward, you need to call JQuery, for making this widget functional. If you already added this to your HTML, ignore adding it.
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
The third process in implementing Amzing Grid Style Popular Post you need to add the javascript just below </body> in the blogger template.
<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>
After adding the javascript, you need to add CSS Styling given below in between <style> and </style>.
.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;}
After adding all the above given elements, your Grid Style Popular Post is ready for your blogger's blog. Thanks for reading this post.

Comments

Popular posts from this blog

Download Sanrachna Typing Tool

Sanrachna Typing Tool is an powerful unicode hindi typing tool that helps in converting English letters in Hindi. Sanrachnacan be used to write in Hindi Unicode without learning Hindi Keyboard layout. Sanrachna is compatible with all versions of Windows like Windows Vista, Windows 7, Windows 8 and Windows 8.1 too.
For Sanrachna you must need .NET Frame Work 2 installed on your PC. Sanrachna have made easy for working on many websites. Sanrachna Typing Tool is wonderful and can be onned by "pressing *Caps Lock*" for typing in hindi. If user want to type in English user need to be press *Caps Lock* again. Download Sanrachna Hindi Typing Tool for Windows VistaDownload Sanrachna Hindi Typing Tool for Windows 7 and Windows 8

Meta NOINDEX is better than Blocking Robots

Hello Friends, welcome back to the blog; today I come with topics why Meta NOINDEX is better than blocking search engines by robots. As you all know about these two properties of Search Engine Optimization but let me explain it first for new webmasters.

Meta is property that webmaster keep in head tags of a HTML webpage that helps Search Engines to know basic facts about the site.

Example of Meta Property, the given meta property is called description:
<meta content='Something about the page' name='description'/>

Robot or called as Robots.txt is another property of SEO that helps the crawlers of different search engines helps in knowing whether are the areas to crawl and what are areas not to be crawled by them.

Example of Robots.txt (Our Robot text):
Visit: http://www.youthhustle.com/robots.txt

So, the question arises why should I not to be use Robots txt for blocking robots or why Meta NOINDEX is better. The answer is very simple and clear but first known How …

YouTube-Dl 2017.12.14

Youtube-Dl is a small command-line program to download videos from YouTube.com and a few more sites. It requires the Python interpreter (2.6, 2.7, or 3.2+), and it is not platform specific.

They also provide a Windows executable that includes Python. youtube-dl should work in your Unix box, in Windows or in Mac OS X. It is released to the public domain, which means you can modify it, redistribute it or use it however you like.
Note: To make YouTube-Dl work in windows, you need to download Microsoft Visual C++ 2010 Redistributable Package (x86)
Download the Software (YouTube-Dl 2017.12.14): File Name: youtube-dl.exe
Software Name: YouTube-Dl
Version: 2017.12.14
Developer: Ricardo Garcia Gonzalez
File Size: 6.0
Official Link: http://rg3.github.io/youtube-dl/
Download YouTube-Dl 2017.12.14