sdfsdfsdf

Merhaba Arkadaşlar, bu yayınımda sizlere popüler yayınlar gadgetini nasıl css ile hareketli hale getirilmiş olan eklentiyi sunmak istiyorum.

Blogger siteniz için güzel bir eklenti sidebar kısmında popüler yayınlar eklentisi animasyonlu resimdede gördüğünüz gibi umarım beğenirsiniz.

Uygulamak için Şablon > Html'yi Düzenle diyoruz ve Ctrl + F tuşlarına basıp ]]></b:skin> kodunu aratıyoruz ve hemen üstüne aşağıdaki kodu yapıştırıyoruz. Hepsi bu kadar...

sosyal-cssanime:hover li { opacity:0.2; } #sosyal-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; } #sosyal-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; } #sosyal-cssanime li:hover { opacity:1; } #sosyal-cssanime li:hover a strong { opacity:1; top:-10px; } #PopularPosts1 ul li a:hover{color:#000;text-decoration:none} #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 3px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:30px;background:transparent;padding:0;width:71px;height:71px} #PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #FFffff;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#FFffff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:60%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:85%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:85%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:89%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#d7e9f3;width:89%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#dadfe2;width:89%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#bddae7;width:89%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#acbfca; width:89%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#83b7e0 ;width:89%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #9f9e9e;-moz-box-shadow: 3px 3px 3px #9f9e9e;padding:10px} .popular-posts ul{padding-left:0px;font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0} .popular-posts ul li {background: url(#) no-repeat scroll 5px 5px; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 5px !important;font-size:12px!important;font-weight:550; border: 1px solid #58ACFA; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .popular-posts ul li:hover { background: #CCE9FD;border:1px solid #58ACFA; } .popular-posts ul li a:hover { text-decoration:none; } .popular-posts .item-thumbnail img { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);height:75px;width:75px;}.popular-posts .item-thumbnail img:hover { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg);} /* Blogger Hover Efekti Popüler Yayınlar Eklentisi sohbetcheblog */ .PopularPosts .widget-content ul li{padding:0;position:relative} .item-snippet {font-size: 90%;line-height: 1.2em;position: absolute;width: 230px;background-color: whiteSmoke;padding: 7px;border-top: 2px solid #000;z-index: 9999;left: 100px;top: 62%;height: 4.5em!important;visibility: hidden;opacity: 0;transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;} .PopularPosts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible} .PopularPosts img{width:80px;height:82px} .PopularPosts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:125%} /* Blogger Hover Efekti Popüler Yayınlar Eklentisi kodblogcum*/

Yardım için yoruma yazabilirsiniz ... Sağlıcakla Kalın...

ddssdsd

Merhaba Arkadaşlar,bu yayınımda sizlere blogunuzda kullanabileceğiniz slider manşet eklentisini sunacağım.Biraz bahsedeyim bu eklentiden aşağıda anlatmış olduğum adımları uyguladıktan sonra kendisi otomatik olarak resimleri üzerindeki yazıları otomatik olarak ekliyor.Güzel ve kullanışlı bir eklentidir.Blogunuzda şık duracağını düşünüyorsanız ekleyebilirsiniz.

Eklemek için adımları uygulayınız.

Adım 1:Öncelikle css kodunu ekliyoruz Şablon > Html'yi Düzenle diyip ]]></b:skin> kodunu aratıp buluyoruz ve aşağıdaki kodu hemen üstüne ekliyoruz.

<style type='text/css'> .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,.camera_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{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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh14bQuu1QCyGugR522KsnDvE6HY4p8yBO8TxZ2djREdzpiX3m-S_GPioFXH05o_UWuuhFdC-YAEXkABpIpild21elIFnJQGmAGb7KUrAUlz7yK3_A0ZhIFcc9QLJcAbFX0wFzpyuYx4QY/s1600/blank.gif);display:block;height:100%;text-decoration:none} .camera_loader{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq7dr9xEzPWzWnXWvPJmx59KvPFYFT7aiI2OcGDclzcssABXBLEpsmDgxZtdnSXIBpWrf0zsYnHbSgI_-sNphLsLsPOWyR_-tJMtmYTsw2uHjftt_zlNm4Sq902HjlcbAROHkT2gs89s8/s1600/camera-loader.gif) no-repeat center;background:rgba(255,255,255,0.9) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq7dr9xEzPWzWnXWvPJmx59KvPFYFT7aiI2OcGDclzcssABXBLEpsmDgxZtdnSXIBpWrf0zsYnHbSgI_-sNphLsLsPOWyR_-tJMtmYTsw2uHjftt_zlNm4Sq902HjlcbAROHkT2gs89s8/s1600/camera-loader.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-QYTSAYxWIOKwMY0lXokkKNRL-ogPO-tl7SK4vpQ4x3SbazmcXzPX3xPsZJm0QUtdI4aICbBYauXZgm_TBMl6jmK15dtvaIbwokTkYd5oXhcY9mSVstCO1ccZ9skpt2sJKlnBZ56MAic/s1600/camera_skins.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-QYTSAYxWIOKwMY0lXokkKNRL-ogPO-tl7SK4vpQ4x3SbazmcXzPX3xPsZJm0QUtdI4aICbBYauXZgm_TBMl6jmK15dtvaIbwokTkYd5oXhcY9mSVstCO1ccZ9skpt2sJKlnBZ56MAic/s1600/camera_skins.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-QYTSAYxWIOKwMY0lXokkKNRL-ogPO-tl7SK4vpQ4x3SbazmcXzPX3xPsZJm0QUtdI4aICbBYauXZgm_TBMl6jmK15dtvaIbwokTkYd5oXhcY9mSVstCO1ccZ9skpt2sJKlnBZ56MAic/s1600/camera_skins.png) no-repeat 0 0;display:block;height:40px;width:40px} .camera_next{right:0} .camera_next > span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-QYTSAYxWIOKwMY0lXokkKNRL-ogPO-tl7SK4vpQ4x3SbazmcXzPX3xPsZJm0QUtdI4aICbBYauXZgm_TBMl6jmK15dtvaIbwokTkYd5oXhcY9mSVstCO1ccZ9skpt2sJKlnBZ56MAic/s1600/camera_skins.png) no-repeat -40px 0;display:block;height:40px;width:40px} .camera_commands{right:41px} .camera_commands > .camera_play{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-QYTSAYxWIOKwMY0lXokkKNRL-ogPO-tl7SK4vpQ4x3SbazmcXzPX3xPsZJm0QUtdI4aICbBYauXZgm_TBMl6jmK15dtvaIbwokTkYd5oXhcY9mSVstCO1ccZ9skpt2sJKlnBZ56MAic/s1600/camera_skins.png) no-repeat -80px 0;height:40px;width:40px} .camera_commands > .camera_stop{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-QYTSAYxWIOKwMY0lXokkKNRL-ogPO-tl7SK4vpQ4x3SbazmcXzPX3xPsZJm0QUtdI4aICbBYauXZgm_TBMl6jmK15dtvaIbwokTkYd5oXhcY9mSVstCO1ccZ9skpt2sJKlnBZ56MAic/s1600/camera_skins.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg46PBBTPRIpUwUZffKzhpdb2N8eAxCyYj1lhlVUo0EbOnffq63bajZ8T8sQUaMVD-Sv5xJXaEmlK4WwBJONwW4NUZvX2VvfLw6njIDq1LElVmqXFmtpRxAV7dXM4erZgRfm7bJfQMfhfI/s1600/overlay1.png) repeat} .pattern_2 .camera_overlayer{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjalhYEEww9u4iRZZqK2yza8Yyy-w0Qe22NCzLpqGPJ4Gtr0PgwjLwCKT3Sm9ZPQKxFvHd3wZ3MU3x2bPjkyx6jqb82vPLzrmPDjd9QCnv88e7SNB0bnAx9TenH8PH3jz5VHes-4OVMqvA/s1600/overlay2.png) repeat} .pattern_3 .camera_overlayer{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlz_Jzcj9YHibLkDacETTgFmee_QXwzq94TQ0tImTwECUpJzUfB9EJ5deU4BwOBVERiiKLxE3jBiRov7C4B_Roz4pfpUqtjcwBRIRc4OLVWtMb0Zpc2St_DjI6MOR10hiwuZV0csgt0RY/s1600/overlay3.png) repeat} .pattern_4 .camera_overlayer{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqnAJRQ_w06K05TTYJltvpA0GIV-44UGUMR-8CzX0_a-86HzywaIogq09ABzJ6boQEXF3fp-aT9W2OT0MxJp5lM_OJNCRF9HaGB7nHtZdrOYC57UlmgNew07DG6gON7Z6aDjb8T-nNFS4/s1600/overlay4.png) repeat} .pattern_5 .camera_overlayer{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirf7wrhDY2-a1AmG9unSFEDxPtBq_dcFHFr2WN8tzcr_7lz3F-bqYLJLyY9Ul0E-7JyvB1DcC1vj17MBZ0IS3Y5POzA95_02arm5sThB-lMxpQ937NkbDrqIyhvhjn-g8ISGCfIDdzBqY/s1600/overlay5.png) repeat} .pattern_6 .camera_overlayer{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQlPI4qykhOX_J7glK0u3fdtjv1CXbeWvKka9AgDTje_fGaIqLBfVVOs2iCixGuLfS44gqlGycly3Ygm0_pprRXlTuOYjy-AxjQ8Du81KdaTUIWCC_xC4J2PHtRadF05ekuOzrz_zFJT0/s1600/overlay6.png) repeat} .pattern_7 .camera_overlayer{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhLlZf0hbmKMLCFmr-PdkLsYZeiR4VXC2RrSrVN8Ff5lF_RQMpjojkqGYkJAGht5FgUjF1Yq7-t10gOXR0t1cxHDXh04Jd4p7IYOf6hjyoOSiRU_N7qOMZtdX7VqixUYJVg7dYdQelfMY/s1600/overlay7.png) repeat} .pattern_8 .camera_overlayer{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsad4O-N9yXAZka5ExnsCI0QSGBRaTZpvzhqrfFrsAVpaaSaYIrL6bNWFrJq0WQWQagFUFklhqQChKbkRGdZRXLX6RNftOjhqqDTpyK5nT9V8Dv4Cvqqa1xKl6VwPAxXImJ8Q4saHcshQ/s1600/overlay8.png) repeat} .pattern_9 .camera_overlayer{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOkCfK82O600wFcmXphstP49KBca55wSYMvhp5SP6iwpW7SqpSebGZ8sEnfr23JY456I2YPBNeLKg-gww_6ao-QAdcWzOzmgN-aIxuKPgfGG3cGOBhTjEEIRBQUdOc5pMPFYvimwLH-w0/s1600/overlay9.png) repeat} .pattern_10 .camera_overlayer{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj47jeLXO90_gVRNo0lquGBcGUUrzeDDRSV88LkkR0Vr9JFfmRLa3G_iSBn1LY8wEhoS3OtABs1VHPktkPJTZzQB_MaQpYUmCx2N0YC4pZv6jezx0u5Ut1GMXKiVIj_Nxy8RbaQlWUQX9g/s1600/overlay10.png) repeat} .camera_caption{color:#fff} .camera_caption > div{background:(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0e2YnDnGy8XKGhZJgpSJ8jr3y3yAEhMMxMVQOGquidJ2cMXVCYALnfBnpWTuMxyky2xoyq1VxWnhg1YBYsRhMnbuTRE2F6fgSp7ewgR-FMo-NOMssfVvMy487ETHwa3AAd3yqLYEuNljH/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} } </style>

Adım 2:Daha sonra yine şablonda </head> kodunu aratıyoruz ve aşağıdaki kodları hemen üstüne ekliyoruz.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> <script src='http://yourjavascript.com/11325639179/camera-slider.js' type='text/javascript'/> <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>

Adım 3:En son işlem ise HTML kodlarını ekliyiceğiz yanlız bu kodu siz sliderin nerde gözükmesini istiyorsanız oraya ekliyiniz eğer blogunuzda blog yayınlarının hemen üstünde görmek istiorsanız şablon da  main-wrapper kodunu aratıp blog kayıtlarının hemen üstüne kodblogcum.blogspot.com yazan yere kendi site adresinizi yazıyorsunuz.


<b:if cond='data:blog.url == data:blog.homepageUrl'> <div id='randompost'/> <script type='text/javascript'> //<![CDATA[ $(document).ready(function () { CameraSlider({ blogURL:'http://kodblogcum.blogspot.com.tr/', idcontaint:"#randompost", NumCharacter: 160, }); }); //]]> </script> </b:if>
Yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın...

WebKodu.com WebKodu.com WebKodu.com

dfsffssfsf

Merhaba Arkadaşlar,bu yayınımda sizlere etiketlerinizi nasıl renkli hale getirebileceğinizden bahsedeceğim.Blogunuzda renkli ve canlı duran bu eklentiyi anlatayım.

Adım1 : İlk önce Blogger Şablon > Html'yi Düzenle diyip  ]]></b:skin> kodunu aratıp hemen üstüne aşağıdaki kodu yapıştırıyoruz.

.cloud-label-widget-content{text-align:$startSide;overflow:hidden;} .cloud-label-widget-content .label-size{float:$startSide;display:block;padding:4px 5px;margin-$endSide:2px;margin-bottom:2px;background-color:#007C8E;(keycolor);color:$(artitle.background.color);-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;} .cloud-label-widget-content .label-size a{color:$(artitle.background.color);} .cloud-label-widget-content .label-size:hover{background-color:#E3AA03;(credit.background.color);} .cloud-label-widget-content .label-size:active{top:1px;} .label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;} .cloud-label-widget-content { text-align: left; } .label-size { background: #5498C9; display: block; float: left; margin: 0 3px 3px 0; color: #fff; font-family: 'Open Sans',"Segoe UI",Arial,Tahoma,sans-serif; font-size: 11px; text-transform: uppercase; } .label-size:nth-child(1) { background: #F53477; } .label-size:nth-child(2) { background: #89C237; } .label-size:nth-child(3) { background: #44CCF2; } .label-size:nth-child(4) { background: #01ACE2; } .label-size:nth-child(5) { background: #94368E; } .label-size:nth-child(6) { background: #A51A5D; } .label-size:nth-child(7) { background: #555; } .label-size:nth-child(8) { background: #f2a261; } .label-size:nth-child(9) { background: #00ff80; } .label-size:nth-child(10) { background: #b8870b; } .label-size:nth-child(11) { background: #99cc33; } .label-size:nth-child(12) { background: #ffff00; } .label-size:nth-child(13) { background: #40dece; } .label-size:nth-child(14) { background: #ff6347; } .label-size:nth-child(15) { background: #f0e68d; } .label-size:nth-child(16) { background: #7fffd2; } .label-size:nth-child(17) { background: #7a68ed; } .label-size:nth-child(18) { background: #ff1491; } .label-size:nth-child(19) { background: #698c23; } .label-size:nth-child(20) { background: #00ff00; } .label-size a, .label-size span { display: inline-block; color: #000 !important; padding: 3px 1px; font-weight: bold; } .label-size:hover { background: #222; } .label-count { white-space: nowrap; padding-right: 3px; margin-left: -3px; background: #333; color: #fff ; } .label-size:hover .label-count, .label-size:focus+.label-count { background-color: #ff6bb5; }

Adım2 : Blogger Yerleşim menusünden Gadget Ekle diyoruz  ve Etiketleri ekleyip resimdeki gibi düzenliyoruz.

saasdsadsda

Merhaba Arkadaşlar, bu yayınımda sizlere yeni bir renkli etiket oluşturmadan bahsedeceğim.Daha sade duran bu etiket eklentisini anlatayım.

Adım 1: Blogger Şablon > Html'yi Düzenle diyoruz ve ]]></b:skin> kodunu aratıp aşağıdaki kodu ekliyoruz.

.label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;} .label-size-1 a:hover {background:#16a085;} .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;} .label-size-2 a:hover {background:#2980b9;} .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;} .label-size-3 a:hover {background:#27ae60} .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;} .label-size-4 a:hover {background:#8e44ad} .label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;} .label-size-5 a:hover {background:#c0392b} .label-size-6 a {background:#FE2200;border-bottom:3px solid #FE2200;} .label-size-6 a:hover {background:#FE2200} .label-size { position:relative; text-transform:uppercase; text-decoration:none; font-size:13px; font-family:Arial; color:#fff!important; } .label-size a { color:#fff!important; font-weight:bold; float:left; display:block; transition: all 0.4s ease-in-out; padding: 3px 5px; margin: 2px 5px 5px 2px; }

Adım 2 : Blogger Yerleşim menusünden Gadget Ekle diyoruz ve Etiketleri ekliyoruz.