Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html dir="ltr">
​
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Xmax - Portfolio OnePage Blogger Template</title>
<style>
    .note {
        background-color: #889C9E;
        color: #fff;
        padding: 25px;
        border-radius: 10px;
        font-size: 16px;
        box-shadow: 0px 40px 20px -40px #858585;
    -webkit-box-shadow: 0px 40px 20px -40px #858585;
    -moz-box-shadow: 0px 40px 20px -40px rgb(133, 133, 133);
    -o-box-shadow: 0px 40px 20px -40px rgb(133, 133, 133);
    }
​
    .contents {
    border-top: 1px solid #111;
    padding-top: 15px;
    margin: 20px 0;
    }
​
    .borderTop {
    width: 60%;
    }
​
    #toc {
    margin-bottom: 25px;
    float: right;
    width: 100%;
    background-color: #606D77;
    }
​
    #toc ul {
    display: inline-block;
    padding: 0;
    }
​
    #toc li a {
    padding: 13px 15px;
    background-color: #606D77;
    color: #FFF;
    }
​
    #toc li a:hover {
    background-color: #111;
    }
​
    #toc li {
    list-style: none;
    display: inline-block;
    float: left;
    }
​
​
    body {
    background-color: #FAF8F8;
    font-family: 'Droid Arabic Kufi' cursive;
      font-style: normal;
      font-weight: 400;
      font-size: 14.2px;
    }
​
    a {
    text-decoration: none;
    color: #f1a12e;
    }
​
    * {
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    }
​
​
    #container {
    overflow: hidden;
    max-width: 1000px;
    margin: 0 auto;
    width: 97%;
    background-color: #FFF;
    border: 1px solid #DDD;
    padding-bottom: 35px;
    margin-top: 25px;
    position: relative;
    border-bottom: 3px solid #f1a12e;
    -moz-box-shadow: 0 0 15px rgba(0,0,0,0.31);
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.31);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.31);
​
    }
​
    h.main-title {
    line-height: 5em;
    font-size: 1.5em;
    background-color: #f1a12e;
    color: #FFF;
    display: block;
    text-align: center;
    padding: 15px 0;
    }
​
​
​
    ::-moz-selection {
        background-color: #F60; 
        color: #fff;
    }
    ::selection {
        background-color: #F60;
        color: #fff;        
    }
​
    img {
    max-width: 100%;
    margin: 15px auto;
    display: block;
    border: 1px solid #DDD;
    box-shadow: 0px 40px 20px -40px #858585;
    -webkit-box-shadow: 0px 40px 20px -40px #858585;
    -moz-box-shadow: 0px 40px 20px -40px rgb(133, 133, 133);
    -o-box-shadow: 0px 40px 20px -40px rgb(133, 133, 133);
    }
    #content-wrapper {
    margin: 0 20px;
    }
​
    pre {
    background-color: #222;
    direction: ltr;
    text-align: left;
    color: #FFF;
    padding: 25px 20px;
    border-left: 25px solid #FC2929;
    }
</style>
</head>
​
<body>
​
​
<div id="container">
​
        
<h class="main-title">&ldquo;Xmax - Portfolio OnePage Blogger Template&rdquo; v1.0</h>
​
<center>
<div id="toc">
        <ul>
        
            <li><a href="#create">Create blog</a></li>
            <li><a href="#install">Install</a></li>
            <li><a href="#layout">Layout Section</a></li>
            <li><a href="#custom">Template Desginer</a></li>
            <li><a href="#sittings">Important Sittings</a></li>
            
            
                    </ul>
                    </div>
    </center>
                    
<div id="content-wrapper">
    
    
        <div class="borderTop">
            <div class="span-6 colborder info prepend-1">
                <p class="prepend-top">
                    <strong>
                    Created on: 18/6/2014<br>
                    by: Templateism - Mohamed Abo El-Ghranek<br>
                    Copyright © 2014 <a href='http://www.templateism.com'>Templateism.com</a>
                    </strong>
                </p>
            </div><!-- end div .span-6 -->      
    
        </div><!-- end div .borderTop -->
        
        
            <div class="contents" id="create">
        
        <h3><strong>1) Create New blog</strong> - <a href="#toc">Top</a></h3>
        
        <p>Go to blogger.com and sign in with your google accountand create new blog</p>
        
        <img src="http://3.bp.blogspot.com/-3eSxkJTNjoU/U6cpQnE0gUI/AAAAAAAAEVI/w1O49c4GMTA/s1600/create-1.jpg" />
        <img src="http://1.bp.blogspot.com/-pIn2zdxDMHo/U6cpRBCxe-I/AAAAAAAAEVM/apV0LpEiiyc/s1600/create-2.jpg" />
