Geeklines Responsive Blogger Template

Geeklines Responsive Blogger Template, free template, 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 :
  1. Desain By : Ayuda Bloggers
    Url : www.ayuda-bloggers.info
  2. Dibuat dengan konsep HTML5
  3. Easy Slider 1.7, yang dapat dikonfigurasi dari feed.
  4. Berisi struktur unik dalam entri indeks
  5. Sistem komentar Disqus
  6. Tidak menyertakan link atribusi, sehingga Anda dapat menggunakan dan memodifikasi secara bebas.
  7. 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

Berlangganan update artikel terbaru via email:

10 Responses to "Geeklines Responsive Blogger Template"

  1. mas joens,,,itu kok di demo nya bahasa portugis ya?
    apa kalau nanti di isntal juga seperti itu bahasanya

    ReplyDelete
    Replies
    1. oh gitu tenang aja mas, kalau bahasa menyesuaikan......

      Delete
  2. sudah templatenya bagus, ada panduannya juga.
    mantab mas, saya mau nyedot buat koleksi :)

    ReplyDelete
  3. iya saya juga lagi ngoleksi template responsif buat blog baru, nice info

    ReplyDelete
  4. keren sobh template nya .. ijin pakek dulu yaa

    ReplyDelete
  5. Keren sob tutorialnya sangat bermanfaat. Terimakasih akan saya coba langsung di blog saya perawatan wajah

    ReplyDelete
  6. ajibb infoonya makasih ya...

    Jangan lupa kunjungi juga berita megapolitan terkini
    Infonitas.com

    ReplyDelete
  7. I really appreciate your professional approach. These are pieces of very useful information that will be of great use for me in future.

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel