epsco: Simplex Design blog : Simplex Magazine 2 - Responsive template for magazine

عنواين الرئيسيه

كشف حقيقة التربح غير المشروع لجمعيات الاسكان التعاونى وتوظيف الاموال ؟ جمع الاموال لمشروع بناء وهمى على ارض محل نزاع قضائى على الملكيه ؟-رسالة من أحد ضحايا كشف الفساد المالى والإدارى -فراد أسرة النائب العام متوغلون في إدارة شركات مكتظة بالفساد المالي -المهندس شريف سوسة رئيسا لشركة بدر الدين للبترول. -إهدار4 ملايين جنيه بشركة بدر الدين للبترول -فساد بـ4 ملايين جنيه بشركات البترول بمطروح-مذكره التي اثارت غضب بعض الافراد من شركه بدر الدين...

السبت، 8 فبراير 2014

Simplex Design blog : Simplex Magazine 2 - Responsive template for magazine

Link to SimplexDesign - free blogger template

Simplex Magazine 2 - Responsive template for magazine

Posted: 07 Feb 2014 10:08 AM PST

I introduced this template several weeks ago in SimplexDesign fanpage, but delayed to provide download link and install instruction because of Lunar New Year holiday. So in this post, I would like to show you this template as a gift for Lunar New Year, Year of Horse. Wish you all the best.
This template is the good for both magazine and blog, it's feature responsive design which can display in most device: PC, Tablet and Mobile.

Demo Download

Install Instruction

1. Download template

2. Open template in a word editor such as Notepad++

3. To edit the main menu navigation

Find this code

<div class='menu-header-menu-container'>
<ul class='sf-menu' id='menu-header-menu'>
<li class='current-menu-item'><a href=''>Home</a></li>
<li><a href='#'>Category</a></li>
<li><a href='#'>Category</a>
<ul class='sub-menu'>
<li><a href='#'>Category</a></li>
<li><a href='#'>Category</a></li>
<li><a href='#'>Category</a></li>
<li><a href='#'>Category</a></li>
<li><a href='#'>Category</a></li>
</ul>
</li>
<li><a href='#'>Category</a></li>
<li><a href='#'>Category</a></li>
<li><a href='#'>Category</a></li>
</ul>
</div>

Edit links in the code above accordingly.

4. To edit Post author at the end of each post

Find this code:

<div id='about-author'>
<img alt='' class='avatar avatar-80 photo' height='80' src='http://0.gravatar.com/avatar/0a13e5c61310cb16613568d752fe6806?s=80&d=&r=G' width='80'/>
<div class='author-text group'>
<h3>Simplex Magazine2</h3>
<p>Aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<div class='author-icons'>
<a class='twitter-link' href='https://twitter.com/dinhquanghuy'>Twitter</a>
<a class='facebook-link' href='https://www.facebook.com/simplexdesignblog'>Facebook</a>
<a class='pinterest-link' href='https://www.pinterest.com/'>Pinterest</a>
<a class='google-link' href=''>Google Plus</a>
</div>
</div>
</div>

Edit the text and links to yours bio and social networks.

5. To edit Get Connected section

Find this code:

<div class='widget widget_mola_social group' id='mola_social-2'>
<div class='special-heading'>
<h2>Get Connected</h2>
</div>
<ul>
<li class='twitter' title='Twitter'><a href='http://twitter.com/promolaSA'>Twitter</a></li>
<li class='facebook' title='Facebook'><a href='#'>Facebook</a></li>
<li class='pinterest' title='Pinterest'><a href='#'>Pinterest</a></li>
<li class='google' title='Google Plus'><a href='#'>Google Plus</a></li>
<li class='instagram' title='Instagram'><a href='#'>Instagram</a></li>
<li class='soundcloud' title='Soundcloud'><a href='#'>Soundcloud</a></li>
<li class='flickr' title='Flickr'><a href='#'>Flickr</a></li>
<li class='youtube' title='YouTube'><a href='#'>YouTube</a></li>
</ul>
</div>

Edit links in the code above to your social networks.

6. This template use Disqus as comment system because of its advantages. So you must have a Disqus account to use Disqus in your blog and moderate comments. You can register an account in Disqus.com website, after login, you will have Disqus shortname.

In template file, find this code:

<script type='text/javascript'>
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'simplexenews'; // required: replace example with your forum shortname

/* * * DON'T EDIT BELOW THIS LINE * * */
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>

Replace the Disqus shortname 'simplexenews' in the code above with yours.

7. Save template and upload to Blogger

8. Go to Blogger Dashboard -> Layout, you will see widgets which are using in this template.

9. To add logo, click edit link in logo widget

Enter logo into widget content as structure below

10. To add Header ad, click Edit link in header-ad widget

Add advertisment code into widget content

11. To show content in Feature Post widget

Click on edit link in feature posts widget

Enter the label which you want to show posts into widget content, for example, in image below, I would like to show 3 latest posts under label 'feature' into feature post widget

12. Do the same for Category1, Category2 and Carousel widgets

13. There are two widgets exist in sidebar: Connected and Popular post. You can add more widget or remove them if necessary.

14. There are 3 widgets in the footer, you can add/remove them as your need.

15. Save changes and see this template in action.

Please note that thumbnail in Popular post widget only works with images hosted in Blogger.