CARA MEMBUAT FOOTER BAWAH SEDERHANA YANG ELEGAN DINAMIS UNTUK TEMPLATE BLOGGER CARA MEMBUAT FOOTER BAWAH SEDERHANA YANG ELEGAN DINAMIS UNTUK TEMPLATE BLOGGER - SUARA HARIAN OTO BEMO BERODA TIGA
Suara Harian Oto Bemo Beroda Tiga

Komunikasi, Media Ilmu & Pengetahuan Umum Blogging

Langsung ke konten utama

"OTO BEMO.. OTO BEMO.. BERODA TIGA .. TEMPAT BERHENTI.. DITENGAH TENGAH KOTA..PANGGIL NONA..PANGGIL NONA..NAIK KERETA..NONA BILANG..TIDAK PUNYA UANG.. JALAN KAKI SAJA"

CARA MEMBUAT FOOTER BAWAH SEDERHANA YANG ELEGAN DINAMIS UNTUK TEMPLATE BLOGGER

VARIAN TERBARU DENGAN CSS SUARA HARIAN OTO BEMO BERODA TIGA
Memang sudah masanya meninggalkan template lama. Itu sudah hampir menjadi masa lalu. Ya gayanya, ya struktur penulisannya ya versi layoutnya. Pokoknya semuanya memang berasal dari masa lalu. Karena sudah hukum alam yang lama lama menjadi usang, ketinggalan fitur dan model, untuk kemudian perlahan lahan di gantikan oleh yang baru. Contoh template klasik generasi pertama, blogger mana yang mau bunuh diri menggunakannya kembali?

Salah satu artikel tampilan footer editblogtema yuk ! kita mulai praktekan cucuk cabut, otak ataik, pasang bongkar bahasa alogaritma editblogtema emang jagonya coding, Berulangkali saya membaca akhirnya jatuh hati.
 
Kini seperti kita sudah maklum, Google melalui bloggernya telah menyediakan 5 varian template terbaru versi kedua dengan layout versi 3, yakni:

  1. Contempo
  2. Soho
  3. Emporio
  4. Notable
  5. Essential

Mereka telah mengadopsi gaya kekinian. Mereka masuk syarat sebagai template mobile dan lulus pengujian bagian Web Core vitals di Google Master.

Template versi lama, yakni versi kedua dengan layout versi 2:

  1. Simple
  2. Dynamic View
  3. Picture Window
  4. Awesome inc
  5. Watermark
  6. Ethereal
  7. Travel

Mereka yang tujuh varian utama ini memang sudah jadul, tidak responsif dan tidak mobile friendly. Mereka sudah tidak ramah SEO, tidak masuk dalam hitungan Web Core vitals karena itu mereka yang tujuh varian ini hampir tidak memiliki syarat sebagai sinyal web mobile lagi. Tahun 2017 Google sudah menghimbau agar pengguna atau para blogger pindah menggunakan template versi baru.

Namun kalau ada yang belum bisa move on itu juga tidak salah, lho. Soalnya para blogger senior kan sudah nyaman berada di zaman 'old'.

Lagian template lama juga masih worth di pergunakan asalkan terlebih dahulu di permak menjadi lebih responsif. kalau template terbaru mah memang sudah responsif sekaligus mobile dari oroknya. Mereka di buat memang untuk mengakomodasi kemajuan teknologi web zaman kini.

Dan walaupun 5 template terbaru di atas sudah dapat mencukupi kebutuhan blogging tetap saja sebagian blogger ingin lebih optimal. Agar ia tampak lebih worth atau bahasa bisnisnya agar tampak lebih premium.

Tapi tunggu kita lanjutin sedikit lagi 'ceramahnya', yakni perihal menambah nambah tadi, ada yang harus di pertimbangkan dan bagi saya ini adalah wajib:
Penambahan elemen tidak memberatkan loading
Penambahan elemen meningkatkan performa dan SEO
Penambahan elemen membuat template jadi beda dan tampak premium
Untuk itu kita berterimakasih kepada CSS...

CARA MENAMBAHKAN FOOTER KE DALAM TEMPLATE LAYOUT VERSI KETIGA

