Blogger Resimli Gelişmiş Son Yazılar Eklentisi

Blogger geliştirilmiş ve resimli son yazılar eklentisini sizlerle paylaşacağım. Koddan bahsetmek gerekirse herkesin bildiği gibi son yazıları gösteriyor ama bu kodumuzda sadece son yazılar değil kimin yazdığını, yağılan yorum sayısını ve konu resmini görebiliyorsunuz. Kodun hiçbir yerinde değişiklik yapmanıza gerek yoktur. Ama 5 tane değilde 10 tane son yazınızın gözükmesini istiyorsanız " var Max_Post_Display=5; " bölümünü istediğiniz başlık kadar değiştiriniz. Başka değişiklikler için o bölümdeki resim gözükmesini veya diğer şeyleri ayarlayabilirisiniz. Kodun ön izlemsi aşağıdadır





Aşağıdaki Kodumuzu Tasarım > Gadget Ekle > HTML/JavaScript bölümüne yapıştırınız.

<style type="text/css"><!--
.recent_post_content{width:100%;}
.recent_post_content_item {filter: alpha(opacity=80);opacity: 0.8;}
.recent_post_content img {width:32px;height:32px;background-position: center;margin:7px;padding: 2px;border:#888 solid thin;}
.recent_post_content_item table, .recent_post_content_item tr, .recent_post_content_item td {vertical-align: middle;}
.recent_post_content_item table {margin-bottom:2px;margin-top:3px;}
.recent_post_content_item:hover {filter: alpha(opacity=100);opacity: 1;}
.recent_post_title a{font-size:12px;text-decoration:none;font-weight:bold;color:inherit}
.recent_post_title a:hover{text-decoration:underline}
.recent_post_content_item .recent_post_info {filter: alpha(opacity=60);opacity: 0.6;font-size: 11px;}
--></style>
<script type="text/JavaScript">
<!--
// Create by Oğuzhan Cabbaroğlu
// Use the code without copyright agreement, you will be reported as spam

//Setting_begin
var No_Thumb_Url='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfkHzP0sRDt5DGF9oGExu1HGBWHz117h63bUq7GwHfCcBcR1ei6yDylMO-v6jQnG4eFHYdAi4I40FxMvW9jWZw0jgI-hfzp0TWa_0IakJSuxuafaF53mstXeTX54fdjdhubU3fbebh_K3t/s32/no-photo.jpg';
var Max_Post_Display=5;
var Sum_Len='130';
var Index_By_Label='';
var Display_Thumb=true;
var Display_Comment=true;
var Display_Author=true;
var Display_Time=false;

//Setting_end
//Define your language
var Lang_By = 'Yazan ';
var Lang_comment = ' yorum';
var Lang_comments = ' yorum';
var Month_List = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

var _0x15a1=["\x43\x20\x31\x6D\x28\x4F\x2C\x50\x2C\x70\x2C\x79\x2C\x54\x29\x7B\x66\x20\x51\x3D\x27\x27\x3B\x36\x28\x50\x21\x3D\x27\x27\x29\x51\x3D\x27\x2F\x2D\x2F\x27\x2B\x50\x3B\x66\x20\x52\x3D\x27\x27\x3B\x36\x28\x70\x21\x3D\x27\x27\x29\x52\x3D\x27\x70\x2D\x31\x43\x3D\x27\x2B\x70\x2B\x27\x26\x27\x3B\x66\x20\x55\x3D\x27\x27\x3B\x36\x28\x79\x21\x3D\x27\x27\x29\x55\x3D\x27\x79\x2D\x31\x42\x3D\x27\x2B\x79\x2B\x27\x26\x27\x3B\x31\x65\x2E\x31\x63\x28\x27\x3C\x56\x20\x4F\x3D\x22\x31\x41\x2F\x31\x45\x22\x20\x77\x3D\x22\x2E\x2E\x2F\x2E\x2E\x2F\x31\x46\x2F\x27\x2B\x4F\x2B\x27\x2F\x62\x27\x2B\x51\x2B\x27\x3F\x27\x2B\x52\x2B\x55\x2B\x27\x31\x79\x3D\x6C\x2D\x64\x2D\x56\x26\x54\x3D\x27\x2B\x54\x2B\x27\x22\x3E\x3C\x5C\x2F\x56\x3E\x27\x29\x7D\x43\x20\x31\x71\x28\x6C\x29\x7B\x66\x20\x5A\x3D\x2F\x3C\x5C\x53\x5B\x5E\x3E\x5D\x2A\x3E\x2F\x67\x3B\x32\x2E\x78\x3D\x75\x28\x6C\x2E\x7A\x2E\x4E\x24\x31\x73\x2E\x24\x74\x29\x3B\x32\x2E\x70\x3D\x75\x28\x6C\x2E\x7A\x2E\x4E\x24\x31\x74\x2E\x24\x74\x29\x3B\x32\x2E\x4B\x3D\x75\x28\x6C\x2E\x7A\x2E\x4E\x24\x31\x78\x2E\x24\x74\x29\x3B\x32\x2E\x49\x3D\x68\x20\x6B\x28\x29\x3B\x32\x2E\x6D\x3D\x68\x20\x6B\x28\x29\x3B\x32\x2E\x65\x3D\x68\x20\x6B\x28\x29\x3B\x32\x2E\x62\x3D\x68\x20\x6B\x28\x29\x3B\x32\x2E\x48\x3D\x68\x20\x6B\x28\x29\x3B\x32\x2E\x73\x3D\x68\x20\x6B\x28\x29\x3B\x32\x2E\x41\x3D\x68\x20\x6B\x28\x29\x3B\x32\x2E\x72\x3D\x68\x20\x6B\x28\x29\x3B\x32\x2E\x76\x3D\x68\x20\x6B\x28\x29\x3B\x32\x2E\x71\x3D\x32\x2E\x78\x2D\x32\x2E\x70\x2B\x31\x3B\x36\x28\x32\x2E\x71\x3E\x32\x2E\x4B\x29\x32\x2E\x71\x3D\x32\x2E\x4B\x3B\x58\x28\x66\x20\x69\x3D\x30\x3B\x69\x3C\x32\x2E\x71\x3B\x69\x2B\x2B\x29\x7B\x32\x2E\x48\x5B\x69\x5D\x3D\x27\x27\x3B\x32\x2E\x73\x5B\x69\x5D\x3D\x27\x23\x27\x3B\x32\x2E\x41\x5B\x69\x5D\x3D\x27\x27\x3B\x36\x28\x31\x67\x20\x31\x68\x21\x3D\x27\x31\x66\x27\x29\x32\x2E\x41\x5B\x69\x5D\x3D\x31\x68\x3B\x32\x2E\x49\x5B\x69\x5D\x3D\x27\x27\x3B\x32\x2E\x6D\x5B\x69\x5D\x3D\x27\x27\x3B\x32\x2E\x65\x5B\x69\x5D\x3D\x27\x23\x27\x3B\x32\x2E\x62\x5B\x69\x5D\x3D\x30\x3B\x32\x2E\x72\x5B\x69\x5D\x3D\x27\x27\x3B\x36\x28\x31\x67\x20\x31\x39\x21\x3D\x27\x31\x66\x27\x29\x32\x2E\x72\x5B\x69\x5D\x3D\x31\x39\x3B\x32\x2E\x76\x5B\x69\x5D\x3D\x27\x27\x3B\x66\x20\x39\x3D\x6C\x2E\x7A\x2E\x39\x5B\x69\x5D\x3B\x36\x28\x27\x31\x32\x27\x64\x20\x39\x29\x32\x2E\x49\x5B\x69\x5D\x3D\x39\x2E\x31\x32\x2E\x24\x74\x3B\x36\x28\x27\x6D\x27\x64\x20\x39\x29\x32\x2E\x6D\x5B\x69\x5D\x3D\x39\x2E\x6D\x2E\x24\x74\x3B\x36\x28\x27\x65\x27\x64\x20\x39\x29\x7B\x58\x28\x66\x20\x6A\x3D\x30\x3B\x6A\x3C\x39\x2E\x65\x2E\x4C\x3B\x6A\x2B\x2B\x29\x7B\x36\x28\x39\x2E\x65\x5B\x6A\x5D\x2E\x31\x5A\x3D\x3D\x27\x31\x59\x27\x29\x7B\x32\x2E\x65\x5B\x69\x5D\x3D\x39\x2E\x65\x5B\x6A\x5D\x2E\x59\x3B\x32\x30\x7D\x7D\x36\x28\x6A\x3D\x3D\x39\x2E\x65\x2E\x4C\x29\x32\x2E\x65\x5B\x69\x5D\x3D\x27\x23\x27\x7D\x36\x28\x27\x62\x27\x64\x20\x39\x29\x32\x2E\x62\x5B\x69\x5D\x3D\x39\x2E\x62\x2E\x24\x74\x3B\x32\x2E\x62\x5B\x69\x5D\x3D\x32\x2E\x62\x5B\x69\x5D\x2E\x31\x57\x28\x5A\x2C\x27\x27\x29\x3B\x36\x28\x32\x2E\x62\x5B\x69\x5D\x2E\x4C\x3E\x31\x31\x29\x7B\x32\x2E\x62\x5B\x69\x5D\x3D\x32\x2E\x62\x5B\x69\x5D\x2E\x42\x28\x30\x2C\x31\x31\x29\x2B\x27\x2E\x2E\x2E\x27\x7D\x36\x28\x27\x6F\x27\x64\x20\x39\x29\x7B\x36\x28\x27\x31\x33\x27\x64\x20\x39\x2E\x6F\x5B\x30\x5D\x29\x7B\x32\x2E\x48\x5B\x69\x5D\x3D\x39\x2E\x6F\x5B\x30\x5D\x2E\x31\x33\x2E\x24\x74\x7D\x36\x28\x27\x73\x27\x64\x20\x39\x2E\x6F\x5B\x30\x5D\x29\x32\x2E\x73\x5B\x69\x5D\x3D\x39\x2E\x6F\x5B\x30\x5D\x2E\x73\x2E\x24\x74\x3B\x36\x28\x27\x57\x24\x4D\x27\x64\x20\x39\x2E\x6F\x5B\x30\x5D\x29\x7B\x36\x28\x39\x2E\x6F\x5B\x30\x5D\x2E\x57\x24\x4D\x2E\x77\x21\x3D\x27\x31\x4E\x3A\x2F\x2F\x31\x4D\x2E\x31\x50\x2E\x31\x51\x2F\x31\x64\x2F\x31\x54\x2E\x31\x53\x27\x29\x32\x2E\x41\x5B\x69\x5D\x3D\x39\x2E\x6F\x5B\x30\x5D\x2E\x57\x24\x4D\x2E\x77\x7D\x7D\x36\x28\x27\x31\x34\x24\x31\x36\x27\x64\x20\x39\x29\x32\x2E\x72\x5B\x69\x5D\x3D\x39\x2E\x31\x34\x24\x31\x36\x2E\x31\x58\x3B\x36\x28\x27\x31\x69\x24\x78\x27\x64\x20\x39\x29\x32\x2E\x76\x5B\x69\x5D\x3D\x39\x2E\x31\x69\x24\x78\x2E\x24\x74\x7D\x31\x6F\x20\x32\x7D\x43\x20\x31\x35\x28\x44\x29\x7B\x31\x72\x3D\x44\x2E\x42\x28\x30\x2C\x34\x29\x3B\x31\x6E\x3D\x44\x2E\x42\x28\x35\x2C\x37\x29\x3B\x31\x70\x3D\x44\x2E\x42\x28\x38\x2C\x31\x30\x29\x3B\x31\x6B\x3D\x31\x4C\x5B\x75\x28\x31\x6E\x29\x2D\x31\x5D\x2B\x27\x20\x27\x2B\x31\x70\x2B\x27\x2C\x20\x27\x2B\x31\x72\x3B\x31\x6F\x20\x31\x6B\x7D\x31\x6D\x28\x27\x31\x47\x27\x2C\x31\x49\x2C\x27\x27\x2C\x31\x7A\x2C\x27\x31\x38\x27\x29\x3B\x43\x20\x31\x38\x28\x6C\x29\x7B\x66\x20\x63\x3D\x31\x71\x28\x6C\x29\x3B\x66\x20\x33\x3D\x22\x22\x3B\x58\x28\x66\x20\x69\x3D\x30\x3B\x69\x3C\x63\x2E\x71\x3B\x69\x2B\x2B\x29\x7B\x33\x2B\x3D\x27\x3C\x6E\x20\x47\x3D\x22\x31\x52\x22\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x31\x37\x20\x31\x61\x3D\x22\x30\x25\x22\x20\x31\x55\x3D\x22\x30\x22\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x31\x6A\x3E\x27\x3B\x36\x28\x31\x76\x29\x7B\x33\x2B\x3D\x27\x3C\x45\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x61\x20\x59\x3D\x22\x27\x2B\x63\x2E\x65\x5B\x69\x5D\x2B\x27\x22\x20\x6D\x3D\x22\x27\x2B\x63\x2E\x62\x5B\x69\x5D\x2B\x27\x22\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x31\x64\x20\x77\x3D\x22\x27\x2B\x63\x2E\x72\x5B\x69\x5D\x2B\x27\x22\x20\x31\x61\x3D\x22\x31\x62\x22\x20\x31\x48\x3D\x22\x31\x62\x22\x2F\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x2F\x61\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x2F\x45\x3E\x27\x7D\x33\x2B\x3D\x27\x3C\x45\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x6E\x20\x47\x3D\x22\x31\x4A\x22\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x61\x20\x59\x3D\x22\x27\x2B\x63\x2E\x65\x5B\x69\x5D\x2B\x27\x22\x20\x6D\x3D\x22\x27\x2B\x63\x2E\x62\x5B\x69\x5D\x2B\x27\x22\x3E\x27\x3B\x33\x2B\x3D\x63\x2E\x6D\x5B\x69\x5D\x3B\x33\x2B\x3D\x27\x3C\x2F\x61\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x2F\x6E\x3E\x27\x3B\x36\x28\x46\x7C\x7C\x4A\x7C\x7C\x31\x6C\x29\x7B\x33\x2B\x3D\x27\x3C\x6E\x20\x47\x3D\x22\x31\x4B\x22\x3E\x27\x3B\x36\x28\x46\x29\x7B\x33\x2B\x3D\x31\x77\x2B\x63\x2E\x48\x5B\x69\x5D\x7D\x36\x28\x4A\x29\x7B\x36\x28\x46\x29\x7B\x33\x2B\x3D\x27\x20\x2D\x20\x27\x7D\x33\x2B\x3D\x63\x2E\x76\x5B\x69\x5D\x3B\x36\x28\x75\x28\x63\x2E\x76\x5B\x69\x5D\x29\x3E\x31\x29\x7B\x33\x2B\x3D\x31\x4F\x7D\x31\x44\x7B\x33\x2B\x3D\x31\x56\x7D\x7D\x36\x28\x31\x6C\x29\x7B\x36\x28\x46\x7C\x7C\x4A\x29\x7B\x33\x2B\x3D\x27\x20\x2D\x20\x27\x7D\x33\x2B\x3D\x31\x35\x28\x63\x2E\x49\x5B\x69\x5D\x29\x7D\x33\x2B\x3D\x27\x3C\x2F\x6E\x3E\x27\x7D\x33\x2B\x3D\x27\x3C\x2F\x45\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x2F\x31\x6A\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x2F\x31\x37\x3E\x27\x3B\x33\x2B\x3D\x27\x3C\x2F\x6E\x3E\x27\x7D\x33\x3D\x27\x3C\x6E\x20\x47\x3D\x22\x31\x75\x22\x3E\x27\x2B\x33\x2B\x27\x3C\x2F\x6E\x3E\x27\x3B\x31\x65\x2E\x31\x63\x28\x33\x29\x7D","\x7C","\x73\x70\x6C\x69\x74","\x7C\x7C\x74\x68\x69\x73\x7C\x73\x74\x72\x5F\x6F\x75\x74\x7C\x7C\x7C\x69\x66\x7C\x7C\x7C\x65\x6E\x74\x72\x79\x7C\x7C\x73\x75\x6D\x6D\x61\x72\x79\x7C\x4E\x70\x6F\x73\x74\x7C\x69\x6E\x7C\x6C\x69\x6E\x6B\x7C\x76\x61\x72\x7C\x7C\x6E\x65\x77\x7C\x7C\x7C\x4F\x62\x6A\x65\x63\x74\x7C\x6A\x73\x6F\x6E\x7C\x74\x69\x74\x6C\x65\x7C\x64\x69\x76\x7C\x61\x75\x74\x68\x6F\x72\x7C\x73\x74\x61\x72\x74\x7C\x6D\x69\x6E\x7C\x74\x68\x75\x6D\x62\x7C\x75\x72\x69\x7C\x7C\x70\x61\x72\x73\x65\x49\x6E\x74\x7C\x63\x6D\x7C\x73\x72\x63\x7C\x74\x6F\x74\x61\x6C\x7C\x6D\x61\x78\x7C\x66\x65\x65\x64\x7C\x61\x76\x61\x74\x61\x72\x7C\x73\x75\x62\x73\x74\x72\x69\x6E\x67\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x62\x6C\x6F\x67\x67\x65\x72\x5F\x64\x61\x74\x65\x7C\x74\x64\x7C\x44\x69\x73\x70\x6C\x61\x79\x5F\x41\x75\x74\x68\x6F\x72\x7C\x63\x6C\x61\x73\x73\x7C\x61\x75\x6E\x61\x6D\x65\x7C\x70\x75\x62\x7C\x44\x69\x73\x70\x6C\x61\x79\x5F\x43\x6F\x6D\x6D\x65\x6E\x74\x7C\x69\x74\x65\x6D\x7C\x6C\x65\x6E\x67\x74\x68\x7C\x69\x6D\x61\x67\x65\x7C\x6F\x70\x65\x6E\x53\x65\x61\x72\x63\x68\x7C\x74\x79\x70\x65\x7C\x6C\x61\x62\x65\x6C\x7C\x64\x69\x72\x7C\x73\x74\x61\x72\x74\x5F\x69\x6E\x64\x65\x78\x7C\x7C\x63\x61\x6C\x6C\x62\x61\x63\x6B\x7C\x6D\x61\x78\x5F\x72\x65\x73\x75\x6C\x74\x7C\x73\x63\x72\x69\x70\x74\x7C\x67\x64\x7C\x66\x6F\x72\x7C\x68\x72\x65\x66\x7C\x72\x65\x7C\x7C\x53\x75\x6D\x5F\x4C\x65\x6E\x7C\x70\x75\x62\x6C\x69\x73\x68\x65\x64\x7C\x6E\x61\x6D\x65\x7C\x6D\x65\x64\x69\x61\x7C\x47\x65\x74\x5F\x45\x6E\x5F\x44\x61\x74\x65\x7C\x74\x68\x75\x6D\x62\x6E\x61\x69\x6C\x7C\x74\x61\x62\x6C\x65\x7C\x47\x65\x74\x5F\x4E\x65\x77\x5F\x50\x6F\x73\x74\x7C\x4E\x6F\x5F\x54\x68\x75\x6D\x62\x5F\x55\x72\x6C\x7C\x77\x69\x64\x74\x68\x7C\x33\x32\x70\x78\x7C\x77\x72\x69\x74\x65\x7C\x69\x6D\x67\x7C\x64\x6F\x63\x75\x6D\x65\x6E\x74\x7C\x75\x6E\x64\x65\x66\x69\x6E\x65\x64\x7C\x74\x79\x70\x65\x6F\x66\x7C\x4E\x6F\x5F\x41\x76\x61\x74\x61\x72\x5F\x55\x72\x6C\x7C\x74\x68\x72\x7C\x74\x72\x7C\x45\x6E\x67\x6C\x69\x73\x68\x5F\x44\x61\x79\x7C\x44\x69\x73\x70\x6C\x61\x79\x5F\x54\x69\x6D\x65\x7C\x46\x65\x65\x64\x5F\x43\x61\x6C\x6C\x7C\x6D\x6F\x6E\x74\x68\x7C\x72\x65\x74\x75\x72\x6E\x7C\x64\x61\x79\x7C\x46\x65\x65\x64\x5F\x50\x61\x72\x73\x65\x7C\x79\x65\x61\x72\x7C\x74\x6F\x74\x61\x6C\x52\x65\x73\x75\x6C\x74\x73\x7C\x73\x74\x61\x72\x74\x49\x6E\x64\x65\x78\x7C\x72\x65\x63\x65\x6E\x74\x5F\x70\x6F\x73\x74\x5F\x63\x6F\x6E\x74\x65\x6E\x74\x7C\x44\x69\x73\x70\x6C\x61\x79\x5F\x54\x68\x75\x6D\x62\x7C\x4C\x61\x6E\x67\x5F\x42\x79\x7C\x69\x74\x65\x6D\x73\x50\x65\x72\x50\x61\x67\x65\x7C\x61\x6C\x74\x7C\x4D\x61\x78\x5F\x50\x6F\x73\x74\x5F\x44\x69\x73\x70\x6C\x61\x79\x7C\x74\x65\x78\x74\x7C\x72\x65\x73\x75\x6C\x74\x73\x7C\x69\x6E\x64\x65\x78\x7C\x65\x6C\x73\x65\x7C\x4A\x61\x76\x61\x53\x63\x72\x69\x70\x74\x7C\x66\x65\x65\x64\x73\x7C\x70\x6F\x73\x74\x73\x7C\x68\x65\x69\x67\x68\x74\x7C\x49\x6E\x64\x65\x78\x5F\x42\x79\x5F\x4C\x61\x62\x65\x6C\x7C\x72\x65\x63\x65\x6E\x74\x5F\x70\x6F\x73\x74\x5F\x74\x69\x74\x6C\x65\x7C\x72\x65\x63\x65\x6E\x74\x5F\x70\x6F\x73\x74\x5F\x69\x6E\x66\x6F\x7C\x4D\x6F\x6E\x74\x68\x5F\x4C\x69\x73\x74\x7C\x69\x6D\x67\x31\x7C\x68\x74\x74\x70\x7C\x4C\x61\x6E\x67\x5F\x63\x6F\x6D\x6D\x65\x6E\x74\x73\x7C\x62\x6C\x6F\x67\x62\x6C\x6F\x67\x7C\x63\x6F\x6D\x7C\x72\x65\x63\x65\x6E\x74\x5F\x70\x6F\x73\x74\x5F\x63\x6F\x6E\x74\x65\x6E\x74\x5F\x69\x74\x65\x6D\x7C\x67\x69\x66\x7C\x62\x6C\x61\x6E\x6B\x7C\x62\x6F\x72\x64\x65\x72\x7C\x4C\x61\x6E\x67\x5F\x63\x6F\x6D\x6D\x65\x6E\x74\x7C\x72\x65\x70\x6C\x61\x63\x65\x7C\x75\x72\x6C\x7C\x61\x6C\x74\x65\x72\x6E\x61\x74\x65\x7C\x72\x65\x6C\x7C\x62\x72\x65\x61\x6B","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x72\x65\x70\x6C\x61\x63\x65","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function (_0x1277x1,_0x1277x2,_0x1277x3,_0x1277x4,_0x1277x5,_0x1277x6){_0x1277x5=function (_0x1277x3){return (_0x1277x3<_0x1277x2?_0x15a1[4]:_0x1277x5(parseInt(_0x1277x3/_0x1277x2)))+((_0x1277x3=_0x1277x3%_0x1277x2)>35?String[_0x15a1[5]](_0x1277x3+29):_0x1277x3.toString(36));} ;if(!_0x15a1[4][_0x15a1[6]](/^/,String)){while(_0x1277x3--){_0x1277x6[_0x1277x5(_0x1277x3)]=_0x1277x4[_0x1277x3]||_0x1277x5(_0x1277x3);} ;_0x1277x4=[function (_0x1277x5){return _0x1277x6[_0x1277x5];} ];_0x1277x5=function (){return _0x15a1[7];} ;_0x1277x3=1;} ;while(_0x1277x3--){if(_0x1277x4[_0x1277x3]){_0x1277x1=_0x1277x1[_0x15a1[6]]( new RegExp(_0x15a1[8]+_0x1277x5(_0x1277x3)+_0x15a1[8],_0x15a1[9]),_0x1277x4[_0x1277x3]);} ;} ;return _0x1277x1;} (_0x15a1[0],62,125,_0x15a1[3][_0x15a1[2]](_0x15a1[1]),0,{}));

-->
</script>

Read More

Blogger için ‘Bu Yazıyı Paylaşın’ Eklentisi

Şimdi anlatacağım eklenti ise şöyle; Bir çok forumda veyahut web sitelerinde görmüşsünüzdür; yazı altındaki, bu yazıyı forumda paylaş, bu yazıyı sitede paylaş diye link kutucuklarını. İşte şimdi, bizler bunu blogger için yapacağız. Yani, yazdığınız yazının hem site linkini, hem forum linkini hem de yazı linkini bu eklenti sayesinde ziyaretçilerimze sunabileceğiz. Üstelik, bu işlem de bir çok anlatımını yaptığım eklenti gibi çok basit. Herneyse, isterseniz eklentinin kurulum aşamalarına geçelim. Eklentinin ön izlemesi aşağıdadır.

Tasarım > HTML'yi Düzenle > Widget Şablonlarını Genişlet seçeneğinin yanındaki kutucuğu işaretliyoruz.

Daha sonra " post-footer-line post-footer-line-3'> " etiketimizin hemen altına aşağıdaki kodumuzu ekliyoruz.

<b:if cond='data:blog.pageType == "item"'> 
<h3>Bu Yazıyı Paylaşın;</h3>Yazı Linki: 
&lt;input type=&quot;text&quot; size=&quot;60&quot; 
onclick=&quot;javascript: this.select()&quot; 
value=&quot;<data:post.url/>&quot; /&gt;<br/> 
Site kodu: &lt;input type=&quot;text&quot; 
size=&quot;60&quot; onclick=&quot;javascript: 
this.select()&quot; value=&quot;<a 
expr:href='data:post.url'><data:post.title/></a>&quot; 
/&gt;<br/> 
Forum kodu: &lt;input type=&quot;text&quot; 
size=&quot;60&quot; onclick=&quot;javascript: 
this.select()&quot; 
value=&quot;[URL=<data:post.url/>]<data:post.title/>[/URL]&quot; 
/&gt;<br/> 
</b:if> 

Bütün işlem bu kadar güle güle kullanmanız dileğiyle..

Read More

Blogger Cufon Font Kullanımı

Blogger‘da yazı başlıklarının stilini değiştirmek ya da kullanılan fontu değiştirmek için genelde CSS yöntemi kullanılır. Bu iş ise normalde biraz zahmetlidir. Yani CSS bilginizin normalin üstünde olması gerekir. Her istediğiniz fontu da öyle istediğiniz gibi uyumlu yapamıyorsunuz zaten. Sadece belli fontlar eklenebiliyor. Bugün anlatacağım yöntemle ise istediğiniz her fontu Cufon yöntemi yardımıyla bloglarınıza ekleyebilirsiniz tıpkı benim gibi Peki cufon nedir isterseniz önce buna bir bakalım:



Cufon: Web sitelerimizde istediğimiz fontları kullanmamıza imkan sağlayan yeni bir teknoloji. Bu teknoloji sayesinde beğendiğimiz ve hoşumuza giden fontları ufak bir kod satırı ile web sitelerimizde gösterebiliyoruz.

WordPress’de çoğu şey gibi bu yöntem de basit bir eklentiyle yapılıyor ama Blogger’da ufak bir kod satırı ile işi çözmek mümkün. Şimdi de isterseniz bu işlemin nasıl yapıldığını görelim:

<script src='http://cufon.shoqolate.com/js/cufon-yui.js' type='text/javascript'/>
<script src='http://ozicab.in/cufont/myriad-pro.cufonfonts.js' type='text/javascript'/>
<script type='text/javascript'>Cufon.replace(&#39;h1, h3, h4, h5, h6&#39;);</script>

Yukarıdaki kodumuzu " head> " etiketinden sonra yapıştırıyoruz ve işlem tamam. Yukarıda kırmızı ile belirttiğim yerleri sitenize göre düzenleyip özelleştirebilirsiniz.Güle güle kullanmanız dileğiyle..



KAYNAK

Read More

Sitende Twitter İletilerini Gösterme Eklentisi

Çoğu kişi sitesinde bir yerde canlı olarak twitter durumlarını göstermek ister, işte bu kod tam size göre. Kodda istediğiniz sayıda twitter iletinizi istediğiniz şekilde ve istediğiniz kadar canlı akış olarak gösterebilirsiniz. Bunun için aşağıdaki anlatımımızı uygulamanız yeterlidir. Yapmanız gereken aşağıdaki kodda sadece " ozicab " yazan username kısmını kendi twitter username'iniz ile değiştirmek.



Aşağıdaki kodu " head " etiketinden sonra yerleştirin:

<script 
src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js" 
type="text/javascript">
</script>
<script type="text/javascript" charset="utf-8">
getTwitters('tweet', { 
id: 'ozicab', 
count: 1, 
enableLinks: true, 
ignoreReplies: true, 
clearContents: true,
template: '"%text%" <a href="http://twitter.com/%user_screen_name%/statuses/%id%/">%time%</a>'
});
</script>

Eklentinin nerede gözükmesini istediğiniz yere ise aşağıdaki kodu yapıştırabilirsiniz.

<div id="tweet">
<p>Yükleniyor..</p>
<p><a href="http://twitter.com/ozicab">@ozicab</a></p>
</div>

Bütün işlem bu kadar dilediğiniz kadar twitter mesajınızı sitenizde canlı canlı gösterebilirsiniz. Güle  güle kullanmanız dileğiyle..

Read More

Blogger Rastgele Yazı Eklentisi (Tek Link Olarak)

Menümde ki "Rastgele Yazılar" linkini nasıl yaptığımı soranlar için anlatıyorum. Kodumuz sadece blogger platformunda çalışmaktadır, diğer platformlar için ayrı rastgele yazılar eklentisi mevcuttur. Gelelim anlatıma..



İlk olarak aşağıdaki kodumuzu Tasarım > Sayfa Öğeleri > Gadget Ekle > HTML/Java Script den yapıştırıyoruz ve kayıt et diyoruz.

<script type="text/javascript"> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Rastgele Yazı'; document.getElementById('Rastgele').appendChild(a); } </script> <script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script>

İkinci adımda ise aşağıdaki kodumuzu Rastgele Yazılar linkimizin nerede görünmesini istiyorsak oraya yapıştırıyoruz.

<div id='Rastgele'/>

Bütün işlemimiz bu kadar artık ziyaretçileriniz rastgele yazı linkini tıkladıklarında sitenizden rastgele bir yazıyı okuyabilecekler..



İlgili Aramalar: Blogger Rastgele Yazı Eklentisi, linkli rastgele yazı eklentisi, sitene rastgele yazılar ekle, rastgele yazı kodu

Read More

Blogger Toplam Yazı ve Yorum Sayısı Eklentisi

Evet sizlere sitemde de kullandığım bu sade istatistik scriptini paylaşacağım. Kullanımı gayet basit vereceğim kodda kendi blogger sitenize göre 3 düzenleme yapmanız gerekiyor, gerisini kodlardan otomatik olarak güncelliyor. Kod tamamen otomatiktir, yeni eklenen yorumları ve yazıları otomatik olarak gösterir. Bu kodu bir çok sitede görmüşsünüzdür bende paylaşıyım dedim ama biraz değiştirerek paylaştım. Diğer sitelerde gördüğünüz 2 tane alt alta kısa bir yazıdır. Ben bu kodu örneğin " Sitemizde 33 kategoride toplam 310 yazı, bu yazılara yazılmış toplam 433 yorum bulunmaktadır! " haline getirdim. Neyse küçücük bir eklenti için lafı fazla uzattım güle güle kullanmanız dileğiyle..



Önizleme

Kod

<center>
<script style="text/javascript">
function numberOfPosts(json) {document.write('<b>' + json.feed.openSearch$totalResults.$t + '</b><br>');}
function numberOfComments(json) {document.write('<span class="Apple-style-span" style="">toplam</span> <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');}
</script>

<hr />

Sitemizde <b>33</b> kategoride toplam <script src="http://ocabbaroglu.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script>
yazı, bu yazılara yazılmış
<script src="http://ocabbaroglu.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script> yorum bulunmaktadır!
</center>

Read More

Blogger Yazıyı Yandex'te Ara Eklentisi

İlk eklentimiz olan "Blogger Yazıyı Google'da Ara! Eklentisi" adlı yazımızda anlattığım gibi aynı işlemleri uygulayarak bu sefer Yazıyı otomatik Yandex'te arama butonu oluşturacağız. Eklentinin amacı sitenizdeki paylaşımların otomatik yandex'e kayıt olması gibi ve google'dan ping almak gibi bir işlevi var bildiğim kadarıyla ama olsun sonuçta lazım bir eklenti ve gayet şık duruyor ne işe yaradığı kimin umurunda neyse gelelim kuruluma..



Tasarım > Html'yi Düzenle > Widget Şablonlarını Genişlet diyoruz ve hemen aşağıdaki etiketi buluyoruz...

div class="postmeta-primary">

ve hemen altına aşağıdaki kodları ekliyoruz

<a expr:href='&quot;http://yandex.com.tr/yandsearch?text=&quot; +data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,21);&quot;' rel='nofollow' target='_blank' title='Bu Yazıyı Yandex&apos;te Ara'>Yandex'te Ara!</a>

Bütün işlem bu kadar güle güle kullanmanız dileğiyle. Eğer bir sorun olursa lütfen konunun altına yorum olarak bildiriniz.



İlgili Aramalar: Blogger yandex'te ara eklentisi, yazıyı yandex'te ara eklentisi, blogger yazıyı yandex'te aramak

Read More

Blogger Etiketler Sayfasındaki Kutuyu Şekillendirmek

Hiçbir araştırma da yapmama rağmen can sıkıntısı sonucunda o bölümü değiştirmek istedim durduk yere hemen etiketine baktım ve ona bir css hazırladım ve şekillendirdim şimdi bunu size sunacağım. İnternette var mıdır bilmem hiç bakmadım, bana gelip şöyle şuranın kodu yok buradan aldın demeyin! Bu anlattığım yerin neresi olduğunu bilmiyorsan aşağıdaki ön izlemeden bakabilirsin neyse gelelim css kodumuza..

Aşağıdaki kodumuzu blogger sayfamızdaki Tasarım > Html'yi düzenle bölümüne gelip css kodlarımızın olduğu yere yapıştırıyoruz ve kendimize göre düzenliyoruz.

/* Status Message */
/*ocabbaroglu.blogspot.com'a aittir!*/
.status-msg-wrap {
background:#e8e8e8;
border:1px solid #e0e0e0;
padding:5px;
margin-bottom:10px;
}
/*ocabbaroglu.blogspot.com'a aittir!*/
.status-msg-border,.status-msg-bg {
border:none;
background:transparent;
}
/*ocabbaroglu.blogspot.com'a aittir!*/

Read More

Blogger Tekil Sayfayı Tam Sayfa Yapma

Bu konuyu benden anlatmamı isteyen 38ci kişi olan Özlem Yılmaz ve daha öncekiler için anlatıyorum. Aslında pek anlatılacak bir şey yok ortada biraz css, html ve kodlama bilgisi gerekli; o yüzden ben anlatımı yaparken bende olmuyor şunu nasıl yapacağım demesin kimse bu işlemi de sayfamıza koyacağımız bir kaç css kod sayesinde bu css kodlarımızda gizleme kodu olucak ben buraya en çok kullanılan sidebar id'li kodu paylaşacağım bu kod bütün tasarımlarda ayrı ayrı idlerde sidebar olduğu için gerçekten kodlama bilgisi gerektirmektedir. Örnek olarak buradaki sayfamı ziyaret edebilirsiniz. Neyse geliyim kodlara..



Aşağıdaki kodu tam sayfa yapacağımız tekil blogger sayfamıza ekliyoruz..

<style type="text/css">
/*ocabbaroglu.blogspot.com'a aittir!*/
#sidebar-wrapper {
display:none;
}
/*ocabbaroglu.blogspot.com'a aittir!*/
#main-wrapper {
width: 940px;
}
/*ocabbaroglu.blogspot.com'a aittir!*/
#main2-wrapper {
width: 940px;
margin:0 0 0 10px;
}
/*ocabbaroglu.blogspot.com'a aittir!*/
</style>

