Cara Membuat About Me Di Sidebar Seperti Mafsyah
Cara Membuat About Me Di Sidebar - Bagaimana Cara Membuat About Me Di Sidebar Seperti Mafsyah .. Kali Ini Kita Akan Membahas Atau Menerapkan Cara Memasang About Me Di Sidebar
About Me Ini Sangat Berguna Untuk Menyampaikan Sebuah Keterangan Website Kalian Isi Dari Website Kalian Ataupun Perkenalan Admin .. Lalu Bagaimana Caranya Memasang About Me Di Side Bar Seperti Mafsyah .. Langsung Saja Ke Tutorialnya ..
- Masuk Ke Blogger > Template > Edit Html Cari Kode ]]></b:skin> atau </style> Letakan Kode Di Bawah Sebeleum Kode Tersebut
/*========== About Me Section Shared By Mafsyah ==========*/
.about-me {
background: #fff;
overflow: hidden;
margin-bottom: 30px;
border: 1px solid #eee;
}
.cover-img-section {
border-bottom: 2px solid $(keycolor);
min-height: 125px;
}
.cover-img-section h2 {
padding: 20px;
font-size: 15px;
line-height: 19px;
text-transform: capitalize;
color: #444;
text-align: center;
font: $(sidebar.font);
text-transform: uppercase;
border-bottom: 2px solid $(keycolor);
}
.cover-img-section h2:after {
content: "";
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 12px solid $(keycolor);
position: absolute;
left: 50%;
margin: auto;
right: 0;
margin-left: -12px;
bottom: -12px;
}
.cover-img-section img {
height: 200px;
width: 100%;
object-fit: cover;
}
.profile-img-section {
display: inline-block;
width: 100%;
text-align: center;
}
#profile-img {
display: inline-block;
width: 100%;
text-align: center;
}
img#Image1_img {
height: 200px;
width: 100%;
object-fit: cover;
}
.profile-img-section .widget-content {
position: relative;
left: 67%;
width: 100%;
display: inline-block;
text-align: center;
margin: auto;
float: none;
height: 30px;
}
.p-img {
width: 100%;
height: 36px;
display: inline-block;
position: relative;
}
img#Image2_img {
height: 100px !important;
width: 100px !important;
border: 2px solid $(keycolor);
border-radius: 100%;
position: relative;
object-fit: cover;
top: -55px;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
}
img#Image2_img:hover {
box-shadow: 0 0 22px rgba(0, 0, 0, 0.57);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);
}
.profile-caption-section {
overflow: hidden;
width: 100%;
display: block;
}
#profile-caption .widget-content {
padding: 0 20px;
padding-top: 0px;
color: #777;
font-size: 12px;
line-height: 25px;
display: block;
text-align: center;
}
#profile-caption h2 {
text-align: center;
font-size: 18px;
line-height: 20px;
font-weight: 600;
text-transform: uppercase;
color: #454545;
margin: 10px 0;
}
/*======== PAGE LAYOUT : SIDEBAR WRAPPER : Shared By Mafsyah ========*/
body#layout #sidebar-wrapper {
overflow: visible;
width: 30%;
float: right;
}
body#layout #sidebar-wrapper:before {
content: 'Sidebar';
font-size: 17px;
font-family: monospace;
font-weight: 600;
color: #000;
text-transform: uppercase;
letter-spacing: 2px;
background: #fff;
padding: 20px;
display: block;
border: 1px solid #ccc;
border-bottom: none;
}
body#layout .about-me {
background: #f8f8f8;
overflow: hidden;
border: 1px solid #ccc;
border-bottom: none;
}
body#layout .about-me:before {
content: 'About Me Section';
font-size: 17px;
color: #666;
padding: 20px;
display: inline-flex;
width: 100%;
font-family: Roboto, sans-serif;
border-bottom: 1px solid #ccc;
}
body#layout .about-me div.section {
background-color: transparent;
border: none;
}
body#layout .about-me .section h4 {
display: none;
}
body#layout .about-me div.layout-widget-description {
display: none;
}
body#layout #hide-about .widget-content {
background: #ff4431;
color: #fff;
}
body#layout #hide-about .editlink {
color: #757575 !important;
background: #fff;
padding: 0 10px;
border-radius: 10px;
line-height: 15px;
}
body#layout #hide-about:before {
content: "";
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid #ff4431;
position: absolute;
left: 50%;
margin: auto;
right: 0;
margin-left: -12px;
top: 6px;
}Selanjutnya Anda Cari Kode Sidebar Anda Dengan Cara Ctrl + F Sidebar Letakan Kode Di Bawah Ini Di Sidebar Sesuai Yang Anda Ingingkan
<!-- about me start here Shared By Mafsyah -->
<div class='about-me'>
<div class='cover-img-section'>
<b:section class='cover-img' id='cover-img' maxwidgets='1' showaddelement='no'>
<b:widget id='Image1' locked='true' title='Tentang Saya' type='Image' version='1'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPUqeq2RSZI35LOS4vh4xgVzG4UnS3vy4qEyG2k4LO6cqRB6Wvs8PuGDuml7bZ_i2PEPNdkvtVpgHbXqqPXJ11_OllGIdH22iEK4mco0YSrqzYl0N9UjPQ_wvtQWyQRGkR_mLhLiuYKMs/s1600/coollogo_com-83031172.png</b:widget-setting>
<b:widget-setting name='displayHeight'>97</b:widget-setting>
<b:widget-setting name='sectionWidth'>228</b:widget-setting>
<b:widget-setting name='shrinkToFit'>true</b:widget-setting>
<b:widget-setting name='displayWidth'>228</b:widget-setting>
<b:widget-setting name='link'/>
<b:widget-setting name='caption'/>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2>
<data:title/>
</h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:link'>
<a expr:href='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</a>
<b:else/>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div class='profile-img-section'>
<b:section class='profile-img' id='profile-img' maxwidgets='1' showaddelement='no'>
<b:widget id='Image2' locked='true' title='Your Picture' type='Image' version='1'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRwUsnCNBJFWD088w-JnS4LD5lw2x-yFog9klJCSCXkR4t1e_1D4-GhvN7JymkJZyw51XrSuQYYZQWX-BlbZVG_el3vq8ku-zBvb8S31tfeSs0m0ex2ML6VEhj_2clkxmF28SMns9xceo/s1600/user.png</b:widget-setting>
<b:widget-setting name='displayHeight'>228</b:widget-setting>
<b:widget-setting name='sectionWidth'>228</b:widget-setting>
<b:widget-setting name='shrinkToFit'>true</b:widget-setting>
<b:widget-setting name='displayWidth'>228</b:widget-setting>
<b:widget-setting name='link'/>
<b:widget-setting name='caption'/>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:link'>
<a expr:href='data:link'>
<center>
<div class='p-img'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</div>
</center>
</a>
<b:else/>
<center>
<div class='p-img'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</div>
</center>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>
<div class='profile-caption-section'>
<b:section class='profile-caption' id='profile-caption' maxwidgets='1' showaddelement='no'>
<b:widget id='Text1' locked='true' title='Mafsyah' type='Text' version='1'>
<b:widget-settings>
<b:widget-setting name='content'><![CDATA[Mafsyah.com - Di Buat Pada Tahun 2017 <div>Sampai Sekarang Masih Berkembang</div><div>Dan Berbagi Tentang Semua Post Sebagai Berikut</div><div>Template Tutorial Tips And Trick Dan Sosial Media</div>]]></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'>
<data:title/>
</h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>
<div class='profile-social-icons'>
<b:section class='profile-social' id='profile-social' maxwidgets='1' showaddelement='no'>
<b:widget id='LinkList88' locked='true' title='profile social icons' type='LinkList' version='1'>
<b:widget-settings>
<b:widget-setting name='link-3'>https://www.facebook.com/PinguPigg</b:widget-setting>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='text-1'>youtube</b:widget-setting>
<b:widget-setting name='link-1'>https://www.youtube.com/channel/UCQJ-K5PYrzFdchq0fDDqutg</b:widget-setting>
<b:widget-setting name='text-0'>instagram</b:widget-setting>
<b:widget-setting name='link-2'>http://www.twitter.com/mafsyahblogger</b:widget-setting>
<b:widget-setting name='text-3'>facebook</b:widget-setting>
<b:widget-setting name='link-0'>http://www.instagram.com/officialmafsyah</b:widget-setting>
<b:widget-setting name='text-2'>twitter</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-content'>
<ul id='profile-icons'>
<b:loop values='data:links' var='link'>
<li>
<a expr:class='data:link.name' expr:href='data:link.target' expr:title='data:link.name' target='_blank'/>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div class='hide-about-me'>
<b:section class='hide-about' id='hide-about' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML102' locked='true' title='Hide About Me' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'/>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:content == "hide"'>
<style>
.about-me {
display: none;
}
</style>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
<!-- about me end here -->
Ubah Yang Berwarna Merah Dengan Punya Anda.. Apabila Ada Pertanyaan Silahkan Tanyakan
Sekian Tutorial Kali Ini Cara Membuat About Me / Tentang Saya Di Sidebar Semoga Bermanfaat
Sekian Tutorial Kali Ini Cara Membuat About Me / Tentang Saya Di Sidebar Semoga Bermanfaat
Demo
Posting Komentar untuk "Cara Membuat About Me Di Sidebar Seperti Mafsyah"