Monday, 7 July 2014
POPULAR POST WIDGET FLOAT LEFT WITH HTML JAVA CODE WIDGET
--------------------------------------------------------------------------------------------------------
ADD HTML JAVA WIDGET AND PASTE BELOW CODE
--------------------------------------------------------------------------------------------------------
<style type="text/css">
@charset "utf-8";
*, td, th, input, textarea, select, button {
font-family: Arial,Helvetica,sans-serif;
margin: 0;
padding: 0;
}
a:focus, select, input, textarea, button {
outline: medium none;
}
select {
padding: 1px;
}
ul {
list-style: none outside none;
}
img {
display: block;
}
a img {
border: medium none;
}
a {
text-decoration: none;
}
a {
color: #1D7FB4;
}
a:hover {
color: #FF250F;
}
a.black:hover {
color: #FF250F !important;
}
.widget {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLQgaUmovhCdSO_ltTeVQ4d9zWifVJilD-196It4KieoJyZBESDk-ROCM-avMOVAyvTXcB4VOYzQQL3gce-Rdc8yU6ZUJp2dwsftYpQleQirZD4YhBBoOhG1NflLAEPrRvReStsjV5jcJy/") repeat scroll left top transparent;
border: 1px solid #B5B5B5;
text-align: left;
}
.widget .header {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLmEdd585a94fuPhgteDIu4xWGXrL01nrZRsmnMvbbq0cVDmoQeg07gdpXzcikdb666LamzrFJ_cWS9KlLzPADo4GzFoRmDmQgA8BoRLvHT8Ah8tcAD5Bu9X803raMS9bU07iAt5BvZnng/") repeat scroll left top transparent;
padding: 5px;
}
.widget .header img {
float: left;
margin-right: 7px;
vertical-align: middle;
}
.widget h2 {
border: medium none;
color: #FFFFFF;
font-family: 'Open Sans',Arial,Helvetica,sans-serif;
font-size: 22px;
font-weight: normal;
margin: 0;
padding: 0;
text-transform: uppercase;
}
.widget .header h2 a {
color: #FFFFFF;
display: block;
font-family: 'Open Sans',Arial,Helvetica,sans-serif;
text-decoration: none;
}
.widget .header h2 a strong {
font-family: 'Open Sans',Arial,Helvetica,sans-serif;
}
#right_column .widget h3 {
border-bottom: 1px solid #B5B5B5;
color: #9F6101;
font-family: 'Open Sans',Arial,Helvetica,sans-serif;
font-size: 16px;
font-weight: normal;
margin: 10px 10px 0;
padding: 0 0 10px;
text-transform: uppercase;
}
.widget .header h3 a {
color: #9F6101;
display: block;
padding-top: 4px;
text-decoration: none;
text-shadow: 1px 1px 1px #FFFFFF;
}
.widget ul li {
padding: 10px;
}
.mp-item a, .mpl-item a {
text-decoration: none;
}
.mp-item {
background: none repeat scroll 0 0 #EDEAE9;
display: table;
height: 65px;
margin: 10px 10px 0;
padding: 0 !important;
width: 280px;
}
.mp-item .ablock {
display: block;
height: 65px;
position: absolute;
width: 280px;
}
.mp-item .number {
background: none repeat scroll 0 0 #454545;
color: #FFFFFF;
display: block;
float: left;
font-size: 18px;
height: 25px;
margin-right: 1px;
padding-right: 2px;
padding-top: 40px;
text-align: right;
width: 21px;
}
.mp-item:hover > .number {
background: none repeat scroll 0 0 #BB0004;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) inset;
}
.mp-item img {
height: 65px;
padding-right: 10px;
width: 65px;
}
.mp-item .text {
color: #050505;
float: left;
font-size: 13px;
height: 60px;
line-height: 19px;
overflow: hidden;
padding-top: 5px;
text-decoration: none;
vertical-align: middle;
width: 178px;
}
.mp-item:hover > a img {
opacity: 0.9;
}
#popular {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiISEOtU-jMCIfgXDobyvO-ZlgpAoDwCzhZJDp5e6aPmfSdn5ZNh-uOw0AnH2n7mcJSrEGWHEWGHZXHAPIoP_Y80qlltp1Spt-df9esC_NQyr1FC4RxFtOqe6dS81UhhZ9rEwnntNd-3iOJ/") no-repeat scroll 0 -134px transparent;
border-bottom: 1px solid #CCCCCC;
display: block;
height: 20px;
margin: 5px 15px 0;
padding: 4px 0;
text-align: left;
}
#popular a, #most_recent a, #most_commented a {
color: #777777;
display: block !important;
font-size: 11px;
padding: 2px 0 0 25px;
text-align: left;
text-decoration: none;
}
#popular:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiISEOtU-jMCIfgXDobyvO-ZlgpAoDwCzhZJDp5e6aPmfSdn5ZNh-uOw0AnH2n7mcJSrEGWHEWGHZXHAPIoP_Y80qlltp1Spt-df9esC_NQyr1FC4RxFtOqe6dS81UhhZ9rEwnntNd-3iOJ/") no-repeat scroll 0 -134px #EDEAE9;
}
#most_recent:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiISEOtU-jMCIfgXDobyvO-ZlgpAoDwCzhZJDp5e6aPmfSdn5ZNh-uOw0AnH2n7mcJSrEGWHEWGHZXHAPIoP_Y80qlltp1Spt-df9esC_NQyr1FC4RxFtOqe6dS81UhhZ9rEwnntNd-3iOJ/") no-repeat scroll 0 -155px #EDEAE9;
}
#most_commented:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiISEOtU-jMCIfgXDobyvO-ZlgpAoDwCzhZJDp5e6aPmfSdn5ZNh-uOw0AnH2n7mcJSrEGWHEWGHZXHAPIoP_Y80qlltp1Spt-df9esC_NQyr1FC4RxFtOqe6dS81UhhZ9rEwnntNd-3iOJ/") no-repeat scroll 0 -203px #EDEAE9;
}
#popular a:hover, #most_recent a:hover, #most_commented a:hover {
color: red;
}
.mpl-item a {
text-decoration: none;
}
.mpl-item {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) inset;
float: left;
height: 140px;
margin: 15px 0 0 15px;
overflow: hidden;
padding: 0 !important;
width: 150px;
}
.mpl-item:hover {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset;
}
.mpl-item .ablock {
display: block;
height: 140px;
position: absolute;
width: 150px;
}
.mpl-item .number {
background: none repeat scroll 0 0 #BB0004;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) inset;
color: #FFFFFF;
display: block;
float: left;
font-size: 18px;
height: 25px;
margin-right: 1px;
margin-top: 60px;
padding-right: 5px;
padding-top: 5px;
position: relative;
text-align: right;
width: 25px;
z-index: 3;
}
.mpl-item:hover > .number {
color: #FFFFFF;
}
.mpl-item img {
height: 140px;
position: absolute;
width: 150px;
z-index: 1;
}
.mpl-item .text {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgssoFWViWk-RKpoasctkUnZ0Fx1vP3wQJgdHEOAq5_04yi2RgdqWmeG3cW2CPI4zEmoQCgPh0GXvymqqV_v4F0NkY8kSS385DkTBhkvXMTTcbjJkDpHdOZKJ2WsKQCiiIZD5GqIIqPtB6/") repeat scroll 0 0 transparent;
color: #FFFFFF;
float: left;
font-size: 12px;
height: 60px;
line-height: 15px;
overflow: hidden;
padding: 3px 0 0 5px;
position: relative;
text-decoration: none;
vertical-align: middle;
width: 145px;
z-index: 3;
}
.mpl-item:hover > .text {
background: none repeat scroll 0 0 #BB0004;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) inset;
}
#most_popular_home .pagination {
margin-left: 580px;
padding: 10px 5px 0 0;
position: absolute;
}
#most_popular_home .pagination .active, #most_popular_home .fpaginate .active, #most_popular_home .pagination a:hover, #most_popular_home .fpaginate a:hover {
background: none repeat scroll 0 0 #BB0004;
}
#most_popular .pagination {
margin-top: -10px;
padding-right: 5px;
}
#most_popular .pagination .active, #most_popular .fpaginate .active, #most_popular .pagination a:hover, #most_popular .fpaginate a:hover {
background: none repeat scroll 0 0 #BB0004;
}
.topa {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZpmb-yHg_oPjHjSlq840G0yVoUHBlkGirKsW3CPcu60T9OgDpRPqII3hMbBHpDYzOeH8JAWmAi0fF6_Ueull6Rp3bozmTR047hQ2oyHNnrLSc9rDIGSW_HkLizjB9K5W380BVIwlgOclE/") no-repeat scroll right center transparent;
color: #FFFFFF;
display: block;
font-size: 12px;
margin-left: 550px;
margin-top: 9px;
padding-right: 14px;
position: absolute;
text-decoration: none;
}
#PopularPosts1 {
width:680px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('#PopularPosts1 li.mpl-item').each(function (i) {
i = i+1;
text='<a class="number">'+i+'.</a>';
$(this).prepend(text);
});
});
//]]>
</script>
--------------------------------------------------------------------------------------------------------
STEP 2: FIND THESE LINES AND POPULAR POST
WIDGET CODE IN YOUR SIDE BAR
<b:section class='sidebar' id='sidebar' preferred='yes'></b:section>
----------------------------------------------------------------------------------------------------------
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<div class='header'>
<span class='icon block mp-icon'/>
<h2><strong>Most Popular </strong>stories<span class='clearfix'/></h2>
<div class='clearfix'/>
</div>
<ul>
<b:loop values='data:posts' var='post'>
<li class='mpl-item'>
<img expr:src='data:post.thumbnail'/>
<a class='ablock' expr:href='data:post.href'/>
<a class='text table-cell' expr:href='data:post.href'><data:post.title/></a>
<div class='clearfix'/>
</li>
</b:loop>
<div class='clearfix'/>
</ul>
<br/>
<span class='clearfix'/>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Related movie you might like to see :
FLASH PLAYER SWF FILE DOWNLOAD ARCH...
WHACK A RAT CSS GAME
GOOGLE FILTER BUTTON IN IMAGE SEARC...
BODY JS FILE LINK IN MAGENTO
INTENSO MAGENTO QUICK VIEW BUTTON
Magento Hello World Module (Extensi...
FEATURE POST WIDGET IN BLOG
IMPORT SQL CSV FILE ON PHPMYADMIN
Direct Link Generator CODE
Direct Links to your Files on Googl...
PHP CONTACT FORM WITH CAPTCHA
ON LINE JAVA LIBRARY
GOOGLE PROJECT HOSTING
PRESTASHOP THUMBNAIL WITH HOVER EFF...
GOOGLE CONSOLE
GOOGLE CHROME EXTENSION FILE SAVE O...
OPEN DESKTOP TEXT FILE BY COMMAND P...
CSS SLIDER WITHOUT JS
FLICKITY SLIDER SCROLL WITH RADIO N...
FLICKITY JS CSS SLIDER
Related Post for POPULAR POST WIDGET FLOAT LEFT WITH HTML JAVA CODE WIDGET
AFTER INSTALL PRESTASHOP MAKE NEW FOLDERS
PRESTA CSS JS FILE LINKS REMOVE BY DELETE FILES 
RENAME DOCS FOLDER IN PRESTASHOP
SSL WEBSITE CHECKER FOR FACEBOOK
PAGE NAVIGATION WITH TITLE AND THUMBNAIL BY HTML/JAVA WIDGET
PAGINATION IN BLOG
POPULAR POST WIDGET ADOSOSIVE STYLE
RENAME DOWNLOAD FOLDER IN PRESTASHOP
RENAME ADAPTER FOLDER IN PRESTASHOP
RENAME CSS FOLDER IN PRESTASHOP
AMAZON CLOUD DRIVE
POPULAR POST SCROLL IN SIDEBAR TEMPLATE
FREE SLL CERFICATE BY AZURE MICROSOFT FOR FACEBOOK
SHOPPING CART IN SIDEBAR TEMPLATE
Recommended Post Slide out for Blogger
HOME FEATURE TAB CHANGE IN PRESTASHOP
DRAG AND DROP MULTIPLE UPLOAD
PRESTASHOP HOME PAGE TAB BREAD CRUMBS STYLE
CHANGE MENU CSS COLOR IN PRESTASHOP
DEFAULT BOOT STRAP WORD IN 13 FILES PRESTASHOP 
BLOG FILE HOSTING GOOGLE PROJECT WITH TORTOISE SVN SOFTWARE
ABSOLUTE POPUP BOX WITH PRINT
Platinum Arts Sandbox Free 3D Game Maker
SHOPPING CART IN SIDEBAR TEMPLATE
UNITY 3D DECOMPILER OBFUSCATOR
PRESTASHOP THUMBNAIL WITH HOVER EFFECT
RENAME PDF FOLDER IN PRESTASHOP
ADD POP UP REMOVER
BLOGGER GRID LIST SHOPPING CART TEMPLATE
CANVAS GAMES TUTORIAL ON FACE BOOK
SELL YOUR APPS
Popular Posts Widget for Blogger Tweak
POST LOADER TEMPLATE 
25 JS FILES DELETE IN PRESTASHOP
RENAME CACHE FOLDER IN PRESTASHOP
MAKE WODPRESS THEME
BLOGGER GRID LIST SHOPPING CART TEMPLATE
Direct Link Generator CODE
GOOGLE PROJECT HOSTING
POPULAR POST WIDGET DIFFERENT STYLES
Facebook App With or Without SSL Certificate
POST LOADER TEMPLATE
BASIC TEXT OR SCROLL BOX OR IMAGE SRC HTML CODES
RENAME CORE FOLDER IN PRESTASHOP
RECENT/FEATURED POST THUMBNAIL IMAGE IN SIDEBAR
GENERIC BLOGGER TEMPLATE WITH CSS HEADER IMAGE AND PAGINATION
RENAME CONTROLLERS FOLDER IN PRESTASHOP
PAGE NAVIGATION WITH TITLE AND THUMBNAIL IN BLOG
FONT LINE FIND IN PRESTA SHOP FILE SEEK SOFTWARE
RECENT OR FEATURE POST LIST BADGE WIDGET WITH GOOGLE PROJECT 
RECAPTCHA REGISTER FORM
PHP CONTACT FORM WITH CAPTCHA
NEWS TICKER BLOGGER TEMPLATES
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.