Designed by Uong Jowo, Team Blog is a Responsive Magazine Style Blogger Template for Team, created by Uong Jowo for any type of informative blog such as a complex News Blog with multi authors, or simply informative blog, Insya Allah... You can list posts by Label(Tags) and also can list video posts.
For photo of author, you don't need edit bla.. bla..bla.. This theme is automaticaly showing author photo.
From Customize Design, you can easily change main color and background image like you want..
DEMO
TeamBlog Magazine https://app.box.com/s/6g4tep00jaxh7xiwexyh
Thanks for not remove DESIGNER Link on the Footer.
How to change background img..?
Once you’ve chosen a template, you can continue customizing the look of your blog. you can choose the background color or image for your blog and then play with the color scheme.
To start customizing your background, click on the thumbnail under Background Image, or you can upload your background...
The "Read More" Slider link is Error....!?
Copy js link below and Replace postteam_content.js file to your template :
http://yourjavascript.
replace link of flexslider js with
http://flexslider.woothemes.com/js/jquery.flexslider.js
Team Blog Responsive Magazine Blogger Template for Team
- Uong Jowo
- December 05, 2013
- Themes ThemesDesigned
Alhamdulillah... Designed by Uong Jowo, Widgetly is a magazine blogger template for news blog or any web journal & much more The theme have 3 columns layout post widget content and advertising.
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.
DEMO
Widgetly https://app.box.com/s/faouy3xlovdl41uv624nsoh8sv0zi47r
Thanks for not remove DESIGNER Link on the Footer.
How to show Post widget on Homepage..?
- on Dashbord Blogger Click Layout
- Edit HTML/Javascript widget
- Add your label in box content and title [ like image below ]
- Save
- Copy this Responsive CSS code below , and replace to your template
.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 old Responsive CSS:
media only screen and (max-width:1219px
......................... until...............
media only screen and (max-width:319px
The Left/Right button Slider is not work on Chrome ..?
Go to Edit Html, Find this:
#uj-slider{.........
.. until...
.uj_slider .flex-direction-nav .flex-prev{margin-right:41px}
Replace with CSS code below:
#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/AVvXsEg8-5GCqqk9esWPp5Joe_Jxs8kF3BzeDPFxZEziNKBbx-p-qFM-sugmWmXyGSd3vFPW-81hpnskTmrjxXUnSz7xlF04qQq66Af0CD19C0AV-FKAFfWicur1VsodBSsZ8BXmfHXEi383_Qw/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}
-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'>
Need show Disqus Comment Count on Homepage of this template ? ..mail me
Widgetly Responsive Magazine Blogger Template
- Uong Jowo
- October 24, 2013
- Themes ThemesDesigned
Designed by Uong Jowo. Petromag magazine blogger themes is built for your news sites.
This Theme gives you many ways to show your posts. With a good structure and responsive layout, the viewing and reading experience is superb on all types of devices.
A feature-rich, professional media, sticky menu bar, Error 404 Page, a slider on each category page, a drop-down searching post, carousel up-down, Header newsflash Show popular stories (daily, weekly, monthly or all time), recent comments and/or recent posts in a stylish way at the top of your page, and so much more!
DEMO
PetroMag https://app.box.com/s/bec0noqjifhnpo3l7bq0
Thanks for not remove DESIGNER Link on the Footer.
About Me
- Uong Jowo
- Uong Jowo was Born In Surabaya, March 1971. I'm A Blogger Templates Designer and a Converter Wp Themes to Blogger Template.