Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

6
Tgl. 16 September 2012

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 “ M...

Eltelu Blue Mobile Blog Themes
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://lh3.googleusercontent.com/-UHOskdFUG6k/UFUJw4AejVI/AAAAAAAAAl8/21PZQeqSGlA/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://lh4.googleusercontent.com/-d_y-wg7oAqs/UFUJxLUGtCI/AAAAAAAAAmA/PsRDPfPGepo/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://lh4.googleusercontent.com/-RKFw4y8bjiA/UFUJxYdZB3I/AAAAAAAAAmE/XqMPSXg_wX4/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://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, .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.



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 6 komentar pada artikel ini ▶
17/09/12 00.21 O

Nyimak aja sob alx Masih setia dgn Color CSS yg diberikan pertama hehehehe

17/09/12 01.12 O

Sob tampilan versi selulernya bagus sekali...saya salut...sudah saya kunjungi blog lain tentang pembahasan versi selular tidak ada sama skli yang membahas tentang hal ini sob, walaupun ada cuma cara mengaktifkan tampilan mobile yang di bahas...

17/09/12 12.57 O

@MharxSilakan Sob. :)

Jadi maksud saya menerbitkan artikel adalah untuk memberikan ragam pilihan tema, karena belum tentu semua cocok dengan tema yang saya berikan sebelumna.

Dan InsyaAllah ke depan saya juga akan berusaha untuk memberikan berbagai pilihan tema yang lainnya.

17/09/12 13.04 O

@Kraeng FranciscoTerimakasih Sobat.

Harapan saya semoga dengan berbagai artikel yang saya terbitkan, khususnya adalah mengenai kustomisasi halaman versi seluler pada blog ini nantinya dapat mendorong Sobat Blogger yang lain agar juga memperhatikan optimasi halaman blog versi seluler yang dikelola.

Karena menurut sepengetahuan saya, optimasi yang selama ini dilakukan oleh Sobat Blogger rata-rata hanyalah sebatas optimasi untuk tampilan halaman blog versi web saja.

23/09/12 13.06 O

Nice tutor gan (y)

24/09/12 11.48 O

@willy adrian pTerimakasih Sobat. Dan terimakasih atas kunjungan serta komentar yang diposkan dalam artikel ini.

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