×

Owner / Author / Admin / etc

    Rahman NM    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Anime, Manga, Game, Film, dan juga berbagai tips-tips menarik lainnya."

Cara Mendesain Tiga Layout Widget Dibagian Footer Blog #2

February 26, 2020   • Comment

Jika sebelumnya saya membagikan bagaimana cara membuat tiga layout widget dibagian footer, maka pada postingan ini saya akan membagikan cara mendesain tiga layout widget dibagian footer blog agar menjadi lebih menarik.

Nah yuk langsung aja kita ke tutorial cara mendesain tiga layout widget dibagian footer blog,



Cara Mendesain Tiga Layout Widget Dibagian Footer Blog #2
Disini saya anggap kamu sudah login ke blogger dan masuk ke dashboard tataletak atau layout blog kamu.

#Pertama kamu akan Edit dibagian Layout "KONTAK" terlebih dahulu,

silahkan kamu klik tombol edit, dan copy kode dibawah ini dan pastekan didalam widget tersebut,
<div class="footer-contact">
<p><label><span><i class="fa fa-user"></i></span></label>Nama Saya<br/>
<label><span><i class="fa fa-map-marker"></i></span></label>Alamat Saya</p>
<p class="phone"><label><i class="fa fa-whatsapp"></i></label>
<span>Nomor Whatsapp Saya</span><br/>
<label><i class="fa fa-facebook-official"></i></label>
<span>Facebook Saya</span><br/>
<label><i class="fa fa-envelope-o"></i></label>
<span>Alamat Email Saya</span><br/>
<label><i class="fa fa-rss"></i></label>
<span class="sotabilo aa"><a target="_blank" class="murub" href="https://www.blogger.com/follow.g?blogID=MasukkanIDBLOG">Follow blog</a></span>
</p>
</div>
<style>.sotabilo{padding:1px 4px 2px;border-radius:3px;color:#fff;font-weight:bold}</style>
Untuk data data kontak yang ada diwidget tersebut silahkan ganti dengan milikmu, kemudian Simpan atau Save.

#Kedua kamu akan edit dibagian Layout "NAVIGASI",

silahkan kamu klik tombol edit kembali, kemudian copy kode yang saya sediakan dibawah ini dan pastekan diwidget Navigasi tersebut,
<div style="padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #ccc;padding-left:5px;border-left:5px solid #ccc;">
<a class="murub" style="color:white" href="/p/About.html" target="_blank" title="Tentang">About<span style="background:transparent" class="sasabilo"><i class="fa fa-user-circle-o"></i></span></a>
</div>
<div style="padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #ccc;padding-left:5px;border-left:5px solid #ccc;">
<a class="murub" style="color:white" href="/p/Contact.html" target="_blank" title="Contact">Contact<span style="background:transparent" class="sasabilo"><i class="fa fa-envelope-o"></i></span></a>
</div>
<div style="padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #ccc;padding-left:5px;border-left:5px solid #ccc;">
<a class="murub" style="color:white" href="/p/Disclaimer.html" target="_blank" title="Disclaimer">Disclaimer<span style="background:transparent" class="sasabilo"><i class="fa fa-book"></i></span></a>
</div>
<div style="padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #ccc;padding-left:5px;border-left:5px solid #ccc;">
<a class="murub" style="color:white" href="/p/privacy-policy.html" target="_blank" title="Privacy Policy">Privacy Policy<span style="background:transparent" class="sasabilo"><i class="fa fa-lock"></i></span></a>
</div>

#Ketiga kamu akan edit dibagian Layout "NEWSLETTER" atau kotak "Follow By Email",

silahkan kamu klik tombol edit kembali, kemudian copy kode HTML dan CSS 1paket dibawah ini dan pastekan di widget tersebut, lihat kode yang saya tandai, lalu ganti dengan feedburner milikmu, terakhir Simpan atau save widget tersebut.
<style>
#newsletter5 p{font-family:'Poppins',sans-serif;font-size:13px;} .emailfooter{margin:auto;text-align:center} #newsletter5 .emailfooter form{margin:0;padding:0;float:left} #newsletter5 .emailfooter input{border-radius:3px;background:transparent;padding:12px;color:#fff;font-size:14px;margin-bottom:10px;border:1px solid #fff} #newsletter5 .emailfooter input:focus{background:rgba(255,255,255,.05);color:#fff;outline:none} #newsletter5 .emailfooter .submitfooter{background:transparent;color:#fff;padding:12px 16px;margin:0 0 0 5px;font-size:14px;cursor:pointer;border:1px solid #fff;border-radius:3px;transition:all .3s} #newsletter5 .emailfooter .submitfooter:focus,#newsletter5 .emailfooter .submitfooter:hover{transition:all ease .5s all-in-out;background:#fff;color:#ff69b4;outline:none;box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23)}
</style>
<div id='newsletter5'>
<p>Subscribe to get all the latest content from us that will be sent directly to your email inbox.</p>
<div class="emailfooter">
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=AnirockSite', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Email address&quot;;}" onfocus="if (this.value == &quot;Email address&quot;) {this.value = &quot;&quot;;}" type="text" value="Email address" />
<input name="uri" type="hidden" value="AnirockSite" />
<input name="loc" type="hidden" value="en_US" />
<input class="submitfooter" type="submit" value="Subscribe" />
</form>
</div></div>

Akhir Kata
Sekian tutorial cara mendesain tiga layout widget dibagian footer blog yang dapat saya bagikan, jika ada kekurangan atau kesalahan kamu dapat berkomentar dibawah atau menghubungi saya langsung, Dan Semoga Bermanfaat :D

Creativity of codes and exploiting, with code we can do something fun.
Facebook Instagram Twitter
Show Comments!
Hide comments

0 Response to "Cara Mendesain Tiga Layout Widget Dibagian Footer Blog #2"

Kebijakan berkomentar :

Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

Dilarang berkomentar menggunakan Link Aktif,

Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel

© Copyright 2020 Anirock Site - All Rights Reserved Created With