White Purple Themes Untuk Desain Tampilan Halaman Blog Versi Mobile

Berikut ini adalah kode CSS yang dapat Anda gunakan untuk mengubah desain tampilan halaman blog versi seluler yang Anda kelola.

/*--------------------------------------------------------------
Kustomisasi Desain Halaman Blogspot Seluler
Tema: White Purple
Oleh: Semar Bingung
Blog: http://eltelu.blogspot.com/
--------------------------------------------------------------*/

html body.mobile {
  height: auto; width: auto;
}

html body.mobile {
  background-size: 210px;
  min-height: 480px; min-width: 210px;
}

.mobile .body-fauxcolumn-outer {
  background: transparent none repeat scroll top left;
}

.mobile .content-outer {
  font-size: 100%;
}

html .mobile .main-inner .date-outer,
html .mobile .Attribution, .mobile .comments,
.mobile .comments-content .comment-thread,
.mobile .comments .comment-block {
  padding: 2px;
}

.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(138, 77, 153);
}

/* Judul Halaman
----------------------------*/
html .mobile .header-outer {
  margin-bottom: 0px;
  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglDBpZc-rrZp7sU_e7YZACdXUmQ7G9DHZpmhscRBimGVT4ICXSuKMbzsXvXX4yF1WnuPtW-qeW9Fvo0eAaqxuW0dmVp1Obn76wS1MT1yMowsqDOyS6aOcxIXxOezveM2Mad_Ab0vPvF68/s800/JudulBlog.png') repeat-x scroll left bottom rgb(138, 77, 153);
  text-shadow: none; padding: 2px; border: none;
}

html .mobile .header-inner .header .titlewrapper, 
html .mobile .header-inner .header .descriptionwrapper {
  margin: 0px; padding: 0px; text-align: justify;
}

html .mobile .Header h1 {
  font-size: 220%;   text-shadow: none;
  margin: 0px;  padding: 0px;
}

html .mobile .Header h1 a {
  color: #ffffff;
}

html .mobile .Header .description {
  color: #ffffff;
}


/* Menu
----------------------------*/
.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;
  padding-left-value: 2px; padding-right-value: 2px;
  text-align: left; border: none;
  border-radius: 0px;
  background:  url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpsQ3ihdiaF0C46IRogPtJOov-Z2GlZ2PvZjOyFEBOrkdXf2DlUc5HnKTNSMr4hVJtsDJewPCX5Nooie6sf7sUpAwAwrX2L8HUHvAIhAknqKPQK7TuYBs9UTnPBhjY8rRnw9BcKbwbqYQ/s800/Menu.png') repeat-x scroll left bottom rgb(255, 255, 255);
}

.mobile .tabs-inner .widget a {
  color: #000000;
}


/* Judul Widget
----------------------------*/
.mobile-site-widget-title {
  border-top: 1px solid rgb(59, 89, 152);
  height: auto; overflow: hidden;
  padding: 4px; padding-bottom: 0px;
  text-align: center; width: auto;
  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTFPGdGjgkF-SRSk8U_xk857EBd26eYOdEsULLy7tmelUSf2vy6Z_KtGnD8fCj7jcTw6nOIOn_BzULGmhKBhOT_nqp-BqiyuLVt_aa2Th4ZvyLQ6laqkXRioRbeVwYK8gokRGvtfw0Gk0/s800/JudulWidget.png') repeat-x scroll left bottom rgb(152, 173, 198);
}

/* Area Widget
----------------------------*/
.mobile-site-widget-area {
  width: auto; height: auto;
  padding: 2px; padding-bottom: 0px;
  text-align: center; overflow: hidden;
  border-top: 1px solid;
  border-color: rgb(226, 200, 34);
  background: rgb(239, 242, 253);
}

/* Area Posting Utama
----------------------------*/
html .main-outer {
  margin: 0px;
}

html #blog-pager {
  padding: 0px; margin: 0px;
}

html .mobile .blog-pager {
  border-bottom: none;
  background: transparent none repeat scroll top center;
  margin-bottom: 0px; margin-top: 0px;
}


/* Area Artikel
----------------------------*/
html .mobile .mobile-date-outer{
  background-color: #ffffff;
}

.mobile .date-outer {
  background-color: #ffffff;
  border-top: solid 1px #777777;
}

.mobile-index-title {
  width: 100%;
}

.mobile-index-contents {
  color: #000000; width: 100%;
}

.mobile-bingkai-judul {
  background-color: rgb(236, 239, 245);
  border: 1px solid #cccccc;
  height: auto; margin: 0px;
  overflow: hidden; padding: 2px;
  width: 99,99%; text-align: justify;
}

.mobile-baca-selengkapnya {
  padding-top: 4px; text-align: right;
}

.mobile-baca-selengkapnya a {
  display: inline-block; margin: 0;
  padding: 4px 4px; border: 1px solid #cccccc;
  text-align: center; text-decoration: none;
  background: rgb(17, 85, 204);
  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTFPGdGjgkF-SRSk8U_xk857EBd26eYOdEsULLy7tmelUSf2vy6Z_KtGnD8fCj7jcTw6nOIOn_BzULGmhKBhOT_nqp-BqiyuLVt_aa2Th4ZvyLQ6laqkXRioRbeVwYK8gokRGvtfw0Gk0/s800/JudulWidget.png') repeat-x scroll left bottom rgb(152, 173, 198);
  font: 13px/18px arial;
}

.mobile-baca-selengkapnya a:link,
.mobile-baca-selengkapnya a:visited  {
  color: #ffffff;
}


/* Kolom Kotak Komentar
----------------------------*/
.mobile .comments {
  border: 1px solid rgb(204, 204, 204);
  background-color: rgb(236, 239, 245);
}

.mobile .comments .comments-content .comment {
  margin-bottom: 0px; padding-bottom: 0px;
}

.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;
}

.mobile .comments .avatar-image-container {
  height: 36px;
}

.mobile .comments .comment-block {
  border: 1px solid rgb(204, 204, 204); background-color: #fafafa;
}

html .mobile .comment-form {
  max-width: 100%;
}

.mobile .comment-form {
  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 #444444;
  border-bottom: 1px solid #444444;
  height: auto; overflow: hidden;
  padding: 4px; padding-bottom: 0px;
  text-align: center; width: auto;
  background: url('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 {
  color:$(footer.text.color); border: 1px solid #4f2166;
  background: #4f2166; 
}

.mobile .footer-outer a, 
.mobile .footer-outer a:visited,
.mobile .footer-outer a:hover,
.mobile .footer-outer .widget h2 {
  color: #ffffff;
}

.desainer {
  color: #ffffff; border: 1px solid #4f2166;
  background: #4f2166;  text-align: center;
  padding-top: 2px;
}

.desainer a:link, .desainer a:visited {
  color: #ffffff;
}

Panduan penerapan kode tersebut untuk halaman blog versi seluler, dapat Anda lihat dengan membuka artikel yang berjudul Panduan Cara Mengubah Tema Pada Template Untuk Tampilan Halaman Blog Versi Seluler (Blogger Mobile Themes). Kemudian pada langkah kedelapan, gunakan kode CSS tersebut guna mengatur setelan tema yang akan diterapkan.