Tampilkan postingan dengan label contempo base. Tampilkan semua postingan
Tampilkan postingan dengan label contempo base. Tampilkan semua postingan
Sobat tahukan kalau tema contempo bawaan blogger itu nyaris tidak memiliki footer yang menarik? Akan tetapi dengan CSS hasil ramuan ini, hal itu langsung berubah. Dan menariknya apa yang pernah menjadi perbincangan panas di diskusi Google Forum ternyata hanya membutuhkan pemecahan yang sangat sederhana.
begitu membosankan
Aduh apa apan footernya beginian?

MEMBUAT FOOTER UNTUK CONTEMPO DENGAN CSS

Rahasianya adalah CSS! Perhatikan kode yang saya buat:

<style>
.footer {
position: relative;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
background:-webkit-linear-gradient(right,#E6E6FA 0%,#5093C4 75%);
color: black;
text-align: center;
}
</style>

Sangat sederhana bukan? Dimana meletakannya?

Gampang sobat masuk ke pengaturan blogger >> pilih tema >> dan lalu pilih edit HTML,  cari kode </body> pada Tema Contempo letaknya selalu ditempat paling bawah halaman HTML, scroll saja halaman ke atas sampai habis! Letakan kode diatas tepat diatas </body>

Lho bukankah itu CSS mengapa tidak diletakan di atas </head>? Sobat perhatikan kode pembuka dan penutup kode yang saya sorot merah? Itu menandakan bahwa kode dapat diletakan pada tag tag tertentu seperti </body>

Kalau sobat terbiasa memperhatikan bagaimana kode kode disusun, sobat juga sering melihat kode javascript di buka dengan <script> dan ditutup dengan </script> bukan? jadi semua itu tidak akan menyakiti apa apa. OK save saja template Contempo sobat dan lihat hasilnya.

MEMODIFIKASI KODE CSS UNTUK FOOTER

Perhatikan kembali kodenya:
<style>
.footer {
position: relative;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
background:-webkit-linear-gradient(right,#E6E6FA 0%,#5093C4 75%);
color: black;
text-align: center;
}
</style>


Jika sobat merobah perintah: relative; menjadi fixed; Maka yang terjadi adalah, footer akan menjadi selalu terlihat pada saat halaman konten di scroll keatas dan kebawah. Dan jika sobat merobah: height: 50px; menjadi: height 100px; maka bar footer yang berwarna gradient menjadi menebal atau meninggi.

Jika sobat ingin merobah warna background ganti kode warna HEX yang saya sorot hijau dengan warna yang sobat sukai, cari kode warnanya di internet.

Dan jika sobat ingin mengganti warna tulisan ganti: black; misalnya menjadi blue; atau white; begitulah seterusnya.

EFEK LAIN DARI KODE CSS FOOTER

Efek lain yang terjadi karena penerapan kode ini pada template CONTEMPO HYBRID buatan saya adalah:
Pada komentar. Saat belum ada komentar pada suatu postingan kolom komentar seolah "hidup" dan minta di isi dengan komen (bagi saya ini keren) namun setelah ada komentar, kolom komentar kembali berprilaku normal. Keren bukan?
Efek "memaksa" sesuai dengan fungsi fitur ini telah lama saya pikirkan namun secara kebetulan saya temukan pada saat pemasangan footer pada template contempo.

KELEMAHAN:
Pada browser tertentu warna tidak bisa tampil.

SHARE YA:

menu navigasi contempo
Perhatikan baik baik Menu Navigasi infinite diatas beberapa saat saja
Theme yang sedang kami kemukakan disini tidak lain adalah varian dari CONTEMPO HYBRID STANDARD adapun template Contempo Hybrid ini sebenarnya kami buat dalam empat varian:
  1. Contempo Hybrid original
  2. Contempo Hybrid Standard
  3. Contempo Hybrid Gradient
  4. Contempo Hybrid Infinite Style
Nah yang sedang kita bicarakan saat ini adalah varian ke-4 yakni Contempo Hybrid Infinite Style. Keempat Varian di bangun menggunakan material dan elemen yang sama. Boleh dikatakan yang membedakannya hanyalah pada material warna dan style menu navigasinya.

Navigasi ini memiliki kelebihan:
  1. Indah pada tampilan laptop dan tampilan layar mobile atau ponsel
  2. Pada laptop/PC tampilan inline dengan menu pencarian di ujung menubar, pada tampilan mobile menu akan berubah otomatis menjadi tampilan menu hamburger.
  3. Dibuat berdasarkan material dan elemen yang standard dan mudah di mengerti sekalipun sobat memiliki pengetahuan minim perihal koding.
  4. Stabil dan telah di uji validitasnya.
  5. Dapat diterapkan pada template contempo bawaan (non-hybrid)
  6. Kami akui masih dibutuhkan trik khusus agar style navigasi tidak mengorbankan kecepatan loading blog.

CARA MEMBUAT NAVIGASI BERGAYA INFINITE
Kami hanya ingin mengungkapkan cara membuat menu navigasi dengan style infinite ini:
  1. Masuk kepengaturan blogger>>Pilih Tema>>Masuk ke opsi edit HTML
Cari kode </head> atau kalau sobat sudah memodifikasinya demi kecepatan loading biasanya menjadi: &lt;/head&gt;&lt;!--<head/>--&gt;
Setelah ketemu letakan kode dibawah ini tepat diatasnya:

<style>
#menutop{width:100%;margin:0 auto;height:65px;background: linear-gradient(-50deg, #6495ED, #ea3a7e, #6495ED, #23e0b3);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 10s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
;;border-bottom:1px solid #F0F8FF;}
#menutop ul,#menutop li{margin:0;padding:0;list-style:none;}
#menutop ul{height:38px}
#menutop li{float:left;display:inline;position:relative;font-family:&#39;trebuchet MS&#39;;font-size:16px;
font-weight:bold;}
#menutop a{display:block;line-height:40px;padding:0 14px;text-decoration:none;color:#F5F5F5;}
#menutop ul li:hover a{color:#666;}
#menutop input{display:none;margin:0 0;padding:0 0;width:100%;height:40px;opacity:0;cursor:pointer}
#menutop label{font-family:&#39;trebuchet MS&#39;;font-size:30px;font-weight:400;display:none;width:35px;height:40px;line-height:45px;text-align:center;}
#menutop label span{font-size:13px;position:absolute;left:35px}
#menutop ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#919392}
#menutop ul li ul li a{color:#919392;height:40px;line-height:40px;background:#fff;width:100%;}
#menutop ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#fff;position:absolute;z-index:99;color:#919392;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);top:10px;transition:all 0.3s ease-in-out;}
#menutop li:hover &gt; ul.menux{visibility:visible;opacity:1;top:45px;}
#menutop a.dutt{padding:0 27px 0 14px}
#menutop a.dutt::after{content:&quot;\f0d7&quot;;font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#menutop a.dutt:hover::after,#menutop ul li:hover a.dutt::after{content:&quot;\f0d7&quot;;font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#menutop ul.menux li a{background:#fff;color:#919392;}
#menutop ul li ul li a:hover{background:#fcfcfc;color:#8493a0;}
#menutop li.facebook {padding:0 5px;}
@media screen and (max-width:960px) {
#menutop li:hover &gt; ul.menux{display:block;}
#menutop ul{border:none;border-bottom:4px solid #e9e9e9;}
#menutop{position:relative;border:none;border-bottom:4px solid #e9e9e9;}
#menutop ul{background:#5093C4;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menutop ul.menux{width:100%;position:static;border:none}
#menutop li{display:block;float:none;width:auto;text-align:left}
#menutop li a{color:#fff}
#menutop li a:hover{background:#f1f1f1;color:#f9f9f9}
#menutop li:hover{background:#8493a0;color:#fff;}
#menutop a.dutt{font-weight: bold;}
#menutop li:hover &gt; a.dutt,#menutop a.dutt:hover{background:#b1b1b1;color:#fff;}
#menutop input,#menutop label{display:inline-block;position:absolute;right:0;top:0;}
#menutop input:after,#menutop label:after {content:&quot;\f0c9&quot;;font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#666;
display:inline-block;position:absolute;right:15px;top:25%;line-height:30px;}
#menutop input{z-index:4;}
#menutop input:checked + label{color:#666;font-weight:700}
#menutop input:checked ~ ul{display:block}
#menutop ul li ul li a{width:100%;color:#666;}
#menutop ul li ul li a:hover{background:#8493a0;color:#666;}
#menutop ul.menux a{background:#fff;color:#666;}
#menutop ul.menux a:hover{background:#8493a0;color:#666;}
#menutop ul.menux li{background:#fff;color:#666;}
#menutop ul.menux li:hover{background:#8493a0;color:#fff;}
#menutop ul.menux li a{background:#fff;color:#666;}
#menutop ul.menux li a:hover{background:#f1f1f1;color:#8493a0;}
</style>
 
Perhatikan kode warna yang saya sorot merah jambu, sobat bisa menggantinya dengan kode warna HEX yang berbeda beda (jangan sama agar animasi warna berubah rubah) yang dapat di copy paste dari internet untuk menghasilkan kombinasi warna gradasi yang sesuai dengan selera. Sobat juga dapat merobah kecepatan animasi dengan mengganti angka yang saya sorot warna hijau terang pada kode diatas, misalnya dari 15s menjadi 10s agar lebih cepat.

Sedangkan untuk mengatur tinggi Menu Bar infinite sobat perhatikan angka yang saya sorot warna kuning terang (65px) sobat bisa menggantinya menjadi 70px dst.

2. Langkah berikutnya cari kode </header> jika sudah ketemu copy kode HTML dibawah ini dan pastekan diatasnya:

<nav id='menutop'><input type='checkbox'/>
<label/>
<ul>
<li><a href='your-link'>About</a></li>
<li><a href='your-link'>Contact</a></li>
<li><a href='your-link'>Sitemap</a></li>
<li class='sorting-01 facebook'><a href='your-link'><i class='fa fa-facebook fa-lg'/><span class='inv'/></a></li>
<li class='sorting-02 twitter'><a href='your-link'><i class='fa fa-twitter fa-lg'/><span class='inv'/></a></li>
<li class='sorting-03 googleplus'><a href='your-link'><i class='fa fa-google-plus fa-lg'/><span class='inv'/></a></li>
<li class='sorting-06 rss-square'><a href='your-link'><i class='fa fa-rss-square fa-lg'/><span class='inv'/></a></li>
<li class='sorting-04 youtube'><a href='your-link'><i class='fa fa-youtube fa-lg'/><span class='inv'/></a></li>
</ul>
</nav>
  
3. Langkah ke selanjutnya untuk memperbaiki lay out ContempoHybrid akibat pemasangan kode diatas adalah sbb: copy kode berikut dibawah ini:
body#layout .outer-wrapper {width:970px}
body#layout .content-wrapper {width:970px}
body#layout #header {width:450px;float:left;margin-top:30px}
body#layout #header2 {width:450px;float:right}
body#layout .main-wrapper {width:750px}
body#layout .sidebar-wrapper,.sidebar1-wrapper {width:330px;float:right}
body#layout #footer {width:800px}
.footer {width:215px;float:left}
body#layout ul {display: none}
Lalu cari kode <b:skin><![CDATA[ pada Contempo Hybrid letaknya persis dibawah kode ]]></b:skin> jika sobat bertemu dengan dua kurung siku sperti ini: >...< dengan tiga buah titik ditengahnya, double klik saja tepat pada titik tersebut sampai kode [CDATA[ muncul, dan pastekan kode diatas tepat dibawahnya.
Kode yang saya modifikasi diatas dapat menghilangkan error dan memvalidasi tampilan tema contempo hybrid secara keseluruhan.

Silahkan mengganti tanda pagar ('#') dengan link menu navigasi sobat sendiri dan menghapus link yang disorot warna kuning dan menggantikannya dengan link sobat sendiri.
Save Template, perhatikan Menu pada tema ContempoHybrid yang memakai menu Navigasi ini.
LIHAT DEMO

Sebagai catatan kami sangat memperhatikan tampilan dan kegunaan seluler pada template buatan kami, dan semua project terkait pembuatan tema ini selalu kami pastikan telah di validasi:

notifikasi Google

Demikianlah triknya jika sobat menginginkan bar menu navigasi berubah menjadi warna warni animasi INFINITE seperti layaknya buatan Arlina dan diterapkan ke template contempo, elemennya telah kami siapkan semuanya dibuat dengan material warna yang bervariasi bagai pelangi.

SHARE YA:

Struktur template contempo beda dengan template blogger tua atau klasik jadi untuk menambahkan breadcrumbs kita memakai kode yang berbeda, kode yang memberikan perintah responsive.

Masuk ke tema contempo sobat:
  1. Masuk ke pengaturan
  2. pilih theme atau tema
  3. pilih opsi editHTML
Pada kotak HTML cari kode <b:includable id='main'> 
Atau ketik saja di kotak pencarian diatas kotak editor HTML, bisa juga dengan memilih "LOMPAT KE WIDGET" seperti gambar:
Jika sudah ketemu hapus kode tersebut dan ganti dengan kode panjang di bawah ini:

<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <div class='breadcrumbs'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span> &#187; <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span><b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if> </b:loop> &#187; <span><data:post.title/></span> </div> <b:else/> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Uncategories</span> &#187; <span><data:post.title/></span></div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Archive for <data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.searchQuery'> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.pageType == &quot;index&quot;'> <div class='breadcrumbs'> <b:if cond='data:blog.pageName == &quot;&quot;'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>All post</span> <b:else/> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span> </b:if> </div> </b:if> </b:if> </b:if> </b:if> </b:if> </b:if> </b:includable> <b:includable id='main' var='top'> <b:include data='posts' name='breadcrumb'/>

Selanjutnya cari kode ]]></b:skin> dan letakan kode di bawah ini tepat diatasnya:

.breadcrumbs { padding-top: 40px; padding-bottom: 0px; margin-left: 0px; padding-left: 40px; padding-right: 40px; color: #6495ED;
background: white;
}
.breadcrumbs a {
color: 
background: white; } .breadcrumbs a { color: #6495ED;
}
@media screen and (max-width:800px) {
.breadcrumbs {
margin-left: 0px;
padding-left: 20px;
padding-bottom: 15px;
padding-right: 20px;
color: inherit;
}
}
.breadcrumbs a:hover {
color: 
} @media screen and (max-width:800px) { .breadcrumbs { margin-left: 0px; padding-left: 20px; padding-bottom: 15px; padding-right: 20px; color: inherit; } } .breadcrumbs a:hover { color: #6495ED;
}
}

