ELTELU BLUE – Kode CSS Untuk Desain Tema Tampilan Halaman Blog Versi Seluler

Sobat, apabila dalam artikel sebelumnya yang berjudul “Cara Mengedit Template Untuk Mengubah Tema Tampilan Blog Versi Seluler” serta “MOBILE TEMPLATE - Customize Blogger Mobile Templates” saya telah memperkenalkan teknik kustomisasi template untuk mengubah desain tampilan halaman blog versi mobile dengan tema “White Purple” yang kemudian saya lakukan update untuk kedua artikel tersebut (karena terdapat bug) yaitu dengan menerbitkan artikel dengan judul “[UPDATE] Perbaikan Dan Pembenahan Bug Pada Kode CSS Untuk Template Blog Versi Seluler”, maka berikut ini adalah rangkaian kode CSS yang dapat digunakan untuk mengubah tema halaman (White Purple) yang dihasilkan dari kode CSS dalam kedua artikel yang saya sebutkan di atas.

Tema tampilan halaman yang dihasilkan oleh rangkaian kode CSS dalam artikel ini lebih kurang adalah seperti yang tampak pada gambar di atas (klik pada gambar untuk memperbesar tampilan). Sedangkan untuk melakukan perubahan tema yang dimaksud, maka Anda dapat mengerjakan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’ > ‘Expand Template Widget’.

Kedua, cari dan kemudian ganti seluruh kode CSS yang digunakan pada artikel sebelumnya dengan rangkaian kode CSS di bawah ini.

