IT Techno Hub

How to Remove Image Border in Blogger + Video

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-Uhyi8uvlLQKmsuUXsUe66hyphenhyphenSOq0qInC6OrzMek-aJ1dyxXk6UyUDyPlkttMtf12ZKIPwMIdjBEGXj_u8Q-d0OgqfOt8WYqyAvmqb_VEZP6OP5qG5Ad4Q6WhvLKPw3QwTm-KeebVS2BI/s1600/remove-border-from-images+(1).jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-Uhyi8uvlLQKmsuUXsUe66hyphenhyphenSOq0qInC6OrzMek-aJ1dyxXk6UyUDyPlkttMtf12ZKIPwMIdjBEGXj_u8Q-d0OgqfOt8WYqyAvmqb_VEZP6OP5qG5Ad4Q6WhvLKPw3QwTm-KeebVS2BI/s1600/remove-border-from-images+(1).jpg" /></a></div>
 
 
<h4 style="text-align: left;">
How To Remove Image Border From Blogger</h4>
 
<ul style="text-align: left;">
<li>Go to Dashboard > Template > Customize > Advanced > Add CSS</li>
<li>paste the following code</li>
<li>Press enter after the last character of the last line }</li>
<li>Apply to Blog.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1m-1B9vCw4UowCEghWJ4poS7j6ZKVp4fU6crlOODXAhsT8HNb25FROUF9q0R_xC3bWO07BNYzk0llkULhmoUtO5lB4_UtFVkCI7fIeXinUIYtBjYRwDlDMMaf_SMuVuQW79Nx-OkJiRI/s1600/Screen+Capture+%23011.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1m-1B9vCw4UowCEghWJ4poS7j6ZKVp4fU6crlOODXAhsT8HNb25FROUF9q0R_xC3bWO07BNYzk0llkULhmoUtO5lB4_UtFVkCI7fIeXinUIYtBjYRwDlDMMaf_SMuVuQW79Nx-OkJiRI/s1600/Screen+Capture+%23011.png" /></a></div>
<div>
 </div>
<div>
<blockquote class="tr_bq">
 .post-body img, .post-body .tr-caption-container, .Profile img, .Image img, 
.BlogList .item-thumbnail img { 
  padding: 0 !important; 
  border: none !important; 
  background: none !important; 
  -moz-box-shadow: 0px 0px 0px transparent !important; 
  -webkit-box-shadow: 0px 0px 0px transparent !important; 
  box-shadow: 0px 0px 0px transparent !important; 
}</blockquote>
 
<iframe allowfullscreen="" height="500" src="http://www.youtube.com/watch?v=dgNAlTNcTWs" style="border-style: none; border-width: 0px; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19px; list-style: none; margin: 0px; max-width: 100%; outline: none; padding: 0px; text-align: center;" width="640"></iframe> If you Not getting just comment Below, Thanks</div>
<div>
 </div>
 
<div>
 </div>
</div>

How to Remove Image Border in Blogger + Video

How To Remove Image Border From Blogger Go to Dashboard > Template > Customize > Advanced > Add CSS paste the followin...

Tips To Make Your Blog Popular!

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<img alt="blogging tips" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ9jYD8kexhVVWr9o0d6R08nckg0X5hcep_35ZpikTbRKRPhUk-O4ytrim4jiPXMjfLQSbGIDrmnxES_ZGP1Z6aXDwy5d4unnok2FJV1gr_wojaKMoTHWx4H-MNbPAXj53mFvjgyzm63U/s320/bloggingtipsforbeginners.jpg" title="blogging tips" /></div>
 
Making a blog popular is not an easy tasks. It takes lots of efforts and time. A successfull blog is not achieved over night it requires patience and hardwork. In this post i will share will you few blogging tips to make your blog popular. This are some of tips that every blogger must know to boost his blog traffic. Especially if you have just started blogging or you are planning to start a brand new blog then don't miss this bloggers tips to have better future of your blog. 
 
<h4 style="text-align: left;">
1. Blog Template  (Look)</h4>
 
Choosing Blog Template should be your first step in starting a blog. As it says "First Impression is the Last Impression". Before reading your blog content what visitors see is your blog look So if the template is dark and messy you can loose lots of traffic. So always use bright and simple blog template. 
2. Social Media 
 
Social Media plays Important role in boosting your blog traffic. Most of blog recieve blog traffic from Facebook, Twitter, Google+ So its very important to increase followers on social media sites. 
Adding Facebook Like Box To Your Blog 
Add Twitter Flying Bird 
<h4 style="text-align: left;">
3. Attractive Post Image</h4>
 
While writing new blog article always add attractive images to your post. As it will attract more visitors to read your article. But always make sure to choose images that are relevant to content of your article. 
<h4 style="text-align: left;">
4. Interact with Followers</h4>
 
Always stay connected with your blog visitors. Check your comments frequently and answer their queries. Appreciate them for their comments and reading your article. 
5. Do not copy 
 
