backup blogger1: JavaScript

Tampilkan postingan dengan label JavaScript. Tampilkan semua postingan

Minggu, 10 April 2016

Bagaimana Sebenarnya jQuery Bekerja

Ketika orang-orang sudah cukup puas dengan markup dan style sheet language, pada akhirnya mereka memutuskan untuk tertarik dengan dunia pemrograman setelah mereka dipertemukan dengan bahasa pemrograman yang luar biasa dahsyat yang mereka kenal sebagai jQuery. Mereka jatuh cinta karena efek animasi yang diberikan; mereka jatuh cinta kepada slideshow, kepada efek dropdown menu, kepada efek gambar kabur, dan lain sebagainya; sebegitu jatuh cintanya mereka hingga mereka sanggup untuk duduk berlama-lama di depan komputer, ketagihan menggoyang-goyangkan pointer mouse mereka di permukaan menu navigasi dropdown berkali-kali hanya demi melihat efek slide-up dan slide-down yang begitu indah…

Rabu, 06 Januari 2016

Tags Input Beautifier

Interaksi yang lebih baik pada masukan berupa data tag dengan JavaScript.

Minggu, 12 Juli 2015

AJAX dengan JavaScript Mentah

Mendapatkan konten dari dokumen HTML yang lain pada domain yang sama tanpa menggunakan JQuery.

/**
 * Get data from a URL
 * @param  {String} url        The URL to get
 * @param  {Function} success  Callback to run on success
 * @param  {Function} error    Callback to run on error
 */

var getURL = function(url, success, error) {
    // Feature detection
    if (!window.XMLHttpRequest) return;
    // Create new request
    var request = new XMLHttpRequest();
    // Setup callbacks
    request.onreadystatechange = function() {
        // If the request is complete
        if (request.readyState === 4) {
            // If the request failed
            if (request.status !== 200) {
                if (error && typeof error === "function") {
                    error(request.responseText, request);
                }
                return;
            }
            // If the request succeeded
            if (success && typeof success === "function") {
                success(request.responseText, request);
            }
        }
    };
    // Get the HTML
    request.open('GET', url);
    request.send();
};

Penggunaan

Dasar:

getURL(
    '/about',
    function(data) {
        // On success…
    },
    function(data) {
        // On failure…
    }
);

Cari elemen spesifik pada halaman yang dipanggil dan masukkan kontennya ke dalam elemen tertentu pada halaman saat ini:

getURL(
    '/about',
    function(data) {
        // Create a `<div>` and inject the HTML into it
        var div = document.createElement(div);
        div.innerHTML = data;
        // Find the element you’re looking for in the `<div>`
        var from = div.querySelector('#some-element');
        var to = document.querySelector('#another-element');
        // Quit if the element or the place where you want to inject it doesn’t exist
        if (!from || !to) return;
        // Inject the element into the DOM
        to.innerHTML = from.innerHTML;
    }
);

Referensi: Making AJAX Requests with Native JavaScript

Minggu, 26 April 2015

Password Overlay

Di sini, JavaScript btoa digunakan untuk menyembunyikan teks, sedangkan atob digunakan untuk mengembalikan teks yang tersembunyi tersebut:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Password Overlay Test</title>

    <style>
    .body {
      padding:10% 0;
      text-align:center;
    }
    .overlay {
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      left:0;
      z-index:9999;
      background-color:black;
      color:white;
      padding:10% 0;
      text-align:center;
    }
    </style>

  </head>
  <body>

    <div id="protect-body" class="body">Content goes here…</div>
    <div id="protect-overlay" class="overlay">
      <form action="#">
        <input name="answer" type="password" placeholder="Password?"/> <button type="submit">Open</button>
      </form>
    </div>

    <script>
    // https://developer.mozilla.org/En/DOM/Window.btoa
    // https://developer.mozilla.org/en/DOM/window.atob
    // to get the obfuscated text, use `console.log(btoa('your text goes here'))`
    // `aSBsb3ZlIHlvdQ==` => `i love you`
    (function() {
        var o = document.getElementById('protect-overlay');
        o.getElementsByTagName('form')[0].onsubmit = function() {
            if (this.answer.value === atob('aSBsb3ZlIHlvdQ==')) {
                o.style.display = "none"; // passed!
            } else {
                alert('Wrong password!');
            }
            return false;
        };
    })();
    </script>

  </body>
</html>

Demo

Kata kunci: i love you

Lihat Demo

Referensi

Rabu, 18 Februari 2015

Parser JSON untuk Blogger: Posting dan Halaman Statis

Berikut adalah generalisasi fungsi untuk mengubah data JSON posting dan halaman statis Blogger menjadi markup HTML sesuai dengan keinginan. Di sini Saya membagi fungsinya menjadi dua macam yaitu generatePostsData untuk menangani posting dan halaman dalam bentuk daftar dan generatePostData untuk menangani posting dan halaman dalam bentuk tunggal:

Bentuk Daftar

