Responsive blogger template dengan 4 pilihan warna, sidebar di sebalah kanan dan 3 kolom footer, 2 jenis view yaitu list dan grid, emoticon, recent post/Artikel terbaru, komentar terbaru dan artikel terkait menggunakan JSON ajax sehinngga loading lebih cepat.

Gremble Responsive Blogger Template by MKR - MKR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

Responsive blogger template dengan 4 pilihan warna, sidebar di sebalah kanan dan 3 kolom footer, 2 jenis view yaitu list dan grid, emoticon, recent post/Artikel terbaru, komentar terbaru dan artikel terkait menggunakan JSON ajax sehinngga loading lebih cepat.

Gremble Responsive Blogger Template by MKR

Gremble Responsive Blogger Template by MKR

Gremble yah begitu saya namakan template ini dengan tampilan yang terlihat sederhana. Template ini merupakan template blogspot yang resposive dan saya membuatnya dengan 4 pilihan warna. Dengan beberapa fitur diataranya emoticon, tab widget, related post dan lain-lain.

Fitur-Fitur dari Gremble Blogger Template

  1. Responsive blogger Template.
  2. JSON Search Result dengan Ajax sehingga loadingnya lebih cepat(Hanya judul).(Script dari Mas Taufik DTE)
  3. 2 jenis view yaitu list dan grid dengan pengingat sesi(Cookie)
  4. Sedikit costum CSS pada blogger lightbox.
  5. sidebar dikanan dan 3 kolom untuk footernya.
  6. Tab Widget pada sidebarnya
  7. Related Post/Artikel terkait dengan Ajax sehingga loadingnya cepat(script dari moretechtips).
  8. Emoticon pada bagian komentar.
  9. Menu dengan CSS3 checked pada saat layar lebih kecil
  10. Recen post / Artikel terbaru dalam bentuk carousel di atas post(tampil diselain halaman home)
  11. Sedikit optimasi SEO.
  12. Support modern browser IE9, Mozilla, Chrome
  13. Ada 4 Pilihan warna yaitu Grey(Abu-abu), Biru, Hijau dan Merah.
Satank Mkr Beri Komentar
Bagikan kepada teman!
Garis

