Khusus Percobaan 21

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

2:31:00 PM Widget dan Plugin

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 < dan > menjadi > 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.

Loading Blogger Lebih Cepat dengan Disable CSS Template Official

2:22:00 PM Templates , Tips & Triks , Tutorial

Dibandingkan WordPress, Blogger masih kalah dalam hal mengatur bagaimana agar loading situs bisa dipercepat. Meskipun begitu, pengguna blogspot masih bisa melakukan hack agar loading situs lebih cepat. Cara mempercepat loading blog salah satunya adalah dengan menghapus/men-disable CSS Official (bawaan) blogger.

File CSS Blogger tersebut adalah:

https://www.blogger.com/static/v1/widgets/XXXXXXXXX-widget_css_bundle.css

Bisa jadi template Anda memiliki lebih dari satu. Blog kita akan memuat atau memanggil file-file CSS tersebut saat halaman blog dibuka. Artinya, jika file-file tersebut dihapus maka tidak ada pemanggilan file-file tersebut. Oleh karena itu loading blog bisa lebih cepat. Link tersebut dapat Anda temukan dalam kode sumber (source code) halaman. Tekan Ctrl+U untuk membuka source code sebuah halaman situs.

Perhatian!

File CSS Blogger berisi gaya (style) Widgets Blogger asli atau bawaan. Jika Anda menggunakan Template bawaan Blogger dan menonaktifkan Style Sheet (CSS) ini, situs Anda akan terlihat kacau balau. Gunakan hack ini hanya jika blog Anda menggunakan template kustom.

Tag <link> pemanggilan CSS akan tetap muncul pada kode sumber blog Anda, tapi tidak akan dimuat oleh browser, karena dibungkus dalam tag komentar HTML. Tentu Anda sudah tahu bahwa browser akan mengabaikan markup HTML yang berada dalam tag komentar. Jadi, file CSS Blogger tidak akan dimuat.

Bagaimana Cara Menonaktifkan/Men-disable CSS Official Blogger?

Temukan tag <b:skin> dalam template Anda dan hapus baris sesudahnya hingga tag </b:skin>. Sekali lagi yang harus Anda hapus adalah tag <b:skin> dan tag </b:skin> dan semua yang berada diantaranya, bisanya itu baris kode yang sangat banyak. Lalu ganti dengan satu baris kode ini saja:

&lt;style&gt;&lt;!--/*<b:skin><![CDATA[*/]]></b:skin>

Apakah sudah selesai? Ya, Anda sudah menyelesaikan tahap men-disable CSS official blogger. Selanjutnya tugas Anda adalah menggantikan CSS blogger yang telah dihapus dengan CSS kustom atau CSS buatan Anda sendiri. CSS tersebut harus diapit oleh tag <style> dan </style> lalu tempatkan di atas tag </head>.

Selamat mencoba.

Tampilan Baru Tata Letak Template Blogger

2:10:00 PM Templates

Iseng-iseng edit-edit template ternyata ada yang baru di Blogger. Hari ini saya melihat tampilan baru pada tata letak (page element) template Blogger. Saya mengira template yang saya gunakan yang bermasalah ternyata bukan.

Tata letak Blogger sekarang mengadopsi bentuk-bentuk flat (datar) gaya Metro. Mengingatkan saya pada layar Mulai (Start Screen) Windows 8. Tidak hanya Start Screen melainkan juga pada jendela-jendela lainnya. Semua di flat dengan sudut siku 90 derajat. Tidak ada lagi sudut bulat dan efek Chrome (efek mengilap).

Tampilan tata letak template Blogger yang datar (flat)

Antar muka Tata Letak template Blogger sekarang sudah Flat

Tampilan seperti ini (flat) memengaruhi para pengembang perangkat lunak. Mau tidak mau, suka atau tidak, pada akhirnya mereka juga menyesuaikan antarmuka perangkat lunak mereka menjadi flat. Tidak hanya pengembang perangkat lunak saja yang terpengaruh melainkan pengembang web (situs) juga. Kini antarmuka sebuah situs hampir semuanya flat. Semakin jarang kita temukan situs yang menampilkan elemen-elemen dengan efek timbul
Pengembang template Blogger rupanya tidak mau ketinggalan juga. Antarmuka elemen tata letak template Blogger sekarang menjadi flat. Tidak hanya tata letak, jendela sembul unggah gambar juga flat.