Dan penambahan yang paling menonjol perananannya dalam merobah tampilan template dari asalnya adalah perubahan pada header dan footernya. Mengapa? Karena:
Pada header ada Judul dan menu navigasi yang dapat dihias jadi lebih indah, pengunjung mudah sekali jatuh cinta pada pandangan pertama atau istilahnya, first impression.

Nah pada footer pula, psikologisnya, jika pengunjung puas dan ingin menggali halaman lebih dalam lagi mereka akan mencarinya(mengeksplorasinya) sampai di tempat paling akhir, yakni bagian footer, dimana ada terdapat informasi informasi tambahan. Baca Juga : Cara-membuat-efek-bergoyang-pada-gambar

Jadi berikut yang ingin saya bagikan adalah cara menambahkan footer pada template template terbaru tersebut, caranya:
Masuk ke dalam pengaturan atau dasbor blogger
Pilih Tema
Pilih Edit HTML

1. Tambahkan CSS

Di dalam halaman editor HTML blogspot cari kode </head> dan letakan kode pengaturan CSS berikut di atasnya:

<style> /*------- Footer dimulai -----------*/

.footer-icons ul li {

display: inline-block;

}

.footer-icons ul li a {

border: none

color: #fff;

display: block;

font-size: 14px;

height: 40px;

line-height: 38px;

margin-right: 5px;

text-align: center;

width: 40px;

border-radius: 50%;

}

.footer-icons {

text-align: center;

}

.footer-contacts p span {

color: blue;

font-weight: 400;

padding:12px;

}

.popular-tag ul li {

display: inline-block;

}

.footer-content {

display: block;

overflow: hidden;

}

.popular-tag ul li a:hover,

.footer-icons ul li a:hover {

background: red;

border: 1px solid blue;

color: #fff;

}

.popular-tag ul li a {

border: 1px solid #444;

border-radius: 30px;

color: #fff;

display: block;

font-size: 13px;

font-weight: 600;

margin: 5px 3px;

padding: 5px 10px;

position: absolute;

text-decoration: none;

text-transform: capitalize;

transition: all 0.4s ease 0s;

width: 70px;

text-align: center;

}

 

.footer-area-bottom {

background: #999 none repeat scroll 0 0;

padding: 15px 0;

}

.copyright-text a:hover {

text-decoration: underline;

color: #fff;

}

.copyright-text a {

color: #fff;

}

.copyright&gt; p {

margin-bottom: 0;

color: #fff;

}

.credits {

padding-top: 5px;

text-align: center;

}

.credits a {

color: #fff;

}

</style>

 

SAVE


2. Tambahkan HTML

Masih di dalam halaman editor HTML template blogger, cari kode: </body> dan letakan kode berikut di atasnya:

<!-- Start Footer bottom Area -->

<footer>

<div class='footer-area-bottom'>

<div class='container'>

<div class='row'>

<div class='col-md-12'>

<div class='footer-icons'>

<ul>

<li>

<a href='https://www.facebook.com/profile.php?id=100069220610093'>

<svg style='width:24px;height:24px' viewBox='0 0 24 24'>

<path d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z' fill='currentColor'/>

</svg> </a>

</li>

<li>

<a href='https://twitter.com/SuaraBemo'>

<svg style='width:24px;height:24px' viewBox='0 0 24 24'>

<path d='M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z' fill='currentColor'/>

</svg> </a>

</li>

<li>

<a href='https://www.linkedin.com/in/suara-harian-oto-bemo-beroda-tiga-478667196/'>

<svg style='width:24px;height:24px' viewBox='0 0 24 24'>

<path d='M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19M18.5 18.5V13.2A3.26 3.26 0 0 0 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17A1.4 1.4 0 0 1 15.71 13.57V18.5H18.5M6.88 8.56A1.68 1.68 0 0 0 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19A1.69 1.69 0 0 0 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56M8.27 18.5V10.13H5.5V18.5H8.27Z' fill='currentColor'/>

</svg> </a>

</li>

<li>

<a href='https://www.youtube.com/channel/UCng_UY10f1ju5Zt0noxnflA'>

<svg style='width:24px;height:24px' viewBox='0 0 24 24'>

<path d='M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z' fill='currentColor'/>

</svg>

</a>

</li>

</ul>

</div>

</div>

</div>

<div class='row'>

<div class='col-md-12 col-sm-12 col-xs-12'>

