RECENT/FEATURED POST THUMBNAIL IMAGE IN SIDEBAR

Monday, 12 May 2014

RECENT/FEATURED POST THUMBNAIL IMAGE IN SIDEBAR

RECENT/FEATURED POST THUMBNAIL IMAGE IN SIDEBAR

----------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE
--------------------------------------------------------------------------------------------------

<html>
<head>
<b:include data='blog' name='all-head-content'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Your Home Page Descriptions Here' name='description'/>
<b:else/>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
<meta content='Your Keywords Here' name='keywords'/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'/>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: RECENT POST THUMBNAIL WITH IMAGE IN SIDEBAR
Design by : FBGadgets
URL : http://fbgadgets.blogspot.co.uk/
----------------------------------------------- */

#navbar-iframe {
display:none !important;
}

a:link {
color:#4E4E4E;
text-decoration:none
}
a:visited {
color:#999999;
text-decoration:none
}
a:hover {
color:#0C0C0C;
text-decoration:none
}
a img {
border-width: 0
}

/* Header-----------------------------------------------*/
#header-wrapper {
margin:0;
padding:0;
color:white
}
#header {
margin:0 0 10px
}
#header h1,#header p {
margin:0;
padding:0;
line-height:1.2em;
text-transform:uppercase;
font-size:200%
}
#header a {
color:#666666;
text-decoration:none
}
#header a:hover {
color:#666666
}
#header .description {
margin:0;
padding:0;
text-transform:capitalize;
line-height:1.4em;
font:normal normal 100% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;
color:#252525
}
#header img {
margin-left:auto;
margin-right:auto
}
#header .title a {
text-decoration:none;
padding:0;
line-height:1.2em;
text-transform:uppercase;
color:#141414;
font-family: 'Open Sans Condensed',"Arial Narrow",Arial,sans-serif
}
/* Navigation----------------------------------------------- */
#nav {
width:280px;
margin-left:-40px;
margin-bottom:35px;
color:black
}
#nav ul {
margin:0;
padding:0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxSu4zr2QAVm-PxXQA77fGJ4w1tzPDt1cFQvMtgpNcXwiYun323rp8G3uwwiki36miCqlFON9wRdYhijdi9PoDCpOKi3SZtS4PHSqNvTmShnwnUcDzaYf_JugY89YBPUux1-5bfT3Q7pJi/s1600/border-h.png) left top repeat-x
}
#nav li {
list-style:none;
position:relative;
padding:0;
display:block;
margin:-1px 0 0 0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxSu4zr2QAVm-PxXQA77fGJ4w1tzPDt1cFQvMtgpNcXwiYun323rp8G3uwwiki36miCqlFON9wRdYhijdi9PoDCpOKi3SZtS4PHSqNvTmShnwnUcDzaYf_JugY89YBPUux1-5bfT3Q7pJi/s1600/border-h.png) left bottom repeat-x
}
#nav li a {
color:#141414;
font-size:12px;
display:block;
line-height:15px;
text-transform:uppercase;
letter-spacing:3px;
padding:6px 40px;
position:relative
}
#nav li a:hover {
background:#141414;
color: white
}
/* Outer-Wrapper----------------------------------------------- */
#outer-wrapper {
width:100%;
background-color:#F1F1F1;
margin:0 auto;
padding:0;
text-align:left;
font:12px/18px "Helvetica Neue",Helvetica,Arial,sans-serif;
color:#555
}
#left-wrapper {
position:fixed;
left:0;
top:0;
bottom:0;
z-index:100;
background:Gold;
width:200px;
padding:40px;
-webkit-box-shadow:0 0 15px rgba(0,0,0,.33);
-moz-box-shadow:0 0 15px rgba(0,0,0,.33);
box-shadow:0 0 15px rgba(0,0,0,.33)
}

#sidebar-wrapper {
word-wrap:break-word;
/* fix for long text breaking sidebar float in IE */
}
#sidebar-wrapper h2 {
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:12px;
text-transform:uppercase;
margin:0
}
#sidebar-wrapper .widget-content {
padding:0;
margin: 0 10px 10px
}
/* Headings----------------------------------------------- */
h1,h2,h3,h4,h5,h6 {
font-weight:bold;
padding:0;
text-transform:uppercase;
color:#141414;
font-family: 'Open Sans Condensed',"Arial Narrow",Arial,sans-serif
}

/* Posts-----------------------------------------------*/

/* Sidebar Content----------------------------------------------- */
.sidebar {
color:#666666;
line-height:1.5em
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0
}
.sidebar li {
margin:0;
padding-top:0;
padding-right:0;
padding-bottom:.25em;
padding-left:15px;
line-height:1.5em
}
.sidebar .widget {
padding:0;
margin:0 0 20px
}
.main .widget {
margin:0;
padding:0
}
.main .Blog {
border-bottom-width: 0
}