function generatePostsData(json) {

    // Poor configuration settings, develop them yourself!
    var config = {
        containerID: 'result-container', // Container ID to show the generated data
        avatarSize: 50, // Default avatar size
        noThumbnail: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABIAQMAAABvIyEEAAAABGdBTUEAALGPC/xhBQAAAAZQTFRFOjo6JycnNkxyjQAAADZJREFUKM9j+A8DDFRnNTCAACP9WewPGNgfkMmiwN7GH0CGfCPdWZT5V/7/DwZyWeSHFa1SHQDDGF2E0US40gAAAABJRU5ErkJggg==',
        text: {
            anon: 'Anonymous',
            untagged: 'Untagged',
            monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
        }
    };

    var html = "",
        item = "",
        w = window,
        d = document,
        feed = json.feed,
        container = d.getElementById(config.containerID),
        postTotal = +feed.openSearch$totalResults.$t, // The post/page feeds' total (all)
        postStartIndex = +feed.openSearch$startIndex.$t, // The post/page feeds' start index
        postPerPage = +feed.openSearch$itemsPerPage.$t, // The post/page feeds' max results per page or per feed request
        blogID = /\:blog-?(\d+)(\.|$)/.exec(feed.id.$t) ? /\:blog-?(\d+)(\.|$)/.exec(feed.id.$t)[1] : false, // The blog ID
        blogTitle = feed.title.$t, // The post/page feeds' title
        blogTags = false, // The available post/page tags (all)
        blogSubTitle = feed.subtitle.$t, // The post/page feeds' subtitle
        blogAuthorName = feed.author[0].name ? feed.author[0].name.$t : config.text.anon, // The blog/post author name
        blogAuthorAvatar = feed.author[0].gd$image.src.replace(/\/s\d+(\-c)?\//, '/s' + config.avatarSize + '-c/'), // The blog/post author profile avatar URL
        blogGeneratorName = feed.generator.$t, // The blog generator name (Blogger)
        blogGeneratorURL = feed.generator.uri; // The blog generator URL (http://www.blogger.com)

    // Remove the leading `http://` or `https://` in blog/post author profile avatar URL
    // blogAuthorAvatar = blogAuthorAvatar.replace(/^https?\:/, "");

    // No container found
    if (!container) {
        alert('Container not found.');
        return;
    }

    // Getting the blog tags
    if (feed.category && feed.category.length) {
        blogTags = [];
        for (var h = 0, hen = feed.category.length; h < hen; ++h) {
            blogTags.push(feed.category[h].term);
        }
        // Sort the blog tags alphabetically
        blogTags = blogTags.sort();
    }

    // No posts/pages yet
    if (!feed.entry || feed.entry.length === 0) {
        container.innerHTML = '<p>No posts/pages yet.</p>';
        return;
    }

    // Building the markup ...
    html += '<h1>' + blogTitle + '</h1>';
    html += '<h2>' + blogSubTitle + '</h2>';
    html += '<p><b>Blog ID:</b> ' + blogID + '</p>';
    html += '<p><b>Blog Tags:</b> ' + (blogTags !== false ? blogTags.join(', ') : config.text.untagged) + '</p>';
    html += '<p><b>Blog Author Name:</b> ' + blogAuthorName + '</p>';
    html += '<p><b>Blog Author Avatar URL:</b> ' + blogAuthorAvatar + '</p>';
    html += '<p><b>Total Posts:</b> ' + postTotal + '</p>';
    html += '<p><b>Posts Per Page:</b> ' + postPerPage + '</p>';
    html += '<p><b>Posts Start Index:</b> ' + postStartIndex + '</p>';
    html += '<hr>';
    html += '<ol>';

    var posts = feed.entry;

    for (var i = 0, ien = posts.length; i < ien; ++i) {
    
        var post = posts[i], // A single post/page object
            postID = post.id.$t, // The post/page ID
            postPublish = post.published.$t, // The post/page publishing time in ISO format
            postUpdate = post.updated.$t, // The post/page updating time in ISO format
            postDate = postPublish, // The post/page publishing time in human-readable format
            postURL = false, // The post/page URL
            postTags = false, // The post/page tags
            postCommentTotal = post.thr$total ? +post.thr$total.$t : 0, // The post/page comments total
            postCommentFeedURL = false, // The post/page comments feed URL
            postThumbnail = post.media$thumbnail ? post.media$thumbnail.url : config.noThumbnail, // The post/page thumbnail
            postAuthorName = post.author[0].name ? post.author[0].name.$t : config.text.anon, // The post/page author name
            postAuthorURL = post.author[0].uri ? post.author[0].uri.$t : false, // The post/page author profile URL
            postAuthorAvatar = post.author[0].gd$image.src.replace(/\/s\d+(\-c)?\//, '/s' + config.avatarSize + '-c/'), // The post/page author profile avatar URL
            postTitle = post.title.$t, // The post/page title
            postContent = post.content ? post.content.$t : post.summary.$t.replace(/<br *\/?>|[\s]+/gi, ' ').replace(/<.*?>|[<>]/g, ""), // The post/page content
            postEditURL = false; // The post/page edit URL

        // Generate human-readable post/page date format
        var date = postDate.split('T')[0].split('-');
        postDate = date[2] + ' ' + config.text.monthNames[(+date[1]) - 1] + ' ' + date[0];

        // Remove the leading `http://` or `https://` in post/page thumbnail URL
        // postThumbnail = postThumbnail.replace(/^https?\:/, "");

        // Remove the leading `http://` or `https://` in post/page author profile avatar URL
        // postAuthorAvatar = postAuthorAvatar.replace(/^https?\:/, "");

        for (var j = 0, jen = post.link.length; j < jen; ++j) {
            item = post.link[j];
            if (item.rel == 'self') {
                // Getting the original post/page ID
                postID = item.href.split('/').pop();
                // Getting the post/page edit URL
                postEditURL = item.href.replace(/\/feeds\/(\d+)\/(post|page)s?\/(default|summary)\/(\d+)/, '/$2-edit.g?blogID=$1&$2ID=$4');
            }
            // Getting the post/page URL
            if (item.rel == 'alternate') {
                postURL = item.href;
            }
            // Getting the post/page comment feed URL
            if (item.rel == 'replies' && item.type == 'application/atom+xml') {
                postCommentFeedURL = item.href;
            }
        }

        // Trying to get the external image URL from post/page content
        if (post.content && postThumbnail == config.noThumbnail) {
            var image = /<img +(.*?)src=(['"])([^'"]+?)(['"])(.*?) *\/?>/i.exec(post.content.$t);
            postThumbnail = image && image[3] ? image[3] : config.noThumbnail;
        }

        // Getting the post/page tags
        if (post.category && post.category.length) {
            postTags = [];
            for (var k = 0, ken = post.category.length; k < ken; ++k) {
                postTags.push(post.category[k].term);
            }
            // Sort the post/page tags alphabetically
            postTags = postTags.sort();
        }

        // Building the markup ...
        html += '<li>';
        html += '<p><b>ID:</b> ' + postID + '</p>';
        html += '<p><b>Publish:</b> ' + postPublish + '</p>';
        html += '<p><b>Update:</b> ' + postUpdate + '</p>';
        html += '<p><b>Date:</b> ' + postDate + '</p>';
        html += '<p><b>URL:</b> ' + postURL + '</p>';
        html += '<p><b>Tags:</b> ' + (postTags !== false ? postTags.join(', ') : config.text.untagged) + '</p>';
        html += '<p><b>Comment Total:</b> ' + postCommentTotal + '</p>';
        html += '<p><b>Comment Feed URL:</b> ' + postCommentFeedURL + '</p>';
        html += '<p><b>Thumbnail:</b> ' + postThumbnail + '</p>';
        html += '<p><b>Author:</b> ' + postAuthorName + '</p>';
        html += postAuthorURL !== false ? '<p><b>Author URL:</b> ' + postAuthorURL + '</p>' : "";
        html += '<p><b>Author Avatar URL:</b> ' + postAuthorAvatar + '</p>';
        html += '<p><b>Edit URL:</b> ' + postEditURL + '</p>';
        html += '<p><b>Title:</b> ' + postTitle + '</p>';
        html += '<p><b>Content:</b></p>';
        html += '<div>' + postContent + '</div>';
        html += '</li>';

    }

    // Building the markup ...
    html += '</ol>';

    // Show the generated data to the container ...
    container.innerHTML = html;

}

Penggunaan

Urutannya dimulai dari penulisan HTML untuk menampung data yang akan digenerasikan oleh fungsi di atas, dilanjutkan dengan memasukkan fungsi di atas ke dalam tag <script>, lalu memanggil data JSON dengan menggunakan nilai parameter URL callback berupa generatePostsData, sesuai dengan nama fungsi di atas:

<div id="result-container">Loading&hellip;</div>
<script>
function generatePostsData(json) { … }
</script>
<script src="http://nama_blog.blogspot.com/feeds/posts/default?alt=json-in-script&orderby=published&callback=generatePostsData"></script>

Lihat Demo

Bentuk Tunggal

function generatePostData(json) {

    // Poor configuration settings, develop them yourself!
    var config = {
        containerID: 'result-container', // Container ID to show the generated data
        avatarSize: 50, // Default avatar size
        noThumbnail: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABIAQMAAABvIyEEAAAABGdBTUEAALGPC/xhBQAAAAZQTFRFOjo6JycnNkxyjQAAADZJREFUKM9j+A8DDFRnNTCAACP9WewPGNgfkMmiwN7GH0CGfCPdWZT5V/7/DwZyWeSHFa1SHQDDGF2E0US40gAAAABJRU5ErkJggg==',
        text: {
            anon: 'Anonymous',
            untagged: 'Untagged',
            monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
        }
    };

    var html = "",
        item = "",
        w = window,
        d = document,
        container = d.getElementById(config.containerID);

    // No container found
    if (!container) {
        alert('Container not found.');
        return;
    }

    var post = json.entry, // The post/page object
        postID = post.id.$t, // The post/page ID
        postPublish = post.published.$t, // The post/page publishing time in ISO format
        postUpdate = post.updated.$t, // The post/page updating time in ISO format
        postDate = postPublish, // The post/page publishing time in human-readable format
        postURL = false, // The post/page URL
        postTags = false, // The post/page tags
        postCommentTotal = post.thr$total ? +post.thr$total.$t : 0, // The post/page comments total
        postCommentFeedURL = false, // The post/page comments feed URL
        postThumbnail = post.media$thumbnail ? post.media$thumbnail.url : config.noThumbnail, // The post/page thumbnail
        postAuthorName = post.author[0].name ? post.author[0].name.$t : config.text.anon, // The post/page author name
        postAuthorURL = post.author[0].uri ? post.author[0].uri.$t : false, // The post/page author profile URL
        postAuthorAvatar = post.author[0].gd$image.src.replace(/\/s\d+(\-c)?\//, '/s' + config.avatarSize + '-c/'), // The post/page author profile avatar URL
        postTitle = post.title.$t, // The post/page title
        postContent = post.content ? post.content.$t : post.summary.$t.replace(/<br *\/?>|[\s]+/gi, ' ').replace(/<.*?>|[<>]/g, ""), // The post/page content
        postEditURL = false; // The post/page edit URL

    // Generate human-readable post/page date format
    var date = postDate.split('T')[0].split('-');
    postDate = date[2] + ' ' + config.text.monthNames[(+date[1]) - 1] + ' ' + date[0];

    // Remove the leading `http://` or `https://` in post/page thumbnail URL
    // postThumbnail = postThumbnail.replace(/^https?\:/, "");

    // Remove the leading `http://` or `https://` in post/page author profile avatar URL
    // postAuthorAvatar = postAuthorAvatar.replace(/^https?\:/, "");

    for (var j = 0, jen = post.link.length; j < jen; ++j) {
        item = post.link[j];
        if (item.rel == 'self') {
            // Getting the original post/page ID
            postID = item.href.split('/').pop();
            // Getting the post/page edit URL
            postEditURL = item.href.replace(/\/feeds\/(\d+)\/(post|page)s?\/(default|summary)\/(\d+)/, '/$2-edit.g?blogID=$1&$2ID=$4');
        }
        // Getting the post/page URL
        if (item.rel == 'alternate') {
            postURL = item.href;
        }
        // Getting the post/page comment feed URL
        if (item.rel == 'replies' && item.type == 'application/atom+xml') {
            postCommentFeedURL = item.href;
        }
    }

    // Trying to get the external image URL from post/page content
    if (post.content && postThumbnail == config.noThumbnail) {
        var image = /<img +(.*?)src=(['"])([^'"]+?)(['"])(.*?) *\/?>/i.exec(post.content.$t);
        postThumbnail = image && image[3] ? image[3] : config.noThumbnail;
    }

    // Getting the post/page tags
    if (post.category && post.category.length) {
        postTags = [];
        for (var k = 0, ken = post.category.length; k < ken; ++k) {
            postTags.push(post.category[k].term);
        }
        // Sort the post/page tags alphabetically
        postTags = postTags.sort();
    }

    // Building the markup ...
    html += '<li>';
    html += '<p><b>ID:</b> ' + postID + '</p>';
    html += '<p><b>Publish:</b> ' + postPublish + '</p>';
    html += '<p><b>Update:</b> ' + postUpdate + '</p>';
    html += '<p><b>Date:</b> ' + postDate + '</p>';
    html += '<p><b>URL:</b> ' + postURL + '</p>';
    html += '<p><b>Tags:</b> ' + (postTags !== false ? postTags.join(', ') : config.text.untagged) + '</p>';
    html += '<p><b>Comment Total:</b> ' + postCommentTotal + '</p>';
    html += '<p><b>Comment Feed URL:</b> ' + postCommentFeedURL + '</p>';
    html += '<p><b>Thumbnail:</b> ' + postThumbnail + '</p>';
    html += '<p><b>Author:</b> ' + postAuthorName + '</p>';
    html += postAuthorURL !== false ? '<p><b>Author URL:</b> ' + postAuthorURL + '</p>' : "";
    html += '<p><b>Author Avatar URL:</b> ' + postAuthorAvatar + '</p>';
    html += '<p><b>Edit URL:</b> ' + postEditURL + '</p>';
    html += '<p><b>Title:</b> ' + postTitle + '</p>';
    html += '<p><b>Content:</b></p>';
    html += '<div>' + postContent + '</div>';
    html += '</li>';

    // Building the markup ...
    html += '</ol>';

    // Show the generated data to the container ...
    container.innerHTML = html;

}

Penggunaan

Sisipkan ID posting/halaman statis setelah path default atau summary:

<div id="result-container">Loading&hellip;</div>
<script>
function generatePostData(json) { … }
</script>
<script src="http://nama_blog.blogspot.com/feeds/posts/default/1962799387619194999?alt=json-in-script&callback=generatePostData"></script>

Lihat Demo

Ekstra

Halaman Statis

Data halaman statis dapat dipanggil dengan menggunakan format URL seperti ini:

http://nama_blog.blogspot.com/feeds/pages/default?alt=json-in-script&orderby=published&callback=generatePostsData
http://nama_blog.blogspot.com/feeds/pages/default?alt=json-in-script&callback=generatePostData

Mode Ringkas

Mode ringkas dapat dipanggil dengan menggunakan format URL seperti ini:

http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&orderby=published&callback=generatePostsData
http://nama_blog.blogspot.com/feeds/pages/summary?alt=json-in-script&orderby=published&callback=generatePostsData
http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=generatePostData
http://nama_blog.blogspot.com/feeds/pages/summary?alt=json-in-script&callback=generatePostData

Parser JSON untuk Blogger: Komentar

Berikut adalah generalisasi fungsi untuk mengubah data JSON komentar Blogger menjadi markup HTML sesuai dengan keinginan. Saya sudah mendefinisikan ulang data-data yang penting ke dalam variabel, sehingga Anda bisa memodifikasi skrip ini dengan lebih mudah:

Bentuk Daftar

function generateCommentsData(json) {

    // Poor configuration settings, develop them yourself!
    var config = {
        containerID: 'result-container', // Container ID to show the generated data
        avatarSize: 50, // Default avatar size
        text: {
            anon: 'Anonymous'
        }
    };

    var html = "",
        item = "",
        w = window,
        d = document,
        feed = json.feed,
        container = d.getElementById(config.containerID),
        postCommentTotal = +feed.openSearch$totalResults.$t, // The comment feeds' total (all)
        postCommentStartIndex = +feed.openSearch$startIndex.$t, // The comment feeds' start index
        postCommentPerPage = +feed.openSearch$itemsPerPage.$t, // The comment feeds' max results per page or per feed request
        blogID = /\:blog-?(\d+)(\.|$)/.exec(feed.id.$t) ? /\:blog-?(\d+)(\.|$)/.exec(feed.id.$t)[1] : false, // The blog ID
        postID = /\.post-?(\d+)(\.|$)/.exec(feed.id.$t) ? /\.post-?(\d+)(\.|$)/.exec(feed.id.$t)[1] : false, // The current post ID (if any)
        postURL = false, // The current post URL (if any)
        blogTitle = feed.title.$t, // The comment feeds' title
        blogAuthorName = feed.author[0].name ? feed.author[0].name.$t : config.text.anon, // The blog/post author name
        blogAuthorAvatar = feed.author[0].gd$image.src.replace(/\/s\d+(\-c)?\//, '/s' + config.avatarSize + '-c/'), // The blog/post author profile avatar URL
        blogGeneratorName = feed.generator.$t, // The blog generator name (Blogger)
        blogGeneratorURL = feed.generator.uri; // The blog generator URL (http://www.blogger.com)

    // Remove the leading `http://` or `https://` in blog/post author profile avatar URL
    // blogAuthorAvatar = blogAuthorAvatar.replace(/^https?\:/, "");

    // No container found
    if (!container) {
        alert('Container not found.');
        return;
    }

    // Getting the current post URL (if any)
    if (postID) {
        for (var h = 0, hen = feed.link.length; h < hen; ++h) {
            item = feed.link[h];
            if (item.rel == 'alternate') {
                postURL = item.href;
                break;
            }
        }
    }
 
    // No comments yet
    if (!feed.entry || feed.entry.length === 0) {
        container.innerHTML = '<p>No comments yet.</p>';
        return;
    }

    // Building the markup ...
    html += '<h1>' + blogTitle + '</h1>';
    html += '<p><b>Blog ID:</b> ' + blogID + '</p>';
    html += '<p><b>Post ID:</b> ' + postID + '</p>';
    html += '<p><b>Post URL:</b> ' + postURL + '</p>';
    html += '<p><b>Blog Author Name:</b> ' + blogAuthorName + '</p>';
    html += '<p><b>Blog Author Avatar URL:</b> ' + blogAuthorAvatar + '</p>';
    html += '<p><b>Total Comments:</b> ' + postCommentTotal + '</p>';
    html += '<p><b>Comments Per Page:</b> ' + postCommentPerPage + '</p>';
    html += '<p><b>Comments Start Index:</b> ' + postCommentStartIndex + '</p>';
    html += '<hr>';
    html += '<ol>';

    var comments = feed.entry;

    for (var i = 0, ien = comments.length; i < ien; ++i) {

        var comment = comments[i], // A single comment feed object
            commentID = comment.id.$t, // The comment ID
            commentPublish = comment.published.$t, // The comment publishing time in ISO format
            commentUpdate = comment.updated.$t, // The comment updating time in ISO format
            commentDate = commentPublish, // The comment publishing time in timestamp format you defined in the dashboard
            commentAuthorName = comment.author[0].name ? comment.author[0].name.$t : config.text.anon, // The comment author name
            commentAuthorURL = comment.author[0].uri ? comment.author[0].uri.$t : false, // The comment author profile URL
            commentAuthorAvatar = comment.author[0].gd$image.src.replace(/\/s\d+(\-c)?\//, '/s' + config.avatarSize + '-c/'), // The comment author profile avatar URL
            commentContent = comment.content ? comment.content.$t : comment.summary.$t.replace(/<br *\/?>|[\s]+/gi, ' ').replace(/<.*?>|[<>]/g, ""), // The comment content
            commentParent = false, // The comment parent ID (if any, for child comments)
            commentPermalink = false, // The comment permalink
            commentIsAdmin = commentAuthorName === blogAuthorName || commentAuthorAvatar === blogAuthorAvatar, // Is this comment was created by the blog/post author?
            commentDeleteURL = false; // The comment delete URL

        // Remove the leading `http://` or `https://` in comment author profile avatar URL
        // commentAuthorAvatar = commentAuthorAvatar.replace(/^https?\:/, "");

        for (var j = 0, jen = comment.link.length; j < jen; ++j) {
            item = comment.link[j];
            if (item.rel == 'self') {
                // Getting the original comment ID
                commentID = item.href.split('/').pop();
                // Getting the comment delete URL
                commentDeleteURL = item.href.replace(/\/feeds\/(\d+)\/(\d+)\/comments?\/(default|summary)\/(\d+)/, '/delete-comment.g?blogID=$1&postID=$4');
            }
            // Getting the comment permalink URL
            if (item.rel == 'alternate') {
                commentPermalink = item.href;
            }
            // Getting the comment parent ID (if any)
            if (item.rel == 'related') {
                var parentID = item.href.split('/').pop();
                commentParent = commentID !== parentID ? parentID : false;
            }
        }

        // Getting the comment publishing time in timestamp format you defined in the dashboard
        for (var k = 0, ken = comment.gd$extendedProperty.length; k < ken; ++k) {
            item = comment.gd$extendedProperty[k];
            if (item.name == 'blogger.displayTime') {
                commentDate = item.value;
                break;
            }
        }

        // Building the markup ...
        html += '<li>';
        html += '<p><b>ID:</b> ' + commentID + '</p>';
        html += '<p><b>Publish:</b> ' + commentPublish + '</p>';
        html += '<p><b>Update:</b> ' + commentUpdate + '</p>';
        html += '<p><b>Date:</b> ' + commentDate + '</p>';
        html += '<p><b>Author:</b> ' + commentAuthorName + '</p>';
        html += commentAuthorURL !== false ? '<p><b>URL:</b> ' + commentAuthorURL + '</p>' : "";
        html += '<p><b>Avatar URL:</b> ' + commentAuthorAvatar + '</p>';
        html += commentParent !== false ? '<p><b>Parent ID:</b> ' + commentParent + '</p>' : "";
        html += '<p><b>Permalink:</b> ' + commentPermalink + '</p>';
        html += '<p><b>Status:</b> ' + (commentIsAdmin ? 'admin' : 'guest') + '</p>';
        html += '<p><b>Delete URL:</b> ' + commentDeleteURL + '</p>';
        html += '<p><b>Message:</b></p>';
        html += '<div>' + commentContent + '</div>';
        html += '</li>';

    }

    // Building the markup ...
    html += '</ol>';

    // Show the generated data to the container ...
    container.innerHTML = html;

}

Penggunaan

<div id="result-container">Loading&hellip;</div>
<script>
function generateCommentsData(json) { … }
</script>
<script src="http://nama_blog.blogspot.com/feeds/comments/default?alt=json-in-script&reverse=false&orderby=published&callback=generateCommentsData"></script>

Lihat Demo

Ekstra

Memanggil Data Komentar untuk Posting Tertentu

Gunakan format URL seperti ini untuk membatasi pemanggilan data komentar hanya untuk komentar-komentar yang terdapat pada posting dengan ID 6427706034645358331:

http://nama_blog.blogspot.com/feeds/6427706034645358331/comments/default?alt=json-in-script&reverse=false&orderby=published&callback=generateCommentsData

Sayangnya Saya tidak berhasil menemukan referensi resmi mengenai JSON Blogger versi 1.0 di Google Developer. Dulu memang pernah ada tapi sekarang sudah tidak ada lagi. Yang ada sekarang lebih banyak ditujukan untuk API Blogger versi 3.0+ yang membutuhkan autentikasi.

Rabu, 07 Januari 2015

Memasang Tab New Window Menggunakan JavaScript

Memasang tab new window pada umumnya menggunakan tag target='_blank' yang dipasang kedalam url yang difungsikan menggunakan tab new tersebut, namun bagaimana jika menggunakan javascript? Apakah bisa? Tentu bisa, malahan jika menggunakan JavaScript dalam memasang tab new window akan memiliki tampilan lebih bagus yang lengkap dengan tombol new window terpasang dan bisa berwarna juga loh tombolnya

Klik tombol berikut untuk melihat DEMO

Untuk memasang tombol tab new window di blog, silahkan salin kode berikut ini
<form>
<input type="button" value="New Window!" onClick="window.open('http://neuwindow.blogspot.com/2015/01/demo-script-tab-new-window.html','mywindow','width=400,height=200,toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,copyhistory=yes,resizable=yes')">
</FORM>

Jika ingin memberi warna pada tombol, masukkan kode berikut ini kedalam script style="background:#bad80a;color:#454545;font-weight:bold;padding:10px;"
Sehingga hasilnya seperti berikut
<form>
<input type="button" value="New Window!" style="background:#bad80a;color:#454545;font-weight:bold;padding:10px;" onClick="window.open('http://neuwindow.blogspot.com/2015/01/demo-script-tab-new-window.html','mywindow','width=400,height=200,toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,copyhistory=yes,resizable=yes')">
</FORM>

Keterangan: Ganti kode yang berwarna merah ya..

Silahkan jika tertarik untuk memasang tab new window ini di blog Anda. Meskipun menggunakan script, tidak mempengaruhi loading blog kok.. :)

Sabtu, 29 November 2014

Beberapa Tip untuk Para Pengguna JQuery Tingkat Lanjut

Berikut ini adalah beberapa tip penggunaan JQuery tingkat lanjut untuk Anda yang menginginkan performa web yang lebih baik, entah itu dari segi lama/cepatnya waktu eksekusi skrip ataupun dari segi panjang/pendeknya penulisan kode. Semoga bermanfaat!

Kode Pintasan untuk ‘DOM Ready’

// Sebelum
$(document).ready(function() {
   …
});

// Sesudah
$(function() {
    …
});

Metode Berantai

Jika memang masih bisa dikaitkan, maka Anda sebenarnya tidak perlu menuliskan selektor JQuery berulang-ulang dan kemudian menerapkan metode pada selektor tersebut:

// Sebelum
$('button').click(function() {
    $(this).toggleClass('active');
    $(this).html('Clicked!');
    $(this).css('opacity', .5);
});
$('button').css('color', 'red');

// Sesudah
$('button').click(function() {
    $(this).toggleClass('active').html('Clicked!').css('opacity', .5);
}).css('color', 'red');

Menyeleksi Elemen `<body>` dan `<html>`

Selektor ini akan memberikan performa yang lebih baik:

// Sebelum
var $root = $('html'),
    $base = $('body');

// Sesudah
var $root = $(document.documentElement),
    $base = $(document.body);

Mengambil/Mengeset Atribut Elemen dengan JavaScript Mentah

Dalam kondisi tertentu, metode ini terbukti jauh lebih efisien jika dibandingkan dengan metode .attr():

// Sebelum
$('div').each(function(i) {
    $(this).attr({
        'class': 'foo',
        'id': 'bar-' + i
    });
});

// Sesudah
$('div').each(function(i) {
    this.className = 'foo';
    this.id = 'bar-' + i;
});

// Sebelum
$('a').click(function() {
    alert($(this).attr('href'));
});

// Sesudah
$('a').click(function() {
    alert(this.href);
});

Menerapkan Metode JavaScript Mentah kepada Selektor JQuery

Anda bisa menggunakan JQuery .get() untuk mengembalikan status selektor JQuery menjadi selektor JavaScript, atau gunakan indeks array yang ada untuk menyeleksi elemen pada urutan tertentu:

// Tidak valid
$('div').innerHTML = 'test';

// Valid
$('div').get(0).innerHTML = 'test';
$('div')[0].innerHTML = 'test';

// Tidak valid
$('#my-button').onclick = function() {
    alert('test!');
};

// Valid
$('#my-button').get(0).onclick = function() {
    alert('test!');
};
$('#my-button')[0].onclick = function() {
    alert('test!');
};

Fungsi Anonim untuk Menggantikan `.each()`

// Sebelum
$('div').each(function(i) {
    $(this).html('Element: ' + i);
});

// Sesudah
$('div').html(function(i) {
    return 'Element: ' + i;
});

Mengeset Event dan Mengeksekusinya Secara Bersamaan

// Sebelum
function windowSizeCheck() {
    $('#result').html('Width: ' + $(window).width() + '<br>Height: ' + $(window).height());
} windowSizeCheck();
$(window).resize(windowSizeCheck);

// Sesudah
$(window).resize(function() {
    $('#result').html('Width: ' + $(this).width() + '<br>Height: ' + $(this).height());
}).trigger("resize");

Jalan Pintas untuk Efek Toggle

Setiap metode dalam JQuery pada umumnya adalah berupa objek, sehingga Anda bisa menganggap $(document).ready() dan $(document)['ready']() sebagai dua hal yang sama:

// Tidak efisien
$('a').mouseenter(function() {
    $(this).addClass('hover');
});
$('a').mouseleave(function() {
    $(this).removeClass('hover');
});

// Lebih efisien
$('a').mouseenter(function() {
    $(this).addClass('hover');
}).mouseleave(function() {
    $(this).removeClass('hover');
});

// Lebih efisien lagi
$('a').hover(function() {
    $(this).addClass('hover');
}, function() {
    $(this).removeClass('hover');
});

// Paling efisien
$('a').on("mouseenter mouseleave", function(e) {
    $(this)[e.type == "mouseenter" ? 'addClass' : 'removeClass']('hover');
});

Efek Tabulasi

Gunakan .siblings() untuk menyeleksi semua elemen yang sejenis dengan X di dalam induk yang sama tanpa menyeleksi elemen X itu sendiri:


/**
 * <div class="my-tab-buttons">
 *   <a href="#tab-1">Tab 1</a>
 *   <a href="#tab-2">Tab 2</a>
 *   <a href="#tab-3">Tab 3</a>
 *   <a href="#tab-4">Tab 4</a>
 * </div>
 */

// Sebelum
$('.my-tab-buttons a').click(function() {
    $(this).parent().find('a').removeClass('active');
    $(this).addClass('active');
    return false;
});
$('.my-tab-buttons a:first').addClass('active');

// Sesudah
$('.my-tab-buttons a').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
    return false;
}).first().trigger("click");

Efek Animasi Beruntun

Sebelumnya Saya sudah pernah menjelaskan tentang ini…

// Sebelum
$('div')
    .animate({'font-size':10}, 400)
    .animate({'font-size':50}, 400)
    .animate({'font-size':100}, 400)
    .animate({'margin-top':200}, 400);

// Sesudah
var anim = [
    {'font-size':10},
    {'font-size':50},
    {'font-size':100},
    {'margin-top':200}
];
$.each(anim, function(i) {
    $('div').animate(anim[i], 400);
});

// Sebelum
$('div')
    .animate({'font-size':10}, 400)
    .animate({'font-size':50}, 1000)
    .animate({'font-size':100}, 200)
    .animate({'margin-top':200}, 300);

// Sesudah
var anim = [
    [{'font-size':10}, 400],
    [{'font-size':50}, 1000],
    [{'font-size':100}, 200],
    [{'margin-top':200}, 300]
];
$.each(anim, function(i) {
    $('div').animate(anim[i][0], anim[i][1]);
});

Efek Berdenyut

function pulsate() {
    var $div = $('div');
    $div.animate({
        fontSize: $div.css('font-size') == '50px' ? '100px' : '50px'
    }, 800, pulsate);
} pulsate();

Minggu, 24 Agustus 2014

Membuat Widget Latest Updated Untuk Blogger

Widget Latest Updated adalah widget yang menampilkan daftar artikel yang terakhir diperbaharui/latest updated. Widget ini juga sangat membantu pengunjung dalam memantau artikel yang terkahir Anda perbaharui. Anda juga bisa menggunakan koleksi widget lainnya Widget Recent Posts, Widget Random Posts, Widget Most Commented, Widget Recent Posts By Tag dan Widget Recent Comments

Cara Memasang Widget Latest Updated Untuk Blogger

1. Pertama simpan dahulu CSS ini diatas kode ]]></b:skin> atau </style>

