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 :

WEB IMAGE DOWNLOADER

TEXT COMPARE OR DUPLI TEXT FINDER

BLOCK JAVA SCRIPT BY GOOGLE CHROME

MOUSE COORDINATES IN JAVA SCRIPT

RELATED POST WIDGET LIST WITHOUT TH...

DYNAMIC VIEWS BLOGGER TEMPLATE

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...
?
+
X
Recommended for you
Loading..
Related Post for POPULAR POST WIDGET FLOAT LEFT WITH HTML JAVA CODE WIDGET
RECENT OR FEATURED POST SLIDER AFTER FOOTER ------------------------------------------------------------------------------------------------------------- COPY AND POST CODE READ MORE: http://fbgadgets.blogspot.co.uk/2…
SHOPPING CART BLOGGER TEMPLATE PART 1 READ MORE: ------------------------------------------------------------------------------------------------------------ http://fbgadgets.blogspot.co.uk/2014/08/shopping-cart-bl…
POST LOADER TEMPLATE ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE ---------------------------------------…
RECENT/FEATURED POST THUMBNAIL IMAGE IN SIDEBAR ---------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE -----------------------------------------------------…
Dino Pairs Matching Game ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.…
Drag and Drop Practice Game With Image ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.…
RELATED POST WIDGET FRONT SCREEN TEMPLATE ---------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE ------------------------…
DRAG AND DROP IMAGES ABOVE BOX TO BELOW BOX WITH JQUERY ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.…
IMAGE SCROLL BOX WITH MOUSE CURSOR ----------------------------------------------------------------------------------------------------- SAVE AS BELOW CODE IN HTML PAGE READ MORE: http://www.freebits.co.u…
DRAG AND DROP HTML GAME ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE:…
NEWS TICKER BLOGGER TEMPLATES ---------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODEIN BLOGGER TEMPLATE -----------------…
Popular Posts Widget for Blogger Tweak ---------------------------------------------------------------------------------------------------------- 1- ADD POPULAR POST WIDGET IN BLOG 2- ADD HTML/JAVA WIDGET IN BLOG A…
ONLINE ZIP OPNER ---------------------------------------------------------------------------------------------------------- FIND THIS RED WORD IN GOOGLE online zip opener READ MORE: http://onl…
Drag and Drop Practice Game With Image ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.c…
SYNTAX HIGHLIGHTER ON LINE FOR BLOGGER ---------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.u…
Sprite Sheet Animation ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.…
ADD POP UP REMOVER STEP 2: Remove FocusBase pop-up ads from Internet Explorer, Firefox and Google Chrome with AdwCleaner The AdwCleaner utility will scan your computer and web browser for …
POPULAR POST WIDGET DIFFERENT STYLES ------------------------------------------------------------------------------------------------------ STYLE 1: ---------------------------------------------------------------…
WEBSITE TRANSLATOR AND THUMBNAIL Read More: http://www.worldlingo.com/en/products/instant_website_translator.html http://www.makeathumbnail.com/thumbnail.php http://www.sciweavers.org/free-online-web-to-im…
MAKE DLL FILE AND OPEN IN VISUAL BASIC 2008-2010 READ MORE: ----------------------------------------------------------------------------------------------------------------------- http://www.solvusoft.com/en/file-ex…
DRAG AND DROP PRACTICE GAME WITH IMAGE ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspo…
POPULAR POST SCROLL IN SIDEBAR TEMPLATE -------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE --------------------------------------------…
DRAG AND DROP HTML GAME ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogs…
DRAG AND DROP HTML GAME ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.…
RECAPTCHA KEY CONTCAT FORM FOR BLOGGER ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE READMORE: http://kontactr.com/ https…
DINO PAIRS MATCHING GAME ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot…
PAGE NAVIGATION WITH TITLE AND THUMBNAIL IN BLOG ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE RED JAVA CODE AND JAVA FILE LINK PAG…
DRAG AND DROP HTML GAME ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.c…
DRAG AND DROP IMAGES ABOVE BOX TO BELOW BOX WITH JQUERY ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogs…
UnityAssetsExplorer Read More: https://yadi.sk/d/pQCvUUC02D3aY …
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE --------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2014/08/syntax-highlight…
AUTOMATION ANY WEBSITES ------------------------------------------------------------------------------------------------------ READ MORE: https://www.automationanywhere.com/webdataext?r=google&w=…
RELATED POST WIDGET LIST SHAPE ---------------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2013/12/n-relate-pos…
How to open a .DLL or .EXE file in Resource Editor READ MORE: ---------------------------------------------------------------------------------------------------------- http://www.solvusoft.com/en/file-extensions/file-extensio…
HOW TO GET MALWARE ADD POPUP WITHOUT SOFTWARE --------------------------------------------------------------------------------------------------------- STEP 1: GO TO WINDOW TASK MANAGER STEP 2: OPEN FILE LOCATION AND DE…
POST LOADER TEMPLATE -------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE --------------------------------------------…
JAVA COLOR PICKER WITH jQuery UI Slider - Colorpicker jQuery UI Selectable - Serialize #red, #green, #blue { float: left; clear: left; width: 300px; margin: 15px; } #swatch { width: 1…
CARD GAMES WITH DRAG AND DROP WITH JQUERY AND HTML ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.…
FANCY BOX JS FIDDLE - jsFiddle demo //![CDATA[ $(window).load(function(){ $(document).ready(function() { $(".fancybox").fancybox({ openEffect: 'none', closeEffe…
DRAG AND DROP HTML GAME ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.c…
DRAG AND DROP PRACTICE GAME WITH IMAGE ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.c…
DRAG AND DROP WITH JQUERY AND HTML TUTORIAL ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.…
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.