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.
Designed by Uong Jowo, Newsteam is news theme with Multi Author for Team of Blogger. This Themes to help you create your team professional news blog and get more readers! Insya Allah...
It has 3 columns, horizontal and vertical pausing scroll, feature slider, show each author photo in every posts, etc..!
DEMO
Newsteam http://www.mediafire.com/?o84tctuhd4zpmge
Thanks for not remove DESIGNER Link on the Footer.
How to create a specific element in your single and archives posts that will contain the profile picture and author name?
Go to the Edit Template HTML.
Tick the “Expand Widget Templates” box.
Find this : authorname1
Replace authorname1 with Your real author name, and Url author picture, also authorname2, 3 etc..
Look like this:
<b:if cond='data:post.author == "authorname1"'>
<img src='Url author picture'/>
</b:if>
Replace link js "goup.js" code with this <script type="text/javascript" src="http://yourjavascript.
If Attension Symbols appear on the header, find this: grid_pat.png replace with this :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg08c0ZI-iZnd11qpH4MBC-VxrJCXKUWCTRVauVL9tN6kk9jd3P3JP_ALPEYBjNLQQWzCjsINJQiCohbULfmsc7NkHf0xY4EflQP8zWR8cel8XcL5NbehyfWNzw20zA8MzW_R4N78ehCJy/s1600/grid_pat.png
Find this too: prevbn.gif and nextbn.gif
Replace with:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8DU1QtTorJrF-_4F16cnZuVkVXvwNkzgToUlsCwi3E44YjGIb6lq3h92YmjZZSq5PfqenKe5F_4yYEyTHtLCHTGc9g-cFCH3e9kdrtvCoK2-LPtmDd5rbs0B-HQa4D3hhmVKEGpE101jj/s1600/prevbn.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsOE1LFidShmAaAFYl3av7x9ml6FQpbystZnQlhp-kcoJLAMAEUS18norkl2eueyGdxsOrVNFsvGwdZ1WSebH9LSnAtGKPpiTSw3EYsoW49d85COxOHBrNTN5cUS7KVVojK8rRqHGmD-FQ/s1600/nextbn.gif
This template has 2 columns, Vertical slider tabs , headline, drop-down menus, Tipst gallery posts, carousel post image etc.. You can even add a customized background image or background color.
DEMO
TrendMag http://www.mediafire.com/?xfsi94mzmyybz4i
Thanks for not remove DESIGNER Link on the Footer.
Not work in the Chrome ??
Follow this instructions:
1. Go to Edit Html, find this:
#navi ul.items li a ...until.. #navi ul.items li also .datetime
2. Replace with :
#navi ul.items li a {display:block; font-weight: normal; overflow: hidden;height:80px; padding:5px 5px 10px;border-bottom:0.5px solid #ccc; -moz-transition:.8s linear; -webkit-transition:.8s ease-out; transition:.8s linear;font-size: 14px;font-family:Oswald;}
#navi ul.items li a:hover,#navi li a.current {background:#f7f7f7;text-decoration:none; border-bottom:0.5px solid #eee; -moz-transition:.01s linear; -webkit-transition:.01s ease-out; transition:.01s linear;}
#navi ul.items li p{font-size:11px;color:#555;font-weight: normal;}
#navi li h5{float: left;width: 180px; font-size: 15px;}
#navi ul.items li {display:block;float: left; padding:0; width: 330px; overflow: hidden;height:80px;margin:0; border-bottom:0.5px solid #eee; }
.datetime { text-align:left; float:left;background:#333;padding:0px 7px;margin-top:5px;width:180px;}
3. Save
If Atention Symbol appear, find this : up.png , tipsy.gif
Replace with:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdzdtYYmNaK0H-r5rTad4ToNI9yd1I9t8DWkrPXqBREkUslGnAP0uxXCbOIzudIew6ZAc70dJAL3vgno_2e0qXzR96X0opw4gfqGcIT9s-v7vm-L4nXQ1ulwndYkwVcRygB85ufjjYFW4/s1600/up.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZJ7E1kIegC3Tz7M57MRWVCzd9u-MuvOGIppPid7eUKq7FKb2X37K7wL28QBalWj-MjCzb2IwfmSjHjetFEvrqu8_C61FCm-gtRCzq3WVymYWMI6plywFvHQUcRydovFoq8qOEsuMnqRg/s1600/tipsy.gif
Designed by Uong Jowo, Alhamdulillah..... More Than News Theme is designed to news magazine blogger template. The home page features a 2-3 column layout ideal for content and advertising.
The theme is packed with widgetized sections, and has many unique features such as a search bar, a breadcrumb style menu, a news slider, featured Carousel, news Gallery, tab content sidebar and much more.
DEMO
MoreThan News [2] http://www.mediafire.com/?25mkfjq7e6cjmyc
Thanks for not remove DESIGNER Link on the Footer.
if Attention Symbol appear, find: up.png , dots_pat.png , and tipsy.gif
replace with :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdzdtYYmNaK0H-r5rTad4ToNI9yd1I9t8DWkrPXqBREkUslGnAP0uxXCbOIzudIew6ZAc70dJAL3vgno_2e0qXzR96X0opw4gfqGcIT9s-v7vm-L4nXQ1ulwndYkwVcRygB85ufjjYFW4/s1600/up.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFSZIgFMfXXeGb-5yzyuMCHlk1aXw0BXVUaSUXwTke8nJLv6zXvTA88OWtXghfZ3sRMg03jmriyF2Mv7Zlp-4zqK9oCkP6GKo77xnVXM1P0wFNFfmpXVvDfRurtUXe5seOF6dSCGz0vUQ/s1600/dots_pat.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZJ7E1kIegC3Tz7M57MRWVCzd9u-MuvOGIppPid7eUKq7FKb2X37K7wL28QBalWj-MjCzb2IwfmSjHjetFEvrqu8_C61FCm-gtRCzq3WVymYWMI6plywFvHQUcRydovFoq8qOEsuMnqRg/s1600/tipsy.gif
Designed by Uong Jowo, News Cafe is Light Magazine style blogger template. This theme is great for online Newspaper, Magazine, Business and Tourism blog.
It comes with a lot of Features and design, like:
Black and white thumbnail image on home page.
Image zoom with true color image.
3 content Slider include flexslider , Horizontal column drop down menu on top, sidebar Tabs , etc..
Note: Thanks to WooThemes for free flexslider.
View Demo
News Cafe http://www.mediafire.com/?gxzmdpafcsg35bf
Thanks for not remove DESIGNER Link on the Footer.
News Magazine Theme 640 has converted to Blogger template by Uong Jowo.
Demo
News Magazine Theme 640 to Blogger Template
- Uong Jowo
- December 14, 2012
- Themes ThemesConverted
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.