/*--------------------------------------------------------------
Desain Tampilan Halaman Blog (Blogger/Blogspot) Versi Seluler
Tema: Eltelu Blue
Oleh: Semar Bingung
Blog: ELTELU -:[SEMAR BINGUNG'S WEBLOG]:-
URL : http://eltelu.blogspot.com/
--------------------------------------------------------------*/
/* Mobile
----------------------------------------------- */
html body.mobile {
  color: #000000;
  background: #1f74bf;
  height: auto; width: auto;
  background-size: 210px;
  min-height: 480px; min-width: 210px;
  font: 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
}
.mobile .content-outer {
  font-size: 100%;
}
.mobile .main-inner .date-outer,
.mobile .Attribution, .mobile .comments,
.mobile .comments-content .comment-thread,
.mobile .comments .comment-block {
  padding: 4px;
}
.mobile .header-outer, .mobile .main-outer,
.mobile .post-outer, .mobile .footer-outer {
-moz-border-radius: 0px; -webkit-border-radius: 0px;
  border-radius: 0px; -goog-ms-border-radius: 0px;
}
.mobile .content-outer,
.mobile .main-outer ,
.mobile .post-outer {
  background: inherit; border: none;
  box-shadow: none; margin: 0pt auto;
}
.mobile a:link, .mobile a:visited,
.mobile-link-button a:link, .mobile-link-button a:visited {
  text-decoration:none; color: rgb(48, 77, 151);
  font: 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
}
/* Judul Halaman
----------------------------*/
.mobile .header-outer {
  margin-bottom: 0px;
  background: url("https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih64K1KuC9kOUiPQ_z1XM7cmmeSUBuI2S2_Sxk7qSKClJOtVkdUQQxPkaHYXxGZ1zJLYLA883hfYokJxNBrjxpXJHwNoOlBcLaU85GKBzccdQIQYMD5mn_sc1965KIPVcVbH6wpy2rWS4/s800/Eltelu%2520Blue%2520Header.png") repeat-x scroll left bottom rgb(48, 77, 151);
  text-shadow: none; padding: 2px; border: none;
}
.mobile .header-inner .header .titlewrapper,
.mobile .header-inner .header .descriptionwrapper {
  margin: 0px; padding: 2px; text-align: justify;
}
.mobile .Header h1, .mobile .Header h1 a {
  color: #ffffff;
  font: normal bold 22px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
  text-shadow: none; margin: 0px;  padding: 0px;
}
.mobile .Header .description {
  color: #ffffff;
  font: normal bold 15px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
}
/* Menu Halaman
----------------------------*/
.mobile .tabs-inner .PageList .widget-content {
  width: 100%; height: 100%;
  padding: 0px; margin: 0px;
}
.mobile .tabs-inner .widget ul {
  padding-top: 4px; padding-bottom: 4px;
  text-align: left; border: none;
  border-radius: 0px; height: auto;
  background: url("https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg70h1SyYaj1TTXYFbPMGDc5cHrmJzq39OaAMGVRqKOCPI_sUaxc-XLMXuF7cYhS-aR1veg4toyLu5GaJiejmhuzvwVxkeNLUYItfvmuCHcIphyphenhyphensROO1pQ3dKjMnlSiNzvVBjDeMnsXq3s/s800/Eltelu%2520Blue%2520Menu.png") repeat-x scroll left bottom rgb(255, 255, 255);
}
.mobile .tabs-inner .widget ul li,
.mobile .tabs-inner .widget li {
  border-top: none;
  margin-right: 6px;
}
.mobile .tabs-inner .widget ul li:first-child,
.mobile .tabs-inner .widget li:first-child {
  border-left: medium none;
  margin-left: 0px;
}
.mobile .tabs-inner .widget a {
  color: #000000; margin-left: 0px; padding: 0px;
  font: normal bold 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
}
.mobile .tabs-inner .widget li a,
.mobile .tabs-inner .widget li a:hover,
.mobile .tabs-inner .widget li.selected a,
.mobile .tabs-inner .widget li a:visited,
.mobile .tabs-inner .widget li:first-child a {
  color: #000000;
  margin-right: 0px;
  padding: 0px;
  text-shadow: none;
  text-transform: capitalize;
  border: none;
  background: inherit;
}
/* Judul Widget
----------------------------*/
.mobile-site-widget-title {
  border-top: 1px solid rgb(59, 89, 152);
  height: auto; overflow: hidden; padding-bottom: 1px;
  text-align: center; width: auto;
  font: normal bold 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
  background: url("https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAN3JltzkDQzlH3FEi70Qem7DSss4BQvsKmAmpSCjIP26vtRkdeugo0QAb0DyNCgxkRw8ZYAyc_ayGKXk3YPgveQ6_kCTEamRG_zySlWnhIMb3dawU-AuLzWU468JcK81WbVISOUtSIWU/s800/Eltelu%2520Blue%2520Widget.png") repeat-x scroll left bottom rgb(242, 250, 254);
  color: rgb(39, 38, 39);
}
/* Area Widget
----------------------------*/
.mobile-site-widget-area {
  width: auto; height: auto;
  padding: 2px; padding-bottom: 0px;
  text-align: center; overflow: hidden;
  border-top: 1px solid #444444;
  background: rgb(245, 245, 245);
  font: 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
}
.mobile .widget ul {
  padding: 4px;
  font: normal normal 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
}
.mobile .widget li, .mobile .BlogArchive #ArchiveList ul.flat li {
  list-style: none;
}
.mobile .widget ul li:first-child, .mobile .widget #ArchiveList ul.flat li:first-child {
  border-top: medium none;
}
.mobile .widget ul li, .mobile .widget #ArchiveList ul.flat li {
  border-top: 1px dashed rgba(128, 128, 128, 0.5);
}
/* Area Posting Utama
----------------------------*/
html .main-outer {
  margin: 0px;
}
html #blog-pager {
  padding: 0px; margin: 0px;
}
.mobile .blog-pager {
  border-bottom: none;
  background: transparent none repeat scroll top center;
}
.mobile .mobile-index-comment {
  text-align: right;
}
/* Area Artikel
----------------------------*/
.mobile .date-outer {
  background: rgb(245, 245, 245);
  border-top: solid 1px #777777;
  font: 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
}
.mobile .date-header {
  margin-left: 0px; margin-right: 0px;
  margin-top: 0px; margin-bottom: 1px;
  padding: 0px; border: none;
  text-align: left; text-decoration: none;
  background: inherit; border-radius: 0px;
  box-shadow: none; text-transform: capitalize;
}
.mobile .main-inner h2.date-header {
  color: #000000;
  font: normal normal 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
}
.mobile h3.post-title {
  margin: 0px;
}
.mobile-index-title {
  width: 100%;
}
.mobile-index-contents {
  color: #000000; width: 100%;
}
.mobile-bingkai-judul {
  background-color: rgb(239, 242, 253);
  border: 1px solid #cccccc;
  height: auto; margin: 0px;
  overflow: hidden; padding-left: 2px; padding-right: 2px;
  width: 99,99%; text-align: justify;
}
.mobile-index-title,
.mobile h3.mobile-index-title.entry-title,
.mobile h3.post-title,
.mobile h3.post-title a {
  font: normal bold 15px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
}
#mobile-share-button {
  border: 1px solid rgb(204, 204, 204);
  background-color: rgb(248, 248, 248);
  background-image: -moz-linear-gradient(center top , rgb(255, 255, 255), rgb(222, 222, 222));
  padding: 0px 3px;
}
/* Kolom Kotak Komentar
----------------------------*/
.mobile .comments,
.mobile #comments {
  border: 1px solid rgb(204, 204, 204);
  background: rgb(236, 239, 245);
  padding: 2px;
}
.mobile #comments a {
  color: #134f5c;
}
.mobile .comments .continue {
  border-top: 1px solid rgb(204, 204, 204);
}
.mobile #comments h4, .mobile #comments .comment-author a,
.mobile #comments .comment-timestamp a {
  color: #303030;
}
html .mobile .comments h4 {
font: normal normal 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
  padding: 0px;
}
.mobile .comments .comments-content .comment {
  margin-bottom: 0px; padding-bottom: 0px;
}
.mobile .comments .comments-content .comment-content {
  color: #303030;
}
.mobile .comments .comments-content .comment:first-child {
  padding-top: 0px;
}
.mobile .comments-content .comment-thread,
.mobile .comments .avatar-image-container {
  border: 1px solid rgb(204, 204, 204); background-color: #ffffff;
  margin: 2px 0px;
}
.mobile .comments .avatar-image-container {
  height: 36px;
}
.mobile .comments .comment-block {
  border: 1px solid rgb(204, 204, 204); background: #fafafa;
  margin-left: 44px;
}
.mobile .comment-thread.inline-thread {
  border: 1px solid rgb(204, 204, 204); background: #f3f3f3;
  margin-left: 8px;
}
.mobile .comment-form {
  max-width: 100%;
  text-align: justify;
}
/* Tombol Navigasi
----------------------------*/
html .home-link, html .blog-pager-newer-link, html .blog-pager-older-link {
  height: auto;
}
.mobile #blog-pager-home-link {
  width: 20px;
}
.mobile #blog-pager-newer-link {
  width: 20px;
  margin-left: 0px;
}
.mobile #blog-pager-older-link {
  width: 20px;
  margin-right: 0px;
}
.mobile-link-button {
  height: auto;
}
.mobile-navigation-area {
  border-top: 1px solid rgb(204, 204, 204);
  border-bottom: 1px solid rgb(204, 204, 204);
  height: auto; overflow: hidden;
  padding: 4px; padding-bottom: 0px;
  text-align: center; width: auto;
  background: url('https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo7luARJlgr1qE-eduFA66f8ex9bUshnMZhZbMIyAs9TpdULhyphenhyphenJv1onwoxYdqsnTmeWDSnv2SiweejJ291Gv6AjnqViemC0likDoeE4NJDC7VoQrWsAQGJCooTRJvI6cHqxycutpUzK04/s800/LatarNavigasi.png') repeat-x scroll left bottom rgb(255, 255, 255);
}
/* Area Footer
----------------------------*/
.mobile .footer-outer, .desainer {
  color: #ffffff; 
  border: 1px solid rgb(48, 77, 101);
  background: rgb(48, 77, 101); 
  text-align: center;
  padding-top: 2px;
  font: normal bold 12px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
}
.mobile .footer-outer a,
.mobile .footer-outer a:visited,
.mobile .footer-outer a:hover,
.mobile .footer-outer .widget h2,
.mobile .footer-inner .widget,
.desainer a:link, .desainer a:visited,
.desainer a {
  color: #ffffff; text-transform: capitalize;
  font: normal bold 12px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
}
/* Artikel Terkait Seluler
----------------------------*/
.mobile-related-posts {
  border: 1px solid #bbbb77;
  height: auto; margin: 0px;
  overflow: auto; padding: 2px;
  text-align: justify; width: auto;
  color: #7f4c00;
}
.mobile-related-posts-area {
  border: none; height: auto; margin: 0px;
  overflow: auto; padding: 0px;
  text-align: justify; width: auto;
  color: inherit; background: inherit;
}

