Blogger'da yaygın olarak tercih edilen sıkıcı "Hakkında" sayfalarına alternatif arayanlar için profil kartı oluşturdum. Kendinize göre uyarlayarak kullanabilirsiniz.
⠀
- Adım #1 İlk olarak oluşturmadıysanız profil kartını yerleştirmek istediğiniz sayfayı oluşturun. Oluşturduğunuz sayfa üzerinde düzenleme modu olarak "HTML görünümü"nü seçin.
⠀ - Adım #2 Aşağıdaki kodu kopyalayıp HTML alanına yapıştırın:
<script>/*<=!=[=C=D=A=T=A=[*/function webStats(json) {document.write(parseInt(json.feed.openSearch$totalResults.$t, 10))} /*]=]=>*/</script>
<div class="hakAlan bgMavi">
<div class="baslikAlan">
<h2>Lorem Ipsum</h2>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</div>
<div class="resimAlan">
<a class="baglantiSol" href="#"><svg class="c-1" viewBox="0 0 32 32"><path d="M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5h8a1,1,0,0,0,1-1V20a1,1,0,0,0-1-1H15V17h1a1,1,0,0,0,1-1V12.5A2.5,2.5,0,0,1,19.5,10H22v2H21a2,2,0,0,0-2,2v2a1,1,0,0,0,1,1h1.72l-.5,2H20a1,1,0,0,0-1,1v4a1,1,0,0,0,2,0V21h1a1,1,0,0,0,1-.76l1-4a1,1,0,0,0-.18-.86A1,1,0,0,0,23,15H21V14h2a1,1,0,0,0,1-1V9a1,1,0,0,0-1-1H19.5A4.51,4.51,0,0,0,15,12.5V15H14a1,1,0,0,0-1,1v4a1,1,0,0,0,1,1h1v6H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3V24a3,3,0,0,1-3,3H20a1,1,0,0,0,0,2h4a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Z"></path></svg></a>
<img class="yazarResim" src="https://lh4.googleusercontent.com/-cOHxiVPtJ6o/Yiu6lZupv3I/AAAAAAAArCY/qkDTHPoYZ6Y6FF8VKSXZ0kM5fYtZ7TYDACK4BGAYYCw/s113-pf/se.png" />
<a class="baglantiSag" href="#"><svg class="c-1" viewBox="0 0 32 32"><path d="M28.77,8.11a.87.87,0,0,0-.23-.2A4.69,4.69,0,0,0,29,6.54a1,1,0,0,0-.44-1,1,1,0,0,0-1.1,0,6.42,6.42,0,0,1-2.28.92,6.21,6.21,0,0,0-7.08-1A6.07,6.07,0,0,0,15,12.2a1,1,0,0,0,2-.4A4.08,4.08,0,0,1,19,7.28a4.24,4.24,0,0,1,5.12,1,1,1,0,0,0,.88.28l.25,0a1,1,0,0,0,.34,1.62,1,1,0,0,0-.36.88,13.07,13.07,0,0,1-4.89,11.24A12.75,12.75,0,0,1,7.69,24.61a9.06,9.06,0,0,0,4.54-2.18,1,1,0,0,0,.15-1.09,1,1,0,0,0-.93-.57,4,4,0,0,1-3-1.39,3.63,3.63,0,0,0,1-.35A1,1,0,0,0,10,18a1,1,0,0,0-.76-.84,4.42,4.42,0,0,1-3-2.48c.24,0,.48.05.74.06a1,1,0,0,0,1-.62A1,1,0,0,0,7.67,13C6,11.48,5.59,9.85,5.83,8.7a13.88,13.88,0,0,0,7,4,1,1,0,1,0,.38-2A12.1,12.1,0,0,1,6.39,6.31a1,1,0,0,0-.75-.38,1,1,0,0,0-.78.33,5.34,5.34,0,0,0-.31,6l-.09,0a1,1,0,0,0-.52.81,5.84,5.84,0,0,0,1.95,4.47,1,1,0,0,0-.18,1,6.63,6.63,0,0,0,3.18,3.57A13.89,13.89,0,0,1,4,23a1,1,0,0,0-.5,1.86A16.84,16.84,0,0,0,12,27.35a15.16,15.16,0,0,0,9.6-3.57,15.12,15.12,0,0,0,5.69-12.42,4.62,4.62,0,0,0,1.62-2.25A1,1,0,0,0,28.77,8.11Z"></path></svg></a>
</div>
<div class="istatistikaAlan webSts">
<span class="bolmeAlan">
<b>Yazılar</b><br />
<script src="https://www.esenturkdesign.com/feeds/posts/default?alt=json-in-script&callback=webStats"></script>
</span>
<span class="bolmeAlan">
<b>Yorumlar</b><br />
<script src="https://www.esenturkdesign.com/feeds/comments/default?alt=json-in-script&callback=webStats"></script>
</span>
<span class="bolmeAlan">
<b>Yazarlar</b><br />
10
</span>
</div>
<div class="aciklamaAlan">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<a class="dahaButon" href="#" rel="author nofollow">
Lorem ipsum
<svg class="line" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) translate(5.000000, 8.500000)">
<path d="M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0"></path></g></svg>
</a>
</div>
</div>Yapıştırdığınız HTML kodu üzerindeki
taslak metin (Lorem ipsum) yerlerini,
href bağlantılarını, "
esenturkdesign.com" yazan site adresini kendinize göre uyarlamayı unutmayın.
⠀
- Adım #3 Sonraki adımda tasarım kodunu yerleştirelim. Bunun için aşağıdaki CSS kodunu sayfanın sonuna <style> etiketi içine alarak ekleyin:
.hakAlan {
display: block;
width: 400px;
max-width: 100%;
margin: 20px auto;
border: 1px solid #edebed;
box-shadow: 0px 5px 5px #00000020;
border-radius: 15px;
overflow: hidden;
background: #ffffff;
font-size: 16px;
color: #555;
line-height: normal;
}
.hakAlan .baslikAlan {
display: block;
padding: 20px 20px 80px;
text-align: center;
}
.hakAlan .baslikAlan h2 {
margin: 15px 0;
font-size: 22px;
}
.hakAlan .baslikAlan p {
margin: 0;
}
.hakAlan .resimAlan {
position: relative;
display: block;
width: 100%;
}
.hakAlan .resimAlan .baglantiSol svg,
.hakAlan .resimAlan .baglantiSag svg,
.dahaButon svg {
height: 20px;
width: 20px;
vertical-align: middle;
}
.hakAlan .resimAlan .baglantiSol,
.hakAlan .resimAlan .baglantiSag {
position: absolute;
background: #fff;
border-radius: 50%;
padding: 6px 0;
width: 34px;
height: 22px;
text-align: center;
margin-top: -17px;
box-shadow: 0px 5px 5px #00000020;
transform: scale(1);
transition: all 0.1s ease-in-out;
}
.hakAlan .resimAlan .baglantiSol:hover,
.hakAlan .resimAlan .baglantiSag:hover {
transform: scale(1.05);
}
.hakAlan .resimAlan .baglantiSol {
left: 50%;
margin-left: -120px;
}
.hakAlan .resimAlan .baglantiSag {
right: 50%;
margin-right: -120px;
}
.hakAlan .resimAlan .yazarResim {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
margin-left: -50px;
margin-top: -50px;
border-radius: 50%;
box-shadow: 0px 5px 5px #00000020;
}
.hakAlan .istatistikaAlan {
display: flex;
padding: 80px 20px 20px;
background: #f5f5f5;
}
.hakAlan .istatistikaAlan .bolmeAlan {
width: calc(100% / 3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hakAlan .aciklamaAlan {
padding: 30px;
}
.hakAlan .aciklamaAlan p {
margin: 0;
}
.dahaButon {
display: block;
margin-top: 20px;
text-decoration: none;
}
.dahaButon svg {
fill: none !important;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.5;
}
/* Renkler */
.bgTuruncu .baslikAlan {background: linear-gradient(90deg, #d53369 0%, #daae51 100%);color: #fff;}
.bgTuruncu .baglantiSol svg,.bgTuruncu .baglantiSag svg {fill: #d53369;}
.bgTuruncu .bolmeAlan b,.bgTuruncu .dahaButon {color: #d53369 !important;}
.bgTuruncu .dahaButon svg {stroke: #d53369;}
.bgYumurta .baslikAlan {background: linear-gradient(90deg, #FDBB2D 0%, #22C1C3 100%);color: #fff;}
.bgYumurta .baglantiSol svg,.bgYumurta .baglantiSag svg {fill: #FDBB2D;}
.bgYumurta .bolmeAlan b,.bgYumurta .dahaButon {color: #FDBB2D !important;}
.bgYumurta .dahaButon svg {stroke: #FDBB2D;}
.bgYesil .baslikAlan {background: linear-gradient(90deg, #9ebd13 0%, #008552 100%);color: #fff;}
.bgYesil .baglantiSol svg,.bgYesil .baglantiSag svg {fill: #9ebd13;}
.bgYesil .bolmeAlan b,.bgYesil .dahaButon {color: #9ebd13 !important;}
.bgYesil .dahaButon svg {stroke: #9ebd13;}
.bgMavi .baslikAlan {background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);color: #fff;}
.bgMavi .baglantiSol svg,.bgMavi .baglantiSag svg {fill: #4b6cb7;}
.bgMavi .bolmeAlan b,.bgMavi .dahaButon {color: #4b6cb7 !important;}
.bgMavi .dahaButon svg {stroke: #4b6cb7;}CSS kodunda yerleri kendi tercihinize göre değiştirebilirsiniz. Kodun sonunda yer alan
/* Renkler */ başlığı altında 4 farklı renk kombinasyonu hazırladım. Bunlardan dilediğinizi HTML kodundaki <div class="hakAlan
bgMavi"> kalın olarak işaretlenen yer ile değiştirebilirsiniz.
Örnek kullanımları şöyle:
<div class="hakAlan
bgTuruncu">
<div class="hakAlan
bgYumurta">
<div class="hakAlan
bgYesil">
<div class="hakAlan
bgMavi">
⠀
- Adım #4 Blogger düzenleyicisinin "Önizle" butonunu kullanarak görünümün son haline göz atabilir, kurulumu tamamladığınızda "Kaydet" butonuyla yayına alabilirsiniz.
⠀
Kaynak:
Blogger için özel profil sayfası Esentürk Design