46 comments:

  1. Thanks for post bro... I've a question :
    how I can encode HTML like this:

    <script type='text/javascript'>
    //35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p
    =p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('4 1e={H:1o,17:A,F:1x,O:"1C 1D 1I",1d:"1l I",10:A,x:27,Y:"B://1.26.1c.u/-25/24/23/22/21/20.1J"};i $$$(a){13 j.1E(a)}4 2=1e,6=$$$("n-q-6"),o=$$$("r-I-1B"),y=$$$("r-I-1y"),7="";i P(l){4 k=l.n.T?l.n.T:"",a,g,e;7=""+2.O+" &X;"+6.p+"&X;";7+="";3(k===""){7+=""+2.1d+""}12(4 d=0;d<2.H;d++){3(d==k.G){16}4 b=1v 1t(6.p,"1q"),f=k[d],h=f.1n.$t.z(b,""+6.p+"");12(4 c=0;c]*>/g,"");3(g.G>2.F){g=g.1r(0,2.F)+"..."}g=g.z(b,""+6.p+"");7+=\'<1s 5="1u:\'+2.x+"18;1w:"+2.x+\'18;" U="\'+e+\'" N="" /><a rel="nofollow">\'+h+"</a>"+g+""}7+="";o.1h=7;y.5.m="C";o.5.m="15"}$(j).1F(i(){$("1G").1H(\'<11 5="J-1K:1L;1M:1N 0;1O-1k:1Q;">1R 1S 1T : <a rel="nofollow">1W</a> | <a rel="nofollow">1Z.u</a>\')});i V(){4 a=j.R("8");a.1i="J/1g";a.1f="r-n-8";j.19("14")[0].Q(a)}V();i 28(){o.5.m="C";y.5.m="15";4 a=$$$("r-n-8"),b=j.R("8");b.1f="r-n-8";b.1i="J/1g";b.U="B://"+29.2a.2b+"/2c/2d/L?N=2e-v-8&q="+6.p+"&2f-2g="+2.H+"&2h=P";a.2i.2j(a);j.19("14")[0].Q(b);13 2k}i 2l(){o.1h="";3(6.p===""){o.5.m="C";y.5.m="C"}};',62,146,'||config|if|var|style|input|skeleton|script||||||||||function|document|||display|feed|resultContainer|value||search|||com|in|mark|thumbSize|resultLoader|replace|true|http|none|li|href|summaryLength|length|numPost|result|text|link|summary|else|alt|resultTitle|showResult|appendChild|createElement||entry|src|appendScript|h4|quot|fallbackThumb|ol|resultThumbnail|div|for|return|head|block|break|summaryPost|px|getElementsByTagName|thumbnail|media|blogspot|noResult|searchFormConfig|id|javascript|innerHTML|type|content|size|No|rel|title|9999|url|ig|substring|img|RegExp|width|new|height|200|loader|target|_blank|container|Result|For|getElementById|ready|body|append|Keyword|gif|align|center|margin|5px|font|alternate|11px|Blogger|Template|By|mkr|site|MKR|www|ivythemes|IVYthemes|grey|s1600|e7XkFtErqsU|AAAAAAAABAU|Tp0KrMUdoWI|htG7vy9vIAA|bp|50|updateScript|window|location|hostname|feeds|posts|json|max|results|callback|parentNode|removeChild|false|resetField'.split('|'),0,{}))
    //]]>
    </script>

    BalasHapus
    Balasan
    1. i don't know where to encode that script..
      i saw it's hard to encode..
      btw why you want to encode that script??
      and where you get it??

      Hapus
    2. hi... I find this code in Pingrey blogger template (from ivythemes). I'm a designer from Tunisia and I would like encode my copyrights in my templates with this script :) (please add me in google+)

      Hapus
    3. ohh...i see the code is not complete..
      that why it's can't encode..
      btw that script from Mas Taufik ~ DTE
      check this : http://hompimpaalaihumgambreng.blogspot.com/2012/09/membangun-aplikasi-quick-search-dengan.html
      that JSON search..
      in that script i just put some code like this:
      document).ready(function () {
      $("body").append('<div style="text-align:center;margin:5px 0;font-size:11px;">Blogger Template By : <a href="http://mkr-site.blogspot.com/">MKR</a> | <a href="http://www.ivythemes.com/">IVYthemes.com</a></div>')
      });

      but is not perfect to protect your's copyrights bcoz is easy to encode use jsbeautifier..
      btw Welcome To My blog..

      regards.
      MKR

      Hapus
  2. wah keren mas..
    udah saya edit akhir'a lolos juga nih dARI validator.w3.org..
    Tahnks mas. (h)

    http://4.bp.blogspot.com/-xczODhVZhj4/UM8NVg0IjZI/AAAAAAAAA_E/Mx4EeFZdEnU/s1600/pased.jpg

    wi4u.blogspot.com

    BalasHapus
    Balasan
    1. untuk halaman selain item dan page mungkin bisa saja lolos dari validator.w3.org..
      tapi untuk bagian item sama page(laman)nya agak sulit apalagi kalo memakai thread komentarnya blogspot..

      Hapus
    2. oiya mas, nambah related post'a gimna? cuma ada 4 item? saya ga nemu" nih.. [-(

      Hapus
    3. Oh..klo template diatas saya menggunakan Related Posts Widget for Google Blogger v2.0 dari moretechtips dan sudah saya setting maksimalnya 10..
      jQuery(document).ready(function(){
      jQuery("#related_posts").relatedPostsWidget({
      related_title: "Related Posts",
      thumb_size: "s100-c",
      max_posts: 10,
      thumb_default: "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif"});
      });

      untuk mengatur maksimalnya silahkan rubah max_posts jadi sesuai keinginan..
      menurut saya related post ini sangat ketat dalam memasukkan yang mana artikel yang terkait berdasarkan dari label/kategori..
      jadi jika tidak memiliki label yang terkait pasti sulit untuk muncul..


      Hapus
    4. oh gitu, Ok Thanks mas, saya tunggu posting terbaru berikutnya.. (o)

      Hapus
  3. How to add sliding post jquery widget? which is present at the top of post page in Gremble blogger template. I want to add it to my blog.

    BalasHapus
  4. hi! can you design a RTL (right to left) template like wp tutsplus for me? and thanks very much (f)

    BalasHapus
  5. I want to add 3 footer widgets to JPStation blogger template, would you please help me?

    BalasHapus
  6. MasyaAllah, sungguh cantik dan stylish :D

    Izin download dan minum ya Mas (c)

    BalasHapus
  7. Please tell me How to highlight admin comments? Like you did on this page

    BalasHapus
    Balasan
    1. i just use CSS to highlight it..
      look like this:
      .comments .comments-content .icon.blog-author {
      display: block;
      width: 62px;
      float: left;
      position: absolute;
      height: 20px;
      right: 10px;
      top: -3px;
      background-color: #B60606;
      background-image: url(http://1.bp.blogspot.com/-MOJziV6FR4E/UMCA3MF-WYI/AAAAAAAAG-Q/pjBLnR_QfOo/h25/authormkr.jpg);
      background-position: -12px -2px;
      border-radius: 0 0 4px 4px;
      overflow: hidden;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
      }

      Hapus
    2. Thank you so much for the code. I have added it to my template.

      Hapus
  8. Hey Satank Mkr, thanks so much for the template, looks quite appealing. I would want to tweak one thing though: Can't I set the default view to list styled instead of the grid view as the grid view don't have tiitles of the articles. Waiting eagerly for your reply.

    BalasHapus
  9. Can you please help me, when I use this theme instead of "Categories" dropdown menu it says "Error Loading Feed!"

    When I use the search box the result is "Error Loading Feed." There are Error Loading Feed messages in other places too. Do you know why?

    BalasHapus
    Balasan
    1. maybe your blog feed is not allowed..
      go here to check:
      Blogger - Setting - Other
      in Site Feed
      Allow Blog Feed set Full

      Hapus
  10. Hi Admin.
    How do I add article titles? I've added a sample image. I'd appreciate if you help.

    http://b1212.hizliresim.com/14/z/hhgnm.jpg

    BalasHapus
    Balasan
    1. Sorry this template can't show title like that..
      title just show in bottom of image..
      to show it follow this.

      Show the title find this
      .post h2.post-title,.infox {position: absolute;left: -9999px}
      and delete ".post h2.post-title, "
      will like this:
      .infox {position: absolute;left: -9999px;}
      and put this code :
      .post h2.post-title {margin: 2px 0;padding: 0 8px;max-height: 42px;overflow: hidden;}
      after .infox {position: absolute;left: -9999px;}

      To make list view title look good
      find this code :
      .post.list h2.post-title{font-size:170%;margin-bottom:5px}
      replace with :
      .post.list h2.post-title{font-size:170%;margin-bottom:5px;padding: 0;max-height: 50px;}

      To make the post area same height:
      find this
      .post{width:29.3%;display:inline-block;float:left;margin:0 2% 15px;padding:0;background-color:whiteSmoke;-moz-box-shadow:0 0 20px #F0F0F0 inset,0 1px 4px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.3);-webkit-box-shadow:0 0 20px #F0F0F0 inset,0 1px 4px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.3);box-shadow:0 0 20px #F0F0F0 inset,0 1px 4px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.3)}
      replace with:
      .post{width:29.3%;display:inline-block;float:left;margin:0 2% 15px;padding:0;background-color:whiteSmoke;-moz-box-shadow:0 0 20px #F0F0F0 inset,0 1px 4px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.3);-webkit-box-shadow:0 0 20px #F0F0F0 inset,0 1px 4px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.3);box-shadow:0 0 20px #F0F0F0 inset,0 1px 4px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.3);height: 277px;}

      Than find this:
      .post.list{width:96%;display:block;float:none;margin:0 2%;border-top:1px solid #E0E0E0}
      replace with :
      .post.list{width:96%;display:block;float:none;margin:0 2%;border-top:1px solid #E0E0E0;height: auto}

      To make the post area same height (screen max width 989px)
      put this code
      .post {height: 250px;}
      before :
      a.thumbx,.thumbx img{height:120px}

      To make the post area same height (screen max width 767px)
      put this code:
      .post {height: 230px;}
      before:
      a.thumbx,.thumbx img{height:100px}

      Hapus
    2. Thanks for your answer. I did as you said happened.

      The other question is:

      How to add a logo to the left?

      Anonymous How do I change font?

      Hapus
    3. wkwkwkw nih bule di kasih hati malah minta nambah terus..

      Hapus
  11. mas gimana cara menghilangkan categories yang ada di samping kiri, kode mana yg di hapus,.. terima kasih sebelumnya.

    BalasHapus
  12. Cara edit Categorynya gimana tuh,,. sob>?

    BalasHapus
  13. i downloaded this template and i want to use it. but what code i need to insert in recent comments. in config notepad there is no code for recent comments

    BalasHapus
  14. how do I the title appears below the image when in Grid

    BalasHapus
  15. mas cara ubah categorienya yg disamping search itu gmna ?

    BalasHapus
  16. Does this template available on Wordpress, please let me know.

    BalasHapus
  17. kenapa ya gambarnya gak nampak?
    http://prntscr.com/29ksmy

    BalasHapus
  18. mau tanya gimana caranya menampilkan sebagian saja categoris-nya soalnya terlalu panjang ke bawah

    BalasHapus
  19. HI, very good article you have written. Thanks for this post and Such a nice and attractive blog you have shared with us.

    My Blogger Blog: http://www.mybloggerblog.com/

    BalasHapus
  20. Shalom admin, cara hapus categories itu gimana ya, bisa kasih petunjuk? Terimakasih sblmnya.

    BalasHapus
  21. Hello Admin,

    How do I change the size of post title?

    BalasHapus
  22. assalamualaikum bang, keren templatenya..
    bisa ga tampilan defult homepagenya diganti jadi LIST?
    code apa yg harus dirubah bang?
    trimakasih sudah berbagi (f)

    BalasHapus
  23. sama seperti template lainnya ... gambar gak mau muncul di halaman awal ;(

    BalasHapus
  24. gan, ini kl template gremble ini postingnya di setting list baru terus jadi grid gt gmn?
    mohon infonya gan :)
    makasih.

    BalasHapus
  25. How to add default thumbnail to all posts.
    please help.

    BalasHapus
  26. Hello admin, am using rifqiy template 3 of the sections on my homepage dont give any posts! They say No result! Or Error loading feed.

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah

 
Design by MKR Copyright © 2012 ~ 2013 Powered by Blogger
TOP