Save tema.
Sobat bisa mengganti kode warna HEX yang saya sorot kuning dengan kode warna kesukaan sobat sendiri, warna diatas saya menggunakan warna BIRU.

Tips ini walaupun saya tujukan untuk Template Contempo Hybrid atau Contempo Hibrida buatan saya, tetapi juga mudah diterapkan buat contempo default bawaan blogger.

BONUS:
Jika sobat telah mulai terbiasa melakukan pengeditan tema blog melalui opsi "editHTML" sebaiknya periksa kode css lama yang mungkin masih tersimpan untuk pengaturan tampilan skin daripada breadcrumbs sebelumnya. Kode tersebut harus dihapus manual.

Mengembalikan template melalui "Kembalikan tema widget ke default" tidak akan menghapus kode css yang kita letakan diatas ]]></b:skin> atau </style> opsi "kembalikan tema widget ke default" hanya dapat menghapus semua kode script yang telah kita letakan diatas </body>

Ini saya harus saya sampaikan karena banyak keluhan yang mengatakan pemasangan gagal dan setelah saya periksa ternyata masih terdapat kode css untuk breadcrumbs lama yang masih tertanam di dalam template.

SHARE YA:

APAKAH PARALLAX ITU?

2 komentar

November 28, 2018

Paralaks sering didefinisikan sebagai "pergerakan yang tampak" dari sebuah objek terhadap latar belakang yang jauh akibat pergeseran perspektif sebagaimana dapat dilihat pada gambar 1.
Ketika dilihat dari titik pandang A, objek tampak berada di depan kotak biru. 
Ketika titik pandang diubah ke titik pandang B, objek tampak bergerak ke depan kotak merah. Fenomena ini biasa dimanfaatkan dalam untuk menentukan jarak benda-benda langit.