​
</div>  
​
        
    <div class="contents" id="install">
        
        <h3><strong>2) Install the template</strong> - <a href="#toc">top</a></h3>
    
        
        <img src="http://2.bp.blogspot.com/-9RftybRtsS4/U6cpWQKzoiI/AAAAAAAAEV0/5RsF2qC2xaU/s1600/install-1.jpg" />
        <img src="http://1.bp.blogspot.com/-z9sWo827tas/U6cpXdcE9mI/AAAAAAAAEWA/aACSNb93bLY/s1600/install-2.jpg" />
        <img src="http://1.bp.blogspot.com/-gEUYdnDfZ4g/U6cpXE0JVSI/AAAAAAAAEV8/q4o_TbN4aec/s1600/install-3.jpg" />
​
        <div class='note'><span>Note: If you face any error when you try to install the template, open the XML file with notepad and copy all codes on it and paste them into the blog HTML EDIT where you can replace old template codes with the new one</span></div>
​
</div>  
​
​
​
    <div class="contents" id="layout">
        
        <h3><strong>3) Layout Section</strong> - <a href="#toc">Top</a></h3>
    
        <img src="assets/images/layout-1.jpg" />    
        
                       <hr />
​
        <p> A) Top Menu </p>
        
             <img src="http://2.bp.blogspot.com/-N0zjf_Jiwco/U6cpb7JBh0I/AAAAAAAAEWo/3XlSdB9x9sk/s1600/layout-21.png" />
               <img src="http://1.bp.blogspot.com/-VR7X4ApvrSs/U6cpcbl2-TI/AAAAAAAAEW0/RXwbXMF93so/s1600/layout-22.png" />
                           <img src="http://2.bp.blogspot.com/-n50tc0H8fyg/U6cpeplxvVI/AAAAAAAAEXQ/0mdWxE-NxyY/s1600/layout-28.png" />
​
               
               <p> 1- Add the name of linke you want to add to the top menu </p>
               <p> 2 - Add the link of your menu item </p>
               <p> 3 - click on add link </p>
               <p> 4- Delete or Edit your links </p>
               
               <hr />
        <p> B) Header Widget </p>
​
                     <img src="assets/images/layout-23.png" />
               <img src="assets/images/layout-24.png" />
               
               <p> 1- Add your blog title here </p>
               <p> 2- Your blog short description </p>
               <p> 3- Add logo image from your computer </p>
               <p> 4- Add logo from URL </p>
               <p> 5- read it and choose one </p>
               <p> 6- Save your changes </p>
​
                           <hr />
                           
       <p> C) Add widget </p>
       
                         <img src="http://4.bp.blogspot.com/-r74Gdibc0Qg/U6cpeORrveI/AAAAAAAAEXM/De-Ce6czy3I/s1600/layout-26.png" />
               <img src="http://1.bp.blogspot.com/-z7p4geETYAs/U6cpeu1hS4I/AAAAAAAAEXU/hKDm4w_z1VQ/s1600/layout-27.png" />
                 <img src="http://4.bp.blogspot.com/-eOpnJi2My3o/U6cpfa-FSuI/AAAAAAAAEXk/kC_O97TKouw/s1600/layout-29.png" />
       
                   <hr />
​
                   <p> D) Menu </p>
                 
                 <img src="assets/images/layout-30.png" />
                 <img src="assets/images/layout-31.png" />
