Tutorial Menciptakan Widget Footer Keren Responsive Di Blogger

Cara Membuat memasang Widget Footer Keren juga Responsive di Blogger. widget footer nan mau kami buatitu terdiri dari 4 kolom juga 3 kolom. Widget footer nan kaliitu aka kit buat berupa teks ataupun tulisan.pastinyanya kalian juga sanggup menyesuaikan dengan harapan kalian masing masing. Mungkin kalian rampung tau fungsi dari sebuah widget footer sebagai blog. aneka macam laba nan didapat apabila kami memasang Widget Footer Keren Responsive di Blogger.

Footer sendiri terletak di bab bawah dari tata letak sebuah blog. kami sanggup memasukan link blog lain , ataupun meletakan iklan ataupun meletakan link link lain nan kami inginkan di footer itu. pastinya saja meletakan widget footer dididalem blog merupakan stategi nan sangat cantik sekali.

Kaliitu kami mau membikin widget footer nan super responsive biar footer nan kami buat belommengganggu kinerja dari blog itu. aneka macam widget widget nan dibentuk hasilnya memberatkan blog, juga kemudian berdampak di lambatnya kecepatan loading blog itu. halitu pastinyalah menghasilkan seo nan kurang bagus.

Oke sahabat sahabat sekalian tanpa memperpanjang waktu silahkan kalian simak tahap pembuatan widget footer keren juga responsiveitu

Kita mau coba dulu memulai membikin Widget Footer Keren Responsive 3 kolom di Blogger eksklusif saja simak :

Cara Membuat Widget Footer 3 kolom di Blogger

Widget footer 3 kolom aneka macam dipakai oleh blogger di indonesia khususnya,

Berikut penampakan dari widget footer 3 kolom itu

Oke kini mari kami simak langkah pembuatannya

1. Silahkan masuk ke sajian dashboard blogger anda
2. sehabis itu masuk ke sajian EDIT HTML
3. Copy aba-aba dibawahitu letakan sempurna diatas kode ]]></b:skin> ataupun </style>

#lower {margin:auto;padding: 0px 0px 10px 0px;width: 100%;max-width: 1000px;background:#333333;} #lower-wrapper {background:#333333;margin:auto;padding: 20px 0px 20px 0px;width:1000px;border:0;} #lowerbar-wrapper {background:#333333;float: left;margin: 0px 5px auto;padding-bottom: 20px;width: 32%;text-align:left;color:#ddd;font: bold 12px Arial, Tahoma, Verdana;line-height: 1.6em;word-wrap: break-word;overflow: hidden;} .lowerbar {margin: 0; padding: 0;} .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;} .lowerbar h2 {margin: 0px 0px 10px 0px;padding: 3px 0px 3px 0px;text-align: left;border:0;color:#ddd;text-transform:uppercase;font: bold 14px Arial, Tahoma, Verdana;} .lowerbar ul {color:#fff;margin: 0 auto;padding: 0;list-style-type: none;} .lowerbar li {display:block;color:#fff;line-height: 1.6em;margin-left: 0 !important;padding: 6px;border-bottom: 1px solid #222;border-top: 1px solid #444;list-style-type: none;text-align: left;} .lowerbar li a {text-decoration:none; color: #DBDBDB;} .lowerbar li a:hover {text-decoration:underline;} .lowerbar li:hover {display:block;background: #222;}@media only screen and (max-width:768px)  {#lower, #lower-wrapper, #menubottom-container, #credits-wrap {overflow:hidden!important;width:100%!important;} #lowerbar-wrapper{overflow:hidden!important;width:95%!important;padding:5px}#credits p{text-align:center!important}}

4. Oke Jika seudah kini copy aba-aba dibawah juga letakan sempurna diatas aba-aba </body> ataupun <div class='footer id='footer'>

<div id='lower'> <div id='lower-wrapper'> <div id='lowerbar-wrapper'> <b:section class='lowerbar' id='lowerbar1' preferred='yes'> </b:section> </div> <div id='lowerbar-wrapper'> <b:section class='lowerbar' id='lowerbar2' preferred='yes'> </b:section> </div> <div id='lowerbar-wrapper'> <b:section class='lowerbar' id='lowerbar3' preferred='yes'> </b:section> </div> <div style='clear: both;'/> </div> </div>

5. Jangan lupa SAVE TEMPLATE

Anda sanggup memodifikasi aba-aba warna tata letak juga apa apa saja nan terdapat dididalem footer sesuai harapan kalian sendiri, diatas merupakan tutor membikin widget footer 3 kolom naahh sebagai widget footer 4 kolom silahkan simak tutornya dibawah ini.

Cara Membuat Widget Footer 4 kolom di Blogger

Widget Footer 4 kolom sendiri sangat jarang dipasang di blog, widget footer 4 kolomitu biasanya sering kami jumpai di web web besar.

Nah sebagai kalian nan ingin memasang widget 4 kolom berikut screen shot penampakannya.

Untuk tutor pemasangannya silahkan ikuti langkahnya berikutitu :

1. Silahkan masuk kemenu dashboard blogger kalian
2. LAngsung saja buka sajian EDIT HTML
3. Copy aba-aba dibawahitu letakan sempurna diatas aba-aba ]]</b:skin> ataupun </style>