Potografi juga mengenal istilah parallax ini. Namun ternyata web-desain juga mengenal istilah ini kita sedang mencoba membuatnya, hanya saja sayangnya efek parallax mungkin tidak bekerja pada screen hape namun biasanya berkerja dengan baik pada tampilan laptop/PC.







geser keatas atau kebawah untuk melihat efek jika menggunakan laptop.


Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.




Kodenya sbb:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parallax {

/* The image used */

background-image: url("https://2.bp.blogspot.com/-0-EIr8bYQR8/W_gRuqMz1dI/AAAAAAAAhn8/5ssM6gfdLvIKcX9CpO5qnpcf_CinDkwpQCLcBGAs/s1600/20181123_214033_rmedited.jpgg");

/* Set a specific height */

min-height: 500px;

/* Create the parallax scrolling effect */

background-attachment: fixed;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

}

</style>

</head>

<body>

<p>Scroll Up and Down this page to see the parallax scrolling effect.</p>

<div class="parallax"></div>

<div style="height:500px;background-color:grey;font-size:16px">

Scroll turun dan naik untuk melihat efeknya.

Div disini untuk membuat scrolling bekerja

Tip: cobalah hilangkan background atau latar untuk menghilangkan efek.

</div>

</body>

</html>


Cara mencobanya masuk ke dasbor blog, pilih postingan baru > lalu pilih mode HTML kopi dan pastekan kode diatas ke halaman postingan HTML tadi dan Preview