​
                   <p> 1) Add a new menu item </p>
                   
                   <p> 2) select your pages from blog to add to menu </p>
                   
                   <p> 3) arrange menu item or delete one </p>
                   
                   <p> 4) Save your changes
                   
                   <p> Also this menu for OnePage Navigation with smooth scrolling, to add those items you need to follow this list of links to each box of the home page <p> 
                   
                   <p> /#top > for Home ... /#about > for About box ... /#feature > for featured posts .. /#content > for blog ... /#our-team > for Team ... /#contact > for Contact us .. for example see the photo below</p>
                   
                                 <img src="http://4.bp.blogspot.com/-uyfY17m_ooc/U6cpiL7CvDI/AAAAAAAAEYE/EonRufhl4mE/s1600/layout-32.png" />
                                   <img src="http://3.bp.blogspot.com/-ntDjZZ5lcIE/U6cpk7Ml7kI/AAAAAAAAEYg/lE-wu0m0R-I/s1600/layout-33.png" />
                   
                   <hr />
                   
                   <p> E) About Widget </p>
                   
                       <img src="http://1.bp.blogspot.com/-Qcbolj_lXU4/U6cpjJbHauI/AAAAAAAAEYM/MDbZLVxKVtc/s1600/layout-34.png" />
                                   <img src="http://3.bp.blogspot.com/-7dKxtGkG64A/U6cpkJl32SI/AAAAAAAAEYU/Dke8p_U6tUQ/s1600/layout-35.png" />
                                   
                                       <img src="http://2.bp.blogspot.com/-SmkcNs_NHoQ/U6cp1bqetZI/AAAAAAAAEZM/8-HJ7PuGbtQ/s1600/layout-38.png" />
                                   
                                       
                   <p> E) Featured Posts Widget </p>
                   
                       <img src="http://1.bp.blogspot.com/-Wht9_diBbUE/U6cpko3BfJI/AAAAAAAAEYY/puy2VF_2YTs/s1600/layout-36.png" />
                                   <img src="http://4.bp.blogspot.com/-fYVMNhCebEg/U6cplYawaqI/AAAAAAAAEYo/6mDjMxghhMs/s1600/layout-37.png" />
                                   
                                       <img src="http://1.bp.blogspot.com/-4iyvnJdJno0/U6cp3YugJGI/AAAAAAAAEZo/9vHqAB-kI5c/s1600/layout-39.png" />
                
 <hr />
 
 <p> F) Team Widget </p>
 
 <img src="http://3.bp.blogspot.com/-roceXNnE1JM/U6cprMgirpI/AAAAAAAAEY8/1yRH3F043t4/s1600/layout-40.png" />
<img src="http://3.bp.blogspot.com/-K_lBlFH5q7A/U6cpsTZjIcI/AAAAAAAAEZE/qNIzU_ksbpk/s1600/layout-41.png" />
  <img src="http://1.bp.blogspot.com/-_SvgSGuN9lw/U6cp3XWaJxI/AAAAAAAAEZg/Lbx-oL0Qtio/s1600/layout-42.png" />
 
  <hr />
  
  <p> G) Contact Us Widget </p>
 
 <img src="http://3.bp.blogspot.com/-FkXQo3oWKUE/U6cp2WJMG5I/AAAAAAAAEZU/oEW6GJ3K2as/s1600/layout-43.png" />
<img src="http://1.bp.blogspot.com/-LqpEluRiX0M/U6cp3csJdPI/AAAAAAAAEZc/6VuiCX5tCaU/s1600/layout-44.png" />
  <img src="http://3.bp.blogspot.com/-8tZKpGEdcKI/U6cp3-S66KI/AAAAAAAAEZw/u9Yr8QcoogI/s1600/layout-45.png" />
 
  <hr />
  
   <p> H) Find Us Widget </p>
 
 <img src="http://3.bp.blogspot.com/-37CCpcfiYRs/U6cp30oCTxI/AAAAAAAAEZs/5gtH_EkN36Y/s1600/layout-46.png" />
<img src="http://3.bp.blogspot.com/-jxa9V-sRV3Q/U6cp4Xj_KkI/AAAAAAAAEZ4/vUT2NwWn0PU/s1600/layout-47.png" />
  <img src="http://1.bp.blogspot.com/-3onR598hUHg/U6cp-cbMD0I/AAAAAAAAEaw/bHSbgq2Qhgo/s1600/layout-48.png" />
   <img src="http://3.bp.blogspot.com/-fQWzxC2onIc/U6cp6wdxMYI/AAAAAAAAEaM/Vxam4ZvrOrE/s1600/layout-49.png" />
    <img src="http://3.bp.blogspot.com/-mahJmaKvrc0/U6cp7cCSz2I/AAAAAAAAEaU/NzRt1MHUhvw/s1600/layout-50.png" />   
    <img src="http://1.bp.blogspot.com/-xSh3CzQmjF8/U6cp-Z3GubI/AAAAAAAAEao/3fkkMAmQ3qg/s1600/layout-51.png" />
