Rangkaian Kode CSS Untuk Tema Tampilan Halaman Blog Versi Mobile Dengan Warna Hitam Putih

Melanjutkan artikel sebelumnya yang berjudul “ELTELU BLUE – Kode CSS Untuk Desain Tema Tampilan Halaman Blog Versi Seluler”, berikut ini adalah rangkaian kode CSS baru yang dapat digunakan untuk mengubah desain tema tampilan halaman blog versi seluler dengan kombinasi warna seperti yang tampak pada gambar di atas (klik pada gambar untuk memperbesar tampilan). Maksud dan tujuan dari diterbitkannya artikel ini adalah guna memberikan lebih banyak ragam pilihan tema kepada Anda yang telah dan atau akan melakukan kustomisasi template untuk tampilan halaman versi mobile dengan mengacu pada teknik yang diuraikan dalam artikel dengan judul “Cara Mengedit Template Untuk Mengubah Tema Tampilan Blog Versi Seluler” dan “MOBILE TEMPLATE - Customize Blogger Mobile Templates”.

Selanjutnya, untuk menerapkan atau mengimplementasikan kode CSS 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: Hitam Putih
Oleh: Semar Bingung
Blog: ELTELU -:[SEMAR BINGUNG'S WEBLOG]:-
URL : http://eltelu.blogspot.com/
--------------------------------------------------------------*/
/* Mobile
----------------------------------------------- */
html body.mobile {
  color: #000000;
  background: rgb(45, 48, 55);
  height: auto; width: auto;
  background-size: 176px;
  min-height: 480px; min-width: 176px;
  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-link-button a:link  {
  text-decoration:none; color: #751947;
  font: 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
}

.mobile a:visited, .mobile-link-button a:visited {
  color: #91476C;
}

/* Judul Halaman
----------------------------*/
.mobile .header-outer {
  margin-bottom: 0px;
  background-size: 100% 100%;
  background-repeat: repeat-x;
  background-color: rgb(43, 43, 43);
  background-image: url("https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuNIHzhzJLbp3H0pRz3jPO1wGd6g7ve4rNPaP0KOEayOzaRnQy_9sYS9JQ0Tjg_Zlm_UV5W-QQOgwbX612pnVJEIei0aByeALLzQK-6YvxkXw_OCgrdBA8Sp0NnbpMzsfTrwGYDJjGvFo/s800/LatarHeader.png");  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-size: 100% 100%;
  background: url("https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0xpgPjnIWIfiDYcRo_CAXQezOYSZRbA4KLMP8yO_fwTeXHeiUf0p74Yqx56HpSDSRD-FZkZAMgBM7JxalSVaGxloUNAjK6s0TrDQHUcNhawPTpWVQCbuYjLJRpl7tuR6VNLsiVfkbVww/s800/LatarMenu.png") repeat-x rgb(43, 43, 43);
}

.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: #ffffff; 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: #ffffff;
  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: #1F1F00;
  color: #ffffff;
}

/* Area Widget
----------------------------*/
.mobile-site-widget-area {
  width: auto; height: auto;
  padding: 2px; padding-bottom: 0px;
  text-align: center; overflow: hidden;
  border-top: 1px solid rgb(255, 255, 255);
  background: #FAFAFA;
  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: #ffffff;
  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: #F5FFF5;
  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 #111111;
  background: #111111;
  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 tersebut adalah seperti yang tampak pada contoh rangkaian kode di bawah ini.

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

Apabila telah ditemukan, maka hapuslah seluruh kode <span style='color: #ffffff;'> dan </span> yang terdapat dalam rangkaian kode tersebut.

Keempat, simpan template.

Perlu diingat bahwa apabila sebelum ini Anda tidak pernah melakukan kustomisasi template untuk mengubah desain tema tampilan halaman blog versi mobile dengan menggunakan teknik dalam beberapa artikel yang saya sebutkan di atas, maka untuk mengimplementasikan rangkaian kode CSS tersebut, terlebih dulu Anda harus menerapkan teknik kustomisasi template yang diuraikan dalam artikel dengan judul “Cara Mengedit Template Untuk Mengubah Tema Tampilan Blog Versi Seluler” dan “MOBILE TEMPLATE - Customize Blogger Mobile Templates”.

Namun apabila Anda telah melakukan kustomisasi dengan mengacu dan atau menggunakan teknik yang diuraikan dalam kedua artikel tersebut, maka Anda tinggal mengerjakan langkah-langkah di atas secara berurutan. Dan apabila sebelumnya Anda telah mengerjakan langkah yang ketiga, maka langkah ketiga dapat Anda lewati ketika menerapkan kode CSS yang diterbitkan dalam artikel ini.

Semoga berguna serta bermanfaat. Dan apabila mengalami kesulitan dalam mengimplementasikan rangkaian kode CSS tersebut, silakan sampaikan pertanyaan mengenai kesulitan yang Anda alami dengan cara mengeposkan komentar dalam artikel ini.

Salam.