Blogger Responsive Sosyal Medya Butonları
Responsive olayı gün geçtikçe çoğalıyor.Daha önce paylaştığımız temalarda "Responsive Nedir?" sorusuna uygun cevabı vermiştik yinede bir hatırlatma olsun.
Responsive : Web sitelerinin; bilgisayar, tablet, mobil ve benzeri cihazlarda sorunsuz bir şekilde gösterilmesi için kullanılır. Farklı cihazlarda düzgün bir görünüm için özel bir kodlama tekniği kullanılarak geliştirilir.
Bizim ise responsive adı altındaki şimdi konumuz sosyal medya.Paylaşacağımız kodlar ile responsive özelliğini taşıyan bir sosyal medyaya sahip olabileceksiniz!
Gif olarak önizlemesini çektim ama canlı olarak dema görmek isteyenler vardır ki eminim buradan demoya gidebilirler.
Hatta gerçekten responsive mi? Sorusunu da sorabilirsiniz Cyber Adam'da sorulara cevaplar hazır, buradan responsive özelliğini test etmek için siteye gidebilirsiniz.Yine aynı adreste sağ üst köşeden de responsive özelliğini test etmek için istediğiniz cihazı seçebilirsiniz!
Çok hoş bulduğum bu responsive özelliğini tşaıyan sosyay paylaşım butonunu blogumuza eklem işlemine başlıyalım.
Yapmanız gerekler:
- CTRL+F kombinasyonu ile HTML kodları arasından bu kodu <data:post.body/> taratın ve aşağıdaki kodu kopyala yapıştır yöntemi ile hemen altına yapıştırın.
Aşağıdaki kodda düzenlemeniz gerekn yerleri mavi renk ile işaretledim.
Not:Kırmızı renk ile boyadığım linkteki kodları kendi google drivenıza aktarıp kodları kullanmanız daha sağlam olur.
Aşağıdaki kodda düzenlemeniz gerekn yerleri mavi renk ile işaretledim.
Not:Kırmızı renk ile boyadığım linkteki kodları kendi google drivenıza aktarıp kodları kullanmanız daha sağlam olur.
<b:if cond='data:blog.pageType == "item"'> <link href='https://googledrive.com/host/0B3omcK7jIprqRm95VVpQZDJHRzQ' rel='stylesheet'/> <div class="wpr"> <a class="social" id="twitter" href="your-twitter-account-link" title=""> <div class="icon"></div> <div class="shutter_frame"> <div class="shutter"> <div class="number">1189</div> <div class="bar"></div> <div class="text">followers</div> </div> </div> </a> <a class="social" id="google" href="your-google-plus-account-link" title=""> <div class="icon"></div> <div class="shutter_frame"> <div class="shutter"> <div class="number">421</div> <div class="bar"></div> <div class="text">+1</div> </div> </div> </a> <a class="social" id="facebook" href="your-facebook-account-link" title=""> <div class="icon"></div> <div class="shutter_frame"> <div class="shutter"> <div class="number">973</div> <div class="bar"></div> <div class="text">Like</div> </div> </div><!-- / .shutter_frame --> </a> </div><!-- / .wpr --> <div style="text-align: right;"> <a href="http://gg.gg/ikz3" rel="nofollow" target="_blank" title="Get This Widget"><span style="font-size: x-small;">get</span></a></div> <br /> </b:if>
-Şimdi ise aşağıdaki kodları </body> kodunun hemen üstüne kopyala yapıştır yöntemiyle aktarıp kaydet butonuna basmamızın ardından her cihaza uygun olan bir sosyal medya eklentimize sahip olucaz!
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/> <script src='//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'/> <script> $(document).ready(function() { $('.social').hover( function() { $(this).find('.shutter').stop(true, true).animate({ bottom: '-36px' }, { duration: 300, easing: 'easeOutBounce' }); }, function () { $(this).find('.shutter').stop(true, true).animate({ bottom: 0 }, { duration: 300, easing: 'easeOutBounce' }); } ); }); </script>
Sizler için yararlı eklentiler paylaşmaya devam ediıyoruz ve devam ediceğiz.
Bir sonraki yazımız için takipte kalın.
.png)
" Blogger Responsive Sosyal Medya Butonları " icin 0 yorum :
* Yorum yazarken imla kurallarına dikkat etmeniz sizin ve bizim yararımıza olucaktır.
* Argo, dini, siyasi, vs. tartışma çıkaracak yorumlardan kaçınınız.