SyntaxHighlighter KerenSyntax Highlight adalah fitur pada teks editor yang menampilkan atau menyoroti teks-terutama source code-dalam berbagai warna dan font sesuai dengan kategori istilah. Dengan menggunakan SyntaxHighlighter memudahkan dalam menulis source code atau bahasa terstruktur seperti bahasa pemrograman (programming language) atau bahasa markup (markup language). Implementasi dari syntax higlighter pada halaman website, blog atau forum online sering digunakan sebagai kode prensentasi pada contoh code source ( seperti Javascript, HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Java, SQL, Apache, Haskell, Erlang, Ruby, C++, Objective C dan masih banyak bahasa program lainnya.) yang ingin ditampilkan.

Kali ini Problogiz, ingin sharing koleksi Syntax Highlight yang keren dengan CSS dan Javascript khusus untuk Blogger. Ada 10 koleksi SyntaxHighlighter keren yang saya kumpulkan dari sumbernya softwaremaniacs.org, yang dapat Anda gunakan free untuk menampilkan source code (kode box) di blog-blog Anda. Memang ada banyak artikel atau situs yang berbagi kode dan cara memasang SyntaxHighlighter di halaman blog/website ( baik yang menggunakan javascript, jQuery, maupun markup HTML) seperti Prisma, GeSHi, Google Code Prettify, SyntaxHighlighter, SHJS – Syntax Highlighting in JavaScript, Ultraviolet dan yang lainnya. Saya lebih memilih HIGHLIGHT.JS ini (dari softwaremaniacs) dengan alasan lebih mudah dan dapat bekerja secara otomatis mencari blok kode, mendeteksi jenis bahasa, dan highlighting (menyorot kode).

HIGHLIGHT.JS mengenali sekurangnya 54 bahasa program dan dibundel dengan 26 theme style. Untuk itu saya hanya akan memilih menjadi 3 bahasa code, yang paling sering digunakan oleh blogger (dalam tutorial blog-nya) untuk menampilkan source code, yaitu kode CSS, Javascript, dan mark up HTML. Dan 10 style theme Syntax Highlight pilihan untuk Sobat Blogger!!

Cara Pasang/Instal SyntaxHighlighter di Blog (Box Code)

1. Untuk mengaktifkan fitur ini dibutuhkan javascript berikut, yang dapat Anda letakkan di template tepat diatas
tag </head>
atau bisa juga sebelum
tag </body>
.

<script src="https://problogizjs.googlecode.com/files/highlight.pack.js"></script> <script>hljs.initHighlightingOnLoad();</script>
2. Kemudian dilanjutkan meletakan style highlighting (CSS), pilihlah salah satu dari 10 macam style dibawah ini (lihat Demo Live-nya sebelum memutuskan)  mana yang cocok untuk Blog Sobat. Copy Kode CSS-nya  (klik 2x untuk select all) dan letakkan tepat diatas
tag]]></b:skin>
, lalu Simpan Template.

3. Gunakan mark up HTML berikut. untuk menerapkan SyntaxHighlighter pada source code di halaman postingan Anda:
<pre><code> Isi Kode Javascript, jQuery atau Kode CSS atau Kode HTML disini...... </code></pre>

10 Koleksi SyntaxHighlighter Keren di Blogger

1. Pojoaque


