4 Nisan 2013 Perşembe

Blogger Slider Manşet (Ekle - Çalışsın)

20:21    Hiç Yorum Yapılmamış
slider manşet

merhaba arkadaşlar blogger için slider manşet alanı arıyodum ve bir sitede gördüğüm slider çok hoşuma gitti
ve o temayı indirip slider alanını kodlarını aldım ve tabiki biraz düzenlenmesi gerekiyo bu kodları paylaşıcam siz kendi istediğiniz gibi uygularsınız artık :) çok güzel bir slider alanı onu belirtmek isterim kodları verelim
önce likle  ]]></b:skin> arattırıp buluyoruz ve üstüne aşağıda kodları ekliyoruz



Demo 2
?
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
.camera_wrap a,.camera_wrap img,.camera_wrap ol,.camera_wrap ul,.camera_wrap li,.camera_wrap table,.camera_wrap tbody,.camera_wrap tfoot,.camera_wrap thead,.camera_wrap tr,.camera_wrap th,.camera_wrap td
.camera_thumbs_wrap a,.camera_thumbs_wrap img,.camera_thumbs_wrap ol,.camera_thumbs_wrap ul,.camera_thumbs_wrap li,.camera_thumbs_wrap table,.camera_thumbs_wrap tbody,.camera_thumbs_wrap tfoot,.camera_thumbs_wrap thead,.camera_thumbs_wrap tr,.camera_thumbs_wrap th,.
_thumbs_wrap td{background:none;border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline;list-style:none}
.camera_wrap{display:none;float:left;position:relative;z-index:0;width:96%;padding:4px;background:#f3f3f3;border:1px solid #fff;-webkit-box-shadow:1px 1px 5px #c3c3c3;-moz-box-shadow:1px 1px 5px #c3c3c3;-ms-box-shadow:1px 1px 5px #c3c3c3;-o-box-shadow:1px 1px 5px #c3c3c3;box-shadow:1px 1px 5px #c3c3c3;margin:10px 0 0 2px}
.camera_wrap img{max-width:none!important}
.camera_fakehover{height:100%;min-height:100px;position:relative;width:100%;z-index:1}
.camera_src{display:none}
.cameraCont,.cameraContents{height:100%;position:relative;width:100%;z-index:1}
.cameraContents{background: url(http://2.bp.blogspot.com/-sfvatxjJMJI/UUW_U9S0qYI/AAAAAAAAAfU/h5uFSInpZus/s1600/bg-cameracontents.png) repeat fixed;position: relative;height: 100%;-webkit-box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.2), inset 0px -1px 5px rgba(0, 0, 0, 0.2);box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.2), inset 0px -1px 5px rgba(0, 0, 0, 0.2);}
.cameraSlide{bottom:0;left:0;position:absolute;right:0;top:0;width:100%}
.cameraContent{bottom:0;display:none;left:0;position:absolute;right:0;top:0;width:100%}
.camera_target{bottom:0;height:100%;left:0;overflow:hidden;position:absolute;right:0;text-align:left;top:0;width:100%;z-index:0}
.camera_overlayer{bottom:0;height:100%;left:0;overflow:hidden;position:absolute;right:0;top:0;width:100%;z-index:0}
.camera_target_content{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:2}
.camera_target_content .camera_link{background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWFtROe2zxjT3BrU4m2q0suo9k7f3kzj_mWM7_7IPKyU0Nj9GnwFtuy2bU7ExuOvLUOxx37qrhGuznFmu2rtiS69LR_LIKg6dDMP1f8hm_jf1s9flVsjPImW5dOdD5tV7rJsN6qMpqUyg/s1600/blank.gif);display:block;height:100%;text-decoration:none}
.camera_loader{background:url(http://1.bp.blogspot.com/-U50t_WWuuYY/UR2JCuL7yFI/AAAAAAAAALE/w8dJNZaYB2E/s1600/loading.gif) no-repeat center;background:rgba(255,255,255,0.9) url(http://1.bp.blogspot.com/-U50t_WWuuYY/UR2JCuL7yFI/AAAAAAAAALE/w8dJNZaYB2E/s1600/loading.gif) no-repeat center;border:1px solid #fff;-webkit-border-radius:18px;-moz-border-radius:18px;border-radius:18px;height:36px;left:50%;overflow:hidden;position:absolute;margin:-18px 0 0 -18px;top:50%;width:36px;z-index:3}
.camera_bar{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:3}
.camera_thumbs_wrap.camera_left .camera_bar,.camera_thumbs_wrap.camera_right .camera_bar{height:100%;position:absolute;width:auto}
.camera_thumbs_wrap.camera_bottom .camera_bar,.camera_thumbs_wrap.camera_top .camera_bar{height:auto;position:absolute;width:100%}
.camera_nav_cont{height:65px;overflow:hidden;position:absolute;right:9px;top:15px;width:120px;z-index:4}
.camera_caption{bottom: 0;display: block;position: absolute;width: 100%;}
.camera_caption > div{max-width:450px;font-size:16px;line-height:23px;margin-bottom:50px;background: #333;background: rgba(51, 51, 51, 0.65);-webkit-box-shadow: 0 8px 6px -6px black;-moz-box-shadow: 0 8px 6px -6px black;box-shadow: 0 8px 6px -6px black;}
.camera_caption a{color:#fff;font:bold 18px Arial;margin:0 0px 10px 0;padding:5px 10px;display:block;background:#eb4938;text-shadow:0 1px 0 rgba(0,0,0,0.5)}
.camera_caption a:hover{color:#ccc}
.camera_caption .comt{font:11px Tahoma;margin:5px 0 0;color:#ccc;padding:0 10px}
.camera_caption p{font:12px Arial;margin:5px 0 0;padding:0 10px 10px}
.camerarelative{overflow:hidden;position:relative}
.imgFake{cursor:pointer}
.camera_prevThumbs{bottom:4px;cursor:pointer;left:0;position:absolute;top:4px;visibility:hidden;width:30px;z-index:10}
.camera_prevThumbs div{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -160px 0;display:block;height:40px;margin-top:-20px;position:absolute;top:50%;width:30px}
.camera_nextThumbs{bottom:4px;cursor:pointer;position:absolute;right:0;top:4px;visibility:hidden;width:30px;z-index:10}
.camera_nextThumbs div{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -190px 0;display:block;height:40px;margin-top:-20px;position:absolute;top:50%;width:30px}
.camera_command_wrap .hideNav{display:none}
.camera_command_wrap{left:0;position:relative;right:0;z-index:4}
.camera_wrap .camera_pag .camera_pag_ul{list-style:none;margin:0;padding:0;text-align:center;}
.camera_wrap .camera_pag .camera_pag_ul li{-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;cursor:pointer;display:inline-block;height:16px;margin:20px 5px;position:relative;text-align:left;text-indent:-9999px;width:16px}
.camera_commands_emboss .camera_pag .camera_pag_ul li{-moz-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);-webkit-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2)}
.camera_wrap .camera_pag .camera_pag_ul li > span{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;height:8px;left:4px;overflow:hidden;position:absolute;top:4px;width:8px}
.camera_commands_emboss .camera_pag .camera_pag_ul li:hover > span{-moz-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);-webkit-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2)}
.camera_wrap .camera_pag .camera_pag_ul li.cameracurrent > span{-moz-box-shadow:0;-webkit-box-shadow:0;box-shadow:0}
.camera_pag_ul li img{display:none;position:absolute}
.camera_pag_ul .thumb_arrow{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid;top:0;left:50%;margin-left:-4px;position:absolute}
.camera_prev,.camera_next,.camera_commands{cursor:pointer;height:40px;margin-top:-20px;position:absolute;top:50%;width:40px;z-index:2}
.camera_prev{left:0}
.camera_prev > span{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat 0 0;display:block;height:40px;width:40px}
.camera_next{right:0}
.camera_next > span{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -40px 0;display:block;height:40px;width:40px}
.camera_commands{right:41px}
.camera_commands > .camera_play{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -80px 0;height:40px;width:40px}
.camera_commands > .camera_stop{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -120px 0;display:block;height:40px;width:40px}
.camera_wrap .camera_pag .camera_pag_ul li{-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;cursor:pointer;display:inline-block;height:16px;margin:13px 5px 0;position:relative;text-indent:-9999px;width:16px;}
.camera_thumbs_cont{-webkit-border-bottom-right-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomright:4px;-moz-border-radius-bottomleft:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;overflow:hidden;position:relative;width:100%}
.camera_commands_emboss .camera_thumbs_cont{-moz-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);-webkit-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2)}
.camera_thumbs_cont > div{float:left;width:100%}
.camera_thumbs_cont ul{overflow:hidden;padding:3px 4px 8px;position:relative;text-align:center}
.camera_thumbs_cont ul li{display:inline;padding:0 4px}
.camera_thumbs_cont ul li > img{border:1px solid;cursor:pointer;margin-top:5px;vertical-align:bottom}
.camera_clear{display:block;clear:both}
.showIt{display:none}
.camera_clear{clear:both;display:block;height:1px;margin:-1px 0 25px;position:relative}
.pattern_1 .camera_overlayer{background:url(http://4.bp.blogspot.com/-mK_USJALT1w/USSK5zcb0VI/AAAAAAAAAPM/BXmbKtwCdPI/s1600/laya.png) repeat}
.pattern_2 .camera_overlayer{background:url(http://2.bp.blogspot.com/-VVgg8zHpY1Q/USSLGoqh93I/AAAAAAAAAPU/1L3y6jLQv3I/s1600/layb.png) repeat}
.pattern_3 .camera_overlayer{background:url(http://2.bp.blogspot.com/-vt97g0-7sy0/USSLQhI53RI/AAAAAAAAAPc/LUep3GmWmnI/s1600/layc.png) repeat}
.pattern_4 .camera_overlayer{background:url(http://1.bp.blogspot.com/-siY1U2dtkdk/USSLcJ6_iWI/AAAAAAAAAPk/P8wAOzA3Myo/s1600/layd.png) repeat}
.pattern_5 .camera_overlayer{background:url(http://4.bp.blogspot.com/-svWnNDcbzkQ/USSLndwFBeI/AAAAAAAAAPs/IpAgpa_YNXs/s320/laye.png) repeat}
.pattern_6 .camera_overlayer{background:url(http://4.bp.blogspot.com/-beOrTn_xAb0/USSL5TpKKKI/AAAAAAAAAP0/Be6TaEBGNbM/s320/layf.png) repeat}
.pattern_7 .camera_overlayer{background:url(http://1.bp.blogspot.com/-ZIu8sF_tT74/USSMFPPT_aI/AAAAAAAAAP8/ihrFsYG3Y4E/s320/layg.png) repeat}
.pattern_8 .camera_overlayer{background:url(http://1.bp.blogspot.com/-KSaEP4OQ_qw/USSMPrJ3PzI/AAAAAAAAAQE/K-3k29KDUwM/s320/layh.png) repeat}
.pattern_9 .camera_overlayer{background:url(http://3.bp.blogspot.com/-FilWZbFD07E/USSMiDKIURI/AAAAAAAAAQM/K7a6fvbnvGc/s1600/layi.png) repeat}
.pattern_10 .camera_overlayer{background:url(http://4.bp.blogspot.com/-M96ItiZRE7w/USSMiAM3xEI/AAAAAAAAAQQ/_NGNkQuKAnM/s320/layj.png) repeat}
.camera_caption{color:#fff}
.camera_caption > div{background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMDcN0D8zMAM-S8aoPCx9KivFXo9gWAKPx5DvsTSpbiLyeq14xtpRhLkfdtZgsgIZK1rd1OqRLHRxo3exa7WMSQ49uO1E_VCg7EwPX89mz1fFY7zA5owNIWLdGurjv8hS5iKUwxVubWauj/s1600/transparant.png)}
.camera_wrap .camera_pag .camera_pag_ul li{background:#8cd700}
.camera_wrap .camera_pag .camera_pag_ul li:hover > span{background:#8cd700}
.camera_wrap .camera_pag .camera_pag_ul li.cameracurrent > span{background:#eb4938}
.camera_pag_ul li img{border:3px solid #fff;-moz-box-shadow:0 3px 6px rgba(0,0,0,.5);-webkit-box-shadow:0 3px 6px rgba(0,0,0,.5);box-shadow:0 3px 6px rgba(0,0,0,.5)}
.camera_pag_ul .thumb_arrow{border-top-color:#fff}
.camera_prevThumbs,.camera_nextThumbs,.camera_prev,.camera_next,.camera_commands,.camera_thumbs_cont{background:#fff;background:rgba(216,216,216,0.85)}
.camera_wrap .camera_pag .camera_pag_ul li{background:#fff;box-shadow:0 1px 3px #c3c3c3; -moz-box-shadow:0 1px 3px #c3c3c3; -webkit-box-shadow:0 1px 3px #c3c3c3}
.camera_thumbs_cont ul li > img{border-color:1px solid #000}
/*ORANGE SKIN*/
.camera_orange_skin .camera_prevThumbs div {
 background-position: -160px -920px;
}
.camera_orange_skin .camera_nextThumbs div {
 background-position: -190px -920px;
}
.camera_orange_skin .camera_prev > span {
 background-position: 0 -920px;
}
.camera_orange_skin .camera_next > span {
 background-position: -40px -920px;
}
.camera_orange_skin .camera_commands > .camera_play {
 background-position: -80px -920px;
}
.camera_orange_skin .camera_commands > .camera_stop {
 background-position: -120px -920px ;
}
@media screen and (max-width:980px) {
 .post{margin:5px 9px 5px 5px;width:28%;padding:10px;height:auto;}
.post h1,.post h2{font:14px Oswald;}
.post-body{font:11px tahoma;height:auto}
}
@media screen and (max-width:800px) {
 .post{margin:5px 0 5px 5px;width:45.8%;padding:5px;}
}
@media screen and (max-width:620px) {
 .post{width:46%}
}
@media screen and (max-width:460px){
.post{margin:14px 12px 0;width:auto;padding:10px}
.cutter{max-height:120px}
.camera_caption p{display:none}
}
@media screen and (max-width:310px){
  .post{width:86%;margin:10px;padding:8px}
}
ve daha sonra </head> kodunu arattırıp buluyoruz ve üstüne aşağıdaki kodları ekliyorus

ondan sonra div id='headline kodunu arattırıp tabi bu kod bazı temalara göre değişiyo bu aşağıdaki kodu deneme yanılgıyla istediniz yere koya bilirsiniz. slider için sizin değiştirmeniz gereken yer www.googlehocam.blogspot.com  adresi yerine kendi adresinizi yazmanız

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='randompost'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
CameraSlider({
blogURL:'http://www.googlehocam.blogspot.com',
idcontaint:"#randompost",
NumCharacter: 160,
});
});
//]]>
</script>
</div>
</b:if>
<div class='clear'>
</div>

0 yorum:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)