#lower {margin:auto;padding: 0px 0px 10px 0px;width: 100%;max-width: 950px;background:#333333;} #lower-wrapper {background:#333333;margin:auto;padding: 20px 0px 20px 0px;width: 950px;border:0;} #lowerbar-wrapper {background:#333333;float: left;margin: 0px 5px auto;padding-bottom: 20px;width: 23%;text-align: justify;color:#ddd;font: bold 12px Arial, Tahoma, Verdana;line-height: 1.6em;word-wrap: break-word;overflow: hidden;} .lowerbar {margin: 0; padding: 0;}.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;} .lowerbar h2 {margin: 0px 0px 10px 0px;padding: 3px 0px 3px 0px;text-align: left;border:0;color:#ddd;text-transform:uppercase;font: bold 14px Arial, Tahoma, Verdana;} .lowerbar ul {color:#fff;margin: 0 auto;padding: 0;list-style-type: none;} .lowerbar li {display:block;color:#fff;line-height: 1.6em;margin-left: 0 !important;padding: 6px;border-bottom: 1px solid #222;border-top: 1px solid #444;list-style-type: none;text-align: left;} .lowerbar li a {text-decoration:none; color: #DBDBDB;} .lowerbar li a:hover {text-decoration:underline;} .lowerbar li:hover {display:block;background: #222;}@media only screen and (max-width:768px)  {#lower, #lower-wrapper, #menubottom-container, #credits-wrap {overflow:hidden!important;width:100%!important;} #lowerbar-wrapper{overflow:hidden!important;width:90%!important;padding:20px}#credits p{text-align:center!important}}

4. Oke Jika rampung kini copy aba-aba dibawah juga letakan sempurna diatas aba-aba </body> ataupun <div class='footer id='footer'>

<div id='lower'> <div id='lower-wrapper'> <div id='lowerbar-wrapper'> <b:section class='lowerbar' id='lowerbar1' preferred='yes'> </b:section> </div> <div id='lowerbar-wrapper'> <b:section class='lowerbar' id='lowerbar2' preferred='yes'/> </div> <div id='lowerbar-wrapper'> <b:section class='lowerbar' id='lowerbar3' preferred='yes'/> </div> <div id='lowerbar-wrapper'> <b:section class='lowerbar' id='lowerbar4' preferred='yes'/> </div> <div style='clear: both;'/> </div> </div>

5. Sekarang SAVE TEMPLATE juga Lihat hasilnya :D

Oke apabila kalian ingin style nan berbeda dari widget Footer responsive blogger kalian sanggup mecoba tutornya menyerupai berikut :

Widget Footer 4 kolom Responsive Style di Blogger

Jika kalian ingin sekali membikin footer dengan tampilan sederhana makanya ikuti tutor berikut ini

Berikut screenshot dari footer sederhana juga responsive

Oke sebagai tutor pemasangannya eksklusif saja ikuti :

1. Sekarang masuk kedidalem dashboard blogger anda
2. Langsung masuk ke sajian EDIT HTML
3. Copy aba-aba dibawahitu juga letakan sempurna diatas aba-aba ]]></b:skin>

#footer-wrapper {clear: both;width: 100%; height:4px; background: #CF4227;} /*----- jagoankodeblog Multi Column Widget (Red Border) START -----*/ #lower { margin:auto; padding: 0px 0px 10px 0px; width: 100%; background:#333333; } #lower-wrapper { background:#333333; margin:auto; padding: 20px 0px 20px 0px; width: 960px; border:0; } #lowerbar-wrapper { background:#333333; float: left; margin: 0px 5px auto; padding-bottom: 20px; width: 23%; text-align: justify; color:#ddd; font: bold 12px Arial, Tahoma, Verdana; line-height: 1.6em; word-wrap: break-word; overflow: hidden; } .lowerbar {margin: 0; padding: 0;} .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;} .lowerbar h2 { margin: 0px 0px 10px 0px; padding: 3px 0px 3px 0px; text-align: left; border:0; color:#ddd; text-transform:uppercase; font: bold 14px Arial, Tahoma, Verdana; } .lowerbar ul { color:#fff; margin: 0 auto; padding: 0; list-style-type: none; } .lowerbar li { display:block; color:#fff; line-height: 1.6em; margin-left: 0 !important; padding: 6px; border-bottom: 1px solid #222; border-top: 1px solid #444; list-style-type: none; } .lowerbar li a { text-decoration:none; color: #DBDBDB; } .lowerbar li a:hover { text-decoration:underline; } .lowerbar li:hover { display:block; background: #222; } /*----- Jagoankodeblog Multi Column Widget (Red Border) END-----*/

4. Oke kemudian copy aba-aba sibawahitu juga letakan diatas aba-aba </body>

<!-- Jagoankode Footer border Start--> <div id='footer-wrapper'> <div style='clear:both;'/>       </div> <!-- Jagoankode Footer border End--> <div id='lower'> <div id='lower-wrapper'> <div id='lowerbar-wrapper'> <b:section class='lowerbar' id='Column 1' preferred='yes'> </b:section> </div> <div id='lowerbar-wrapper'> <b:section class='lowerbar' id='Column 2' preferred='yes'> </b:section> </div> <div id='lowerbar-wrapper'> <b:section class='lowerbar' id='Column 3' preferred='yes'> </b:section> </div> <div id='lowerbar-wrapper'> <b:section class='lowerbar' id='Column 4' preferred='yes'> </b:section> </div> <div style='clear: both;'/> </div> </div>

5. sepakat kini footer kolom rampung muncul
6. Pergi ke bab sajian TATALETAK/LAYOUT
7. Kini kalian sanggup mengatur footer itu sesuai harapan anda

Nah begitulah tutor Membuat Widget Footer Keren Responsive di Blogger bagaimana gampang bukan ?? Demikianlah tutorial kaliitu semoga meringankan :D