Feb 18, 2016

Kompi Simple Blogger Template


Template blogger this is a continuation of the template Kompi New whom I share. With a width of 950px, the template is suitable for personal blog or untu sharing blog. Like the previous template, this template also I gave white with lines to distinguish each element. Slight improvement of the data structure, features a menu drifting and widget sidebar floated in the desktop, mobile menu, as well as eliminating the sidebar and footer in the mobile display for optimization blogs mobile devices become another hallmark of this template. Now I share this Simple template for friends Company Company want it, because the template is very simple.
Source: http://www.kompiajaib.com/2016/02/kompi-simple-template-blogger-yang.html

Customization:


1. Menu

 On the desktop, this template has 2 menu is the menu next page header and menu below the header. But for the mobile display, the menu I made ​​into one piece with the show hide menu.
 For menu with class='mobile-menu' is on the menu at the bottom of the header for the mobile display.

2. Social Media

Please fill in the url of your social media profiles such as Facebook, Twitter, Google+, LinkedIn or YouTube at the code below.
<ul>
  <li><a href='https://www.facebook.com/your-username' itemprop='sameAs' target='_blank' title='Facebook'><i class='fa fa-facebook fa-lg'/></a></li>
  <li><a href='https://twitter.com/your-username' itemprop='sameAs' target='_blank' title='Twitter'><i class='fa fa-twitter fa-lg'/></a></li>
  <li><a href='https://www.google.com/your-username' itemprop='sameAs' target='_blank' title='Google+'><i class='fa fa-google-plus fa-lg'/></a></li>
  <li><a href='id.linkedin.com/in/your-username' itemprop='sameAs' target='_blank' title='LinkedIn'><i class='fa fa-linkedin fa-lg'/></a></li>
  <li><a href='//www.youtube.com/c/your-username' itemprop='sameAs' target='_blank' title='Youtube'><i class='fa fa-youtube fa-lg'/></a></li>
  </ul>

3. Changing Box Ads

To replace the yellow box with adsense ads. There are 3 ad box:
1. Header
<div class='content-wrapper'>
<div class='iklan-bawahheader'>
  <div style='width:100%;height:90px;background:#f1e791;margin:0 auto'/>
  </div>
  </div>
Change the code <div style='width:100%;height:90px;background:#f1e791;margin:0 auto'/> with the ad script.
2. Top posts
<div class='iklan-ataspost'>
<div style='width:100%;height:60px;background:#f1e791;margin:0 auto'/>
    </div>
Change the code <div style='width:100%;height:60px;background:#f1e791;margin:0 auto'/> with the ad script.
3. Under Postings
<div class='iklan-bawahpost'>
<div style='width:100%;height:250px;background:#f1e791;margin:0 auto'/>
    </div>
Change the code <div style='width:100%;height:250px;background:#f1e791;margin:0 auto'/> with the ad script.

4. Sticky Widget Sidebar

 This sidebar to the bottom of the widget. In the demo using the widget feature post blogger, if you want to replace with other please change the code FeaturedPost1 the javascript below with its widget ID.
function makemeSticky2(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" makesticking2",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky2("FeaturedPost1");
Disqus Comments