Mempercantik Blog
Tampilkan postingan dengan label Mempercantik Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Mempercantik Blog. Tampilkan semua postingan

Masalah Threaded Comment Pada Template Blogger Lama

Masalah Threaded Comment Pada Template Blogger Lama

Berawal dari pertanyaan teman blogger dari Malaysia Haz Issac tentang Threaded Comments yang ada pada salah satu template buatan saya (Mas paper), yang menanyakan bagaimana caranya agar Threaded Comments pada template bisa berfungsi? Setelah mengganti beberapa kode script yang ada, tampilan komentar sudah ada fungsi reply dan delete, tapi permasalahan yang terjadi kemudian fitur reply tidak berfungsi normal, atau ketika diklik hanya ada tulisan javascript pada bagian bawah browser.

threaded comments

Terus terang kebanyakan dari template yang saya buat masih menggunakan fitur blogger lama, sehingga secara default belum dilengkapi fungsi reply atau Threaded Comments yang sudah dikembangkan oleh Blogger baru-baru ini. Kali ini saya akan mencoba memberikan satu tutorial bagi para pengguna template blogger lama (bukan klasik), bagaimana cara mengatasi permasalahan Threaded Comment khususnya bagi mereka yang sudah mengganti kode dengan menambahkan Threaded Comments tapi fitur reply tidak berfungsi normal.

Langkah Pertama

Cara atau metode pertama ini harus Anda lakukan agar Threaded Coments pada blog Anda berfungsi.
  1. Login ke blogger dengan akun Anda
  2. Pada dashboard pilih blog yang akan diberikan Threaded Comments (blogger new interface)
  3. Setelah itu masuk ke Settings >> Posts and Comments
  4. Kemudian pilih Comment Location setting pada posisi Embedded.
  5. Kembali lagi ke Setting, kali ini klik Other, pada Allow blog post pada baris pertama pilih posisi Full.
  6. Terakhir Save, kemudian lihat hasilnya apakah Threaded Comments sudah ada pada blog Anda. Jika belum ikuti langkah kedua di bawah ini.
Langkah Kedua
  1. Masuk ke Template kemudian pilih Edit HTML.
  2. Jangan lupa untuk centang Expand Widget Templates. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, lebih baik backup dulu template Anda.
  3. Kemudian cari kode di bawah ini :
            <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
              <b:include data='post' name='comments'/>
            </b:if>
            <b:if cond='data:blog.pageType == &quot;item&quot;'>
              <b:include data='post' name='comments'/>
            </b:if>
  4. Setelah ketemu ganti dengan kode berikut :
            <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
              <b:if cond='data:post.showThreadedComments'>
                <b:include data='post' name='threaded_comments'/>
              <b:else/>
                <b:include data='post' name='comments'/>
              </b:if>
            </b:if>
            <b:if cond='data:blog.pageType == &quot;item&quot;'>
              <b:if cond='data:post.showThreadedComments'>
                <b:include data='post' name='threaded_comments'/>
              <b:else/>
                <b:include data='post' name='comments'/>
              </b:if>
            </b:if>
  5. Terakhir Save template, lihat dulu hasilnya.
Biasanya setelah Anda melakukan langkah kedua ini, Threaded Comments sudah ada pada blog Anda, tapi harus dicek satu persatu fungsinya. Permasalahan yang sering muncul adalah banyak sekali template yang masih menggunakan script blogger classic sehingga fitur reply (balas) tidak berfungsi normal. Jika fungsi Reply tidak berjalan, ikuti langkah ketiga berikut ini :

Langkah Ketiga

