Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

3
Tgl. 02 Juli 2012

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.

White Purple Mobile Blog Themes
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://lh3.googleusercontent.com/-WWBX-oc32Ek/T_E0xphbybI/AAAAAAAAAOg/oPxdPIBKvPc/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://lh6.googleusercontent.com/-H-0CmGKOwSg/T_GubudWV2I/AAAAAAAAAPI/SYKtH9zZlXA/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://lh3.googleusercontent.com/-I7lL9DKkgic/T_E0xfqEPSI/AAAAAAAAAOc/6K9jzE2AWCg/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://lh3.googleusercontent.com/-I7lL9DKkgic/T_E0xfqEPSI/AAAAAAAAAOc/6K9jzE2AWCg/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://lh4.googleusercontent.com/-jq-dmSwuW7Y/T_E0yX51qJI/AAAAAAAAAOo/_ixSARhY1sI/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.


Katagori: ,
Silakan klik di sini untuk mengeposkan komentar Anda. Jika Anda ingin membaca artikel lain yang terdapat pada blog ini, maka dapat Anda lakukan dengan cara membuka laman daftar isi. Catatan: Komentar balasan hanya diprioritaskan untuk pertanyaan dan atau pernyataan yang diposkan dengan memakai formulir komentar Blogger.
Admin
Terdapat 3 komentar pada artikel ini ▶
04/07/12 01.39 O

Hebat :D

Saya baru tahu ternyata template buat versi mobile bisa diganti juga tho? XD (gubraaakk)

Anonim
04/07/12 02.11 O

@vikristBisa Sob. Dengan melakukan kustomisasi CSS, maka desain tampilan blog versi seluler juga bisa kita modifikasi seperti halnya desain tampilan blog versi web.

04/07/12 10.39 O

Atas komentar sobat di laman kritik dan saran, saya hanya bisa mengatakan sama-sama saja karena saya tidak bisa mengatakan apa-apa lagi selain itu.
Dan Blog sobat sudah dapat diakses kembali.
Trims dan Salam.

How To ▶
Education ▶
SEO ▶
Other Internet ▶
Programming ▶
Tutorial ▶
DP & Story ▶
Tips & Trick ▶

o

  • .Ragam Tumbuhan
  • .Unik & Langka
  • .Aneka Buah
  • .Produk Sederhana
  • .Karya Seni
  • .Tempat Wisata
  • .Ragam Kegiatan
  • .Aneka Bunga
  • .Hewan & Serangga
GALERI
KIRIM MASUKAN
E L T E L U
Semar Bingung's Weblog