Menu

  • Home
  • Latest
  • Trending
  • FORUM
  • Activity
  • Members
  • Announcement
  • Need help?

Categories

  • Android (17)
  • Apps (39)
  • Blogger (22)
  • Computer (10)
  • Cryptocurrency (2)
  • Culinary (1)
  • Download (30)
  • Entertainment (1)
  • Event (17)
  • Game (3)
  • Internet (21)
  • Laptop (74)
  • News (3)
  • OS (16)
  • Peripheral (25)
  • Personal (259)
  • Publisher (3)
  • Review (23)
  • Smartphone (56)
  • Social Media (7)
  • Tablet (1)
  • Technology (159)
  • Tips (79)
  • Travel (5)
  • Tutorial (138)
  • Unboxing (18)
  • Video (48)
  • Web (27)
  • Windows (6)
  • Wordpress (20)
  • YouTube (22)

Tags

Advertise Android Android 4 KitKat Android 9 Pie ASUS Bardi Blog Coding Competition CSS ExpertBook Firmware Game Mobile Google Google Play Store HTML IndiHome Laptop Bisnis Laptop Gaming Plugins Press Release Republic of Gamers ROG Phone Smart Home Smartphone Gaming Spesifikasi dan Harga Technology Troubleshooting Update Upgrade VivoBook VPN WhatsApp Widget Youtube Zenbook Zenfone Zenfone 3 Zenfone 3 Max Zenfone 4 Zenfone 5 Zenfone 6 Zenfone Max Zenfone Max Pro M1 Zenfone Zoom S
XKOMODOTCOM - Sharing is Caring
No Result
View All Result
  • Account
XKOMODOTCOM
XKOMODOTCOM - Sharing is Caring
Home Web Blogger
Modifikasi Footer Magone

Cara Modifikasi Footer Pada Template MagOne – Magazine Blogger Template

Febri Tri Harmoko by Febri Tri Harmoko
April 25, 2017
in Blogger, Tutorial
0
0

Bagaimana caranya mengganti tampilan atau mengatur widget pada footer template Magone versi blogger. Kamu bisa lihat bagian footer www.xkomo.com tampilan nya berbeda dengan tampilan footer bawaan magone.

Jika kamu tertarik untuk mengganti seperti tampilan milik xkomo.com silahkan simak tutorial berikut:

Langkah #1

Nonaktifkan Kunci Widget pada Footer Column 1 dan Footer Column 2, Caranya:

  • Buka Theme > Edit HTML
  • Cari tag <div id=’footer’> kemudian ganti locked=’true’ menjadi locked=’false’
  • perhatikan pada tag widget <b:widget ….>

[text text_format=”on”]

<div id='footer'>
...

...
<b:widget id='HTML8' locked='false' title='' type='HTML'>

[/text]

  • Cari aja Locked=’true’ di widget nya, harusnya ada 2 kode widget di dalam <div id=’footer’> yang kondisinya locked=’true’

Setelah ketemu dan berhasil di ubah, sekarang lanjut ke tahap ke 2.

Langkah #2

  • Buka Layout dan perhatikan pada Footer Column 1 dan Footer Column 2
    sekarang sudah bisa kamu hapus atau ganti dengan widget lain.
  • Silahkan tambahkan widget HTML/Javascript ke Footer Coloumn 1 & 2
  • Isi masing – masing widget dengan kode HTML / Javascript sesuai kebutuhan kamu 🙂

Langkah #3

Jika ingin menambahkan Profile blog seperti yang ada di xkomo.com, silahkan ikuti cara ini:

Copy Code ini ke widget HTML/Javascript di Footer Coloumn 1
[text text_format=”on”]

<div id=id-card">
<img src="https://1.bp.blogspot.com/-sid62PCoJlw/WJYeWEQcXHI/AAAAAAAAGTA/gl5tkT-AtkEtnlLGSyKp-UgLLJ01jzm9ACLcB/s1600/BLOG%2BX%2BKOMO%2BAva.jpg" class="img-id-card"/>
<div class="title-id-card">
<span class="name-id-card">Febri Tri Harmoko</span><span class="fa-stack fa-lg">
<i class="fa fa-check fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x fa-certificate"></i>
</span>
<span class="caption-id-card">Hanya Calon Perawat Yang Suka Menulis & Berbagi </span>
</div>
<div class="subscribe-id-card">
<span class="followme-id-card"><a href="//plus.google.com/u/0/b/105788850796511825588/105788850796511825588" target="_blank" title="Follow Me"><i class="fa fa-user-circle-o" aria-hidden="true"></i> Follow Me</a></span>
<span class="join-id-card"><a href="//www.blogger.com/follow.g?view=FOLLOW&blogID=4848727032668058109" target="_blank" title="Join This Site"><i class="fa fa-users" aria-hidden="true"></i> Members</a></span>
</div>
</div>

[/text]

Silahkan ganti yang saya tandai di atas sesuai kebutuhan kamu.

Selanjutnya simpan Style CSS berikut di Admin Header Custom Code (HTML / JavaScript / CSS)

[text text_format=”on”]

<style type="text/css">
div#id-card {
margin: 0 auto;
padding: 0;
}