/* Footer----------------------------------------------- */
#footer {
width:auto;
clear:both;
margin:0 auto;
padding:2%;
color:white;
background-color:black;
text-transform:uppercase;
letter-spacing:.1em;
text-align:center;
display:block
}
img {
max-width:100%;
height:auto;
width:auto\9
}
#blog-pager {
position:fixed;
bottom:0;
right:0;
left:280px
}
#social-sidebar {
bottom:38px;
position:absolute;
width:200px;
padding:0
}
#socials-menu {
list-style:none;
padding:0;
margin:0;
margin-bottom:2px;
width:220px
}
#social-sidebar li {
float:left;
margin:0 10px 10px 0
}
#social-sidebar li a {
display:block;
width:20px;
height:20px;
text-indent:-9999px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBnsO_R60CU42XOKhBZ8Eoz44ilhzHT3kBqpF7ZId6vX376wjo9CqY2_aLsVfYYGOIgSdGKyke8ssRc8GyVSQ0jB2sKIo0aq8rloi7l7pnc610wDeAU78Lyy25PXRv_gB9VDKOHOqJ1UTL/s1600/social-icons.gif) no-repeat;
transition:opacity 0.2s linear;
-webkit-transition:opacity 0.2s linear;
-moz-transition:opacity 0.2s linear;
-o-transition:opacity 0.2s linear;
opacity:0.54;
filter:alpha(opacity=54)
}
#socials-menu li a:hover {
opacity:1;
filter:alpha(opacity=100)
}
#socials-menu li.facebook a {
background-position:0 0
}
#socials-menu li.twitter a {
background-position:-20px 0
}
#socials-menu li.pinterest a {
background-position:-60px 0
}
#socials-menu li.tumblr a {
background-position:-220px 0
}
#socials-menu li.flickr a {
background-position:-80px 0
}
#socials-menu li {
float:left;
margin:0 10px 10px 0
}
#socials-menu li.vimeo a {
background-position:-160px 0
}
#mini-gallery {
width:380px;
/* Tentukan lebar yang tepat sesuka hati atau buang saja deklarasi ini */ margin:0 auto;
font:normal 11px Verdana,Arial,Sans-Serif;
color:#494848;
padding:8px;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);
box-shadow:0 1px 3px rgba(0,0,0,0.4);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px
}
#mini-gallery .rp-item {
float:left;
display:inline;
position:relative;
margin:2px;
padding:0 0;
background:#fff url('') no-repeat 50% 50%;
width:72px;
height:72px
}
#mini-gallery .rp-item img {
width:72px;
height:72px;
border:none !important;
margin:0 0 !important;
padding:0 0 !important;
background:transparent !important;
display:none;
position:absolute;
left:0;
top:0
}
#mini-gallery .rp-item .rp-child {
position:relative;
top:250px;
left:350px;
z-index:1000;
width:200px;
background-color:white;
border-top:4px solid #000000;
-webkit-box-shadow:0 0 3px rgba(0,0,0,0.7);
-moz-box-shadow:0 0 3px rgba(0,0,0,0.7);
box-shadow:0 0 3px rgba(0,0,0,0.7);
padding:10px 15px;
overflow:hidden;
word-wrap:break-word;
display:block;
-webkit-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
opacity:0;
filter:alpha(opacity=0)
}
#mini-gallery .rp-item .rp-child h4 {
font-size:12px;
margin:0 0 5px;
color:#000000
}
#mini-gallery .rp-item:hover .hidden {
opacity:1;
top:80%;
left:90%;
filter:alpha(opacity=100)
}
#nav ul.submenu {
position:absolute;
left:100%;
top:0;
background-color:white;
border-left:2px solid black;
display:none
}
#nav ul.submenu li {
background:transparent
}
#nav ul.submenu li a {
font-size:10px;
padding:6px 20px;
letter-spacing:0
}
#nav li:hover>ul.submenu {
display:block
}
#nav li .rp-item a:hover {
background:transparent
}

