Kişisel blog yazarken platform olarak Blogger kullanıyorsanız, muhtemelen blogunuzu kendinize özgü ve şekil olarak güzelleştirmek içinde bir çaba sarf ediyorsunuzdur.Blogunuza eşsiz güzellik katacak olan Blogger Popüler yazılar widgetini görünüm olarak CSS kodları ile değiştirip blogunuzu göz alıcı yapmak ve internetteki birçok blog sayfalarından görünüm olarak bir adım önde olmanızı sağlayacak eklentiyi sizlerle paylaşacağız.Blogger Popüler yazılar eklentisi, görünüm farklılığı sayesinde sitenizi sürekli ziyaret eden takipçilerinde dahi dikaktini çekerek hedef kitlenizi arttırmaya yönelik bir çalışma olacak diye tahmin ediyorum.Bu eklentide anlatacaklarımızı blogunuzda Blogger Popüler yayınlar widgeti kurulu olanlar 5.Adımdan başlayarak takip edip uygulamaya başlayabilirler.Blogunda blogger popüler yayınlar eklentsisi hiç olmayanlar 1. maddeden başlasınlar.



Blogger Popüler Yayınlar Eklentsi Kurulumu

1-Blogger Hesabınızla giriş Yapın.
2-Yerleşim>Gadget Ekle Yolunu Takip Edin.
3-Açılan Pencerede Popüler Yayınlar Gadgetini tıklayın, aşağıda resimde görüldüğü gibi.

4-Popüler Yayınlar Gadgeti Ekle Butonuna tıkladığınızda aşağıdaki gibi bir pencere açılacak, bu pencerede ilgili kısımlardaki ayarlamalar Türkçe olarak verilmiştir,bunları kendinize göre ayarlayın.(Snippet yazan kısım, ilgili yazıdan kısa bir özet alarak görüntülensin/görüntülenmesin)

5-Bundan sonra anlatacaklarımız ise Blogger Popüler Yayınlar Eklentisini şekil olarak değiştirmenize yarayacak bilgilerdir.

 Aşağıda yer alan 5 farklı şekildeki blogger popüler yayınlar eklenti şekli için önce script kodu ekliyeceğiz ve ardından beğendiğimiz bir görünümün CSS kodunu alıp blogumuza uygulayacağız.

Blogger Popüler Yayınlar Eklentisini şekil olarak değiştirmek için ekliyeceğimiz scrip kodu:

Blogger>Şablon>Htmlyi Düzenle Yolunu takip edip HTML kodları içeriisnde Ctrl+F yardımı ile </head> kodunu aratıp bulun ve aşağıdaki kodu kopyalayıp bulduğunuz </head> kodundan önceki kısma yapıştırın.

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {
return t.replace(&#39;/s72-c/&#39;, &#39;/s350-c/&#39;)
});
$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
</script>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>
6-Şimdi ise aşağıdaki Popüler yazılar stilinden hangisini beğeniyorsak onun kodunu alıp, Şablon>HTML'yi Düzenle yolunu takip edip HTML kodları içerisinde Ctrl+F yardımı ile ]]></b:skin> kodunu bulup ilgili stilin altında bulunan CSS kodunu kopyalayıp bulduğumuz ]]></b:skin> kodunun üst satırına yapıştırıyoruz.


Blogger Popüler Yayınlar Eklentyisi Stil 1: (Resim Üzerinde Kutu Şeklinde Başlık)


<style type='text/css'>
.sidebar .PopularPosts ul {
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
list-style: none !important;
padding: 0 !important;
margin-bottom: 10px;
}
.sidebar .PopularPosts .item-thumbnail {
height: 190px;
margin: 0;
overflow: hidden;
width: 100%;
}
.sidebar .PopularPosts .item-title {
position: relative;
}
.sidebar .PopularPosts img {
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title a {
color: #FFFFFF;
font: 15px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
font-size: 20px;
padding: 10px;
position: absolute;
right: 0;
left: 0px;
margin: 0px auto;
text-align: center;
text-decoration: none;
top: 40px;
width: 60%;
height: 26px;
overflow: hidden;
z-index: 2;
}
.sidebar .PopularPosts .item-snippet {
background: rgba(0, 0, 0, 0.35);
border-top: 6px solid rgba(0, 0, 0, 0.1);
border-bottom: 6px solid rgba(0, 0, 0, 0.1);
color: #FFFFFF;
left: 0px;
right: 0px;
margin: 0px auto;
padding: 65px 10px 10px;
position: absolute;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
text-align: center;
top: 35px;
width: 60%;
z-index: 1;
}
.sidebar .PopularPosts .item-content {
position: relative;
}
</style>

Blogger Popüler Yayınlar Eklentisi Stil 2:(Resim Altında Başlık ve Açıklama)

<style type='text/css'>
.sidebar .PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
width: 100%;
list-style: none !important;
padding: 0 !important;
margin-bottom: 20px;
position: relative;
border: 0;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
height: 120px;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100%;
position: relative;
margin-bottom: 15px;
}
.sidebar .PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border-bottom: 29px solid #fff;
border-left: 29px solid transparent;
border-right: 29px solid transparent;
bottom: 0px;
content: &quot;&quot;;
height: 0;
width: 0px;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
position: absolute;
z-index: 3;
}
.sidebar .PopularPosts .item-thumbnail:after {
color: #000;
content: counter(popularcount, decimal);
counter-increment: popularcount;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
list-style-type: none;
position: absolute;
bottom: 0;
text-align: center;
margin: 0px auto;
left: 0px;
right: 0px;
z-index: 4;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
width: 100%;
height: 120px;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
font: 15px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
text-align: center;
margin: 0px auto;
padding-bottom: 10px;
border-bottom: 1px solid #000;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
padding: 10px 15px;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
text-align: center;
}
</style> 

Blogger Popüler Yayınlar Eklentyisi Stil 3:(Renkli Kututlar içinde Açıklama)

<style type='text/css'>
.sidebar .PopularPosts ul {
padding: 0;
margin: 0;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
overflow: hidden;
}
.sidebar .PopularPosts .item-thumbnail {
width: 130px;
height: 130px;
border-right: 5px solid #fff;
margin: 0px 10px 0px 0px !important;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts ul li {
float: left;
margin-bottom: 5px;
max-height: 130px;
min-width: 250px;
overflow: hidden;
}
.sidebar .PopularPosts ul li:first-child {
background: #D9EDF7;
}
.sidebar .PopularPosts ul li:first-child + li{
background: #F2DEDE;
}
.sidebar .PopularPosts ul li:first-child + li + li {
background: #DFF0D8;
}
.sidebar .PopularPosts ul li:first-child + li + li + li {
background: #FFEEBC;
}
.sidebar .PopularPosts ul li:first-child + li + li + li + li{
background: #E0E0E0;
}
.sidebar .PopularPosts .item-title {
font: 13px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
padding: 10px 5px 10px;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
padding-right: 5px;
}
.sidebar .PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px!important;
}
</style>

Blogger Popüler Yayınlar Eklentyisi Stil 4:(Kare Kutucuk Şeklinde)

<style type='text/css'>
.sidebar .PopularPosts ul {
padding: 0;
}
.sidebar .PopularPosts ul li:first-child{
width: 100%;
max-height: 100%;
opacity: 0.9;
}
.sidebar .PopularPosts ul li:nth-child(even){
margin-right: 2%;
}
.sidebar .PopularPosts ul li {
box-sizing: border-box;
position: relative;
padding: 0px !important;
width: 49%;
max-height: 120px;
opacity: 0.4;
overflow:hidden;
float: left;
margin-bottom: 2%;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.sidebar .PopularPosts ul li:hover {
opacity: 1;
}
.sidebar .PopularPosts .item-thumbnail {
margin: 0;
width: 100%;
}
.sidebar .PopularPosts ul li img {
box-sizing: border-box;
width: 100%;
height: 100%;
object-fit: cover;
padding:0;
}
.sidebar .PopularPosts .item-content:hover .item-title a,
.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a {
visibility: visible;
opacity: 1;
}
.sidebar .PopularPosts .item-title a {
color: #fff;
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);
text-decoration: none;
position: absolute;
text-align: center;
font: 13px &#39;Oswald&#39;, sans-serif;
left: 0;
right: 0;
bottom: 0%;
padding: 100px 10px 10px;
opacity: 0;
visibility: hidden;
}
.sidebar .PopularPosts .item-snippet {
display: none;
}
</style>

Blogger Popüler Yayınlar Eklentyisi Stil 5:(Numaralı Kutucuklar Halinde)

<style type='text/css'>
.sidebar .PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
float: left;
max-height: 130px;
min-width: 250px;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail::after {
color: rgba(255,255,255, 0.63);
content: counter(popularcount, decimal);
counter-increment: popularcount;
font: 70px &#39;Oswald&#39;, sans-serif;
list-style-type: none;
position: absolute;
left: 5px;
top: -5px;
z-index: 4;
}
.sidebar .PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0.3);
bottom: 0px;
content: &quot;&quot;;
height: 100px;
width: 100px;
left: 0px;
right: 0px;
margin: 0px auto;
position: absolute;
z-index: 3;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
overflow: hidden;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100px;
height: 100px;
margin: 0px 10px 0px 0px !important;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail:hover:before {
display: none;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
padding-right: 0px !important;
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
font: 13px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
padding: 0px 5px 10px;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
}
.sidebar .PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px !important;
}
.sidebar .PopularPosts .item-content {
padding: 5px 0px;
border-bottom: 1px dotted #dedede;
overflow: hidden;
height: 100px;
position: relative;
}
</style>

Son olarak Şablonu kaydet deyip çıkıyoruz.
Eğer verilen kodları doğru yerleştirdiyseniz seçtiğiniz Blogger Popüler Yayın Eklenti Stili sitenizde görünecektir.


Kayan yazı kodları sayesinde sitenizde-bloğunuzda duyuru panoları,mesaj panoları vb. şeyler oluşturabilirsiniz.Yapmanız gereken sola doğru kayan yazı-sağa doğru kayan yazı-aşşağı doğru kayan yazı-iki tarafa çarpıp dönen yazı-aşşağıdan yukarı akan yazı-yukardan aşşağı akan yazı-yukarı aşşağı çarpıp dönen yazı-kare içerisinde kayan yazı-yanıp sönen titrek yazı-iki satır zıplayan yazı ve maus üzerine geldiğinde duran yazı tiplerinden istediğinizi seçmek ve yazmak istediğiniz şeyleri "YAZINIZI BURAYA YAZIN" yazan yere istediğinizi yazmak.





SOLA DOĞRU KAYAN YAZI
YAZINIZI BURAYA YAZINIZ

SAĞA DOĞRU KAYAN YAZI
YAZINIZI BURAYA YAZIN

İKİ TARAFA ÇARPIP DÖNEN YAZI
YAZINIZI BURAYA YAZIN
,

AŞŞAĞIDAN YUKARI AKAN YAZI
YAZINIZI BURAYA YAZIN

YUKARIDAN AŞŞAĞI AKAN YAZI
YAZINIZI BURAYA YAZIN

AŞŞAĞI YUKARI ÇARPIP DÖNEN YAZI
YAZINIZI BURAYA YAZIN

KARE İÇERİSİNDE SOLA DOĞRU KAYAN YAZI
 YAZINIZI BURAYA YAZIN

YANIP SÖNEN TİTREK YAZI
YAZINIZI BURAYA YAZIN

İKİ SATIR ZIPLAYAN YAZI
YAZINIZI BURAYA YAZIN
YAZINIZI BURAYA YAZIN


AŞŞAĞIDAN YUKARI KAYAN YAZI
(MAUS ÜZERİNE GELDİĞİNDE YAZI DURUYOR)
YAZINIZI BURAYA YAZIN

SOLA DOĞRU KAYAN YAZI
(MAUS ÜZERİNE GELİNCE YAZI DURUYOR)
Kod içerisindeki "width" değerini değiştirerek yazının kayma mesafesini, "scrollamaunt" değerini değiştirerek de yazının geçiş hızını ayarlayabilirsiniz.

YAZINIZI BURAYA YAZIN




HTML renk kodları, web tasarımcıları için müthiş bir kaynak.Artık arka plan, metin ve tablo renklerinizi istediğiniz gibi rengi görerek, seçme ve ayarlama şansınız var.300 den fazla HTML renk kodunu karşılarında temsil ettikleri renklerle ve rengin ismiyle birlikte yayınlıyoruz.Renk seçiminde ayrıca daha önceden eklediğimiz html renk kodu buluma aracını da kullanabilirsiniz.


KODRENK
#000000Black
#150517Gray0
#250517Gray18
#2B1B17Gray21
#302217Gray23
#302226Gray24
#342826Gray25
#34282CGray26
#382D2CGray27
#3b3131Gray28
#3E3535Gray29
#413839Gray30
#41383CGray31
#463E3FGray32
#4A4344Gray34
#4C4646Gray35
#4E4848Gray36
#504A4BGray37
#544E4FGray38
#565051Gray39
#595454Gray40
#5C5858Gray41
#5F5A59Gray42
#625D5DGray43
#646060Gray44
#666362Gray45
#696565Gray46
#6D6968Gray47
#6E6A6BGray48
#726E6DGray49
#747170Gray50
#736F6EGray
#616D7ESlate Gray4
#657383Slate Gray
#646D7ELight Steel Blue4
#6D7B8DLight Slate Gray
#4C787ECadet Blue4
#4C7D7EDarkSlate Gray4
#806D7EThistle4
#5E5A80Medium Slate Blue
#4E387EMedium Purple4
#151B54Midnight Blue
#2B3856Dark SlateBlue
#25383CDark Slate Gray
#463E41Dim Gray
#151B8DCornflower Blue
#15317ERoyal Blue4
#342D7ESlate Blue4
#2B60DERoyal Blue
#306EFFRoyal Blue1
#2B65ECRoyal Blue2
#2554C7Royal Blue3
#3BB9FFDeep Sky Blue
#38ACECDeep Sky Blue2
#357EC7Slate Blue
#3090C7Deep Sky Blue3
#25587EDeep Sky Blue4
#1589FFDodger Blue
#157DECDodger Blue2
#1569C7Dodger Blue3
#153E7EDodger Blue4
#2B547ESteel Blue4
#4863A0Steel Blue
#6960ECSlate Blue2
#8D38C9Violet
#7A5DC7Medium Purple3
#8467D7Medium Purple
#9172ECMedium Purple2
#9E7BFFMedium Purple1
#728FCELight Steel Blue
#488AC7Steel Blue3
#56A5ECSteel Blue2
#5CB3FFSteel Blue1
#659EC7Sky Blue3
#41627ESky Blue4
#737CA1Slate Blue
#737CA1Slate Blue
#98AFC7Slate Gray3
#F6358AViolet Red
#F6358AViolet Red1
#E4317FViolet Red2
#F52887Deep Pink
#E4287CDeep Pink2
#C12267Deep Pink3
#7D053FDeep Pink4
#CA226BMedium Violet Red
#C12869Violet Red3
#800517Firebrick
#7D0541Violet Red4
#7D0552Maroon4
#810541Maroon
#C12283Maroon3
#E3319DMaroon2
#F535AAMaroon1
#FF00FFMagenta
#F433FFMagenta1
#E238ECMagenta2
#C031C7Magenta3
#B048B5Medium Orchid
#D462FFMedium Orchid1
#C45AECMedium Orchid2
#A74AC7Medium Orchid3
#6A287EMedium Orchid4
#8E35EFPurple
#893BFFPurple1
#7F38ECPurple2
#6C2DC7Purple3
#461B7EPurple4
#571B7eDark Orchid4
#7D1B7EDark Orchid
#842DCEDark Violet
#8B31C7Dark Orchid3
#A23BECDark Orchid2
#B041FFDark Orchid1
#7E587EPlum4
#D16587Pale Violet Red
#F778A1Pale Violet Red1
#E56E94Pale Violet Red2
#C25A7CPale Violet Red3
#7E354DPale Violet Red4
#B93B8FPlum
#F9B7FFPlum1
#E6A9ECPlum2
#C38EC7Plum3
#D2B9D3Thistle
#C6AEC7Thistle3
#EBDDE2Lavender Blush2
#C8BBBELavender Blush3
#E9CFECThistle2
#FCDFFFThistle1
#E3E4FALavender
#FDEEF4Lavender Blush
#C6DEFFLight Steel Blue1
#ADDFFFLight Blue
#BDEDFFLight Blue1
#E0FFFFLight Cyan
#C2DFFFSlate Gray1
#B4CFECSlate Gray2
#B7CEECLight Steel Blue2
#52F3FFTurquoise1
#00FFFFCyan
#57FEFFCyan1
#50EBECCyan2
#4EE2ECTurquoise2
#48CCCDMedium Turquoise
#43C6DBTurquoise
#9AFEFFDark Slate Gray1
#8EEBECDark slate Gray2
#78c7c7Dark Slate Gray3
#46C7C7Cyan3
#43BFC7Turquoise3
#77BFC7Cadet Blue3
#92C7C7Pale Turquoise3
#AFDCECLight Blue2
#3B9C9CDark Turquoise
#307D7ECyan4
#3EA99FLight Sea Green
#82CAFALight Sky Blue
#A0CFECLight Sky Blue2
#87AFC7Light Sky Blue3
#82CAFFSky Blue
#79BAECSky Blue2
#566D7ELight Sky Blue4
#6698FFSky Blue
#736AFFLight Slate Blue
#CFECECLight Cyan2
#AFC7C7Light Cyan3
#717D7DLight Cyan4
#95B9C7Light Blue3
#5E767ELight Blue4
#5E7D7EPale Turquoise4
#617C58Dark Sea Green4
#348781Medium Aquamarine
#306754Medium Sea Green
#4E8975Sea Green
#254117Dark Green
#387C44Sea Green4
#4E9258Forest Green
#347235Medium Forest Green
#347C2CSpring Green4
#667C26Dark Olive Green4
#437C17Chartreuse4
#347C17Green4
#348017Medium Spring Green
#4AA02CSpring Green
#41A317Lime Green
#4AA02CSpring Green
#8BB381Dark Sea Green
#99C68EDark Sea Green3
#4CC417Green3
#6CC417Chartreuse3
#52D017Yellow Green
#4CC552Spring Green3
#54C571Sea Green3
#57E964Spring Green2
#5EFB6ESpring Green1
#64E986Sea Green2
#6AFB92Sea Green1
#B5EAAADark Sea Green2
#C3FDB8Dark Sea Green1
#00FF00Green
#87F717Lawn Green
#5FFB17Green1
#59E817Green2
#7FE817Chartreuse2
#8AFB17Chartreuse
#B1FB17Green Yellow
#CCFB5DDark Olive Green1
#BCE954Dark Olive Green2
#A0C544Dark Olive Green3
#FFFF00Yellow
#FFFC17Yellow1
#FFF380Khaki1
#EDE275Khaki2
#EDDA74Goldenrod
#EAC117Gold2
#FDD017Gold1
#FBB917Goldenrod1
#E9AB17Goldenrod2
#D4A017Gold
#C7A317Gold3
#C68E17Goldenrod3
#AF7817Dark Goldenrod
#ADA96EKhaki
#C9BE62Khaki3
#827839Khaki4
#FBB117Dark Goldenrod1
#E8A317Dark Goldenrod2
#C58917Dark Goldenrod3
#F87431Sienna1
#E66C2CSienna2
#F88017Dark Orange
#F87217Dark Orange1
#E56717Dark Orange2
#C35617Dark Orange3
#C35817Sienna3
#8A4117Sienna
#7E3517Sienna4
#7E2217Indian Red4
#7E3117Dark Orange3
#7E3817Salmon4
#7F5217Dark Goldenrod4
#806517Gold4
#805817Goldenrod4
#7F462CLight Salmon4
#C85A17Chocolate
#C34A2CCoral3
#E55B3CCoral2
#F76541Coral
#E18B6BDark Salmon
#F88158Pale Turquoise4
#E67451Salmon2
#C36241Salmon3
#C47451Light Salmon3
#E78A61Light Salmon2
#F9966BLight Salmon
#EE9A4DSandy Brown
#F660ABHot Pink
#F665ABHot Pink1
#E45E9DHot Pink2
#C25283Hot Pink3
#7D2252Hot Pink4
#E77471Light Coral
#F75D59Indian Red1
#E55451Indian Red2
#C24641Indian Red3
#FF0000Red
#F62217Red1
#E41B17Red2
#F62817Firebrick1
#E42217Firebrick2
#C11B17Firebrick3
#FAAFBEPink
#FBBBB9Rosy Brown1
#E8ADAARosy Brown2
#E7A1B0Pink2
#FAAFBALight Pink
#F9A7B0Light Pink1
#E799A3Light Pink2
#C48793Pink3
#C5908ERosy Brown3
#B38481Rosy Brown
#C48189Light Pink3
#7F5A58Rosy Brown4
#7F4E52Light Pink4
#7F525DPink4
#817679Lavendar Blush4
#817339Light Goldenrod4
#827B60Lemon Chiffon4
#C9C299Lemon Chiffon3
#C8B560Light Goldenrod3
#ECD672Light Golden2
#ECD872Light Goldenrod
#FFE87CLight Goldenrod1
#ECE5B6Lemon Chiffon2
#FFF8C6Lemon Chiffon
#FAF8CCLight Goldenrod Yellow

