Redesign Template Blogger JetTheme
Blog Buttatoa | Redesign Template JetTheme - JetTheme adalah penyedia layanan template atau tema blogger premium untuk membantu kalian mewujudkan tampilan web yang lebih profesional. Seperti namanya, JetTheme menciptakan tema dengan performa seperti Jet, karena menggunakan code yang bersih, simple, dan magic.
Template JeTheme tersedia dengan versi gratis tanpa harus mengeluarkan biaya sedikitpun dan bebas copyright, yang bisa kalian unduh. Terdapat juga versi Premium, yang menyediakan versi Newspaper untuk kebutuhan menampilkan post dengan lebih banyak serta beberapa fitur yang tentunya tidak ada tersedia dalam versi gratisnya.
{tocify} $title={Table of Contents}
Template JetTheme sudah memiliki tampilan, fitur, dan kecepatan yang sangat memuaskan, namun saya pribadi masih ingin menambahkan beberapa fitur agar makin terlihat lebih menarik dan keren dari sebelumnya. Untuk itu, saya melakukan beberapa redesign pada template ini, yang dapat kalian lihat dibawah. Jika kalian pun ikut tertarik, silahkan mencobanya juga.
Menambahkan Fitur Syntax Highlighter (pre code)
Syntax Highlighter adalah fitur editor teks yang digunakan untuk pemrograman, script, atau markup, seperti kode HTML, kode Macro dan lain-lain. Fitur ini menampilkan teks, terutama kode sumber, dalam berbagai warna dan font sesuai dengan kategori istilah.
Fitur ini memfasilitasi penulisan dalam bahasa terstruktur seperti bahasa pemrograman atau bahasa markup karena kesalahan struktur dan sintaks berbeda secara visual. Fitur ini juga digunakan dalam banyak konteks terkait pemrograman (seperti manual pemrograman), baik dalam bentuk buku berwarna atau website online untuk memudahkan pemahaman potongan kode bagi pembaca.
Berikut tampilan Syntax Highlighter dafault JetTheme (tanpa border left dan fitur double klik):
.section-center{
position:fixed;
width:100%;
height:100%;
top:50%;
left:50%;
display:none;
overflow:hidden;
z-index:5;
pointer-events:none;
box-shadow:0 0 50px 5px rgba(255,148,0,.1);
transform:translate(-50%,-50%)}
.section-center{-webkit-transition:all 500ms linear;transition:all 500ms linear}
.shooting-star{z-index:2;width:1px;height:50px;border-bottom-left-radius:50%;border-bottom-right-radius:50%;position:absolute;top:0;left:-70px;background:linear-gradient(to bottom,rgba(255,255,255,0),white);animation:animShootingStar 6s linear infinite;-webkit-transition:all 2000ms linear;transition:all 2000ms linear}
.shooting-star-2{z-index:2;width:1px;height:50px;border-bottom-left-radius:50%;border-bottom-right-radius:50%;position:absolute;top:0;left:200px;background:linear-gradient(to bottom,rgba(255,255,255,0),white);animation:animShootingStar-2 9s linear infinite;-webkit-transition:all 2000ms linear;transition:all 2000ms linear}
.star{z-index:2;position:absolute;top:185px;left:25px;background-image:url('https://ivang-design.com//svg-load/air/star.png');background-size:15px 15px;width:15px;height:15px;opacity:0.4;animation:starShine 3.5s linear infinite;-webkit-transition:all 1200ms linear;transition:all 1200ms linear}
.star.snd{top:100px;left:310px;animation-delay:1s}
.star.trd{top:130px;left:100px;animation-delay:1.4s}
.star.fth{top:190px;left:200px;animation-delay:1.8s}
.star.fith{top:85px;left:1080px;animation-delay:2.2s}
@keyframes animShootingStar{from{transform:translateY(0px) translateX(0px) rotate(-45deg);opacity:1;height:5px}to{transform:translateY(1280px) translateX(1280px) rotate(-45deg);opacity:1;height:800px}}
@keyframes animShootingStar-2{from{transform:translateY(0px) translateX(0px) rotate(-45deg);opacity:1;height:5px}to{transform:translateY(1920px) translateX(1920px) rotate(-45deg);opacity:1;height:800px}}
@keyframes starShine{0%{transform:scale(0.3) rotate(0deg);opacity:0.4}25%{transform:scale(1) rotate(360deg);opacity:1}50%{transform:scale(0.3) rotate(720deg);opacity:0.4}100%{transform:scale(0.3) rotate(0deg);opacity:0.4}}
Dan yang dibawah ini, adalah tampilan Syntax Highlighter setelah di desain ulang. Manakah yang menurut kalian memiliki tampilan yang lebih menarik?.
.section-center{
position:fixed;
width:100%;
height:100%;
top:50%;
left:50%;
display:none;
overflow:hidden;
z-index:5;
pointer-events:none;
box-shadow:0 0 50px 5px rgba(255,148,0,.1);
transform:translate(-50%,-50%)}
.section-center{-webkit-transition:all 500ms linear;transition:all 500ms linear}
.shooting-star{z-index:2;width:1px;height:50px;border-bottom-left-radius:50%;border-bottom-right-radius:50%;position:absolute;top:0;left:-70px;background:linear-gradient(to bottom,rgba(255,255,255,0),white);animation:animShootingStar 6s linear infinite;-webkit-transition:all 2000ms linear;transition:all 2000ms linear}
.shooting-star-2{z-index:2;width:1px;height:50px;border-bottom-left-radius:50%;border-bottom-right-radius:50%;position:absolute;top:0;left:200px;background:linear-gradient(to bottom,rgba(255,255,255,0),white);animation:animShootingStar-2 9s linear infinite;-webkit-transition:all 2000ms linear;transition:all 2000ms linear}
.star{z-index:2;position:absolute;top:185px;left:25px;background-image:url('https://ivang-design.com//svg-load/air/star.png');background-size:15px 15px;width:15px;height:15px;opacity:0.4;animation:starShine 3.5s linear infinite;-webkit-transition:all 1200ms linear;transition:all 1200ms linear}
.star.snd{top:100px;left:310px;animation-delay:1s}
.star.trd{top:130px;left:100px;animation-delay:1.4s}
.star.fth{top:190px;left:200px;animation-delay:1.8s}
.star.fith{top:85px;left:1080px;animation-delay:2.2s}
@keyframes animShootingStar{from{transform:translateY(0px) translateX(0px) rotate(-45deg);opacity:1;height:5px}to{transform:translateY(1280px) translateX(1280px) rotate(-45deg);opacity:1;height:800px}}
@keyframes animShootingStar-2{from{transform:translateY(0px) translateX(0px) rotate(-45deg);opacity:1;height:5px}to{transform:translateY(1920px) translateX(1920px) rotate(-45deg);opacity:1;height:800px}}
@keyframes starShine{0%{transform:scale(0.3) rotate(0deg);opacity:0.4}25%{transform:scale(1) rotate(360deg);opacity:1}50%{transform:scale(0.3) rotate(720deg);opacity:0.4}100%{transform:scale(0.3) rotate(0deg);opacity:0.4}}
Kali ini, redesign Syntax Highlighter yang dilakukan adalah mengubah jenis, ukuran dan warna font, dan membatasi tinggi kolom sehingga kode tidak terlihat terlalu kepanjangan ketika menulis kode script yang banyak dan tersusun kebawah.
Agar tetap menampilkan script yang panjang kebawah secara keseluruhan, akan ditambahkan scrooll gulir drop down dan left right. Selain itu menambahkan fitur lain seperti "enable copy" untuk kode syntax tersebut, sehingga bila kalian menambahkan fitur Anti Copy Paste pada blog kalian, kode syntax tersebut dikecualikan dan tetap dapat dicopy paste. Jika kalian tertarik dengan redesign kode Syntax Highlighter tersebut diatas kalian bisa membuatnya dengan cara sebagai berikut:
1. Cari kode
pre {
background-color: var(--jt-bg-light);
margin-bottom: 1rem;
padding: 1rem;
font-size: 0.75rem;
white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none;
}
pre code {
color: #f67938;
font-size: 13px;
max-height:250px; line-height:1.5em; display:block; background:none; border:none; font-family:'source code pro',menlo,consolas,monaco,monospace; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text
}2. Jika kalian ingin menambahkan fitur seleksi dan copy text/kode dengan cara double klik, tambahkan script dibawah ini yang berfungsi sebagai text petunjuk untuk melakukan double klik dan letakkan tepat dibawah kode Syntax Highlighter diatas tadi.
pre:before{position: absolute;content:'Double click to select & copy';
background: linear-gradient(to bottom, #0033cc 0%, #993300 100%);
display:blok;top:10px;right:10px;color:#fff;font-family:Google Sans;
font-size:80%;text-align:center;width:160px;border-radius:22px;
padding:6px;line-height:1;visibility:hidden;}
pre:hover:before{visibility:visible; transition:all .3s}Agar fitur double klik tersebut berfungsi, copy script dibawah dan pastekan diatas atau sebelum kode
<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
var pres = document.querySelectorAll('pre');
for (var i = 0; i < pres.length; i++) {
pres[i].addEventListener("dblclick", function () {
var selection = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
document.execCommand("copy");
alert("Teks Berhasil Disalin Ke Clipboard.");
}, false);
}
//]]>
</script>3. Untuk menerapkan kode diatas kedalam artikel, kalian ubah masuk ke mode "Tampilan HTML" saat menulis. Copy dan pastekan script dibawah, lalu kalian bisa memparse kode yang ingin dimasukkan tersebut terlebih dahulu, kemudian mengganti teks (tulis script/kode disini).
<pre><code>(tulis script/kode disini)</code></pre>Menambahkan Fitur Keyboard Input Element (tag kbd)
Fitur Keyboard Input Element ini digunakan untuk menyertakan teks apa pun yang mewakili input keyboard. Tag <kbd> mewakili rentang teks sebaris yang menunjukkan input dalam bentuk teks dari keyboard, input suara atau entri teks lainnya oleh keyboard.
Disini, saya menambahkan fitur ini dengan tampilan yang berbeda dengan teks lainnya sehingga jelas menunjukkan tag kode tersebut. Selain itu menambahkan fitur seleksi dan copy teks menggunakan double klik sehingga memudahkan untuk mencopy text untuk melakukan pencarian kode saat edit HTML tema.
Fitur yang lain adalah menambahkan fitur enable copy untuk tag <kbd> tersebut, sehingga bila kalian menambahkan fitur Anti Copy Paste pada blog kalian, tag <kbd> tersebut dikecualikan dan tetap dapat dicopy paste.
Untuk membuat fitur tag <kbd> ini lebih menarik dan keren pada template JetTheme ini, kalian bisa redesign ulang dengan cara:
1. Copy kode CSS di bawah dan pastekan diatas kode
/* CSS FOR KBD */
kbd{position:relative;background-color: var(--bs-body-bg);color:var(--bs-body-color);font-size: 13px; font-weight:bold; border:1px solid #f46013;border-radius:10px;box-shadow:0 0 3px #3367D6;}
kbd:hover{color:#0000FF;box-shadow:0 0 3px #0000FF;}
kbd:before{position: absolute;content: 'Double click to select & copy';background: linear-gradient(to bottom, #0033cc 0%, #993300 100%);color: #fff;font-family: Google Sans;font-size: 80%;text-align: center;width: 160px;border-radius: 22px;left: 0;bottom: 25px;display: table;padding: 6px;line-height: 1;visibility: hidden;}
kbd:hover:before{visibility:visible; transition:all .3s}2. Copy script HTML di bawah dan pastekan diatas kode
Catatan : Perhatikan kode yang berwarna dan ditebalkan. Setelah menambahkannya, kode tersebut akan menjadi seperti dibawah ini:
<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
var pres = document.querySelectorAll('pre,kbd');
for (var i = 0; i < pres.length; i++) {
pres[i].addEventListener("dblclick", function () {
var selection = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
document.execCommand("copy");
alert("Teks Berhasil Disalin Ke Clipboard.");
}, false);
}
//]]>
</script>3. Untuk menerapkan kode diatas kedalam artikel, kalian ubah masuk ke mode "Tampilan HTML" saat menulis. Copy dan pastekan script dibawah, lalu kalian bisa memparse kode yang ingin dimasukkan tersebut terlebih dahulu, kemudian mengganti teks (tulis script/kode disini).
<kbd><(tulis script/kode disini)</kbd>Menampilkan First Image Artikel Diatas Judul
First Image adalah gambar pertama yang dibuat didalam artikel. Fitur yang ditambahkan kali ini yaitu menempatkan atau menampilkan first image tersebut agar berada di atas judul artikel. Caranya cukup mudah, kalian tinggal ikuti langkah-langkah dibawah ini:
1. Copy kode CSS di bawah dan pastekan diatas kode
/* First Image */
.img-post {
width:92%;
height:auto;
margin:0 auto;
padding:0;
border-radius:10px;
margin-bottom:15px;
position:center;
}
.img-post img {
width:92%;
border-radius:10px;
max-width:100%;
height:auto;
max-height:405px;
margin:0;
}
@media screen and (max-width: 480px){.img-post {width:100%;}}
@media screen and (max-width: 480px){.img-post img {width:100%;}}2. Cari kode
<b:if cond='data:view.isPost'><div class='img-post'>
<img class='first-image' expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl,675)' expr:title='data:post.title'/>
</div></b:if>3. Copy script HTML di bawah dan pastekan diatas kode
<b:if cond='data:view.isPost'><div class='img-post'>
<img class='first-image' expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl,675)' expr:title='data:post.title'/>
</div></b:if>Membuat Halaman Error 404 Page Not Found
Error 404 Page Not Found👀 adalah kode kesalahan yang muncul di website yang menginformasikan kepada pemilik web, pengunjung dan robot perayap bahwa URL tautan yang dituju tersebut rusak atau tidak mengarah ke halaman yang valid. Kesalahan tersebut bisa terjadi akibat kesalahan penulisan tautan, atau konten pada tautan tersebut sudah di hapus ataupun di direct ke tautan yang lain.
Blog Buttatoa ini, menggunakan template template JetTheme dan melihat tampilan halaman error 404 masih menggunakan default dari Blogger. Untuk itu ada keinginan untuk meredesign dengan membuat tampilan halaman Error 404 sendiri, biar sedikit terlihat keren.
Gambar diatas merupakan srenshoot tampilan halaman error 404 default JetTheme dan akan dimodifikasi dengan membuat halaman tersendiri, dimana cara membuatnya sebagai berikut:
1. Copy script dibawah dan pastekan di bagian atas atau sebelum
<b:if cond='data:view.isError'><style>
#main, #header, #sidebar, #footer, .blogbutttoaToTop {display:none}
body,html {overflow:hidden; margin:0; padding:0; width:100%; min-height:100vh}
body {background:var(--jt-bg-light); color:#1d2129}
#blogbuttatoa404 {background:hsl(210, 11%, 15%); text-align:center; margin:auto; font-weight:700; font-size:45px; position:fixed; width:100%; height:100%; line-height:1.25em; z-index:9999;}
#blogbuttatoa404 #error-text {position:relative; font-size:40px; color:#FF8C00; top:50%; right:50%; transform:translate(50%,-50%);}
#blogbuttatoa404 #error-text a {color:#888; text-decoration:none}
#blogbuttatoa404 #error-text p {margin:0!important; letter-spacing:.5px;padding:20px}
#blogbuttatoa404 #error-text span {color:#008c5f;font-size:100px;}
#blogbuttatoa404 #error-text a.back {background:#008c5f;color:#00008B;padding:10px 20px;font-size:20px;border-radius:50px;border:double #fff;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);transition:all 0.5s ease-out;}
#blogbuttatoa404 #error-text a.back:hover {background:#444;color:#fff;border:double #eceeee;}
#blogbuttatoa404 #error-text a.back:active {-webkit-transform:scale(0.9);-moz-transform:scale(0.9);transform:scale(0.9);background:#333;color:#fff;border:double #eceeee;}
#blogbuttatoa404 #error-text #copyright {font-size:16px;position:inherit;top:150px}
#blogbuttatoa404 #error-text #copyright a {color:#008c5f}
@media only screen and (max-width:640px){
#blogbuttatoa404 #error-text {font-size:20px;}
#blogbuttatoa404 #error-text span {font-size:60px;}
#blogbuttatoa404 #error-text a.back {padding:5px 10px;font-size:15px;}
#blogbuttatoa404 #error-text a.back:hover, #blogbuttatoa404 #error-text a.back:active {border:0;}}
</style></b:if> 2. Copy script dibawah dan pastekan di bagian atas atau sebelum
<b:if cond='data:view.isError'>
<div id='blogbuttatoa404'>
<div id='error-text'>
<span>Error 404</span>
<p>HALAMAN TIDAK DITEMUKAN!</p>
<p><a class='back' expr:title='data:blog.title' href='/'>Kembali Kehalaman Beranda</a></p>
<div id='copyright'>
<a expr:title='data:blog.title' href='/'><data:blog.title/></a> ©<script>document.write(new Date().getFullYear())</script>. Redesign JetTheme
</div>
</div>
</div>
</b:if>Nah, membuat halaman Error 404 Not Found kreasi sendiri telah selesai. Cukup mudah bukan, dan gambar dibawah adalah hasil screenshootnya.
Nah, itulah beberapa redesign template JetTheme yang saya lakukan, mulai dari mengubah dan menambah desain pada fitur Syntax Highlighter (<Pre>), fitur Keyboard Input Element (<kbd>), menampilkan First Image artikel diatas judul, dan membuat Halaman Error 404 Page Not Found. Untuk redesign fitur lainnya kalian bisa lihat di Label Redesign Template👀. Semoga bermanfaat, Wassalam.
Post a Comment for "Redesign Template Blogger JetTheme"