/*Latest Updated*/
li.update {list-style: none;height:auto;overflow:hidden}
li.update a{font-family:'Oswald',sans-serif;font-size:16px;font-weight:normal;margin:0;}
li.update a:hover{color:#859ce6}
.imgupdate{float:left; margin:0 10px 10px 0}
.imgupdate:hover{opacity:0.7}
.tgl-com {display:block;font-size:16px;margin-top:5px;font-size:16px}

2. Silakan salin dan simpan kode ini diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
//Terakhir Diperbaharui by Infokmu.com
function updatedPosts(a){if(document.getElementById("updated-posts")){var e=a.feed.entry,title,img,link,date,content="",o=["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],ct=document.getElementById("updated-posts");for(var i=0;i<5;i++){for(var j=0;j<5;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t,pd=e[i].published.$t.substring(0,10).split("-");if("media$thumbnail"in e[i]){img=e[i].media$thumbnail.url}else{img="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb4ovyrVDh46wLtezlBTalulWE3Xzg5rkYxktkkCsoIje0TKLDHV-6LnbesprbdXC3uzgVflfEU5BFr3Ft1pl1aeWV7xAryFsWAkYhTa2ble48tQ7s_d_FV_c0gH1GkpIvyFK07tjfH04t/s70-c/KM+Icon.png"}content+='<li class="update"><a href="'+link+'" target="_blank" title="'+title+'"><img src="'+img.replace(/\/s72-c/,"/s70-c")+'" class="imgupdate" alt="'+link+'" height="70px" width="70px"/></a>';content+='<strong><a href="'+link+'" target="_blank" title="'+title+'">'+title+'</a></strong><span class="tgl-com" datetime="'+pd.join("-")+'">  '+(pd[2]+" "+o[(parseInt(pd[1],10)-1)]+" "+pd[0])+'</span></li>'}ct.innerHTML=content}}function getScript(url){var s=document.createElement("script");s.type="text/javascript";s.src=url;documenhttp://jsfiddle.net/#savet.body.appendChild(s)}getScript("/feeds/posts/summary?alt=json-in-script&orderby=updated&max-results=5&callback=updatedPosts");
//]]>
</script>

3. Kemudian simpan kode ini pada widget blogger HTML/JavaScript.

<ul id="updated-posts"></ul>

Demo

Membuat Widget Recent Comments Untuk Blogger

Widget Recent Comments adalah widget yang menampilkan komentar terkahir yang masuk. Widget ini sangat bermanfaat bagi pengunjung untuk mengetahui komentar terakhir yang masuk. Ini juga bisa menjadi alternatif bagi Anda yang ingin cek komentar tanpa harus masuk ke akun blogger Anda. Anda juga bisa menggunakan koleksi widget lainnya Widget Recent Posts, Widget Random Posts, Widget Most Commented dan Widget Recent Posts By Tag.

Cara Memasang Widget Recent Comments Untuk Blogger

1. Silakan salin dan simpan kode ini diatas kode </head>

<script type='text/javascript'>
//Recent Comments Settings
var numComments  = 5;
var characters  = 60;
</script>
<script type='text/javascript'>
//<![CDATA[
//Recent Comments
var numComments=numComments||5,characters=characters||40;function recent_comments(tb){var commentsHtml;commentsHtml='<ul id="recent_comments">';for(var i=0;i<numComments;i++){var commentlink,authorName;if(i==tb.feed.entry.length)break;commentsHtml+="<li>";var entry=tb.feed.entry[i];for(var l=0;l<entry.link.length;l++){if(entry.link[l].rel=='alternate'){commentlink=entry.link[l].href}}for(var a=0;a<entry.author.length;a++){authorName=entry.author[a].name.$t}commentsHtml+="<strong><a href=\""+commentlink+"\" title=\""+authorName+"\">"+authorName+"</a></strong>";var commHTML=entry.content.$t;var commBody=commHTML.replace(/(<([^>]+)>)/ig,"");if(commBody!=""&&commBody.length>characters){commBody=commBody.substring(0,characters);commBody+=" &hellip;"}else{commBody=commBody}commentsHtml+=" - ";commentsHtml+="<span>"+commBody+"</span>";commentsHtml+="</li>"}commentsHtml+='</ul>';document.write(commentsHtml)}
//]]>
</script>

2. Kemudian simpan kode ini pada widget blogger HTML/JavaScript.

<script>
document.write("<script src=\"/feeds/comments/default?alt=json&callback=recent_comments\"><\/script>");
</script>

Demo

Pengaturan

Icon	Teks
var numComments	Silakan atur dan ganti dengan jumlah komentar yang ingin ditampilkan
var characters	Silakan atur jumlah karakter yang ingin dimunculkan pada isi komentar

Sabtu, 02 Agustus 2014

Membuat Widget Recent Posts By Tag Untuk Blogger

Widget Recent Posts By Tag adalah widget yang dipilih berdasarkan label tertentu pada blogger. Jadi dengan adanya widget ini lebih memudahkan pengunjung dalam mencari artikel yang lebih spesifik. Silakan coba juga koleksi widget lainnya seperti Widget Recent Posts, Widget Random Posts dan Widget Most Commented.

Cara Memasang Widget Recent Posts By Tag Untuk Blogger

1. Pertama simpan dahulu CSS ini diatas kode ]]></b:skin> atau </style>

/*Recent Post By tag*/
img.rct-thumb{float:left;margin-right:10px;height:72px;width:72px;}
.recent-by-tag{width:100%;margin:0;padding:0}
ul.recent-by-tag li{padding:10px 0;margin-bottom:0;border-bottom:1px solid #ddd}
.recent-by-tag li{font-size:13px;list-style:none;padding-left:0;margin:0;padding:0;overflow:hidden}
.recent-by-tag a{font-family:'Oswald',sans-serif;font-size:16px;font-weight:normal;margin:0;}
.recent-by-tag strong{padding-left:0}
span.showdates{font-size:16px;margin:10px 0 0}

2. Silakan salin dan simpan kode ini diatas kode </head>

<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = true;</script>
<script type='text/javascript'>
//<![CDATA[
// Recent Post By Tag
// Recent Post By Tag For Blogger by Kang Mousir
// http://gplus.to/mousir - http://kang-mousir.blogspot.com
function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url}catch(h){s=n.content.$t;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if(a!=-1&&b!=-1&&c!=-1&&d!=""){l=d}else l="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb4ovyrVDh46wLtezlBTalulWE3Xzg5rkYxktkkCsoIje0TKLDHV-6LnbesprbdXC3uzgVflfEU5BFr3Ft1pl1aeWV7xAryFsWAkYhTa2ble48tQ7s_d_FV_c0gH1GkpIvyFK07tjfH04t/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('<li class="clear">');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_blank" title="'+r+'"><img class="rct-thumb" alt="'+r+'" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" target ="_blank" title="'+r+'" rel="nofollow">'+r+'</a></strong>');document.write('<br>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>");if(t!=numposts-1)document.write("")}document.write("</ul>")}
//]]>
</script>

