Geeklines Responsive Blogger Template

GeekLines Blogger Template - Merupakan sebuah template blogger 100% gratis, yang di desain dengan HTML5 dan sepenuhnya divalidasi. Template ini sangat cocok untuk untuk website, blog aplikasi, dll.

Fitur Template :

Desain By : Ayuda Bloggers
Url : www.ayuda-bloggers.info
Dibuat dengan konsep HTML5
Easy Slider 1.7, yang dapat dikonfigurasi dari feed.
Berisi struktur unik dalam entri indeks
Sistem komentar Disqus
Tidak menyertakan link atribusi, sehingga Anda dapat menggunakan dan memodifikasi secara bebas.
Semua pengkodean berjalan dengan relevan

Panduan konfigurasi Template :
Validasi Template : Temukan kode dibawah ini :


<html lang='es' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Kemudian ganti dengan kode dibawah ini :


<html lang='es'>

Langkah ini diperlukan setiap kali Editor HTML dimulai dan perubahan disimpan.

Sertakan informasi di Meta tags: Anda perlu mencari baris berikut untuk mengkonfigurasi secara terpisah sesuai dengan preferensi Anda:


<meta content='DESCRIPCIÓN DE TU BLOG' property='og:description'/>

Atur slider: slider ini didasarkan pada Easy Slider 1.7, Anda dapat memodifikasi parameter berikut dalam script:


<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $("#slider").easySlider({
auto: true,
speed: 750,
pause: 4000,
continuous: true
 
 });
});
//]]>
</script>

Anda harus mengganti nilai berikut:
auto: true (perubahan palsu untuk membuat slider pergi ke manual).
speed: 750 (kecepatan transisi)
pause: 4000 (waktu antara gambar)
continuous: true (Pada akhirnya menghabiskan semua entri, kembali lagi ke pertama)

Untuk script mendeteksi tag tertentu, memodifikasi baris berikut:


<script src='/feeds/posts/default/-/Smartphones?orderby=published&amp;amp;alt=json-in-script&amp;amp;callback=showgalleryposts&amp;amp;max-results=20'/>

Ganti kata "Smartphone" sesuai label yang sobat ingin tampilkan.
sobat juga harus mencari kode:


<div id='latest-posts-title'>Últimos Artículos en Smartphones</div>

Kemudian ganti judul tersebut sesuai keinginan sobat.

Mengatur menu atas: Sobat harus mengatasi setiap elemen dari menu untuk URL yang sesuai, bersama dengan teks yang ingin sobat sertakan. kemudian cari kode seperti dibawah ini dan silakan sesuaikan sendiri :


<header id='bar-outer'>
      <nav id='topbar' role='navigation'>
        <a href='/' id='blog-logo'>
          <data:blog.title/>
        </a>
        <a href=''>
          Android
        </a>
        <a href=''>
          Aplicaciones
        </a>
        <a href=''>
          Windows Phone
        </a>
        <a href=''>
          iOS
        </a>
        <a href=''>
          Redes Sociales
        </a>
        <a href=''>
          Login
        </a>
      </nav>
    </header>

Contoh :


<header id='bar-outer'>
<nav id='topbar' role='navigation'>
<a href='/' id='blog-logo'>
<data:blog.title/></a>
<a href='http://alexjoen.web.id/search/label/Tutorial Blog'>Tutorial Blog</a>

<a href='http://alexjoen.web.id/search/label/CSS'>CSS</a>

<a href='http://alexjoen.web.id/search/label/SEO'>SEO</a>

<a href='http://alexjoen.web.id/search/label/Tutorial Komputer'>Tutorial Komputer</a>

<a href='http://alexjoen.web.id/search/label/Blogazine'>Blogazine</a>

<a href='https://accounts.google.com/ServiceLogin?service=blogger'>Login</a>
      </nav>
    </header>

Memodifikasi biografi penulis: Jika blog sobat hanya memiliki satu penulis, maka akan terlihat sebagai berikut:


<aside id='post-author'>
 
         <div id='author-about'>
 
           <img class='left' expr:alt='data:post.author' id='author-image' src='https://lh6.googleusercontent.com/-cQU2h9jqgiw/AAAAAAAAAAI/AAAAAAAAAAA/Gw3x4qIKr3M/s100-c/photo.jpg'/>
           <div id='author-name'>Escrito por <a expr:href='data:post.authorProfileUrl' rel='author' title='Perfil del autor'>
             <data:post.author/></a></div>
 
           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
       <div class='clearfix'/>
 
     </aside>

Sobat harus mengubah URL dari gambar dan beberapa teks.

Pembaharuan: Jika blog sobat memiliki 2 atau lebih penulis, maka sobat harus menggunakan kondisional:


<b:if cond='data:post.author == &quot;Tu nombre&quot;'><!-- Tu mini-biografía -->
      <aside id='post-author'>
 
         <div id='author-about'>
 
           <img class='left' expr:alt='data:post.author' id='author-image' src='https://lh6.googleusercontent.com/-cQU2h9jqgiw/AAAAAAAAAAI/AAAAAAAAAAA/Gw3x4qIKr3M/s100-c/photo.jpg'/>
           <div id='author-name'>Escrito por <a expr:href='data:post.authorProfileUrl' rel='author' title='Perfil del autor'>
             <data:post.author/></a></div>
 
           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
       <div class='clearfix'/>
 
     </aside>
</b:if>
 
<b:if cond='data:post.author == &quot;Nombre de otro autor&quot;'> <!-- La biografía de otro autor-->
      <aside id='post-author'>
 
         <div id='author-about'>
 
           <img class='left' expr:alt='data:post.author' id='author-image' src='https://lh6.googleusercontent.com/-cQU2h9jqgiw/AAAAAAAAAAI/AAAAAAAAAAA/Gw3x4qIKr3M/s100-c/photo.jpg'/>
           <div id='author-name'>Escrito por <a expr:href='data:post.authorProfileUrl' rel='author' title='Perfil del autor'>
             <data:post.author/></a></div>
 
           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
       <div class='clearfix'/>
 
     </aside>