Do not copy doesn't mean that you can not post what your fellow blogger had already  posted. It mean that  you can not copy and paste it on your blog. You can post it in your own style with your flavour and by giving credits to your fellow bloggers who first posted it. 
<h4 style="text-align: left;">
6. Easy Navigation</h4>
 
You blog should be simple and easy to navigate. You can achieve this by adding a Drop down Menu, Categories List on the sidebar and widgets for Popular and Recent posts. 
<h4 style="text-align: left;">
7. Post Length</h4>
 
The length of your blog should be about 700 - 1400 words. Your blog post should not be lesser than 700 words as google penalize such blogs. If your blog is on technology your post can be small but you should post more then 2 times a day. In simple words it depends on nature of blog but always try to post your article with more then 700 words. 
<h4 style="text-align: left;">
8. Contests</h4>
 
Always start interesting contests that benefits your blog visitors to keep your readers active and increase your blog followers. 
<h4 style="text-align: left;">
9. Post Regulary</h4>
 
Good blogger always posts regularly and keep their readers up to date on new technology. Posting regularly will helps you to increase your alexa rank. 
<h4 style="text-align: left;">
10. SEO Friendly Content</h4>
 
Lean some basic about SEO and try to write SEO friendly blog post title as well as post content. This can really help you to make your blog popular.</div>

Tips To Make Your Blog Popular!

Making a blog popular is not an easy tasks. It takes lots of efforts and time. A successfull blog is not achieved over night it requires...

Disable Right Click On Your Blog To Prevent Copy/Paste Video

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<img alt="disable right click" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr6dxsU-9dnc_cXI0ETT5Uc5wjEpsf4s8gy782eith2yajcZzrLAjxDiwXkgvjA7yP-GLfUy0iO-Rt23Z0Z120yQSKBIT4duJtU9NxYHGV_dCaNbu5B0KmGRN-hEQLW7vCvjPleGH_NGU/s1600/disable-right-click.jpg" title="disable right click" /></div>
<div style="text-align: center;">
 </div>
Bloggers always wanted to prevent users or other bloggers from copying the content from their blog or website. Few Bloggers do lots of efforts by researching and writing great articles for their blog, whereas some just copy and paste article and tutorials on their blog from others. So to prevent such bloggers from copying the content from your blog i will teach you to disable right click on your blog with just simple Javascript. So lets get started. 
<div>
 </div>
<div>
<h4 style="text-align: left;">
How to disable right click on blog or website ?</h4>
<div>
 </div>
<div>
<ol style="text-align: left;">
<li>Go to Blogger Dashboard-->Design--> Edit Html.</li>
<li> Copy the code below and paste it in Edit HTML  before the </head></li>
</ol>
</div>
</div>
<div>
<blockquote class="tr_bq">
 
<script language='JavaScript1.2'> 
function disableselect(e){ 
return false 
} 
function reEnable(){ 
return true 
} 
document.onselectstart=new Function ("return false") 
if (window.sidebar){ 
document.onmousedown=disableselect 
document.onclick=reEnable 
} 
</script></blockquote>
. 
   5. Now save it and you are done disabling right click on your blog. 
 
<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/3QQ_tFsU8JA" width="560"></iframe>
</div>
</div>
</div>

Disable Right Click On Your Blog To Prevent Copy/Paste Video

Bloggers always wanted to prevent users or other bloggers from copying the content from their blog or website. Few Bloggers do lots of ...

Customize Blockquote Style In Blogger [Update]

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVVLsPsIXHp6WKcJDZztBSS33JAJyowbOUe7oSTb-xPr525cYDFbG0vHVbiouKrAL_UfuEhOsesmh4CABAVhP0d9Ew5NLNBzpceBGbK1TSVn9oOEX7Y7nOuqY4XiNawUfeFrDCaNgkF34/s1600/style+blogger+Blockquote+.jpg" /></div>
<div style="text-align: center;">
 </div>
<h4 style="text-align: left;">
Instructions:</h4>
 