Blogger üzerinden ticaret yapıp satış yapan bir çok insan vardır, işyerlerini yada konumlarını uzun uza tarif etmektense google maps yardımıyla konumunuzu yada adresinizi harita üzerinden insanlara direkt olarak tarif edebilir ve gösterebilirsiniz.Yada beraber yazıştığınız bloggerle bir buluşma adresi ayarlayıp bu adresi blogunuzdan tam nokta olarak harita üzerinden davetiye yazınızla birlikte yayınlayabilirsiniz.Biz blogunuza haritalı adres eklemeyi anlatalım kullanımı size kalmış, nasıl kullanmakisterseniz?
Ben web işinden anlamam nasıl yapacağım ben beceremem demeyin, öyle bir anlatacağız ki bunu herkes kolaylıkla yapabilecek.Yapamayan olursa da elimizden geldiğincd yardımcı olacağız.Sitesine yada bloggere google harite eklemek isteyenler bundan sonrasını dikkatle okusunlar:
1-Google Mapsi ziyaret ediyoruz. Siteyi ziyaret ettiğimizde aşşağıdada gördüğümüz resimdeki gibi direk türkiye haritasının olduğu bir pencere açılacak.
2-Açılan bu pencerede yukarıda gösterdiğimiz adres arama kutucuğuna kendi adresimizi,yani tarif edeceğimiz,sitemize harita ile ekliyeceğimiz adresi yazıyoruz.
Örnek olarak ben bir okul ismi yazacağım, okulun ismi çaldağ ilkokulu olsun ve bu okulu bulup haritadaki yerini yazının sonuna ekliyeceğim.
Adres arama kısmına: Çaldağ ilköğretim okulu yazdık ve mercek işaretine tıkladık.Aşağıdaki resimde de gördüğümüz gibi adresimizi bulduk.
Adresimizin doğruluğunu teyid ettikten sonra  haritada üzerine adresimizin bulunduğu yere birkere tıklyoruz ve aşşağıdaki gibi işaretin çıkmasını sağlıyoruz.İşareti harita üzerinde gördükten sonra yukarıdaki resimde gösteridğimiz google maps ekranının sağ alt köşesinde bulunan 3 nolu kısımdaki dişli çark simgesine tılıyoruz.
3-Dişli çark simgesine tıkladığımızda açılan menü içerisinde Haritayı paylaş ve yerleştir kısmına tıklıyoruz.
4-Haritayı Paylaş ve yerleştire tıkladığımızda bir pencere açılacak bu pencerede de Haritayı yerleştir sekmesini tıklıyoruz.
5-Haritayı yerleştir sekmesine tıkladığımızda aşşağıdaki gibi birpencere açılacak ve kutucuk içeriisne aldığımız yerdeki iframe kodunu kopyalıyacağız.Aynı zamanda ekliyeceğimiz haritanın boyutlarını ayarlamayı da buradan yapıyoruz.Sol tarafta bulunan boyut ayarlama penceresinden sitemize yerleştireceğimiz yere uygun bir boyut seçiyoruz ve kodu kopyalıyoruz.
6-Kopyaladığımız kodu blogumuzda her hangi bir yazı içerisinde HTML moddayken ekliyoruz.
Gadget olarak eklemek istiyorsak da Yerleşim>Gadget Ekle>Html Javascript yolunu takip edip gadget olarak ekliyebiliyoruz.

Aşşağıda Çaldağ İlöğretim Okulu adresini Haritalı Olarak Blogumuza Ekledik.
Yukarıda yazdığımız yazıyı okuyarak sizde blogunuza google haritalı adres ekliyebilirsiniz.
Blogunuza gelen ziyaretçileri blogunuza bağlayacak ve onların da konu açabilecekleri kendilerinden birşeyler yazabilecekleri blogger forum ekleme eklentisi ile sizleri tanıştırıp blogunuzu  daha zengin ve çeşitliliğin olduğu bir blog haline getireceğiz. Ziyaretçileriniz kendi aralarında tartışılacak konular açacak, yorumlar ve yazılar yazacak bu sayede blogunuza bağımlı bir topluluk oluşacak, kulağa hoş geliyor öyle değil mi? 🙂 Bunu nasıl yapacağım? çok zor!!! ben kodlardan anlamıyorum,benim hiç bilgim yok diyen, okuması yazması olan herkes, bloguna forum ekleme ile ilgili yazdığımız bu yazıyı okuduğunda blogger bloguna forum eklemiş olacak, ekleyemeyen arkadaşlarada eğer isterler ise yardımcı olacağım.Anlatıma başlamadan önce blogger forum eklentisi nin nasıl göründüğüne bakmak isterseniz demo görünümden bakabilirsiniz.
Blogger aracılığıyla yapmış olduğunuz blogunuza yada sitenize forum sayfası ekleme:
1-Blogger hesabımızla giriş yapıyoruz.
2- Sayfalar butonuna tıklayıp yeni bir sayfa açıyoruz.
3-Yeni açtığımız sayfanın başlık kısmına FORUM diye yazıyoruz ve HTML modunu açıyoruz.
4- Nabble.com sitesine giriş yapıp gerekli bilgileri dolduruyoruz.
5-Kayıt işlemi başarılı bir şekilde gerçekleştiği zaman aşşağıdaki gibi bir pencereyle karşılaşacaksınız.
6- Yukarıdaki resimde (5. maddede) kırmızıyla BLOG OKULU yazan yerin hemen üstünde SONRAKİ ADIMA GEÇ butonu bulunmakta, bu butona tıklıyoruz.Butona tıkladığımızda bir kod çıkıyor, bu kodu kopyalıyoruz.
7-Kopyaladığımız kodu 3. adımda açık bıraktığımız FORUM başlıklı sayfamıza HTML modundayken yapıştırıyoruz ve ardından buradaki YAYINLA butonuna tıklıyoruz.
8-Bloggerden oluşturduğumuz bloga forum sayfası eklemiş olduk böylece.Bundan sonra gelsin yorumlar.
Gördüğünüz gibi forum sayfanız artık blogunuzun içinde çıkıyor.Forum sayfanıza Ana Sayfadan Link vermeyi unutmayın Menülerin içine Forum diye yeni bir menü ekleyin ki ziyarteçileirniz Blogunuzda bir Forum sayfası olduğunu anlasınlar yada forum sayfanızı bulabilsinler.
Sorularınızı yorumlar kısmından sorabilirsiniz.Teşekkürler…
kaynak: http://www.blogokulu.org/2014/01/blogger-forum-sayfasi-ekleme.html

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.


<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmv2gyl1DMsYFgmkCoYjJjGBpIFhLZcNGbZ9l1-BI-NE107Vxz6_mCCDO1GJtoWKRIbHUtLh24Vb2nkYYZxPWHjfPp_m4l91FOXXgPIScKaohXwnxDF7PXK7EHj1yBN0YNSjhR7zlq7E8/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      = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkU0IAQ2zTAPR8DWhkzruvqRzy9UO4IQlvU874hub1cjPkDRVgokXZGAk3s9f12mfcYb60do1xpJlB0PSNk0__oWIVnGIhtJ_4G-v14KzBAbRPrg9_JsMAPXpgq9WlyBLS9tFLG_ABnMc/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.
Blogger izleyiciler eklentisini birçok blogcu biliyordur.Ama gelen mailler ve yorumlardan özellikle Melahat Nuroğlu isimli takipçimizin de isteği üzerine blogger izleyiciler eklentisini anlatmaya karar verdik.Blogger izleyiciler eklentisi ileblogunuza katılan yani resimdede gördüğünüz üzere Bu Siteye Katılın yazan butona tıklayıp siteye katılan kişiye,yani izleyiciniz olan blogcuya yazdığınız yazılar aşağıdaki resimde gördüğünüz  gibi okuma listesi adı altında kısa kısa gidecektir.Buda bir yazı yayınladığınız zaman ziyaretçi sayınızı ve sizin yazılarınızın tıklanma oranını arttıracaktır.Yani nekadar izleyiciniz varsa sizin için okadar iyi dilelim ve blogger izleyiciler eklentisini blogunuza nasıl ekliyebileceğinizi anlatalım;
Sizi izleyen bir blogcunun siz yazı yayınladığınızda blogundaki görünüm;
İzleyiciler gadgetini blogunuza eklemek için:Şekilde de gördüğünüz kumanda panelinde Yerleşim>Gadget Ekle yolunu takip ediyoruz.
Şekildeki resimdeki yolları izleyip izleyiciler linkinin olduğu kısma gelip blogger izleyiciler gadgetini eklemek için bu linke tıklıyoruz.
Son olarak açılan pencerede kaydet butonuna bastığımızda
blogger izleyiciler gadgeti blogumuza eklenmiş olacak.
Yazar:araba oyunları