<div class="tab_container">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1"><i class="fa fa-code"></i><span>1</span></label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2"><i class="fa fa-pencil-square-o"></i><span>2</span></label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3"><i class="fa fa-bar-chart-o"></i><span>3</span></label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4"><i class="fa fa-bar-chart-o"></i><span>4</span></label>
<section id="content1" class="tab-content">
<h3>Headline 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.</p>
</section>
<section id="content2" class="tab-content">
<h3>Headline 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="content3" class="tab-content">
<h3>Headline 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="content4" class="tab-content">
<h3>Headline 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</div>
Go to Layout -> Select "Add a Gadget" and take Popular Posts Widget from the Widget List appear.
Give Title of widget, select how the popular posts should be appeared(in Month,or Week or All time) and click Save
Paste just above ]]></b:skin>
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
How to RUN Select All Paste This Code Below ]]></b:skin>
<script type='text/javascript'>
function fnSelect(objId) {
fnDeSelect();
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(objId));
range.select();
}
else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(objId));
window.getSelection().addRange(range);
}
}
function fnDeSelect() {
if (document.selection) document.selection.empty();
else if (window.getSelection)
window.getSelection().removeAllRanges();
}
</script>
Posting With this Code
<pre data-codetype="HTML" id="code2">
<div align="right">
<input onclick="javascript:fnSelect('code2');" type="button" class="btHTML" value="Select All" /></div>
..... your code post here .......
</pre>
DEMO : Like This Writing Code into Text Area on This Page
Put Anywhere You Like
<script>
var linkBanner1="http://dizoo.blogspot.com";
var linkBanner2="http://kakikoki.blogspot.com";
var linkBanner3="http://isoopo.blogspot.com";
var imgBanner1="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZePCzjUfWQrFOS5KQ_A8ZGpLMRynxDIiceA1i00KEtpm_T1rIDSUoUgDrHscPcc4KEszBryuZ9_lQVXGu1GDby5gYIwkD2r9z02r4Ai0e0qAlLsaC-tAxsSx8Va-Jj91p4zbq_WPeow/s1600/dizoo.jpg";
var imgBanner2="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiY9xwRb17KNvcnaCXQ3X-ILparde8YcBLlnMps4jWfGdBL-9Rh2EgqhUPPzWCYmKTcfBjWRhamzWCfuDlUJ-c6hOl60cfo12HPtMhI78LVe7me9TOYLYivziIO0SlvtKwMgXBwyaLopI/s1600/bnnrkako.jpg";
var imgBanner3="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioglVSiQG1xDGJkuS6QSqfVMEwlEGOqqFv3AUqSKIa4p7e2IfMR0CkpoUz-eD1ayAvGeRayOsjDZqHvKZ-ss5MnuJPOf1-P93ym45Vk6ViA6jaa_rh_CKjQaexKIB6Pib-BLBP8tIFPZk/s1600/isoopo-bnnr.jpg";
</script>
<script>
document.write("<a href="javascript:surfToSponsor();" title="Click here..."><img id="banner" src=""/></a>");
var sponsor = 1;
function surfToSponsor(){
if (sponsor==1){window.location.href = linkBanner1;}
if (sponsor==2){window.location.href = linkBanner2;}
if (sponsor==3){window.location.href = linkBanner3;}
}
function changeSponsor(){
if (++sponsor > 3){sponsor = 1;}
if (sponsor==1){document.getElementById('banner').src = imgBanner1;}
if (sponsor==2){document.getElementById('banner').src = imgBanner2;}
if (sponsor==3){document.getElementById('banner').src = imgBanner3;}
window.setTimeout('changeSponsor();',1500);
}
window.onLoad=window.setTimeout('changeSponsor();',1500);
</script>