Progress Upload Template
Saya juga melihat ada persentasi kemajuan (progress) saat kita mengupload atau mengedit template. Cobalah mengunggah template dan perhatikan di sudut jendela browser, Anda akan melihat persentasi kemajuan. Lihat cuplikan gambar yang saya ambil.

Bagaimana, sudah melihat perubahannya atau saya yang telat? :)

Cara Membuat Navigasi Next & Previous Dibawah Postingan Dengan jQuery Pada Blogger

10:55:00 AM Tips & Triks

Ok sobat 2RI$1 pada kesempatan ini 2RI$1 akan membagikan trik bagaimana cara menampilkan navigasi Next & Previous dengan judul posingan halaman selanjutnya dibawah postingan Blog.

Kegunaan memasang navigasi ini adalah agar pengunjung blog dapat melihat postingan sebelum dan sesudah postingan yang sedang dibacanya, tentu saja untuk menambah daya tarik kepada pengunjung agar membaca artikel selanjutnya.

Trik ini bukanlah yang baru dan sudah banyak pakar blog yang berbagi ilmu tentang yang cara membuat navigasi Next & Previous baik itu menggunakan JavaScript atau menggunakan jQuery. Disini saya akan membahas menggunakan jQuery yang lebih rapi dan juga sangat optimal.

Saya menemukan bahwa tombol Navigasi Next & Previous ditempatkan tepat di bagian bawah konten lebih baik dibandingkan dengan menempatkan di bawah komentar.

Ok sobat berikut adalah Cara Membuat Navigasi Next & Previous Dibawah Postingan dan tentu saja dengan judul postingan dihalaman sebelum atau halaman selanjutnya.

TAMBAHKAN KE BLOGGER

Pertama kita akan menambahkan kode yang diperlukan dan kemudian kita akan menghapus tombol standar yang ada yang muncul di bawah bagian komentar.

1. Masuk ke Blogger > Template
2. Backup template Anda
3. Klik "Edit HTML"
4. Cari kata ]]></b:skin> (Tekan Ctrl + F untuk memudahkan pencarian), Letakkan kode Css di bawah ini tepat di atas ]]></b:skin>