​
 
  <hr />
  
  <p> I) Social Icons </p>
        
        <img src="http://2.bp.blogspot.com/-xwP76PJrS14/U6cpfzPH32I/AAAAAAAAEXs/ogdGSi-iG7s/s1600/layout-3.jpg" />
        <img src="http://4.bp.blogspot.com/-AW3zfIE6a1o/U6cppxBKT1I/AAAAAAAAEY0/yz-VVphq2_M/s1600/layout-4.jpg" />
        
   
        <p> Icons Names  </p>
​
        <p> facebook -
twitter -
gplus -
youtube -
instagram -
behance -
pinterest -
linkedin -
skype -
vimeo -
flickr -
blogger -
digg -
dribbble -
github -
Dribbble -
foursquare -
dropbox -
rss -
grooveshark -
yelp -
wordpress -
skydrive -
vine -
tumblr -
Dribbble -
TED -
vimeo -
stumbleupon -
spotify -
soundcloud -
evernote -
reddit -
myspace -
lastfm -
kickstarter -
iMDB</p>
​
<hr />
​
     <p> J) Follow us on facebook </p>
     
     <img src="http://2.bp.blogspot.com/-9VZq8agUb64/U6cpaA3TvMI/AAAAAAAAEWQ/L8Ash3cBtXw/s1600/layout-11.png" />
     <img src="http://2.bp.blogspot.com/-2XxI5pR8k1Y/U6cpbdzwViI/AAAAAAAAEWk/oUjCgTTWces/s1600/layout-12.jpg" />
     
       <p> K) Recent posts widget with shortcode </p>
    
    <p> in sidebars you can add recent posts widget just add anew html/javascript widget and put this code on it </p>
        <pre>&lt;div class="recent-posts"&gt;&lt;/div&gt;</pre>
        
   
​
</div>  
​
    
​
<div class="contents" id="custom">
        
        <h3><strong>4) Customize template</strong> - <a href="#toc">top</a></h3>
    
        
        <img src="http://1.bp.blogspot.com/-g3hFONr7riE/U6cpQorKecI/AAAAAAAAEVE/UyQQTOuyE-Y/s1600/custom-1.png" />
        <img src="http://1.bp.blogspot.com/--m8K9V9rOro/U6cpUG74gXI/AAAAAAAAEVk/sZuNUKPXXO8/s1600/custom-4.jpg" />
​
​
</div>  
​
​
​
<div class="contents" id="sittings">
        
        <h3><strong>5) Important Sittings</strong> - <a href="#toc">top</a></h3>
    
    <p> Enable Responsive design </p>
        <img src="http://1.bp.blogspot.com/-yI5Ai-pb5Qo/U6cp9P5MWJI/AAAAAAAAEac/6DaEAV725Ac/s1600/sittings-1.jpg" />
        <img src="http://1.bp.blogspot.com/-NW6tcCeKK2c/U6cp-RNDuZI/AAAAAAAAEak/hPMMaauDdfk/s1600/sittings-2.jpg" />
        
        <p> Social Meta tags </p>
        
        <img src="http://2.bp.blogspot.com/-8zO8apdJuk8/U6cp-wE5OkI/AAAAAAAAEa0/AuY4D9TBz_k/s1600/sittings-3.jpg" />
        <img src="http://1.bp.blogspot.com/-h2Jg19UgSrk/U6cqAmLe48I/AAAAAAAAEbE/1iT4M51y4pM/s1600/sittings-4.jpg" />
                
    <p> RTL or LTR </p>
    
    <p> this template support rtl directly by change blog Language </p>
                
   <img src="http://1.bp.blogspot.com/-fdRgkzOOAtA/U6cqAkvmJUI/AAAAAAAAEbI/FW4G8t0hE2Q/s1600/sittings-5.jpg" />             
​
</div>  
​
​
</div>
​
​
</div>
</body>
​
</html>
 
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers