Simplex Reporter Responsive Blogger Template

By Unknown → Wednesday, July 30, 2014
Simplex Reporter Responsive Blogger Template
Flatform Type : Blogger  
Template Name : Simplex Reporter Responsive Blogger Template
Intructions : Tutorial Install Blogger Template
Author Name : The Simplex Design
Design Url : www.thesimplexdesign.com
Publisher : www.24templates.blogspot.com
Description: Simplex Reporter Responsive Blogger Template is good for newsportal and magazine , Modern and fully responsive (try resizing your browser), And this template Clean design and layout, Responsive layout and image, Resizing images without any distorted or scale.



Install instruction

1. Download template file

2. Open template file in a code editor such as Notepad++. We need to find and edit somethings in template file before uploading to server. Because there's something we can not access via Blogger Dashboard->Layout, editing code directly is the only way.

3. To change Sitename/Logo

Search this code:
<div class="logo">       
                     <h1 class="logo-text">
                         <a expr:href='data:blog.homepageUrl' title="Reporter" rel="home">SimplexREPORTER</a>
                     </h1>
                 </div>
You can edit the Sitename (in bold) in the code above.

4. To edit Mega Menu

Search this code:
<div id="drop1" class="f-dropdown content">
                             <!--menu1-->
                             <ul class="large-block-grid-2 small-block-grid-1">
                                 <li id="nav_menu-2" class="widget widget_nav_menu">
                                      <h3 class="widget-title"><span>Pages</span></h3>
                                     <div class="menu-pages-container">
                                         <ul id="menu-pages" class="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>
                                         </ul>
                                     </div>
                                 </li>
                                 <li id="dt_social_widget-4" class="widget widget_dt_social_widget">
                                     <h3 class="widget-title"><span>Anything</span></h3>
                                     <p>These are widget areas. You can put anything you want in here.</p>
                                     <div class="dt-social size-32px">
                                          <a href="#" class="Mail" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw_73lnO2MG9s01UWf6Z_4R3OHfJICqUxLpyjvEy9uPRSA3Ixvv5ayN_nGoz5GAokYV484bKmFCNomvstneRZvZYiIaIvVuSejeOiw07KbMI6Udp55hw0NEfLeLH7LW-HyW2hVpXt8NmEv/s1600/Mail_2.png" alt="Mail"/></a>
                                         <a href="#" class="Facebook" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWb0iBZtL8HYAHWIhGmy8GxDCZtTwFZDxMW625lKxcBkKSAJBMUFjVmc4BPK1eouFJ5dfkvwypzIBMlMAUpxWXNwu4e8kXr2NY3SmCU8jzoeEz3CndGt969LLR0wy9TSRpyeP6KRUN-LFQ/s1600/Facebook_2.png" alt="Facebook"/></a>
                                         <a href="#" class="Instagram" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLBRQZan3qnfY29Fhrs67gEu6OI3GN7jM8FeHx7ZcEJQacuQdRcRRKzLkNHAgBJ2vh1bnvoaHnz0nA_rWbfuCUqUJo5nmE3jQyJik_BRj2-2ta3d07cCSr2jQDExHY3notQ0kzLkZkqHJT/s1600/Instagram_2.png" alt="Instagram"/></a>
                                         <a href="#" class="Pinterest" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyddRzeKeE_l7ERi2nyUqej4SmNmbp7toXZFbONmV8ua8yXHpofwDwAOBQVJlQ5wsBVJrZdE2_ViI15XrewTeaZUieKzSlD6eXqdxpcW-zX0JIV1eh2XzGlz2rsOxcnz5cwvW_n7s01Csw/s1600/Pinterest_2.png" alt="Pinterest"/></a>
                                         <a href="#" class="RSS" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiceaM6FUpvd_vtAneVsEss2RZPMsiipLcZ1GipfB91qymvOMx_c_Ntgj53qCjHdQD-W20POtav66LuxILzX854v1zUshIoHX3-VlbN3XZjgcfCLJ8JBFlCsaFJqCJ8zwWU5eJY1CtZrN4N/s1600/RSS_2.png" alt="RSS"/></a>
                                         <a href="#" class="Twitter" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOUcKHpg-3Rjrs5NziOb_3fikSLSXmoaqKVVq2J2_gKXncd9_OTVjZUi3NgQegJr5yc2H8cdL1NC72xn_VLRT1G8ieRhvub3wLF0EMMlkCX8NUpf1lbLCJWZniWz2HFJE1NFUTxbd19HXL/s1600/Twitter_2.png" alt="Twitter"/></a>
                                     </div>
                                 </li>   
                             </ul>
                             <!--end of menu1-->                   
           
                         </div>