.isinya {
width:67%;
text-align:justify;
float:left;
padding:20px 30px 20px 0;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQyTW9KxJc6faXYZSuz-fv7NYq_aIBwnUrXLnk9eJeGZE17ETvf1IHUiwQTS6bjjZ00yYOO1oFJilqudr1alz7sNPaHqx65Rn0JQaieifU6kgsBNYeEIlQbYiwvWp08uqLquYFfysGQtbM/s1600/LabelYellow.png) top right repeat-y
}
.infonya {
padding:20px 0 30px 30px;
float:left;
width:33%;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box
}

]]></b:skin>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
var numposts = 20,numchar = 300,rcFadeSpeed = 600,pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbyT-D8M5K4dPmwfZnEWR6vCvow2Bf-foNV4sOyZzgedirLlGQGJaQEdduy4m9i3h1tOmuH-CQU2uHAuHwU7cm6J7rQ6TgUlNWeYBQ1T9YZzhVvELeULDJ7bpMVvuwVF0VyXyCrk5kuVcO/s1600/no_image.jpg";function showrecentposts(json) {var entry = json.feed.entry;for (var i = 0; i < numposts; i++) {var posturl;for (var j = 0; j < entry[i].link.length; j++) {if (entry[i].link[j].rel == 'alternate') {posturl = entry[i].link[j].href;break;}}for (var l = 0; l < entry[i].link.length; l++) {if (entry[i].link[l].rel == "replies" && entry[i].link[l].type == "text/html") {cmnum = entry[i].link[l].title.split(" ")[0];break}}if ("content" in entry[i]) {var postcontent = entry[i].content.$t;} else if ("summary" in entry[i]) {var postcontent = entry[i].summary.$t;} else {var postcontent = "";}var re = /<\S[^>]*>/g;postcontent = postcontent.replace(re, "");if (postcontent.length > numchar) {postcontent = postcontent.substring(0, numchar) + '...';}var poststitle = entry[i].title.$t;if ("media$thumbnail" in entry[i]) {postimg = entry[i].media$thumbnail.url
} else {postimg = pBlank}document.write('<div class="rp-item"><a href="' + posturl + '"><img src="' + postimg + '" alt="thumb" /></a>');document.write('<div class="rp-child hidden"><h4>' + poststitle + '</h4>');document.write(postcontent + '</div>');
document.write('</div>');}}var i = 0,int = 0;$(window).bind("load", function() {var int = setInterval("doThis(i)", 400);});
function doThis() {var imgs = $('div.rp-item img').length;if (i >= imgs) {clearInterval(int);}$('div.rp-item img:hidden').eq(0).fadeIn(400);i++;}function showLabels(json) {var label = json.feed.category;for (var i = 0; i < label.length; i++) {document.write('<li><a href="/search/label/' + encodeURIComponent(label[i].term) + '" target="_blank">' + label[i].term + '</a></li>');}}
//]]>
</script>

</head>

<body>
<div id='outer-wrapper'>
<div id='left-wrapper'>
<header id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Arabic Babes (Header)' type='Header'>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "REPLACE"'>
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display:block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display:block'/>
</a>
</div>
<b:else/>
<div class='titlewrapper' style='background:transparent'>
<h1 class='title' style='background:transparent;border-width:0'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</b:if>
<b:else/>
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
</header>
<nav id='nav'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/'>Recent Post</a>
<ul class='submenu subrecentpost'>
<div id='mini-gallery'><script src='/feeds/posts/default?max-results=20&orderby=published&alt=json-in-script&callback=showrecentposts'/><div style='clear:both'/></div>
</ul>
</li>
<li><a href='/'>Categories</a>
<ul class='submenu subcategories'>
<script src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showLabels'/>
</ul></li>
<li><a href='/'>Comments</a></li>
</ul>
</nav>
<div id='social-sidebar'>
<ul class='clearfix' id='socials-menu'>
<li class='facebook'><a href='#' target='_blank'>Facebook</a> </li>
<li class='twitter'> <a href='#' target='_blank'>Twitter</a></li>
<li class='pinterest'><a href='#' target='_blank'>Pinterest</a> </li>
<li class='tumblr'> <a href='#' target='_blank'>Tumblr</a> </li>
<li class='flickr'><a href='#' target='_blank'>Flickr</a></li>
<li class='behance'><a href='#' target='_blank'>Behance</a> </li>
<li class='vimeo'> <a href='#' target='_blank'>Vimeo</a> </li>
</ul>
</div>
<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</aside>
</div>

<div class='clear'> </div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
<div class='blog-posts hfeed'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>
</div>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='comment-form' var='post'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='comment_count_picker' var='post'/>
<b:includable id='comment_picker' var='post'/>
<b:includable id='comments' var='post'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='iframe_comments' var='post'/>
<b:includable id='mobile-index-post' var='post'/>
<b:includable id='mobile-main' var='top'/>
<b:includable id='mobile-nextprev'/>
<b:includable id='mobile-post' var='post'/>
<b:includable id='nextprev'/>

<b:includable id='post' var='post'>
<data:post.body/>
</b:includable>

<b:includable id='postQuickEdit' var='post'/>
<b:includable id='shareButtons' var='post'/>
<b:includable id='status-message'/>
<b:includable id='threaded-comment-form' var='post'/>
<b:includable id='threaded_comment_js' var='post'/>
<b:includable id='threaded_comments' var='post'/>
</b:widget>
</b:section>
</div>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</body>
</html>

------------------------------------------------------------------------------------------------------------

READ MORE:

http://fbgadgets.blogspot.co.uk/2014/05/recentfeatured-post-thumbnail-image-in_13.html
http://fbgadgets.blogspot.co.uk/2014/08/recent-or-feature-post-widget-in-tab.html