Sosyal Ağ İkonları Ekleme

27-07-2018, 20:29:43

Twenty Twelve temasında sağ üst köşeye sosyal ağ ikonları eklemek istiyorum. Denemediğim eklenti ve kod kalmadı. Yardımcı olabilecek birisi çıkarsa minettar kalırım.

27-07-2018, 20:35:00

#2

alisahanyalcin

pm den Skype verin yardımcı olayım hocam

27-07-2018, 20:42:31

#3

Kafka

alisahanyalcin adlı üyeden alıntı: mesajı görüntüle

pm den Skype verin yardımcı olayım hocam

Buradan yardımcı olursanız sevinirim. Nereleri düzenlemem gerek gibi bir bilgi vermeniz yeterli. Kendimde öğrenerek ilerlemek istiyorum.

27-07-2018, 21:00:18

#4

~~SoildStar~~

Üyeliği durduruldu

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">

<div class="sosyal">
<h1>Sosyal Medya Hesaplarımızı Takip Edin.</h1>
<ul>
<li><a href="https://facebook.com"><i class="fa fa-facebook-official" aria-hidden="true"></i></a></li>
<li><a href="https://twitter.com"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="http://linkedin.com"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
<li><a href="http://pinterest.com"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
<li><a href="https://www.youtube.com/"><i class="fa fa-youtube-square" aria-hidden="true"></i></a></li>
<li><a href="https://plus.google.com"><i class="fa fa-google-plus-square" aria-hidden="true"></i></a></li>
</ul>
</div>

#s6 .sosyal{
position: absolute;
width: 80%;
height: 30%;
min-width: 650px;
text-align: center;
transform: translate(10%, 10%);
}
#s6 .sosyal ul{
display: flex;
text-align: center;
position: absolute;
padding-left: 35%;
}
#s6 .sosyal ul li{
background: black
margin: 8px;
list-style: none;
font-size: 30px;
transition: .5s;
}
#s6 .sosyal ul li a{
width: 40px;
padding: 6px 0;
display: block;
color: white;
}
#s6 .sosyal ul li:nth-child(1){background: #3b5998;}
#s6 .sosyal ul li:nth-child(2){background: #00aced;}
#s6 .sosyal ul li:nth-child(3){background: #007bb6;}
#s6 .sosyal ul li:nth-child(4){background: #cb2027;}
#s6 .sosyal ul li:nth-child(5){background: #bb0000;}
#s6 .sosyal ul li:nth-child(6){background: #dd4b39;}
#s6 .sosyal ul li:hover{
transform: translateY(-8px);
box-shadow: 0 10px 10px rgba(0.0.0.0.6)
}
#s6 .sosyal h1{
padding-top: 5%;
font-size: Calibri;
color: #007bb6;
}

İşinize Yarar belki

27-07-2018, 21:02:36

#5

Kafka

SoildStar adlı üyeden alıntı: mesajı görüntüle

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">

<div class="sosyal">
<h1>Sosyal Medya Hesaplarımızı Takip Edin.</h1>
<ul>
<li><a href="https://facebook.com"><i class="fa fa-facebook-official" aria-hidden="true"></i></a></li>
<li><a href="https://twitter.com"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="http://linkedin.com"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
<li><a href="http://pinterest.com"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
<li><a href="https://www.youtube.com/"><i class="fa fa-youtube-square" aria-hidden="true"></i></a></li>
<li><a href="https://plus.google.com"><i class="fa fa-google-plus-square" aria-hidden="true"></i></a></li>
</ul>
</div>

#s6 .sosyal{
position: absolute;
width: 80%;
height: 30%;
min-width: 650px;
text-align: center;
transform: translate(10%, 10%);
}
#s6 .sosyal ul{
display: flex;
text-align: center;
position: absolute;
padding-left: 35%;
}
#s6 .sosyal ul li{
background: black
margin: 8px;
list-style: none;
font-size: 30px;
transition: .5s;
}
#s6 .sosyal ul li a{
width: 40px;
padding: 6px 0;
display: block;
color: white;
}
#s6 .sosyal ul li:nth-child(1){background: #3b5998;}
#s6 .sosyal ul li:nth-child(2){background: #00aced;}
#s6 .sosyal ul li:nth-child(3){background: #007bb6;}
#s6 .sosyal ul li:nth-child(4){background: #cb2027;}
#s6 .sosyal ul li:nth-child(5){background: #bb0000;}
#s6 .sosyal ul li:nth-child(6){background: #dd4b39;}
#s6 .sosyal ul li:hover{
transform: translateY(-8px);
box-shadow: 0 10px 10px rgba(0.0.0.0.6)
}
#s6 .sosyal h1{
padding-top: 5%;
font-size: Calibri;
color: #007bb6;
}

İşinize Yarar belki

Teşekkür ediyorum. Bu kodları temanın hangi şablonunda kullanmam gerekiyor?

27-07-2018, 21:05:31

#6

~~SoildStar~~

Üyeliği durduruldu

Kafka adlı üyeden alıntı: mesajı görüntüle

Teşekkür ediyorum. Bu kodları temanın hangi şablonunda kullanmam gerekiyor?

hocam en üstekini <head></head> aralarına ekle
ortadakini footer e yada bi üstüne ekleyebilirsin
en alttaki kodu style.css açarak içine yapıştırın çalışır.

27-07-2018, 21:55:20

#7

Kafka

SoildStar adlı üyeden alıntı: mesajı görüntüle

hocam en üstekini <head></head> aralarına ekle
ortadakini footer e yada bi üstüne ekleyebilirsin
en alttaki kodu style.css açarak içine yapıştırın çalışır.

Yok hocam olmadı. Footer e yada bir üstüne dediğiniz kısımda zaten ben eklemek istediğim yeri vurgulamıştım. O yüzden header kısmında bir yere eklemek istedim. Tarayıcının en sağına yapışık şekilde çıkıyor. İkonlar vs çıkıyor ama istediğim yerde çıkmıyor.

Arayışım devam etmekte.

29-07-2018, 14:58:03

#8

Kafka

Arayışım devam etmekte.