SHARE YA:

CONTEMPO HYDBRID THEME PREMIUM STYLE

3 komentar

November 26, 2018

Kekaguman saya kepada Template Contempo membuat saya terus mengeksplorasinya. Sampai akhirnya saya membuat template baru berdasarkan Tema tersebut. Dan saya menamainya "Contempo Hybrid" mengapa? Walaupun komposisi hybridnya lebih di dominasi oleh Contempo asli namun sifat klasiknya semakin diperjelas: Menu navigasi responsive.

Theme sangat responsive

IJika anda ingin melihat skala yang berbeda, anda bisa mengakses template pada layar berbeda beda, laptop, tablet hingga ponsel.
Silahkan lihat perbedaan pada efeknya.

Karena saya akhirnya mengawinkan beberapa elemen dari template klasik yang lebih tua dengan Contempo yang lebih muda dan menghasilkan style dan kecepatan lebih baik daripada template sebelumnya "Contempo Ultimate" perhatikan ada hal baru pada template ini:
  1. Header lebih dinamis, Navigasi klasik sangat responsive namun tetap mempertahankan tombol pencarian "magnifier" bawaan.
  2. Keberadaan sidebar menjadi lebih stabil dengan versi ini.
  3. Jangan kuatir anda masih tetap dapat menambahkan menu tambahan dengan memanfaatkan laman atau page blogger seperti biasanya.
  4. Meningkatkan sedikit kecepatan pada mobile sedangkan pada dekstop bisa mencapai 95-100 untuk mobile masih kecepatan sedang alias rata rata (kami akan perbaiki nanti)
Jika anda berminat silahkan download dengan menekan tombol dibawah ini:

CONTEMPO HYBRID ADALAH TEMPLATE ALTERNATIF TERBAIK 

Alasanya adalah karena:
  1. Stylish
  2. Stabil
  3. Cepat
  4. Responsive dan mobile friendly
  5. Kombinasi terbaik klasik dan kekinian
Demonya tentu saja sudah dipakai pada blog ini.

SHARE YA: