Menu

Blogger Dikey Animasyonlu CSS3 Sosyal Medya Widget

Blogger için oluşturulmuş Animasyonlu Dikey Sosyal Medya eklentisi ile Facebook,Twitter,Google+,RSS bağlantıları için "CSS3" Efektler kullanarak yapılan widget oldukça kullanışlı ve şık şekilde sitenizde güzel bir görünüm oluşturacaktır.

Bu blogger yakınlaştırma ve daralan etkili ile animasyonlu CSS3 Sosyal Medya Widget aşağıdaki gibi üzerine mause ile gelince yazıların hareket etmesiyle oluşturulmuş blogger animasyonlu sosyal medya widget eklentisidir.

Blogger Dikey Animasyonlu CSS3 Sosyal Medya Widget


Blogger için Css kodları ile oluşturulmuş bu Blogger Dikey Animasyonlu CSS3 Sosyal Medya Widget Kodlarının nasıl göründüğünü ve kodların çalışıp çalışmadığını test etmek için kod deneme penceresini kullanabilirsiniz.Kod Deneme Penceresi

Css kodları ile oynayarak site tasarımınıza uygun şekli ve renklerini de kendinize göre,zevkinize göre ayarlamak da mümkündür.

Ayrıca daha önce yayınladığımız aşağıdaki eklentilerde işinize yarayabilir,deneyebilirsiniz.

---6 Adet İnternetten Para Kazandırma Kitapları

---Blogger CSS3 Siyah Açılır Menu Yapma

Blogger Dikey Animasyonlu CSS3 Sosyal Medya Widget Kodları sitenize yüklemek için,ilk önce Blogger.com giriş yapınız sonra Yerleşim/Gedget Ekle/ HTML/JavaScript adımlarını takip ediniz.

Blogger Dikey Animasyonlu CSS3 Sosyal Medya Widget

HTML/JavaScript tıkladıktan sonra aşağıdaki kodu kopyalayarak resimdeki gibi boşluğa yapıştırınız,Blogger Dikey Animasyonlu CSS3 Sosyal Medya Widget Kodları Eklentisini site tasarımınıza uygun olarak istediğiniz yere ekleyebilirsiniz.


