IT Techno Hub: blogger

Upload Files and Download in Blogger

<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/AVvXsEg1FKKLrcmQWGp-3MX29i4HbY2KcQhdfRXlnTdHWnH0VVIi3pKFYAFPgUAnMG2Lx2ewZuaBe1iB2eI-QAlS-65cSr3Vcrt5a1xqpORMy8Z4funVk6Tud0VN5_gOlnpbmY5T7IKeMjTfCCg/s1600/transfer_up_down.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Upload Files For Download in Blogger" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1FKKLrcmQWGp-3MX29i4HbY2KcQhdfRXlnTdHWnH0VVIi3pKFYAFPgUAnMG2Lx2ewZuaBe1iB2eI-QAlS-65cSr3Vcrt5a1xqpORMy8Z4funVk6Tud0VN5_gOlnpbmY5T7IKeMjTfCCg/s1600/transfer_up_down.png" title="Upload Files For Download in Blogger" width="320" /></a></div>
<br />
<div style="text-align: justify;">
Blogger is one of the best blogging CMS (Content Management System) which is being used all over the universe. The main feature of this platform is that it is free of hosting which means we just need to purchase domain only without hosting if domain is required otherwise we can also use free sub-domain. Well, when we create blog post, sometimes we need to upload data/files for public download or which can be downloaded into blog reader’s system. But unfortunately, there is no option to upload files that can be due to free hosting and also for avoiding people from uploading unnecessary, spam and malware data in Google servers. So, sometimes people get confused where to upload files for download now and you can be one of that confused people. Don’t worry, we’re here, below we’ll be showing you that how can we easily upload files for Download in Blogger.<br />
<br /></div>
<h3 style="text-align: left;">
So, How can we upload files for download in Blogger?</h3>
<br />
<div style="text-align: justify;">
So, There is no option to upload files for direct download in blogger and still we're eager for it. When we don't have any needable option in Blogger, we can make use of external services. It means if we can't upload files directly from Blogger then we can upload data somewhere else and insert the direct download link in Blogger post editor. Here, we'll make use of Google Drive which is awesome cloud hosting and file sharing service. First, we'll add data into our Google Drive account after that we've to make the data public because everything that you upload in Google Drive is private means only for you but here we want to make it for public download. After storing data in Google Drive and making it public, It's time to insert the download link or download button in blogger and let your visitors download the files.</div>
<div style="text-align: justify;">
Let's Try It - Tutorial</div>
<br />
<br />
<ul style="text-align: left;">
<li>Go To <b>Google Drive</b> >> <b>Create </b>>> <b>Folder</b></li>
<li>Name It Something Such As "<b>Downloads</b>"</li>
<li>Open That Folder >> Click "<b>Upload Icon</b>" and Choose "<b>Files</b>".</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3DFeG6DCkxyIAThAFcNE1n83SnGV6bIhE2SVtSh4g2p7wP7l_Q-7eYLTm0BFHX6SAuh4Op-cXLvJUesOOXFgKSzboeMbi4DElrhrtwwlNRk2TUv7nkPM5-jEBpaZUWIsZaQwQuRrMdr8/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Upload FIles" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3DFeG6DCkxyIAThAFcNE1n83SnGV6bIhE2SVtSh4g2p7wP7l_Q-7eYLTm0BFHX6SAuh4Op-cXLvJUesOOXFgKSzboeMbi4DElrhrtwwlNRk2TUv7nkPM5-jEBpaZUWIsZaQwQuRrMdr8/s1600/1.png" title="Upload FIles" /></a></div>
<div>
<br /></div>
<br />
<div>
<br /></div>
<div>
<div>
<ul style="text-align: left;">
<li>Now Select The Files That You Want To Upload.</li>
<li>When The File is Uploaded, Right Click On That File.</li>
<li>Click "<b>Share</b>" and Once Again "<b>Share</b>".</li>
</ul>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZV2IWy0qgXQE3qyc-wJ06Ki1v3S27k3eG5cBPty2sWuag1bVwrlKhXv8R-NLYRy7Z0f9Xi-fD3jiMEj5qP5rapHGxnt8fDHLhS1O7Hzl4YKBMw5Aez94e2v1Uufl8x9U00szZ3uxLgXc/s1600/Sharing+File.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Sharing File " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZV2IWy0qgXQE3qyc-wJ06Ki1v3S27k3eG5cBPty2sWuag1bVwrlKhXv8R-NLYRy7Z0f9Xi-fD3jiMEj5qP5rapHGxnt8fDHLhS1O7Hzl4YKBMw5Aez94e2v1Uufl8x9U00szZ3uxLgXc/s1600/Sharing+File.png" title="Sharing File" /></a></div>
<div>
<br /></div>
<div>
<ul style="text-align: left;">
<li>Now Pop Up Box Will  Appear.</li>
<li>In The "<b>Who Has Access</b>" Section, Click "<b>Change</b>".</li>
<li>Here Just Tick Mark "<b>Public On The Web</b>" and Save It.</li>
</ul>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw6blCoa8hcrIeVpVtiMJwtTnbxQtGXFsoiAkuSnWWH_nJQMiLnw2Wp9JCxzIjU-KaJ9GlkCLGgDjxk40wRy3BnMSlB9SfeCg7iBaI_GEdsjZNUsomGDb6ZXnPB8hXTLmEGeshNSD7pDY/s1600/Public+On+The+Web+and+Save.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Public On The Web and Save" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw6blCoa8hcrIeVpVtiMJwtTnbxQtGXFsoiAkuSnWWH_nJQMiLnw2Wp9JCxzIjU-KaJ9GlkCLGgDjxk40wRy3BnMSlB9SfeCg7iBaI_GEdsjZNUsomGDb6ZXnPB8hXTLmEGeshNSD7pDY/s1600/Public+On+The+Web+and+Save.png" title="" /></a></div>
<div>
<ul style="text-align: left;">
<li>Now Same Box Will Appear Back and At The Top, There Will Be Link in "Link To Share" Box. Copy That Link and Paste It in Notepad.</li>
</ul>
<ul style="text-align: left;">
<li>Copy This Green Colored Link and Also Paste It in Notepad <span style="color: blue;">https://docs.google.com/uc?export=download&id=<b>FILE-ID-GOES-HERE</b></span></li>
</ul>
<ul style="text-align: left;">
<li>Now Look In The First Link Which You Copied From Google Drive. It Will Be Having File ID Which Looks Like <span style="color: blue;"><b>0ByNodV_m9cVLN1loc2JXZGJQUjQ</b></span></li>
</ul>
<ul style="text-align: left;">
<li>Copy Yours File ID and Replace It With <span style="color: blue;">FILE-ID-GOES-HERE</span> in The Second Link Which You Copied From Here.</li>
</ul>
<ul style="text-align: left;">
<li>Now The Second Link Will Look Like This <span style="color: blue;">https://docs.google.com/uc?export=download&id=<b>0ByNodV_m9cVLYTRKbjVIYXEwVXM</b></span></li>
</ul>
<ul style="text-align: left;">
<li>Download Link Is Ready Now! Whenever People Will Open The Link Like Above The File Will Start Downloading and Yes It is Direct Download Link.</li>
</ul>
<ul style="text-align: left;">
<li>For Clarification, We've Prepared The Image Inserted Below.</li>
</ul>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi62j7A5oZx65Q0VgSBOZdO4gTIl5nKRShiOEIzaLknhQ00CWmr988LKIK0VB3-9f0yuczE6OnZ9qqwnu4Z3BRFQQexfeDaiKiZ2wHfqTqlWbrMWLSZznS1oHOdxInjCI5cEd-CxLXO0A/s1600/Changing+Link.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Changing Link " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi62j7A5oZx65Q0VgSBOZdO4gTIl5nKRShiOEIzaLknhQ00CWmr988LKIK0VB3-9f0yuczE6OnZ9qqwnu4Z3BRFQQexfeDaiKiZ2wHfqTqlWbrMWLSZznS1oHOdxInjCI5cEd-CxLXO0A/s1600/Changing+Link.png" title="" /></a></div>
<div>
<br /></div>
<div>
<ul style="text-align: left;">
<li>Go To <b>Blogger </b>>> <b>Create New Post</b> >> <b>Link</b></li>
<li>Paste The Prepared Link in URL Box, Write "<b>Download</b>" in "<b>Texts to Display</b>" Box.</li>
</ul>
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwIBKysqJtkVPFWAK6MapIJYw1Pkfj5ivIk49ZfHFHdr1CnxM4rwkk4J1QGJZO3MWoDPgfrHSotkR79rkzd983ngfIJ9ttQfsc3grhGcVxGYB0AKrRLC-8WcECyVLQS1tV_FRqLL06tzU/s1600/Edit+Link+Box+Blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Edit Link Box Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwIBKysqJtkVPFWAK6MapIJYw1Pkfj5ivIk49ZfHFHdr1CnxM4rwkk4J1QGJZO3MWoDPgfrHSotkR79rkzd983ngfIJ9ttQfsc3grhGcVxGYB0AKrRLC-8WcECyVLQS1tV_FRqLL06tzU/s1600/Edit+Link+Box+Blogger.png" title="" /></a></div>
<div>
<br /></div>
<div>
<ul style="text-align: left;">
<li>Click "<b>OK</b>"</li>
<li>Prepare The Post.</li>
<li>Click on "Publish" Button.</li>
<li>Thats All.</li>
<li>Final Words</li>
</ul>
</div>
<div>
<h3 style="text-align: left;">
Final Words</h3>
</div>
<div>
Thats how we can upload files for download in blogger. Unlike other file sharing services which are lazy, Google Drive is best, fast and reliable that's why we've chosen it. I think tutorial is become little long but we've tried to make it understandable. Feel free to ask for help in comments if you're facing any problem while trying this trick. Share this post with your fellow bloggers and also ask them to share with others. Good bye, Take care and have a nice day!</div>
</div>
<br />
<div>
<br /></div>
<br />
<blockquote class="tr_bq">
If you like our post or have any suggestion or got stuck at any steps implementing the widget to your blog then leave a comment below i will be glad to help you out. Subscribe to our blog, Like us on Facebook, +1 on Google+. Keep Blogging!</blockquote>
</div>

