Blogger Çeşitli Profil Kartı

Arlina Design: Blogger Çeşitli Profil Kartı 14.10.16
Blogger Çeşitli Profil Kartı

Blogger sitenizde çarpıcı profil resminizi akordeon Açık/Kapalı animasyon efekti ile sosyal medya hesaplarınızı gösteren profil kartı widget'i blogculara hediyemizdir. Bu widget sosyal medya hesaplarınızın tek bir yerde ve şık bir widget içerisinde ziyaretçilerinizin sizi takip etmesine yardımcı olacaktır. Bu profil kartı diğer menülerinizden farklı olarak temiz bir kodlama ile oluşturulmuş benzersiz bir widget'tir. Profil kartını görüntülemek için aşağıdaki DEMO butonuna tıklayabilirsiniz.


Blogger Çeşitli Profil Kartı Nasıl Eklenir?

1. Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinde bulunan Şablon > HTML'i Düzenle yolunu takip ederek blogunuzun şablon kodlarını açın. CTRL+F yardımıyla </head> kodunu bulun ve aşağıdaki CSS kodlarını </head> kodunun bir satır üzerine ekleyin.
<style>
.pKart_kart{width: 100%;max-width: 400px;height: 100%;max-height: 615;margin:50px auto;-webkit-border-radius:30px;-moz-border-radius:30px;-ms-border-radius:30px;-o-border-radius:30px;border-radius:30px;background-color:#f6fcfe;-webkit-box-shadow:0 20px 70px 0 rgba(0,0,0,0.21);-moz-box-shadow:0 20px 70px 0 rgba(0,0,0,0.21);-ms-box-shadow:0 20px 70px 0 rgba(0,0,0,0.2);-o-box-shadow:0 20px 70px 0 rgba(0,0,0,0.2);box-shadow:0 20px 70px 0 rgba(0,0,0,0.2);position:relative;overflow:hidden}
.pKart_kart .pKart_back{text-align:center;position:absolute;left:0;right:0;top:50%;margin-top:-139px;font-weight:700;z-index:1}
.pKart_kart .pKart_back a{text-decoration:none}
.pKart_kart  .pKart_up{position:absolute;width:100%;height:437px;background-image:url(https://cdn.rawgit.com/Bloggeritunes/PNG/master/Image_Profile.jpg);background-position:50%;background-size:cover;z-index:3;text-align:center;-webkit-border-top-left-radius:30px;-moz-border-top-left-radius:30px;-ms-border-top-left-radius:30px;-o-border-top-left-radius:30px;border-top-left-radius:30px;-webkit-border-top-right-radius:30px;-moz-border-top-right-radius:30px;-ms-border-top-right-radius:30px;-o-border-top-right-radius:30px;border-top-right-radius:30px;-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-ms-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out}
.pKart_on  .pKart_up{height:100px;box-shadow:0 0 30px #cdd8dd}
.pKart_kart  .pKart_up .pKart_text{position:absolute;top:319px;left:0;right:0;color:#f1f7f9;-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-ms-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out}
.pKart_on  .pKart_up .pKart_text{top:20px}
.pKart_kart  .pKart_up .pKart_text h2{margin:0;font-size:25px;font-weight:700}
.pKart_kart  .pKart_up .pKart_text p{margin:0;font-size:16px;color:#e3eff3}
.pKart_kart  .pKart_up .pKart_add{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;background-color:#ed1259;-webkit-box-shadow:0 5px 24px 0 rgba(0,0,0,0.41);-moz-box-shadow:0 5px 24px 0 rgba(0,0,0,0.41);-ms-box-shadow:0 5px 24px 0 rgba(0,0,0,0.41);-o-box-shadow:0 5px 24px 0 rgba(0,0,0,0.41);box-shadow:0 5px 24px 0 rgba(0,0,0,0.41);position:absolute;top:392px;left:0;right:0;margin:auto;width:88px;height:88px;cursor:pointer;-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-ms-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out}
.pKart_on  .pKart_up .pKart_add{-webkit-transform:rotate(360deg) scale(.5);-moz-transform:rotate(360deg) scale(.5);-ms-transform:rotate(360deg) scale(.5);-o-transform:rotate(360deg) scale(.5);transform:rotate(360deg) scale(.5);top:470px}
.pKart_kart .pKart_down{background-color:#fff;position:absolute;bottom:0;width:100%;height:178px;z-index:2;-webkit-border-bottom-left-radius:30px;-moz-border-bottom-left-radius:30px;-ms-border-bottom-left-radius:30px;-o-border-bottom-left-radius:30px;border-bottom-left-radius:30px;-webkit-border-bottom-right-radius:30px;-moz-border-bottom-right-radius:30px;-ms-border-bottom-right-radius:30px;-o-border-bottom-right-radius:30px;border-bottom-right-radius:30px;-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-ms-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out}
.pKart_on .pKart_down{height:100px;-webkit-box-shadow:0 0 30px #cdd8dd;-moz-box-shadow:0 0 30px #cdd8dd;-ms-box-shadow:0 0 30px #cdd8dd;-o-box-shadow:0 0 30px #cdd8dd;box-shadow:0 0 30px #cdd8dd}
.pKart_kart .pKart_down div{width:33.333%;float:left;text-align:center;margin-top:50px;font-size:18px;-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-ms-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out}
.pKart_on .pKart_down div{margin-top:10px}
.pKart_kart .pKart_down div p:first-of-type{color:#66808c;margin-bottom:5px}
.pKart_kart .pKart_down div p:last-of-type{color:#324750;font-weight:700;margin-top:0}
.pKart_kart .pKart_back a i{margin:10px;padding:15px;-webkit-border-radius:15px;-moz-border-radius:15px;-ms-border-radius:15px;-o-border-radius:15px;border-radius:15px;-webkit-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-ms-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;transition:.3s ease-in-out}
.pKart_kart .pKart_back a i:hover{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2)}
.pKart_kart .pKart_back a:nth-of-type(1) i{color:#3c5895;border:2px solid #3c5895}
.pKart_kart .pKart_back a:nth-of-type(2) i{color:#0077B6;border:2px solid #0077B6}
.pKart_kart .pKart_back a:nth-of-type(3) i{color:#1779FF;border:2px solid #1779FF}
.pKart_kart .pKart_back a:nth-of-type(4) i{color:#111111;border:2px solid #111111}
.pKart_kart .pKart_back a:nth-of-type(5) i{color:#EB5E96;border:2px solid #EB5E96}
.pKart_kart .pKart_back a:nth-of-type(6) i{color:#3F739B;border:2px solid #3F739B}
.pKart_kart  .pKart_up .pKart_add i{color:white;font-size:38px;line-height:88px}
</style>
2. Yine CTRL+F yardımıyla </body> kodunu bulun ve aşağıdaki javaScript kodunu </body> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.
<script src="https://cdn.rawgit.com/Bloggeritunes/JS/master/pkart.js"></script>
3. Blogunuzun kumanda panelinden Yerleşim > Gadget Ekle > HTML/JavaScript Ekle yolunu takip ederek yeni bir widget oluşturacağız. Açılan HTML/JavaScript widget'i içerisine aşağıdaki HTML kodları kopyalayıp yapıştırın.
<div class="pKart_kart">
<div class="pKart_up">
<div class="pKart_text">
<h2>Blogger Eklentileri</h2>
<p>Blogger Tasarım &amp; Geliştirme - BE</p>
</div>
<div class="pKart_add"><i class="fa fa-plus"></i></div>
</div>
<div class="pKart_down">
<div>
<p>Projeler</p>
<p>150</p>
</div>
<div>
<p>Görüntüleme</p>
<p>64563</p>
</div>
<div>
<p>Beğenme</p>
<p>253</p>
</div>
</div>
<div class="pKart_back">
<p>Benim Güncel İş ve Projelerim</p>
<a href="#"><i class="fa fa-facebook fa-2x fa-fw"></i></a>
<a href="#"><i class="fa fa-linkedin fa-2x fa-fw"></i></a>
<a href="#"><i class="fa fa-behance fa-2x fa-fw"></i></a> <br>
<a href="#"><i class="fa fa-codepen fa-2x fa-fw"></i></a>
<a href="#"><i class="fa fa-dribbble fa-2x fa-fw"></i></a>
<a href="#"><i class="fa fa-instagram fa-2x fa-fw"></i></a>
<p>Takip et...</p>
</div>  
</div>
4. Blogger Çeşitli Profil Kartı'nın çalışması için aşağıdaki FontAwesome ve font-awesome CSS dosyalarının blog şablon kodlarınız arasında bulunması gerekir, eğer varsa bu dosyaları şablon kodlarınıza eklemenize gerek yok.
<link rel="stylesheet" href="https://cdn.rawgit.com/Bloggeritunes/CSS/master/FontAwesome.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet">

Açıklamalar

1. Blogger Çeşitli Profil Kartı'nı blogunuza uygun hale getirmek için, CSS kodları içerisinde bulunan resim kodunu kendi eklemek istediğiniz resim kodu ile değiştirin.

2. HTML kod içerisinde (#) belirtilen yerlere sosyal medya sayfalarınızın URL'si ekleyin. Eğer farklı bir sosyal medya hesabınızı eklemek istiyorsanız, Blogger Font Awesome Icons sayfamızdan sosyal medya iconlarınızı seçerek HTML kod içerisinde bulunan iconları değiştirebilirsiniz. Eklemiş olduğunuz yeni iconların renkelerini de değiştirmek için CSS kodları içerisinde sarı renk ile belirtilmiş olan renk kodlarını değiştirerek yeni iconlarınızın tasarımını yapabilirsiniz.

3. Blogger Çeşitli Profil Kartı boyutlarını blogunuza uygun olarak ayarlamak için, yine CSS kodları içerisinde bulunan width ve height ayarlarını düzenleyebilirsiniz.

Yeni witget eklentisi olan Blogger Çeşitli Profil Kartı ile ilgili görüşlerinizi bizimle paylaşmak için yorum bırakabilirsiniz. Bize destek olmak için bu yayınımızı arkadaşlarınız ile paylaşabilirsiniz. 

Etiketler: Blogger Profil Kartı, Blogger Çeşitli Profil Kartı, Blogger Akordeon Profil Kartı, Blogger Animasyon Efekti Profil Kartı

Yorum Gönder