Langkah ini hanya dilakukan jika fungsi Reply tidak berjalan atau biasanya hanya keluar tulisan javascript pada browser bawah. Jika pada langkah kedua Threaded Comments sudah berfungsi normal langkah ini tinggalkan saja.
  1. Masih pada posisi Edit HTML (centang Expand Widget Templates), cari kode di bawah ini :
    <script type='text/javascript'>
    (function() {
    var items = <data:post.commentJso/>;
    var msgs = <data:post.commentMsgs/>;
    var postId = &#39;<data:post.id/>&#39;;
    var feed = &#39;<data:post.commentFeed/>&#39;;
    var authorName = &#39;<data:post.author/>&#39;;
    var authorUrl = &#39;<data:post.authorUrl/>&#39;;
    var blogId = &#39;<data:top.id/>&#39;;
    var baseUri = &#39;<data:post.commentBase/>&#39;;

    // <![CDATA[
    feed += '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
    var cursor = null;
    if (items && items.length > 0) {
    cursor = parseInt(items[items.length - 1].timestamp) + 1;
    }

    var bodyFromEntry = function(entry) {
    if (entry.gd$extendedProperty) {
    for (var k in entry.gd$extendedProperty) {
    if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
    return '<span class="deleted-comment">' + entry.content.$t + '</span>';
    }
    }
    }
    return entry.content.$t;
    }

    var parse = function(data) {
    cursor = null;
    var comments = [];
    if (data && data.feed && data.feed.entry) {
    for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
    var comment = {};
    // comment ID, parsed out of the original id format
    var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
    comment.id = id ? id[2] : null;
    comment.body = bodyFromEntry(entry);
    comment.timestamp = Date.parse(entry.published.$t) + '';
    if (entry.author && entry.author.constructor === Array) {
    var auth = entry.author[0];
    if (auth) {
    comment.author = {
    name: (auth.name ? auth.name.$t : undefined),
    profileUrl: (auth.uri ? auth.uri.$t : undefined),
    avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
    };
    }
    }
    if (entry.link) {
    if (entry.link[2]) {
    comment.link = comment.permalink = entry.link[2].href;
    }
    if (entry.link[3]) {
    var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
    if (pid && pid[1]) {
    comment.parentId = pid[1];
    }
    }
    }
    comment.deleteclass = 'item-control blog-admin';
    if (entry.gd$extendedProperty) {
    for (var k in entry.gd$extendedProperty) {
    console.log(entry.gd$extendedProperty[k].name + ' - ' + entry.gd$extendedProperty[k].value);
    if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
    comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
    }
    }
    }
    comments.push(comment);
    }
    }
    return comments;
    };

    var paginator = function(callback) {
    if (hasMore()) {
    var url = feed;
    if (cursor) {
    url += '&published-min=' + new Date(cursor).toISOString();
    }
    window.bloggercomments = function(data) {
    var parsed = parse(data);
    cursor = parsed.length < 50 ? null
    : parseInt(parsed[parsed.length - 1].timestamp) + 1
    callback(parsed);
    window.bloggercomments = null;
    }
    url += '&callback=bloggercomments';
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
    }
    };
    var hasMore = function() {
    return !!cursor;
    };
    var getMeta = function(key, comment) {
    if ('iswriter' == key) {
    var matches = !!comment.author
    && comment.author.name == authorName
    && comment.author.profileUrl == authorUrl;
    return matches ? 'true' : '';
    } else if ('deletelink' == key) {
    return baseUri + '/delete-comment.g?blogID=' + blogId + '&postID=' + comment.id;
    } else if ('deleteclass' == key) {
    return comment.deleteclass;
    }
    return '';
    };

    var replybox = null;
    var replyUrlParts = null;
    var replyParent = undefined;

    var onReply = function(commentId, domId) {
    if (replybox == null) {
    // lazily cache replybox, and adjust to suit this style:
    replybox = document.getElementById('comment-editor');
    if (replybox != null) {
    replybox.height = '250px';
    replybox.style.display = 'block';
    replyUrlParts = replybox.src.split('#');
    }
    }
    if (replybox && (commentId !== replyParent)) {
    document.getElementById(domId).insertBefore(replybox, null);
    replybox.src = replyUrlParts[0]
    + (commentId ? '&parentID=' + commentId : '')
    + '#' + replyUrlParts[1];
    replyParent = commentId;
    }
    };

    var tok = 'comment-form_';
    var hash = window.location.hash || '';
    var startThread = hash.indexOf(tok) == 1 ? hash.substring(tok.length + 1) : undefined;

    // Configure commenting API:
    var configJso = {
    'maxDepth': 2
    };
    var provider = {
    'id': postId,
    'data': items,
    'loadNext': paginator,
    'hasMore': hasMore,
    'getMeta': getMeta,
    'onReply': onReply,
    'rendered': true,
    'initReplyThread': startThread,
    'config': configJso,
    'messages': msgs
    };

    var render = function() {
    if (window.goog && window.goog.comments) {
    var holder = document.getElementById('comment-holder');
    window.goog.comments.render(holder, provider);
    }
    };

    // render now, or queue to render when library loads:
    if (window.goog && window.goog.comments) {
    render();
    } else {
    window.goog = window.goog || {};
    window.goog.comments = window.goog.comments || {};
    window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
    window.goog.comments.loadQueue.push(render);
    }
    })();
    // ]]>
    </script>
  2. Setelah ketemu ganti dengan kode berikut :
    <script type='text/javascript'>
    (function() {
    var items = <data:post.commentJso/>;
    var msgs = <data:post.commentMsgs/>;
    var config = <data:post.commentConfig/>;

    // <![CDATA[
    var cursor = null;
    if (items && items.length > 0) {
    cursor = parseInt(items[items.length - 1].timestamp) + 1;
    }

    var bodyFromEntry = function(entry) {
    if (entry.gd$extendedProperty) {
    for (var k in entry.gd$extendedProperty) {
    if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
    return '<span class="deleted-comment">' + entry.content.$t + '</span>';
    }
    }
    }
    return entry.content.$t;
    }

    var parse = function(data) {
    cursor = null;
    var comments = [];
    if (data && data.feed && data.feed.entry) {
    for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
    var comment = {};
    // comment ID, parsed out of the original id format
    var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
    comment.id = id ? id[2] : null;
    comment.body = bodyFromEntry(entry);
    comment.timestamp = Date.parse(entry.published.$t) + '';
    if (entry.author && entry.author.constructor === Array) {
    var auth = entry.author[0];
    if (auth) {
    comment.author = {
    name: (auth.name ? auth.name.$t : undefined),
    profileUrl: (auth.uri ? auth.uri.$t : undefined),
    avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
    };
    }
    }
    if (entry.link) {
    if (entry.link[2]) {
    comment.link = comment.permalink = entry.link[2].href;
    }
    if (entry.link[3]) {
    var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
    if (pid && pid[1]) {
    comment.parentId = pid[1];
    }
    }
    }
    comment.deleteclass = 'item-control blog-admin';
    if (entry.gd$extendedProperty) {
    for (var k in entry.gd$extendedProperty) {
    if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
    comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
    }
    }
    }
    comments.push(comment);
    }
    }
    return comments;
    };

    var paginator = function(callback) {
    if (hasMore()) {
    var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
    if (cursor) {
    url += '&published-min=' + new Date(cursor).toISOString();
    }
    window.bloggercomments = function(data) {
    var parsed = parse(data);
    cursor = parsed.length < 50 ? null
    : parseInt(parsed[parsed.length - 1].timestamp) + 1
    callback(parsed);
    window.bloggercomments = null;
    }
    url += '&callback=bloggercomments';
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
    }
    };
    var hasMore = function() {
    return !!cursor;
    };
    var getMeta = function(key, comment) {
    if ('iswriter' == key) {
    var matches = !!comment.author
    && comment.author.name == config.authorName
    && comment.author.profileUrl == config.authorUrl;
    return matches ? 'true' : '';
    } else if ('deletelink' == key) {
    return config.baseUri + '/delete-comment.g?blogID='
    + config.blogId + '&postID=' + comment.id;
    } else if ('deleteclass' == key) {
    return comment.deleteclass;
    }
    return '';
    };

    var replybox = null;
    var replyUrlParts = null;
    var replyParent = undefined;

    var onReply = function(commentId, domId) {
    if (replybox == null) {
    // lazily cache replybox, and adjust to suit this style:
    replybox = document.getElementById('comment-editor');
    if (replybox != null) {
    replybox.height = '250px';
    replybox.style.display = 'block';
    replyUrlParts = replybox.src.split('#');
    }
    }
    if (replybox && (commentId !== replyParent)) {
    document.getElementById(domId).insertBefore(replybox, null);
    replybox.src = replyUrlParts[0]
    + (commentId ? '&parentID=' + commentId : '')
    + '#' + replyUrlParts[1];
    replyParent = commentId;
    }
    };

    var hash = (window.location.hash || '#').substring(1);
    var startThread, targetComment;
    if (/^comment-form_/.test(hash)) {
    startThread = hash.substring('comment-form_'.length);
    } else if (/^c[0-9]+$/.test(hash)) {
    targetComment = hash.substring(1);
    }

    // Configure commenting API:
    var configJso = {
    'maxDepth': config.maxThreadDepth
    };
    var provider = {
    'id': config.postId,
    'data': items,
    'loadNext': paginator,
    'hasMore': hasMore,
    'getMeta': getMeta,
    'onReply': onReply,
    'rendered': true,
    'initComment': targetComment,
    'initReplyThread': startThread,
    'config': configJso,
    'messages': msgs
    };

    var render = function() {
    if (window.goog && window.goog.comments) {
    var holder = document.getElementById('comment-holder');
    window.goog.comments.render(holder, provider);
    }
    };

    // render now, or queue to render when library loads:
    if (window.goog && window.goog.comments) {
    render();
    } else {
    window.goog = window.goog || {};
    window.goog.comments = window.goog.comments || {};
    window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
    window.goog.comments.loadQueue.push(render);
    }
    })();
    // ]]>
    </script>
  3. Setelah itu save templates.
