RANDOM POST CAMERA SLIDER IN BLOGGER

Friday, 28 February 2014

RANDOM POST CAMERA SLIDER IN BLOGGER

RANDOM POST CAMERA SLIDER IN BLOGGER
--------------------------------------------------------------------------------------------
Read More:
http://fbgadgets.blogspot.co.uk/2014/02/random-post-camera-slider-java-code.html
---------------------------------------------------------------------------------------------------

<html>
<head>
<b:include data='blog' name='all-head-content'/>
<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:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: RANDOM POST CAMERA SLIDER IN BLOGGER
Not Support Video Thumbnail
Design by : FBGadgets
URL : http://fbgadgets.blogspot.co.uk/
----------------------------------------------- */

]]></b:skin>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.camera_wrap a,.camera_wrap img,.camera_wrap ol,.camera_wrap ul,.camera_wrap li,.camera_wrap table,.camera_wrap tbody,.camera_wrap tfoot,.camera_wrap thead,.camera_wrap tr,.camera_wrap th,.camera_wrap td
.camera_thumbs_wrap a,.camera_thumbs_wrap img,.camera_thumbs_wrap ol,.camera_thumbs_wrap ul,.camera_thumbs_wrap li,.camera_thumbs_wrap table,.camera_thumbs_wrap tbody,.camera_thumbs_wrap tfoot,.camera_thumbs_wrap thead,.camera_thumbs_wrap tr,.camera_thumbs_wrap th,.camera_thumbs_wrap td {
background: none;
border: 0;
font: inherit;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
list-style: none;
}
.camera_wrap {
display: none;
float: left;
position: relative;
z-index: 0;
width: 96%;
padding: 4px;
background: #f3f3f3;
border: 1px solid #fff;
-webkit-box-shadow: 1px 1px 5px #c3c3c3;
-moz-box-shadow: 1px 1px 5px #c3c3c3;
-ms-box-shadow: 1px 1px 5px #c3c3c3;
-o-box-shadow: 1px 1px 5px #c3c3c3;
box-shadow: 1px 1px 5px #c3c3c3;
margin: 10px 0 0 2px;
}
.camera_wrap img {
max-width: none!important;
}
.camera_fakehover {
height: 100%;
min-height: 100px;
position: relative;
width: 100%;
z-index: 1;
}
.camera_src {
display: none;
}
.cameraCont,.cameraContents {
height: 100%;
position: relative;
width: 100%;
z-index: 1;
}
.cameraContents {
background: url(http://2.bp.blogspot.com/-sfvatxjJMJI/UUW_U9S0qYI/AAAAAAAAAfU/h5uFSInpZus/s1600/bg-cameracontents.png) repeat fixed;
position: relative;
height: 100%;
-webkit-box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.2), inset 0px -1px 5px rgba(0, 0, 0, 0.2);
box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.2), inset 0px -1px 5px rgba(0, 0, 0, 0.2);
}
.cameraSlide {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.cameraContent {
bottom: 0;
display: none;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.camera_target {
bottom: 0;
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
text-align: left;
top: 0;
width: 100%;
z-index: 0;
}
.camera_overlayer {
bottom: 0;
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
width: 100%;
z-index: 0;
}
.camera_target_content {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
.camera_target_content .camera_link {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNhPxhyphenhyphen3d7KyzCFXiHLJNgZHdIUZMGA4oiB71htei5EdsWhLJthXIuhTFZE3hwHg7GxLlsmD7M4sUr98n9_9i9jMG5fVIbK8eFW9i68Fc3bSyoot-VvWd5rUPumuUn2iOVx6DzGkTUKSU/s1600/blank.gif);
display: block;
height: 100%;
text-decoration: none;
}
.camera_loader {
background: url(http://1.bp.blogspot.com/-U50t_WWuuYY/UR2JCuL7yFI/AAAAAAAAALE/w8dJNZaYB2E/s1600/loading.gif) no-repeat center;
background: rgba(255,255,255,0.9) url(http://1.bp.blogspot.com/-U50t_WWuuYY/UR2JCuL7yFI/AAAAAAAAALE/w8dJNZaYB2E/s1600/loading.gif) no-repeat center;
border: 1px solid #fff;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
height: 36px;
left: 50%;
overflow: hidden;
position: absolute;
margin: -18px 0 0 -18px;
top: 50%;
width: 36px;
z-index: 3;
}
.camera_bar {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: 3;
}
.camera_thumbs_wrap.camera_left .camera_bar,.camera_thumbs_wrap.camera_right .camera_bar {
height: 100%;
position: absolute;
width: auto;
}
.camera_thumbs_wrap.camera_bottom .camera_bar,.camera_thumbs_wrap.camera_top .camera_bar {
height: auto;
position: absolute;
width: 100%;
}
.camera_nav_cont {
height: 65px;
overflow: hidden;
position: absolute;
right: 9px;
top: 15px;
width: 120px;
z-index: 4;
}
.camera_caption {
bottom: 0;
display: block;
position: absolute;
width: 100%;
}
.camera_caption > div {
max-width: 450px;
font-size: 16px;
line-height: 23px;
margin-bottom: 50px;
background: #333;
background: rgba(51, 51, 51, 0.65);
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
.camera_caption a {
color: #fff;
font: bold 18px Arial;
margin: 0 0px 10px 0;
padding: 5px 10px;
display: block;
background: #eb4938;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.camera_caption a:hover {
color: #ccc;
}
.camera_caption .comt {
font: 11px Tahoma;
margin: 5px 0 0;
color: #ccc;
padding: 0 10px;
}
.camera_caption p {
font: 12px Arial;
margin: 5px 0 0;
padding: 0 10px 10px;
}
.camerarelative {
overflow: hidden;
position: relative;
}
.imgFake {
cursor: pointer;
}
.camera_prevThumbs {
bottom: 4px;
cursor: pointer;
left: 0;
position: absolute;
top: 4px;
visibility: hidden;
width: 30px;
z-index: 10;
}
.camera_prevThumbs div {
background: url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -160px 0;
display: block;
height: 40px;
margin-top: -20px;
position: absolute;
top: 50%;
width: 30px;
}
.camera_nextThumbs {
bottom: 4px;
cursor: pointer;
position: absolute;
right: 0;
top: 4px;
visibility: hidden;
width: 30px;
z-index: 10;
}
.camera_nextThumbs div {
background: url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -190px 0;
display: block;
height: 40px;
margin-top: -20px;
position: absolute;
top: 50%;
width: 30px;
}
.camera_command_wrap .hideNav {
display: none;
}
.camera_command_wrap {
left: 0;
position: relative;
right: 0;
z-index: 4;
}
.camera_wrap .camera_pag .camera_pag_ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.camera_wrap .camera_pag .camera_pag_ul li {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
cursor: pointer;
display: inline-block;
height: 16px;
margin: 20px 5px;
position: relative;
text-align: left;
text-indent: -9999px;
width: 16px;
}
.camera_commands_emboss .camera_pag .camera_pag_ul li {
-moz-box-shadow: 0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);
box-shadow: 0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);
}
.camera_wrap .camera_pag .camera_pag_ul li > span {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 8px;
left: 4px;
overflow: hidden;
position: absolute;
top: 4px;
width: 8px;
}
.camera_commands_emboss .camera_pag .camera_pag_ul li:hover > span {
-moz-box-shadow: 0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);
box-shadow: 0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);
}
.camera_wrap .camera_pag .camera_pag_ul li.cameracurrent > span {
-moz-box-shadow: 0;
-webkit-box-shadow: 0;
box-shadow: 0;
}
.camera_pag_ul li img {
display: none;
position: absolute;
}
.camera_pag_ul .thumb_arrow {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid;
top: 0;
left: 50%;
margin-left: -4px;
position: absolute;
}
.camera_prev,.camera_next,.camera_commands {
cursor: pointer;
height: 40px;
margin-top: -20px;
position: absolute;
top: 50%;
width: 40px;
z-index: 2;
}
.camera_prev {
left: 0;
}
.camera_prev > span {
background: url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat 0 0;
display: block;
height: 40px;
width: 40px;
}
.camera_next {
right: 0;
}
.camera_next > span {
background: url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -40px 0;
display: block;
height: 40px;
width: 40px;
}
.camera_commands {
right: 41px;
}
.camera_commands > .camera_play {
background: url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -80px 0;
height: 40px;
width: 40px;
}
.camera_commands > .camera_stop {
background: url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -120px 0;
display: block;
height: 40px;
width: 40px;
}
.camera_wrap .camera_pag .camera_pag_ul li {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
cursor: pointer;
display: inline-block;
height: 16px;
margin: 13px 5px 0;
position: relative;
text-indent: -9999px;
width: 16px;
}
.camera_thumbs_cont {
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
overflow: hidden;
position: relative;
width: 100%;
}
.camera_commands_emboss .camera_thumbs_cont {
-moz-box-shadow: 0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);
box-shadow: 0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);
}
.camera_thumbs_cont > div {
float: left;
width: 100%;
}
.camera_thumbs_cont ul {
overflow: hidden;
padding: 3px 4px 8px;
position: relative;
text-align: center;
}
.camera_thumbs_cont ul li {
display: inline;
padding: 0 4px;
}
.camera_thumbs_cont ul li > img {
border: 1px solid;
cursor: pointer;
margin-top: 5px;
vertical-align: bottom;
}
.camera_clear {
display: block;
clear: both;
}
.showIt {
display: none;
}
.camera_clear {
clear: both;
display: block;
height: 1px;
margin: -1px 0 25px;
position: relative;
}
.pattern_1 .camera_overlayer {
background: url(http://4.bp.blogspot.com/-mK_USJALT1w/USSK5zcb0VI/AAAAAAAAAPM/BXmbKtwCdPI/s1600/laya.png) repeat;
}
.pattern_2 .camera_overlayer {
background: url(http://2.bp.blogspot.com/-VVgg8zHpY1Q/USSLGoqh93I/AAAAAAAAAPU/1L3y6jLQv3I/s1600/layb.png) repeat;
}
.pattern_3 .camera_overlayer {
background: url(http://2.bp.blogspot.com/-vt97g0-7sy0/USSLQhI53RI/AAAAAAAAAPc/LUep3GmWmnI/s1600/layc.png) repeat;
}
.pattern_4 .camera_overlayer {
background: url(http://1.bp.blogspot.com/-siY1U2dtkdk/USSLcJ6_iWI/AAAAAAAAAPk/P8wAOzA3Myo/s1600/layd.png) repeat;
}
.pattern_5 .camera_overlayer {
background: url(http://4.bp.blogspot.com/-svWnNDcbzkQ/USSLndwFBeI/AAAAAAAAAPs/IpAgpa_YNXs/s320/laye.png) repeat;
}
.pattern_6 .camera_overlayer {
background: url(http://4.bp.blogspot.com/-beOrTn_xAb0/USSL5TpKKKI/AAAAAAAAAP0/Be6TaEBGNbM/s320/layf.png) repeat;
}
.pattern_7 .camera_overlayer {
background: url(http://1.bp.blogspot.com/-ZIu8sF_tT74/USSMFPPT_aI/AAAAAAAAAP8/ihrFsYG3Y4E/s320/layg.png) repeat;
}
.pattern_8 .camera_overlayer {
background: url(http://1.bp.blogspot.com/-KSaEP4OQ_qw/USSMPrJ3PzI/AAAAAAAAAQE/K-3k29KDUwM/s320/layh.png) repeat;
}
.pattern_9 .camera_overlayer {
background: url(http://3.bp.blogspot.com/-FilWZbFD07E/USSMiDKIURI/AAAAAAAAAQM/K7a6fvbnvGc/s1600/layi.png) repeat;
}
.pattern_10 .camera_overlayer {
background: url(http://4.bp.blogspot.com/-M96ItiZRE7w/USSMiAM3xEI/AAAAAAAAAQQ/_NGNkQuKAnM/s320/layj.png) repeat;
}
.camera_caption {
color: #fff;
}
.camera_caption > div {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV4GU5aQH3PicH4uozLra1TKadCKh-Kk0Scc8kIi_2tD9mRQ6U2LT3A49zLMWn1sdCNBHtipgx3sBsdfAo5RjiUrXZKeGFI6GAgP1rMchNJJiJhkUDU6dis6T5rlNAehVkCywAJTgKgQod/s1600/transparant.png);
}
.camera_wrap .camera_pag .camera_pag_ul li {
background: #8cd700;
}
.camera_wrap .camera_pag .camera_pag_ul li:hover > span {
background: #8cd700;
}
.camera_wrap .camera_pag .camera_pag_ul li.cameracurrent > span {
background: #eb4938;
}
.camera_pag_ul li img {
border: 3px solid #fff;
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
box-shadow: 0 3px 6px rgba(0,0,0,.5);
}
.camera_pag_ul .thumb_arrow {
border-top-color: #fff;
}
.camera_prevThumbs,.camera_nextThumbs,.camera_prev,.camera_next,.camera_commands,.camera_thumbs_cont {
background: #fff;
background: rgba(216,216,216,0.85);
}
.camera_wrap .camera_pag .camera_pag_ul li {
background: #fff;
box-shadow: 0 1px 3px #c3c3c3;
-moz-box-shadow: 0 1px 3px #c3c3c3;
-webkit-box-shadow: 0 1px 3px #c3c3c3;
}
.camera_thumbs_cont ul li > img {
border-color: 1px solid #000;
}
/*ORANGE SKIN*/
.camera_orange_skin .camera_prevThumbs div {
background-position: -160px -920px;
}
.camera_orange_skin .camera_nextThumbs div {
background-position: -190px -920px;
}
.camera_orange_skin .camera_prev > span {
background-position: 0 -920px;
}
.camera_orange_skin .camera_next > span {
background-position: -40px -920px;
}
.camera_orange_skin .camera_commands > .camera_play {
background-position: -80px -920px;
}
.camera_orange_skin .camera_commands > .camera_stop {
background-position: -120px -920px;
}

</style>
</b:if></b:if>

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

<script src='https://googledrive.com/host/0B2BtMc5vQHtXdUtneWQweHpKRVU' type='text/javascript'/>

</head>
<body>

<div class='outer-wrapper'>
<div class='main-wrapper'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='randompost'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
CameraSlider({
blogURL:'http://fbgadgets.blogspot.co.uk/ ',
idcontaint:"#randompost",
NumCharacter: 160,
});
});
//]]>
</script>
</b:if>
<div class='clear'/>
<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>
<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>