3. Kemudian simpan kode ini pada widget blogger HTML/JavaScript.

<script>
document.write("<script src=\"/feeds/posts/default/-/Belajar%20SEO?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>

Demo

Pengaturan

Icon	Teks
var numPosts	Isi dengan jumlah artikel yang ingin ditampilkan
var showpostthumbnails	Pilih true jikn ingin menamapilkn gambar dan false untuk menghilangkannya
var showpostdate	Pilih true jika ingin menamapilkn tanggal dan false untuk menghilangkannya
Belajar%20SEO	Silakan ganti dengan label yang di inginkan, bila lebih dari dua kata gunakan `%20` sebagai pengganti spasi

Jumat, 20 Juni 2014

Navigasi Halaman dengan Keyboard

Sisipkan kode ini di atas </head> atau di atas </body> pada editor templat Anda, lalu simpan perubahan:

<script>
//<![CDATA[
(function(win, doc) {

    var pager = false;

    // left = 37, right = 39
    doc.onkeydown = function(e) {
        switch (e.keyCode) {
            case 37: pager = doc.getElementById('blog-pager-newer-link'); break;
            case 39: pager = doc.getElementById('blog-pager-older-link'); break;
        }
        if (pager) {
            win.location.href = pager.children[0].href;
            return false;
        }
    };

})(window, document);
//]]>
</script>

Sekarang Anda akan bisa melakukan navigasi menggunakan tombol panah kanan atau kiri pada keyboard. Ini cuma berlaku untuk markup HTML navigasi halaman Blogger yang masih standar. Untuk navigasi halaman yang sudah mengalami perubahan mungkin akan memerlukan sedikit modifikasi, terutama pada bagian nilai variabel pager di dalam kondisional switch.

Menambahkan Efek Aktif (Seperti Tertekan)

Dengan cara menambahkan kelas active pada navigasi halaman ketika tombol panah kanan dan/atau kiri ditekan, maka kita bisa menciptakan efek aktif/tertekan palsu melalui kelas tersebut:

<script>
//<![CDATA[
(function(win, doc) {

    var pager = false;

    // left = 37, right = 39
    doc.onkeydown = function(e) {
        switch (e.keyCode) {
            case 37: pager = doc.getElementById('blog-pager-newer-link'); break;
            case 39: pager = doc.getElementById('blog-pager-older-link'); break;
        }
        if (pager) {
            pager.className = pager.className += ' active';
            win.location.href = pager.children[0].href;
            return false;
        }
    };

    doc.onkeyup = function(e) {
        switch (e.keyCode) {
            case 37: pager = doc.getElementById('blog-pager-newer-link'); break;
            case 39: pager = doc.getElementById('blog-pager-older-link'); break;
        }
        if (pager) {
            pager.className = pager.className.replace(/ active/g, "");
        }
    };

})(window, document);
//]]>
</script>

#blog-pager-older-link.active a,
#blog-pager-newer-link.active a,
#blog-pager-older-link a:active,
#blog-pager-newer-link a:active {
  background-color:red;
  color:white;
}

