Senin, 21 November 2011

Another Blogger Tips for Stylish Blogger

Kembali bersama Beben Koben si bloglang anu ganteng kalem tea dalam mencari-cari blogger yang secara khusus memberitakan artikel mengenai tutorial, hack, trick, tips or etc ketebelece blogspot. Koben menemukan lagi blogger stylish oke punya, please welcome Yet Another Blogger Tips Blog - YABTB. Teh great blogger and awesome article you can find there b-)
Master script pemilik blog tersebut, Python script :-bd Yang menurut dia mudah, bagi saya sulitnya minta ampun =)) Kita acak-acak satu per satu postingan gaya punya dari sana. Recent comment kreasi yabtb sangat patut diperhitungkan! Karena memakai script yang berisikan auto favicon for avatar :)) Script yg dia buat banyak memakai pemanggilan +window.location.hostname+ sehingga kita tidak perlu lagi capek² pasang link ;))

Return of the Better Recent Comments Blogger


<style type="text/css">
.recent-comment { margin-bottom:10px; padding-left: 24px; }
.recent-comment-admin { background-color: #F4F4F4; }
.recent-comment-ico { margin-left: -20px;margin-top: 4px;float: left;}
.recent-comment-body { padding-right: 4px; font-size: 95%;}
.recent-comment-footer { font-size: 85%; }
</style>
<script type="text/javascript">
// Recent Comments blogger gadget by MS-potilas 2011
// see http://yabtb.blogspot.com

var numRecentComments = 5;
var numPerPost = 2; // max comments per post (to try) or 0
var maxCommentChars = 90;
var maxPostTitleChars = 0; // if 0, use full post title

var txtWrote = 'wrote:';
var txtMore = 'Continue >>';
var txtTooltip = '[user] on &quot;[title]&quot; - [date MM/dd/yy hh:mm]';
var txtAnonymous = ''; // empty, or Anonymous user name localized
// Variables [xxx] in texts:
// supports [title], [user], [date], [time], [datetime], [date format]
// format supports: yyyy=long year, yy=short year, MM=month(01-12), dd=monthday, hh=hour, mm=min, ss=sec

var getTitles = true; // false faster
var trueAvatars = true; // false faster
var urlMyAvatar = ''; // can be empty (then it is fetched) or url to image
var urlMyProfile = ''; // set if you have no profile gadget on page
//
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=16';
var maxResultsPosts = ""; // or for example "&max-results=100"
var maxResultsComments = ""; // or for example "&max-results=300"
// CONFIG END
var urlToTitle = {};
function replaceVars(text, user, title, date) {
text = text.replace('[user]', user);
text = text.replace('[date]', date.toLocaleDateString());
text = text.replace('[datetime]', date.toLocaleString());
text = text.replace('[time]', date.toLocaleTimeString());
text = text.replace('[title]', title.replace(/\"/g,'&quot;'));
var i = text.indexOf("[date ");
if(i > -1) {
var format = /\[date\s+(.+?)\]/.exec(text)[1];
if(format != '') {
var txtDate = format.replace(/yyyy/i, date.getFullYear());
txtDate = txtDate.replace(/yy/i, date.getFullYear().toString().slice(-2));
txtDate = txtDate.replace("MM", String("0"+(date.getMonth()+1)).slice(-2));
txtDate = txtDate.replace("mm", String("0"+date.getMinutes()).slice(-2));
txtDate = txtDate.replace("ss", String("0"+date.getSeconds()).slice(-2));
txtDate = txtDate.replace("dd", String("0"+date.getDate()).slice(-2));
//or: txtDate = txtDate.replace("dd", date.getDate());
txtDate = txtDate.replace("hh", String("0"+date.getHours()).slice(-2));
//or: txtDate = txtDate.replace("hh", date.getHours());
text = text.replace(/\[date\s+(.+?)\]/, txtDate)
}
}
return text;
}
if(urlMyProfile == "") {
var elements = document.getElementsByTagName("*");
var expr = /(^| )profile-link( |$)/;
for(var i=0 ; i<elements.length ; i++)
if(expr.test(elements[i].className)) {
urlMyProfile = elements[i].href;
break;
}
}
function getPostUrlsForComments(json) {
for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
var href;
for (var k = 0; k < entry.link.length; k++ ) {
if (entry.link[k].rel == 'alternate') {
href = entry.link[k].href;
break;
}
}
urlToTitle[href] = entry.title.$t;
}
}
function showRecentComments(json) {
var postHandled = {};
var j = 0;
if(numPerPost) {
while(numPerPost < numRecentComments) {
for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
if(entry["thr$in-reply-to"]) {
if(!postHandled[entry["thr$in-reply-to"].href])
postHandled[entry["thr$in-reply-to"].href] = 1;
else
postHandled[entry["thr$in-reply-to"].href]++;
if(postHandled[entry["thr$in-reply-to"].href] <= numPerPost)
j++;
}
}
if(j >= numRecentComments)
break;
numPerPost++;
j = 0;
postHandled = {};
}
if(numRecentComments == numPerPost)
numPerPost = 0;
}
postHandled = {};
j = 0;
for(var i = 0 ; j < numRecentComments && i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
if(numPerPost && postHandled[entry["thr$in-reply-to"].href] && postHandled[entry["thr$in-reply-to"].href] >= numPerPost)
continue;
if(entry["thr$in-reply-to"]) {
if(!postHandled[entry["thr$in-reply-to"].href])
postHandled[entry["thr$in-reply-to"].href] = 1;
else
postHandled[entry["thr$in-reply-to"].href]++;
j++;
var href;
for (var k = 0; k < entry.link.length; k++ ) {
if (entry.link[k].rel == 'alternate') {
href = entry.link[k].href;
break;
}
}
var hrefPost = href.split("?")[0];
var comment = "";
if("content" in entry) comment = entry.content.$t;
else comment = entry.summary.$t;
comment = comment.replace(/<br[^>]*>/ig, " ");
comment = comment.replace(/<\S[^>]*>/g, "");
var postTitle="";
if(urlToTitle[hrefPost]) postTitle=urlToTitle[hrefPost];
else {
postTitle = hrefPost.split("/")[5].split(".html")[0].replace(/_\d{2}$/, "");
postTitle = postTitle.replace(/-/g," ");
postTitle = postTitle[0].toUpperCase() + postTitle.slice(1);
}
if(maxPostTitleChars && postTitle.length > maxPostTitleChars) {
postTitle = postTitle.substring(0, maxPostTitleChars);
var indexBreak = postTitle.lastIndexOf(" ");
postTitle = postTitle.substring(0, indexBreak) + "...";
}

var authorName = entry.author[0].name.$t
var authorUri = ""
if(entry.author[0].uri && entry.author[0].uri.$t != "")
authorUri = entry.author[0].uri.$t;

var avaimg = urlAnoAvatar;
var bloggerprofile = "http://www.blogger.com/profile/";
if(trueAvatars && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
avaimg = "http://avafavico.appspot.com/?userid=" + authorUri.substr(bloggerprofile.length);
else {
var parseurl = document.createElement('a');
if(authorUri != "") {
parseurl.href = authorUri;
avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
}
}
if(authorUri == urlMyProfile && urlMyAvatar != "")
avaimg = urlMyAvatar;
if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
authorName = txtAnonymous;
var imgcode = '<img height="16" width="16" title="'+authorName+'" src="'+avaimg+'" />';
if (authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';

var clsAdmin = "";
if(authorUri == urlMyProfile)
clsAdmin = " recent-comment-admin";

var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

var txtHeader = txtWrote;
if(txtWrote.indexOf('[')==-1)
txtHeader = authorName + ' ' + txtWrote;
else
txtHeader = replaceVars(txtHeader, authorName, postTitle, cmtDate);

var tooltip = replaceVars(txtTooltip, authorName, postTitle, cmtDate);

document.write('<div title="'+tooltip+'" class="recent-comment'+clsAdmin+'">');
document.write('<div title="'+tooltip+'" class="recent-comment-header'+clsAdmin+'"><div title="'+tooltip+'" class="recent-comment-ico'+clsAdmin+'">'+imgcode+'</div><a title="'+tooltip+'" href="' + href + '">' + txtHeader + ' </a></div>');
if(comment.length < maxCommentChars)
document.write('<div title="'+tooltip+'" class="recent-comment-body'+clsAdmin+'">' + comment + '</div>');
else {
comment = comment.substring(0, maxCommentChars);
var indexBreak = comment.lastIndexOf(" ");
comment = comment.substring(0, indexBreak);
document.write('<div title="'+tooltip+'" class="recent-comment-body'+clsAdmin+'">' + comment + '...</div>');
if(txtMore != "") {
var moretext = replaceVars(txtMore, authorName, postTitle, cmtDate);
document.write('<div title="'+tooltip+'" class="recent-comment-footer'+clsAdmin+'"><a title="'+tooltip+'" href="' + href + '">' + moretext + '</a></div>');
}
}
document.write('</div>');
}
}
}
if(getTitles)
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false'+maxResultsPosts+'&alt=json-in-script&callback=getPostUrlsForComments"></'+'script>');
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false'+maxResultsComments+'&alt=json-in-script&callback=showRecentComments"></'+'script>');
</script>
Masukkan semua bumbu tersebut ke dalam metode Add a Gadget ► HTML/JavaScript. Done.

Python Application

Example gradient PNG data URI

Try here!
from color (rgb, for example FF0000)
to color (rgb, for example FFFF00)
width, pixels
height, pixels

if not worked you melancong dengan begini saja http://avafavico.appspot.com/?c1=FF0000&c2=FFFF00&h=15&w=25
Untuk avatar begini
avatar
Caranya seperti ini
My Avatar: http://avafavico.appspot.com/?userid=08754225607191914278
Or meluncur disini
Google App Engine Python tool to get Blogger avatar
Pokonya acak-acak saja semua psotingan yg ada disana. Kalau tidak mengerti tanyakan saja kepada si empunya. Ramah kok orangnya, aku saja komentar diajawab terus ;))

Perhatian Koben menclok di hack article about threaded commenting with Blogger native comments. Versi pendahulu bisa dibaca oleh sobat² threaded comments in blogger and next generation Threaded Comments II for Blogspot :D
Sekarang saatnya Beben mencoba membantu menerapkan threaded comments version master MS-potilas ke dalam blog kita.
Pada prosedur yang dipaparkan disana, jika ingin berjalan mulus versi ini, sobat harus mengganti hack berikut Highlight author comments and Reply to comments!

Pusing memang kalau harus menjalani proses panjang itu. Sikat script dibawah ini, masukkan sebelum tag </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[

// Threaded comments for Blogger
// by MS-potilas 2011
// http://yabtb.blogspot.com

var clss = [];
var elements = document.getElementsByTagName("*");
for(var i=0 ; i<elements.length ; i++)
if(elements[i].className=="normal-comment" || elements[i].className=="admin-comment")
clss.push(elements[i]);

var prevAuthor = "";
var prevNode = null;
var authornodes = {};
for (var x=0 ; x < clss.length; x++ )
{
var moved = false;

var width = clss[x].scrollWidth;
clss[x].style.position = "relative";
clss[x].style.left = "0px";

var author = clss[x].innerHTML.toLowerCase().indexOf("%22%3e");
author = clss[x].innerHTML.substr(author+6);

if(author.toLowerCase().indexOf("%3c%2fa%3e") > -1)
author = author.substr(0, author.toLowerCase().indexOf("%3c%2fa%3e"));
else
author = "";

var cmtChild = clss[x].firstChild;
while(cmtChild && !/(^| )comment-body( |$)/.test(cmtChild.className) && !/(^| )comment-body-author( |$)/.test(cmtChild.className))
cmtChild = cmtChild.nextSibling;
var txt = cmtChild.innerHTML;

var elm = null;
var cmtID = txt.toLowerCase().indexOf("href=\"#");
if(cmtID == -1) cmtID = txt.toLowerCase().indexOf("href=\"" + (window.location.href.toLowerCase()).split("#",1)[0] + "#");
if(cmtID > -1) {
var commentid = "x" + txt.substr(cmtID).split("#")[1].split("\"")[0];
elm = document.getElementById(commentid);
}
if(!elm && prevAuthor != "" && x && prevNode)
{
if(txt.indexOf("@" + prevAuthor) > -1)
elm = prevNode;
else if(prevAuthor.length > 3 && txt.toLowerCase().indexOf("@" + prevAuthor.toLowerCase()) > -1)
elm = prevNode;
}
if(!elm) {
for(var tmp in authornodes) {
if(txt.indexOf("@" + tmp) > -1)
elm = authornodes[tmp];
}
}
if(elm) {
var ind = 0;
if(elm.style.left != "")
ind = parseInt(elm.style.left);
if(ind < 300) { // max indent
ind = ind + 20; // amount of indent
}
var parNode = elm.parentNode;
var place = elm;
var xpos;

do {
do place = place.nextSibling;
while(place && place.nodeType != 1);

if(place && place.style && place.style.left != "")
xpos = parseInt(place.style.left);
else
xpos = 0;

} while(place && xpos >= ind);

if(place != clss[x]) {
parNode.insertBefore(clss[x], place);
moved = true;
}

clss[x].style.position = "relative";
clss[x].style.left = ind + "px";
width = width - ind;
}
clss[x].style.width = width + "px";
if(!moved) {
prevAuthor = author;
prevNode = clss[x];
}
if(author != "")
authornodes[author] = clss[x];
}
//]]>
</script>
</b:if>
SAVE. Lihat berjalan tidak, kalau mulus, ya sudah sukses :D Jika belum lancar, berarti sobat harus menerapkan hack selanjutnya ;)) Lakukan Expand Widget Templates dan temukan kode<b: loop values='data: post.comments' var='comment'>Setelah ketemu, sisipkan code dibawah ini tepat dibawahnya ya
<b:if cond='data:comment.authorUrl == &quot;http://www.blogger.com/profile/YOUR-NUMBER-BLOG-PROFILE&quot;'>
&lt;div class=&#39;admin-comment&#39; id=&#39;x<data:comment.anchorName/>&#39;&gt;
<b:else/>
&lt;div class=&#39;normal-comment&#39; id=&#39;x<data:comment.anchorName/>&#39;&gt;
</b:if>
Cari kode penutup </b: loop> yg merupakan tagging penutup dari<b: loop values='data: post.comments' var='comment'>tepat diatasnya masukan kode&lt;/div&gt;

Jangan lupa ganti YOUR-NUMBER-BLOG-PROFILE
Hampir lupa, sobat harus sudah memiliki tombol replay jika memang mau memakai threade comments ini. Berikut coded reply button for blogger comments<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-NUMBER-BLOGID&amp;postID=&quot; + data: post.id + &quot;&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' target='_blank'>[Reply]</a>Save.Sudah berjalan mulus belom! Bila belum juga, tanya saja ke yg buatnya yah =))
Happy blogging, don't forget to read article on yabtb blog :-bd
Good bye \m/

Tidak ada komentar:

Posting Komentar