Template Creating Website Modifications

Here I want to share but be patient, I again modify the template so that it matches with a blog attached to any content. This blog is the original template techstop. But I think this template is less flexible because it can only be used for blogs with content tutorial or some sort of diary. So a lot of parts that must be modified.
For that I am trying to find just a simple template to modify the template that is similar to the one I wear now. Creating a Website Template modifications already so now this is the first Minima template with two columns, then I divide it into 3 columns on the homepage, and only 2 columns on the post and page. My goal split into 3 columns on the homepage to make it more flexible, so it can be also used my friends who have a blog with content such as news. The following screenshot section and postpage homepage (click image to enlarge):

homepage creating website

postpage creating website

There are some differences in the look of the template that I use, in addition to parts of the homepage, also my feedburner subscription box fox so now becoming a part of the related post feature. So give more space on the sidebar. For the sidebar width, not intentionally at the bottom I have again divided into two because I have provided a small sidebar on the homepage.
Okay now I'll give you some code that should be placed in the sidebar so that it looks similar to a blog that I wear now:
  1. Translate flag image (width sidebar above)
    Actually the tutorial has been widely circulated on the internet, but instead you bother nyarinya just give me the script code to be installed:
    <style>
    .google_translate img {
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    border:0;
    }
    .google_translate:hover img {
    filter:alpha(opacity=30);
    -moz-opacity: 0.30;
    opacity: 0.30;
    border:0;
    }
    .google_translatextra:hover img {
    filter:alpha(opacity=0.30);
    -moz-opacity: 0.30;
    opacity: 0.30;
    border:0;
    }
    </style>
    <div>
    <a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="English"><img align="absbottom" alt="English" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrQtfHUbkZ3QKRir_Twmbk3gV0fv2JAihjdwQ05Zm0OIlBD0mJXhKsH9krBu7nYMPWMTIjW1EVY6krg8F_nbj7Dht0mpnxHF8OnAyjlqbe2-gQ0adQrw0U3BPW_ipyiLzbxE3YqqRzfQ/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="English" width="24" /></a>

    <a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="French"><img align="absbottom" alt="French" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5dXebFEgcYe6m7OUe7UpIArGm_LtZ7X6OjXVNem5_I_8xT7KoJUwL_BESqMvH449HuJqMFPUc1YiOmuL7UU0lOGAKTMXIhowMUTfwhxedAIAH6ggLHG1xBvwjmhlvvRqKJxGy8OLV-w/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="French" width="24" /></a>

    <a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="German"><img align="absbottom" alt="German" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7ohix20dY_t6FmhMFE2pTGVyrHQTaeIzervHFYhALWpXlPFekwapWrGokVZFxTIQx4xRNCL1QKacM-HnSmLiixEyCaZzP4pRIDq8eoxG2OCgrLz2iI1mPevXLtOMteXxxcbpqXqe37hE/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="German" width="24" /></a>

    <a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Spain"><img align="absbottom" alt="Spain" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl_1wvhztlBKyHyOTgfAK5Eu3CcQw0Mj7jGWKTBuG83Fr6I0MXowwsyKf1UkjIrHTarOTEy13oTgAydoP0CRDoOlxGOVtpqLkPYME83H0XUMvtBUwkf8GmcWxGQug4t0y7FD_LACyfY5I/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Spain" width="24" /></a>

    <a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Russian"><img align="absbottom" alt="Russian" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkx2aMzy36bNooDaUzwDngbqiefKZ3X0hfDaProbFl05vGlvgtzVP3ZNE9gjJFB518g3ECyJ2rDb-lD3sDQ6EkmLFMTLymFWOBfzJyfEdW3ao7KdTi4hD30rrvOTwe6N1GpSuzERnf-w/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Russian" width="24" /></a>

    <a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Japanese"><img align="absbottom" alt="Japanese" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsT2C_3jK68Hz8W3nH9NuDFvAz58ukifK7kUJzv_IGza5zOUXtu1S_-_Q77meg_BYWddvPmwquWnUyIkCtGkyMWWXsf_daIcprBtW89nDTFrSnWQs1gt2xS73rZF4ZeAUSxad3mma4FyU/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Japanese" width="24" /></a>

    <a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Arabic"><img align="absbottom" alt="Arabic" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOC0_kBhje7or6iv9WIZACp-SSBjIQ5NXgolyQ-betspqIadYvIQQEvZmOKZD6HEhVWZgNBN97gkOlM4_oUplB9PYFXcrXmSBhk4-DHev15SZq5HC8fLDToZ0zk_eZuY61gSAafThRQg/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Arabic" width="24" /></a>

    <a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Chinese Simplified"><img align="absbottom" alt="Chinese Simplified" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR1tCegngOWSfGDmoS03jFmG0lShVTWB3iK1u9lCDjl9i-c4K4oWASJYUycGDahrxzyDzOMXC_toq4GUepRcBeh28FE9wcmlCrK6ZdUN6HCj8yswuu5HbcJNTvV_07hOVXV2jWglGbdQ/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Chinese Simplified" width="24" /></a></div>
  2. Tab View
    In this section, the tab view which I still use manual, now many ways to make the tab view that is more easily for example by adding a touch of jQuery. But it does not hurt if the script code that I use in this blog I share with you (For more details can be read on a tutorial to make the tab view):
    <style type="text/css">
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 92px;
    height: 22px;
    text-align: center;
    margin: 5px 0px 0px 3px;
    background-color:#999999;
    padding-top: 6px;
    border: 1px solid #ffffff;
    border-bottom: 1px solid #ccc;
    font-family: "Arial, Helvetica, sans-serif", Arial;
    font-weight: 900;

    }
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    background-color: #444343; }
    div.TabView div.Pages
    {
    clear: both;
    border: 1px solid #cccccc;
    overflow: hidden;
    background-color: #F2F2F2;
    }
    div.TabView div.Pages div.Page
    {
    padding: 2px;
    height: 100%;
    overflow: hidden;
    }
    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;
    }
    .list {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0xEn3D-bp_nTWnD7Nzt3qIFEYNZ3gEEd1xk2SSdWcOgamUYvx513XUHIL_dKBc6HRaSuPhKoZxbA7o5cHEEqt0Fwvn1oRk4HWOJKdeGGuNE3N1e0yLH6WxCzzgMd4tL38byVbj9AwsHA/") no-repeat left center;
    border-bottom:1px dotted #7f7f7f;
    line-height:1.5em;
    padding:3px 0px 3px 20px;
    }
    </style>

    <form action="tabview.html" method="get">
    <div class="TabView" id="TabView">
    <div class="Tabs" style="width: 298px;">
    <a href="http://www.blogger.com/post-create.g?blogID=7490537618574143540"><span style="color: white;">Tutorial Blog</span></a>
    <a href="http://www.blogger.com/post-create.g?blogID=7490537618574143540"><span style="color: white;">Wordpress</span></a>
    <a href="http://www.blogger.com/post-create.g?blogID=7490537618574143540"><span style="color: white;">Joomla</span></a></div>
    <div class="Pages" style="height: 200px; width: 298px;">

    <div class="Page">
    <div class="Pad">
    <div class="list">
    <a href="http://creatingwebsite-Johny Woods.blogspot.com/2011/02/membuat-efek-image-zoom-dengan-jquery.html">Membuat Efek Image Zoom dengan Jquery</a></div>
    <div class="list">
    <a href="http://creatingwebsite-Johny Woods.blogspot.com/2011/02/membuat-sliding-loginregister-form.html">Membuat Sliding Login/Register Form Panel di Blog</a></div>
    <div class="list">
    dan seterusnya ............................................................... </div>
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    <div class="list">
    <a href="http://creatingwebsite-Johny Woods.blogspot.com/2011/02/membuat-efek-image-zoom-dengan-jquery.html">Membuat Efek Image Zoom dengan Jquery</a></div>
    <div class="list">
    <a href="http://creatingwebsite-Johny Woods.blogspot.com/2011/02/membuat-sliding-loginregister-form.html">Membuat Sliding Login/Register Form Panel di Blog</a></div>
    <div class="list">
    dan seterusnya ............................................................... </div>
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    <div class="list">
    <a href="http://creatingwebsite-Johny Woods.blogspot.com/2011/02/membuat-efek-image-zoom-dengan-jquery.html">Membuat Efek Image Zoom dengan Jquery</a></div>
    <div class="list">
    <a href="http://creatingwebsite-Johny Woods.blogspot.com/2011/02/membuat-sliding-loginregister-form.html">Membuat Sliding Login/Register Form Panel di Blog</a></div>
    <div class="list">
    dan seterusnya ............................................................... </div>
    </div>
    </div>
    </div>
    </div>
    </form>

    <script src="http://johnytemplate.googlecode.com/files/tab_view.js">
    </script>
    <script type="text/javascript">
    tabview_initialize('TabView');
    </script>
  3. Latest Articles
    Script code that is installed:
    <div style="background: none repeat scroll 0% 0% rgb(242, 242, 242); border: 1px solid rgb(204, 204, 204); height: 200px; overflow: auto; padding: 10px;">
    <span id="pbl_labels"></span>
    <div id="pbl_posts">
    Recent Posts </div>

    <script type="text/javascript">
    var jumlah_maksimum_post = 10;
    var dengan_ringkasan = true;
    var jumlah_karakter_ringkasan = 100;
    </script>

    <script src="http://kauman.googlecode.com/files/recentpostsbylabel.js">
    </script>

    <script src="http://creatingwebsite-Johny Woods.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed">
    </script></div>
    At the bottom, change its URL with the URL of your blog
  4. To make the first letter in the post to be great as it's easy in this post, please read the tutorial on Creating Great Letter (Drop Cap) on Early Post.
It just seems that should be installed so similar to a blog that I use this, for other parts you can create your own or modify itself according to taste. Whoa yeah almost forgot I included a link below where you can see the demo and can download it for free.
NB:

    
Those who want the look of this two column template like that I use, please go to this link.
    
Once you've downloaded and extracted the file, there are two xml files one by using the show / hide comment and one without show / hide comment
    
If there is a problem with the download link can ask for comment or confirmation box to johnytemplate@gmail.com.
    
For the tutorial Johny Portal is still under construction, so please be patient
Note:

    
If there's a problem with your static page in my template please read this Remove Automatic Readmore at Static Page Blogger or re-download it then you can upload the updates one (only for Creating Website templates and Johny Simple Magazine).

    
And for Johny Portal, Website and Johny Magazine Creating user templates, change this code (post body close to the header):
#crosscol-wrapper{margin:0 auto;padding:0 auto}
Into :
#crosscol-wrapper{margin:0 auto;padding:5px}

No comments :

No comments :

Post a Comment