Blogger için son yorumlar eklentisi muhtemelen daha önce bloğunuza kurmadığınız oldukça güzel ve özellikli bir eklentidir.
WordPress için oldukça geniş kapsamlı olan eklentiler ile birbirinden farklı özellik ve görünüme sahip yeni konular, son yorumlar vb detayları listelemek mümkün.
Blogger için de oldukça güzel görünümlü ve kullanışlı eklentiler elbette mevcut. Bu makalemde size Blogger için oldukça güzel ve Json destekli bir eklenti tanıtıp kurulumunu anlatacağım.
Blogger için son yorumlar eklentisi
Blogger için son yorumlar eklentisi özellikleri
- JavaScript ve JSON Feed API Destekli
- Yazar profil resmi ve avatar gösterebilme
- Yazar Avatarından Google+ profiline link verebilme
- Hareketli resim efekti
- Makale başlığı gösterebilme
- Yorum tarihini gösterebilme
- Yorumların kısa özetini gösterebilme
- Devamını Oku linki ekleyebilme
- Bloğunuzu kasmayan bir kod yapısı
- Responsive
- Detayları gösterirken Tooltip özelliği kullanma
Tooltip desteğinin olduğunu söylemiştik. Mouse ile detaylar üzerinde gelindiğinde aşağıdaki gibi bir tooltip açılmaktadır.
Blogger için son yorumlar eklentisi kurulumu
NOT: Eğer bloğunuza daha önce jquery entegre etmişseniz bu adımı atlayabilirsiniz.
Adım 1 : Blogger hesabınızdan Önce Şablon daha sonra da HTML’yi Düzenle tıklıyoruz. Gelen kod ekranından </head> kodunun hemen üzerine aşağıdaki kodu ekliyoruz.
|
1
2
3
|
<script
async
=
''
src
=
'https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'
type
=
'text/javascript'
>
</script>
<
link
href
=
'http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css'
rel
=
'stylesheet'
/
>
<
link
href
=
'http://fonts.googleapis.com/css?family=Oswald'
rel
=
'stylesheet'
type
=
'text/css'
/
>
|
Adım 2 : Yine aynı kod bloğu içerisinde ]]></b:skin> kodunu bulup üzerine aşağıdaki kodları ekliyoruz ve kaydediyoruz.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
/*############son yorumlar eklentisi##################*/
.
mbtcmts
{
list
-
style
-
type
:
none
;
overflow
:
hidden
;
}
.
mbtcmts
li
{
margin
:
0px
auto
20px
auto
;
clear
:
both
;
color
:
#666; font-family:helvetica; font-size:12px;padding:0px;}
.
mbtcmts
i
{
color
:
#999; padding-right:4px;}
.
mbtcmts
.
idate
{
display
:
block
;
font
-
family
:
arial
;
font
-
size
:
11px
;
text
-
align
:
left
;
padding
:
3px
;
margin
:
0
0
0px
40px
}
.
mbtcmts
.
icontent
{
display
:
block
;
font
-
family
:
Georgia
;
color
:
#999; font-style:italic; line-height:1.5em;}
.
mbtcmts
.
icontent
a
{
color
:
#999; text-decoration:none; font-weight: bold;font-size: 16px;font-style: normal;}
.
mbtcmts
div
{
line
-
height
:
2em
;
clear
:
both
;
border
-
top
:
1px
solid
#eee; margin-top:5px;}
.
mbtcmts
span
{
margin
:
5px
0px
0px
;
padding
-
right
:
5px
;
}
.
mbtcmts
img
{
border
-
radius
:
100
%
;
float
:
left
;
margin
:
0px
20px
20px
0px
;
border
:
1px
solid
#eee; padding:3px; width:50px; height:50px;box-shadow: 2px 2px 4px #ddd; }
.
mbtcmts
.
icapital
{
text
-
transform
:
Capitalize
;
display
:
inline
-
block
;
}
.
mbtcmts
.
ititle
{
font
-
family
:
oswald
;
font
-
size
:
14px
;
color
:
orange
;
font
-
weight
:
normal
;
text
-
decoration
:
none
;
}
.
mbtcmts
.
ititle
:
hover
{
color
:
#666;}
.
mbtcmts
.
idate
:
before
,
.
mbtcmts
.
ipostTitle
a
:
before
{
font
-
family
:
fontAwesome
;
position
:
relative
;
padding
-
right
:
5px
;
}
.
mbtcmts
.
idate
:
before
{
content
:
'\f017'
;
color
:
#999}
.
mbtcmts
.
ipostTitle
a
{
text
-
decoration
:
none
;
color
:
#999}
.
mbtcmts
.
ipostTitle
a
:
before
{
content
:
'\f07c'
;
}
#mbtloading{
margin
:
20
%
auto
;
background
:
url
(
'http://downloads.mybloggertricks.com/Spin%20and%20pulsate.gif'
)
no
-
repeat
left
center
;
width
:
80px
;
height
:
80px
;
}
/*------ CSS3 Tooltip Shortcode -------------*/
.
tooltip
{
outline
:
none
;
text
-
decoration
:
none
!
important
;
position
:
relative
}
.
tooltip
:
hover
{
border
-
bottom
:
none
;
}
.
tooltip
strong
{
line
-
height
:
30px
}
.
tooltip
>
span
{
text
-
transform
:
capitalize
;
width
:
150px
;
padding
:
5px
5px
;
opacity
:
0
;
top
:
120
%
;
left
:
0px
;
visibility
:
hidden
;
z
-
index
:
10
;
position
:
absolute
;
font
-
family
:
helvetica
;
font
-
size
:
12px
;
font
-
weight
:
bold
;
border
-
radius
:
2px
;
box
-
shadow
:
2px
2px
5px
#999;-webkit-transition-property:opacity,margin-top,visibility,margin-left;-webkit-transition-duration:0.4s,0.3s,0.4s,.3s;-webkit-transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out;transition-property:opacity,margin-top,visibility,margin-left;transition-duration:0.4s,0.3s,0.4s,.3s;transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out}.tooltip > span img{float:right;width:110px;margin:0 0 30px 10px;padding: 0;border: none;}.tooltip:hover > span{opacity:1;text-decoration:none;visibility:visible;overflow:visible;display:inline;margin-left:-50px}.tooltip span b{width:15px;height:15px;left:30%;top:-9px;display:block;position:absolute;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);display:none\0/;*display:none}.tooltip > span{padding-top:10px;color:#fff;background:orange;border:1px solid #ffffff}.tooltip span b{background:orange;border-top:1px solid #ffffff;border-right:1px solid #ffffff}.mbtcmts .itotal {color:#333; padding:3px 3px 3px 10px; border:1px solid #eee; font-family:arial; font-size:12px;}
.
mbtcmts
.
itotal
i
{
font
-
style
:
normal
;
}
.
mbtcmts
.
itotal
span
{
font
-
family
:
oswald
;
font
-
weight
:
normal
;
color
:
#333; text-decoration:none}
.
mbtcmts
.
itotal
span
:
before
{
font
-
family
:
FontAwesome
;
position
:
relative
;
content
:
'\f075'
;
}
|
Kodlar içerisinde yer alan orange kısmını dilediğiniz renk seçeneği ile değiştirebilirsiniz.
Adım 3 : Blogger panelinizden Şablon menüsüne tıklıyoruz. Sayfanızda hangi kısma son Yorumlar eklentisini eklemek istiyorsanız o kısımdaki Gadget Ekle kısmına tıklayın ve açılan seçeneklerden HTML / Javascript seçin. Açılan pencere içerisine aşağıdaki kodları ekleyip kaydedin.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
<
div
id
=
"mbtloading"
>
<
/
div
>
<script
type
=
"text/javascript"
>
function
mbtcmts
(
json
)
{
document
.
write
(
'<ul class="mbtcmts">'
)
;
for
(
var
i
=
0
;
i
<
ListCount
;
i
++
)
{
//################### Variables Declared
var
listing
=
ListImage
=
ListUrl
=
ListDate
=
TotalPosts
=
ListTitle
=
ListImage
=
ListContent
=
ListConten
=
ListAuthor
=
ListTag
=
ListProfile
=
ListComments
=
thumbUrl
=
sk
=
ListMonth
=
Y
=
D
=
M
=
m
=
""
;
//################### URL
for
(
var
j
=
0
;
j
<
json
.
feed
.
entry
[
i
]
.
link
.
length
;
j
++
)
{
if
(
json
.
feed
.
entry
[
i
]
.
link
[
j
]
.
rel
==
'alternate'
)
{
break
;
}
}
if
(
json
.
feed
.
entry
[
i
]
.
link
[
2
]
!=
null
)
{
ListUrl
=
"'"
+
json
.
feed
.
entry
[
i
]
.
link
[
j
]
.
href
+
"'"
;
}
else
{
ListUrl
=
"'#'"
}
//####################### Splitting URL into Title
if
(
json
.
feed
.
entry
[
i
]
.
link
[
2
]
!=
null
)
{
var
mbt_slit
=
json
.
feed
.
entry
[
i
]
.
link
[
j
]
.
href
;
var
M_slit
=
mbt_slit
.
split
(
"#"
)
;
M_slit
=
M
_
slit
[
0
]
;
var
K_slit
=
M_slit
.
split
(
"?"
)
;
K_slit
=
K_slit
[
0
]
;
var
B_slit
=
K_slit
.
split
(
"/"
)
;
B_slit
=
B_slit
[
5
]
;
B_slit
=
B_slit
.
split
(
".html"
)
;
B_slit
=
B
_
slit
[
0
]
;
var
T_slit
=
B_slit
.
replace
(
/-/g
,
" "
)
.
charAt
(
0
)
.
toUpperCase
(
)
+
B_slit
.
replace
(
/-/g
,
" "
)
.
slice
(
1
)
.
substring
(
0
,
50
)
;
var
Link_slit
=
T_slit
.
link
(
K_slit
)
;
}
//################### Info
TotalPosts
=
json
.
feed
.
openSearch
$
totalResults
.
$
t
;
ListAuthor
=
json
.
feed
.
entry
[
i
]
.
author
[
0
]
.
name
.
$
t
;
var
ListAuth
=
ListAuthor
.
split
(
" "
)
;
var
ListAuth
=
ListAuth
.
slice
(
0
,
1
)
.
join
(
" "
)
;
ListProfile
=
"'"
+
json
.
feed
.
entry
[
i
]
.
author
[
0
]
.
uri
.
$
t
+
"'"
;
//################### Content Check
ListConten
=
json
.
feed
.
entry
[
i
]
.
content
.
$
t
;
ListContent
=
ListConten
.
replace
(
/(<([^>]+)>)/i
g
,
""
)
.
substring
(
0
,
ChrCount
)
;
//################### Date Format
ListMonth
=
[
"Jan"
,
"Feb"
,
"Mar"
,
"Apr"
,
"May"
,
"Jun"
,
"Jul"
,
"Aug"
,
"Sep"
,
"Oct"
,
"Nov"
,
"Dec"
]
;
ListDate
=
json
.
feed
.
entry
[
i
]
.
published
.
$
t
.
substring
(
0
,
10
)
;
Y
=
ListDate
.
substring
(
0
,
4
)
;
m
=
ListDate
.
substring
(
5
,
7
)
;
D
=
ListDate
.
substring
(
8
,
10
)
;
M
=
ListMonth
[
parseInt
(
m
-
1
)
]
;
//################### Thumbnail Check
if
(
json
.
feed
.
entry
[
i
]
.
author
)
{
thumbUrl
=
json
.
feed
.
entry
[
i
]
.
author
[
0
]
.
gd
$
image
.
src
;
sk
=
thumbUrl
.
replace
(
"/s72-c/"
,
"/s60-c/"
)
;
ListImage
=
"'"
+
sk
+
"'"
;
}
else
{
ListImage
=
"'http://4.bp.blogspot.com/-HALLtgFeep0/VfryhQ0C5oI/AAAAAAAAPcY/77mSGND4q84/s200/Icon.png'"
;
}
//################### Printing List
var
listing
=
"<li class='node"
+
[
i
]
+
"' ><a rel='nofollow' href="
+
ListProfile
+
"><img src="
+
ListImage
+
"/></a><a class='ititle tooltip' href="
+
ListUrl
+
"target='_blank'><span><b></b>"
+
ListAuth
+
" Commented on » "
+
M
+
" "
+
D
+
", "
+
Y
+
"</span>"
+
ListAuthor
+
"</a> <i> posted in</i> <span class='ipostTitle'><a class='tooltip' href='"
+
K_slit
+
"'><span><b></b>"
+
T_slit
+
"</span></a></span><span class='icontent'>"
+
ListContent
+
" ... <a href="
+
ListUrl
+
"> » </a></span><div></div></li>"
;
document
.
write
(
listing
)
;
}
document
.
write
(
'<div class="itotal"> <span> '
+
TotalPosts
+
' </span><i>delicious comments posted so far!</i></div></ul>'
)
;
}
</script>
<script>
var
ListCount
=
5
;
var
ChrCount
=
90
;
</script>
<script
src
=
"http://www.siteisminiz.com/feeds/comments/default?alt=json-in-script&callback=mbtcmts"
>
</script>
<script>
document
.
getElementById
(
"mbtloading"
)
.
style
.
display
=
"none"
;
</script>
|
Kodların son kısmında yer alan www.siteisminiz.com kısmını kendi site adresiniz ile değiştirmeyi unutmayın.
Yine kodlar içerisinde bulunan ListCount = 5 değeri gösterilecek yorum sayısını, ChrCount = 90 değeri ise yorumlara ait gösterilen özetin karakter sayısını belirtmektedir.
Sizin bu gönderileriniz sayesinde siteme yeni yeni eklentiler kattım sağolun.
Birde bir kaç kısmı değiştirirsek sorun olur mu örneğin Türkçeleştirirsek vb?
Herhangi bir sorun olmaz.
çok güzel paylaşım kullandım teşekkürler
güzel