Just need to find this code and edit your own. If you want one more mega menu, beside existed one, just need to copy whole block code from  <!--menu1--> to
 <!--end of menu1-->
and paste the copied right after  <!--end of menu1-->

5. The right sidebar in every single post:

5.1. To edit category menu in right sidebar
Search this code
<li class="widget widget_categories" id="categories-3">
                             <h3 class="widget-title"><span>Categories</span></h3>   
                             <ul>
                                 <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>
                                 <li><a href="">Category</a></li>
                             </ul>
                         </li>

5.2. To edit social button in right sidebar
Search this code:
<li class="widget widget_dt_social_widget" id="dt_social_widget-2">
                             <h3 class="widget-title"><span>Social Buttons</span></h3>
                             <div class="dt-social size-32px">
                                 <a target="_blank" class="Mail" href="#">
                                     <img alt="Mail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw_73lnO2MG9s01UWf6Z_4R3OHfJICqUxLpyjvEy9uPRSA3Ixvv5ayN_nGoz5GAokYV484bKmFCNomvstneRZvZYiIaIvVuSejeOiw07KbMI6Udp55hw0NEfLeLH7LW-HyW2hVpXt8NmEv/s1600/Mail_2.png"/>
                                 </a>
                                 <a target="_blank" class="Facebook" href="#">
                                     <img alt="Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWb0iBZtL8HYAHWIhGmy8GxDCZtTwFZDxMW625lKxcBkKSAJBMUFjVmc4BPK1eouFJ5dfkvwypzIBMlMAUpxWXNwu4e8kXr2NY3SmCU8jzoeEz3CndGt969LLR0wy9TSRpyeP6KRUN-LFQ/s1600/Facebook_2.png"/>
                                 </a>
                                 <a target="_blank" class="Instagram" href="#">
                                     <img alt="Instagram" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLBRQZan3qnfY29Fhrs67gEu6OI3GN7jM8FeHx7ZcEJQacuQdRcRRKzLkNHAgBJ2vh1bnvoaHnz0nA_rWbfuCUqUJo5nmE3jQyJik_BRj2-2ta3d07cCSr2jQDExHY3notQ0kzLkZkqHJT/s1600/Instagram_2.png"/>
                                 </a>
                                 <a target="_blank" class="Pinterest" href="#">
                                     <img alt="Pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyddRzeKeE_l7ERi2nyUqej4SmNmbp7toXZFbONmV8ua8yXHpofwDwAOBQVJlQ5wsBVJrZdE2_ViI15XrewTeaZUieKzSlD6eXqdxpcW-zX0JIV1eh2XzGlz2rsOxcnz5cwvW_n7s01Csw/s1600/Pinterest_2.png"/>
                                 </a>
                                 <a target="_blank" class="RSS" href="#">
                                     <img alt="RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiceaM6FUpvd_vtAneVsEss2RZPMsiipLcZ1GipfB91qymvOMx_c_Ntgj53qCjHdQD-W20POtav66LuxILzX854v1zUshIoHX3-VlbN3XZjgcfCLJ8JBFlCsaFJqCJ8zwWU5eJY1CtZrN4N/s1600/RSS_2.png"/>
                                 </a>
                                 <a target="_blank" class="Twitter" href="#">
                                     <img alt="Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOUcKHpg-3Rjrs5NziOb_3fikSLSXmoaqKVVq2J2_gKXncd9_OTVjZUi3NgQegJr5yc2H8cdL1NC72xn_VLRT1G8ieRhvub3wLF0EMMlkCX8NUpf1lbLCJWZniWz2HFJE1NFUTxbd19HXL/s1600/Twitter_2.png"/>
                                 </a>
                             </div>
                         </li>
                      

All you need to do is to find these blocks of code and then edit it as you want.
You can also add scripts right after these blocks of code, but remember to encode your script. (You can encode script by paste it in text box of this site, then copy-paste the result back).

6. After editing, you need to upload template file to Blogger.

7. Go to Blogger Dashboard -> Layout tab

8. To add news to Flashnews

Click on Edit link at Flashnews widget


Add the category which you want to show in widget content.

9. Do the same for other widgets: Homepage Slider, Headline, Block1, Block2, Block 3, Block4,  Block5, Block6, Gallery

10. For the footer, there are 4 widgets for adding content: Footerblock1, Footerblock2, Footerblock3 and Footerblock 4. You can add/remove existed widgets and replace with your own.

That's all for this template. Hope this helpful to you.

ScreenShoot: 
Simplex Reporter Responsive Blogger Template
Sagitarius Kusadhi

I'm Sagitarius Kusadhi. A full time web designer. I enjoy to make modern template. I love create blogger template and write about web design, blogger.

No Comment to " Simplex Reporter Responsive Blogger Template "