Blogger için rasgele konular eklentisi ile bloğunuzun sidebar kısmında rasgele konuları gösterebilirsiniz. Eklentinin konulara ait thumbnail, yorum sayısı,tarih,etiket,yazar avatarı gibi detayları gösterme özelliği de mevcut.
Blogger için slider eklentisi : Revolution slider Blogger için son konuları gösteren slider eklentisi flexslider
Rasgele konuları göstererek eski konularınızı tekrardan ziyaretçilerinize gösterebilir trafik almalarını, yorum yazılmasını sağlayabilirsiniz.
Blogger için rasgele konular eklentisi özellikleri
- Yazar Avatarı
- Tıklanabilir yorum Sayısı
- Kategori Gösterme
- Tarih gösterebilme
- Hareketli thumbnail gösterimi
- Başlık uzunluk ayarı
gibi birçok farklı ve güzel özellikleri bulunmaktadır. Eklentinin görünümü ve demosunu altta bulabilirsiniz.
[mks_button size=”medium” title=”Eklenti Demosu” style=”squared” url=”http://sosyalmedyaseoblog.blogspot.com/” target=”_blank” bg_color=”#1e73be” txt_color=”#FFFFFF” icon=”fa-arrow-right” icon_type=”fa”]
Blogger için rasgele konular eklentisi kurulumu
Blogger hesabınızdan Şablon ardından HTML’yi düzenle tıklıyoruz ve <head> kodunun altına aşağıdaki kodları ekliyoruz.
|
1
2
|
<
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'
/
>
|
Yine aynı yerde ]]></b:skin> kodunu buluyoruz ve üzerine aşağıdaki kodu ekliyoruz.
|
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
|
/*######## Random Posts Widget By STCnetwork.org ########*/
.
mbtlist
{
list
-
style
-
type
:
none
;
overflow
:
hidden
;
margin
:
10px
0px
0px
10px
!
important
;
width
:
300px
;
padding
:
0px
!
important
;
}
.
mbtlist
li
{
margin
:
0px
auto
10px
auto
;
clear
:
both
;
color
:
#666; font-family:helvetica; font-size:12px; border-bottom:1px solid #eee; overflow:hidden; position:relative}
.
mbtlist
li
a
{
color
:
#666; text-decoration:none; }
.
mbtlist
i
{
color
:
#999; padding-right:5px; }
.
mbtlist
.
iline
{
line
-
height
:
2em
;
margin
-
top
:
3px
;
}
.
mbtlist
.
icontent
{
line
-
height
:
1.5em
;
margin
-
top
:
5px
;
clear
:
both
}
.
mbtlist
div
span
{
margin
:
0
7px
0
0
;
display
:
inline
-
block
;
font
-
weight
:
normal
;
}
.
mbtlist
.
mbttitle
{
font
-
family
:
oswald
;
font
-
size
:
13px
;
color
:
#838383; font-weight:normal; text-decoration:none;}
.
mbtlist
.
mbttitle
:
hover
,
.
mbtlist
.
itotal
a
:
hover
{
color
:
#333; text-decoration:none;}
.
mbtlist
.
iedit
a
{
text
-
decoration
:
none
;
color
:
#999; cursor:pointer}
.
mbtlist
.
iedit
:
before
,
.
mbtlist
.
iauthor
:
before
,
.
mbtlist
.
itag
:
before
,
.
mbtlist
.
icomments
:
before
,
.
mbtlist
.
idate
:
before
,
.
mbtlist
.
itotal
span
:
before
{
font
-
family
:
fontAwesome
;
position
:
relative
;
padding
-
right
:
8px
;
color
:
#999;}
.
mbtlist
.
iauthorpic
{
width
:
17px
;
height
:
17px
;
border
-
radius
:
50
%
;
float
:
none
;
display
:
inline
-
block
;
margin
:
0px
0px
0px
0px
;
padding
-
right
:
3px
;
position
:
relative
;
top
:
3px
;
}
.
mbtlist
.
itag
{
color
:
#fff;position: absolute;left: 9px;top: 9px;display: inline-block;font-size: 11px;width: 100px; height:22px; overflow: hidden;}
.
mbtlist
.
itag
a
{
background
:
#000;background:rgba(0,0,0,0.7);text-decoration:none;color:#fff;padding:4px 5px;text-transform:capitalize;line-height: 2em;font-family: arial;font-size: 11px;border:1px solid #333;}
.
mbtlist
.
itag
a
:
hover
{
background
:
#84DB06;border: 1px solid #84DB06; color:#fff; text-decoration:none;}
.
mbtlist
.
iFeatured
{
overflow
:
hidden
;
position
:
relative
;
float
:
left
;
margin
:
0
10px
10px
0
;
padding
:
0
;
}
.
mbtlist
.
iFeatured
a
{
background
:
url
(
http
:
//3.bp.blogspot.com/-U2SNjBF_hE8/VLFfl4mJmtI/AAAAAAAAOYs/nDK3GKUJFr4/s100/mbt-bg1.png) 0 0;padding:6px 5px 4px 6px;display: block;}
.
mbtlist
.
iFeatured
img
{
width
:
100px
;
height
:
60px
;
-
moz
-
transition
:
all
.
3s
;
-
webkit
-
transition
:
all
.
3s
;
transition
:
all
.
3s
;
border
:
1px
solid
#ddd; border-radius: 2px;}
.
mbtlist
.
iFeatured
:
hover
img
{
opacity
:
1
;
-
moz
-
transform
:
scale
(
1.4
)
;
-
webkit
-
transform
:
scale
(
1.4
)
;
transform
:
scale
(
1.4
)
}
.
mbtlist
.
icomments
a
{
color
:
#0080ff; font-family: arial;font-size:12px;}
.
mbtlist
.
icomments
a
:
hover
{
text
-
decoration
:
underline
}
.
mbtlist
.
icomments
:
before
{
content
:
'\f086'
;
padding
:
0px
3px
0px
7px
;
color
:
#84DB06;}
.
mbtlist
.
idate
:
before
{
content
:
'\f073'
;
padding
-
right
:
4px
}
.
mbtlist
.
iedit
:
before
{
content
:
'\f040'
;
}
.
mbtlist
.
imore
{
font
-
size
:
16px
;
font
-
weight
:
bold
;
text
-
decoration
:
none
;
color
:
#666;}
.
mbtlist
.
itotal
{
color
:
#999; padding:5px 0px; }
.
mbtlist
.
itotal
a
{
font
-
family
:
"Droid Sans"
;
font
-
size
:
12px
;
font
-
weight
:
normal
;
color
:
#999; text-decoration:none}
.
mbtlist
.
itotal
span
:
before
{
content
:
'\f07c'
;
}
.
mbtlist
.
itotal
span
font
{
padding
:
0px
3px
;
color
:
#333; font-family:droid sans; font-size:15px; font-weight:bold}
|
Sıra geldi widget olarak sayfamızda gösterme kısmına. Yerleşim menüsüne tıklayarak Gadget Ekle seçiyoruz. Açılan küçük pencereden HTML/Javascript seçiyoruz ve içerisine aşağıdaki kodları ekliyoruz.
NOT: kodlar içerisinde yer alan siteisminiz.com kısmına kendi blog adresinizi yazın ve 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
<script
type
=
'text/javaScript'
>
//#################### Defaults
var
ListBlogLink
=
"http://siteisminiz.com"
;
var
ListCount
=
3
;
var
ChrCount
=
85
;
var
TitleCount
=
70
;
var
ImageSize
=
150
;
var
showcomments
=
"on"
;
var
showdate
=
"off"
;
var
showauthor
=
"on"
;
var
showthumbnail
=
"on"
;
var
showlabel
=
"on"
;
var
showcontent
=
"off"
;
var
RandomArray
=
[
]
;
var
TotalPosts
=
0
;
var
RandomArray
=
new
Array
(
ListCount
)
;
function
TotalCount
(
json
)
{
TotalPosts
=
json
.
feed
.
openSearch
$
totalResults
.
$
t
}
document
.
write
(
'<script type=\"text/javascript\" src=\"http://www.siteisminiz.com/feeds/posts/default?alt=json-in-script&callback=TotalCount\"><\/script>'
)
;
function
GenerateNum
(
)
{
for
(
var
i
=
0
;
i
<
ListCount
;
i
++
)
{
for
(
var
j
=
0
;
j
<
RandomArray
.
length
;
j
++
)
{
var
RandomNum
=
Math
.
floor
(
Math
.
random
(
)
*
(
TotalPosts
)
+
1
)
;
RandomArray
[
i
]
=
RandomNum
;
}
}
}
</script>
<script
type
=
'text/javaScript'
>
document
.
write
(
'<ul class="mbtlist">'
)
;
//################ Function Start
function
mbtrandom
(
json
)
{
for
(
var
i
=
0
;
i
<
ListCount
;
i
++
)
{
//################### Variables Declared
var
listing
=
ListImage
=
ListUrl
=
ListTitle
=
ListImage
=
ListContent
=
ListConten
=
ListAuthor
=
ListTag
=
ListDate
=
ListUpdate
=
ListComments
=
thumbUrl
=
TotalPosts
=
sk
=
AuthorPic
=
ListMonth
=
Y
=
D
=
M
=
m
=
YY
=
DD
=
MM
=
mm
=
TT
=
""
;
//################### Category
if
(
json
.
feed
.
entry
[
i
]
.
category
!=
null
)
{
for
(
var
k
=
0
;
k
<
json
.
feed
.
entry
[
i
]
.
category
.
length
;
k
++
)
{
ListTag
+=
"<a href='"
+
ListBlogLink
+
"/search/label/"
+
json
.
feed
.
entry
[
i
]
.
category
[
k
]
.
term
+
"'>"
+
json
.
feed
.
entry
[
i
]
.
category
[
k
]
.
term
+
"</a>"
;
if
(
k
<
json
.
feed
.
entry
[
i
]
.
category
.
length
-
1
)
{
ListTag
+=
" "
;
}
}
}
//################### URL
for
(
var
j
=
0
;
j
<
json
.
feed
.
entry
[
i
]
.
link
.
length
;
j
++
)
{
if
(
json
.
feed
.
entry
[
i
]
.
link
[
j
]
.
rel
==
'alternate'
)
{
break
;
}
}
ListUrl
=
"'"
+
json
.
feed
.
entry
[
i
]
.
link
[
j
]
.
href
+
"'"
;
//################### Info
TotalPosts
=
json
.
feed
.
openSearch
$
totalResults
.
$
t
;
if
(
json
.
feed
.
entry
[
i
]
.
title
!=
null
)
{
ListTitle
=
json
.
feed
.
entry
[
i
]
.
title
.
$
t
.
substr
(
0
,
TitleCount
)
;
}
if
(
json
.
feed
.
entry
[
i
]
.
thr
$
total
)
{
ListComments
=
"<a href='"
+
json
.
feed
.
entry
[
i
]
.
link
[
j
]
.
href
+
"#comment-form'>"
+
json
.
feed
.
entry
[
i
]
.
thr
$
total
.
$
t
+
"</a>"
;
}
ListAuthor
=
json
.
feed
.
entry
[
i
]
.
author
[
0
]
.
name
.
$
t
.
split
(
" "
)
;
ListAuthor
=
ListAuthor
.
slice
(
0
,
1
)
.
join
(
" "
)
;
AuthorPic
=
json
.
feed
.
entry
[
i
]
.
author
[
0
]
.
gd
$
image
.
src
;
//################### 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
)
]
;
ListUpdate
=
json
.
feed
.
entry
[
i
]
.
updated
.
$
t
.
substring
(
0
,
16
)
;
YY
=
ListUpdate
.
substring
(
0
,
4
)
;
mm
=
ListUpdate
.
substring
(
5
,
7
)
;
DD
=
ListUpdate
.
substring
(
8
,
10
)
;
TT
=
ListUpdate
.
substring
(
11
,
16
)
;
MM
=
ListMonth
[
parseInt
(
mm
-
1
)
]
;
//################### Thumbnail Check
// YouTube scan
if
(
json
.
feed
.
entry
[
i
]
.
content
.
$
t
.
match
(
/
youtube
\
.
com
.
*
(
\
?
v
=
|
\
/
embed
\
/
)
(
.
{
11
}
)
/) != null)
{
var youtube_id = json.feed.entry[i].content.$t.match(/y
outube
\
.
com
.
*
(
\
?
v
=
|
\
/
embed
\
/
)
(
.
{
11
}
)
/
)
.
pop
(
)
;
if
(
youtube_id
.
length
==
11
)
{
var
ListImage
=
"'//img.youtube.com/vi/"
+
youtube_id
+
"/0.jpg'"
;
}
}
else
if
(
json
.
feed
.
entry
[
i
]
.
media
$
thumbnail
)
{
thumbUrl
=
json
.
feed
.
entry
[
i
]
.
media
$
thumbnail
.
url
;
sk
=
thumbUrl
.
replace
(
"/s72-c/"
,
"/s"
+
ImageSize
+
"/"
)
;
ListImage
=
"'"
+
sk
.
replace
(
"?imgmax=800"
,
""
)
+
"'"
;
}
else
if
(
json
.
feed
.
entry
[
i
]
.
content
.
$
t
.
match
(
/
src
=
(
.
+
?
[
\
.
jpg
|
\
.
gif
|
\
.
png
]
")/) != null)
{
// Support For 3rd Party Images
ListImage = json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]"
)
/
)
[
1
]
;
}
else
{
ListImage
=
"'http://4.bp.blogspot.com/-HALLtgFeep0/VfryhQ0C5oI/AAAAAAAAPcY/77mSGND4q84/s200/Icon.png'"
;
}
//################### Printing List
document
.
write
(
"<li style='margin:0px auto 10px auto!important; padding:0px!important;' class='node"
+
[
i
]
+
"' >"
)
;
if
(
showthumbnail
==
'on'
)
{
document
.
write
(
"<div class='iFeatured'><a href="
+
ListUrl
+
"><img src="
+
ListImage
+
"/></a></div>"
)
;
}
if
(
showlabel
==
'on'
)
{
document
.
write
(
"<span class='itag'>"
+
ListTag
+
"</span>"
)
;
}
document
.
write
(
"<a class='mbttitle' href="
+
ListUrl
+
">"
+
ListTitle
+
"</a><div class='iline'>"
)
;
if
(
showauthor
==
'on'
)
{
document
.
write
(
"<span class='iauthor'><img class='iauthorpic' src='"
+
AuthorPic
+
"'/>"
+
ListAuthor
+
"</span>"
)
;
}
if
(
showcomments
==
'on'
)
{
document
.
write
(
"<span class='icomments'>"
+
ListComments
+
"</span> "
)
;
}
if
(
showdate
==
'on'
)
{
document
.
write
(
"<span class='idate'>"
+
M
+
" "
+
D
+
"</span>"
)
;
}
document
.
write
(
"</div>"
)
;
if
(
showcontent
==
'on'
)
{
document
.
write
(
"<div class='icontent'>"
+
ListContent
+
"...</div> "
)
;
}
document
.
write
(
"</li>"
)
;
}
document
.
write
(
"<div class='itotal'><span> <a href='"
+
ListBlogLink
+
"'>Tümünü Göster <font>"
+
TotalPosts
+
"</font> posts in ─ "
+
ListLabel
+
" </a></span></div>"
)
;
}
<
!
--
#
#
#
#
#
#
#
#
#
Invoking
the
Callback
Function
#
#
#
#
#
#
#
#
--
>
for
(
var
i
=
0
;
i
<
ListCount
;
i
++
)
{
GenerateNum
(
)
;
document
.
write
(
'<script type=\"text/javascript\" src=\"http://www.siteisminiz.com/feeds/posts/default?alt=json-in-script&start-index='
+
RandomArray
[
i
]
+
'&max-results=1&callback=mbtrandom\"><\/script>'
)
}
;
document
.
write
(
'</ul>'
)
;
</script>
|
Kodlar içerisinde eklenti görünümünü kişiselleştirebileceğiniz ayarlar mevcut. Bu ayarların anlamlarını aşağıda belirtiyorum. İstediğiniz ayarın karşısındaki on/off kısmından açıp kapatabilirsiniz.
|
1
2
3
4
5
6
7
8
9
10
|
var
ListCount
=
3
;
//Gösterilecek içerik sayısı
var
ChrCount
=
85
;
//Gösterilecek içerik özeti karakter sayısı
var
TitleCount
=
70
;
//başlık uzunluğu
var
ImageSize
=
150
;
//thumbnail boyutu
var
showcomments
=
"on"
;
//yorumları göster açık/kapalı
var
showdate
=
"off"
;
//tarihi göster açık/kapalı
var
showauthor
=
"on"
;
//Yazarı göster açık/kapalı
var
showthumbnail
=
"on"
;
//Thumbnail göster açık/kapalı
var
showlabel
=
"on"
;
//Kategori göster açık/kapalı
var
showcontent
=
"off"
;
//İçerik özeti göster açık/kapalı
|
Blogger için rasgele konular eklentisi kurulumu gördüğünüz gibi oldukça basit olmasına rağmen eklentinin kendisi bir o kadar güzel.
Kolay gelsin:)
Uzun zamandır böyle bir kelenti arıyordum. Sitemin sağ tarafı çok boştu gerçekten çok iyi oldu.