Langkah ketiga ini dibuat oleh http://modification-blog.blogspot.com. Setelah Anda melakukan langkah ini fungsi Reply bisa berjalan normal, tapi permasalahan yang saya dapat kemudian (setelah Anda melakukan langkah ini) jika Anda masih memakai browser internet lama terkadang akan susah untuk membuka postingan yang ada pada blog.

Threaded Comment di blog Anda sekarang sudah ada, sekarang anda tinggal modifikasi sendiri bentuk dari kotak komentar. Jika Anda menginginkan kotak komentar Admin berbeda, ikuti langkah sederhana berikut ini (contohnya seperti gambar diatas) :
  1. Pada posisi Edit HTML letakkan kode berikut ini persis diatas kode </body> :
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <script>
    $(function() {
    function highlight(){
    $('.user.blog-author,.ssyby').closest('.comment-block')
    .css('border', '1px solid #e1e1e1')
    .css('background','#f1f1f1 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLbEeEFrlFPqiUvYNpu_5R4C8-amGhsaC-jbOLpOtRJJDDLJ1mjhU_SexlFKmCOiZIG85LkrLDS2eIHHRWND_jZmZ8fSF33TghQ_L5dxPCa_1GDg_rq6y6a1l6peMALAg8BIoFSsMFYrA/s1600/admin2.png") no-repeat bottom right')
    .css('padding', '10px');
    }
    $(document).bind('ready scroll click', highlight);
    });
    </script>
  2. Kemudian save templates.