Upload Files and Download in Blogger

Blogger is one of the best blogging CMS (Content Management System) which is being used all over the universe. The main feature of this...

How to Backup Blogger Templates

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<img height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6zAODfK8BC5AR55ymh2VN6c8_1Ktb6XM1x00pW_cb3KbpyH7R4eBIyYaazJVmEBJhzChyphenhyphenk55X_VNDrib1_1L3jfWp_ZW_eZvjY3Pb1-J4ypLbcU9F_sfXZPW-RqOW_tffoIxdN6y6Baai/s400/Backup+Blogger+Template.jpg" width="400" /></div>
Backing up the template , it is important in the affairs of blogging, but many are ignoring it. Backing up templates will greatly help us when we do edit or make changes to your blog and it also occurs when an error on our own blogs, so we have a copy of the template that is good or not to have damage to the script no error occurs even if later we've tried anticipate.<br />
Backing template is absolutely necessary before we make any changes or bereksperiment on our blog, or we can create a new blog specifically for the trial if it does not want to do the backup template.<br />
<br />
<b>1.</b> Please log in to Blogger<br />
<b>2.</b> Click Arrow >> then click <b>Template </b><br />
<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLRyfymvw9uoCem6iQnwQXLRvkHrJBHMUZvSyvLc0xNvjBLnSXkA2-oXkgmgUvVrBSJD1wEELeoAEeb55KNWCO0zA6yO6djjTKniwkm_kaUI05iyxaMU3HNiCbxZ7_aB4dsUmz5SWoDMTl/s1600/Blogger+Dasboard+Baru.png" /></div>
<br />
<br />
<b>3.</b> Find and click the button "Backpup / Restore" (upper right side)<br />
<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcLfyUhvXNj7mH9iKa-y-0vtA-TQnXXti8-YQDPrWCXlLHic0_SUChQUSREnu_15eTWY3m3wJoahindMP2oj0tn93Hj5YS0ynmBu1UeshD4L2iHi4ki5hVFzlKVnBKmWZ28jz4jomU0WJt/s1600/BackUp+Template.png" /></div>
<br />
<b>4.</b> In the new window that appears Click the "Download Full Template"<br />
<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNFABWfyRlv8SVcXMGDdBV6h-98Yh4moI4E4Lx_UDIrow38NQf_pYPVlT5k6DK05hSM1vgrG1gwz_Omg13rIhvMOXdxEZkvorkMYiHJ9sCehWtf7dsNFirffJP0qtw_L-AKGlhvOCJDhQx/s1600/BackUp%2520Template%2520-%2520Restore.png" /></div>
<br />
<br />
<b>5.</b> Download the template and save it on your computer and click "Close"<br />
<br />
<br />
Maybe one day you need the results of the backup template so save your blogger template. Very easy way is not? so do not let this be missed if ever need to edit or make changes to scripts on your template.<br />
<blockquote class="tr_bq">
If you like our post or have any suggestion or got stuck at any steps implementing the widget to your blog then leave a comment below i will be glad to help you out. Subscribe to our blog, Like us on Facebook, +1 on Google+. Keep Blogging!</blockquote>
</div>

How to Backup Blogger Templates

Backing up the template , it is important in the affairs of blogging, but many are ignoring it. Backing up templates will greatly help us...

Add an Admin Control Panel in Blogger + Video Tut