[code type="CSS"]/***************************************** Name : Next Previous style By : 2RI$1 Gamers 22 | Blog Design Update : Minggu, 06 Maret 2016 ******************************************/ .mbt-pager { border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd; margin-bottom: 10px; overflow:hidden; padding:0px;} .mbt-pager li.next { float: right; padding:0px; background:rgba(255,0,245,0.58); margin:0px;} .mbt-pager li.next a { padding-left: 24px; } .mbt-pager li.previous { margin:0px -2px 0px 0px; float: left; border-right:1px solid #ddd; padding:0px; background:rgba(0,243,255,0.58);color:#ffffff; } .mbt-pager li.previous a { padding-right: 24px; } .mbt-pager li.next:hover, .mbt-pager li.previous:hover {background:rgba(255,0,0,0.58);color:#ffffff; } .mbt-pager li { width: 50%; display: inline; float: left; text-align: center; } .mbt-pager li a { position: relative; min-height: 77px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;} .mbt-pager li i { color:#ffffff; font-size: 18px; } .mbt-pager li a strong { display: block; font-size: 20px; color: #0f00ff; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;} .mbt-pager li a span { font-size: 15px; color: #000000; font-family:oswald,Helvetica, arial; margin:0px;} .mbt-pager li a:hover span, .mbt-pager li a:hover i { color: #ffffff; } .mbt-pager li.previous i { float:left; margin-top:15%; margin-left:5%; } .mbt-pager li.next i { float: right; margin-top: 15%; margin-right: 5%; } .mbt-pager li.next i, .mbt-pager li.previous i , .mbt-pager li.next, .mbt-pager li.previous{ -webkit-transition-property: background color; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease-out; -moz-transition-property: background color; -moz-transition-duration: 0.4s; -moz-transition-timing-function: ease-out; -o-transition-property: background color; -o-transition-duration: 0.4s; -o-transition-timing-function: ease-out; transition-property: background color; transition-duration: 0.4s; transition-timing-function: ease-out; } .fa-chevron-right {padding-right:0px;} }/*** Blog Design CSS and ***/[/code]

Untuk mengubah latar belakang Navigasi Next & Previous menjadi warna merah transparan maka ganti background:rgba(255,0,0,0.58) , dan warna font menjadi putih maka ganti color: #ffffff;
Untuk mengubah warna Navigasi Next menjadi ungu transparan maka ganti background:rgba(255,0,245,0.58) , dan warna Navigasi Previous menjadi biru muda transparan maka ganti background:rgba(0,243,255,0.58)

5. Sekarang tambahkan font Oswald. Cari <head> dan paste kode berikut tepat di bawahnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Catatan : Hapus kode bercetak tebal jika anda telah menambahkan library jquery dalam template.

6. Selanjutnya kita akan menambahkan kode HTML yang akan menempatkan posisi halaman di bagian bawah posting blog. Cari <data:post.body/>
biasanya <data:post.body/> ada banyak maka pilih yang terakhir (ke 4)

7. Paste kode HTML berikut { tepat di bawahnya <data:post.body/> } :

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<ul class='mbt-pager'>
<li class='next'>
<b:if cond='data:newerPageUrl'>
<i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' rel='next'/>
<b:else/>
<i class='fa fa-chevron-right'/><a rel='next'><strong>Next</strong> <span>You are viewing Most Recent Post</span></a>
</b:if>
</li>
<li class='previous'>
<b:if cond='data:olderPageUrl'>
<i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' rel='previous'/>
<b:else/>
<i class='fa fa-chevron-left'/><a rel='previous'><strong>Previous</strong> <span>You are viewing Last Post</span></a>
</b:if>
</li>
</ul>
<script type='text/javascript'>
//<![CDATA[
(function($){
var newerLink = $('a.newer-link');
var olderLink = $('a.older-link');
$.get(newerLink.attr('href'), function (data) {
newerLink.html('<strong>Next</strong> <span>'+$(data).find('.post h3.post-title').text()+'</span>');
},"html");
$.get(olderLink.attr('href'), function (data2) {
olderLink.html('<strong>Previous</strong> <span>'+$(data2).find('.post h3.post-title').text()+'</span>');
},"html");
})(jQuery);
//]]>
</script>
</b:if></b:if>

Di sini saya menggunakan sedikit jquery untuk mengambil data dalam tag judul. Karena blogger hanya menyediakan pilihan untuk beralih antara posting berikutnya dan sebelumnya menggunakan URL, oleh karena itu kita membutuhkan jQuery untuk menemukan kelas judul menggunakan tag heading. Kelas judul dan tag post mungkin berbeda untuk setiap template blog.

Dalam template blog standar, kelas yang benar adalah .post h3.post-title dan karena itu saya akan menggunakan yang sama dalam kode jquery di atas.

(Opsi) Teks yang berwarna kuning dan oranye dapat diganti dengan teks sesuai dengan keinginan anda.

8. Simpan template anda dan lihat blog anda.

MENGHAPUS TOMBOL NEXT & PREV YANG LAMA

1. Cari <b:includable id='NextPrev'>
2. Dan terlihat sedikit mirip seperti kode di bawah ini :

<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>

3. Paste kode di bawah ini ke dalam kode kondisional seperti yang ditunjukkan di bawah ini :

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>

KODE DI ATAS

</b:if></b:if>

4. Simpan Template anda dan selesai.

Saya berharap widget baru ini bisa memberikan warna baru pada template blog anda. Desain yang unik dan berbeda dari yang lain. Jika ada yang kurang bisa anda tanyakan di kolom komentar.

Semoga Bermanfaat.[full-post]