Demikian tadi tutorial singkat untuk mengatasi masalah yang sering muncul dalam membuat Threaded Comments pada template blogger classic. Jika masih ada yang kurang jelas silahkan tinggalkan komentar Anda di bawah. Selamat mencoba dan semoga bermanfaat.

Membuat Kotak Komentar Tepat di Bawah Postingan

Membuat Kotak Komentar Tepat di Bawah Postingan

Kali ini saya disuruh nyarikan cara menaruh kotak komentar tepat di bawah postingan. Yo wis langsung aja yuk...

Seperti biasa login di warung sebelah, lalu pesan kopi dan sruput kopinya hahaha.. Wis ah serius sekarang. pertama-tama login di akun Blogspot anda.  Klik menu Template >> Edit HTML, centang kotak Expand Template Widget (jangan lupa backup template dulu ya).

Lalu cari kode di bawah ini (untuk memudahkan tekan Ctrl + f )

    <div class='comments-content'>
          <b:if cond='data:post.embedCommentForm'>
            <b:include data='post' name='threaded_comment_js'/>
          </b:if>
          <div id='comment-holder'>
             <data:post.commentHtml/>
          </div>
        </div>

        <p class='comment-footer'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='threaded-comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        </p>









Jika sudah ketemu hapus kode tersebut dan ganti dengan kode di bawah ini
<p class='comment-footer'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='threaded-comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        </p>

        <div class='comments-content'>
          <b:if cond='data:post.embedCommentForm'>
            <b:include data='post' name='threaded_comment_js'/>
          </b:if>
          <div id='comment-holder'>
             <data:post.commentHtml/>
          </div>
        </div>

Setelah itu cari kode </body>, lalu masukkan kode di bawah ini tepat di atas </body>

    <!-- comment form before comment content starts -->
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <script>
    var yob = $(".comment-replybox-thread").closest(".comment-thread").parent("div").children(".comment-thread").children(".comment-replybox-thread");
    jQuery('.comment-thread ol').before(jQuery(yob));
    </script>
    <!-- comment form before comment content  ends -->









Setelah itu klik SIMPAN. 

Membuat Daftar Isi Otomatis di Blogspot

Membuat Daftar Isi Otomatis di Blogspot

