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/AVvXsEieH701IYJqS4SMDxcmOtkJk0JznzK9tMDnhCJDfgHmZP9FFhhMuPsbo2ZjY-N5t8boTqX7S_yxFzrU2cB3zWAEzbXT0hnJG2uC-t_9rJy5GYMepqk63fbtvEZ1gYj_8GJRPB9oaG13jCtw/"+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.

Author Name

{picture#https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf6jBcOMlHfM5ckfOgfHgF8S3bcBlF1LLqvB5pLRwZFNY60xj94s7LKuyBAjIj9ETnBiRbAAM0lUTJq6WH6R2VGBblJW6g3YdZ1YKPwXudeTCgq8x6WXC0ojTIaR3FzDET1F-66YeCgdRU/s1600/Turiswan.png} " Jangan berharap sesuatu yang besar dengan tiba-tiba, mulailah dari yang terkecil dan gapailah semua harapan dengan sungguh-sungguh disertai kerjakeras dan do'a. " {facebook#http://www.facebook.com/turiswan22gtr} {twitter#http://twitter.com/turiswan2298} {google#https://plus.google.com/u/0/106442727760269580008/posts} {pinterest#http://www.pinterest.com/turiswan} {youtube#http://www.youtube.com/channel/UCJL-dLtQyZ_uQx7B3-vThjA?sub_confirmation=1} {instagram#http://instagram.com/turiswan2298}

Sevida Premium Responsive Magazine Blogger Template

Sevida Premium Responsive Magazine Blogger Template Sevida is the premium responsive blog and magazine template for Blogger fans. This template shows you how cool and flexible Blogspot magazine template can be.

Maxxiz - Responsive Magazine/News Blogger Template

Maxxiz - Responsive Magazine/News Blogger Template Maxxiz a blogger theme with responsive layout. Its High User Friendly Blogger Template. Its design simple and clean and perfect for magazine or portofolio websites. With an attractive color combination and impressed professionals and has many features.

Adamz Premium Responsive Blogger Template

Adamz Premium Responsive Blogger Template Adamz a blogger theme with responsive layout. This theme has a design that is perfect for magazine websites. With an attractive color combination and impressed professionals and has many features.

Ijonkz - Responsive Magazine/News Blogger Template

Ijonkz - Responsive Magazine/News Blogger Template Ijonkz a blogger theme with responsive layout and two style Boxed or Full width. Its High User Friendly Blogger Template. Its design simple and clean and perfect for News, Magazine or portofolio websites. With an attractive color combination and impressed professionals and has many features.

Rifqiy - Responsive Magazine/News Blogger Template

Rifqiy - Responsive Magazine/News Blogger Template Rifqiy a blogger theme with responsive layout. This theme has a design that is perfect for magazine or portofolio websites. With an attractive color combination and impressed professionals and has many features.

Syahira Premium Responsive Blogger Template

Syahira Premium Responsive Blogger Template Syahira a blogger theme with responsive layout. Its High User Friendly Blogger Template. Its design simple and clean and perfect for magazine or portofolio websites. With an attractive color combination and impressed professionals and has many features.

Contact Form

Name

Email *

Message *

Powered by Blogger.