<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/AVvXsEjFeKxZot1Q1Jy5Wr7JzwbYjSULf98nKURFgv5uiI0V-MxpbkpMqOICRs8j70EjmbcKlpNcp9MNDnaepiGLuWcQTq2RdaigZ20rIjilP9ht_tn5zufMZN7dA3rWKsZkjxnNnnX9wXyQawc/s1600/Screenshot_1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="demo admin" border="0" height="79" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFeKxZot1Q1Jy5Wr7JzwbYjSULf98nKURFgv5uiI0V-MxpbkpMqOICRs8j70EjmbcKlpNcp9MNDnaepiGLuWcQTq2RdaigZ20rIjilP9ht_tn5zufMZN7dA3rWKsZkjxnNnnX9wXyQawc/s1600/Screenshot_1.png" title="demo " width="640" /></a></div>
<br />
With this admin control panel for Blogger you can easily access the functions of the blog and you will not have to always open your blog page and the Blogger homepage at the same time.The Admin Control Panel will only be visible when the blog author is logged in. It is invisible to blog readers, similar to the Edit post/widget pencil icons which are only visible to you while you are logged in.<br />
<div>
<br /></div>
<div>
<br /></div>
<div>
Lets Start.</div>
<div>
<br /></div>
<div>
<h3 style="text-align: left;">
Getting the Blog ID </h3>
<div>
<br /></div>
<div>
The first thing we need to do is get the ID of our blog by clicking on any option from our Blog Dashboard, for example Settings. Once we have clicked there, take a look at the address bar in your browser:</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV92TXsN8jKCCWwNnzK0noxMyJJ5cr6HJioFLuWU63LrXuBsP5nTtQizs0My4NOk0pP73u5u-UrFF2Yleki_DSy5GSNpCKOssczo9EZ6dddMYq4wR2Vm4D3Bp_m6c2qcFGkhL-pYC2KlE/s1600/blogger-id-number.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger id demo" border="0" height="86" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV92TXsN8jKCCWwNnzK0noxMyJJ5cr6HJioFLuWU63LrXuBsP5nTtQizs0My4NOk0pP73u5u-UrFF2Yleki_DSy5GSNpCKOssczo9EZ6dddMYq4wR2Vm4D3Bp_m6c2qcFGkhL-pYC2KlE/s1600/blogger-id-number.png" title="blogger id" width="640" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Within the URL you will notice a string like this:</div>
<blockquote class="tr_bq">
 blogID=XXXXXXXXX</blockquote>
<div>
Where XXXXXXXXX is the unique identifier (ID) for your blog.</div>
<div>
Copy the ID for the blog you wish to work with so we can add this in the links for your admin control panel.</div>
</div>
<div>
<br /></div>
<div>
<h3 style="text-align: left;">
Adding the admin control panel to Blogger template</h3>
<div>
<br /></div>
<div>
<span style="color: blue;">Step 1</span>. Go to <b>Template </b>and click on the <b>Edit HTML</b> button:</div>
</div>
<div>
<br /></div>
<div style="text-align: center;">
<img alt="template edit" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoWs6Z5PRh3QWOGIWVu8y6S8uV2y6VWeaPfEA7TepegpuJdcIJjRmSlYaPGZ1uf36nJ8meXLS5c1yCRTF8q3blbHRk3rz87Xnm2grCll6NuhKJW0IB2uFxwb4LjG7qtlKKSSF3uq-8ZvU/s400/Screenshot_2.png" title="template" width="400" /></div>
<div>
<br /></div>
<span style="color: blue;">Step 2</span>. Click anywhere inside the code area and press the <b>CTRL + F</b> keys to open the Blogger' search box<br />
<br />
<span style="color: blue;">Step 3</span>. Paste this line inside the search box then hit Enter to find it:<br />
<blockquote class="tr_bq">
 <body expr:class=</blockquote>
<span style="color: blue;">Note: </span> if you can't find this line, try to find the <b><body></b> tag.<br />
<br />
<span style="color: blue;">Step 4</span>. Just below this line, add the following code:<br />
<blockquote class="tr_bq">
 <span class='item-control blog-admin'><br />
<style><br />
.control-panel ul{z-index: 20; position: absolute; margin: 0px auto; background-color: #F6F6F6; width: 100%; }<br />
.control-panel ul li{display: inline-block; float: left; padding: 7px 0px;}<br />
.control-panel ul li a {color:#686868;padding: 7px 15px;border-right: 1px solid #E3E3E3;font-weight: bold;font-size: 13px;}<br />
.control-panel a:hover {text-decoration:none; color:#FC8F44;}<br />
</style><br />
<div class='control-panel'><br />
<ul><br />
<li><a href='http://www.blogger.com/home'>My Blogs</a></li><br />
<li><a href='http://www.blogger.com/blogger.g?blogID=<span style="color: #274e13;">XXXXXXXXXXXXX</span>#editor/src=sidebar'>New Post</a></li><br />
<li><a href='http://www.blogger.com/blogger.g?blogID=<span style="color: #274e13;">XXXXXXXXXXXXX</span>#editor/target=page'>New Page</a></li><br />
<li><a href='http://www.blogger.com/blogger.g?blogID=<span style="color: #274e13;">XXXXXXXXXXXXX</span>#posts'>All Posts</a></li><br />
<li><a href='http://www.blogger.com/blogger.g?blogID=<span style="color: #274e13;">XXXXXXXXXXXXX</span>#comments'>Comments</a></li><br />
<li><a href='http://www.blogger.com/blogger.g?blogID=<span style="color: #274e13;">XXXXXXXXXXXXX</span>#pageelements'>Layout</a></li><br />
<li><a href='http://www.blogger.com/blogger.g?blogID=<span style="color: #274e13;">XXXXXXXXXXXXX</span>#templatehtml'>Edit HTML</a></li><br />
<li><a href='#' onclick='location.reload(true); return false;'>Refresh</a></li><br />
<li><a href='/' target='_blank'>New Tab</a></li><br />
<li><a href='http://www.blogger.com/blogger.g?blogID=<span style="color: #274e13;">XXXXXXXXXXXXX</span>#basicsettings'>Settings</a></li><br />
<li><a href='http://www.blogger.com/blogger.g?blogID=<span style="color: #274e13;">XXXXXXXXXXXXX</span>#overviewstats'>Stats</a></li><br />
<li><a href='http://www.blogger.com/logout.g'>Logout</a></li><br />
</ul><br />
</div><br />
</span></blockquote>
Change <span style="color: #274e13;">XXXXXXXXXXXXX </span>with your unique Blog ID previously copied, and be careful not to delete anything, like quote or any other character.<br />
<br />
<span style="color: blue;">Step 5:</span>. Click on the Save template button to save the changes.<br />
<br />
<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/Z54CIaGq5sE" width="560"></iframe>
</div>
<blockquote class="tr_bq">
If you like our post or have any suggestion or got stuck at any steps implementing the widget to your blog then leave a comment below i will be glad to help you out. Subscribe to our blog, Like us on Facebook, +1 on Google+. Keep Blogging!</blockquote>
</div>

Add an Admin Control Panel in Blogger + Video Tut

With this admin control panel for Blogger you can easily access the functions of the blog and you will not have to always open your blog...

Beautiful Flat UI Buttons in Blogger Video

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjsv9A_9Oav1piX1-K1T7yjWFFSTs5f7zAKtPx9XDlvXT7RlKTsEDvJBb8Dpa0brzPiBMljEt-TaRFhdM2kmAsymAmvMOF79j53Ja6QrqQl_NiPBj_nNMu2SR56LnIYg2MkMawU4q10ug/s1600/Screenshot_1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjsv9A_9Oav1piX1-K1T7yjWFFSTs5f7zAKtPx9XDlvXT7RlKTsEDvJBb8Dpa0brzPiBMljEt-TaRFhdM2kmAsymAmvMOF79j53Ja6QrqQl_NiPBj_nNMu2SR56LnIYg2MkMawU4q10ug/s1600/Screenshot_1.png" width="400" /></a></div>
<br />
<h3 style="text-align: left;">
Step 1. Installation</h3>
<br />
<br />
<ol style="text-align: left;">
<li>Go To <b>Blogger </b>>> <b>Template</b></li>
<li>Click <b>Edit HTML</b> and Search For <b></head></b></li>
<li>Paste The Following Code Above <b></head></b></li>
</ol>
<br />
<blockquote class="tr_bq">
<br />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css"></link><br />
<style type="text/css"><br />
.button {color:white!important; font-family:open sans; margin:10px 10px 10px 0;text-decoration:none!important; font-weight:700;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-oborder-radius:5px; transition:all .4s;-webkit-transition:all .4s;-moz-transition:all .4s;-ms-transition:all .4s;-o-transition:all .4s;}<br />
.blue {background: #3498db;border-bottom: 3px solid #226693;}<br />
.blue:hover {background:#2980b9;}<br />
.green {background: #2ecc71;border-bottom: 3px solid #1F8C4C;}<br />
.green:hover {background: #27ae60;}<br />
.red {background: #e74c3c;border-bottom: 3px solid #922C20;}<br />
.red:hover {background:#c0392b;}<br />
.purple {background: #9b59b6; border-bottom: 3px solid #74398E;}<br />
.purple:hover {background:#8e44ad;}<br />
.seagreen {background: #1abc9c;border-bottom: 3px solid #127F69;}<br />
.seagreen:hover {background: #16a085;}<br />
.big {font-size:18px; padding:15px 20px;}<br />
.medium {font-size:15px; padding: 10px 15px;}<br />
.small {font-size:12px; padding:8px 10px;}<br />
</style><br />
</blockquote>
<br />
<br />
<ul style="text-align: left;">
<li>Click "Save Template".</li>
<li>Installation Completed!</li>
</ul>
<br />
<br />
<h3 style="text-align: left;">
Step 2. Adding Flat UI Buttons in Blogger </h3>
<br />
<br />
<ol style="text-align: left;">
<li>Go To <b>Blogger </b>>> <b>Create New Post</b></li>
<li>Click "<b>HTML</b>" Tab</li>
<li>Copy and Paste Any Button Code There.</li>
</ol>
<br />
<blockquote class="tr_bq">
Big Size Buttons<br />
<a class="button blue big" href="<span style="color: blue;">#</span>"><span style="color: red;">Blue Button</span></a><br />
<a class="button green big" href="<span style="color: blue;">#</span>"><span style="color: red;">Green Button</span></a><br />
<a class="button red big" href="<span style="color: blue;">#</span>"><span style="color: red;">Red Button</span></a><br />
<a class="button purple big" href="<span style="color: blue;">#</span>"><span style="color: red;">Purple Button</span></a><br />
<a class="button seagreen big" href="<span style="color: blue;">#</span>"><span style="color: red;">SeaGreen </span></a><br />
Medium Size Buttons<br />
<a class="button blue medium" href="<span style="color: blue;">#</span>"><span style="color: red;">Blue Button</span></a><br />
<a class="button green medium" href="#"><span style="color: red;">Green </span><span style="color: red;">Button</span></a><br />
<a class="button red medium" href="<span style="color: blue;">#</span>"><span style="color: red;">Red </span><span style="color: red;">Button</span></a><br />
<a class="button purple medium" href="<span style="color: blue;">#</span>"><span style="color: red;">Purple </span><span style="color: red;">Button</span></a><br />
<a class="button seagreen medium" href="<span style="color: blue;">#</span>"><span style="color: red;">Sea </span><span style="color: red;">Button</span></a><br />
Small Size Buttons<br />
<a class="button blue small" href="<span style="color: blue;">#</span>"><span style="color: red;">Blue </span><span style="color: red;">Button</span></a><br />
<a class="button green small" href="<span style="color: blue;">#</span>"><span style="color: red;">Green </span><span style="color: red;">Button</span></a><br />
<a class="button red small" href="<span style="color: blue;">#</span>"><span style="color: red;">Red </span><span style="color: red;">Button</span></a><br />
<a class="button purple small" href="<span style="color: blue;">#</span>"><span style="color: red;">Purple </span><span style="color: red;">Button</span></a><br />
<a class="button seagreen small" href="<span style="color: blue;">#</span>"><span style="color: red;">Sea </span><span style="color: red;">Button</span></a></blockquote>
<br />
<ul style="text-align: left;">
<li>Replace <span style="color: blue;"><b>#</b></span>  With The Link of Button.</li>
<li>Replace Red Color Text With The Text You Want to Show On That Button.</li>
<li>Prepare Post Content and Publish.</li>
<li>That's All. </li>
</ul>
<br />
<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/o5A5CjgnDtw" width="560"></iframe>
</div>
<blockquote class="tr_bq">
If you like our post or have any suggestion or got stuck at any steps implementing the widget to your blog then leave a comment below i will be glad to help you out. Subscribe to our blog, Like us on Facebook, +1 on Google+. Keep Blogging!</blockquote>
</div>

Beautiful Flat UI Buttons in Blogger Video

Step 1. Installation Go To Blogger >> Template Click Edit HTML and Search For </head> Paste The Following Code Abo...

For Author Comments Different Background with Video Tutorial

<div dir="ltr" style="text-align: left;" trbidi="on">
In this tutorial we will learn how to highlight author comments so that they will have the background color, border, or anything that makes them stand out from the rest is different. To achieve this, we need to add code to the Blogger template and modifying styles according to our preferences.<br />
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiO4OaItgI8Z5KQei04kwN3khZUMnUzqIanorsIVXRgthQhX2u-jXFDJ8pPUEvkmQGnhdJVDNMJeCeWnzDVHFHpSnW0yR1g-2kQKKVL9O-QxdhCLpO9P8dSgT-YR6TXSq2_IM3SZbhouY/s1600/Screenshot_1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="370" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiO4OaItgI8Z5KQei04kwN3khZUMnUzqIanorsIVXRgthQhX2u-jXFDJ8pPUEvkmQGnhdJVDNMJeCeWnzDVHFHpSnW0yR1g-2kQKKVL9O-QxdhCLpO9P8dSgT-YR6TXSq2_IM3SZbhouY/s1600/Screenshot_1.png" width="640" /></a></div>
<div>
<div>
<br /></div>
<h3 style="text-align: left;">
How to highlight author comments in Blogger:</h3>
<div>
<br /></div>
<div>
<span style="color: blue;">Step 1.</span> Go to <b>Template</b>, click on <b>Edit HTML</b></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoWs6Z5PRh3QWOGIWVu8y6S8uV2y6VWeaPfEA7TepegpuJdcIJjRmSlYaPGZ1uf36nJ8meXLS5c1yCRTF8q3blbHRk3rz87Xnm2grCll6NuhKJW0IB2uFxwb4LjG7qtlKKSSF3uq-8ZvU/s1600/Screenshot_2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoWs6Z5PRh3QWOGIWVu8y6S8uV2y6VWeaPfEA7TepegpuJdcIJjRmSlYaPGZ1uf36nJ8meXLS5c1yCRTF8q3blbHRk3rz87Xnm2grCll6NuhKJW0IB2uFxwb4LjG7qtlKKSSF3uq-8ZvU/s1600/Screenshot_2.png" /></a></div>
<div>
<br /></div>
<div>
Step 2. Click anywhere inside the code area and try to find - using CTRL + F keys - this tag:</div>
<blockquote class="tr_bq">
 </body></blockquote>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsaMzlw2oo6DTtrtYj4fty6kNzeB13oImWduGCItHAI0S0AXgUPC8aTjE1FjyQ8hg5K_aSYzCK8GWSvTYk5zdouVMjEuZ-iCIxEH0aOzZ2pIXj5jjzPNt5MWHRbf1n_b2b2QlrEU6WTeI/s1600/how-to-customize-blogger-threaded-comments.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="117" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsaMzlw2oo6DTtrtYj4fty6kNzeB13oImWduGCItHAI0S0AXgUPC8aTjE1FjyQ8hg5K_aSYzCK8GWSvTYk5zdouVMjEuZ-iCIxEH0aOzZ2pIXj5jjzPNt5MWHRbf1n_b2b2QlrEU6WTeI/s1600/how-to-customize-blogger-threaded-comments.png" width="320" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Step 3. Just above it, paste the following code:</div>
</div>
<div>
<blockquote class="tr_bq">
 <script src='http://code.jquery.com/jquery-latest.js'/><br />
<script><br />
$(function() {<br />
function highlight(){<br />
$('.user.blog-author').closest('.comment-block')<br />
.css('border', '1px solid #FFA500')<br />
.css('background','#F1F1F2 url("http://www.blogblog.com/1kt/transparent/white80.png")')<br />
.css('color', '#444444')<br />
.css('font-size', '12px')<br />
.css('padding', '10px');<br />
}<br />
$(document).bind('ready scroll click', highlight);<br />
});<br />
</script></blockquote>
</div>
<div>
<b><span style="color: red;">Video Tu</span></b><br />
<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/pKPSDcG-qCw" width="560"></iframe>
</div>
<div style="text-align: center;">
<br /></div>
<blockquote class="tr_bq">
If you like our post or have any suggestion or got stuck at any steps implementing the widget to your blog then leave a comment below i will be glad to help you out. Subscribe to our blog, Like us on Facebook, +1 on Google+. Keep Blogging!</blockquote>
</div>
</div>

For Author Comments Different Background with Video Tutorial

In this tutorial we will learn how to highlight author comments so that they will have the background color, border, or anything that makes...

How To Remove Blogger Attribution Gadget + Video

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1boApxcegJ8kJttXKQGPwpS_JL2DqLASo3dFahN_cE7U0JaK1_APyLkFrzV_q4auT_qWYeCuayPJxmOnK0oSTHlOUd_QqMj1rwoMM9R6M6i3O06jUPmdNbQAGjXlJqX2MkGQQjVO7Z1Vn/s1600/REMOVE+POWERED+BY+BLOGGER.png" /></div>
The Attribution gadget is the gadget in the footer that says "Powered By Blogger". If you have tried to remove this then you may of noticed this gadget is locked into you blog. To unlock it, follow the next steps:<br />
blogger attribution, blogger hacks, powered by<br />
<br />
Step 1. Log in to your <b>Dashboard</b>, go to <b>Template </b>> <b>Edit HTML</b><br />
<b><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtCbzv129pgOvuEZtfnPLYG_YpjJ4TTxHdk1PzCOgKcTTmRMqeNMoJpCEQA3_1fqRvP4Ty-SZrDceI8fdXiK-KJWTAFHvOC5fB4_uCYHqHHUfJB8-nrnhlg2MJGujwUluyL5L5EnjE4y0/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtCbzv129pgOvuEZtfnPLYG_YpjJ4TTxHdk1PzCOgKcTTmRMqeNMoJpCEQA3_1fqRvP4Ty-SZrDceI8fdXiK-KJWTAFHvOC5fB4_uCYHqHHUfJB8-nrnhlg2MJGujwUluyL5L5EnjE4y0/s1600/1.png" /></a></div>
<br />
<br />
<br />
Step 2. Search (CTRL+ F) for this code:<br />
<br />
<blockquote class="tr_bq">
 <b:widget id='Attribution1' locked='<span style="color: red;">true</span>' title='' type='Attribution'></blockquote>
<br />
Step 3. Replace <span style="color: red;">true </span>with <span style="color: blue;">false</span><br />
<br />
Step 4. Click on the Save Template button<br />
<br />
Now attribution gadget is unlocked and it can be removed. Just go to:<br />
Layout and click on the edit link from Attribution gadget:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNAdIwxknltwrsfHBx_2WCp_gLqMguGYLuAyTXl3wWuS0NycKosLpg-NJuFiipJlZI4MS3ksFX6Pxwb7eJBVTQOn32XvRFtq0obur5u_dPl7vqmGHrL6GaUMeWN4zmFg3qSTXL1esP5BE/s1600/how-to-remove-blogger-powered-by-attribution-widget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNAdIwxknltwrsfHBx_2WCp_gLqMguGYLuAyTXl3wWuS0NycKosLpg-NJuFiipJlZI4MS3ksFX6Pxwb7eJBVTQOn32XvRFtq0obur5u_dPl7vqmGHrL6GaUMeWN4zmFg3qSTXL1esP5BE/s1600/how-to-remove-blogger-powered-by-attribution-widget.png" /></a></div>
<br />
<br />
Click on the <b>Remove</b> button - as you can see in the screenshot below:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdGPnAFbiQ400vUdZ3SoMOua4XhDVYlbGIJyKh9g_12j9fpcKMQUSupcNzcHBKh3lTWyDxdMp-8cgO8Vdo9hvGSdVZz0jb8lTJ9P7UP_AzbAKDKEGZR_65x2Ato88OkWNQ8Eye3tYJF5Y/s1600/remove+hide+powered+by+blogger+widget+gadget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdGPnAFbiQ400vUdZ3SoMOua4XhDVYlbGIJyKh9g_12j9fpcKMQUSupcNzcHBKh3lTWyDxdMp-8cgO8Vdo9hvGSdVZz0jb8lTJ9P7UP_AzbAKDKEGZR_65x2Ato88OkWNQ8Eye3tYJF5Y/s1600/remove+hide+powered+by+blogger+widget+gadget.png" /></a></div>
<br />
<br />
That was all !<br />
<div>
<br /></div>
</div>

How To Remove Blogger Attribution Gadget + Video

The Attribution gadget is the gadget in the footer that says "Powered By Blogger". If you have tried to remove this then you ma...

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>
<br />
<br />
<h4 style="text-align: left;">
How To Remove Image Border From Blogger</h4>
<br />
<ul style="text-align: left;">
<li>Go to <b>Dashboard </b>> <b>Template </b>> <b>Customize </b>> <b>Advanced </b>> <b>Add CSS</b></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>
<br /></div>
<div>
<blockquote class="tr_bq">
<span style="font-family: Georgia, Times, serif;"><span style="font-size: 15px; line-height: 24px;"> .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,</span></span><br />
<span style="font-family: Georgia, Times, serif;"><span style="font-size: 15px; line-height: 24px;">.BlogList .item-thumbnail img {</span></span><br />
<span style="font-family: Georgia, Times, serif;"><span style="font-size: 15px; line-height: 24px;">  padding: 0 !important;</span></span><br />
<span style="font-family: Georgia, Times, serif;"><span style="font-size: 15px; line-height: 24px;">  border: none !important;</span></span><br />
<span style="font-family: Georgia, Times, serif;"><span style="font-size: 15px; line-height: 24px;">  background: none !important;</span></span><br />
<span style="font-family: Georgia, Times, serif;"><span style="font-size: 15px; line-height: 24px;">  -moz-box-shadow: 0px 0px 0px transparent !important;</span></span><br />
<span style="font-family: Georgia, Times, serif;"><span style="font-size: 15px; line-height: 24px;">  -webkit-box-shadow: 0px 0px 0px transparent !important;</span></span><br />
<span style="font-family: Georgia, Times, serif;"><span style="font-size: 15px; line-height: 24px;">  box-shadow: 0px 0px 0px transparent !important;</span></span><br />
<span style="font-family: Georgia, Times, serif;"><span style="font-size: 15px; line-height: 24px;">}</span></span></blockquote>
<span style="font-family: Georgia, Times, serif; font-size: 15px; line-height: 24px;"><br /></span>
<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><span style="font-family: Georgia, Times, serif; font-size: 15px; line-height: 24px;"><br />If you Not getting just comment Below, Thanks</span></div>
<div>
<br /></div>
<br />
<div>
<br /></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>
<br />
<b>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.</b><br />
<br />
<h4 style="text-align: left;">
1. Blog Template  (Look)</h4>
<br />
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.<br />
2. Social Media<br />
<br />
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.<br />
Adding Facebook Like Box To Your Blog<br />
Add Twitter Flying Bird<br />
<h4 style="text-align: left;">
3. Attractive Post Image</h4>
<br />
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.<br />
<h4 style="text-align: left;">
4. Interact with Followers</h4>
<br />
Always stay connected with your blog visitors. Check your comments frequently and answer their queries. Appreciate them for their comments and reading your article.<br />
5. Do not copy<br />
<br />
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.<br />
<h4 style="text-align: left;">
6. Easy Navigation</h4>
<br />
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.<br />
<h4 style="text-align: left;">
7. Post Length</h4>
<br />
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.<br />
<h4 style="text-align: left;">
8. Contests</h4>
<br />
Always start interesting contests that benefits your blog visitors to keep your readers active and increase your blog followers.<br />
<h4 style="text-align: left;">
9. Post Regulary</h4>
<br />
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.<br />
<h4 style="text-align: left;">
10. SEO Friendly Content</h4>
<br />
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;">
<br /></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.<br />
<div>
<br /></div>
<div>
<h4 style="text-align: left;">
How to disable right click on blog or website ?</h4>
<div>
<br /></div>
<div>
<ol style="text-align: left;">
<li>Go to Blogger <b>Dashboard</b>--><b>Design</b>--> <b>Edit Html</b>.</li>
<li> Copy the code below and paste it in Edit HTML <i style="font-weight: bold;"> before the </head></i></li>
</ol>
</div>
</div>
<div>
<blockquote class="tr_bq">
<br />
<script language='JavaScript1.2'><br />
function disableselect(e){<br />
return false<br />
}<br />
function reEnable(){<br />
return true<br />
}<br />
document.onselectstart=new Function ("return false")<br />
if (window.sidebar){<br />
document.onmousedown=disableselect<br />
document.onclick=reEnable<br />
}<br />
</script></blockquote>
.<br />
   5. Now save it and you are done disabling right click on your blog.<br />
<br />
<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;">
<br /></div>
<h4 style="text-align: left;">
Instructions:</h4>
<br />
<ol style="text-align: left;">
<li>Log in to <a href="https://www.blogger.com/" target="_blank">Blogger</a>, Go to <b>Template </b>> <b>Edit HTML</b></li>
<li>Now find (CTRL+F) this code in the template: </li>
<li>Search for <b>.post blockquote</b> 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; }<br />
OR<br />
.post blockquote{ bla bla bla}</blockquote>
<br />
<br />
<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>
<br />
<br />
<blockquote class="tr_bq">
blockquote {<br />
margin : 0 20px;<br />
padding: 60px 30px 40px 20px;<br />
background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpDF9CoT8DZaTOZzuRHEkCNY5n9tmNM_OXLQ7HKSLBmiBszFyMxnk8eF3ssHO2extvjMNbkb8XVp2VkOF-6jdf95x9-u6R-Kdl9NdbPl4Z9wSrGUJzHYzYO8hl6DZ-roRjBfhVF9fBq8c/s400/owl.png) no-repeat 350px 5px;<br />
font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif;<br />
color : #000;<br />
border-left: 8px dotted #DAB547;<br />
}<br />
blockquote p {<br />
margin: 0;<br />
padding-top:10px;<br />
}</blockquote>
<div style="text-align: left;">
<br />
<br />
<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;">
<br /></div>
<blockquote class="tr_bq">
.post blockquote {<br />
margin : 0 20px;<br />
padding: 10px 20px 25px 20px;<br />
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;<br />
font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia;<br />
color : #484848;<br />
border: 5px dashed #fff;<br />
}<br />
.post blockquote p {<br />
margin: 0;<br />
padding-top:10px;<br />
}</blockquote>
<div>
<br /></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 {<br />
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5khBwE86vHjRAdKh0t-xyA7dRg4FHy3Q6s-0lMNGEX3gdGt7uweUZFZibrKjQGmkY7DDFClvGtjMPkwEduNVP-iKpEbqfAcEzQOdoGews3i7VIHQUPoosaRX-g3GX1vRluaFsJTW9QCo/s1600/comma-side-orange1.gif) ;<br />
background-position:;<br />
background-repeat:repeat-y;<br />
margin: 0 20px;<br />
padding: 20px 20px 10px 45px;<br />
font-size: 0.9em;<br />
font: italic 1.2em Georgia, "Times New Roman", Times, serif;<br />
}<br />
.post blockquote p {<br />
margin: 0;<br />
padding-top: 10px;<br />
}</blockquote>
<br /></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>
<br />
<blockquote class="tr_bq">
blockquote {<br />
background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgiY3RxQTMWCJCz51qZE5PXq5h7JK0rU9qj3mQTaJPPlcX3xg_aMdlMqffi6nvSelWn4j8DW6vL86W8LrrXdQdc5b3wwUVkxCn2ZIMM0S7RHhkCSPctuEo-HgXYjhKPbKalnQce6UhRIc/s1600/green-black-side.gif) ;<br />
background-position:;<br />
background-repeat:repeat-y;<br />
margin: 0 20px;<br />
padding: 20px 20px 20px 50px;<br />
color:#C7CACF;<br />
font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman";<br />
}<br />
.post blockquote p {<br />
margin: 0;<br />
padding-top: 10px;<br />
}</blockquote>
</div>
<div>
<h4>
<br /></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:<br />
<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 <b>Template </b>> <b>Customize </b>> <b>Advanced </b>> <b>Add CSS</b>. </div>
<div>
<br /></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 <b>Template </b>> <b>Edit HTML</b> and paste the code just above the<b> ]]></b:skin></b> 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{<br />
counter-reset: li;<br />
list-style: none;<br />
*list-style: decimal;<br />
padding: 0;<br />
margin-bottom: 4em;<br />
font: 13px 'trebuchet MS', 'lucida sans'; /* font size of each element */<br />
text-shadow: 0 1px 0 rgba(255,255,255,.5);<br />
}<br />
.post ol li{<br />
position: relative;<br />
display: block;<br />
padding: .4em .4em .4em .8em;<br />
*padding: .4em;<br />
margin: .5em 0 .5em 4.5em;<br />
text-decoration: none;<br />
}<br />
.post ol li:before{<br />
content: counter(li);<br />
counter-increment: li;<br />
position: absolute;  <br />
left: -30px;<br />
top: 50%;<br />
margin-top: -1em;<br />
background: #bada55; /* background color of the numbers */<br />
height: 2em;<br />
width: 2em;<br />
line-height: 2em;<br />
text-align: center;<br />
font-weight: bold;<br />
}<br />
.post ol li:after{<br />
position: absolute;<br />
content: '';<br />
left: -5px;<br />
margin-top: -.7em;  <br />
top: 50%;<br />
width: 0;<br />
height: 0;<br />
border-top: 8px solid transparent;<br />
border-bottom: 8px solid transparent;<br />
border-left:8px solid #bada55; /* background color of the right arrow*/<br />
}</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">
<span style="font-family: Times, Times New Roman, serif; font-size: large;"><b>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.</b></span><br />
<br />
<h4 style="text-align: left;">
Preliminary steps: Add the gadget, if you haven't done it yet.</h4>
1. Select the "<b>Layout</b>" tab and add the "<b>Popular Posts</b>" gadget in that part of your blog you want to appear, such as in your sidebar, by clicking on "<b>Add a Gadget</b>".<br />
<br />
2. Configure the widget to show only the post titles. You can do this by clicking on the "<b>image thumbnail</b>" and "<b>snippet" checkboxes</b>, as shown in the following image.<br />
<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;">
<br /></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;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
2. Select the "<b>Template</b>" tab, then click on <b>Customize </b>> <b>Advanced </b>> <b>Add CSS</b> and then paste the CSS style that you like the most.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></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;">
<br /></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;">
<br /></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;">
<br /></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;">
<br /></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;">
<br /></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;">
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"> #PopularPosts1 h2{</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">padding:7px 0 3px 0;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">width:100%;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">margin-bottom:10px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">font-size:1.3em;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">text-indent:-12px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">font-size:18px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">text-align:center;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">color: </span><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;"><b>#757575</b></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">; </span><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 */</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 ul{</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">list-style:none;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">counter-reset:li;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">padding:8px 0px 1px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">left:-7px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">width:290px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 li{</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">position:relative;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">margin:0 0 10px 0;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">padding: 3px 2px 0 17px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">left:-5px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">width:285px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 ul li{</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">background: #eee;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">position: relative;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">display: block;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">padding: .4em .2em .4em 2em;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">*padding: .2em;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">margin: .5em 0;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">background: #ddd;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">text-decoration: none;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">border-radius: .3em;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">transition: all .3s ease-out;   </span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 ul li:before{</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">content: counter(li);</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">counter-increment: li;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">position: absolute; </span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">top: 50%;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">margin: -1.3em;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">height: 2em;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">width: 2em;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">line-height: 2em;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">font-size: 15px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">color: </span><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;"><b>#fff</b></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">; </span><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 */</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">background: </span><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;"><b>#FB8835</b></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">; </span><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 */</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">border: .2em solid </span><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;"><b>#fff</b></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">; </span><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 */</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">-webkit-box-shadow: 0 8px 5px -7px #888;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">-moz-box-shadow: 0 8px 5px -7px #888;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">box-shadow: 0 8px 5px -7px #888;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">text-align: center;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">font-weight: bold;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">border-radius: 2em;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">position: absolute;   </span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">left: 0;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">transition: all .3s ease-out;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 ul li:hover{</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">background: #eee;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 ul li:hover:before{</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">transform: rotate(360deg);   </span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 ul li a{</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">font: </span><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;"><b>14px </b></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">Georgia, serif; </span><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 */</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">text-shadow: 0 -1px 2px #fff;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">color: #444;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">display:block;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">min-height:25px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">text-decoration:none;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">text-transform: uppercase;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 ul li a:hover{</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">color: #444;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span></div>
<div>
<br /></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>
<span style="font-family: Times, Times New Roman, serif;"><br /></span>
<br />
<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;">
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"> #PopularPosts1 h2{</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">position:relative;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">padding:8px 10px 6px 10px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">width:100%;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">margin-bottom: 5px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">font-size:17px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">color:</span><b style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><span style="border: none; color: #3d85c6; list-style: none; margin: 0px; outline: none; padding: 0px;">#757575</span></b><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">; </span><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 */</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">text-align:left;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 ul{</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">list-style:none;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">counter-reset:li;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">padding:10px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">left:-8px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">width:100%;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 li{ </span><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 */</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">width:100%;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">position:relative;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">left:0;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">margin:0 0 1px 12px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">padding:4px 5px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 ul li:before{</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">content: counter(li);</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">counter-increment: li;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">position: absolute; </span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">left: -30px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">top: 50%;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">margin-top: -13px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">background: </span><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;"><b>#8E8E8E</b></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">; </span><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 */</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">height: 1.9em;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">width: 2em;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">line-height: 2em;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">text-align: center;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">font-weight: bold;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">color: #fff;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">font-size: 14px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 ul li:after{</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">position: absolute;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">content: '';</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">left: -2px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">margin-top: -.7em; </span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">top: 50%;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">width: 0;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">height: 0;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">border-top: 8px solid transparent;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">border-bottom: 8px solid transparent;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">border-left:10px solid </span><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;"><b>#8E8E8E</b></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">; </span><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*/</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 ul li a{</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">color: #444;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">text-decoration: none;   </span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">font-size:15px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 ul li {</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">position: relative;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">display: block;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">padding: .4em .4em .4em .8em;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">*padding: .4em;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">margin: .5em 0 .5em 0.4em;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">background: #ddd;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">transition: all .3s ease-out;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">text-decoration:none;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">transition: all .1s ease-in-out;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 ul li:hover{</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">background: </span><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;"><b>#eee</b></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">; </span><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 */</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}   </span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 ul li a:hover{</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">color:</span><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;"><b>#444</b></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">; </span><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 */</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">margin-left:3px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span></div>
<div>
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><br /></span></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;">
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 h2{</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">position:relative;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">right:-2px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">padding:8px 63px 6px 17px; </span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">width:100%;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">margin:0;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">font-size:16px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">background:</span><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;"><b>#4F4F4F</b></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">; </span><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 */</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">color:</span><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;"><b>#f2f2f2</b></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">; </span><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 */</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">text-align:left;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">text-indent:18px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 h2:before{</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">position:absolute;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">content:"";</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">top:36px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">right:0px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">width: 0px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">height: 0px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">border-bottom:12px outset transparent;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">border-left:12px solid #000000; </span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 h2:after{</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">position:absolute;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">content:"";</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">top:-6px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">left:-5px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">width: 0px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">height: 0px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">border-bottom:24px outset transparent;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">border-top:24px outset transparent;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">border-left:24px solid </span><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;"><b>#ffffff</b></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">; </span><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 */</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 ul{</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">list-style:none;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">counter-reset:li;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">padding:10px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">left:-8px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">width:100%;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 li{ </span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">width:100%;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">position:relative;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">left:0;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">margin:7px 0 16px 12px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">padding:10px  4px 0 5px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 ul li:before{ </span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">content:counter(li);</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">counter-increment:li;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">position:absolute;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">top:-2px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">left:-20px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">font-size:35px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">width:20px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">color:#888888; </span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span><br />
<br style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;" />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 ul li a{</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">display:block;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">font-size:</span><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;"><b>16px</b></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">; </span><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</span> */</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">color:</span><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;"><b> #666</b></span><span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">; </span><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 */</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">text-decoration:none;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">transition: all .1s ease-in-out;font-weight: bold;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 ul li a:hover{</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">color:#3366FF;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">margin-left:3px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span></div>
</div>
<div>
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><br /></span></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;">
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"> #PopularPosts1 h2{</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">padding:8px 10px 3px 0;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">width:100%;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">margin:0;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">font-size:16px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">position:relative;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">left:-20px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">display:block;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">border-bottom:2px solid #ccc;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 ul{</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">list-style:none;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">counter-reset:li;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">padding:10px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">width:100%;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 li{ /* Styles of each element */</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">width:100%;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">position:relative;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">left:0;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">margin:0 0 6px 10px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">padding:4px 5px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 ul li:before{</span><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 */</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">content:counter(li);</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">counter-increment:li;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">position:absolute;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">top:3px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">left:-39px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">font-size:21px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">width:28px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">height:28px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">border-radius: 50%;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">color:#777;</span><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 */</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">border: 2px solid #ddd;</span><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 */</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">padding:0;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">text-indent:9px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 ul li a{</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">display:block;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">position:relative;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">left:-45px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">width:100%;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">margin:0;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">min-height:28px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">padding: 5px 3px 3px 39px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">color:#333; </span><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 */</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">text-decoration:none;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">font-size:14px; </span><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 */</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">font-style: italic;</span><br />
<br style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;" />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#PopularPosts1 ul li a:hover{</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">color:#3366ff;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">margin-left:3px;</span><br />
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">}</span></div>
</div>
<ol style="text-align: left;">
</ol>
</div>
<br />
<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>
<br /></div>
<blockquote class="tr_bq">
 /*--- WBT Popular Posts --- */<br />
.popular-posts ul {<br />
padding-left: 0px;<br />
counter-reset: popcount;<br />
}<br />
.popular-posts a {<br />
color: #777;<br />
}<br />
.popular-posts a:hover {<br />
color: #111;<br />
}<br />
.popular-posts ul li:before {<br />
list-style-type: none;<br />
margin-right: 10px;<br />
padding: 0.3em 0.6em;<br />
counter-increment: popcount;<br />
content: counter(popcount);<br />
color: #FFF;<br />
position: relative;<br />
float: left;<br />
font: italic bold 15px Tahoma;<br />
margin-left:5px;<br />
background: #ee504d;<br />
margin-top:-2px;<br />
border: 2px solid #EEE;<br />
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3); <br />
}<br />
.popular-posts ul li {<br />
border: 1px solid #eaeaea;<br />
background:#fff;background:-moz-linear-gradient(top,#fff 0%,#f2f2f2 100%);<br />
font: normal 12px verdana;<br />
height: 30px;<br />
-moz-transition: all 0.700s ease-out;<br />
-o-transition: all 0.700s ease-out;<br />
-webkit-transition: all 0.700s ease-out;<br />
-ms-transition: all 0.700s ease-out;<br />
transition: all 0.700s ease-out;<br />
}<br />
.popular-posts ul li:hover {<br />
border: 1px dashed #bbbbbb;<br />
-moz-transition: all 0.700s ease-out;<br />
-o-transition: all 0.700s ease-out;<br />
-webkit-transition: all 0.700s ease-out;<br />
-ms-transition: all 0.700s ease-out;<br />
transition: all 0.700s ease-out;<br />
}<br />
.popular-posts ul li a:hover {<br />
text-decoration:none;<br />
color: #000;<br />
-moz-transition: all 0.700s ease-out;<br />
-o-transition: all 0.700s ease-out;<br />
-webkit-transition: all 0.700s ease-out;<br />
-ms-transition: all 0.700s ease-out;<br />
transition: all 0.700s ease-out;<br />
}</blockquote>
<br />
<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>
<br /></div>
<div>
<blockquote class="tr_bq">
/*--- WBT Popular Posts --- */<br />
.popular-posts ul {<br />
padding-left: 0px;<br />
counter-reset: popcount;<br />
}<br />
.popular-posts a {<br />
color: #777;<br />
}<br />
.popular-posts a:hover {<br />
color: #111;<br />
}<br />
.popular-posts ul li:before {<br />
list-style-type: none;<br />
margin-right: 10px;<br />
padding: 0.3em 0.6em;<br />
counter-increment: popcount;<br />
content: counter(popcount);<br />
color: #FFF;<br />
position: relative;<br />
float: left;<br />
font: italic bold 15px Tahoma;<br />
margin-left:5px;<br />
background: #56c55f;<br />
border-radius: 25px 25px 25px 25px;<br />
border: 2px solid #EEE;<br />
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);<br />
margin-top:-2px;<br />
}<br />
.popular-posts ul li {<br />
border: 1px solid #eaeaea;<br />
background:#fff;background:-moz-linear-gradient(top,#fff 0%,#f2f2f2 100%);<br />
font: normal 12px verdana;<br />
height: 30px;<br />
-moz-transition: all 0.700s ease-out;<br />
-o-transition: all 0.700s ease-out;<br />
-webkit-transition: all 0.700s ease-out;<br />
-ms-transition: all 0.700s ease-out;<br />
transition: all 0.700s ease-out;<br />
}<br />
.popular-posts ul li:hover {<br />
border: 1px dashed #bbbbbb;<br />
-moz-transition: all 0.700s ease-out;<br />
-o-transition: all 0.700s ease-out;<br />
-webkit-transition: all 0.700s ease-out;<br />
-ms-transition: all 0.700s ease-out;<br />
transition: all 0.700s ease-out;<br />
}<br />
.popular-posts ul li a:hover {<br />
text-decoration:none;<br />
color: #000;<br />
-moz-transition: all 0.700s ease-out;<br />
-o-transition: all 0.700s ease-out;<br />
-webkit-transition: all 0.700s ease-out;<br />
-ms-transition: all 0.700s ease-out;<br />
transition: all 0.700s ease-out;<br />
}</blockquote>
</div>
</div>
<br />
<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 ...