Selamat malam teman-teman semua, belum pada tidur kan? Pada malam hari yang sepi ini saya akan meneruskan artikel saya mengenai membuat chatbox pada blog, kali ini saya akan menjelaskan bagaimana caranya untuk membuat daftar isi secara otomatis. Saya tidak akan menjelaskan mengenai fungsi dan cara kerja dari Daftar Isi Otomatis ini, karena sudah cukup dijelaskan pada tutorial Membuat chatbox pada blog, oleh karena itu bagi Anda yang belum pernah membacanya silahkan kunjungi dulu tutorial tersebut, tidak dipungut biaya.

Cara pemasangan daftar isi manual dan daftar isi otomatis tidak berbeda, yang membedakan hanya kode-kode yang digunakan dan cara kerjanya saja, namun tidak salahnya kalau saya memberikan contoh bentuk dari daftar isi otomatis tersebut.

Berikut ini cara membuat dan memasang daftar isi otomatis, silahkan ikuti dengan cermat dan seksama langkah-langkah di bawah ini:
  1. Login ke Blogger, Klik Layout/Tata Letak;
  2. Pada Elemen Halaman, klik Add Gadget/Tambah Gadget di lokasi yang Anda inginkan;
  3. Cari dan pilih HTML/Javascript;
  4. Copy paste kode di bawah ini ke dalam content yang telah tersedia, berikut ini kodenya :
    <div style="overflow: auto; width: 300px; height: 200px; text-align: left;">
    <script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
    <script src="http://fikrismkn1cjr.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>
  5. Klik Tombol Save/Simpan.

Keterangan : 
  • Link yang berwarna merah, silahkan diganti dengan alamat Blog Anda;
  • Width: 300px; adalah merupakan lebar dari kotak daftar isi otomotis dan boleh anda sesuaikan;
  • Height: 200px; adalah merupakan tinggi dari kotak daftar isi otomotis dan boleh anda sesuaikan.
Demikianlah tutorial Membuat Daftar Isi Otomatis Di Blogspot ini, semoga bermanfaat.

Membuat Chatbox Slide Vertikal Dengan jQuery di Blog

Membuat Chatbox Slide Vertikal Dengan jQuery di Blog

Satu lagi fasilitas untuk berinkteraksi dengan pengunjung anda, chatbox namanya. Sebenarnya fungsinya sama dengan buku tamu dari shoutmix tapi kali ini agak dimodifikasi sedikit sehingga tempatnya tersembunyi. Jika kita ingin menampilkan menu ini, kita harus meng-klik tombol chatbox yang ada di sebelah kiri blog . Untuk memasang chatbox slide vertikal dengan jQuery ini sangat mudah, anda tinggal menambahkan kode-kode HTML yang nanti akan saya uraikan secara lengkap di bawah. Gambar di bawah adalah contoh chatbox slide vertikal yang ada di demo blog saya, jika anda belum jelas gambar itu ada disini. Klik tombol chatbox yang ada di sebelah kiri, anda akan melihat tampilannya.


Oke, tidak pakai lama, langsung saja ke langkah-langkah pembuatannya :
  1. Login ke Blogger dengan akun anda.
  2. Kemudian pilih Rancangan >> Edit HTML
  3. Seperti biasa klik Download Template Lengkap biar aman
  4. Jangan lupa centang Expand Template Widget
  5. Selanjutnya cari kode ]]></b:skin>, jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode ]]></b:skin> tersebut:
    .panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
    .panel p{color:#ccc;margin:0 0 15px;padding:0}
    .panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
    .panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
    a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
    a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
    a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
    .columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
    .colleft{float:left;width:130px;line-height:22px}
    .colright{float:right;width:130px;line-height:22px}
    a:focus{outline:none}
    .panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
    .panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
    .columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}
  6. Setelah itu cari kode </head> setelah itu copas kode dibawah ini dan taruh diatasnya.
    view plainprint?
    1. <script  src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'  type='text/javascript'/>  
    Jika anda telah memasang script Jquery ini sebelumnya anda dapat meninggalkan langkah diatas
  7. Masukan kode Javascript berikut dibawah script jQuery tadi:
    view plainprint?
    1. <script  type="text/javascript">  
    2. $(document).ready(function(){  
    3. $(".trigger").click(function(){  
    4. $(".panel").toggle("fast");  
    5. $(this).toggleClass("active");  
    6. return false;  
    7. });  
    8. });  
    9. </script>  
  8. Kemudian cari lagi kode berikut ini <body>
  9. Setelah itu masukkan kode dibawah ini kemudian taruh diatasnya
    <div class="panel">

    Kode script ChatBox Anda atau bisa diganti dengan kode widget atau apa sajalah terserah.....

    </div>
    <a class="trigger" href="">ChatBox</a>
  10. Dan yang terakhir Save Template anda.

