epsco: Simplex Design blog : 4 tips to make a new look for your Simplex Vertical template

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

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

الثلاثاء، 27 يناير 2015

Simplex Design blog : 4 tips to make a new look for your Simplex Vertical template

Link to SimplexDesign - free blogger template

4 tips to make a new look for your Simplex Vertical template

Posted: 27 Jan 2015 01:41 AM PST

Have you download and install our latest template Simplex Vertical ? How do you feel ? I've got some requests for template customisation, and in this post, I want to show you something to make a new look for template Simplex Vertical, outside from others.

1. Re-arrange the position of widgets

The easiest solution is re-arrange the position of widgets, for example, move block3 to position of block1, move slider to the bottom of page, or something like this.
Only open Blogger Dashboard - > Layout tab ->Move the widget position.

2. Changing the color

Changing the color of link, post titles, top bar navigation, footer, is another way to make your blog fresh and out of default layout. You can change the all the color to new color pattern, to more colorful, fresh and cool color.
To change the color of top navigation bar, you can find this code


#navigation_bar {

 background:#000;

 height:50px;

}

Change the attribute background: #000; to the color you want.
To change the color of footer, find this code:


#footer {

 background:#000;

}

To change the link color:


a {

    color: #ff502e;

    text-decoration: none;

}

Change the attribute color: #ff502e;
To change the font style, font color of post title


.post-header h1 {

    color: #000;

    font-family: "Georgia";

    font-size: 30px;

    line-height: 38px;

    margin-bottom: 11px;

    word-wrap: break-word;

}

To change the font-size and font style


body {

    font-family: "Droid Sans",sans-serif;

    font-size: 13px;

}

It requires you a litle knowledge of HTML and CSS, but it worth to give a try.

3. Change the Disqus comment to Blogger default comment

It's very easy to change the Disqus comment to Blogger default comment. Many people ask me for this question and here is solution:
Open Blogger Dashboard ->Template ->Edit HTML
Press Ctrl+F to find this code




<b:include data='post' name='comments'/>

And change this to this one


<b:include data='post' name='threaded_comments'/>

4. Make a sticky top bar navigation

Top bar navigation is not moved when scrolling. To make it always on top, add this script to the top, right after </head>


<style>

.sticky {

 position: fixed;

 width: 100%;

 left: 0;

 top: 0;

 z-index: 100;

 border-top: 0;

}

</style>

<script type='text/javascript'>

  $(document).ready(function() {

   // grab the initial top offset of the navigation

      var stickyNavTop = $(&#39;#navigation_bar&#39;).offset().top;

   

      // our function that decides weather the navigation bar should have &quot;fixed&quot; css position or not.

      var stickyNav = function(){

       var scrollTop = $(window).scrollTop(); // our current vertical position from the top

           

       // if we&#39;ve scrolled more than the navigation, change its position to fixed to stick to top,

       // otherwise change it back to relative

       if (scrollTop &gt; stickyNavTop) {

           $(&#39;#navigation_bar&#39;).addClass(&#39;sticky&#39;);

       } else {

           $(&#39;#navigation_bar&#39;).removeClass(&#39;sticky&#39;);

       }

   };

   stickyNav();

   // and run it again every time you scroll

   $(window).scroll(function() {

    stickyNav();

   });

  });

 </script>