Kode CSS:
/* Pojoaque Style by Jason Tate http://web-cms-designs.com/ftopict-10-pojoaque-style-for-highlight-js-code-highlighter.html Based on Solarized Style from http://ethanschoonover.com/solarized */ pre code { display: block; padding: 0.5em; color: #DCCF8F; background: url('https://sites.google.com/site/problogiz/home/pojoaque.jpg') repeat scroll left top #181914;} pre .comment, pre .template_comment, pre .diff .header, pre .doctype, pre .lisp .string, pre .javadoc { color: #586e75; font-style: italic; } pre .keyword, pre .css .rule .keyword, pre .winutils, pre .javascript .title, pre .method, pre .addition, pre .css .tag, pre .clojure .title, pre .nginx .title { color: #B64926; } pre .number, pre .command, pre .string, pre .tag .value, pre .phpdoc, pre .tex .formula, pre .regexp, pre .hexcolor { color: #468966; } pre .title, pre .localvars, pre .function .title, pre .chunk, pre .decorator, pre .built_in, pre .lisp .title, pre .clojure .built_in, pre .identifier, pre .id { color: #FFB03B; } pre .attribute, pre .variable, pre .lisp .body, pre .smalltalk .number, pre .constant, pre .class .title, pre .parent, pre .haskell .type { color: #b58900; } pre .css .attribute { color: #b89859; } pre .css .number,pre .css .hexcolor{ color: #DCCF8F; } pre .css .class { color: #d3a60c; } pre .preprocessor, pre .pi, pre .shebang, pre .symbol, pre .symbol .string, pre .diff .change, pre .special, pre .attr_selector, pre .important, pre .subst, pre .cdata { color: #cb4b16; } pre .deletion { color: #dc322f; } pre .tex .formula { background: #073642; }

2. Solarized - Dark

Kode CSS:
/* Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull */ pre code { display: block; padding: 0.5em; background: #002b36; color: #839496; } pre .comment, pre .template_comment, pre .diff .header, pre .doctype, pre .pi, pre .lisp .string, pre .javadoc { color: #586e75; font-style: italic; } pre .keyword, pre .winutils, pre .method, pre .addition, pre .css .tag, pre .request, pre .status, pre .nginx .title { color: #859900; } pre .number, pre .command, pre .string, pre .tag .value, pre .phpdoc, pre .tex .formula, pre .regexp, pre .hexcolor { color: #2aa198; } pre .title, pre .localvars, pre .chunk, pre .decorator, pre .built_in, pre .identifier, pre .vhdl .literal, pre .id { color: #268bd2; } pre .attribute, pre .variable, pre .lisp .body, pre .smalltalk .number, pre .constant, pre .class .title, pre .parent, pre .haskell .type { color: #b58900; } pre .preprocessor, pre .preprocessor .keyword, pre .shebang, pre .symbol, pre .symbol .string, pre .diff .change, pre .special, pre .attr_selector, pre .important, pre .subst, pre .cdata, pre .clojure .title { color: #cb4b16; } pre .deletion { color: #dc322f; } pre .tex .formula { background: #073642; }

3. School Book


Kode CSS:
/* School Book style from goldblog.com.ua (c) Zaripov Yura */ pre code { display: block; padding: 15px 0.5em 0.5em 30px; font-size: 11px !important; line-height:16px !important; } pre{ background:#f6f6ae url('https://sites.google.com/site/problogiz/home/school_book.png'); border-top: solid 2px #d2e8b9; border-bottom: solid 1px #d2e8b9; } pre .keyword, pre .literal, pre .change, pre .winutils, pre .flow, pre .lisp .title, pre .clojure .built_in, pre .nginx .title, pre .tex .special { color:#005599; font-weight:bold; } pre code, pre .subst, pre .tag .keyword { color: #3E5915; } pre .string, pre .title, pre .haskell .type, pre .tag .value, pre .css .rules .value, pre .preprocessor, pre .ruby .symbol, pre .ruby .symbol .string, pre .ruby .class .parent, pre .built_in, pre .sql .aggregate, pre .django .template_tag, pre .django .variable, pre .smalltalk .class, pre .javadoc, pre .ruby .string, pre .django .filter .argument, pre .smalltalk .localvars, pre .smalltalk .array, pre .attr_selector, pre .pseudo, pre .addition, pre .stream, pre .envvar, pre .apache .tag, pre .apache .cbracket, pre .nginx .built_in, pre .tex .command { color: #2C009F; } pre .comment, pre .java .annotation, pre .python .decorator, pre .template_comment, pre .pi, pre .doctype, pre .deletion, pre .shebang, pre .apache .sqbracket { color: #E60415; } pre .keyword, pre .literal, pre .css .id, pre .phpdoc, pre .title, pre .haskell .type, pre .vbscript .built_in, pre .sql .aggregate, pre .rsl .built_in, pre .smalltalk .class, pre .xml .tag .title, pre .diff .header, pre .chunk, pre .winutils, pre .bash .variable, pre .apache .tag, pre .tex .command, pre .request, pre .status { font-weight: bold; } pre .coffeescript .javascript, pre .javascript .xml, pre .tex .formula, pre .xml .javascript, pre .xml .vbscript, pre .xml .css, pre .xml .cdata { opacity: 0.5; }

4. Rainbow


Kode CSS:
/* Style with support for rainbow parens */ pre ::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; } pre ::selection { background:#FF5E99; color:#fff; text-shadow: none; } pre code { display: block; padding: 0.5em; background: #474949; color: #D1D9E1; } pre .body, pre .collection { color: #D1D9E1; } pre .comment, pre .template_comment, pre .diff .header, pre .doctype, pre .lisp .string, pre .javadoc { color: #969896; font-style: italic; } pre .keyword, pre .clojure .attribute, pre .winutils, pre .javascript .title, pre .addition, pre .css .tag { color: #cc99cc; } pre .number { color: #f99157; } pre .command, pre .string, pre .tag .value, pre .phpdoc, pre .tex .formula, pre .regexp, pre .hexcolor { color: #8abeb7; } pre .title, pre .localvars, pre .function .title, pre .chunk, pre .decorator, pre .built_in, pre .lisp .title, pre .identifier { color: #b5bd68; } pre .class .keyword { color: #f2777a; } pre .variable, pre .lisp .body, pre .smalltalk .number, pre .constant, pre .class .title, pre .parent, pre .haskell .label, pre .id, pre .lisp .title, pre .clojure .title .built_in { color: #ffcc66; } pre .tag .title, pre .rules .property, pre .django .tag .keyword, pre .clojure .title .built_in { font-weight: bold; } pre .attribute, pre .clojure .title { color: #81a2be; } pre .preprocessor, pre .pi, pre .shebang, pre .symbol, pre .symbol .string, pre .diff .change, pre .special, pre .attr_selector, pre .important, pre .subst, pre .cdata { color: #f99157; } pre .deletion { color: #dc322f; } pre .tex .formula { background: #eee8d5; }

5. Monokai

Kode CSS:
CSS code:
/* Monokai style - ported by Luigi Maselli - http://grigio.org */ pre code { display: block; padding: 0.5em; background: #272822; } pre .tag, pre .tag .title, pre .keyword, pre .literal, pre .change, pre .winutils, pre .flow, pre .lisp .title, pre .clojure .built_in, pre .nginx .title, pre .tex .special { color: #F92672; } pre code { color: #DDD; } pre code .constant { color: #66D9EF; } pre .class .title { color: white; } pre .attribute, pre .symbol, pre .symbol .string, pre .value, pre .regexp { color: #BF79DB; } pre .tag .value, pre .string, pre .subst, pre .title, pre .haskell .type, pre .preprocessor, pre .ruby .class .parent, pre .built_in, pre .sql .aggregate, pre .django .template_tag, pre .django .variable, pre .smalltalk .class, pre .javadoc, pre .django .filter .argument, pre .smalltalk .localvars, pre .smalltalk .array, pre .attr_selector, pre .pseudo, pre .addition, pre .stream, pre .envvar, pre .apache .tag, pre .apache .cbracket, pre .tex .command, pre .prompt { color: #A6E22E; } pre .comment, pre .java .annotation, pre .python .decorator, pre .template_comment, pre .pi, pre .doctype, pre .deletion, pre .shebang, pre .apache .sqbracket, pre .tex .formula { color: #75715E; } pre .keyword, pre .literal, pre .css .id, pre .phpdoc, pre .title, pre .haskell .type, pre .vbscript .built_in, pre .sql .aggregate, pre .rsl .built_in, pre .smalltalk .class, pre .diff .header, pre .chunk, pre .winutils, pre .bash .variable, pre .apache .tag, pre .tex .special, pre .request, pre .status { font-weight: bold; } pre .coffeescript .javascript, pre .javascript .xml, pre .tex .formula, pre .xml .javascript, pre .xml .vbscript, pre .xml .css, pre .xml .cdata { opacity: 0.5; }


6. Tommorow Night Blue


CSS code:
/* Tomorrow Night Blue Theme */ /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */ /* Original theme - https://github.com/chriskempson/tomorrow-theme */ /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */ .tomorrow-comment, pre .comment, pre .title { color: #7285b7; } .tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo { color: #ff9da4; } .tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant { color: #ffc58f; } .tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute { color: #ffeead; } .tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata { color: #d1f1a9; } .tomorrow-aqua, pre .css .hexcolor { color: #99ffff; } .tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title { color: #bbdaff; } .tomorrow-purple, pre .keyword, pre .javascript .function { color: #ebbbff; } pre code { display: block; background: #002451; color: white; padding: 0.5em; } pre .coffeescript .javascript, pre .javascript .xml, pre .tex .formula, pre .xml .javascript, pre .xml .vbscript, pre .xml .css, pre .xml .cdata { opacity: 0.5; }

7. Brown Papper

CSS code:
/* Brown Paper style from goldblog.com.ua (c) Zaripov Yura */ pre code { display: block; padding: 0.5em; background:#b7a68e url(('https://sites.google.com/site/problogiz/home/brown_papersq.png'); } pre .keyword, pre .literal, pre .change, pre .winutils, pre .flow, pre .lisp .title, pre .clojure .built_in, pre .nginx .title, pre .tex .special, pre .request, pre .status { color:#005599; font-weight:bold; } pre code, pre .subst, pre .tag .keyword { color: #363C69; } pre .string, pre .title, pre .haskell .type, pre .tag .value, pre .css .rules .value, pre .preprocessor, pre .ruby .symbol, pre .ruby .symbol .string, pre .ruby .class .parent, pre .built_in, pre .sql .aggregate, pre .django .template_tag, pre .django .variable, pre .smalltalk .class, pre .javadoc, pre .ruby .string, pre .django .filter .argument, pre .smalltalk .localvars, pre .smalltalk .array, pre .attr_selector, pre .pseudo, pre .addition, pre .stream, pre .envvar, pre .apache .tag, pre .apache .cbracket, pre .tex .number { color: #2C009F; } pre .comment, pre .java .annotation, pre .python .decorator, pre .template_comment, pre .pi, pre .doctype, pre .deletion, pre .shebang, pre .apache .sqbracket, pre .nginx .built_in, pre .tex .formula { color: #802022; } pre .keyword, pre .literal, pre .css .id, pre .phpdoc, pre .title, pre .haskell .type, pre .vbscript .built_in, pre .sql .aggregate, pre .rsl .built_in, pre .smalltalk .class, pre .diff .header, pre .chunk, pre .winutils, pre .bash .variable, pre .apache .tag, pre .tex .command { font-weight: bold; } pre .coffeescript .javascript, pre .javascript .xml, pre .tex .formula, pre .xml .javascript, pre .xml .vbscript, pre .xml .css, pre .xml .cdata { opacity: 0.8; }

8. Sunburst

CSS code:
/* Sunburst-like style (c) Vasily Polovnyov */ pre code { display: block; padding: 0.5em; background: #000; color: #f8f8f8; } pre .comment, pre .template_comment, pre .javadoc { color: #aeaeae; font-style: italic; } pre .keyword, pre .ruby .function .keyword, pre .request, pre .status, pre .nginx .title { color: #E28964; } pre .function .keyword, pre .sub .keyword, pre .method, pre .list .title { color: #99CF50; } pre .string, pre .tag .value, pre .cdata, pre .filter .argument, pre .attr_selector, pre .apache .cbracket, pre .date, pre .tex .command { color: #65B042; } pre .subst { color: #DAEFA3; } pre .regexp { color: #E9C062; } pre .title, pre .sub .identifier, pre .pi, pre .tag, pre .tag .keyword, pre .decorator, pre .shebang, pre .prompt { color: #89BDFF; } pre .class .title, pre .haskell .type, pre .smalltalk .class, pre .javadoctag, pre .yardoctag, pre .phpdoc { text-decoration: underline; } pre .symbol, pre .ruby .symbol .string, pre .number { color: #3387CC; } pre .params, pre .variable, pre .clojure .attribute { color: #3E87E3; } pre .css .tag, pre .rules .property, pre .pseudo, pre .tex .special { color: #CDA869; } pre .css .class { color: #9B703F; } pre .rules .keyword { color: #C5AF75; } pre .rules .value { color: #CF6A4C; } pre .css .id { color: #8B98AB; } pre .annotation, pre .apache .sqbracket, pre .nginx .built_in { color: #9B859D; } pre .preprocessor { color: #8996A8; } pre .hexcolor, pre .css .value .number { color: #DD7B3B; } pre .css .function { color: #DAD085; } pre .diff .header, pre .chunk, pre .tex .formula { background-color: #0E2231; color: #F8F8F8; font-style: italic; } pre .diff .change { background-color: #4A410D; color: #F8F8F8; } pre .addition { background-color: #253B22; color: #F8F8F8; } pre .deletion { background-color: #420E09; color: #F8F8F8; } pre .coffeescript .javascript, pre .javascript .xml, pre .tex .formula, pre .xml .javascript, pre .xml .vbscript, pre .xml .css, pre .xml .cdata { opacity: 0.5; }

9. Google Code

CSS code:
/* Google Code style (c) Aahan Krish */ pre code { display: block; padding: 0.5em; background: white; color: black; } pre .comment, pre .template_comment, pre .javadoc, pre .comment * { color: #800; } pre .keyword, pre .method, pre .list .title, pre .clojure .built_in, pre .nginx .title, pre .tag .title, pre .setting .value, pre .winutils, pre .tex .command, pre .http .title, pre .request, pre .status { color: #008; } pre .envvar, pre .tex .special { color: #660; } pre .string, pre .tag .value, pre .cdata, pre .filter .argument, pre .attr_selector, pre .apache .cbracket, pre .date, pre .regexp { color: #080; } pre .sub .identifier, pre .pi, pre .tag, pre .tag .keyword, pre .decorator, pre .ini .title, pre .shebang, pre .prompt, pre .hexcolor, pre .rules .value, pre .css .value .number, pre .literal, pre .symbol, pre .ruby .symbol .string, pre .number, pre .css .function, pre .clojure .attribute { color: #066; } pre .class .title, pre .haskell .type, pre .smalltalk .class, pre .javadoctag, pre .yardoctag, pre .phpdoc, pre .typename, pre .tag .attribute, pre .doctype, pre .class .id, pre .built_in, pre .setting, pre .params, pre .variable, pre .clojure .title { color: #606; } pre .css .tag, pre .rules .property, pre .pseudo, pre .subst { color: #000; } pre .css .class, pre .css .id { color: #9B703F; } pre .value .important { color: #ff7700; font-weight: bold; } pre .rules .keyword { color: #C5AF75; } pre .annotation, pre .apache .sqbracket, pre .nginx .built_in { color: #9B859D; } pre .preprocessor, pre .preprocessor * { color: #444; } pre .tex .formula { background-color: #EEE; font-style: italic; } pre .diff .header, pre .chunk { color: #808080; font-weight: bold; } pre .diff .change { background-color: #BCCFF9; } pre .addition { background-color: #BAEEBA; } pre .deletion { background-color: #FFC8BD; } pre .comment .yardoctag { font-weight: bold; }

10. GitHub

CSS code:

/* github.com style (c) Vasily Polovnyov */ pre code { display: block; padding: 0.5em; color: #333; background: #f8f8ff } pre .comment, pre .template_comment, pre .diff .header, pre .javadoc { color: #998; font-style: italic } pre .keyword, pre .css .rule .keyword, pre .winutils, pre .javascript .title, pre .nginx .title, pre .subst, pre .request, pre .status { color: #333; font-weight: bold } pre .number, pre .hexcolor, pre .ruby .constant { color: #099; } pre .string, pre .tag .value, pre .phpdoc, pre .tex .formula { color: #d14 } pre .title, pre .id { color: #900; font-weight: bold } pre .javascript .title, pre .lisp .title, pre .clojure .title, pre .subst { font-weight: normal } pre .class .title, pre .haskell .type, pre .vhdl .literal, pre .tex .command { color: #458; font-weight: bold } pre .tag, pre .tag .title, pre .rules .property, pre .django .tag .keyword { color: #000080; font-weight: normal } pre .attribute, pre .variable, pre .lisp .body { color: #008080 } pre .regexp { color: #009926 } pre .class { color: #458; font-weight: bold } pre .symbol, pre .ruby .symbol .string, pre .lisp .keyword, pre .tex .special, pre .prompt { color: #990073 } pre .built_in, pre .lisp .title, pre .clojure .built_in { color: #0086b3 } pre .preprocessor, pre .pi, pre .doctype, pre .shebang, pre .cdata { color: #999; font-weight: bold } pre .deletion { background: #fdd } pre .addition { background: #dfd } pre .diff .change { background: #0086b3 } pre .chunk { color: #aaa }


Selamat Mencoba!!
Dengan SyntaxHighlighter sumber kode yang ditampilkan di postingan Anda, tentu lebih memberikan kepercayaan dan kepuasan tersendiri bagi user atau pembaca setia Blog Sobat.

Salaam,

Read More


Cara Membuat Recent Posts Slideshow dan Recent Comments Widget di Blogger

Recent Posts atau Artikel Terbaru Slideshow adalah fitur yang digunakan untuk menampilkan semua posting atau artikel terbaru sebuah Blog/website secara otomatis dengan slideshow horizontal style atau sering juga disebut Automatic Recent Posts Slider. Featured/Recent Posts Slider dengan script jQuery yang efisien dan dengan fitur thumbnail atau image pada setiap posting yang ditampilkan. Widget Recent Comments atau Komentar Terbaru yang keren juga dapat Anda nikmati dengan menggunakan javascript yang sama.  Fitur  Slideshow Artikel Terbaru atau Widget Komentar dapat digunakan sekaligus bersama atau Anda bisa pilih salah satunya. Untuk lebih jelasnya ikuti saja tutorial lengkapnya dibawah ini.

Seperti di Worpress yang telah menyediakan banyak Plugin Slider untuk Recent Posts, Popular posts ala slideshow, di Blogger-pun Anda bisa membuatnya sendiri tampilan artikel terbaru seperti di blog-blog Wordpress itu. Memang fitur ini cukup disukai oleh para blogger, bahkan termasuk salah satu fitur penting yang harus dimiliki sebuah blog/website profesional

Untuk melihat tampilan live Recent Posts Slideshow atau Recent Comments Widget silahkan lihat DEMO dulu Sob!


Gimana Sob, tertarik untuk membuatnya? Ok langsung saja ke pembahasan cara membuatnya.

Pemberitahuan:
Sebelum Anda memulai memasang fitur  ini, pastikan tidak ada code atau script recent posts slider lain atau recent comment di template Anda, ini membuat script tidak bekerja.

Javascript dan jQuery

Script slider tersebut dibuat dengan tujuan multifungsi selain Json script untuk memanggil data-data update document baik untuk recent post-nya maupun recent comments. Juga fungsi efek sliding pada artikel terbaru dan setting variasi data-data, seperti jumlah post yang ingin ditampilkan, jumlah komentar, thumbnail size, avatar thumb, scroll dan lainnya.

Langkah pertama Anda harus menempatkan script jQuery library di template, jika sudah ada jquery-1.x.x.min.js (versi yang lain) lewati saja langkah ini. Untuk desain ini saya sendiri menggunakan jquery/1.8.3/jquery.min.js

Copy dan letakkan script ini sebelum tag </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
Langkah kedua copy semua script jQuery berikut dan letakkan sebelum tag </head> atau bisa juga ditempatkan sebelum tag </body>, jika Anda sudah menggunakan banyak script ditemplate.
<script type='text/javascript'> //<![CDATA[ var numpostx = 14, thumbSize = 110, contjumlah = 0, cmtext = "Comments", pBlank = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif", pkBlank = "http://4.bp.blogspot.com/-UycqzWtMm9o/UZ8Rh-ebn3I/AAAAAAAAHuU/E0Am9tW7cz4/s1600/user-anonymous-icon2.png", numcomment = 6, thumbcsize = 70, cmsumm = 100; $(document).ready(function(){$.ajax({url:"/feeds/posts/default?alt=json-in-script&max-results="+numpostx+"",type:"get",dataType:"jsonp",success:function(g){var k,n,b,m,h,d="",o=g.feed.entry;if(o!==undefined){d="<ul>";for(var f=0;f<o.length;f++){for(var e=0;e<o[f].link.length;e++){if(o[f].link[e].rel=="alternate"){k=o[f].link[e].href;break}}for(var c=0;c<o[f].link.length;c++){if(o[f].link[c].rel=="replies"&&o[f].link[c].type=="text/html"){h=o[f].link[c].title.split(" ")[0];break}}if("content" in o[f]){n=o[f].content.$t}else{if("summary" in o[f]){n=o[f].summary.$t}else{n=""}}if("media$thumbnail" in o[f]){postimg=o[f].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+thumbSize+"-c")}else{postimg=pBlank}var p=/<\S[^>]*>/g;n=n.replace(p,"");if(n.length>contjumlah){n=n.substring(0,contjumlah)}b=o[f].title.$t;m=o[f].published.$t.substring(0,10),m=m.replace(/-/g,"/");d+='<li><div class="thumbp"><a href="'+k+'" target="_blank"><span><img alt="'+b+'"src="'+postimg+'"/></span></a></div><div class="titlexp"><h4><a href="'+k+'" target="_blank">'+b+'</a></h4><div class="datex"><span class="dt">'+m+'</span><span class="cm">'+h+" "+cmtext+'</span></div></div><div class="contxisi">'+n+"</div></li>"}d+="</ul>";$("#rcentpost").html(d);(function(){$.fn.infiniteCarousel=function(){function i(j,l){return new Array(l+1).join(j)}return this.each(function(){var q=$("> div",this).css("overflow","hidden"),r=q.find("> ul").width(9999),s=r.find("> li"),j=s.filter(":first");singleWidth=j.outerWidth(),visible=Math.ceil(q.innerWidth()/singleWidth),currentPage=1,pages=Math.ceil(s.length/visible);if(s.length%visible!=0){r.append(i('<li class="empty" />',visible-(s.length%visible)));s=r.find("> li")}s.filter(":first").before(s.slice(-visible).clone().addClass("cloned"));s.filter(":last").after(s.slice(0,visible).clone().addClass("cloned"));s=r.find("> li");q.scrollLeft(singleWidth*visible);function l(u){var t=u<currentPage?-1:1,w=Math.abs(currentPage-u),v=singleWidth*t*visible*w;q.filter(":not(:animated)").animate({scrollLeft:"+="+v},3000,function(){if(u>pages){q.scrollLeft(singleWidth*visible);u=1}else{if(u==0){u=pages;q.scrollLeft(singleWidth*visible*pages)}}currentPage=u})}q.after('<a href="#" class="arrow back">&lt;</a><a href="#" class="arrow forward">&gt;</a>');$("a.back",this).click(function(){l(currentPage-1);return false});$("a.forward",this).click(function(){l(currentPage+1);return false});$(this).bind("goto",function(t,u){l(u)});$(this).bind("next",function(){l(currentPage+1)})})}})(jQuery);var a=true;$("#slider-recentpost").infiniteCarousel().mouseover(function(){a=false}).mouseout(function(){a=true});setInterval(function(){if(a){$("#slider-recentpost").trigger("next")}},8000)}else{$("#rcentpost").html("<span>No result!</span>")}},error:function(){$("#rcentpost").html("<strong>Error Loading Feed!</strong>")}});$.ajax({url:"/feeds/comments/default?alt=json-in-script&max-results="+numcomment+"",type:"get",dataType:"jsonp",success:function(n){var f,a,c,m,g,h,b="",j=n.feed.entry;if(j!==undefined){b="<ul>";for(var e=0;e<j.length;e++){for(var d=0;d<j[e].link.length;d++){if(j[e].link[d].rel=="alternate"){m=j[e].link[d].href;break}}if("content" in j[e]){f=j[e].content.$t}else{if("summary" in j[e]){f=j[e].summary.$t}else{f=""}}if(j[e].author[0].gd$image.src=="http://img1.blogblog.com/img/blank.gif"){a=pkBlank}else{a=j[e].author[0].gd$image.src.replace(/\/s[0-9]+(\-c|\/)/,"/s"+thumbcsize+"$1")}var l=/<\S[^>]*>/g;c=(j[e].author[0].uri)?j[e].author[0].uri.$t:"#nope";g=j[e].author[0].name.$t;f=f.replace(l,"");if(f.length>cmsumm){f=f.substring(0,cmsumm)+"..."}h=j[e].gd$extendedProperty[1].value;b+='<li><div class="kmtimg"><a rel="nofollow" href="'+c+'"><span><img src="'+a+'"/></span></a></div><div class="ketkomt"><a rel="nofollow" href="'+m+'">'+g+"</a><span>"+h+'</span></div><div class="komtsum">'+f+"</div></li>"}b+="</ul>";$("#rcentcomnets").html(b)}else{$("#rcentcomnets").html("<span>No result!</span>")}},error:function(){$("#rcentcomnets").html("<strong>Error Loading Feed!</strong>")}})}); //]]> </script>
keterangan:

var numpostx = jumlah posting yang ditampilkan, sesuaikan       saja. Jika lebar blog < 900px sebaiknya pilih 10-12 post aja
thumbSize = ukuran thumb image posting
contjumlah = jumlah karakter deskripsi posting
cmtext = type komentar untuk recent comments
pBlank  = url image jika posting tidak ada gambar
pkBlank = url image jika komentator anonymous
numcomment = jumlah komentar
thumbcsize = ukuran thumb image id komentator
cmsumm = jumlah karakter komentar
3000    = kecepatan sliding (semakin kecil semakin cepat)
8000    = waktu jeda dalam milisecond untuk pergantian slide posting baru (semakin besar semakin lama)

Bagi Anda yang tertarik memasang avatar untuk anonymous user pada recent comments widget, saya telah sediakan dua gambar dibawah Jack dan Alien. Silahkan copy image URL-nya dan gantikan code yang berwarna merah ( pada pkBlank) .

Jack avatar
Jack
Alien avatar
Alien

Contoh tampilan avatar user anonymous Jack dan Alien

comment dengan Jack avatar

comment dengan Alien avatar


Memasang Automatic Recent Post Slider dan Recent Comments Widget di Blog


Setelah Anda selesai meletakkan scirpt-script jQuery diatas ditemplate, sekarang waktunya untuk memberi style (CSS) dan code HTML-nya. Seperti yang telah disinggung diatas script ini dapat digunakan baik untuk fitur recent post otomatis maupun recent comments sekaligus. Namun jika Anda hanya ingin menggunakan salah satu-nya saja, Anda hanya perlu memilih salah satu saja, apa itu fitur Artikel Terbaru Slideshow atau widget Komentar Terbaru. Untuk pemasangan masing-masing fitur di blog, lanjutkan tutorial dibawah ini:

Automatic Recent Post Slider

Automatic Recent Post Slider

CSS
Memberi style atau gaya pada Slide slideshow dengan CSS ini, terdiri dari dua bagian yaitu bagian rcentpost (wadah bagi postingan, title, dan image) dan bagian slider-recentpost (bungkus dari rcentpost). Dan juga style untuk control navigasinya (arrow) serta penempatan gambar loading untuk rcentpost.

Copy semua code CSS dibawah ini dan letakkan code sebelum atau tepat diatas tag ]]></b:skin>:

/*
  Automatic Slider Posts by http://problogiz.blogspot.com/ 
*/

#rcentpost{width:88%;height:150px;overflow:hidden;margin:10px auto 10px;}
#rcentpost ul{width:9999px}
#rcentpost ul,#rcentpost li{list-style:none;padding:5px;margin:0;overflow:hidden}
#rcentpost li{width:150px;display:inline-block;float:left;height:150px}
.thumbp{width:80px;height:80px;margin:0 auto;border-radius:9999px;overflow:hidden;border:1px solid #E4E4E4}
.titlexp{text-align:center;position:relative;margin-top:5px}
.titlexp h4{font-size:90%;max-height:45px;overflow:hidden}
.thumbp img{display:block;width:100%;height:100%;border-radius:9999px}
.datex{font-size:9px}
.datex .dt,.datex .cm{position:absolute;top:-30px;left:12px;display:block;background:#EFFAFF;background-color:rgba(239,250,255,0.73);border:1px solid #B1D1EB;padding:2px 4px}
.datex .cm{display:none}
#slider-recentpost{background:white;-webkit-box-shadow: 2px 2px 10px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    2px 2px 10px rgba(50, 50, 50, 0.75);
box-shadow:         2px 2px 10px rgba(50, 50, 50, 0.75);
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;position:relative}
.arrow{position:absolute;display:block;top:60px;background-image:url(http://1.bp.blogspot.com/-vVCqz7-ep5A/UaD0ugU664I/AAAAAAAAHwg/dDojZkM3SZY/s40/arrow2.png);background-repeat:no-repeat;background-position:0 50%;width:20px;height:30px;text-indent:-9999px}
.arrow.back{background-position:0 50%;left:10px}
.arrow.forward{background-position:100% 50%;right:10px}
::selection{background:#1195C9;color:#fff;text-shadow:none}
::-moz-selection{background:#1195C9;color:#fff;text-shadow:none}
span.loadingrc{background-image:url(http://3.bp.blogspot.com/-5j1Z2hBxVrI/UZ8dEKxlyjI/AAAAAAAAHvU/s2jDRUsGn9I/s1600/download.gif);background-repeat:no-repeat;background-position:50% 50%;text-indent:-9999px;display:block;width:100px;height:100px;margin:0 auto}

*sprite image untuk arrow (navigasi):
navigasi

keterangan:

#rcentpost{width:88%;height:150px;}= lebar dan tinggi kotak rcentpost, Anda bisa sesuaikan dengan lebar content-wrapper (blog), usahakan dibawah 100% 
.thumbp{width:80px;height:80px;}= ukuran lebar dan tinggi thumbnail posting
#slider-recentpost = bungkus/slide box dari rcentpost
.arrow = navigasi dari slider posts ini
span.loadingrc = gambar loading slider posts
.datex = adalah tanggal publish postingan, jika Anda tidak menginginkannya hapus saja code yang berwarna pink itu
.titlexp h4{font-size:90%;} = ukuran font untuk judul posting, ini juga bisa Anda sesuaikan dengan blog

HTML
Untuk struktur HTML-nya cukup sederhana, copy codenya dan letakkan tepat diatas atau sebelum tag <div id='main-wrapper'> atau tag <div class='main-outer'> (jika kode pertama tidak ada)

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<div id='slider-recentpost'>
<div id='rcentpost'>
<span class='loadingrc'>Loading...</span></div>
</div>
</b:if>

keterangan;
kode yang berwarna merah adalah tag kondisional agar recent posts slider ditampilkan selain di Homepage, hapus saja kalau mau ditampilkan di seluruh halaman blog.
lihat artikel cara menampilkan dan menyembunyikan widget di halaman tertentu pada Blog

Kemudian Simpan Template


Recent Comments Widget

Recent Comments WidgetUntuk memasang Widget Komentar Terbaru ini, Anda hanya perlu menambahkan konfigurasi CSS baru dan HTML ke dalam gadget blogger, tanpa perlu script atau jQuery lagi.

Copy semua kode recent comments dibawah ini, dan gunakan sebagai widget Anda.
Pilih Tata Letak Blogger > Tambahkan Gadget > pilih HTML/JavaScript > pastekan semua kode dibawah > Simpan
* beri nama widget dengan nama Recent Comments atau Komentar terbaru

Recent Comments Code:

<style type="text/css">

/*
  Recent Comments by http://problogiz.blogspot.com 
*/

#rcentcomnets .ketkomt span{font-size:10px;margin-left:8px}
#rcentcomnets li:hover{background:#A9C9DF;border:1px solid #57ACE8}
#rcentcomnets .kmtimg{margin:0 5px 0 0;float:left;height:75px;width:75px;overflow:hidden;border-radius:9999px 0 9999px 9999px;border:1px solid #E4E4E4}
#rcentcomnets .kmtimg a{display:block}
#rcentcomnets .kmtimg img{padding:0;width:100%;height:100%;border-radius:9999px 0 9999px 9999px}
#rcentcomnets .ketkomt{padding:0 0 2px;font-size:13px;line-height:13px;overflow:hidden;max-height:28px}
#rcentcomnets li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
#rcentcomnets li{overflow:hidden;height:81px;margin:5px 0;padding:2px;border:1px solid #DADADA;border-radius:9999px 1000px 1000px 9999px}
#rcentcomnets .loadx{display:block;width:80px;height:10px;margin:10px auto;text-indent:-9999px;background:transparent url(http://4.bp.blogspot.com/-MsRRTk6y4U8/UZ8dx_A3ERI/AAAAAAAAHvg/nVBp8bpLHYw/s1600/horizontal-loading.gif) no-repeat 0 0}
</style>
<div id="rcentcomnets">
<span class="loadx">Loading...</span></div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
rccommnetsx({
numComments:6,
characters:100,
adminBlog:""
});
});
//]]>
</script>
Anda dapat tempatkan widget ini di bagian sidebar blog, dan secara otomatis akan memperbarui jika ada komentar baru pengunjung.

keterangan:

10px = ukuran huruf isi komentar
#A9C9DF = warna hover comment
height:75px;width:75px = lebar dan tinggi gambar/image avatar
font-size:13px = ukuran nama /keterangan id user
kode warna merah = url image loading
kode warna biru = jumlah komentar yang ditampilkan dan banyak karakter

Itulah Sob, salah satu cara untuk membuat fitur Artikel Terbaru otomatis dengan tampilan Slideshow dan widget Komentar Terbaru di blog. Tentu banyak tutorial lain yang membahasnya dengan konfigurasi dan script yang berbeda. 

Artikel ini dibuat dengan harapan Sobat Blogger dapat menggunakanya sebagai fitur penting bagi blog/website dan memberi kesempatan visitor lebih jauh meng-eksplore isi blog dan meningkatkan pageview secara keseluruhan.

Selamat Mencoba

Salaam

Read More

Membuat Image Slider dengan Carousel Thumbnail

Slideshow atau Image Slider dengan Carousel Thumbnail ini juga salah satu jenis Slideshow jQuery dengan desain yang berbeda. Sebelumnya Tutorial Problogiz membagi panduan membuat Membuat Slide Show jQuery Carousel Keren di Blogger, kali ini masih menggunakan plugin jQuery yang sama caroudFredSel tapi dengan konfigurasi dan skin yang berbeda. Image Slider dengan thumbnail ini menggunakan Main Page (gambar utama) dan Thumbnail, yang sama-sama bergeser secara otomatis. Mari ikuti tutor selengkapnya cara Membuat Image Slidershow dengan Carousel Thumbnail berikut.
Image Slidershow dengan Carousel Thumbnail

Untuk skin Image Slidershow ini menggunakan file PSD yang dapat Anda unduh dibawah, sesuai design slider (sources : favbulous.com) plugin carousel jQuery perlu dikonfigurasi sebagai berikut:
  • Previous and next navigation
  • Thumbnail carousel
  • Main Image carousel


jQuery Plugin

Masih menggunakan carouFredsel plugin yang memungkinkan kita untuk membuat layout yang berbeda dengan mudah. Ada banyak demo dan contoh online bagi kita untuk mencoba dan menemukan konfigurasi Carousel yang tepat. Kali ini, kita akan menggunakan contoh Slideshow dengan thumbnail bergulir (scroll) horizontal. Untuk itu kita membutuhkan javascript sebagai berikut:
$(function() { /* Attached an unique class name to each thumbnail image */ $('#thumbs .thumb a').each(function(i) { $(this).addClass( 'itm'+i ); /* add onclick event to thumbnail to make the main carousel scroll to the right slide*/ $(this).click(function() { $('#images').trigger( 'slideTo', [i, 0, true] ); return false; }); }); /* Highlight the first item on first load */ $('#thumbs a.itm0').addClass( 'selected' ); /* Carousel for the main slideshow */ $('#images').carouFredSel({ direction: 'left', circular: true, infinite: false, items: 1, auto: true, scroll: { fx: 'directscroll', onBefore: function() { /* Everytime the main slideshow changes, it check to make sure thumbnail and page are displayed correctly */ /* Get the current position */ var pos = $(this).triggerHandler( 'currentPosition' ); /* Reset and select the current thumbnail item */ $('#thumbs a').removeClass( 'selected' ); $('#thumbs a.itm'+pos).addClass( 'selected' ); /* Move the thumbnail to the right page */ var page = Math.floor( pos / 3 ); $('#thumbs').trigger( 'slideToPage', page ); } } }); /* Carousel for the thumbnails */ $('#thumbs').carouFredSel({ direction: 'left', circular: true, infinite: false, items: 3, align: false, auto: false, prev: '#prev', next: '#next' }); });

Struktur HTML

Yang perlu diperhatikan pada markup HTML adalah tag <a> dan <img> untuk main carousel maupun thumbnail, tag <a> harus berada dalam posisi diatas (top) dari image. Sehingga memungkinkan memberi efek "glare" atau berkilau pada masing-masing gambar.

<div id="gallery"> <!-- HTML for main carousel --> <div id="main"> <div id="images"> <div class="slide"> <a href=""></a> <img src="images/large/large-image.jpg" alt="Main Image Title" width="400" height="210" /> </div> ...... ...... ...... </div> </div> <!-- HTML for thumbnail carousel --> <div id="thumbs"> <div class="thumb"> <a href="#">Thumbnail Title</a> <img src="images/small/samll-image.jpg" alt="Thumbnail Title" width="72" height="38" /> </div> ...... ...... ...... </div> <!-- Previous and next button --> <a href="#" class="thumbs" id="prev">Previous</a> <a href="#" class="thumbs" id="next">Next</a> </div> <!-- clear float --> <div class="clear"></div>

PSD File

Ada beberapa file PSD dari little galery dibawah ini yang dapat digunakan sebagai cover (skin) Slideshow. Css sprite untuk tombol navigasi dengan efek hover. Untuk gambar efek glare (berkilau) pada main image dan thumbnail sebenarnya file PNG transparan, contoh dibawah saya beri background hitam agar tampak oleh Anda gambar berkilau. Berikut file yang dapat Anda copy url image-nya nantinya dan pasang sebagai background dalam CSS.

carousel_glare
carousel_glare.png
carousel_glare_small
carousel_glare_small.png
carousel_nav
carousel_nav.png

carousel_shadow
carousel_shadow.png

CSS

Setelah kita telah mempunyai Javascript, Html, dan gambar cover diatas, sekarang waktunya memberi style pada slideshow tersebut, berikut kode CSS:
#gallery { width: 432px; height: 280px; position:relative; margin:0 auto; } /* Styling for the main carousel */ #gallery #main { width:432px; height:220px; background: transparent url('http://1.bp.blogspot.com/-jUWbKtcfuKM/UZPqMYC7rSI/AAAAAAAAHs0/nfU_zlr-9eU/s320/carousel_shadow.png') no-repeat center bottom; position:relative; text-align:center; } #gallery #images, #gallery #thumbs { overflow: hidden; } #gallery #images { width:400px; height:210px; margin:0 auto; position:absolute; left:16px; top:0; } #gallery #images .slide { width: 400px; height:210px; position:relative; float:left; } #gallery #images .slide a { display:block; position:absolute; top:0; left:0; background: transparent url('http://3.bp.blogspot.com/-g14_7IwqOfM/UZPqLg1D9pI/AAAAAAAAHsk/smWvmRdohOs/s320/carousel_glare.png') no-repeat 0 0; width: 400px; height:210px; text-indent:-999em; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; } #gallery #images .slide img { border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; } /* styling for the thumbnail carousel */ #gallery #thumbs { width: 330px; height:40px; margin:10px 0 0 73px; } #gallery #thumbs .thumb { width:72px; height:40px; float: left; position:relative; margin:0 30px 0 0; } #gallery #thumbs .thumb img { border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; } #gallery #thumbs .thumb a { display:block; position:absolute; top:0; left:0; background: transparent url('http://4.bp.blogspot.com/-BDpcOxuygfw/UZPqLQu-C7I/AAAAAAAAHsc/Zut-798DjnE/s1600/carousel_glare_small.png') no-repeat 0 0; width: 70px; height:36px; border:2px solid #ddd; text-indent:-999em; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; } #gallery #thumbs .thumb a.selected, #gallery #thumbs .thumb a:hover { border:2px solid #aaa; } /* styling for previous and next button */ #gallery #prev, #gallery #next { text-indent:-999em; position: absolute; display:block; width:19px; height:20px; background: transparent url('http://1.bp.blogspot.com/-yziclQcewm4/UZPqLlLd-hI/AAAAAAAAHsg/jzQJurMpekY/s1600/carousel_nav.png') no-repeat 0 0; bottom:20px; } /* Set the position according to the sprite */ #gallery #prev { background-position: 0 0; left: 25px; } #gallery #next { background-position: -19px 0; right: 25px; } #gallery #prev:hover { background-position: 0 -20px; } #gallery #next:hover { background-position: -19px -20px; } #gallery #prev.disabled, #gallery #next.disabled { display: none !important; }

Memasang Image Slider dengan Carousel Thumbnail di Blogger

Langkahnya sama dengan artikel sebelumnya Cara Membuat Slide Show jQuery Carousel (Anda bisa lihat kembali untuk lebih detailnya). Yang pertama tentu meletakkan jQuery library dan carouFredSel-plugin jquery dibawah ini tepat sebelum tag</head>.

<script type="text/javascript" src="https://problogizjs.googlecode.com/files/jquery.carouFredSel-5.2.3-packed.js"></script>
Untuk jQuery library kalau belum ada ditemplate Anda bisa menggunakan jQuery terbaru jquery-1.9.1.min.js, kalau sudah ada versi lainnya lewati saja jangan pasang lagi.

Langkah kedua, copy code CSS diatas dan letakkan tepat sebelum tag ]]></b:skin>

Langkah ketiga, jika Anda ingin Slidershow ini dipakai sebgai widget di bawah Judul Blog, ikuti langkah berikut:

Pilih Tata Letak Blogger > Tambahkan Gadget > pilih HTML/JavaScript > pastekan semua kode dibawah > Simpan

Code HTML + plugin carouFredSel :
<div id="gallery"> <div id="main"> <div id="images"> <div class="slide"> <a href="#"></a> <img alt="" height="210" src="http://favbulous.com/demo/style-a-image-slider/images/large/walle.jpg" width="400" /> </div> <div class="slide"> <a href="#"></a> <img alt="" height="210" src="http://favbulous.com/demo/style-a-image-slider/images/large/toystory.jpg" width="400" /> </div> <div class="slide"> <a href="#"></a> <img alt="" height="210" src="http://favbulous.com/demo/style-a-image-slider/images/large/up.jpg" width="400" /> </div> <div class="slide"> <a href="#"></a> <img alt="" height="210" src="http://favbulous.com/demo/style-a-image-slider/images/large/nemo.jpg" width="400" /> </div> </div> </div> <div id="thumbs"> <div class="thumb"> <a href="#"></a> <img alt="" height="38" src="http://favbulous.com/demo/style-a-image-slider/images/small/walle.jpg" width="72" /> </div> <div class="thumb"> <a href="#"></a> <img alt="" height="38" src="http://favbulous.com/demo/style-a-image-slider/images/small/toystory.jpg" width="72" /> </div> <div class="thumb"> <a href="#"></a> <img alt="" height="38" src="http://favbulous.com/demo/style-a-image-slider/images/small/up.jpg" width="72" /> </div> <div class="thumb"> <a href="#"></a> <img alt="" height="38" src="http://favbulous.com/demo/style-a-image-slider/images/small/nemo.jpg" width="72" /> </div> </div> <a class="thumbs" href="#" id="prev">Previous</a> <a class="thumbs" href="#" id="next">Next</a> </div> <div class="clear"> </div> <script type="text/javascript"> $(function() { /* Attached an unique class name to each thumbnail image */ $('#thumbs .thumb a').each(function(i) { $(this).addClass( 'itm'+i ); /* add onclick event to thumbnail to make the main carousel scroll to the right slide*/ $(this).click(function() { $('#images').trigger( 'slideTo', [i, 0, true] ); return false; }); }); /* Highlight the first item on first load */ $('#thumbs a.itm0').addClass( 'selected' ); /* Carousel for the main slideshow */ $('#images').carouFredSel({ direction: 'left', circular: true, infinite: false, items: 1, auto: true, scroll: { fx: 'directscroll', onBefore: function() { /* Everytime the main slideshow changes, it check to make sure thumbnail and page are displayed correctly */ /* Get the current position */ var pos = $(this).triggerHandler( 'currentPosition' ); /* Reset and select the current thumbnail item */ $('#thumbs a').removeClass( 'selected' ); $('#thumbs a.itm'+pos).addClass( 'selected' ); /* Move the thumbnail to the right page */ var page = Math.floor( pos / 3 ); $('#thumbs').trigger( 'slideToPage', page ); } } }); /* Carousel for the thumbnails */ $('#thumbs').carouFredSel({ direction: 'left', circular: true, infinite: false, items: 3, align: false, auto: false, prev: '#prev', next: '#next' }); }); </script>
source image: favbulous.com

Selesai!!

Ini adalah salah satu cara untuk memberi cover (skin) pada image slidershow dengan berkas/file PSD gratis. Jika Anda ingin mencoba sendiri menggunakan file PSD yang berbeda, Anda bisa mencobanya.

Selamat Mencoba widget Slider Image dengan Thumbnail di blog Anda, Sob!!

Read More

jQuery Carousel dengan UI Kit untuk Blogger

jQuery Carousel Slide Show atau Slider jQuery Carousel adalah sebuah slideshow dengan jQuery Javascript yang menampilkan animasi galeri gambar/image dan konten HTML (teks, link, foto dsb.), umumnya banyak digunakan pada website portofolio dan fotografi. jQuery Carousel Slide Show juga banyak yang telah digunakan sebagai widget blogger seperti menampilkan update post terbaru, popular posts, related posts secara otomatis. Kali ini saya ingin sharing tutorial cara membuat Slideshow jQuery Carousel Keren di Blogger, tampilan yang lebih apik dengan UI Kit (Psd).

jQuery Carousel dengan UI Kit untuk Blogger

Desain tutorial jQuery Carousel yang saya kutip dari original source di favbulous.com ini, cukup mudah diikuti dan dipahami. So, saya tertarik membaginya kembali buat sobat bloggger semua. Berikut kelebihan fitur dari jQuery Carousel Slide Show ini :
  • Support jQuery framework
  • Fitur Previous dan Next Arrows
  • Fitur Number navigation atau pagination
  • Menampilkan multiple items (banyak item) pada saat bersamaan
  • Support IE, FF, Safari and Chrome

Javascript (Plugin Carousel)

Carousel Slide Show ini menggunakan script caroudFredSel yang dapat dikonfigurasi menggunakan framework jQuery. Script caroudFredSel berikut ini yang teleh membuat slideshow bekerja sebagai mana carousel sebenarnya.

$(function() { $('#carousel ul').carouFredSel({ prev: '#prev', next: '#next', pagination: "#pager", auto: true, scroll: 1000, pauseOnHover: true }); });

Markup HTML

Struktur kode HTML menggunakan elemen <li> dan ditambahkan dengan tag <img> dan tag <a>. Jadi setiap gambar akan mewakili atau mengarahkan sebuah link tertentu. Dan usahakan atur posisi serta struktur HTML seperti kode berikut dibawah:
<div id="carouesl"> <ul> <li><img src="images/image1.jpg" alt="" /><a href="#">Image1</a></li> <li><img src="images/image2.jpg" alt="" /><a href="#">Image2</a></li> <li><img src="images/image3.jpg" alt="" /><a href="#">Image3</a></li> <li><img src="images/image4.jpg" alt="" /><a href="#">Image4</a></li> <li><img src="images/image5.jpg" alt="" /><a href="#">Image5</a></li> <li><img src="images/image6.jpg" alt="" /><a href="#">Image6</a></li> </ul> <div class="clearfix"></div> <!-- prev and next button --> <a id="prev" class="prev" href="#"><</a> <a id="next" class="next" href="#">></a> <!-- pagination --> <div id="pager" class="pager"></div> </div>

keterangan:
untuk url, image/gambar dapat Anda ganti atau sesuaikan dengan kebutuhan blog
untuk menambah gambar lebih banyak, Anda dapat menambah elemen <li> atau kode yang berwarna biru

CSS

Pada prinsipnya desain ini dimaksudkan untuk memberi cover (skin) tampilan Carousel/slideshow lebih keren dan indah untuk dilihat. Dengan menggunakan 3 main images (psd), yaitu :
  • carousel_control: sprite gambar untuk semua kontrol navigasi ( gambar navigasi preview, next dan bullet poin).
  • carousel_polaroid: ini adalah bingkai polaroid untuk setiap gambar.
  • carousel_shine: ini untuk efek glare (berkilau) di atas masing-masing gambar.

carousel_control
carousel_control
carousel_polaroid:
carousel_polaroid:
carousel_shine
carousel_shine

tip: copy URL Image masing-masing gambar diatas dan pasang sebagai background (yang berwarna merah) di CSS.

CSS Code:
#carousel { margin: 0 0 30px 0; width: 735px; position:relative; } #carousel ul { margin: 0; padding: 0; list-style: none; display: block; } /* Polaroid background image put here */ /* Need to set the width and height of the polaroid frame */ #carousel li { font-size: 40px; color: #999; text-align: center; width: 232px; height: 178px; padding: 0; margin: 6px; display: block; float: left; background: transparent url('images/carousel_polaroid.png') no-repeat 0 0; position:relative; } /* Position the image to fit into the polaroid frame */ /* We use margin-top to bump it down */ #carousel li img { width:201px; height:127px; margin-top:14px; } /* We put the glare background in here */ /* We make it a block element and absolute position */ /* z-index to make sure it appear on top of the image */ #carousel li a { width:201px; height:127px; position:absolute; display:block; z-index:2; top:14px; left:16px; background: transparent url('images/carousel_shine.png') no-repeat 0 0; text-indent:-999em; } .clearfix { float: none; clear: both; } /* Skin the button with carousel control sprite*/ /* Make it position absolute to move it easily */ #carousel .prev, #carousel .next { margin-left: 10px; width:15px; height:21px; display:block; text-indent:-999em; background: transparent url('images/carousel_control.png') no-repeat 0 0; position:absolute; top:70px; } /* Individual setting for previous button */ #carousel .prev { background-position:0 0; left:-30px; } #carousel .prev:hover { left:-31px; } /* Individual setting for next button */ #carousel .next { background-position: -18px 0; right:-20px; } #carousel .next:hover { right:-21px; } #carousel .pager { margin:0 auto; text-align: center; } /* Style the pagination button with dot */ /* Same as prev and next button, we use the same css sprite */ #carousel .pager a { margin: 0 5px 0 0; text-decoration: none; display:inline-block; width:8px; height:8px; background: transparent url('images/carousel_control.png') no-repeat -2px -32px; text-indent:-999em; } #carousel .pager a.selected { text-decoration: underline; background: transparent url('images/carousel_control.png') no-repeat -12px -32px; }
keterangan:
seperti biasa Anda bisa merubah warna-warna, lebar atau width slideshow, font dll. sesuai selera.

Cara Pasang Slide Show jQuery Carousel Keren di Blogger

Langkah Pertama

Pertama-tama pastikan template Anda sudah menggunakan valid DOCTYPE, ini tentu berlaku untuk semua type carousel agar berfungsi dengan baik.

Kedua letakkan file js. berikut termasuk jQuery library dan carouFredSel-plugin jquery dibawah ini tepat sebelum tag </head>.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="https://problogizjs.googlecode.com/files/jquery.carouFredSel-5.2.3-packed.js"></script> note:
Untuk jQuery library (warna merah), adalah opsional jika template Anda sudah memakainya baik jQuery versi terbaru jquery-1.9.1.min.js; jquery-1.8.1.min.js; jquery-1.7.1.min.js; jquery-1.6.1.min.js; jquery-1.5.2.min.js, atau versi jquery lainnya maka script jQuery yang pertama tidak perlu dipasang lagi. Cukup satu jquery min saja di template, agar tidak terjadi conflict script. Letakkan saja carouFredSel packed jquery diatas sebelum tag </head>

Langkah Kedua

Selanjutnya copy code CSS berikut dan paste tepat sebelum tag ]]></b:skin>
#carousel { margin: 0 0 30px 0; width: 735px; position:relative; } #carousel ul { margin: 0; padding: 0; list-style: none; display: block; } /* Polaroid background image put here */ /* Need to set the width and height of the polaroid frame */ #carousel li { font-size: 40px; color: #999; text-align: center; width: 232px; height: 178px; padding: 0; margin: 6px; display: block; float: left; background: transparent url('http://2.bp.blogspot.com/-AFTIdQe9Mto/UZAKoggu4zI/AAAAAAAAHrA/UpVc2lt-hdE/s1600/carousel_polaroid.png') no-repeat 0 0; position:relative; } /* Position the image to fit into the polaroid frame */ /* We use margin-top to bump it down */ #carousel li img { width:201px; height:127px; margin-top:14px; } /* We put the glare background in here */ /* We make it a block element and absolute position */ /* z-index to make sure it appear on top of the image */ #carousel li a { width:201px; height:127px; position:absolute; display:block; z-index:2; top:14px; left:16px; background: transparent url('http://1.bp.blogspot.com/-N046u-3n1K4/UZAKvFyxNQI/AAAAAAAAHrI/hhUEaavCSjk/s1600/carousel_shine.png') no-repeat 0 0; text-indent:-999em; } .clearfix { float: none; clear: both; } /* Skin the button with carousel control sprite*/ /* Make it position absolute to move it easily */ #carousel .prev, #carousel .next { margin-left: 10px; width:15px; height:21px; display:block; text-indent:-999em; background: transparent url('http://3.bp.blogspot.com/-ce1EFh0CSlc/UZAKWbXWgVI/AAAAAAAAHq4/whG5YuSL-q0/s1600/carousel_control.png') no-repeat 0 0; position:absolute; top:70px; } /* Individual setting for previous button */ #carousel .prev { background-position:0 0; left:-30px; } #carousel .prev:hover { left:-31px; } /* Individual setting for next button */ #carousel .next { background-position: -18px 0; right:-20px; } #carousel .next:hover { right:-21px; } #carousel .pager { margin:0 auto; text-align: center; } /* Style the pagination button with dot */ /* Same as prev and next button, we use the same css sprite */ #carousel .pager a { margin: 0 5px 0 0; text-decoration: none; display:inline-block; width:8px; height:8px; background: transparent url('http://3.bp.blogspot.com/-ce1EFh0CSlc/UZAKWbXWgVI/AAAAAAAAHq4/whG5YuSL-q0/s1600/carousel_control.png') no-repeat -2px -32px; text-indent:-999em; } #carousel .pager a.selected { text-decoration: underline; background: transparent url('http://3.bp.blogspot.com/-ce1EFh0CSlc/UZAKWbXWgVI/AAAAAAAAHq4/whG5YuSL-q0/s1600/carousel_control.png') no-repeat -12px -32px; }

Langkah Ketiga

Dan langkah terakhir ini adalah memasang elemen-elemen HTML sebagai widget Carousel Slide Show Anda di blog. Copy semua kode dibawah termasuk Javascript ekskusi carouFredSel-plugin dimanapun Anda suka, biasanya dibawah Judul Blog atau diatas judul post, atas footer.

Pilih Tata Letak Blogger > Tambahkan Gadget > pilih HTML/JavaScript > pastekan semua kode dibawah > Simpan

<div id="carousel"> <ul> <li><img alt="" src="http://favbulous.com/demo/skin-a-carousel/images/image1.jpg" /><a href="#">Image1</a></li> <li><img alt="" src="http://favbulous.com/demo/skin-a-carousel/images/image2.jpg" /><a href="#">Image2</a></li> <li><img alt="" src="http://favbulous.com/demo/skin-a-carousel/images/image3.jpg" /><a href="#">Image3</a></li> <li><img alt="" src="http://favbulous.com/demo/skin-a-carousel/images/image1.jpg" /><a href="#">Image1</a></li> <li><img alt="" src="http://favbulous.com/demo/skin-a-carousel/images/image2.jpg" /><a href="#">Image2</a></li> <li><img alt="" src="http://favbulous.com/demo/skin-a-carousel/images/image3.jpg" /><a href="#">Image3</a></li> </ul> <div class="clearfix"></div> <!-- prev and next button --> <a id="prev" class="prev" href="#"><</a> <a id="next" class="next" href="#">></a> <!-- pagination --> <div id="pager" class="pager"></div> </div> <script type="text/javascript"> $(function() { $('#carousel ul').carouFredSel({ prev: '#prev', next: '#next', pagination: "#pager", auto: true, scroll: 1000, pauseOnHover: true }); }); </script>
source image: favbulous.com

Selesai!!.

Gitu Sob, sharing kali ini mengenai widget SlideShow jQuery Carousel untuk Blogger, jika Anda tertarik untuk membuat slideshow Carousel dengan menampilkan Artikel Terbaru atau Popular Post secara otomatis, tunggu artikel Problogiz selanjutnya. So keep in updated here...

Selamat Mencoba!!!

Read More

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

artikel terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|