Articles by "Widget dan Plugin"

Showing posts with label Widget dan Plugin. Show all posts

Menambahkan Komentar Terbaru di Blogger
Ingin menambahkan widget yang menampilkan komentar pengunjung terbaru di blogger? Ikuti langkah-langkah berikut untuk memasang widget komentar terbaru blogger.

Caranya mudah.

Tambah sebuah widget HTML kemudian copy-paste CSS dan JavaScript berikut:

<style type="text/css">.rc{background: #ECECEC;padding: 5px 0;border-bottom: 1px solid #DCDCDC; margin-bottom: 5px;}.rc:hover{background-color: #E5E5E5;}.rc a:hover {color: #000;text-decoration: none;}.rc-ico{margin-left:10px;margin-top:4px;float:left; margin-right:3px}.rc-ico img {width: 50px; height: 50px;margin-top: -2px;margin-right:5px; border: 2px solid #ffffff;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }.rc-header{font-size: 12px;}.rc-header a{color: #666;font-family: 'Oswald',sans-serif;font-size: 13px;font-weight: 300;text-shadow: 0 0 1px #DDDDDD;}.rc-body{font-style: italic; color: #888;font-size:11px;padding: 0px 4px 1px 10px;}.rc-footer{font-size:11px; float: right; display:none;}</style>
<script type="text/javascript">var numRecentComments = 5;var maxCommentChars = 67;var trueAvatars = true;var urlMyAvatar = '';var urlMyProfile = '';var cropAvatar = true;var sizeAvatar = 50;var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm2VR0LCHu4OONCzr2ABeiXYoKHyrT5q2cC6aOvPtE6HNQjTeClvf9Ps1lJB1LM-4fC4qikjBBIabFpK3B3MxbguCDBMCtbRmjqKVLyLJVTKCmzlnim7tM5Sxf0a5BBQW5g-FuXjlwLLzR/"+sizeAvatar+"/anonymous-Icon.jpg";var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;var txtMore = '';var txtWrote = 'commented:';var txtAnonymous = '';var maxResultsComments = "";var numPerPost = 2;var maxPostTitleChars = 40;var getTitles = true;var maxResultsPosts = "";var txtTooltip = '[user] on "[title]" - [date MM-dd-yyyy hh:mm]';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,'"'));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];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.author[0].name.$t=="Blogger User") continue;if(entry["thr$in-reply-to"]) {if(!postHandled[entry["thr$in-reply-to"].href])postHandled[entry["thr$in-reply-to"].href] = 1;elsepostHandled[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(entry.author[0].name.$t=="Admin") continue;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;elsepostHandled[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;}}if(href=='') {j--; continue; }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 {if(hrefPost.match(/\/([^/]*)\.html/)) postTitle = hrefPost.match(/\/([^/]*)\.html/)[1].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 && entry.author[0].gd$image && entry.author[0].gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)avaimg = entry.author[0].gd$image.src;else {var parseurl = document.createElement('a');if(authorUri != "") {parseurl.href = authorUri;avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;}}if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")avaimg = urlMyAvatar;if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")avaimg = urlNoAvatar;var newsize="s"+sizeAvatar;avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");if(cropAvatar) newsize+="-c";avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)authorName = txtAnonymous;var imgcode = '<img height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';if (authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';var clsAdmin = "";if(urlMyProfile != "" && authorUri == urlMyProfile)clsAdmin = " rc-admin";var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601var 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;elsetxtHeader = replaceVars(txtHeader, authorName, postTitle, cmtDate);
var tooltip = replaceVars(txtTooltip, authorName, postTitle, cmtDate);if(!/#/.test(href)) href += "#comments";document.write('<div title="'+tooltip+'" class="rc'+clsAdmin+'">');document.write('<div title="'+tooltip+'" class="rc-header'+clsAdmin+'"><div title="'+tooltip+'" class="rc-ico'+clsAdmin+'">'+imgcode+'</div><a title="'+tooltip+'" href="' + href + '">' + txtHeader + ' </a></div>');if(comment.length < maxCommentChars)document.write('<div title="'+tooltip+'" class="rc-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="rc-body'+clsAdmin+'">' + comment + '...</div>');if(txtMore != "") {var moretext = replaceVars(txtMore, authorName, postTitle, cmtDate);document.write('<div title="'+tooltip+'" class="rc-footer'+clsAdmin+'"><a title="'+tooltip+'" href="' + href + '">' + moretext + '</a></div>');}}document.write('<div style="clear:both;"></div></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>

Pengaturan

Pengaturannya tidak sulit, diantaranya:
var numRecentComments = 5; menampilkan jumlah komentar yang tampil
var maxCommentChars = 67; jumlah karakter bunyi komentar
var trueAvatars = true; menampilkan avatar komentator, ganti dengan false untuk menyembunyikan

Sobat bisa mencoba pengaturan lainnya.

Memasang Syntax Highlighting prism.js di Blogger atau Website
Kode yang berwarna-warni adalah contoh syntax higlighting yaitu penandaan sintaks agar berbeda dari teks umum lainnya dalam sebuah halaman blog/web. Misalnya menandai CSS, JavaScript, dll. Pada artikel kali ini saya akan menulis tentang satu plugin syntax highlighting yang bernama PrismJS oleh Lea Verou. Selain camtik plugin ini sangat ringan, jadi Anda tidak perlu khawatir dengan loading halaman web setelah memassang PrismJS.

Tentu Anda sudah familiar dengan syntax highlighter bukan? Ini salah satu contoh potongan JavaScript yang ditandai (higlighted) menggunakan syntax highlighter:

<script language="javascript">
var today= new Date()
</script>
....
<body onload=alert(today)>
Selain ringan, PrismJS bekerja pada hampir semua platform. Apakah situs Anda memiliki host sendiri atau platform CMS populer lainnya seperti WordPress, Blogger atau Tumblr.

Memasang (install) PrismJS di Web

Untuk measang Prism di halaman web Anda membutuhkan file prism.js dan prism.css. Silahkan download di laman resmi, pilih tema dan plugin yang sesuai dengan kebutuhan blog Anda.

File JavaScript prism.js adalah setting-annya dan file CSS prism.css adalah temanya. Setelah kedua file tersebut terunduh silahkan unggah ke situs hosting Anda.


Lalu, buat link ke file prism.css dan prism.js. Contoh:

<!DOCTYPE html>
<html>
<head>
...
<link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
...
<!-- bagian paling akhir konten web Anda -->
<script src="prism.js"></script>
</body>
</html>
Ingat, agar plugin ini bekerja, letakkan file prism.css sebelum tag </head> dan prism.js sebelum tag </body>.

Memasang Prism di Blogger/Tumblr

Cara memasang Prism di Blogger/Tumblr sama dengan di web. Di Blogger kita dapat memasang file prism.css danprism.js ke dalam template menggunakan hosting lain sebagai alternatif seperti Google Drive atau Dropbox. Setelah itu letakkan link file prism.css sebelum tag </head> dan link file prism.js sebelum tag </body>.

Jika Anda meng-hosting file ke Google Drive maka direct link-nya akan seperti ini:http://googledrive.com/host/YOUR_FILE_ID/

Jika Anda tidak mau atau belum tahu cara meng-hosting kedua file tersebut maka Anda dapat menggunakan link langsung dari Prism:

<link href="http://prismjs.com/themes/prism.css" rel="stylesheet" />

<script src="http://prismjs.com/prism.js"></script>

Cara Menggunakan Prism

Di blogger mungkin Anda harus escape karakter HTML < menjadi &lt; dan > menjadi &gt; untuk membuat baris kode dengan Prism agar bisa tampil seperti ini:

<script language="javascript">
var today= new Date()
</script>
....
<body onload=alert(today)>
Agar bisa tampil seperti di atas maka Anda harus menulis di halaman editor posting blog dalam mode HTML bukanCompose. Tulis seperti ini:

&lt;script&gt;
var today= new Date()
&lt;/script&gt;
....
&ltbody onload=alert(today)&gt;
Agar highlight bekerja maka snippet (potongan) kode harus dibungkus (wrap) oleh tag <pre> dan <code>. Contoh:

<pre><code class="language-markup">
...di sini snippet kode...
</code>
</pre>
Ganti kata "markup" dengan jenis syntax. Misalnya dalam contoh ini saya ingin meng-higlight JavaScript, maka penulisannya:


<pre><code class="language-javascript">
&lt;script&gt;
var today= new Date()
&lt;/script&gt;
....
&ltbody onload=alert(today)&gt;
</code>
</pre>
OK! Selamat mencoba.

Contact Form

Name

Email *

Message *

Powered by Blogger.