Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

16
Tgl. 06 Oktober 2012

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

Blogger Mobile Themes - Eltelu 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://lh3.googleusercontent.com/-l1xTiWMsp60/UFvGwk61k1I/AAAAAAAAApw/tW7m_INONxs/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://lh3.googleusercontent.com/-18sLbgLjRu4/UFvGwjSVPMI/AAAAAAAAAp0/zZvt1qe8cDg/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://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 #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.


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 16 komentar pada artikel ini ▶
08/10/12 11.47 O

Tampilan versi selulernya bagus sekali sobat, tidak bosan lihatnya...terutama blog ini makin hari semakin ada perkembangan baru. Sukses sobat

09/10/12 00.16 O

@Kraeng FranciscoTerimakasih Sobat.

Jujur saja saya memang seringkali melakukan pembenahan pada blog ini. Dan ini semua tentu saja adalah untuk kemudahan akses dan kenyamaan para pembaca. :)

02/01/13 12.15 O

wah, keren nih sob ...

09/01/13 00.32 O

@sayang suhendarTerimakasih Sob.

22/01/13 02.17 O

permisi mas,mau minta pencerahan buat template tampilan hanfphone nie.
dr kemaren saya mencoba bolak balik serta mengulang petunjuk yang mas ajarin tp koq ga bz berfungsi ya di blog saya?

apakah dikarenakan template saya bukan template standar dari blogger?

padahal saya pengen banget bisa mempunyai template keren versi handphone kaya punya mas, karena kl cm tampilan handphone yg biasa banyak temen" saya yg mengeluh dlam mencari artikel yg di cari.

mohon petunjuk na ya, terimakasih...

22/01/13 12.43 O

@Kk jRBetul sekali Sobat. Perlu diketahui bahwasanya teknik kustomisasi template untuk mengubah tema tampilan halaman versi seluler yang telah saya uraikan memang hanya dapat diterapkan atau diimplementasikan pada template standar Blogger.

Sehingga bila template yang Sobat gunakan merupakan template dari pihak ketiga (kustom template), maka diperlukan teknik khusus untuk melakukan kustomisasi (sesuai dengan template yang dipakai).

Semoga dapat membantu. :)

26/01/13 00.48 O

@AYAHE MELAoh,jd bgtu ya mas..
oh iya,,
seumpama saya minta bantuan nya mas untuk mengedit tampilan template blog saya agar pada versi mobile bisa terlihat lebih menarik tanpa mengubah template yg saya pnya saat ini, apakah kiranya mas bisa membantu?

26/01/13 10.07 O

@Kk jRBisa saja Sob.

Namun karena tidak seluruh waktu saya untuk ngeblog atau di depan komputer, maka bisa jadi saya tidak dapat menyelesaikannya dengan waktu yang singkat.

21/03/13 14.14 O

klo teample nya trdapt d menu apa gan...ma'af sya bru pemula

28/03/13 22.32 O

@kukuh kurniawanHwaduh, maksudnya bagaimana ya Sob? Sayang sekali pertanyaan Sobat agak kurang jelas maksudnya, sehingga saya pun akhirnya menjadi kesulitan untuk memberikan jawabannya.

24/06/13 13.08 O

mas, ganti warna tema x gimana? :D
background seluruh, bg post & gadget jg judul widget, kmarin udh nyoba nyari" script x, tp byk bgt kode body bacground, jd bingung yg mana yg msti dganti. mksh

24/06/13 13.10 O

code bg body seluruh, judul widget, ma isi post/widget normal ma mobile yg mana mas? mau ganti warna tema. makasih

kemarin udh nyari tp bingung, byk bgt code warna x c :D

26/06/13 06.17 O

@Sugiman AlkaromahAgar lebih mudah untuk mengetahui class (bagian) mana yang mesti diubah, coba pakai fasilitas 'Inspect element' (firefox) dulu Sob.

Dengan begitu maka Sobat tinggal mengeklik bagian mana yang akan di ganti dan kemudian tinggal mencarinya pada CSS template.

26/06/13 06.19 O

@Sugiman AlkaromahBuka tampilan versi mobile dengan firefox misalnya, kemudian lakukan inspect element untuk mengetahuinya Sob.

18/09/20 07.10 O

Makasih banyak mas, sangat membantu saya yang masih awam

18/09/20 22.34 O

@Sigit Prayogo Yoi, sama-sama... 🙏

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