<div class='credits'>

<a href='https://otobemoberodatiga.blogspot.com/2021/06/privacy-policy.html'>🔎Privacy Policy</a> | <a href='https://otobemoberodatiga.blogspot.com/2021/06/terms-and-conditions.html'>Terms and Conditions</a> | <a href='https://otobemoberodatiga.blogspot.com/2021/06/disclaimer.html'>Disclaimer</a> | <a href='http://feeds.feedburner.com/SuaraHarianOtoBemoBerodaTiga'>Feedburner</a> | <a href='https://form.123formbuilder.com/5318109//'>Contact Us🔍</a>

</div>

<div class='copyrights text-center'>

<p>

<center> <small>Copyrights, Since 2007 <script> document.write(&quot;- &quot; + new Date().getFullYear());</script> | <strong><a href='#'>otobemoberodatiga.blogspot.com </a></strong> | All Rights Reserved.</small></center>

</p>

</div>

</div>

</div>

</div>

</div>

</footer>


SAVE

 
NOTICE : 
  • Rubah atau ganti Tahun 2007 merah ? kapan blog/web anda dibuat, akan tampak secara otomatis menunjukkan umur sampai tahun ketahun.
  • Rubah atau ganti  Url blog/web dan url sosmed berwarna merah milik anda punya.
  • Rubah atau ganti bahasa alogaritma coding link url dinotepad lebih enjoy sebelum disave. Baca Juga : Menjawab-quesioner-badan-pemeriksa


Bagaimana Reaksi Anda Tentang Artikel Ini?

Komentar

POPULAR POST

SUARA HARIAN OTO BEMO BERODA TIGA

KATA PENGANTAR  Puji syukur kami panjatkan kehadirat Tuhan Yang Maha Esa karena dengan rahmat, karunia, serta taufik dan hidayah-Nya saya dapat membuat blog/site tentang apa saja yang menarik bagi penggemar membaca dengan baik meskipun banyak kekurangan didalamnya. Dan juga kami berterima kasih pada Bapak, Ibu, Saudara (i) selaku pelanggan Suara Harian Oto Bemo Beroda Tiga yang telah memberikan masukan kepada saya. Tak lupa juga ucapan terima kasih kepada teman - teman blogger telah ikut turut serta membantu dalam proses pemblo gingan ini. Saya juga menyadari sepenuhnya bahwa di dalam dunia bloging ini terdapat kekurangan dan jauh dari kata sempurna. Oleh sebab itu, saya berharap adanya kritik, saran dan usulan demi perbaikan blog/site yang telah saya buat untuk di masa yang akan datang, mengingat tidak ada sesuatu yang sempurna tanpa saran yang membangun. Semoga blog/site sederhana ini dapat dipahami bagi siapapun yang membacanya. Secara struktur, sistematis dan masif blog/site ya...

PERBEDAAN SURGA BAGI KAUM SUFI DAN KAUM AWAM ADALAH JIWA

Surga Didalam rukun iman disebutkan bahwa kita harus mengimani hari akhir, hari pembalasan, dan termasuk juga mengimani surga dan neraka. Surga berasal dari bahasa Sansekerta, Suar = Cahaya, dan Ga = pergi menuju. Sedangkan dalam Al Qur'an, tidak ada kata Surga, yang ada adalah kata Al Jannah. Kata jannah berakar dari huruf ‘jim’ dan ‘nun’ artinya tersembunyi atau tertutup.  Ada banyak kata yang satu akar dengan kalimat jannah yakni : ajinah/janin, jinan, janna, junnah, majnun, junun, jin dll.. Ajinah=janin (QS 53:32), jinan=hati, janna= malam (QS 6:76), junnah=perisai/kain, majnun=gila, junun=kegilaan, dan jin.  Disebut janin karena tetutup rahim, disebut hati karena tersembunyi, disebut malam karena sinar matahari tertutup belahan bumi lain, disebut perisai/kain karena menutupi badan, disebut gila karena tertutup akal, dan disebut jin karena tertutup dari mata manusia.  Jika surga adalah kebun, pasti kebun yang tertutup. Jika surga adalah taman, pasti ...

ABDURRAHMAN JAMI PENYAIR SUFI YANG MENGETAHUI HARI KEMATIANNYA

