Şık Footer Alanı Ekleme(Blogger,Wordpress vb) | Cem Özer GÜNGÖR | Blog
Anasayfa Oyun Program Blogger Wordpress SEO Gizlilik Politikası Hakkımda İletişim Sitemap

10 Şubat 2019 Pazar

Şık Footer Alanı Ekleme(Blogger,Wordpress vb)

Şık Footer Alanı Ekleme(Blogger,Wordpress vb)
Şık Footer Alanı Ekleme(Blogger,Wordpress vb)
#wordpress #blogger #css #javascript #footer #style #styles #blog #add #eklemek

Merhabalar,
Sizde sitenize çok güzel bir footer alanı eklemek ister misiniz?
Aşağıda ki adımları adım adım uygulayarak siz de bu güzel footer alanını sitenize ekleyebilirsiniz.


1-<footer class='footerKodunu aratın ve çıkan bloğu aşağıda ki kodla değişitirin

 <footer class='ct-footer'>
  <div class='container-fluid'>
    <div class='subscribe-widget2' id='subwid2'>
<div class='form-promo2'>
  <font color='green'><i class='fa fa-envelope'/></font>
<h3>Blog Yazılarını Kaçırma</h3>
<h4>Bu blogda yayımlanacak yeni yazılardan haberdar olmak için e-posta adresini yazıp abone olabilirsin.</h4>
</div>
<div class='tl-rssform'>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=feedburnerUserName&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
  <input class='mail-field2' name='email' placeholder='Mail adresini yaz' type='text'/>
  <input name='uri' type='hidden' value='cemozergungor'/>
  <input name='loc' type='hidden' value='tr_TR'/>
  <input class='mail-button2' type='submit' value='Abone Ol'/>
</form>
</div>
<div class='form-policy2'><p><span>*</span>Kesinlikle spam mail gönderilmez </p></div>
</div>
    <ul class='ct-footer-list text-center-sm'>
      <li>
        <h2 class='ct-footer-list-header'>Blogger</h2>
        <ul>
          <li>
            <a href='#'><i class='far fa-hand-point-right'/> DÜZENLE</a>
          </li>
          <li>
            <a href='#'><i class='far fa-hand-point-right'/> DÜZENLE</a>
          </li>
          <li>
            <a href='#'><i class='far fa-hand-point-right'/> DÜZENLE</a>
          </li>
          <li>
            <a href='#'><i class='far fa-hand-point-right'/> DÜZENLE</a>
          </li>
        </ul>
      </li>
      <li>
        <h2 class='ct-footer-list-header'>SEO</h2>
        <ul>
          <li>
            <a href='#'><i class='far fa-hand-point-right'/> DÜZENLE</a>
          </li>
        </ul>
      </li>
      <li>
        <h2 class='ct-footer-list-header'>Adsense</h2>
        <ul>
          <li>
            <a href='#'><i class='far fa-hand-point-right'/> DÜZENLE</a>
          </li>
        </ul>
      </li>
      <li>
        <h2 class='ct-footer-list-header'>Oyun</h2>
        <ul>
          <li>
            <a href='#'><i class='far fa-hand-point-right'/> DÜZENLE</a>
          </li>
          <li>
            <a href='#'><i class='far fa-hand-point-right'/> DÜZENLE</a>
          </li>
          <li>
            <a href='#'><i class='far fa-hand-point-right'/> DÜZENLE</a>
          </li>
          <li>
            <a href='#'><i class='far fa-hand-point-right'/> DÜZENLE</a>
          </li>
          <li>
            <a href='#'><i class='far fa-hand-point-right'/> DÜZENLE</a>
          </li>
        </ul>
      </li>
      <li>
        <h2 class='ct-footer-list-header'>Film</h2>
        <ul>
          <li>
            <a href='#'><i class='far fa-hand-point-right'/> DÜZENLE</a>
          </li>
          <li>
            <a href='#'><i class='far fa-hand-point-right'/> DÜZENLE</a>
          </li>
          <li>
            <a href='#'><i class='far fa-hand-point-right'/> DÜZENLE</a>
          </li>
          <li>
            <a href='#'><i class='far fa-hand-point-right'/> DÜZENLE</a>
          </li>
        </ul>
      </li>
    </ul>
    <div class='ct-footer-meta text-center-sm'>
      <div class='row'>
        <div class='col-sm-6 col-md-2'>
          <img alt='logo' height='50' src='https://lh3.googleusercontent.com/-gMeo-rov_d0/XGBkdZvX-kI/AAAAAAAABOk/jjS-s3VMjuI5FZMJ0yUl9bc0mseYy3WrACLcBGAs/h120/icon.png' title='cem özer güngör logo' width='50'/>
        </div>
        <div class='col-sm-6 col-md-3'>
          <address>
            <span>SiteAdı<br/></span>Blog Yazarı<br/>
            Pendik,İstanbul<br/>
            <span>Tel: <a href='tel:5555555555'>(555) 555-5555</a></span>
          </address>
        </div>
        <div class='col-sm-6 col-md-2 ct-u-paddingTop10'>
          <a href='#EKLENECEK' target='_blank'><img alt='app store' src='https://www.solodev.com/assets/footer/appstore.png' title='cem özer güngör appstore uygulaması'/></a>
        </div>
        <div class='col-sm-6 col-md-2 ct-u-paddingTop10'>
          <a href='#EKLENECEK' target='_blank'><img alt='google play store' src='https://www.solodev.com/assets/footer/androidstore.png' title='cem özer güngör android uygulama'/></a>
        </div>
        <div class='col-sm-6 col-md-3'>
          <ul class='ct-socials list-unstyled list-inline'>
            <li>
              <a href='#Facebooksayfanız' target='_blank'><img alt='facebook' src='https://www.solodev.com/assets/footer/facebook-white.png' title='cem özer güngör facebook'/></a>
            </li>
            <li>
              <a href='#twittersayfanız' target='_blank'><img alt='twitter' src='https://www.solodev.com/assets/footer/twitter-white.png' title='cem özer güngör twitter'/></a>
            </li>
            <li>
              <a href='#youtubekanalınız' target='_blank'><img alt='youtube' src='https://www.solodev.com/assets/footer/youtube-white.png' title='cem özer güngör youtube'/></a>
            </li>
            <li>
              <a href='#instagramprofiliniz' target='_blank'><img alt='instagram' src='https://www.solodev.com/assets/footer/instagram-white.png' title='cem özer güngör instagram'/></a>
            </li>
            <li>
              <a href='#pinterestkanalınız' target='_blank'><img alt='pinterest' src='https://www.solodev.com/assets/footer/pinterest-white.png' title='cem özer güngör pinterest'/></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class='ct-footer-post'>
    <div class='container-fluid'>
      <div class='inner-left'>
        <ul>
          <li>
            <a href='/p/gizlilik-politikas.html'>Gizlilik Politikası</a>
          </li>
          <li>
            <a href='/p/hakkmda.html'>Hakkımda</a>
          </li>
          <li>
            <a href='/p/forum.html'>İletişim</a>
          </li>
        </ul>
      </div>
      <div class='inner-right'>
        <p>Copyright <i class='fas fa-copyright'/> 2013-2019 
 &lt;a href=&quot;https://www.cemozergungor.com/&quot; title=&quot;Cem Özer GÜNGÖR | Blog&quot;&gt;Tüm Hakları Saklıdır&lt;/a&gt;</p>
        <p><i class='fas fa-user-secret'/> İzinsiz Kopyalanamaz,Paylasilamaz&lt;/p&gt;</p>
      </div>
    </div>
  </div>
</footer> 

2- <b:skin> kodunu aratın ve aşağıda ki kodları <b:skin> kodunun hemen altına ekleyin


 /* CEMOZERGUNGOR.COM FOOTER ALANI */
.subscribe-widget2{position:relative;overflow:hidden;border:1px solid #e6e6e6;text-align:center;margin:25px 0;padding:30px 0}
.form-promo2 i{font-size:50px;margin-bottom:25px}
.form-promo2 h3{color:white;text-transform:uppercase;margin:0 0 10px 0}
.form-promo2 h4{color:white;font-weight:400;font-size:17px;margin:0 0 15px}
.form-policy2 p{color:white;font-size:12px;margin:10px 0 0}
.form-policy2 p span{color:red;padding-right:5px}
input.mail-field2:hover,input.email-field:focus{border:1px solid rgba(0,0,0,0.3)!important;}
input.mail-field2{font:normal normal 12px 'Open Sans', sans-serif;display:inline-block;width:50%;color:white;background:none!important;border:1px solid #e6e6e6!important;text-indent:20px;outline:none!important;height:20px;padding:10px 0!important;}
input.mail-button2{font:normal normal 14px 'Open Sans', sans-serif;font-weight:500;height:43px;cursor:pointer;border:1px solid #e6e7e8;background:#f1921a;color:#fff;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;outline:0;transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;padding:0 10px}
input.mail-button2:hover{background:green;color:white}
.sora-author-box2 {
border: 1px solid #e6e7e8;
background: #fff;
overflow: hidden;
padding: 5px;
margin: 10px 0;
font-size:12px;
}
html,
body,
img,
figure {
  max-width: 100%;
}
html,
body {
  overflow-x: hidden;
  color: #000;
  -ms-overflow-style: scrollbar;
  -webkit-font-smoothing: antialiased;
}
a,
a:hover,
a:focus,
a:active {
  text-decoration: none;
  color: inherit;
}
a {
  -webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}
.ct-u-paddingTop10 {
  padding-top: 10px !important;
}
.ct-footer {
  background-color: #111;
  padding-top: 70px;
  margin-top: 20px;
  position: relative;
}
.ct-footer-pre {
  width: 100%;
  padding-bottom: 55px;
  border-bottom: 1px solid #555;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ct-footer-pre span {
  font-family: 'Open Sans Condensed', sans-serif;
  color: #ebebeb;
  font-size: 30px;
}
.ct-footer-pre .form-group {
  position: relative;
  margin: 0;
}
.ct-footer-pre .form-group:before,
.ct-footer-pre .form-group:after {
  content: '';
  display: table;
}
.ct-footer-pre .form-group:after {
  clear: both;
}
.ct-footer-pre .form-group input {
  border: 1px solid #00bff3;
  background-color: #333;
  color: #fff;
  height: 50px;
  padding: 0 30px;
  margin: 0 5px;
  border-radius: 0 !important;
}
.ct-footer-pre .form-group button {
  height: 50px;
  position: relative;
  width: 80px;
  padding: 0
}
.ct-footer-list {
  padding: 50px 0;
  list-style: none;
  padding-left: 0;
  display: table;
  width: 100%;
  border-bottom: 1px solid #555;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ct-footer-list > li .ct-footer-list-header {
  font-family: 'Open Sans Condensed', sans-serif;
  color: #00bff3;
  font-size: 30px;
}
.ct-footer-list > li ul {
  list-style: none;
  padding-left: 0;
}
.ct-footer-list > li ul li a {
  color: #fff;
}
.ct-footer-list > li ul li a:hover,
.ct-footer-post a:hover {
  text-decoration: underline;
}
.ct-footer-post {
  background: #000;
  padding: 30px 0;
}
.ct-footer-post .inner-left,
.ct-footer-post .inner-right {
  padding: 20px 0;
}
.ct-footer-post ul {
  list-style: none;
  padding-left: 0;
  margin: 0 -20px;
}
.ct-footer-post ul li {
  display: inline-block;
  margin: 0 20px;
}
.ct-footer-post a {
  color: #fff;
}
.ct-footer-post p {
  color: #fff;
}
.ct-footer-meta {
  padding-top: 30px;
}
.ct-footer-meta .ct-socials {
  padding: 20px 0;
}
.ct-footer-meta .ct-socials li {
  padding: 0 3px;
}
.ct-footer--with-button {
  padding-top: 150px;
}
address {
  color: #fff;
  display: inline-block;
}
address span {
  font-weight: 600;
}
address a {
  color: #fff;
}
address a:hover {
  text-decoration: underline;
}
.btn {
  font-family: 'Open Sans Condensed', sans-serif;
  border-radius: 0;
  border: none;
  text-transform: uppercase;
  color: #111;
  font-size: 26px;
  padding: 12px 30px;
}
.btn.btn-motive {
  background-color: #00bff3;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
}
.btn.btn-motive:hover,
.btn.btn-motive:hover:active {
  background-color: #00bff3;
}
.btn.btn-violet {
  color: #fff;
  background-color: #4f4f99;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
}
.btn.btn-violet:hover {
  background-color: #37376b;
}
.btn.btn-violet:hover:active {
  background-color: #2f2f5b
}
.btn.btn-green {
  color: #fff;
  background-color: #43670f;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
}
.btn.btn-green:hover {
  background-color: #36520c;
}
.btn.btn-green:hover:active {
  background-color: #314a0b;
}
.btn.btn-red {
  color: #fff;
  background-color: #da2229;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
}
.btn.btn-red:hover {
  background-color: #ae1b21;
}
.btn.btn-red:hover:active {
  background-color: #9d181e
}
.btn.btn-white {
  background-color: #fff;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
}
.btn.btn-white:hover {
  background-color: #d9d9d9;
}
.btn.btn-white:hover:active {
  background-color: #c9c9c9
}
.btn.btn-large {
  padding: 20px 50px;
  font-size: 30px;
  white-space: normal;
}
.ct-mediaSection {
  background-attachment: fixed;
}
.ct-section_header--type1 {
  font-family: 'Open Sans Condensed', sans-serif;
  color: #000;
  font-size: 115px;
  text-transform: uppercase;
}
.ct-section_header--type2 small {
  font-family: 'coquette', fantasy;
  font-size: 58px;
  line-height: .7;
  display: block;
  font-weight: 700;
  position: relative;
  left: -12px;
}
.ct-section_header--type2 span {
  font-family: 'Bebas Neue';
  font-size: 115px;
  line-height: .8;
}
.ct-section_header--type2 img {
  display: inline-block;
  float: left;
  position: relative;
  top: 15px;
  padding-right: 3px;
}
.ct-section_header--type3 {
  text-align: center;
}
.ct-section_header--type3 small {
  font-family: 'coquette', fantasy;
  font-size: 50px;
  padding: 15px 0;
  font-weight: 700;
  color: #fff;
  background-image: url("/core/fileparse.php/16/urlt/../images/ribbon.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: block
}
.ct-section_header--type3 span {
  font-family: 'Bebas Neue';
  font-size: 150px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: .85
}
.ct-section_header--type4 {
  text-align: center;
}
.ct-section_header--type4:before,
.ct-section_header--type4:after {
  content: '';
  display: table
}
.ct-section_header--type4:after {
  clear: both
}
.ct-section_header--type4 small {
  font-family: 'coquette', fantasy;
  font-size: 50px;
  color: inherit;
  font-weight: 700;
  display: block
}
.ct-section_header--type4 span {
  font-family: 'nimbus-sans-condensed', sans-serif;
  font-weight: 400;
  font-weight: bold;
  font-size: 150px;
  text-transform: uppercase;
  display: block;
  line-height: .7
}
.ct-section_header + p {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -1.5px;
  text-align: center;
}
.ct-section_header--type4 + p {
  font-family: 'nimbus-sans-condensed', sans-serif;
  font-weight: 400;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}

/* Media Queries */

@media (min-width:1200px) {
  .ct-footer-pre {
    display: table;
  }
  .ct-footer-pre > .inner {
    display: table-cell;
    vertical-align: middle;
  }
  .ct-footer-list > li {
    width: 20%;
    display: table-cell;
    vertical-align: top;
  }
  .ct-footer-list > li:last-child {
    width: 7%;
  }
}

@media (max-width:1199px) {
  .ct-footer-pre .form-group {
      padding-top: 15px
  }
}
@media (max-width: 1199px) {
  .ct-footer-list > li {
    display: inline-block;
    float: left;
  }
}
@media (min-width:992px) {
  .ct-footer-post .inner-left {
    float: left;
  }
  .ct-footer-post .inner-right {
    float: right;
  }
}
@media (max-width:991px) {
  .ct-footer-post {
    text-align: center;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .ct-footer-list > li {
    width: 33.3333%;
  }
}
@media (min-width:768px) {
  .ct-footer-post p {
    display: inline-block;
  }
  .ct-footer-post p + p {
    padding-left: 50px;
  }
}
@media (max-width:767px) {
  address {
    padding-top: 30px;
  }
}
@media (min-width: 480px) and (max-width:767px) {
  .ct-footer-list > li {
    width: 50%;
  }
}
@media (min-width:480px) {
  .ct-footer-pre .form-group button {
    top: -1px;
  }
  .ct-footer-pre .form-group input {
    width: 331px;
  }
}
@media (max-width:479px) {
  .ct-footer-pre .form-group input {
    float: left;
    width: 70%;
    margin: 0;
  }
  .ct-footer-pre .form-group button {
    float: left;
    width: 30%;
  }
  .ct-footer-list > li {
    width: 100%;
    text-align: center;
  }
  .ct-footer-list {
    padding: 20px 0;
  }
  .btn.btn-large {
    padding: 20px 10px;
    line-height: .9;
    font-size: 26px;
    letter-spacing: -.2px;
  }
  .ct-section_header--type1 {
    font-size: 60px;
    line-height: .8;
  }
  .ct-section_header + p {
    font-size: 22px;
  }
  .ct-section_header--type3 small {
    font-size: 25px;
  }
  .ct-section_header--type4 small {
      font-size: 40px;
  }
  .ct-section_header--type3 span {
    font-size: 90px;
  }
  .ct-section_header--type4 span {
      font-size: 80px;
  }
  .ct-section_header--type4 + p {
    font-size: 28px;
  }
} 

3- <head> kodunu aratın ve aşağıda ki kodları hemen altına ekleyin

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>


İşlem bu kadar!
Kaydedip,sitemizi açıyoruz ve en alta iniyoruz.Kontrol ediyoruz.
Herhangi yapamadığınız bir nokta olursa,yorum kısmından belirtebilirsiniz.

Hiç yorum yok:

Yorum Gönder

Yorum Kuralları
*Lütfen yanlızca yazı ile ilgili yorumlar yazınız.
*Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın.
*Bir Google Hesabınız yoksa Yorumlama Biçimi seçeneklerinden "Anonim" tıklayıp yorum yapabilirsiniz.