Membuat Template Blog sendiri Dengan Notepad

Membuat Template Blog sendiri Dengan Notepad


Hai Sobat! Sudah lama saya tak berjumpa lagi, udah jarang ngepost lagi, dan otak-atik blog lagi nih :D . Untuk itu, saya mohon maaf dikarenakan kemarin saya lagi ulangan tengah semester :) . Pada saat ulangan telah usai saya menyempatkan diri membeli pulsa modem, saya browsing dan menemukan satu blog yang templatenya keren.. saya menanyakan ke Admin blog tentang templatenya, dan ternyata dia membuatnya sendiri dengan Notepad dan sedikit gambar yang dibuat dari Corel Draw. Sayangnya Admin blog tersebut mungkin tidak mau membocorkan cara untuk membuat template, tapi saya Mencoba membuat template tersebut secara online di Tataletak blog. Beberapa elemen saya ubah dan ubah, Beberapa kode saya tulis, dan beberapa kode juga saya hapus, beberapa waktu kemudian saya menemukan caranya.. :P Check it out ;)

Hal yang harus diperhatikan dalam mendesain template blog ada lah anda harus memahami "Tag HTML" dan juga beberapa kode CSS untuk membuat Blog menarik.

Alat dan Bahan:
Notepad
Pemikiran Logika yang matang
Teh and Cemilan(buat sambilan)
Sudah siap? Ayo kita mulai :P

1. Langkah Awal

Buatlah sebuah kode HTML sederhana yang dibuat melalui Notepad dan Save dengan nama belakang "html". Jika anda keberatan, bisa kita pakai dengan Element sederhana dibawah ini:

<html>
<!-- bagian kepala -->
<head>
  <style>
/* CSS di tag ini */
  </style>
</head>

<!-- bagian badan -->
<body>
<div id='wrapper'>

 <!-- Nantinya akan dijadikan Judul blog -->
<div class='bagian-kepala'>
<h1>Judul BLOG</h1>
</div>

 <!-- Tempat dimana posting anda akan muncul -->
<div class='bagian-post'>

<h3>Ini adalah Judul Posting anda </h3>
Tulis sesuka anda, terserah itu apa, yang penting anda dapat melihat ISI dari bagian POST ini, atau anda dapat memberikan warna background dari masing-masing ELEMENT pada template ini ;)
Lorem ipsum dolar si dawet, consectetur adipisicing si pelit, sad do re mi fa eit unmod lempar sana lempar sini incididunt ut labore et dolore et kasire et indire magna akuilah. Ut enim ad minim caina cau, quis nonstop exercitation ullamco laboris sisi atas sisi bawah ex ea ada comodo tersesat. Duit ente kayak color in jemuran in atap in everywhere velit amat minta dolore lu fugiat nullar penyakit. Excepteur sint occaecat ada nona proident, sunt in curi que di office deket rumah pelit anim id est laborum autis
Lorem ipsum dolar si dawet, consectetur adipisicing si pelit, sad do re mi fa eit unmod lempar sana lempar sini incididunt ut labore et dolore et kasire et indire magna akuilah. Ut enim ad minim caina cau, quis nonstop exercitation ullamco laboris sisi atas sisi bawah ex ea ada comodo tersesat. Duit ente kayak color in jemuran in atap in everywhere velit amat minta dolore lu fugiat nullar penyakit. Excepteur sint occaecat ada nona proident, sunt in curi que di office deket rumah pelit anim id est laborum autis

</div>
<!-- Tempat dimana Widget anda berada -->
<div class='bagian-widget'>

<h2> Judul Widget </h2>
Lorem ipsum dolar si dawet, consectetur adipisicing si pelit, sad do re mi fa eit unmod lempar sana lempar sini incididunt ut labore et dolore et kasire et indire magna akuilah. Ut enim ad minim caina cau, quis nonstop exercitation ullamco laboris sisi atas sisi bawah ex ea ada comodo tersesat. Duit ente kayak color in jemuran in atap in everywhere velit amat minta dolore lu fugiat nullar penyakit. Excepteur sint occaecat ada nona proident, sunt in curi que di office deket rumah pelit anim id est laborum autis