img.img-id-card {
float: left;
margin: 5px 10px 10px 0;
position: relative;
clear: both;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
border-radius: 100%;
margin-bottom: 5px;
width: 65px;
}
span.name-id-card {
font-weight: bolder;
margin: 0 auto;
font-size: medium;
border-bottom: 1px dotted #333333;
font-size: 14px;
}
span.followme-id-card a {
padding: 5px 8px 3px 8px;
background: #ff3d00;
border-radius: 3px;
color: white;
font-weight: bold;
border-bottom: 3px solid #d63300;
}
span.join-id-card a {
padding: 5px 8px 3px 8px;
background: #ff3d00;
border-radius: 3px;
color: white;
font-weight: bold;
border-bottom: 3px solid #d63300;
}
.subscribe-id-card {
margin-top: 8px;
font-size:10px;
display: inline-block;
}
span.caption-id-card {
font-style: italic;
color: grey;
display:block;
font-size: 12px;
}
span.followme-id-card a:hover, span.join-id-card a:hover {
position: relative;
top: 2px;
border-bottom: 0px solid transparent;
}
span.followme-id-card a:active,span.join-id-card a:active {
box-shadow: inset 2px 2px 0px #d63300;
}
img.img-id-card:hover {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
span.fa-stack.fa-lg {
font-size: 10px !important;
margin-left: 3px;
}
i.fa.fa-check.fa-stack-1x {
color: white;
z-index: 2;
}
i.fa.fa-ban.fa-stack-2x.fa-certificate {
color: #5890ff !important;
z-index: 1;
}
span.-title-contact-info {
font-weight: bolder;
margin: 0 auto;
font-size: medium;
border-bottom: 1px dotted #333333;
font-size: 14px;
font-weight: bolder;
}
div.content-contact-info {
display: block;
margin-top: 3px;
font-size: 12px;
}
span.address-contact-info {
display: inline-block;
margin-bottom: 3px;
}
.copyright-line-1 {
float: left;
margin: 0 auto;
clear:both;
padding-right: 3px;
}

</style>

[/text]

Save 😉 Widget Profile di Footer Coloumn 1 Sudah berhasil kamu tambahkan.

Kemudian Untuk Widget Footer Coloumn 2 bisa kamu tambahkan Kode HTML berikut ke Widget di HTML/Javascript Footer Coloumn 2

[text text_format=”on”]

<div class="contact-info-footer"><span class="-title-contact-info"><i class="fa fa-address-book-o" aria-hidden="true"></i> Contact Info</span>
<div class="content-contact-info"><span class="address-contact-info"><i class="fa fa-map-marker" aria-hidden="true"></i> Jl. Dr. Siwabessy no.14a Telanaipura - Kota jambi / 36122</span><span class="phone-contact-info"><i class="fa fa-comments-o" aria-hidden="true"></i> Jika punya pertanyaan Hubungi saya melalui <a href="http://forum.xkomo.com" target="_blank">Forum X Komo</a>
</span>
</div></div>

[/text]

Silahkan ganti yang saya tandai sesuai kebutuhan kamu.

Terakhir tambhkan kode Style CSS untuk widget ini di Admin Header Custom Code (HTML / JavaScript / CSS) tepat di atas </style>

[text text_format=”on”]

span.-title-contact-info {
font-weight: bolder;
margin: 0 auto;
font-size: medium;
border-bottom: 1px dotted #333333;
font-size: 14px;
font-weight: bolder;
}
div.content-contact-info {
display: block;
margin-top: 3px;
font-size: 12px;
}
span.address-contact-info {
display: inline-block;
margin-bottom: 3px;
}
.copyright-line-1 {
float: left;
margin: 0 auto;
clear:both;
padding-right: 3px;
}

[/text]

Save dan Selesai 🙂

Bagaimana menurut kamu tentang tutorial modifikasi footer Magone template versi blogger ini 🙂 Cukup mudah kan, tidak terlalu sulit.

Jika ada pertanyaan silahkan tulis saja di komentar atau di forum saya (sub-forum Blogger), Jangan lupa untuk bantu share artikel ini dan juga subscribe blog ini jika berkenan 😉

Tags: Template
Previous Post

Cara Install ADB Tools / Fastboot & Android USB Driver

Next Post

Di Undang Ke Acara ASUS Zenfinity 2017

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended Product

PROMO LAPTOP MURAH DI ASUS ONLINE STORE
Promo Hosting Murah di Jagoan Hosting

Recommended Videos

For You
Solusi Tautkan Perangkat WhatsApp Tidak Muncul di HP

Solusi Menu WhatsApp Link Device Tidak Muncul di HP Android/iOS

96 VIEWS
April 25, 2023
Cara Menghubungkan 1 Nomor WhatsApp di 2 HP Android yang Berbeda Tanpa Aplikasi Tambahan

Cara Menghubungkan 1 Nomor WhatsApp di 2 HP Android yang Berbeda Tanpa Aplikasi Tambahan!

105 VIEWS
March 13, 2023
Cara Upgrade Android 13 ROG di Phone 6/6 Pro (AI2201) via FOTA (Firmware Over-The-Air)

Cara Upgrade Android 13 di ROG Phone 6/6 Pro (AI2201) via FOTA (Firmware Over-The-Air)

163 VIEWS
March 3, 2023
Show More

© 2023 XKOMODOTCOM

  • About
  • Contact
  • Disclaimer
  • Privacy Policy
  • Sitemap
  • Terms & Conditions
  • About
  • Contact
  • Disclaimer
  • Privacy Policy
  • Sitemap
  • Terms & Conditions

© 2023 XKOMODOTCOM

No Result
View All Result
  • Account
XKOMODOTCOM
  • MENU
  • Home
  • Latest
  • Trending
  • FORUM
  • Members
  • Announcement
  • Need help?
  • CATEGORIES
  • Cryptocurrency
  • Download
  • Event
  • Internet
    • Social Media
  • Personal
    • Culinary
    • Travel
  • Publisher
  • Review
  • Technology
    • Apps
    • Computer
    • Game
    • Laptop
    • OS
      • Android
      • Windows
    • Peripheral
    • Smartphone
  • Tips
  • Tutorial
  • Unboxing
  • Web
    • Blogger
    • WordPress

© 2023 XKOMODOTCOM

Link Start!

Sign In with Google
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In

Add New Playlist