Kodumuzu kendi sitemize göre düzenliyoruz css veya kodlama bilgisi olanlar hemen işi anlayacaklardır, ama bilgisi olmayanlar lütfen 1 milyon kere özelden yazıp durmasın!

Read More

Hepsi Bir Arada Sosyal Ağlar Kutusu

Yanda görmüş olduğunuz bu muhteşem hepsi bir arada sosyal ağ kutusu ile bütün sosyal profillerinizi sitenizin kenarında bir noktada ve şık şekilde görüntüleyebilirsiniz. Kurulum gerektirmeyen hazır kod sistemi ve değişen renkleriyle gerçekten çok kullanışlı bir kod. Birkaç bilgi vermek gerekirse kodda her şey bir arada ve hazır ama sizin yapmanız gereken aşağıda belirteceğim yerleri kendi sosyal ağ profil linklerinize göre düzenlemek. Uygulamanın demosunu görmek için yandaki resmin üzerine tıklayabilirsiniz veya canlı demo için buraya tıklayabilirsiniz. Neyse hemen kodlara gelelim..



Tasarım > Gadget Ekle > Html/Java Script aşamalarını uyguluyoruz ve hemen kodumuzu ekliyoruz..



Kod:

<style> 
/* Social Widget */ 
#ozicab-mashable-bar { 
    border: 0; 
    margin-bottom: 10px; 
    margin: 0 auto; 
        width:300px; 
} 
.fb-likebox { 
    background: #fff; 
    padding: 10px 10px 0 10px; 
    border: 1px solid #D8E6EB; 
    margin-top: -2px; 
        height:80px; 
} 
.googleplus { 
    background: #F5FCFE; 
    border-top: 1px solid #FFF; 
    border-bottom: 1px solid #ebebeb; 
    border-right: 1px solid #D8E6EB; 
    border-left: 1px solid #D8E6EB; 
    border-image: initial; 
    font-size: .90em; 
    font-family: "Arial","Helvetica",sans-serif; 
    color: #000; 
    padding: 9px 11px; 
    line-height: 1px;} 
.googleplus span { 
    color: #000; 
    font-size: 11px; 
    position: absolute; 
    display:inline-block; 
    margin: 9px 70px;} 
.g-plusone {    float: left;} 
.twitter { 
    background: #EEF9FD; 
    padding: 10px; 
    border: 1px solid #C7DBE2; 
    border-top: 0;} 
#mashable { 
    background: #EBEBEB; 
    border: 1px solid #CCC; 
    border-top: 1px solid white; 
    padding: 2px 8px 2px 3px; 
    text-align: right; 
    border-image: initial;} 
#mashable .author-credit {} 
#mashable .author-credit a { 
    font-size: 10px; 
    font-weight: bold; 
    text-shadow: 1px 1px white; 
    color: #1E598E; 
    text-decoration:none;} 
#email-news-subscribe .email-box{ 
    padding: 5px 10px; 
    font-family: "Arial","Helvetica",sans-serif; 
    border-top: 0; 
    border-right: 1px solid #C7DBE2; 
    border-left: 1px solid #C7DBE2; 
    border-image: initial; 
   height:35px;} 
#email-news-subscribe .email-box input.email{ 
    background:#FFFFFF; 
    border: 1px solid #dedede; 
    color: #999; 
    padding: 7px 10px 8px 10px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    -o-border-radius: 3px; 
    -ms-border-radius: 3px; 
    -khtml-border-radius: 3px; 
    border-radius: 3px; 
    border-image: initial; 
    font-family: "Arial","Helvetica",sans-serif;}    
#email-news-subscribe .email-box input.email:focus{color:#333}    
#email-news-subscribe .email-box input.subscribe{ 
    background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); 
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00)); 
    background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); 
    -pie-background: linear-gradient(270deg,#ffca00,#ff9b00); 
    font-family: "Arial","Helvetica",sans-serif; 
    border-radius:3px; 
    -moz-border-radius:3px; 
    -webkit-border-radius:3px; 
    border:1px solid #cc7c00; 
    color:white; 
    text-shadow:#d08d00 1px 1px 0; 
    padding:7px 14px; 
    margin-left:3px; 
    font-weight:bold; 
    font-size:12px; 
    cursor:pointer; 
    border-image: initial;} 
#email-news-subscribe .email-box input.subscribe:hover{ 
    background: #ff9b00; 
    background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00); 
    background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00)); 
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
    outline:0;-moz-box-shadow:0 0 3px #999; 
    -webkit-box-shadow:0 0 3px #999; 
    box-shadow:0 0 3px #999 
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00)); 
    background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%); 
    -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00); 
    border-radius:3px; 
    -moz-border-radius:3px; 
    -webkit-border-radius:3px; 
    border:1px solid #cc7c00; 
    color:#FFFFFF; 
    text-shadow:#d08d00 1px 1px 0}    
#other-social-bar { 
    background-color: #D8E6EB; 
    box-shadow: 0 1px 1px #FFFFFF inset; 
    padding: 0px; 
    font-family: "Arial","Helvetica",sans-serif; 
    font-weight:bold; 
    overflow: hidden; 
    border: 1px solid #B6D0DA; 
       height:37px; 
} 
#other-social-bar ul {list-style: none outside none; padding-left: 4px;} 
#other-social-bar .other-follow { 
    float: left; 
    color:#1E598E; 
    overflow: hidden; 
    height:20px; 
    padding:5px; 
    width: 270px;} 
#other-social-bar .other-follow ul { 
    list-style: none outside none; 
    padding-left: 4px;} 
#other-social-bar .other-follow ul li { 
    font-size: 12px; 
    font-weight: bold; 
    display:inline; 
    border:0; 
    text-shadow: 1px 1px white;}    
#other-social-bar .other-follow ul li a { 
    font-size: 12px; 
    color:#1E598E; 
    font-weight: bold; 
    display:inline; 
    text-shadow: 1px 1px white;} 
#other-social-bar .other-follow li { 
    font-size: 12px; 
    font-weight: bold; 
    display:inline; 
    border:0; 
    text-shadow: 1px 1px white;} 
#other-social-bar .other-follow li a { 
    font-size: 12px; 
    color:#1E598E; 
    font-weight: bold; 
    display:inline; 
    text-shadow: 1px 1px white;} 
#other-social-bar .other-follow li.my-rss { 
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjndBHFTO1t3MU2cEnARJQTwjtE3hyZP0MQR7EczEHFRp7ZMwyz3WnyA2oMivAVwEo7-P4oEniJzZnY4g5O3cgOfNd6KYBn6VUls6052fOUvNgVeXFifInT5JL-lctyju0Ne8yigau4aIA/s400/rss-16x16.png') no-repeat transparent; 
    line-height: 1; 
    padding: 0px 3px 1px 20px; 
    width: 60px; 
    margin-bottom:0px; 
        margin-left:5px;}
#other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-linkedin a, #other-social-bar .other-follow li.my-gplus a{ 
text-decoration:none; 
}
#other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-linkedin a:hover, #other-social-bar .other-follow li.my-gplus a:hover{ 
text-decoration:underline; 
}
#other-social-bar .other-follow li.my-linkedin { 
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7FEVbBhFPrN85fdv9oD9viESG0RTTcawUIGn7IZZtp2281Mw7A1aBn9AFIW2ATSQml31dDaR9GUly_9_YOJeU1dIJZFkVDNhupBJt2HErrDPw2fc1ic5wfjeEgWdV0Q839QqHsdLQ1sk/s400/linkedin-16x16.png') no-repeat transparent; 
    line-height: 1; 
    padding: 0px 3px 1px 20px; 
    width: 60px; 
    margin-bottom:0px;} 
#other-social-bar .other-follow li.my-gplus { 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX81I7bKPTEaGYo_hvrXPsEQ4HKFunKoCG8Cz8cPjV8MR2LGy2_n_Sosoy3z29rREM0F3XmuSf-nfWKVwzodowvl_etXuyRgvNUBYzj4NnDbzgQNzU-CKA3e-CsPNkhmeayXQDkSLuutg/s400/gplus-16x16.png) no-repeat transparent; 
    line-height: 1; 
    width: 60px; 
    padding: 0px 3px 1px 20px; 
    margin-bottom:0px;}

</style>

<!--[if IE]>
<style> 
#email-news-subscribe .email-box input.subscribe{ 
    background: #FFCA00; 
    } 
</style>
<![endif]-->
 
<!--begin of social widget--> <div style="margin-bottom:10px;"> <div id="ozicab-mashable-bar" > <!-- Begin Widget --> <div class="fb-likebox"> <!-- Facebook --> <iframe src="//www.facebook.com/plugins/like.php?href=http://facebook.com/oguzhanpage&amp;send=false&amp;layout=standard&amp; width=200px&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;
font&amp;height=100px&amp;appId=234513819928295" scrolling="no" frameborder="0" style="border:none; overflow:hidden; "></iframe> </div> <div class="googleplus"> <!-- Google --> <span> Sitemizi Google Plusla +1'ler misin?!</span><div class="g-plusone" data-size="medium"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div> <div class="twitter"> <!-- Twitter --> <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp;
align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;
lang=en&amp;link_color=&amp;screen_name=ozicab&amp;show_count=&amp;
show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div> <div id="email-news-subscribe"> <!-- Email Subscribe --> <div class="email-box">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ocabbaroglu', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">    
        <input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="ocabbaroglu@gmail.com" onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" />        
        <input type="hidden" value="tntbystc" name="uri" /> 
        <input type="hidden" name="loc" value="en_US" /> 
        <input class="subscribe" name="commit" type="submit" value="Kayıt Ol!" />    
    </form> 
</div> </div> <div id="other-social-bar"> <!-- Other Social Bar --> <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/ocabbaroglu" target="_blank">RSS Feed</a> </li> <li class="my-linkedin"> <a rel="nofollow" title="linkedin" rel="author" href="http://tr.linkedin.com/in/ozicab" target="_blank">linkedin</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href="http://plus.google.com/104308633246680911787" target="_blank">Google Plus</a> </li> </ul> </div> <div id="mashable" style="background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><script type="text/javascript">
document.write(unescape('%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%6F%63%61%62%62%61%72%6F%67%6C%75%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%22%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%20%3E%44%65%73%69%67%6E%20%42%79%20%4F%7A%69%63%61%62%20%57%65%62%20%44%65%73%69%67%6E%20%BB%3C%2F%61%3E'));
</script></span></div></div>
<!-- End Widget --> </div> <!--end of social widget-->

Şimdi gelelim kendi sosyal ağlarımızın linklerini düzenlemeye; (Ctrl + f Yardımı ile linkleri arıyoruz ve kırmızı ile belirttiğim yerlere kendi nickimizi yazıyoruz..)

Facebook için: http://facebook.com/oguzhanpage

Twitter için: screen_name=ozicab

E-Bülten için:  http://feedburner.google.com/fb/a/mailverify?uri=ocabbaroglu

Linked İn için: http://tr.linkedin.com/in/ozicab





İlgili Aramalar: Sosyal ağ kutusu, blogger sosyal medya butonları, hepsi bir arada sosyal ağ butonarı

Read More

Blogger Üzerine Gelince Açılan Navbar Eklentisi

Blogger siteleri için çok yararlı bir kod olan blogger üst çubuğuna daha estetik bir görüntü sağlayan bu kod sayesinde Blogger Navbar'ınız yukarıda yok olacak ve üzerine gelince açılacak. Bilmiyorum galiba bu yazıyı okuyana kadar hiçbir Türk blogger sitesinde böyle bir eklenti yoktu. Şu an sadece bizde var sanırım (ç)alınmaz ise! Yukarıdaki kodu dışlanmış bir yabancı blogger eklenti sitesinde gördüm ve birkaç düzenlemeden sonra sizlere sunuyorum. Umarım beğenirsiniz eklentinin ön izlemesi için buraya tıklayınız. Güle güle kullanmanız dileğiyle..

Gelelim kuruluma;

Tasarım > Html'yi Düzenle ' bölümüne geliyoruz ve hemen aşağıdaki etiketimizi buluyoruz.

/b:skin> 

Yukarıdaki bulduğumuz etiketten hemen önce aşağıdaki kodlarımızı ekliyoruz.

#navbar-iframe {
  height:5px;}

/* IE7, IE8, IE6 */
  #navbar-iframe { height/*\**/: 30px\9; }

#navbar-iframe:hover {
  height:40px; !important; }

İlgili Aramalar: blogger üst çubuk kaldırmak, blogger açılır kapanır üst çubuk, blogger navbar kaldır, blogger açılır kapanır navbar eklentisi

Read More

Blogger Yazıyı Google'da Ara Eklentisi

Berk adında bir ziyaretçimin sorması üzerine bende sizlere sitemde bulunan "Yazıyı google'da ara!" eklentisinin ne işe yaradığını ve nasıl kurulduğunu anlatacağım. Eklentinin amacı sitenizdeki paylaşımların otomatik google'a kayıt olması gibi ve google'dan ping almak gibi bir işlevi var bildiğim kadarıyla ama olsun sonuçta lazım bir eklenti ve gayet şık duruyor ne işe yaradığı kimin umurunda neyse gelelim kuruluma..



Tasarım > Html'yi Düzenle > Widget Şablonlarını Genişlet  diyoruz ve hemen aşağıdaki etiketi buluyoruz...

div class="postmeta-primary">

ve hemen altına aşağıdaki kodları ekliyoruz

<a expr:href='&quot;http://www.google.com/search?hl=tr&amp;q=&quot; +data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,21);&quot;' rel='nofollow' target='_blank' title='Bu Yazıyı Googleda Ara'>Google&#39;da Ara!</a>

Bütün işlem bu kadar güle güle kullanmanız dileğiyle. Eğer bir sorun olursa lütfen konunun altına yorum olarak bildiriniz.



İlgili Aramalar: Blogger google'da ara eklentisi, yazıyı google'da ara eklentisi, blogger yazıyı google'da aramak

Read More

Twitter Takipçi Kutusu

Bu aralar en çok istenen ve aranan twitter takipçi kutusunu sizler için araştırdım. Aslında kodu bende istiyordum biraz araştırdım. En iyi ve çalışan tek kodu BlogHocam 'da buldum ve sizler için burada da yayınlıyorum. Kullanımı çok basit bir javascript kod. Görünüm ise facebook beğen kutusu ile neredeyse aynı ama bence bu daha şık neyse beğenip beğenmemek size kalmış. Hemen koda gelelim..

Ön izleme:

Sitemizde istediğimiz bir bölüme aşağıdaki kodu ekliyoruz.. (Koddaki kırmızı ile gösterdiğim yere kendi twitter id 'inizi yazmayı unutmayın!)




Kod:

<script type="text/javascript" 
src="http://s.moopz.com/fanbox_init.js"></script><div 
id="twitterfanbox"></div><script 
type="text/javascript">fanbox_init("ozicab");</script> 

İlgili Aramalar: twitter takipçi kutusu, blogger twitter eklentisi, sitene twitter kutusu ekle, twitter takip et kutusu

Read More

Blogger için Son Yazılar Eklentisi

Sitenizin sidebarın da veya herhangi bir yerinde yazdığınız son yazılarınızı göstermek için hazırlanmış kullanımı kolay kısa bir kod ile eklentimizi yüklüyoruz. Eklentinin ön izlemesi aşağıdadır.

Tasarım > Sayfa Öğeleri > HTML/Javascript Ekle ' diyoruz ve aşağıdaki kodumuzu ekliyoruz.

<script style="text/javascript">
function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(more)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
var re = /<\S[^>]*>/g; 
postcontent = postcontent.replace(re, "");
if (!standardstyling) document.write('<div class="bbrecpost">');
if (standardstyling) document.write('<br/>');
document.write(posttitle);
document.write('<br/>');
if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
if (!standardstyling) document.write('</div><div class="bbrecpostsum">');
if (showpostsummary == true) {
if (standardstyling) document.write('<br/>');
if (postcontent.length < numchars) {
if (standardstyling) document.write('<i>');
document.write(postcontent);
if (standardstyling) document.write('</i>');}
else {
if (standardstyling) document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
if (standardstyling) document.write('</i>');}
}
if (!standardstyling) document.write('</div>');
}
}

var numposts = 5;
var showpostdate = false;
var showpostsummary = false;
var numchars = 250;
var standardstyling = false;
</script>
<script src="http://www.ocabbaroglu.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Yukarıda kırmızı ile gösterdiğim yere kendi sitenizin adresini yazınız. Ayrıca görünmesini istenen konu sayısını " var numposts = 5 " bölümünden 5 sayısını arttırıp azaltabilirsiniz. İşlem Tamam Güle Güle Kullanın..

Read More

E-posta Takip-Bülten Blogger Eklentisi

Sitenizdeki ziyaretçilerinize haftalık sitenizde paylaştığınız yazılarınızı gönderen bu uygulama, Sitenizi ziyaret etmeye vakti olmayan veya yeni içeriklerden haberi olmayan herkes e-bülteninize abone olarak sitenizi/blogunuzu takip edebilecek! Gelelim uygulamaya..

Tasarım > Gadget Ekle > HTML/Java Script  bölümüne girip aşağıdaki kodlarımızı yapıştırıyoruz, kırmızı renkteki alanı kendi sitemize göre değiştiriyoruz ve işlem tamam. Güle güle kullanın...



Kod:

<style>
/* Subscribe Form Ozicab Design
=======================*/
#feedemail-form {
padding : 0 !important ;
margin : 0;
display : block;
position : relative;
overflow : hidden;
}
.emwrapper {
background : url(https://lh6.googleusercontent.com/-ozQB8yycGnw/ThuA1AImWRI/AAAAAAAAAiI/xa3rx6lctU8/em_wrapper.png) repeat left top;
margin : 0 0 10px 0;
padding : 3px;
}
.embox {
background : #fff url(https://lh6.googleusercontent.com/-v2DVb_ZtdLg/ThuA1erR5DI/AAAAAAAAAiM/bBQhrNxdEYE/email-icon.png) no-repeat 4px 50%;
}
.embox input {
font-size : 11px !important ;
}
.feedemail-input {
background : none;
width : 58%;
float : left;
padding : 0;
margin : 5px 0 0 23px;
border : none;
}
.feedemail-button, .feedemail-button:focus {
width : 30%;
float : right;
color : #fff;
font-weight : bold;
background-color : #436eee;
margin : 0;
padding : 5px;
border : none;
}
.feedemail-input:focus, .feedemail-input:hover {
border : none;
}
.feedemail-button:hover {
cursor : pointer;
}
span.feedemail-footer {
display : block;
font-size : 11px;
line-height : 1.4em !important ;
}
</style>

<div id='feedemail-form'>
<div class='widget'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedemail-form' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ocabbaroglu&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=600,height=550&apos;);return true' target='popupwindow'>
<div class='emwrapper'>
<div class='embox'>
<input class='feedemail-input' maxlength='150' name='email' onblur='this.value=(this.value==&apos;&apos;) ? &apos;ocabbaroglu@gmail.com&apos; : this.value;' onfocus='this.value=(this.value==&apos;ocabbaroglu@gmail.com&apos;) ? &apos;&apos; : this.value;' type='text' value='ocabbaroglu@gmail.com'/>
<input name='uri' type='hidden' value='pandathemes'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='feedemail-button' type='submit' value='Kaydol!'/>
<div class='clear'><!-- --></div>
</div>
</div>
<div><span class='feedemail-footer'><center>Haftalık bültenimize abone olarak hergün yenilenen içeriklerimizden sürekli haberdar olabilirsiniz!</center></span></div>
</form>
</div>
</div>

Read More

Blogger Yazar Hakkında Eklentisi

Blogger sitenizde yazılarınızın altında yazar hakkında bölümü eklemek. Sade ve kullanışlı bu kısa ve kolay eklenti sayesinde blogunuz da yazılarınızın altında kendi tanıtımınız ve resminizi ekleyebilirsiniz. Her renge ve boyuta ayarlanabilen bu eklenti kesinlikle çok işinize yarayacaktır. Eklentinin ön-izlemesi aşağıdadır; demosu içinde buraya tıklamanız yeterlidir. Güle güle kullanmanız dileğiyle..

Hemen kurulum gelelim;

]]></b:skin>

Etiketinin hemen üstüne aşağıdaki kodları ekleyelim;

Kod:

/* Yazar Hakkinda Ozicab
=======================*/
.author-box {
border:1px solid#e0e0e0;
margin: auto;
margin: 5px 3px;
padding: 5px;
overflow: auto;
background:#FFF;
}
.author-box a {
color: #005594;
font-size: 14px;
font-weight: Bold;
letter-spacing: 0px;
margin: 0 0 1em;
}
.author-box p {
margin: 0;
padding: 0;
font-size: 14px;
}
.author-box img {

float: left;
margin: 0 5px 0 0;
padding: 2px;
}

Şimdide aşağıdaki etiketi bulalım

<div class='post-footer'>

Etiketin hemen altına aşağıdaki kodlarımızı ekleyelim

Kod:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author-box'>
<p><img alt='' border='0' class='' height='70' src='https://lh4.googleusercontent.com/-5BH2LfGoK7Q/AAAAAAAAAAI/AAAAAAAAABw/SLXfUvYsmY4/s200-c-k/photo.jpg' width='70'/><b>Oğuzhan Cabbaroğlu Hakkında:</b><br/>Web tasarım, grafik tasarım, domain-host alım satım işleriyle uğraşan, Sanal alemde adını duyurmuş, tanınmış bir sanal alem çocuğu, Facebook, twtitter, google+ ve bir çok sosyal ağlarda üyeliği olan sanalda ve normalde takma ismi ozicab olan bir insan..
<p style='margin:1px 0'/></p>
</div>
</b:if>

Bütün işlem bu kadar artık içeriklerinizin altında yazar hakkında eklentisi var. Güle güle kullanın..

Read More

Blogger Lazy Load JQuery Eklentisi

Bu eklentiyle tüm resim nesneleri jpg,gif,png,bmp ve hatta flash dosyalar bile siz sayfanın aşağı taraflarına indikçe yüklenmiş olacak ! Sitenizin hızını %75 arttıran bu eklenti sayesinde interneti yavaş olan ziyaretçilerinizde sitenizde sorunsuz gezinebilicekler. Gelelim uygulamaya...

Tasarım > Html'yi Düzenle > Widget Şablonlarını Genişlet

</head>

Etiketinin hemen altına aşağıdaki kodları ekliyoruz ve işle tamam güle güle kullanmanız dileğiyle..

Kod:

<script charset='utf-8' src='http://konfor.enesilhan.net/js/jquery.min.js' type='text/javascript'></script>
<script src='http://konfor.enesilhan.net/js/jquery.lazyload.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function() {
          $("img").lazyload({
              placeholder : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTRVvPAdZByaL1_E409m3YfpEWWBt7nMGEsCFTspTRo3Azb1-xEmDKZWdF43SejTp7vZSuy8RprdQTqWUrtJmO0z57XHVuuobtbejF_0HIi0p5DAkOtqpEgOHFH5eFcN4DtrxzOLq-F8Y/s1600/grey.gif",
              effect      : "fadeIn"
           });
       });
</script>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>

Read More

Blogger Resimli Benzer Konular Eklentisi

Çok yararlı bir eklenti ve ayrıca çok şık, blog okuyucularınıza okudukları yazının benzerlerini göstererek daha fazla blogunuz da kalmasını sağlar. Görüntü düzen açısından çok yararlı bir eklenti..



Yerleşim > HTML'yi Düzenle > Widget Şablonlarını Genişlet devam edelim;

</head> 

Etiketinin hemen üstüne şu kodları ekliyelim:

Kod:

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<style type='text/css'> 
#related-posts { 
float:center; 
text-transform:none; 
height:100%; 
min-height:100%; 
padding-top:5px; 
padding-left:5px; 
} 
#related-posts h2{ 
font-size: 1.6em; 
font-weight: bold; 
color: #F1921A; 
font-family: Times New Roman; 
margin-bottom: 0.75em; 
margin-top: 0em; 
padding-top: 0em; 
} 
#related-posts a{ 
color:black; 
} 
#related-posts a:hover{ 
color:black; 
} 
#related-posts  a:hover { 
background-color:none; 
border: 1px solid #ddd 
} 
</style> 
<script type='text/javascript'> 
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHPCp0g976S6l-JknxBCP6VtU1FIKg2D7gmiXRsJWSAkVurqlMg1gRoWfcgtXi6kbA2mjCyNWKw2-dUCotpbtC0HPwAUB1x6dHNwqbgpaRkDFv3_vnqfbHK-N1ebvXlAoM2oWlR8i8FHI/s72/no-image.PNG&quot;; 
var maxresults=5; 
var splittercolor=&quot;#E6E7E8&quot;; 
var relatedpoststitle=&quot;Benzer Yazılar:&quot;; 
</script> 
<script src='http://dl.dropbox.com/u/60346665/resimli-benzer-yazilar.js' type='text/javascript'/> 
<!-- remove --></b:if> 

<div class='post-footer'>

Etiketinin de hemen altınada şu kodları ekleyelim:



Kod:

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div id='related-posts'> 
<b:loop values='data:post.labels' var='label'> 
<b:if cond='data:label.isLast != &quot;true&quot;'> 
</b:if> 
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop> 
<script type='text/javascript'> 
removeRelatedDuplicates_thumbs(); 
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); 
</script> 
</div><div style='clear:both'/> 
<!-- remove --></b:if>

Read More

Blogger için Hareketli Yeni Gönderiler Eklentisi

Yukarıdaki resimdeki şık sade ve kullanışlı bir blogger eklentisi. Eklenti sayesinde blogunuzdaki tüm yayınları güzel bir şekilde site ziyaretçilerinize ulaştırabilirsiniz. Kendiliğinden otomatik yenilenen ve istediğiniz miktarda yazı, özet resim boyutları ayarlanabilen kullanışlı bir uygulamadır. Eklentinin demosunu görmek için buraya tıklayın! Yapmanız gerekenler;



1- Yerleşim/ Sayfa Öğleri

2- Html/javascrip/gadget ekle



Aşağıdaki kodu ekleyin ve kırmızı ile renglendirilmiş url silip kendi urlnizi ekleyin. İşlem bu kadar güle güle kullanmanız dileğiyle..

Kod:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 
<style type="text/css" media="screen"> 
<!--
#spylist { 
overflow:hidden; 
margin-top:5px; 
padding:0px 0px; 
height:350px; 
} 
#spylist ul{ 
width:220px; 
overflow:hidden; 
list-style-type: none; 
padding: 0px 0px; 
margin:0px 0px; 
} 
#spylist li { 
width:208px; 
padding: 5px 5px; 
margin:0px 0px 5px 0px; 
list-style-type:none; 
float:none; 
height:70px; 
overflow: hidden; 
background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x; 
border:1px solid #ddd; 
}
#spylist li a { 
text-decoration:none; 
color:#4B545B; 
font-size:11px; 
height:18px; 
overflow:hidden; 
margin:0px 0px; 
padding:0px 0px 2px 0px; 
} 
#spylist li img { 
float:left; 
margin-right:5px; 
background:#EFEFEF; 
border:0; 
} 
.spydate{ 
overflow:hidden; 
font-size:10px; 
color:#0284C2; 
padding:2px 0px; 
margin:1px 0px 0px 0px; 
height:15px; 
font-family:Tahoma,Arial,verdana, sans-serif; 
}
.spycomment{ 
overflow:hidden; 
font-family:Tahoma,Arial,verdana, sans-serif; 
font-size:10px; 
color:#262B2F; 
padding:0px 0px; 
margin:0px 0px; 
}
--> 
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg"; 
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://ocabbaroglu.blogspot.com/";
limitspy=4 
intervalspy=4000
</script>
<div id="spylist"> 
<script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script> 
</div>

Read More

Blogger Sosyal Medya Eklentisi ve Email Takip Html Kodu

Herkes çogunlukla sosyal medyaya kayıtlı olduğu alanları toplu ve düzgün bir şekilde göstermek istiyor...

Buna istinaden bende böyle bişey paylaşmak istedim çok sade ve hoş görünüyor. Bütün renk te temalara koyuldugunda çok hoş bir görüntü bırakıyor sizlerle paylaşmak istedim. Biraz anlatmak gerekirse üzerine gelince renklenen ve parlayan java kodla yaptım. Önizlemesi aşağıdadır. İsterseniz demosu için buraya tıklayın.

Kodlarımızı şu şekilde ekliyoruz;
Tasarım>Gadget  Ekle>Html/JavaScript Ekle  aşağıdaki kodları sitenize eklemek  

Kod:

<style type="text/css">

.mbt a{
    color: #6e6e6e;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
.mbt a:hover {
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.mbt a:active {
    color: #000;
    border-color: #444;
}


.mbtbar{ width:280px; float: left; margin-left:3px; margin-top:5px; padding:0;}

.mbtbar .emailsub{border-bottom: 0px solid #e6e6e6; padding: 0px 0 15px 0; float: left; width: 100%; font-family: Helvetica, Arial;}

.mbtbar .emailsub .emailupdatesform{width: 100%; float: right; padding:0px;}

.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px;  width: 130px; height:30px;   border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;}

.mbtbar .emailsub .emailupdatesform input.emailupdatesinput:hover{

border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.mbtbar .emailsub .emailupdatesform input.joinemailupdates:hover{ border-color: #666; 
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); cursor:pointer;
}

.mbtbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
    background: #F3F3F3;
   font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 10px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
  border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}

.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px;  width: 145px; height:28px;   border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;}

.mbtbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
    background: #F3F3F3;
   font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 0px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
  border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}

</style>   <!--[if IE 8]> <style>
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: left; border: 1px solid #dcdcdc; padding: 5px 10px; color: #989898; font-size: 12px;  width: 130px; height:18px;   border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;}

.mbtbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
    background: #F3F3F3;
   font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 5px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
  border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}

</style> <![endif]-->
<div class="mbt" style="padding: 0pt 0pt 0pt 5px;">
<table>
    <tbody>
        <tr>
            <td><a rel="nofollow" target="_blank" href="http://feeds.feedburner.com/ocabbaroglu"><img border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiboGswS6lnnIF5bM2-u-eZDYLGR0zugIAetpYHmI5GYAoyEuiElo-_Kp83qFbXNglfnF4Dd7AyybPfIINI7j6iLEeZNGmbEF6XVcSFy0sI4oc7bT2pLG9c9uBVS9eDLcodSlZby8lnYxs/s1600/rss.png" /></a></td>
            <td><a style="margin-left:5px;" href="http://twitter.com/ozicab" rel="nofollow" target="_blank"><img border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9lrxLoVzDpEEtG7rT1eGmoidxMg_qDGT273F3Dop1Hq6lTOd6lyRbZtC2KCmdMCqRJxWqaQ3F7ZkUa495Pm2yuFoxjPDAmktFC7aC6M8XXZVI6TWc79PYp-cicPzqL-bVHJEFgAy87M8/s1600/twitter.png" /></a></td>
            <td><a style="margin-left:5px;" href="http://facebook.com/oguzhanpage" rel="nofollow" target="_blank"><img border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6sFD_-ntb28Q0TW3Kiyt7xP4eaagTV5QHiGoDokeZ6Mmw2wjlVVb31jzvsGDmY12Lyggf2VYRt6dLbaPHRMQbFQLzY4q1pHpc0PVDr5bVb3nioF6JgdYD8KPgcO0iFQksBem8vI5N_aM/s1600/facebook.png" /></a></td>
        </tr>
    </tbody>
</table>
<div class="mbtbar">
<div class="emailsub">
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ocabbaroglu', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
    <input gtbfieldid="10" class="emailupdatesinput" name="email" value="Email Adresin..." onblur="if (this.value == '') {this.value = 'Email Adresin...';}" onfocus="if (this.value == 'Email Adresin...') {this.value = '';}" type="text" /><input value="yasarguner" name="uri" type="hidden" /><input value="Takip&ccedil;i ol" class="joinemailupdates" type="submit" />
</form>
</div>
</div>
</div>
</div>

Read More