</b:if>

Ganti dengan nama yang sesuai, tergantung pada jumlah penulis.

Konfigurasi sistem komentar: Default komentar dari template ini menggunakan Disqus, tetapi Anda dapat memilih untuk sistem lain seperti IntenseDebate, Livefyre Google atau komentar hack blogger dan yang lainnya.
Konfigurasi Disqus: langkah pertama yang harus sobat lakukan adalah membuat akun di Disqus silakan klik DISINI untuk sign-up setelah itu sobat akan medapatkan link disqus sobat seperti punya ane http://disqus.com/kolomtutorial/ langkah selanjutnya cari kode dibawah ini :


var disqus_shortname = &#39;kolomtutorial&#39;; // required: replace example with your forum shortname

Ganti tulisan "kolomtutorial" dengan url name disqus sobat.

Konfigurasi kotak komentar dengan sistem lain: Dalam hal ini ane akan mencontohkan penggantian sistem komentar Disqus dengan Google+, langkahnya cari kode seperti ini :


<div id='comments'>          
    <div id='disqus_thread'/>
    <script type='text/javascript'>
        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
        var disqus_shortname = &#39;demoblogayudabloggers&#39;; // required: replace example with your forum shortname
 
        /* * * DON&#39;T EDIT BELOW THIS LINE * * */
        (function() {
            var dsq = document.createElement(&#39;script&#39;); dsq.type = &#39;text/javascript&#39;; dsq.async = true;
            dsq.src = &#39;//&#39; + disqus_shortname + &#39;.disqus.com/embed.js&#39;;
            (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(dsq);
        })();
    </script>

</div>

Kemudian sobat hapus antara kode <div id='comments'> sampai kode </div> hingga menjadi kosong seperti contoh dibawah ( tanpa titik )


<div id='comments'>          
    ..............................
    ..............................
        .........................................................................
        .........................................................................
        .........................................................................
        .........................................................................
        .........................................................................
        .........................................................................
        .........................................................................
        .........................................................................
    ...........

</div>

Kemudian masukan script kode komentar Google + :


<script type='text/javascript'>
//<![CDATA[
 window.___gcfg = {lang: 'es'};
 (function() {
   var crearjsplus = document.createElement('script'); crearjsplus.type = 'text/javascript'; crearjsplus.async = true;
   crearjsplus.src = 'https://apis.google.com/js/plusone.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(crearjsplus, s);
 })();
//]]>
</script><div class="g-comments" expr:data-href="data:post.url" data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD" />

Mengatur sidebar dalam setiap entry: Hal ini penting untuk mengetahui bahwa sidebar kanan muncul dalam entri dan halaman statis dan harus ditulis secara manual.
Untuk menyertakan gadget, Sobat harus melakukannya dengan menggunakan kode berikut:


<div class='sidebar-widget'> 
 <div class='sidebar-title'>Título del gadget</div>
     <div class='sidebar-widget-content'>
      Texto o código dentro del gadget.
     </div>
     </div>

Catatan:
Sobat dapat membuat blok tambahan tanpa ruang internal untuk mengambil keuntungan 100% dari gadget. dan langkahnya menggunakan kode berikut ini sebagai gantinya:


<div class='sidebar-widget non-padding'> 
    <div class='sidebar-widget-content'>
       Texto o código dentro del gadget.
    </div>
</div>

Mengubah semua link jaringan sosial: Sobat harus mengkonfigurasi secara manual, cari kode dibawah ini dan sesuaikan dengan jejaring sosial sobat :


<div id='subscription'>
         <aside id='twitter-subs'>
         <a class='twitter-follow-button' data-lang='es' data-show-count='false' href='https://twitter.com/ayudabloggers'>Seguir a @ayudabloggers</a>
         </aside>
         
         <aside id='facebook-sub'>
           <div class='fb-like' data-href='http://www.facebook.com/cloudx18admin' data-send='false' data-show-faces='false' data-width='245'/>
         </aside>
         
         <aside id='gplus-sub'>
           <div class='g-plus' data-height='131' data-href='https://plus.google.com/117852954383455114075' data-width='265'/>
         </aside>
        </div>

Untuk link yang bearada di bawah atau footer silakan di edit:


<aside id='about-info'>
        &#169; 2013 <data:blog.title/> Todos los derechos reservados.  <span class='right-text right'><a href='http://www.twitter.com/ayudabloggers'>Twitter</a> | <a href='http://www.facebook.com/cloudx18admin'>Facebook</a> | <a href='https://plus.google.com/u/0/112020346592923778561'>Google+</a></span>
         
        <div class='clearfix'/>
      </aside>

Konfigurasi link di akhir template/footer paling bawah: silakan sobat cari kode dibawah ini kemudian silakan untuk disesuaikan dengan keperluan sobat.


<footer id='sub-footer'>
        <a href='/'>Inicio</a>
        <a href='/'>Publicidad</a>
        <a href='/'>Política de privacidad</a>
        <a href='/'>Términos de uso</a>
        <a href='/'>Mapa del sitio</a>
        <a href='/'>Patrocinadores</a>
        <a href='/'>Colaborar</a>
        <a href='/'>Acerca de</a>
        <a href='/'>Contacto</a>
      </footer>

Demikian teknis pemasangan dari Geeklines Responsive Blogger Template, semoga dapat membantu dan terimaksih banyak kunjungannya

Source : http://www.ayuda-bloggers.info