<ol style="text-align: left;">
<li>Log in to <a href="https://www.blogger.com/" target="_blank">Blogger</a>, Go to Template > Edit HTML</li>
<li>Now find (CTRL+F) this code in the template: </li>
<li>Search for .post blockquote and delete it along with all its occurrences. In most templates the codes look like this </li>
</ol>
<blockquote class="tr_bq">
.post-body blockquote { line-height:1.3em; } 
OR 
.post blockquote{ bla bla bla}</blockquote>
 
 
<h4 style="text-align: left;">
Style 1:</h4>
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid1z3TT8fOhZDoaTK8L4_OGvlaG28beLwhG89Paan-EarYI9XAeTAI1sTXxSYjH2wihNanDX0cn8AOxja7WsxJS4gD-0HmT85WwKAxZIZgzgpjoh9v-N6J_SaFde5fdKGZDNvsTmGUcmI/s1600/Screen+Capture+%23003.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid1z3TT8fOhZDoaTK8L4_OGvlaG28beLwhG89Paan-EarYI9XAeTAI1sTXxSYjH2wihNanDX0cn8AOxja7WsxJS4gD-0HmT85WwKAxZIZgzgpjoh9v-N6J_SaFde5fdKGZDNvsTmGUcmI/s1600/Screen+Capture+%23003.png" /></a></div>
</div>
 
 
<blockquote class="tr_bq">
blockquote { 
margin : 0 20px; 
padding: 60px 30px 40px 20px; 
background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpDF9CoT8DZaTOZzuRHEkCNY5n9tmNM_OXLQ7HKSLBmiBszFyMxnk8eF3ssHO2extvjMNbkb8XVp2VkOF-6jdf95x9-u6R-Kdl9NdbPl4Z9wSrGUJzHYzYO8hl6DZ-roRjBfhVF9fBq8c/s400/owl.png) no-repeat 350px 5px; 
font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif; 
color : #000; 
border-left: 8px dotted #DAB547; 
} 
blockquote p { 
margin: 0; 
padding-top:10px; 
}</blockquote>
<div style="text-align: left;">
 
 
<h4>
Style 1:</h4>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQHyos81HNm2DqzIkDr2fycahiBf70sCGdkMjf-mp4nsIf5z-CczJyYRanbkuA-e1XNvXgkb4xwZqaNsG41yhElzEv_4N6a_GmaJp7jdXvDGc0xFllGgvE-wZ12Miat7BNljlEbKvjPLg/s1600/Screen+Capture+%23008.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQHyos81HNm2DqzIkDr2fycahiBf70sCGdkMjf-mp4nsIf5z-CczJyYRanbkuA-e1XNvXgkb4xwZqaNsG41yhElzEv_4N6a_GmaJp7jdXvDGc0xFllGgvE-wZ12Miat7BNljlEbKvjPLg/s1600/Screen+Capture+%23008.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<blockquote class="tr_bq">
.post blockquote { 
margin : 0 20px; 
padding: 10px 20px 25px 20px; 
background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0RWm_HSGY78qrxyQLyFnBTjNfQJL1i8dusCn0KVHBUEQZAYDO7wpXNnpqJ_xTn0GFrceCkRiybYddlx0mty72OStFbFCskNX4eryPK5_UXP-NL34_JM8ir08D_Ugy8_Pu_h0GQ5Uo8N0/s400/block22.gif) no-repeat right bottom; 
font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; 
color : #484848; 
border: 5px dashed #fff; 
} 
.post blockquote p { 
margin: 0; 
padding-top:10px; 
}</blockquote>
<div>
 </div>
<div>
<h4>
Style 1:</h4>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmV52iJt5H3adec34b0umu0ucXLNO16FYHtSB4UV2ZSF6efzMWr5AeXXAWDPZZzWAoBIsjDT9HH0ZQgkMG2xpGqeFU7bR4ZksBVWBzKQXE02MCnmSl9omuTBOC3rmH-R44T0hvcXyi4fY/s1600/Screen+Capture+%2523009.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmV52iJt5H3adec34b0umu0ucXLNO16FYHtSB4UV2ZSF6efzMWr5AeXXAWDPZZzWAoBIsjDT9HH0ZQgkMG2xpGqeFU7bR4ZksBVWBzKQXE02MCnmSl9omuTBOC3rmH-R44T0hvcXyi4fY/s1600/Screen+Capture+%2523009.png" /></a></div>
<div>
<blockquote class="tr_bq">
.post blockquote { 
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5khBwE86vHjRAdKh0t-xyA7dRg4FHy3Q6s-0lMNGEX3gdGt7uweUZFZibrKjQGmkY7DDFClvGtjMPkwEduNVP-iKpEbqfAcEzQOdoGews3i7VIHQUPoosaRX-g3GX1vRluaFsJTW9QCo/s1600/comma-side-orange1.gif) ; 
background-position:; 
background-repeat:repeat-y; 
margin: 0 20px; 
padding: 20px 20px 10px 45px; 
font-size: 0.9em; 
font: italic 1.2em Georgia, "Times New Roman", Times, serif; 
} 
.post blockquote p { 
margin: 0; 
padding-top: 10px; 
}</blockquote>
 </div>
<div>
<h4>
Style 1:</h4>
</div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcSPZb-07O1r9t3pSmdmiwqyRT_g0R6pCa9UJfBxYJ-VlswbmenBTeOMTqPY3QCHYOWoDZ_XplyZ5oLpE-oPx8rDHtdb0Su00v_UpP6of026MRXA1eK79-Z7OPv8R600xFrVzxfmcjt44/s1600/Screen+Capture+%23010.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcSPZb-07O1r9t3pSmdmiwqyRT_g0R6pCa9UJfBxYJ-VlswbmenBTeOMTqPY3QCHYOWoDZ_XplyZ5oLpE-oPx8rDHtdb0Su00v_UpP6of026MRXA1eK79-Z7OPv8R600xFrVzxfmcjt44/s1600/Screen+Capture+%23010.png" /></a></div>
 
<blockquote class="tr_bq">
blockquote { 
background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgiY3RxQTMWCJCz51qZE5PXq5h7JK0rU9qj3mQTaJPPlcX3xg_aMdlMqffi6nvSelWn4j8DW6vL86W8LrrXdQdc5b3wwUVkxCn2ZIMM0S7RHhkCSPctuEo-HgXYjhKPbKalnQce6UhRIc/s1600/green-black-side.gif) ; 
background-position:; 
background-repeat:repeat-y; 
margin: 0 20px; 
padding: 20px 20px 20px 50px; 
color:#C7CACF; 
font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman"; 
} 
.post blockquote p { 
margin: 0; 
padding-top: 10px; 
}</blockquote>
</div>
<div>
<h4>
 </h4>
</div>
</div>
</div>

Customize Blockquote Style In Blogger [Update]

Instructions: Log in to Blogger , Go to Template > Edit HTML Now find (CTRL+F) this code in the template: Search for .post...

Customizing Numbered Lists in Posts Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
A numbered list is achieved through the HTML code of a "ordered list". You don't have to worry about adding the HTML, because the editor does it for you by using this tool. If you go to the HTML tab, you'll see that the list you created appears something like this: 
<div style="text-align: center;">
<img alt="blogger gadgets, blogger widgets" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim7KDMdfX53U4fSjZMsZW2VlFJoTYT7GaZqz_68GX2iMmgb5NtROrpcD4fmbrG18W65BEUDCBJjbwEvk_75A_Ku7Jgrkag0ykXKZXM7drAYGmOaE4K2z5Ci0SY_wQIbHxVM-VTR7qSHSlh/s1600/blogger-post-editor-numbered-list.png" /></div>
<h4 style="text-align: left;">
How to Add Some Amazing Styles to Blogger ordered lists</h4>
<div>
<div>
Simply choose one of the styles below, then copy and paste the CSS code by going to Template > Customize > Advanced > Add CSS. </div>
<div>
 </div>
<div>
Some Blogger templates might not allow adding CSS in that location. In that case, for adding the CSS style you need to access the Template's HTML - from your <a href="http://blogger%20dashboard/" target="_blank">Blogger Dashboard</a>, go to Template > Edit HTML and paste the code just above the ]]></b:skin> tag (press the CTRL + F keys to find it - you might need to click on the arrow to expand the code and after that search it again.</div>
</div>
<div>
<ol style="text-align: left;">
<li>How to Add Some Amazing Styles to Blogger ordered lists</li>
<li>How to Add Some Amazing Styles to Blogger ordered lists</li>
<li>How to Add Some Amazing Styles to Blogger ordered lists</li>
<li>How to Add Some Amazing Styles to Blogger ordered lists</li>
</ol>
<div>
<blockquote>
 .post ol{ 
counter-reset: li; 
list-style: none; 
*list-style: decimal; 
padding: 0; 
margin-bottom: 4em; 
font: 13px 'trebuchet MS', 'lucida sans'; /* font size of each element */ 
text-shadow: 0 1px 0 rgba(255,255,255,.5); 
} 
.post ol li{ 
position: relative; 
display: block; 
padding: .4em .4em .4em .8em; 
*padding: .4em; 
margin: .5em 0 .5em 4.5em; 
text-decoration: none; 
} 
.post ol li:before{ 
content: counter(li); 
counter-increment: li; 
position: absolute;   
left: -30px; 
top: 50%; 
margin-top: -1em; 
background: #bada55; /* background color of the numbers */ 
height: 2em; 
width: 2em; 
line-height: 2em; 
text-align: center; 
font-weight: bold; 
} 
.post ol li:after{ 
position: absolute; 
content: ''; 
left: -5px; 
margin-top: -.7em;   
top: 50%; 
width: 0; 
height: 0; 
border-top: 8px solid transparent; 
border-bottom: 8px solid transparent; 
border-left:8px solid #bada55; /* background color of the right arrow*/ 
}</blockquote>
</div>
</div>
</div>

Customizing Numbered Lists in Posts Blogger

A numbered list is achieved through the HTML code of a "ordered list". You don't have to worry about adding the HTML, because...

Blogger Different Styles Popular Posts Widget Video

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Blogger allows us to easily add a "Popular Posts" widget, that we select from its list of gadgets, and we can do that by going to the "Layout" of our Blog. 
 
<h4 style="text-align: left;">
Preliminary steps: Add the gadget, if you haven't done it yet.</h4>
1. Select the "Layout" tab and add the "Popular Posts" gadget in that part of your blog you want to appear, such as in your sidebar, by clicking on "Add a Gadget". 
 
2. Configure the widget to show only the post titles. You can do this by clicking on the "image thumbnail" and "snippet" checkboxes, as shown in the following image. 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijjbFcdciSb_9ZY-q2TxrTmlEhS-oCbXvyDLckFLPGa8kJmFBDSQS8vg9YbolWYlIJhlM7asmQ5ZW_CO34mQHy82Zq0K8mHWv9gvMARgl0mVzD50ChQ6e9xcwgoxFK4i2-WaL1jIegaIc/s1600/ddd.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="296" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijjbFcdciSb_9ZY-q2TxrTmlEhS-oCbXvyDLckFLPGa8kJmFBDSQS8vg9YbolWYlIJhlM7asmQ5ZW_CO34mQHy82Zq0K8mHWv9gvMARgl0mVzD50ChQ6e9xcwgoxFK4i2-WaL1jIegaIc/s1600/ddd.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
3. After configuring the widget, save the changes by clicking on Save, and then Save arrangement.</div>
<div class="separator" style="clear: both; text-align: left;">
 </div>
<h4 style="text-align: left;">
How to add the CSS to create the style of the Popular Posts widget</h4>
<div class="separator" style="clear: both; text-align: left;">
1. Choose a style, then copy the CSS that appears below the image that shows the style.</div>
<div class="separator" style="clear: both; text-align: left;">
 </div>
<div class="separator" style="clear: both; text-align: left;">
2. Select the "Template" tab, then click on Customize > Advanced > Add CSS and then paste the CSS style that you like the most.</div>
<div class="separator" style="clear: both; text-align: left;">
 </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFMJj3d02iE4XqIwGYGx3YEnLYUmmIvLmszFInIdS-czUiPgFUqomZ5o3UND5i05TeYWHp0NMwiOEPx4xxHgidgTclS5TCFM99vE98kLNy_zcTJ7Bzu_6d8STOCGN33PafiedIgH0ZCOY/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFMJj3d02iE4XqIwGYGx3YEnLYUmmIvLmszFInIdS-czUiPgFUqomZ5o3UND5i05TeYWHp0NMwiOEPx4xxHgidgTclS5TCFM99vE98kLNy_zcTJ7Bzu_6d8STOCGN33PafiedIgH0ZCOY/s1600/2.png" /></a></div>
<div class="separator" style="clear: both;">
 </div>
<div class="separator" style="clear: both;">
3. Once you add the CSS, Save changes by clicking on the "Apply to Blog" button.</div>
<div class="separator" style="clear: both;">
 </div>
<div class="separator" style="clear: both;">
Note: Some Blogger templates might not allow adding CSS in that location. In that case, for adding the CSS style you need to access the Template's HTML - from your Blogger Dashboard, go to Template > Edit HTML and paste the code just above the ]]></b:skin> tag (press the CTRL + F keys to find it - you might need to click on the arrow to expand the code and after that search it again)</div>
<div class="separator" style="clear: both;">
 </div>
<div class="separator" style="clear: both;">
And that's it! You've already customized the popular posts widget when it shows only post titles.</div>
<div class="separator" style="clear: both;">
 </div>
<h4 style="text-align: left;">
Style 1:</h4>
<div class="separator" style="clear: both;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6kCiG2VUNKVoqkZeZcsHhs5xNtCPqZ7gua_jheZ4hEPJXZZnK6o5vSsV0SO1nP0xOCrnoZtNlb7RUOdjQKv3slynj0hMbQllzUkK3ghkhBIKXlM4ji7rYjESYcarih9pMhax04llDx3DF/s1600/blogger-popular-posts-gadget-style.png" imageanchor="1" style="background-color: #f9f9f9; border: none; color: #0088b2; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-align: center; text-decoration: none;"><img alt="blogger gadgets, blogger widgets, popular posts widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6kCiG2VUNKVoqkZeZcsHhs5xNtCPqZ7gua_jheZ4hEPJXZZnK6o5vSsV0SO1nP0xOCrnoZtNlb7RUOdjQKv3slynj0hMbQllzUkK3ghkhBIKXlM4ji7rYjESYcarih9pMhax04llDx3DF/s1600/blogger-popular-posts-gadget-style.png" style="border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: none; list-style: none; margin: 0px; max-width: 600px; outline: none; padding: 0px;" title="styles for blogger popular posts gadget" /></a></div>
<div class="separator" style="clear: both;">
 </div>
<div class="code" style="background-attachment: scroll; background-color: #fffdf1; background-image: none; background-position: 0px 0px; background-repeat: repeat repeat; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 2px solid rgb(218, 169, 38); color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; padding: 3px 7px;">
 #PopularPosts1 h2{ 
padding:7px 0 3px 0; 
width:100%; 
margin-bottom:10px; 
font-size:1.3em; 
text-indent:-12px; 
font-size:18px; 
text-align:center; 
color: <span style="border: none; color: #3d85c6; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">#757575; <span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">/* Color of the widget's title */ 
} 
#PopularPosts1 ul{ 
list-style:none; 
counter-reset:li; 
padding:8px 0px 1px; 
left:-7px; 
width:290px; 
} 
#PopularPosts1 li{ 
position:relative; 
margin:0 0 10px 0; 
padding: 3px 2px 0 17px; 
left:-5px; 
width:285px; 
} 
#PopularPosts1 ul li{ 
background: #eee; 
position: relative; 
display: block; 
padding: .4em .2em .4em 2em; 
*padding: .2em; 
margin: .5em 0; 
background: #ddd; 
text-decoration: none; 
border-radius: .3em; 
transition: all .3s ease-out;    
} 
#PopularPosts1 ul li:before{ 
content: counter(li); 
counter-increment: li; 
position: absolute;  
top: 50%; 
margin: -1.3em; 
height: 2em; 
width: 2em; 
line-height: 2em; 
font-size: 15px; 
color: <span style="border: none; color: #3d85c6; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">#fff; <span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">/* text color of numbers */ 
background: <span style="border: none; color: #3d85c6; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">#FB8835; <span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">/* background color of numbers */ 
border: .2em solid <span style="border: none; color: #3d85c6; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">#fff; <span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">/* border color */ 
-webkit-box-shadow: 0 8px 5px -7px #888; 
-moz-box-shadow: 0 8px 5px -7px #888; 
box-shadow: 0 8px 5px -7px #888; 
text-align: center; 
font-weight: bold; 
border-radius: 2em; 
position: absolute;    
left: 0; 
transition: all .3s ease-out; 
} 
#PopularPosts1 ul li:hover{ 
background: #eee; 
} 
#PopularPosts1 ul li:hover:before{ 
transform: rotate(360deg);    
} 
#PopularPosts1 ul li a{ 
font: <span style="border: none; color: #3d85c6; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">14px Georgia, serif; <span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">/* font size of post titles */ 
text-shadow: 0 -1px 2px #fff; 
color: #444; 
display:block; 
min-height:25px; 
text-decoration:none; 
text-transform: uppercase; 
} 
#PopularPosts1 ul li a:hover{ 
color: #444; 
}</div>
<div>
 </div>
<div>
<h4>
Style 2:</h4>
</div>
<div style="text-align: center;">
<img alt="blogger gadgets, blogger widgets, popular posts widget" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB3e2oQ738TuMJL15K4WYBBTuZHuNzO2tTorR8xC51QYRymb9TRqkP-xbYGOJkQLgAXeBMz_XknDQY452jBTDDM2W_JBYMaHf_DieUECYHl41pcrH6sOvgshOiSIRyds0Eg7wW8EGxNWHI/s1600/blogger-popular-posts-gadget-style-2.png" /></div>
 
 
<div class="code" style="background-attachment: scroll; background-color: #fffdf1; background-image: none; background-position: 0px 0px; background-repeat: repeat repeat; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 2px solid rgb(218, 169, 38); color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; padding: 3px 7px;">
 #PopularPosts1 h2{ 
position:relative; 
padding:8px 10px 6px 10px; 
width:100%; 
margin-bottom: 5px; 
font-size:17px; 
color:#757575; <span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">/* Color of the widget's title */ 
text-align:left; 
} 
#PopularPosts1 ul{ 
list-style:none; 
counter-reset:li; 
padding:10px; 
left:-8px; 
width:100%; 
} 
#PopularPosts1 li{ <span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">/* Styles of each element */ 
width:100%; 
position:relative; 
left:0; 
margin:0 0 1px 12px; 
padding:4px 5px; 
} 
#PopularPosts1 ul li:before{ 
content: counter(li); 
counter-increment: li; 
position: absolute;  
left: -30px; 
top: 50%; 
margin-top: -13px; 
background: <span style="border: none; color: #3d85c6; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">#8E8E8E; <span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">/* background color of the numbers */ 
height: 1.9em; 
width: 2em; 
line-height: 2em; 
text-align: center; 
font-weight: bold; 
color: #fff; 
font-size: 14px; 
} 
#PopularPosts1 ul li:after{ 
position: absolute; 
content: ''; 
left: -2px; 
margin-top: -.7em;  
top: 50%; 
width: 0; 
height: 0; 
border-top: 8px solid transparent; 
border-bottom: 8px solid transparent; 
border-left:10px solid <span style="border: none; color: #3d85c6; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">#8E8E8E; <span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">/* background color of the right arrow*/ 
} 
#PopularPosts1 ul li a{ 
color: #444; 
text-decoration: none;    
font-size:15px; 
} 
#PopularPosts1 ul li { 
position: relative; 
display: block; 
padding: .4em .4em .4em .8em; 
*padding: .4em; 
margin: .5em 0 .5em 0.4em; 
background: #ddd; 
transition: all .3s ease-out; 
text-decoration:none; 
transition: all .1s ease-in-out; 
} 
#PopularPosts1 ul li:hover{ 
background: <span style="border: none; color: #0b5394; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">#eee; <span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">/* Background color on mouseover */ 
}    
#PopularPosts1 ul li a:hover{ 
color:<span style="border: none; color: #3d85c6; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">#444; <span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">/* Link color on mouseover */ 
margin-left:3px; 
}</div>
<div>
 </div>
<div>
<h4>
Style 3:</h4>
</div>
<div style="text-align: center;">
<img alt="blogger gadgets, blogger widgets, popular posts" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWD5BxQPh3YJth_6eTfWs1YI_8TTekk4pgMDJgb3JwmRA_ZBt-Ysa8JhjgbtKxCrPLE2IeGvic0i_cGS8o2a-6W20plaR4au6fSoV4NH7RR_WLPE6dLNn1q2wpjAi6wlVrBJ19C0QYB4Ba/s1600/blogger-popular-posts-gadget-style3.png" /></div>
<div>
<div class="code" style="background-attachment: scroll; background-color: #fffdf1; background-image: none; background-position: 0px 0px; background-repeat: repeat repeat; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 2px solid rgb(218, 169, 38); color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; padding: 3px 7px;">
#PopularPosts1 h2{ 
position:relative; 
right:-2px; 
padding:8px 63px 6px 17px;  
width:100%; 
margin:0; 
font-size:16px; 
background:<span style="border: none; color: #3d85c6; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">#4F4F4F; <span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">/* Background color */ 
color:<span style="border: none; color: #3d85c6; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">#f2f2f2; <span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">/* Color of the widget's title */ 
text-align:left; 
text-indent:18px; 
} 
#PopularPosts1 h2:before{ 
position:absolute; 
content:""; 
top:36px; 
right:0px; 
width: 0px; 
height: 0px; 
border-bottom:12px outset transparent; 
border-left:12px solid #000000;  
} 
#PopularPosts1 h2:after{ 
position:absolute; 
content:""; 
top:-6px; 
left:-5px; 
width: 0px; 
height: 0px; 
border-bottom:24px outset transparent; 
border-top:24px outset transparent; 
border-left:24px solid <span style="border: none; color: #3d85c6; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">#ffffff; <span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">/* Arrow background color on the left */ 
} 
#PopularPosts1 ul{ 
list-style:none; 
counter-reset:li; 
padding:10px; 
left:-8px; 
width:100%; 
} 
#PopularPosts1 li{  
width:100%; 
position:relative; 
left:0; 
margin:7px 0 16px 12px; 
padding:10px  4px 0 5px; 
} 
#PopularPosts1 ul li:before{  
content:counter(li); 
counter-increment:li; 
position:absolute; 
top:-2px; 
left:-20px; 
font-size:35px; 
width:20px; 
color:#888888;  
} 
 
#PopularPosts1 ul li a{ 
display:block; 
font-size:<span style="border: none; color: #3d85c6; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">16px; <span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">/* Font size of <span class="IL_AD" id="IL_AD2" style="background-attachment: scroll !important; background-color: transparent !important; background-image: none !important; background-position: 0% 50%; background-repeat: repeat repeat !important; border-bottom-color: rgb(7, 158, 2) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; border-left-style: none; border-right-style: none; border-top-style: none; color: rgb(7, 158, 2) !important; cursor: pointer !important; display: inline !important; float: none !important; list-style: none; margin: 0px; outline: none; padding: 0px 0px 1px !important; position: static;">the links */ 
color:<span style="border: none; color: #3d85c6; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;"> #666; <span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">/* Color of the links */ 
text-decoration:none; 
transition: all .1s ease-in-out;font-weight: bold; 
} 
#PopularPosts1 ul li a:hover{ 
color:#3366FF; 
margin-left:3px; 
}</div>
</div>
<div>
 </div>
<div>
<h4>
Style 4:</h4>
</div>
<div style="text-align: center;">
<img alt="blogger gadgets, blogger widgets" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib3bodOLAybFlL6IBlpathLbeFMwrANci-WNDMKrQY_9t7riZJJzWoOg9k9kNRgrRgV9DqQywtcaMP3ylxFV0xnP1-AiiT9CAmplgNAq4B4fUmxFGVCIjzo44Ni8Z-0VXcNf7aIaVaQnGU/s1600/style-4.png" /></div>
<div>
<div class="code" style="background-attachment: scroll; background-color: #fffdf1; background-image: none; background-position: 0px 0px; background-repeat: repeat repeat; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 2px solid rgb(218, 169, 38); color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; padding: 3px 7px;">
 #PopularPosts1 h2{ 
padding:8px 10px 3px 0; 
width:100%; 
margin:0; 
font-size:16px; 
position:relative; 
left:-20px; 
display:block; 
border-bottom:2px solid #ccc; 
} 
#PopularPosts1 ul{ 
list-style:none; 
counter-reset:li; 
padding:10px; 
width:100%; 
} 
#PopularPosts1 li{ /* Styles of each element */ 
width:100%; 
position:relative; 
left:0; 
margin:0 0 6px 10px; 
padding:4px 5px; 
} 
#PopularPosts1 ul li:before{<span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;"> /* Style of the numbers */ 
content:counter(li); 
counter-increment:li; 
position:absolute; 
top:3px; 
left:-39px; 
font-size:21px; 
width:28px; 
height:28px; 
border-radius: 50%; 
color:#777;<span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;"> /* Text color */ 
border: 2px solid #ddd;<span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;"> /* Rounded border color */ 
padding:0; 
text-indent:9px; 
} 
#PopularPosts1 ul li a{ 
display:block; 
position:relative; 
left:-45px; 
width:100%; 
margin:0; 
min-height:28px; 
padding: 5px 3px 3px 39px; 
color:#333; <span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">/* color of the links */ 
text-decoration:none; 
font-size:14px; <span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">/* Font size of the links */ 
font-style: italic; 
 
} 
#PopularPosts1 ul li a:hover{ 
color:#3366ff; 
margin-left:3px; 
}</div>
</div>
<ol style="text-align: left;">
</ol>
</div>
 