Abdurrahman Jami, Penyair Sufi yang Mengetahui Hari Kematiannya Musim panas, musim dingin, dan musim semi akan berlalu. Kita pasti akan jadi tanah dan debu Nama lengkapnya Nuruddin Abdurrahman Al-Jami. Dia adalah satu di antara sejumlah orang genius dari negeri Persia. Lahir di Kharjad pada 1414 M (817 H) dan wafat di Heart pada 1492 M (898 H). Sebelum populer dengan sebutan Al-Jami, dia bergelar Ad-Dasyti, karena ayahnya, Nizamuddin, berasal dari Dasyt, dekat Kota Isfahan. Sejak berusia muda, Al-Jami sudah menunjukkan sifatnya yang istimewa. Ia mudah menguasai pelajaran yang diberikan kepadanya. Ia pandai berbicara dan berargumentasi. Salah satu di antara para ulama yang pernah menjadi guru atau pembimbingnya adalah Syekh Sa’aduddin Al-Kasygari, murid sekaligus Khalifah Syekh Bahaudiin Naqsyabandi. Berkat potensinya yang besar dan ketekunannya belajar dan menulis, ia berkembang menjadi sufi besar dan sekaligus menjadi penyair besar yang berpengetahuan luas. Kebesaran dan...

KEISTIMEWAAN IMAM HADDAD RA PENCIPTA RATIB AL HADDAD

Keistimewaan Imam Haddad RA, Pencipta Ratib Al Haddad 1. Imam Abdullah Al-Haddad bin Alwi bin Muhammad bin Ahmad bin Abdullah bin Muhammad bin Alwi bin Ahmad bin Abu Bakar bin Ahmad bin Muhammad bin Abdullah bin al-Faqih Ahmad bin Abdurrahman bin Alwi bin Muhammad Shahibu Marbath bin Ali Khali` Qasam bin Alwi bin Muhammad bin Alwi bin Ubaidillah bin Ahmad al-Muhajir bin Isa bin Muhammad bin Ali al-Uraidhi bin Ja`far ash-Shadiq bin Muhammad al-Baqir bin Ali Zainal Abidin bin al-Husain bin Ali bin Abi Thalib, suami Fathimah az-Zahra binti Rosulillah SAW. 2. Al-Arifbillah Quthbil Anfas Al-Imam Habib Umar bin Abdurrohman Al-Athos ra. mengatakan, “Al-Habib Abdullah Al-Haddad ibarat pakaian yang dilipat dan baru dibuka di zaman ini, sebab beliau termasuk orang terdahulu, hanya saja ditunda kehidupan beliau demi kebahagiaan umat di zaman ini (abad 12 H)”. 3. Al-Imam Arifbillah Al-Habib Ali bin Abdullah Al-Idrus ra. mengatakan, “Sayyid Abdullah bin Alwy Al-Haddad adalah Sultan ...

Bagaimana Sikap Ulama Terhadap Kalimat Sufistik yang Melewati Batas?

Penjelasan ulama terhadap kalimat sufistik yang tampak melewati batas  Dalam khazanah tasawuf kita sering mendengar ucapan para sufi yang tampak melewati batas dan kadang bertentangan dengan kaidah umum keislaman seperti yang terkenal Abu Yazid Al-Busthami, Al-Hallaj, Ibnu Arabi, atau Al-Jili. Bagaimana pandangan ulama perihal ini? Terima kasih. Wassalamu alaikum wr. wb. (Hamba Allah /Martapura) Jawaban Penanya yang budiman, semoga dirahmati Allah SWT.  Kalam-kalam yang tampak melewati batas itu bukan hanya dilontarkan oleh sufi, tetapi juga pernah oleh sahabat rasul seperti Sayyidina Umar, Sayyidah Aisyah, dan sahabat lainnya yang sebagian dikutip di sini. Sayyidina Umar pernah mengatakan, “Banjir Nuh dalam ratapanku seperti aliran air mata//Kobaran api Ibrahim seperti kepedihan hatiku yang terbakar oleh cinta. Kalau bukan embusan panjang napasku, niscaya aku tenggelam oleh air mata//tetapi sekiranya tanpa air mata, niscaya aku terbakar oleh napasku yang panas. Dukaku apa yan...