Cyber Adam V1: Blogger Eklenti

Merhaba arkadaşlar, bu eklentimizi tamamiyle sohbetcheblog.net ten alıntıdır.Çok beğendiğim ve kullandığım için paylaşmayı düşündüm.Her bloga lazım olur buyrun anlatım:

Blogunuz için gayet güzel bir sekmeli yorum formu resimdede gördüğünüz gibi twitter ve facebook yorum alanlarıda eklenmiş durumda :) tabi kodlardan anlıyan kişiler buna google+ yorum forumunuda ekliye bilirler.
Bu haliyle bile gerçekten çok etkili duruyo :) konuyu fazla uzatmadan kodları nasıl ekliyeciğimize gelelim. Tabiki önizlemesini sitemizden göre bilirsiniz. :)

Facebook ve twitter yorum formunun blogunuzda çalışabilmesi için bu formlara ait api id almamız gerekiyor.

Facebook api id almak için bu adrese gittikten sonra sağ üst köşedeki yeni uygulama oluştur'a tıklıyoruz. Açılan pencerede uygulama adını yazıp diğer alanları boş bırakıp devam butonuna tıklayın. Daha sonra kelime doğrulamasını geçtikten sonra çıkan sayfadaki app id'nin karşısında yeralan rakamları bir yere not ediyoruz. Bize lazım olan yönetici profil id'sini almak için ise bu adrese gidiyoruz ve resimdeki kırmzı alandaki id'yi bir yere not ediyoruz.

Twitter api key almak için ise bu adrese gidip create new application'a tıklayıp açılan sayfadaki formu resimdeki gibi doldurduktan sonra açılan sayfada Consumer key'in karşısında rakamları bir yere not ediyoruz. Daha sonra ayarlara(settings) tıklayıp alt tarafta yeralan read and write'ı işaretleyip ayarları kaydediyoruz.

Blogger > Şablon adresine gidip şablonumuzu yedekledikten sonra Html'yi Düzenleye tıklayın.

Geldik kodları yapıştırmaya:

1- Ctrl + F tuşlarıyla <head> kodunu bulduktan sonra aşağıdaki kodları hemen altına yapıştırıyoruz.

<meta content='facebook profil id' property='fb:admins'/>
<meta content='facebook api id' property='fb:app_id'/>
<script src='http://code.jquery.com/jquery-latest.pack.js'/>
<script src='https://dl.dropboxusercontent.com/s/g8oow2g54asyr8a/jsCommentPages.js'/>
<script src='http://connect.facebook.net/tr_TR/all.js#xfbml=1'/>
<script src='https://dl.dropboxusercontent.com/s/dx3v586zbecy2ci/jsTweetBox.js'/>
<script src='http://platform.twitter.com/anywhere.js?id=twitter api id&amp;v=1'/>

2- Ctrl + F tuşlarıyla ]]></b:skin> kodunu bulduktan sonra aşağıdaki kodları kopyalayıp hemen bu kodun üzerine yapıştırın.

#js-tweet-box {
  display: inline-block;
  padding: 10px;
  font-family: 'Helvetica Neue','Helvetica','Arial',sans-serif;
  color: #666666;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}
#js-tweet-box textarea{
  margin: 10px 0px;
  display: block;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;

  box-shadow: 0px 0px 3px #cccccc;
  -moz-box-shadow: 0px 0px 3px #cccccc;
  -webkit-box-shadow: 0px 0px 3px #cccccc;
  border: 1px solid #cccccc;
}
#js-tweet-box .js-reactions {
 float: left;
}
.js-tweet-count {
 float: left;
 margin: 0px 10px;
   text-shadow: 2px 2px 2px #DDD;
  -moz-text-shadow: 2px 2px 2px #DDD;
  -webkit-text-shadow: 2px 2px 2px #DDD;
}
.js-tweet-count-over {
    color: #ff0000;
}
#js-tweet-box .button{
   display: inline-block;
   color: #287497;
   font-weight: bold;
 font-size: 14px;
   padding: 5px 10px;
   cursor: pointer;
 border: 1px solid #B4DCF5;
   border-radius: 4px;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
    
 background-color: #D5E8F5;
 background-image: linear-gradient(#F1F9FF, #D5E8F5);
 background-image: -moz-linear-gradient(#F1F9FF, #D5E8F5);
 background-image: -webkit-linear-gradient(#F1F9FF, #D5E8F5);

}
#js-tweet-box .button:hover{  
 background-color: #DdEfFb;
 background-image: linear-gradient(#ffffff, #DdEfFb);
 background-image: -moz-linear-gradient(#ffffff, #DdEfFb);
 background-image: -webkit-linear-gradient(#ffffff, #DdEfFb);
}
.js-tweet-button {
    float: right;
}
#js-tweet-box .js-sidebar{
 float: left;
 margin-right: 15px;
 width: auto;
 padding: 0px;
}
.js-current-user-twitter img{
 width: 48px;
 height: auto;  
 display: block;
 margin: 5px auto;
}
.js-publisher,
.js-current-user-twitter {
 font-size: 13px;
 font-weight: bold;
 text-align: center;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px; 
 box-shadow: 0px 0px 5px #CCC;
 -moz-box-shadow: 0px 0px 5px #CCC;
 -webkit-box-shadow: 0px 0px 5px #CCC;
 color: #333;
 background-color: #ffffff;
 min-width: 100px;
 padding-bottom: 8px;
 margin-bottom: 15px;
}
.js-publisher{
 
}
.js-publisher > div,
.js-current-user-twitter > div{
 padding: .5em;
}
.js-sidebar footer{
 background: #E9E9E9;
 padding: 5px;
 border-radius: 0px 0px 10px 10px;
 -moz-border-radius: 0px 0px 10px 10px;
 -webkit-border-radius: 0px 0px 10px 10px;
 background-color: #0094D4;
 background-image: linear-gradient(#00A4F4, #0094D4);
 background-image: -moz-linear-gradient(#00A4F4, #0094D4);
 background-image: -webkit-linear-gradient(#00A4F4, #0094D4);
 color: white;
}
js-twtr-connect-button {
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 background-color: #0094D4;
 background-image: linear-gradient(#00A4F4, #0094D4);
 background-image: -moz-linear-gradient(#00A4F4, #0094D4);
 background-image: -webkit-linear-gradient(#00A4F4, #0094D4);
 color: white;
}
.js-publisher:hover footer{
 
}
.js-publisher-img {
 width: 48px;
 height:auto;
 display: block;
 margin: 5px auto; 
}
#js-tweet-box .disabled-button{
    cursor: none;
    background-color: #cccccc;
    color: #dddddd;
}
#js-tweet-box .disabled-button:hover{
    cursor: none;
    background-color: #cccccc;
    color: #dddddd;
}
.js-tweet-message {
  display: none;
  padding: 3px;
  background-color: yellow;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;

  font-size: 15px;
  font-weight: bold;
  line-height: 1.4;
  box-shadow: 0px 0px 7px #DDD;
  -moz-box-shadow: 0px 0px 7px #DDD;
  -webkit-box-shadow: 0px 0px 7px #DDD;
}
.js-recent-tweets, .js-auth-reaction {
 clear: both;
 font-size: 13px;
 margin-top: 15px;
 background-color: #ffffff;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 box-shadow: 0px 0px 5px #cccccc;
 -moz-box-shadow: 0px 0px 5px #cccccc;
 -webkit-box-shadow: 0px 0px 5px #cccccc;
}
.js-auth-reaction {
  display: none;
}
.js-reactions h1 {
 font-size: 20px;
 font-weight: bold;
 padding: 5px;
 background: #E9E9E9;
 color: #333333;
 border-radius: 10px 10px 0px 0px;
 -moz-border-radius: 10px 10px 0px 0px;
 -webkit-border-radius: 10px 10px 0px 0px;
 background-image: linear-gradient(#F4F4F4,#D4D4D4);
 background-image: -moz-linear-gradient(#F4F4F4,#D4D4D4);
 background-image: -webkit-linear-gradient(#F4F4F4,#D4D4D4);
}
.js-recent-tweets h1 > span{
 font-size: 10px;
 font-weight: normal;
}

.twtr-img {
 float: left;
 width: 48px;
 height: auto;
 margin-right: 3px;
}
.twtr-tweet {
 padding: 5px;
 font-size: 12px;
 font-family: arial;
 line-height: 1.2;
}
.js-auth-reaction .twtr-tweet {
 background-color: #ffffff;
}
.twtr-tweet:hover {
 background: rgba(0,132,180,.1);
}
.twtr-tweet:hover .tweet-timestamp {
 color: #0084b4;
}
.twtr-tweet:last-child {
 border-radius: 0px 0px 10px 10px;
 -moz-border-radius: 0px 0px 10px 10px;
 -webkit-border-radius: 0px 0px 10px 10px;
}
.twtr-tweet a {
 color: #0084B4;
 text-decoration: none;
 font-weight: bold;
}
.tweet-row {
 font-weight: bold;
}
.tweet-actions{
 display: none;
}
.tweet-actions { 
 color: #0084b4; 
 font-size: 12px;
 visibility: hidden;
}
.tweet-actions > span {
 cursor: pointer;
}
.twtr-tweet:hover .tweet-timestamp {
 color: #0084b4;
}
.tweet-favorite,
.tweet-retweet,
.tweet-reply { 
 padding-left: 5px;
}

.tweet-favorite:hover,
.tweet-retweet:hover,
.tweet-reply:hover { 
 text-decoration: underline;
}

.twtr-tweet:hover .tweet-actions,
.twtr-tweet:hover .user-actions {
 visibility: visible;
}
.tweet-actions .sprite,
.tweet-actions .active-sprite {
 width: 16px;
 height: 15px;
 display: inline-block;
 background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirV2Et9S9xrNVIMLcGwC95kR8UmgniXjxbg3jgFVebjmnCerU5n5cOE_samoC4w0FielVPiqt5w_xcXWAqiAyU-US0k_eO1IcmDmNuc-g8K7yz2hAtnXJo5ddlLcc3WnMIEv-jX5_Z1Bew/s800/twitter-spritev2.png) repeat-x scroll top left;
}
.tweet-remove .sprite {
 background: transparent url(http://a2.twimg.com/a/1304464034/phoenix/img/sprite-icons.png) repeat-x scroll top left;
 background-position: -112px 1px;
}
.tweet-remove:hover .sprite {
 background-position: -128px 1px;
}

.tweet-retweet .sprite {
 background-position: 48px 1px;
}
.tweet-retweet .active-sprite {
 background-position: 16px 1px;
}
.tweet-retweet:hover .sprite {
 background-position: 32px 1px;
}
.tweet-favorite .sprite {
 background-position: 96px 0px;
}
.tweet-favorite .active-sprite {
 background-position: 64px 0px;
}
.tweet-favorite:hover .sprite {
 background-position: 80px 0px;
}
.tweet-reply .sprite {
 background-position: 0px 1px;
}
.tweet-reply:hover .sprite {
 background-position: -16px 1px;
}

3- Son olarak Ctrl + F tuşlarıyla <div class='comments' id='comments'> kodunu buluyoruz ve hemen altına aşağıdaki kodları yapıştırıyoruz. Ve şablonumuzu kaydediyoruz.

Bazı Temalarda ikinci koddan sonra yorum forumu aktif oluyor.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='js-default-tab comments-tab' id='blogger-comments' title='Blogger Yorumları'>
<data:post.numComments/> Yorum
</div>
<div class='comments-tab' id='twitter-comments' title='Twitter Yorumları'>
<span class='js-page-tweet-count' expr:href='data:post.url'/> Tweets
</div>
<div class='comments-tab' id='fb-comments' title='Facebook Yorumları'>
<fb:comments-count expr:href='data:post.url'/> Yorum
</div>
</b:if>
<div class='clear'/>
</div>
<div class='comments-page' id='twitter-comments-page'>
<div data-bitly-key='Bit.ly api key' data-bitly-login='Bit.ly kullanıcı adı' data-publisher='Twitter kullanıcı adı' id='js-tweet-box'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='10' width='500'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Bu ayın ilk yazsında merhaba arkadaşlar.Bu yazımız blogger kullanıcıları için,aşağıdaki verdiğim kodları Yerleşim>Gadget Ekle > HTML/JavaScript eklentisine yapıştırıp ve kaydettiğiniz takdirde blogunuza gelen ziyaretçilerin hiçbiri mouse unun sağ veya sol tuşunu içerik çalmak için kullanmayacak.

Buyrun kodu hemen kopyalayıp sizde kullanın!

<script type="text/javascript"> 
//form tags to omit in NS6+: 
var omitformtags=["input", "textarea", "select"] 
omitformtags=omitformtags.join("|") 
function disableselect(e){ 
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1) 
return false 
} 
function reEnable(){ 
return true 
} 
if (typeof document.onselectstart!="undefined") 
document.onselectstart=new Function ("return false") 
else{ 
document.onmousedown=disableselect 
document.onmouseup=reEnable 
} 
</script> 


<script language="Javascript"><!-- 
var isNS = (navigator.appName == "Netscape") ? 1 : 0; 
var EnableRightClick = 0; 
if(isNS) 
document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP); 
function mischandler(){ 
if(EnableRightClick==1){ return true; } 
else {return false; } 
} 
function mousehandler(e){ 
if(EnableRightClick==1){ return true; } 
var myevent = (isNS) ? e : event; 
var eventbutton = (isNS) ? myevent.which : myevent.button; 
if((eventbutton==2)||(eventbutton==3)) return false; 
} 
function keyhandler(e) { 
var myevent = (isNS) ? e : window.event; 
if (myevent.keyCode==96) 
EnableRightClick = 1; 
return; 
} 
document.oncontextmenu = mischandler; 
document.onkeypress = keyhandler; 
document.onmousedown = mousehandler; 
document.onmouseup = mousehandler; 
//--> 
</script>

Blogger - Birbirinden güzel 3 Tema

7 Eylül 2013 Cumartesi

Demo İçin

Yorum :(

Devamı

Blogger, Twitter, Facebook Sekmeli Yorum Formu

4 Eylül 2013 Çarşamba

Demo İçin

Yorum :(

Devamı

Blogger-hem sağ hem sol tuş engelleyici

1 Eylül 2013 Pazar

Demo İçin

Yorum :(

Devamı

Blogger-Link Yönlendirme (Videolu Anlatım)

28 Ağustos 2013 Çarşamba

Demo İçin

Yorum :(

Devamı

Blogger-Sadece Anasayfada gözüken gadget kodu (Videolu)

Demo İçin

1 Yorum

Devamı

Sayın Takipçilerimiz :)

Sosyal Medya

En çok yorum yapan 5 Kişi

Son Yorumlar

Dostlar

Popüler Yayınlar

Yararlı Makaleler !

Cyber Adam'ın Dostları

Araç Kutusu!

7 Eylül 2013 Cumartesi

Demo İçin

4 Eylül 2013 Çarşamba

Demo İçin

1 Eylül 2013 Pazar

Demo İçin

28 Ağustos 2013 Çarşamba

Demo İçin

document.write(ultimaFecha);

Demo İçin

Sayın Takipçilerimiz :)

Sosyal Medya

En çok yorum yapan 5 Kişi

Son Yorumlar

Dostlar

Popüler Yayınlar

Yararlı Makaleler !

Cyber Adam'ın Dostları

Araç Kutusu!