Demonstrasi bisa Anda lihat di sini. Pastikan Anda sudah berada dalam keadaan terfokus pada area ketika hendak menekan tombol panah kanan dan kiri:

Lihat Demo

Metode ini mungkin tidak cocok untuk diterapkan pada blog yang bersifat umum karena akan mengganggu fungsi tombol keyboard yang asli. Lebih baik terapkan pada blog-blog yang bersifat pribadi saja.

Rabu, 04 Juni 2014

Membuat Widget Most Commented Untuk Blogger

Widget Most Commented adalah widget yang menampilkan daftar artikel yang paling banyak di komentari dari yang terbanyak hingga terkecil. Widget ini sama seperti sebelumnya yaitu memanfaatkan JSON Blogger, widget yang pernah Saya bagikan antara lain Widget Recent Posts dan Widget Random Posts.

Sama seperti sebelumnya yang ditampilkan pada widget ini hanya menampilkan judul dari artikel saja, tapi disertai dengan jumlah komentar pada artikel tersebut.

Cara Memasang Widget Most Commented Untuk Blogger

Silakan salin dan simpan kode dibawah ini pada widget di blog Anda, gunakan HTML/JavaScript

<style type="text/css" scoped>
#most-commented ul,#most-commented li{margin:0;padding:0;list-style:none;color:black;font-family: 'Open Sans', Helvetica, Arial, sans-serif;font-weight:bold;font-size:14px}
#most-commented ul li{position:relative;overflow:hidden;background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #f5edf5 100%);border:1px solid #DFDFDF;margin:0 0 10px 0!important;padding:5px 5px 5px 45px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
#most-commented ul li a{color:#666;text-shadow:0px 1px 0px #fff;font-weight:bold;text-decoration:none;}
#most-commented ul li:hover{background: #F9F9F9;}
.bubble-most{position:absolute;left:0;top:0;width:40px;height:100%;margin:0;padding:5px 0;background-color:#333;color:#fff!important;text-align:center;}
</style>
<div id="most-commented"></div>
<script type"text/javascript">
//<![CDATA[
// Most Commented Widget For Blogger by Kang Mousir
// http://gplus.to/mousir - http://kang-mousir.blogspot.com
var numPosts=10;//Jumlah artikel yang ingin ditampilkan
var homePage="kang-mousir.blogspot.com";//URL blog
var postTitlear=new Array();
var postUrlar=new Array();
var postCommentar=new Array();
var totalpost;document.write('<div id="most-commented"><ul>');
function mostComment(j){var a=j.feed.entry.length;totalpost=a;
for(var f=0;f<a;f++){
var h=j.feed.entry[f];
var c=h.title.$t;var b;
var g;if(f==j.feed.entry.length){break}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];}};
postTitlear.push(c);
postUrlar.push(g);
postCommentar.push(b)}sortPosts();
for(var f=0;f<numPosts;f++){var e='<li><span class="bubble-most">'+postCommentar[f]+'</span><a href="'+postUrlar[f]+'" title="'+postTitlear[f]+'" target="_blank">'+postTitlear[f]+'</a>';
document.write(e)}}
function sortPosts(){function c(d,f){var e=postTitlear[d];
postTitlear[d]=postTitlear[f];
postTitlear[f]=e;
var e=postUrlar[d];
postUrlar[d]=postUrlar[f];
postUrlar[f]=e;
var e=postCommentar[d];
postCommentar[d]=postCommentar[f];
postCommentar[f]=e}
for(var b=0;b<postTitlear.length-1;b++){
for(var a=b+1;a<postTitlear.length;a++){
if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}
document.write('<script src="http://'+homePage+'/feeds/posts/default?max-results=9999&orderby=published&alt=json-in-script&callback=mostComment"><\/script>');
document.write('</li>')
document.write('</ul>')
document.write('</div>');
//]]>
</script>

Demo

Pengaturan

Icon	Teks
var homePage	Isi dengan URL blog Anda
var numPosts	Isi dengan jumlah artikel yang ingin ditampilkan

Dengan adanya widget ini akan memberitahukan kepada pengunjung artikel mana yang paling banyak dibahas dan paling banyak dikomentari ;)

Selasa, 03 Juni 2014

Membuat Widget Random Posts Untuk Blog

Widget Random Posts adalah widget memuat artikel secara acak. Widget ini bisa dipakai untuk blog agar pengunjung lebih mudah mencari artikel yang mungkin di inginkan. Pada widget ini hanya menampilkan judul artikel saja, sama seperti Widget Recent Posts sebelumnya yang saya bagikan.

Cara Memasang Widget Random Posts Pada Blog

Silakan salin dan simpan kode dibawah ini pada widget di blog Anda, gunakan HTML/JavaScript

<ul id="random-posts"></ul>
<script>
//<![CDATA[
var homePage = "http://kang-mousir.blogspot.com/",
numPosts = 5;
function randomPosts(a){if(document.getElementById("random-posts")){var e=shuffleArray(a.feed.entry),title,link,img,content="",ct=document.getElementById("random-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<strong><li class="random-posts"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li></strong>'}ct.innerHTML=content}}function shuffleArray(arr){var i=arr.length,j,temp;if(i===0)return false;while(--i){j=Math.floor(Math.random()*(i+1));temp=arr[i];arr[i]=arr[j];arr[j]=temp}return arr}var random_post=document.createElement('script');random_post.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=999&callback=randomPosts';document.getElementsByTagName('head')[0].appendChild(random_post);
//]]>
</script>

Demo

Pengaturan

Icon	Teks
var homePage	Isi dengan URL blog Anda
numPosts	Isi dengan jumlah artikel yang ingin ditampilkan

Untuk mengatur jumlah artikel yang ingin ditampilkan silakan lihat keterangan diatas dan ganti kode yang Saya tandai ;)

Membuat Widget Recent Posts Untuk Blog

Widget Recent Posts adalah widget yang berisi artikel terbaru dari sebuah blog. Widget ini bisa Anda jadikan untuk memberitahukan kepada pengunjung artikel terbaru dari blog Anda. Widget ini lebih simpel karena hanya menampilkan judul artikel saja, jadi tidak memberatkan terhadap blog.

Cara Memasang Widget Recent Posts Pada Blog

Silakan salin dan simpan kode dibawah ini pada widget blog Anda, pada HTML/JavaScript

<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "http://kang-mousir.blogspot.com/",
numPosts = 5;
function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><strong><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></strong></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>

Demo

Pengaturan

Icon	Teks
var homePage	Isi dengan URL blog Anda
numPosts	Isi dengan jumlah artikel yang ingin ditampilkan

Untuk mengatur jumlah artikel yang ingin ditampilkan silakan lihat keterangan diatas dan ganti kode yang Saya tandai ;)

Selasa, 29 April 2014

Membuat Navigasi Halaman Ala Wordpress

Membuat Navigasi Halaman sudah Saya tulis pada artikel berjudul Memasang Navigasi Halaman Pada Blog, namun itu hanya navigasi biasa. Oleh karena itu Saya akan berbagi navigasi halaman yang lebih keren dari sebelumnya yaitu Navigasi Halaman Ala Wordpress.

Tutorial ini Saya dapat dari blog Vietnam pada artikelnya yang berjudul Page Navigation với phong cách WP-PageNavi, disini Saya kan terjemahkan ke dalam Bahasa Indonesia agar para blogger Indonesia lebih memahaminya.

Cara Memasang Navigasi Halaman Ala Wordpress Pada Blog

1. Silakan Anda simpan kode CSS ini diatas kode ]]></b:skin> atau </style>