</div>
</div>

<div style='clear:both'>
  <!-- BAGIAN BAWAH DARI INTI POST DAN WIDGET -->
  <!-- tambahkan elemen footer disini -->
  <!-- anda juga harus membuat element DIV terlebih dahulu -->
</body>
  <!-- end of Bagian badan -->
</html>


Save kode diatas dengan nama Project.html

2. Berikan CSS pembentuk Tata Letak Sederhana.

Coba anda preview dengan membuka melalui Browser, pasti tidak terbentuk bukan? untuk itu, anda diharuskan memberikan Properties Sederhana terlebih dahulu guna memberikan letak yang anda inginkan.
Tata letak didasarkan pada css "float" dan juga "width" , serta dibatasi dengan "clear: both" didasar kedua element tersebut untuk meratakan bahwa element telah disamakan.

Misalkan kita akan membuat tata letak seperti ini :

Kepala BadanWidget


Maka CSS yang akan kita gunakan adalah seperti ini:

#wrapper{
width: 800px; /* lebar blog secara keseluruhan */
margin: auto; /* untuk membuat "CENTER" blog pada Browser */
}
.bagian-kepala{
height: 200px;
}
.bagian-post{
float: left; /* Gunakan untuk memposisikan Widget di kiri */
width: 500px;
}
.bagian-widget{
float: right; /* Gunakan untuk memposisikan Widget di Kanan */
width: 200px;
}


3. Preview, lalu EDIT!

Lihatlah dahulu jadinya, kemudian Edit beberapa item, tambahkan beberapa tag sesuka kalian ;)

Maksudnya apa? Anda diharapkan untuk menggandakan Project.html sebelum proses ke-4 untuk menghindari kesalahan template pada blog. Periksalah kembali sebelum melanjutkan langkah berikutnya!

4. Berikan beberapa tag XML template Blog

Karena blog menggunakan XML untuk template, kita harus merubah Tag HTML tersebut menjadi tag HTML.
Perhatikan kode template berikut :

<html>
<!-- bagian kepala -->
<head>
<style>
/* CSS HERE */

 </style>
</head>

<!-- bagian badan -->
<body>
<div id='wrapper'>.....

Ganti kode bercetak miring dan tebal diatas dengan kode seperti ini:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' 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'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[

/* Insert CSS Here */

]]></b:skin>
</head>

Jangan lupa untuk memberikan CSS yang tadi kita tulis, sehingga menjadi seperti ini:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' 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'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[

/* Start CSS HERE */
#wrapper{
width: 800px; /* lebar blog secara keseluruhan */
margin: auto; /* untuk membuat "CENTER" blog pada Browser */
}
.bagian-kepala{
height: 200px;
}
.bagian-post{
float: left; /* Gunakan untuk memposisikan Widget di kiri */
width: 500px;
}
.bagian-widget{
float: right; /* Gunakan untuk memposisikan Widget di Kanan */
width: 200px;
}
/* End CSS HERE */

]]></b:skin>
</head>


<!-- bagian badan -->
<body>
<div id='wrapper'>.....


5. Memberi Blogger Tag

Anda diharuskan untuk merubah Static Content dengan Dinamic Content yang telah disediakan oleh Blogger.
Untuk lebih lengkapnya, silahkan pergi ke Link http://support.google.com/blogger/bin/answer.py?hl=en&answer=46888 Cara ini dilakukan agar anda dapat lebih leluasa dalam mengedit dan mengatur dalam "Tata Letak". Selain itu, Dynamic Content juga berfungsi agar Post yang anda publikasi bisa Muncul pada Blog anda. Jika template tidak diberikan Blogger Tag, maka template akan Static, maksudnya ketika anda melakukan pengeditan pada template, post, ataupun widget anda, maka semua tidak akan berubah.

a. Tambahkan element Judul Blog.

Ganti kode yang berwarna biru dengan kode berikut :
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>
</b:section>

b. Tambahkan element Post.

Ganti kode yang berwarna hijau diatas dengan kode berikut :
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

c. Tambahkan element Widget.

Ganti kode yang berwarna kuning dengan kode dibawah ini :
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>