<style>
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0; padding:0;}html,body { margin:0; padding:0;}table { border-collapse:collapse; border-spacing:0;}fieldset,img { border:0;}input{ border:1px solid #b0b0b0; padding:3px 5px 4px; color:#979797; width:210px;}address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal;}ol,ul { list-style:none;}caption,th { text-align:left;}h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal;}q:before,q:after { content:'';}abbr,acronym { border:0;}/******fb****/.ca-menuf{ padding: 0; width:100%; color: #fff; margin: 1px auto;}.ca-menuf li{ width: 100%; height: 85px; overflow: hidden; display: block; background: #017CD4; color: #fff; -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -webkit-transition: all 30ms ease-in-out; -moz-transition: all 30ms ease-in-out; -o-transition: all 30ms ease-in-out; -ms-transition: all 30ms ease-in-out; transition: all 30ms ease-in-out;}.ca-menuf li:last-child{ margin-bottom: 2px; color: #fff;}.ca-menuf li a{ text-align: left; text-decoration:none; display: block; width: 100%; height: 100%; color: #fff; position:relative;}.ca-contentf{ color: #fff; position: absolute; left: 12px; width: 100%; height: 100%; top: 10px;}.ca-mainf{ font-size: 20px; color: #fff; -webkit-transition: all 30ms linear; -moz-transition: all 30ms linear; -o-transition: all 30ms linear; -ms-transition: all 30ms linear; transition: all 30ms linear;}.ca-subf{ font-size: 15px; color: #fff; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear;}.ca-menuf li:hover{ background: #1f69b3; color: #fff;}.ca-menuf li:hover .ca-iconf{ text-shadow: 0px 0px 1px ; font-size: 50px; color: #fff;}.ca-menuf li:hover .ca-mainf{ font-size: 15px; color: #fff;}.ca-menuf li:hover .ca-subf{ color: #fff; font-size: 20px;}/****tw******/.ca-menut{ padding: 0; width:100%; color: #fff; margin: 1px auto;}.ca-menut li{ width: 100%; height: 85px; overflow: hidden; display: block; background: #00BFFF ; color: #fff; -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}.ca-menut li:last-child{ margin-bottom: 2px; color: #fff;}.ca-menut li a{ text-align: left; text-decoration:none; display: block; width: 100%; height: 100%; color: #fff; position:relative;}.ca-contentt{ color: #fff; position: absolute; left: 12px; width: 100%; height: 100%; top: 10px;}.ca-maint{ font-size: 20px; color: #fff; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear;}.ca-subt{ font-size: 14px; color: #fff; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear;}.ca-menut li:hover{ background:#0CA8F0; color: #fff;}.ca-menut li:hover .ca-icont{ text-shadow: 0px 0px 1px ; font-size: 50px; color: #fff;}.ca-menut li:hover .ca-maint{ font-size: 14px; color: #fff;}.ca-menut li:hover .ca-subt{ color: #fff; font-size: 20px;}/****g+*****/.ca-menug{ padding: 0; width:100%; color: #fff; margin: 1px auto;}.ca-menug li{ width: 100%; height: 85px; overflow: hidden; display: block; background: #da4a38; color: #fff; -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); box-shadow: 1px 1px 2px rgba(0,0,0,0.2); margin-bottom: 4px; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}.ca-menug li:last-child{ margin-bottom:2px; color: #fff;}.ca-menug li a{ text-align: left; text-decoration:none; display: block; width: 100%; height: 100%; color: #fff; position:relative;}.ca-contentg{ position: absolute; left:12px; width: 300px; height: 60px; top: 10px; color: #fff;}.ca-maing{ font-size: 20px; color: #fff; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear;}.ca-subg{ font-size: 14px; color: #fff; -webkit-transition: all 300ms linear;    -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear;}.ca-menug li:hover{ background: #DC321E; color: #fff;}.ca-menug li:hover .ca-icong{ text-shadow: 0px 0px 1px ; font-size: 50px; color: #fff;}.ca-menug li:hover .ca-maing{ font-size: 14px; color: #fff;}.ca-menug li:hover .ca-subg{ color: #fff; font-size: 20px;}/****rss***/.ca-menur{ padding: 0; width:100%; color: #fff; margin: 1px auto;}.ca-menur li{ width: 100%; height: 85px; overflow: hidden; display: block; background: #FFA500 ; color: #fff; -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); box-shadow: 1px 1px 2px rgba(0,0,0,0.2); margin-bottom: 4px; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}.ca-menur li:last-child{ margin-bottom: 2px; color: #fff;}.ca-menur li a{ text-align: left; text-decoration:none; display: block; width: 100%; height: 100%; color: #fff; position:relative;}.ca-contentr{ position: absolute; left: 12px; width: 300px; height: 60px; top: 10px; color: #fff;}.ca-mainr{ font-size: 20px; color: #fff; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear;}.ca-subr{ font-size: 14px; color: #fff; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear;}.ca-menur li:hover{ background: #FF8C00 ; color: #fff;}.ca-menur li:hover .ca-iconr{ text-shadow: 0px 0px 1px ; font-size: 50px; color: #fff;}.ca-menur li:hover .ca-mainr{ font-size: 14px;    color: #fff;}.ca-menur li:hover .ca-subr{ color: #fff; font-size: 20px;}</style><br /><ul class="ca-menuf"><li><a href="https://www.facebook.com/seomktbi"><div class="ca-contentf"><h2 class="ca-mainf">Facebook</h2><h3 class="ca-subf">Facebook Bizi Takip Ediniz</h3></div></a></li></ul><ul class="ca-menut"><li><a href="https://twitter.com/seomektebi"><div class="ca-contentt"><h2 class="ca-maint">Twitter</h2><h3 class="ca-subt">Twitter'da Bizi Takip Ediniz</h3></div></a></li></ul><ul class="ca-menug"><li><a href="https://plus.google.com/u/0/+SEOMektebi"><div class="ca-contentg"><h2 class="ca-maing">Google+</h2><h3 class="ca-subg">Google+'da Bizi Takip Ediniz</h3></div></a></li></ul><ul class="ca-menur"><li><a href="https://feedburner.google.com/fb/a/mailverify?uri=seomektebi"><div class="ca-contentr"><h2 class="ca-mainr">RSS</h2><h3 class="ca-subr">RSS İle Bize Abone Olun</h3></div></a></li></ul><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>


Blogger Dikey Animasyonlu CSS3 Sosyal Medya Widget Eklentisini Düzenleme:

Facebook,Twitter,Google + ve RSS için sarı olarak belirtiğim seomektebi yazdığım yerlere kendi sosyal medya adreslerinizi yazınız ve RSS adresinizi.

Yayınladığımız bu eklentiler içinde ki renk kodları #XXXX şeklinde olan kodlardır bunları aşağıdaki SEO Mektebi renk kodları sayfasından istediğiniz renkleri seçerek ekleyebilirsiniz.

SEO Mektebi CSS Renk Kodlarına Buradan Ulaşabilirsiniz

Ayrıca eklentiler içindeki sayısal değerlerle oynayarak site tasarımına uygun olan ölçüleri sağlayabilirsiniz.


Sonraki Yazılar
« Prev Post
Önceki Yazılar
Next Post »

Henüz Yorum Yapılmamış " Blogger Dikey Animasyonlu CSS3 Sosyal Medya Widget "

Önerilen Yazı
×