Membuat Timestamp Mirip Median UI 1.7

Template Median UI terbaru yaitu versi 1.7 saat ini sudah jauh berbeda dari versi sebelumnya. Baik dari segi tampilan ataupun struktur kode didalamnya

Kali ini yang menarik perhatian saya adalah Timestamp yang dulunya menggunakan format tanggal biasa menjadi time ago. Pada template versi sebelumnya sebanarnya sudah digunakan tapi hanya di timestamp komentar. Ternyata menarik juga setelah diaplikasikan di halaman index.

Jika kalian masih setia menggunakan template Median UI, Fletro dan Imagz yanga lama. Berikut ini saya bagikan cara merubah format timestamp mirip versi terbaru Median UI.

Cara Membuat Tampilan Timstamp Mirip Median UI 1.7

Penting! Jangan lupa Backup template Kalian sebelum melakukan peng-editan HTML. Jika sudah mari kita lanjutkan.

Step 1 : Silakan masuk ke Dashboard Blogger Kalian. Kemudian pilih Theme lalu Edit HTML

Step 2 : Silahkan cari kode berikut ini. Untuk mempermudah gunakan CTRL + F dan masukan kode <b:include cond='data:view.isMultipleItems and !data:posts.empty' name='postPagination'/> yang posisinya berada didalam Widget Blog1.

Jika sudah ketemu, berikutnya silahkan pastekan script TimeAgo berikut ini tepat dibawahnya.

<b:loop index='b' values='data:posts' var='post'>
	<b:if cond='data:b == 0'>
		<b:if cond='(data:widgets.Blog.first.allBylineItems.timestamp.label == &quot;timeAgo&quot; or data:widgets.Blog.first.allBylineItems.timestamp.label == &quot;Update and timeAgo&quot;) or (data:post.allowComments and data:post.numberOfComments &gt; 0)'>
			<script>/*<![CDATA[*/ /* Javascript TimeAgo, source: coderwall.com/p/uub3pw/javascript-timeago-func-e-g-8-hours-ago */ (function timeAgo(selector) { var templates = {prefix: "", suffix: " ago", seconds: "few seconds", minute: "a minute", minutes: "%d minutes", hour: "an hour", hours: "%d hours", day: "a day", days: "%d days", month: "a month", months: "%d months", year: "a year", years: "%d years" }; var template = function (t, n) { return templates[t] && templates[t].replace(/%d/i, Math.abs(Math.round(n))); }; var timer = function (time) { if (!time) return; time = time.replace(/\.\d+/, ""); time = time.replace(/-/, "/").replace(/-/, "/"); time = time.replace(/T/, " ").replace(/Z/, " UTC"); time = time.replace(/([\+\-]\d\d)\:?(\d\d)/, " $1$2"); time = new Date(time * 1000 || time); var now = new Date(); var seconds = ((now.getTime() - time) * .001) >> 0; var minutes = seconds / 60; var hours = minutes / 60; var days = hours / 24; var years = days / 365; return templates.prefix + (seconds < 45 && template("seconds", seconds) || seconds < 90 && template("minute", 1) || minutes < 45 && template("minutes", minutes) || minutes < 90 && template("hour", 1) || hours < 24 && template("hours", hours) || hours < 42 && template("day", 1) || days < 30 && template("days", days) || days < 45 && template("month", 1) || days < 365 && template("months", days / 30) || years < 1.5 && template("year", 1) || template("years", years)) + templates.suffix; }; var elements = document.getElementsByClassName("timeAgo"); for (var i in elements) { var $this = elements[i]; if (typeof $this === "object") { $this.innerHTML = timer($this.getAttribute("datetime") || $this.getAttribute("data-time")); }; }; setTimeout(timeAgo, 1000); })(); /*]]>*/</script>
		</b:if>
	</b:if>
</b:loop>

Step 3 : Silahkan kalian cari dan tambahkan class timeAgo pada element time yang akan tampil di index post dan Featured Post. Untuk penempatan kodenya silahkan kalian sesuaikan seperti dibawah ini.

<b:includable id='postTimestampPublish'>
	<time class='aTtmp pTtmp pbl timeAgo' data-write='Published' expr:data-text='format(data:post.date, &quot;dd MMMM YYYY&quot;)' expr:datetime='data:post.date.iso8601' expr:title='&quot;Published: &quot; + data:post.date format &quot;MMMM d, y&quot;'/>
	</b:includable>

<b:includable id='postTimestamps'>
	<b:if cond='data:post.lastUpdated != data:post.date'>
		<time class='aTtmp pTtmp upd timeAgo' data-date='Updated : ' data-write='Updated' expr:data-text='format(data:post.lastUpdated, &quot;dd MMM y&quot;)' expr:data-time='format(data:post.lastUpdated, &quot;MMM d, y&quot;)' expr:datetime='data:post.lastUpdated.iso8601' expr:title='&quot;Last updated: &quot; + data:post.lastUpdated format &quot;MMMM d, y&quot;'/>
		<b:else/>
		<time class='aTtmp pTtmp pbl timeAgo' data-date='Published : ' data-write='Published' expr:data-text='format(data:post.date, &quot;dd MMM y&quot;)' expr:data-time='format(data:post.lastUpdated, &quot;MMM d, y&quot;)' expr:datetime='data:post.date.iso8601' expr:title='&quot;Published: &quot; + data:post.date format &quot;MMMM d, y&quot;'/>
		</b:if>
	</b:includable>

Jika kalian preview timestamp sudah tampil, termasuk format yang lama. Maka perlu dihilangkan salah satu.

Step 4 : Gunakan langkah yang sama pada Step 2 dan temukan class .pTtmp::after,.pJmp::before,.iTtmp::before. kemudian hapus atau cukup dikomentari saja seperti berikut ini.

 /*.pTtmp::after,.pJmp::before,.iTtmp::before{content:attr(data-text);display:block;line-height:18px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}*/

Gunakan syntax /* diawal dan */ diakhir kode untuk mengomentari atau me-non-aktifkan.

Step 5 : Lagkah terakhir jika semua tahapan diatas sudah dilakukan, silahkan Simpan tema untuk melihat hasilnya.

Selesai sudah tutorial singkat membuat tampilan Timestamp mirip Median UI 1.7. Semoga bermanfaat.