Friday, December 20, 2013
Widgetly Responsive Magazine Blogger Template [Free Download]
Blogger Templates
,
Free Blogger Templates
,
Free Download
,
Magazine
,
News
,
Uong Jowo
,
Uong Jowo blogger
,
Widgetly Responsive Magazine
1 comment
:
It’s fully responsive design ready to any device. The theme is packed with widgetized sections, and has many features such as a headlines, a flexslider, image zoom, news Gallery, tab content sidebar and much more.
On Dashbord of Blogger, Click Layout
Edit HTML/Javascript widget
Add your label in box content and title [ like image below ]
Save.
.pix_uj li .uj_thumb{width:70px;height:70px;overflow:hidden;}
@media only screen and (max-width:1219px){
#wrapper{width:986px;}
.container,#footer-widget-area{width:944px;}
.header-content{margin:0;padding:25px 21px}
#sidebar-narrow,#top{display:none}
#sidebar{float:right;width:300px;}
#logo{float:left;width:270px;}
}
@media only screen and (max-width:985px) and (min-width: 768px) {
#wrapper{width:750px;}#logo,#logo img{float:left;width:200px;}
.container,#footer-widget-area,#main-content{width:730px;}
#content,#uj-slider,.flexslider,.uj-box,.pix_uj .box-content,.UJ-list li,.UJ-list li:first-child,.inde-uj li,.uj-box li:first-child .uj_thumb{width:410px;float:left;}
.scroler li .uj_thumb .overlay,.uj-box li:first-child .overlay{width:410px;height:160px}
#content .post-body img{max-width:360px;}
.uj-box.cols-2,.uj-box.cols-2 li,.uj-box.cols-2 li:first-child{float:left;width:200px;margin-right:0}
.uj-box.cols-2 li:first-child .overlay{width:200px;height:160px}
.uj-box.cols-2 .uj_thumb .overlay:hover a.zoom{left:15%}
.uj-box.cols-2 li:first-child .uj_thumb .overlay:hover a.post-link{right:15%}
.cols-2.last-column{float:right;}
.header-content{margin:0;padding:25px 15px}
.header-content{background:transparent}
.top-nav .container{position:relative}
#sidebar{padding:0 0 0 4px;float:right;width:300px;}
}
/* Phone : 480px */
@media only screen and (max-width: 767px) and (min-width: 480px){
#wrapper{max-width:430px;width:100%!important}
#topcontrol , .ads-top,#main-nav, .ads-bottom,.home-ads, .ads-post, .today-date, .slider-caption p{display:none !important;}
header {width:420px !important;}
#mobilenav{display:inline-block;border:1px solid #ccc;padding:2px 5px;}
#navi.suball {background:#333;}
.container,#main-content , .content , #content{width:420px !important; }
.flexslider , .flexslider .slides > li ,.flexslider .slides img{height:250px !important;}
.slider-caption h2 a, .slider-caption h2{ font-size:22px;}
.single-post-thumb img { max-height:210px; }
.slider-caption{width:auto;}
.logo{float:none;text-align:center;}
#uj-slider,.uj-box,#footer-widget-area,.flexslider,.uj_slider_item{float:none;width:400px;}
#uj-slider{margin:0 auto 20px auto}.uj-box,.uj-box.cols-2,.pix_uj{margin-left:10px;}
#top{display:none}
.uj-box.cols-2,.uj-box.cols-2 .widget-content,.uj-box.cols-2 li,.uj-box.cols-2 li:first-child,.uj-box,.pix_uj .box-content,.UJ-list li,.UJ-list li:first-child,.inde-uj li,.uj-box li:first-child .uj_thumb,#tabbed-widget{float:none;width:400px;}
.uj-box.cols-2 .widget>h2{width:400px;}
.pix_uj .box-content ul li:first-child{width:400px;float:none;}
.pix_uj .box-content ul li:first-child .uj_thumb,.pix_uj .box-content ul li .uj_thumb{width:100%;float:left;}
.pix_uj .box-content ul li{width:31%;float:left;}
.uj-box.cols-2,.uj-box.cols-2 li,.uj-box.cols-2 li:first-child{float:left;width:400px;margin-right:0}
.scroler li .uj_thumb .overlay,.uj-box li:first-child .overlay{width:400px;height:160px}
#sidebar {width:400px;float:left;}
#PopularPosts2 ul{width:380px;float:left;}
#adsentop,#righttop{display:none !important;}
}
/* Phone : 320px */
@media only screen and (max-width:479px){
#topcontrol,.today-date,#main-nav,.slider-caption p,#cats-tabs-box,a.random-article{display:none;}
#wrapper{max-width:297px;width:100%!important}
.social-networks{display:none;}
#mobilenav{display:inline-block;border:1px solid #ccc;padding:2px 5px;}
#navi.suball {background:#333;}
.container,#main-content,#content,
#uj-slider,.uj-box,.flexslider{margin:0 auto 20px auto;width:277px;}
#footer-widget-area{margin:0 auto;width:277px;}
.uj-box.cols-2,.uj-box.cols-2 li,.uj-box.cols-2 li:first-child,.uj-box,.pix_uj .box-content,.UJ-list li,.UJ-list li:first-child,.inde-uj li,.uj-box li:first-child .uj_thumb{float:left;width:277px;}
.pix_uj .box-content ul li:first-child{width:277px;float:left;}
footer{padding:20px 0}
#sidebar{padding:0 0 0 0;float:left;width:277px;border-left:0;}
.fb-like-box{float:left;}
#tabbed-widget,#sidebar .widget{float:left;width:277px;}
#tabbed-widget .tabs-wrap li{width:90%;float:left;}
#PopularPosts2 ul{width:250px;float:left;}
#content .post-body img{max-width:250px;}
#logo{max-width:150px;float:left;clear:both;}
#logo img{width:150px;}
#adsentop,#righttop{display:none !important;}
#sidebar-top1 img{max-width:270px;}
}
@media only screen and (max-width:319px) {
#wrapper{width:220px;}
.head_brnews .breaking-news{display:none}
#content {float:left;width:220px;}
#sidebar{padding:0 0 0 0;float:left;width:220px;}
}
-Find this :
1. <div id='sidebar' style='width:100%;max-width:300px;float:right;'> replace with <div id='sidebar'>
2. <footer adding <div class='clear'/> like below:
<div class='clear'/>
<footer itemscope='' itemtype='http://schema.org/WPFooter'>
If the Left/Right button Slider is still not working on Chrome ..?
Go to Edit Html, Find this:
#uj-slider{.........
.. until...
.uj_slider .flex-direction-nav .flex-prev{margin-right:41px}
#uj-slider{position:relative;max-width:620px;width:100%}
#uj-slider .widget h2,.tabs-wrap .widget h2{display:none}
.uj_slider{margin-bottom:2px;position:relative;margin-bottom:30px;overflow:hidden;background-color:#fff}
.uj_slider_wrap{position:relative;height:350px;overflow:hidden;margin-bottom:3px;padding:0}
.uj_slider_item{max-width:620px;height:340px;overflow:hidden;width:100%}
.uj_slider .slides img{width:100%;height:auto;}
.uj_slider .slider_caption{position:absolute;padding:10px 15px;background:#cd2122;background:rgba(205,33,34,0.8);left:0;bottom:100px;color:#f5f5f5;margin-bottom:12px;z-index:99}
.uj_slider .slider_caption:after{content:"";height:3px;width:100%;background:#cd2122;background:rgba(205,33,34,0.8);overflow:hidden;display:block;left:0;position:absolute;bottom:-4px}
.uj_slider_wrap .uj_slider_item{display:none;position:relative}
.flex-direction-nav {*height: 0;}
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
.uj_slider .slider_caption h3{margin-bottom:0;font-size:20px}
.uj_slider .slider_caption h3 a{font-family:'Oswald',serif;color:#fff}
.uj_slider .slider_caption h3 a:hover{color:#000}
.uj_slider p.caption{position:absolute;background:#000;background:rgba(0,0,0,0.7);padding:7px 14px;bottom:39px;width:385px;color:#fff;font-family:tahoma;font-size:13px;line-height:17px;z-index:99}
.uj_slider p.caption .post-meta{display:none}
.uj_slider .flex-direction-nav a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijBeWuk_8TPI_GRspgpILiJLECfcTXxGgREQuAviNJ2SwKJd-8BU72ZW-PxspUfsRcPJv0SqTLP8OakieAY1OkU6mHnzt-MAIiIfk79blYULNkD6r9ptjsNWLAAACHEnN0PtCOHYADT_c/s1600/bg_direction_navs.png) no-repeat;font-size:0;width:40px;height:40px;display:block; position:absolute;bottom:5px;cursor: pointer;right:5px;z-index:99}
.uj_slider .flex-direction-nav .flex-next {background-position:100% 0;z-index:99}
.uj_slider .flex-direction-nav .flex-prev {margin-right:41px;z-index:99}
Subscribe to:
Post Comments
(
Atom
)
please provide download link.... babusmagic@gmail.com
ReplyDelete