.pagenavi{clear:both;margin:20px 0 10px;text-align:center;font-weight:bold;color:#fff !important;text-transform:uppercase}
.pagenavi span,.pagenavi a{padding:5px 15px;margin-right:3px;display:inline-block;color:#fff !important;background-color:#3498db;}
.pagenavi .current{color:#fff !important;background-color:#555;}
.pagenavi .current,.pagenavi .pages,.pagenavi a:hover{color:#fff !important;background-color:#555;}
.pagenavi .pages {margin:0 -1px 0 0}

2. Kemudian Anda cari kode mirip seperti ini

<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>

Lalu simpan kode dibawah ini dibawahnya

 <b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot;Next&quot;,
prevText: &quot;Prev&quot;
}
</script>
<script type='text/javascript'>
//<![CDATA[
function pageNavi(o){var m=location.href,l=m.indexOf("/search/label/")!=-1,a=l?m.substr(m.indexOf("/search/label/")+14,m.length):"";a=a.indexOf("?")!=-1?a.substr(0,a.indexOf("?")):a;var g=l?"/search/label/"+a+"?updated-max=":"/search?updated-max=",k=o.feed.entry.length,e=Math.ceil(k/pageNaviConf.perPage);if(e<=1){return}var n=1,h=[""];l?h.push("/search/label/"+a+"?max-results="+pageNaviConf.perPage):h.push("/?max-results="+pageNaviConf.perPage);for(var d=2;d<=e;d++){var c=(d-1)*pageNaviConf.perPage-1,b=o.feed.entry[c].published.$t,f=b.substring(0,19)+b.substring(23,29);f=encodeURIComponent(f);if(m.indexOf(f)!=-1){n=d}h.push(g+f+"&max-results="+pageNaviConf.perPage)}pageNavi.show(h,n,e)}pageNavi.show=function(f,e,a){var d=Math.floor((pageNaviConf.numPages-1)/2),g=pageNaviConf.numPages-1-d,c=e-d;if(c<=0){c=1}endPage=e+g;if((endPage-c)<pageNaviConf.numPages){endPage=c+pageNaviConf.numPages-1}if(endPage>a){endPage=a;c=a-pageNaviConf.numPages+1}if(c<=0){c=1}var b='<span class="pages">Pages '+e+' of '+a+"</span> ";if(c>1){b+='<a href="'+f[1]+'">'+pageNaviConf.firstText+"</a>"}if(e>1){b+='<a href="'+f[e-1]+'">'+pageNaviConf.prevText+"</a>"}for(i=c;i<=endPage;++i){if(i==e){b+='<span class="current">'+i+"</span>"}else{b+='<a href="'+f[i]+'">'+i+"</a>"}}if(e<a){b+='<a href="'+f[e+1]+'">'+pageNaviConf.nextText+"</a>"}if(endPage<a){b+='<a href="'+f[a]+'">'+pageNaviConf.lastText+"</a>"}document.write(b)};(function(){var b=location.href;if(b.indexOf("?q=")!=-1||b.indexOf(".html")!=-1){return}var d=b.indexOf("/search/label/")+14;if(d!=13){var c=b.indexOf("?"),a=(c==-1)?b.substring(d):b.substring(d,c);document.write('<script type="text/javascript" src="/feeds/posts/summary/-/'+a+'?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}else{document.write('<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}})();
        //]]>
</script>
    </div>
    </b:includable>

3. Lalu cari kode <b:include name='nextprev'/> dan ganti dengan kode dibawah ini.

<b:if cond='data:blog.pageType == "index"'>
    <b:include name='page-navi' />
    <b:else/>
    <b:if cond='data:blog.pageType == "archive"'>
        <b:include name='page-navi' />
    </b:if>
</b:if>

4. Terakhir Anda Simpan

Pengaturan

Kode	Keterangan
perPage	Jumlah yang ingin ditampilkan pada satu halaman
numPages	Jumlah navigasi Halaman yang ingin ditampilkan
firstText	Teks halaman pertama
astText	Teks halaman terkahir
nextText	Teks untuk halaman selanjutnya
prevText	Teks untuk halaman sebelumnya

Senin, 21 April 2014

JavaScript Brightness

/**
 * http://www.sitepoint.com/javascript-generate-lighter-darker-color/
 */

function colorLuminance(hex, lum) {
    // Validate hex string
    hex = String(hex).replace(/[^0-9a-f]/gi, "");
    if (hex.length < 6) {
        hex = hex.replace(/(.)/g, '$1$1');
    }
    lum = lum || 0;
    // Convert to decimal and change luminosity
    var rgb = '#', c;
    for (var i = 0; i < 3; ++i) {
        c = parseInt(hex.substr(i * 2, 2), 16);
        c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
        rgb += ('00' + c).substr(c.length);
    }
    return rgb;
}

Penggunaan

colorLuminance('#aabbaa', 0.5); // lighter
colorLuminance('#aabbaa', -0.5); // darker

Lihat Demo

Rabu, 16 April 2014

Memasang Navigasi Halaman Pada Blog

Navigasi halaman adalah suatu daftar halaman pada blog dengan nomor - nomor halaman. Dengan memasang navigasi halaman tentunya akan memudahkan pengunjung dalam menjelajahi blog Anda.

Langkah Pertama

Simpan kode CSS dibawah ini diatas kode </head>..

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type="text/css">
.showpageNum a,.showpage a,.showpagePoint{margin-top:10px;margin-bottom:20px;background:#f35d5c;border:none;margin-left:5px;color:#FFF;font-size:15px;font-family:'Arial';font-weight:700;transition:all 0.3s ease-in-out;padding:10px 15px;box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);}
.showpagePoint{background:#555;color:#fff;}
.showpageNum a:hover,.showpage a:hover{background:#555;color:#fff;}
</style>
</b:if>
</b:if>

Silakan Anda atur CSS nya untuk menyesuaikan dengan kebutuhan blog.

Langkah Kedua

Simpan kode dibawah ini diatas kode </body>.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=8;
var upPageWord =&#39;Prev &#39;;
var downPageWord =&#39; Next&#39;;
</script>
<script src='https://googledrive.com/host/0B8WEGGjyXlaMMWdabjB6Q3RhRjg/PageNavigation.js' type='text/javascript'></script>
</b:if>
</b:if>

Pengaturan

Opsi	Keterangan
`pageCount`	Jumlah per halaman
`displayPageNum`	Jumlah halaman yang ingin ditampilkan
`upPageWord`	Tombol sebelumnya
`downPageWord`	Tombol selanjutnya

Selasa, 01 April 2014

Range Slider Kustom Sederhana

Dapat digunakan sebagai alternatif JQuery UI Slider atau plugin-plugin sejenis yang memiliki ukuran berkas cukup besar. Terkadang Saya memerlukan sesuatu yang sejenis dengan itu, tetapi dengan fitur yang lebih sederhana. Asalkan bisa digunakan untuk memperbaharui nilai dengan cara menggeser-geser dragger maka itu sudah cukup. Jadi Saya membuat ini:

Kode Sumber dan Demo

Dasar Penggunaan

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <link href="css/shell.css" rel="stylesheet">
  </head>
  <body>

    <div id="range-slider-1"></div>

    <script src="js/range-slider.js"></script>
    <script>
    rangeSlider(document.getElementById('range-slider-1'), {
        drag: function(v) {
           console.log(v + '%');
        }
    });
    </script>
  </body>
</html>

Konfigurasi

Opsi	Keterangan
`value`	Digunakan untuk menentukan posisi dragger saat inisiasi. Nilai yang bisa diterima adalah dari angka `1` sampai `100` (berdasarkan persentase).
`vertical`	Set sebagai `true` untuk membuat range slider vertikal.
`rangeClass`	Digunakan untuk menambahkan kelas ekstra pada jalur penggeser.
`draggerClass`	Digunakan untuk menambahkan kelas ekstra pada penggeser.
`drag`	Fungsi untuk menampilkan nilai range slider ke elemen tertentu.

var defaults = {
    value: 0, // set default value on initiation from `0` to `100` (percentage based)
    vertical: false, // vertical or horizontal?
    rangeClass: "", // add extra custom class for the range slider track
    draggerClass: "", // add extra custom class for the range slider dragger
    drag: function(v) { /* console.log(v); */ } // function to return the range slider value into something
};

Lolos tes pada semua peramban mayor, termasuk Internet Explorer 8.

Minggu, 23 Maret 2014

JavaScript “Extend”

Fungsi ini setara dengan JQuery.extend() yang memungkinkan kita untuk menciptakan variabel opsional, dimana variabel tersebut bisa dinyatakan ataupun ditiadakan. Jika tidak dinyatakan, maka nilai variabel yang tidak hadir tersebut akan jatuh pada nilai default yang telah ditentukan di dalam fungsi:

// http://stackoverflow.com/a/12317051/1163000
function extend(target, source) {
    target = target || {};
    for (var prop in source) {
        if (typeof source[prop] === "object") {
            target[prop] = extend(target[prop], source[prop]);
        } else {
            target[prop] = source[prop];
        }
    }
    return target;
}

Contoh Penggunaan

function myFunction(config) {

    var defaults = {
        firstName: 'Taufik',
        lastName: 'Nurrohman',
        age: 22
    };

    // Extend...
    config = extend(defaults, config);

    return config;

}

Ketika Anda mengubah beberapa nilai variabel konfigurasi, maka variabel-variabel konfigurasi default yang lain yang tidak diubah akan menyesuaikan:

myFunction({
    firstName: 'Foo'
});

Hasil

JavaScript Extend Test via Window Console — **Taufik** telah berubah menjadi **Foo**.

Sebenarnya dulu Saya sudah pernah menulis posting yang sejenis dengan ini. Tapi metode yang Saya tuliskan dalam posting tersebut tidak mampu untuk menangani objek multi-dimensi seperti ini:

var defaults = {
    option_1: value_1,
    option_2: value_2,
    option_3: {
        option_3_1: {
            option_3_1_1: value_3_1_1,
            option_3_1_2: value_3_1_2
        },
        option_3_2: value_3_2,
        option_3_3: value_3_3
    },
    option_4: value_4
};

Minggu, 10 April 2016

Rabu, 06 Januari 2016

Minggu, 12 Juli 2015

Penggunaan

Minggu, 26 April 2015

Demo

Referensi

Rabu, 18 Februari 2015

Bentuk Daftar

Penggunaan

Bentuk Tunggal

Penggunaan

Ekstra

Halaman Statis

Mode Ringkas

Bentuk Daftar

Penggunaan

Ekstra

Memanggil Data Komentar untuk Posting Tertentu

Rabu, 07 Januari 2015

Sabtu, 29 November 2014

Kode Pintasan untuk ‘DOM Ready’

Metode Berantai

Menyeleksi Elemen <body> dan <html>

Mengambil/Mengeset Atribut Elemen dengan JavaScript Mentah

Menerapkan Metode JavaScript Mentah kepada Selektor JQuery

Fungsi Anonim untuk Menggantikan .each()

Mengeset Event dan Mengeksekusinya Secara Bersamaan

Jalan Pintas untuk Efek Toggle

Efek Tabulasi

Efek Animasi Beruntun

Efek Berdenyut

Minggu, 24 Agustus 2014

Cara Memasang Widget Latest Updated Untuk Blogger

Cara Memasang Widget Recent Comments Untuk Blogger

Pengaturan

Sabtu, 02 Agustus 2014

Cara Memasang Widget Recent Posts By Tag Untuk Blogger

Pengaturan

Jumat, 20 Juni 2014

Menambahkan Efek Aktif (Seperti Tertekan)

Rabu, 04 Juni 2014

Cara Memasang Widget Most Commented Untuk Blogger

Pengaturan

Selasa, 03 Juni 2014

Cara Memasang Widget Random Posts Pada Blog

Pengaturan

Cara Memasang Widget Recent Posts Pada Blog

Pengaturan

Selasa, 29 April 2014

Cara Memasang Navigasi Halaman Ala Wordpress Pada Blog

Pengaturan

Senin, 21 April 2014

Penggunaan

Rabu, 16 April 2014

Langkah Pertama

Langkah Kedua

Pengaturan

Selasa, 01 April 2014

Dasar Penggunaan

Konfigurasi

Minggu, 23 Maret 2014

Contoh Penggunaan

Hasil

Menyeleksi Elemen `<body>` dan `<html>`

Fungsi Anonim untuk Menggantikan `.each()`