Bumerang - Yazarkafe

Bloguna Oyunlar Widgeti Ekle

DEmo Görünüm için resme tıklayın.
Bloumuzda yukarıdaki oyunlar widgetini blogunuza ekleyip ziyaretçilerinizin eğlenmesini ve hoş vakit geçirmesini sağlayacak oyunlar widgetini sizlerle paylaşalım dedik.Yapmanız gereken işlem çok basit;Kumanda Panelinden>Yerleşim>Gadget Ekle yolunu takip edip,Html/Javascript gadgeti içerisine yapıştırıyoruz.Yada bir sayfa ekliyerek buradaki kodları HTML modundayken sayfamıza yapıştırıyoruz,yada normal bir yazı yayınlar gibi Yeni kayıt oluştur dedikten sonra yine html modunda kodu yapıştırıp oyunları sitemize ekliyebiliriz.Bu işlemi yaptıktan sonra artık blogumuzda oyunlar olacak ve bu oyunlar sürekli güncellenecek.Blogunuzu biraz daha renklendirecek güzel bir eklenti.
DEMO GÖRÜNÜM
<style type="text/css">
#post-gallery {
  width:525px;
  margin:0px auto;
  font:normal 11px Arial,Sans-Serif;
  color:#494848;
  padding:8px;
  background-color:none;
  -webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
margin-top:-75px;
}
#post-gallery h2 {
  font:20px Arial,Sans-Serif;
  color:white;
  text-shadow:0px 3px 2px black;
  text-transform:uppercase;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#48D;
  text-align: center;
}
#post-gallery .bgt-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('http://4.bp.blogspot.com/-eCiZkDJWUlY/UuSV0XpuesI/AAAAAAAADv8/11yalH-3T7Q/s1600/395.GIF') no-repeat 50% 50%;
  width:71px;
  height:71px;
}
#post-gallery .bgt-item img {
  width:71px;
  height:71px;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}
#post-gallery .bgt-item .bgt-child {
  position:relative;
  top:10%!important;
  left:10%!important;
  z-index:1000;
  width:200px;
  background-color:white;
  border-top:5px solid #FA7C19;
  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
  opacity: 0.9;
}
#post-gallery .bgt-item .bgt-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#FA7C19;
}
#post-gallery .bgt-item:hover .hidden {display:block;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var bgtTitle     = "Oyunlar Yükleniyor...",
    numposts    = 56,     
    numchar     = 190,     
    rcFadeSpeed = 610,   
    pBlank      = "http://1.bp.blogspot.com/-WGU5Q8PKZL4/UuStTipXfkI/AAAAAAAADwM/8QeimiTON0A/s1600/no-image-ava.jpg", 
    blogURL     = "http://www.arabaoyunlari04.com";
</script>
<script src="https://googledrive.com/host/0B4LZsB4bN2rdNE4yRjdreDBIcUU/recent-post-blogokulu.js" type="text/javascript"></script>
kod içerisinde
numposts = 56, gösterilecek oyun sayısını,
width:525px;
ekleyeceğiniz widgetin genişlik değerini belirtir, bunları değiştirerek kendinize göre ayarlama yapabilirsiniz.
PAYLAŞ PAYLAŞ PAYLAŞ

BLOG OKULU

Merhabalar, 2012 yılından beri editörlüğünü yaptığım blogokulu.org sitesinde blogger kullanıcıları için gerekli olan bir çok bilgiyi bulabilrsiniz.Blogger temaları,blogger eklentileri ve blogger dersleri ile blog yazarlarına elimizden geldiğince yardımcı olmaya çalışıyoruz.

  • Image
  • Image
  • Image
  • Image
  • Image
    Disqus Yorumları
    Facebook Yorumları

0 yorum:

Yorum Gönder

Belirtmek istediğiniz farklı konular varsa Burdan Yazabilrisiniz...