Sehingga akan terlihat seperti ini :

<body>
<div id='wrapper'>
<!-- Nantinya akan dijadikan Judul blog -->
<div class='bagian-kepala'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>
</b:section>
</div>
<!-- Tempat dimana posting anda akan muncul -->
<div class='bagian-post'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<!-- Tempat dimana Widget anda berada -->
<div class='bagian-widget'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
</div>

<div style='clear:both'>
</body>


6. Save dan Upload.

Simpanlah proyek anda, dan kemudian anda coba penerapannya pada Blog anda. Sehingga anda dapat melihat hasilnya! hmmm, untuk refreshing coba anda minum teh anda dahulu, kemudian lanjut lagi ;)

Anda harus backup template terlebih dahulu. Atau anda bisa membuat blog baru untuk bereksperiment.

7. Sedikit Mengedit Kode CSS Kembali

CSS itu sangatlah penting, kenapa ? karena css adalah bagian terpenting dalam suatu situs web. CSS ini sendiri yang mengatur tata-letak dari suatu Element yang berantakan menjadi elemen yang teratur dan nyaman untuk dilihat. Tidak hanya mengatur sebuah Elemen, CSS juga dapat mengatur Warna, Dekorasi, Bingkai(Border), hingga Gambar latar. Untuk kali ini, mari kita mulai mengedit sebagian CSS pada blog agar terlihat menarik ;)

Mulailah mengedit text dan link yang terdapat di template tersebut:

/* Body atau background tag */
body{
background: #888;
color: #eee;
font: 12px calibri;
}

/* Link atau tautan */
a{ color: orange; }
a:hover{ color: red; }
a:visited{ color: gray; }
a:active{ color:transparent; }

/* Penanggalan pada Posting */
.date-header{ color: orange; }

/* Element Posting */
.date-outer{ border: 1px solid gray; margin: 10px 5px; } /* pembungkus posting */
.post-title{ font: 17px calibri; } /* judul entri */

/* Komentar */
#comments { background : #454545; color : white; } /* Pembungkus kotak Komentar */


Dan selebihnya anda kerjakan sendiri ya ;)

Final Kode :


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' 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'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/* Inti dari Element */

#wrapper{
width: 800px; /* lebar blog secara keseluruhan */
margin: auto; /* untuk membuat "CENTER" blog pada Browser */
}
.bagian-kepala{
height: 200px;
}
.bagian-post{
float: left; /* Gunakan untuk memposisikan Widget di kiri */
width: 500px;
}
.bagian-widget{
float: right; /* Gunakan untuk memposisikan Widget di Kanan */
width: 200px;
}

/* Body atau background tag */
body{
background: #888;
color: #eee;
font: 12px calibri;
}

/* Link atau tautan */a{ color: orange; }
a:hover{ color: red; }
a:visited{ color: gray; }
a:active{ color:transparent; }

/* Penanggalan pada Posting */
.date-header{ color: orange; }

/* Element Posting */
.date-outer{ border: 1px solid gray; margin: 10px 5px; } /* pembungkus posting */
.post-title{ font: 17px calibri; } /* judul entri */

/* Komentar */
#comments { background : #454545; color : white; } /* Pembungkus kotak Komentar */

]]></b:skin>
</head>

<body>
<div id='wrapper'>
<!-- Nantinya akan dijadikan Judul blog -->
<div class='bagian-kepala'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>
</b:section>
</div>
<!-- Tempat dimana posting anda akan muncul -->
<div class='bagian-post'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<!-- Tempat dimana Widget anda berada -->
<div class='bagian-widget'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

</div>


<div style='clear:both'>
<!-- BAGIAN BAWAH DARI INTI POST DAN WIDGET -->
<!-- tambahkan elemen footer disini -->
<!-- anda juga harus membuat element DIV terlebih dahulu -->
</body>
<!-- end of Bagian badan -->
</html>


Jika anda telah merubah beberapa widget melalui centangan Expand Widget sebelum mengikuti langkah-langkah artikel ini, ada kemungkinan tag didalam widget tersebut sama. Dan itu pengaruh juga pada tag Judul posting, Judul Entri, Judul Blog, isi dari Widget tersebut.
Ada baiknya anda Restore ke template Default bawaan blogger yang orsinil lalu buatlah template baru seperti ini. Gunanya untuk mereset seluruh tag widget ke semula.
Langganan: Postingan (Atom)