<h4>
Style 5:</h4>
<div style="text-align: center;">
<img alt="Square Style" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSivy5IjlcDIsSJGbpKY_fFGrFFgOscGFaVdIR3PfdkvGhjDKPSZCiw7CNOpTpF8iYn9K08VVY3TT8Md1KO7lz7x4pUW0-Ovmzcnho5aHcogcYRe9z6oSDO2n5HALgZ_dtkoCZyKAJi9ju/s1600/Square+numbering+popular+posts+widget.jpg" /></div>
<div>
 </div>
<blockquote class="tr_bq">
 /*--- WBT Popular Posts --- */ 
.popular-posts ul { 
padding-left: 0px; 
counter-reset: popcount; 
} 
.popular-posts a { 
color: #777; 
} 
.popular-posts a:hover { 
color: #111; 
} 
.popular-posts ul li:before { 
list-style-type: none; 
margin-right: 10px; 
padding: 0.3em 0.6em; 
counter-increment: popcount; 
content: counter(popcount); 
color: #FFF; 
position: relative; 
float: left; 
font: italic bold 15px Tahoma; 
margin-left:5px; 
background: #ee504d; 
margin-top:-2px; 
border: 2px solid #EEE; 
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3); 
} 
.popular-posts ul li { 
border: 1px solid #eaeaea; 
background:#fff;background:-moz-linear-gradient(top,#fff 0%,#f2f2f2 100%); 
font: normal 12px verdana; 
height: 30px; 
-moz-transition: all 0.700s ease-out; 
-o-transition: all 0.700s ease-out; 
-webkit-transition: all 0.700s ease-out; 
-ms-transition: all 0.700s ease-out; 
transition: all 0.700s ease-out; 
} 
.popular-posts ul li:hover { 
border: 1px dashed #bbbbbb; 
-moz-transition: all 0.700s ease-out; 
-o-transition: all 0.700s ease-out; 
-webkit-transition: all 0.700s ease-out; 
-ms-transition: all 0.700s ease-out; 
transition: all 0.700s ease-out; 
} 
.popular-posts ul li a:hover { 
text-decoration:none; 
color: #000; 
-moz-transition: all 0.700s ease-out; 
-o-transition: all 0.700s ease-out; 
-webkit-transition: all 0.700s ease-out; 
-ms-transition: all 0.700s ease-out; 
transition: all 0.700s ease-out; 
}</blockquote>
 
<h4>
Style 6:</h4>
<div style="text-align: center;">
<img alt="Circular Style" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfoSRe0jM6R0_AtDHsefC8o-XqpiXJfaNLQ8gDewYn_zSZKaAXAU3u4i3hf8ltnCR69ipOdQ32Cn8-2GOuWJGiZREUBCtKXTpx6yIDOHKnqv5WhVPr6b3m5ByhMNngMCJuIZq3rhwxXksr/s1600/Circular+numbering+popular+posts+widget.jpg" /></div>
<div>
 </div>
<div>
<blockquote class="tr_bq">
/*--- WBT Popular Posts --- */ 
.popular-posts ul { 
padding-left: 0px; 
counter-reset: popcount; 
} 
.popular-posts a { 
color: #777; 
} 
.popular-posts a:hover { 
color: #111; 
} 
.popular-posts ul li:before { 
list-style-type: none; 
margin-right: 10px; 
padding: 0.3em 0.6em; 
counter-increment: popcount; 
content: counter(popcount); 
color: #FFF; 
position: relative; 
float: left; 
font: italic bold 15px Tahoma; 
margin-left:5px; 
background: #56c55f; 
border-radius: 25px 25px 25px 25px; 
border: 2px solid #EEE; 
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3); 
margin-top:-2px; 
} 
.popular-posts ul li { 
border: 1px solid #eaeaea; 
background:#fff;background:-moz-linear-gradient(top,#fff 0%,#f2f2f2 100%); 
font: normal 12px verdana; 
height: 30px; 
-moz-transition: all 0.700s ease-out; 
-o-transition: all 0.700s ease-out; 
-webkit-transition: all 0.700s ease-out; 
-ms-transition: all 0.700s ease-out; 
transition: all 0.700s ease-out; 
} 
.popular-posts ul li:hover { 
border: 1px dashed #bbbbbb; 
-moz-transition: all 0.700s ease-out; 
-o-transition: all 0.700s ease-out; 
-webkit-transition: all 0.700s ease-out; 
-ms-transition: all 0.700s ease-out; 
transition: all 0.700s ease-out; 
} 
.popular-posts ul li a:hover { 
text-decoration:none; 
color: #000; 
-moz-transition: all 0.700s ease-out; 
-o-transition: all 0.700s ease-out; 
-webkit-transition: all 0.700s ease-out; 
-ms-transition: all 0.700s ease-out; 
transition: all 0.700s ease-out; 
}</blockquote>
</div>
</div>
 
<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/yvTyUlrurs0" width="560"></iframe></div>
</div>

Blogger Different Styles Popular Posts Widget Video

Blogger allows us to easily add a "Popular Posts" widget, that we select from its list of gadgets, and we can do that by going ...