Ketiga, cari semua kode <span style='color: #ffffff;'> yang terdapat pada setiap judul daftar artikel terkini. Sebagai gambaran untuk bagian yang dimaksud adalah seperti yang tampak pada contoh rangkaian kode di bawah ini.

<span style='color: #ffffff;'><b>Mobile Blog</b></span>

Apabila telah ditemukan, maka langkah selanjutnya adalah menghapus seluruh kode <span style='color: #ffffff;'> dan </span> yang terdapat dalam rangkaian kode yang dimaksud. Hal ini dilakukan karena warna teks yang digunakan untuk judul artikel terkini telah ditentukan dalam kode CSS yang terdapat pada langkah pertama, sedangkan dalam artikel sebelumnya warna teks untuk judul artikel terkini masih ditentukan pada tiap-tiap bagian.

Keempat, simpan template.

Dengan demikian maka tema desain tampilan halaman versi seluler dari blog Anda akan berubah menjadi “Eltelu Blue” dari tema yang sebelumnya yaitu “White Purple”. Dan untuk melihat hasilnya silakan buka blog yang dimaksud dalam mode tampilan mobile, yaitu dengan menambahkan ?m=1 di belakang URL blog. Sebagai contoh misalnya http://eltelu.blogspot.com/?m=1.

Semoga berguna dan bermanfaat.

Salam.