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><script src="https://cdn.rawgit.com/Bloggeritunes/JS/master/pkart.js"></script><div class="pKart_kart">
<div class="pKart_up">
<div class="pKart_text">
<h2>Blogger Eklentileri</h2>
<p>Blogger Tasarım & 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><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