Shoot-Pics Template Airputihmanis 09:27 Add Comment Column 2 , Grid Edit CLICK COPY AND PASTE THIS CODE TO YOUR BLOGGER EDIT HTML PAGE, GOOD LUCK ! | Page Not Found | div{ padding:0; } ul.nav-menu { list-style: none; margin: 0; padding: 0; z-index: 999; float: left; width: 60%; } ul.nav-menu li { display: inline-block; line-height: 1; list-style: none; padding: 0; } ul.nav-menu li a { text-decoration: none; text-transform: uppercase; display: inline-block; padding: 12px 20px; font-weight: bold; font-size: 11px; color: #555; background: #fff; border-right: 1px solid #f0f0f0; position: relative; text-shadow: none; line-height: 20px; } .sticky { position: fixed; top: 0px; border-bottom: 1px solid #ddd; z-index: 99999; } .social { margin: 0; padding: 0; float: right!important; width: 28%!important; } .social li { list-style: none; float: left; line-height: 20px; padding:0; } .social a { display: inline-block; padding: 12px 20px 12px 0; color: #555; font-size: 11px; } .social i { font-size: 14px; position: relative; left: 0; top: 1px; width: 25px; text-align:center; } /***************************************** Blog Post CSS ******************************************/ .featured-area { webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; margin: 0; position: relative; width: 100%; height: 100%; } .featured-area, .hentry img { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; overflow:hidden; } .post-body .overlay { -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear; position: absolute; box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; height: 100%; top: 0; left: -100%; background: #FFF; background: rgba(255, 255, 255, 0.9); padding: 20px; color: #555; z-index: 10; opacity: 0; text-align: center; } .featured-area:hover .overlay { left: 0; opacity: 1; } .entry-cntnt .entry-header { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; padding: 10px 20px; } .overlay .entry-header .entry-title { color: #333; font-weight: bold; line-height: 1.3; font-size:17px; } .entry-cntnt .overlay .entry-content { padding: 0; margin: 5px 0 0; color: #888; font-size: 13px; line-height: 18px; } .entry-likes,.entry-category { color: #aaa; overflow: hidden; width: 82%; height: 18px; position: absolute; bottom: 18px; left: 12px; font-size: 11px; font-style: italic; font-family: Georgia, Serif; font-weight: normal; } .entry-likes { width: 20%; } .entry-category i { margin-right: 5px; } .entry-likes { right: 6px; left: auto; text-align: right; } .hentry .permalink { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 20; } .hentry .overlay i { display: block; width: 44px; margin: 0 auto; font-size: 40px; line-height: 64px; color: #aaa; } .header-wrap { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 -1px 0 #e0e0e0; -moz-box-shadow: 0 -1px 0 #e0e0e0; -ms-box-shadow: 0 -1px 0 #e0e0e0; -o-box-shadow: 0 -1px 0 #e0e0e0; box-shadow: 0 -1px 0 #e0e0e0; background: #F4F4F4; padding: 10px 20px; margin-bottom: 25px; } .post-outer:first-child { margin: 0; } .post-outer { margin: 30px 0 0; } .post{ background: #FFFFFF; padding: 25px 5%; } .post-title { font-size: 28px; line-height: normal; margin: 0; padding: 0 0 10px; text-decoration: none; text-transform: capitalize; } .post-title a{ color:#333; } .post-title a:hover{ color: #2980B9; } .post-body { color: #666; text-transform: auto; word-wrap:break-word; } .featured-image { height:210px; margin: 0 0 10px; overflow: hidden; position: relative; } .featured-image img { min-height:210px;max-height:210px; width: 100%; } .post-header { padding: 5px 10px; margin: 10px -10px 0 -10px; background-color: white; opacity: .8; filter: progid:dximagetransform.microsoft.alpha(opacity=80); -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; border-bottom: 1px solid #EBEBEB; } .post-header a { color: #888; } .post-header a:hover{ color: #2980B9; } .post-header > span { margin-right: 7px; font-size: 12px; position: relative; } .post-header > span:after { content: "|"; padding-left: 7px; } .post-header > span:last-child:after{ content:""; } /***** Page Nav CSS *****/ #blog-pager { display: inline-block; margin: 1px 0; overflow: visible; padding: 25px 3%; width: 94%; } .showpageOf, .home-link { display:none; } .showpagePoint { background: #555; color: #FFFFFF; margin: 0 10px 0 0; padding: 5px 10px; text-decoration: none; border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -webkit-border-radius: 3px; } .showpage a, .showpageNum a { background: #333; color: #FFFFFF; margin: 0 10px 0 0; padding: 5px 10px; text-decoration: none; border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -webkit-border-radius: 3px; } .showpage a:hover, .showpageNum a:hover { background: #555; color: #fff; border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -webkit-border-radius: 3px; text-decoration: none; } #blog-pager-newer-link { padding: 20px 5%; position: relative; text-align: left; width: 40%; } #blog-pager-newer-link:before { content: "\00AB"; font-size: 30px; left: 0; position: absolute; top: 35%; } #blog-pager-older-link { padding: 20px 5%; position: relative; text-align: right; width: 40%; } #blog-pager-older-link:before { content: "\00BB"; font-size: 30px; position: absolute; right: 0; top: 35%; } #blog-pager-newer-link .newer-text, #blog-pager-older-link .older-text { display: block; color: #999; } /***************************************** Post Highlighter CSS ******************************************/ blockquote { border-color: #CDCDCD; border-style: solid; color: #888888; font-size: 17px; line-height: 1.7; margin: 10px 0 20px; padding: 15px 25px; border-width: 0; border-left-width: 4px; } /***************************************** Sidebar CSS ******************************************/ .sidebar { margin: 0; padding: 0; display: block; } .sidebar h2 { border-bottom: 2px solid #555; font-size: 15px; margin-bottom: 10px; padding-bottom: 5px; text-transform: capitalize; position: relative; display: inline-block; } .sidebar .widget { background: #fff; padding: 25px 20px; clear: both; font-size: 13px; line-height: 23px; margin-bottom: 30px; } .sidebar ul { margin: 0; padding: 0; list-style: none; } .sidebar li { border-bottom: 1px solid #F1f4f9; line-height: normal; list-style: none !important; margin: 8px 0; overflow: hidden; padding: 0 0 10px 0px !important; } /***************************************** Footer Credits CSS ******************************************/ .footer-credits {color: #000000; display: block; font-size: 13px; font-style: italic; line-height: 23px; margin: 20px 0 0; padding: 15px 0; text-align: center; } .footer-credits a { color: #000; } .footer-credits a:hover { color: #999; } /***************************************** Custom Widget CSS ******************************************/ /***** Search Form *****/ #searchform fieldset { background: #F1F4F9; border: 1px solid #F1F4F9; color: #888888; width: 98%; } #searchform fieldset:hover { background: #fff; } #s { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG3Tfjz6lLjQ7sAzsYKaLiWMhNkB1npJGs1tOgXiL0QK1zrEIQNFWVdGJ-aD88rpEhCvcSOK05_Dnnb9GX5Cc-vB_9NNDDnqloL4O2WfUjiJvhmzXhMCHd3eCfbSwGCZTBzcNgb13FRXss/s1600/sprites.png") no-repeat scroll right -60px rgba(0, 0, 0, 0); border: 0 none; color: #888888; float: left; margin: 8px 5%; padding: 0 10% 0 0; width: 80%; } /***** Custom Labels *****/ .cloud-label-widget-content { display: inline-block; text-align: left; } .cloud-label-widget-content .label-size { display: inline-block; float: left; font-size: 10px; font-family: Verdana,Arial,Tahoma,sans-serif; font-weight: bold; line-height: normal; margin: 5px 5px 0 0; opacity: 1; text-transform: uppercase; } .cloud-label-widget-content .label-size a { color: #000 !important; float: left; padding: 5px; } .cloud-label-widget-content .label-size:hover a { color: #555 !important; } .cloud-label-widget-content .label-size .label-count { color: #555; padding: 5px 0; float: left; } /***** Popular Post *****/ .PopularPosts .item-thumbnail img { display: block; float: left; height: auto; width: auto; } .PopularPosts .item-title { padding-bottom: 10px; font-size: 16px; font-weight: bold; } .PopularPosts ul li { border: 0; margin-bottom: 20px; } /***** Blogger Contact Form Widget *****/ .contact-form-email, .contact-form-name, .contact-form-email-message, .contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover, .contact-form-email:focus, .contact-form-name:focus, .contact-form-email-message:focus { background: #F8F8F8; border: 1px solid #D2DADD; box-shadow: 0 1px 1px #F3F4F6 inset; max-width: 300px; color: #999; } .contact-form-button-submit { background: #000; border: medium none; float: right; height: auto; margin: 10px 0 0; max-width: 300px; padding: 5px 10px; width: 100%; cursor: pointer; } .contact-form-button-submit:hover { background: #2980B9; border: none; } /***** Profile Widget CSS *****/ .Profile img { border:1px solid #cecece; background:#fff; float:left; margin:5px 10px 5px 0; padding: 5px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .profile-data { color:#999999; font:bold 20px/1.6em Arial,Helvetica,Tahoma,sans-serif; font-variant:small-caps; margin:0; text-transform:capitalize;} .profile-datablock { margin:0.5em 0;} .profile-textblock { line-height:1.6em; margin:0.5em 0;} a.profile-link { clear:both; display:block; font:80% monospace; padding:10px 0; text-align:center; text-transform:capitalize;} /***** Meet The Author *****/ #About { background: #FFFFFF; display: inline-block; padding: 25px 3%; width: 94%; } #About .widget-content { position: relative; width: 100%; } #About .widget-content .main-wrap { width: auto; margin-right: 370px; } #About .widget-content .main-wrap .info { float: left; position: relative; width: 90%; padding: 10px 5%; } #About .widget-content .side-wrap { width: 340px; float: right; text-align: center; } #About .widget-content .main-wrap .info h5 { border-bottom: 1px solid #F1F4F9; color: #000000; font-size: 16px; font-weight: bold; margin: 0 0 10px; padding: 0 0 5px; text-transform: capitalize; } #About .widget-content .main-wrap .info p { color: #555; font-style: italic; } #About .widget-content .side-wrap .author-img { border: 1px solid #CECECE; height: 150px; vertical-align: bottom; width: 150px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } ul.author-social { display: inline-block; margin: 10px 0 0; padding: 0; } ul.author-social li { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG3Tfjz6lLjQ7sAzsYKaLiWMhNkB1npJGs1tOgXiL0QK1zrEIQNFWVdGJ-aD88rpEhCvcSOK05_Dnnb9GX5Cc-vB_9NNDDnqloL4O2WfUjiJvhmzXhMCHd3eCfbSwGCZTBzcNgb13FRXss/s1600/sprites.png") no-repeat; display: inline-block; font-weight: bold; font-size: 12px; line-height: 16px; list-style: none; padding: 0 20px; } ul.author-social li.facebook { background-position: 0 -80px; } ul.author-social li.twitter { background-position: 0 -100px; } ul.author-social li.googleplus { background-position: 0 -120px; } ul.author-social li.rss { background-position: 0 -176px; } ul.author-social li a { color: #000; } ul.author-social li a:hover { color: #666; } /***************************************** Comments CSS ******************************************/ #comments { margin-top: 30px; } .comments h4 { font-size: 20px; margin: 0 0 18px; text-transform: capitalize; } .comments li { list-style: none; } .comments .comments-content .comment-thread ol { overflow: hidden; margin: 0; } .comments .comments-content .comment:first-child { padding-top: 0; } .comments .comments-content .comment { margin-bottom: 0; padding-bottom: 0; } .comments .avatar-image-container { max-height: 60px; width: 60px; } .comments .avatar-image-container img { max-width: 60px; width: 100%; -webkit-border-radius: 5px; -o-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .comments .comment-block { background: #fff; margin-left: 72px; padding: 14px 0 0 20px; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; } .comment-replies .comment-block { padding-bottom: 14px; } .comments .comments-content .comment-header a { color: #333; text-transform: capitalize; } .comments .comments-content .user { display: block; font-style: italic; font-weight: bold; } .comments .comments-content .datetime { margin-left: 0; } .comments .comments-content .datetime a { font-size: 12px; text-transform: uppercase; } .comments .comments-content .comment-header, .comments .comments-content .comment-content { margin: 0 20px 0 0; } .comments .comment-block .comment-actions { display: block; text-align: right; } .comments .comment .comment-actions a { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius:2px; background: #555; color: #FFFFFF; display: inline-block; font-size: 12px; line-height: normal; margin-left: 1px; padding: 5px 8px; } .comments .comment .comment-actions a:hover { text-decoration: none; } .comments .thread-toggle { display: none; } .comments .comments-content .inline-thread { border-left: 1px solid #F4F4F4; margin: 0 0 20px 35px !important; padding: 0 0 0 20px; } .comments .continue { display: none; } .comment-thread ol { counter-reset: countcomments; } .comment-thread li:before { color: #2980B9; content: counter(countcomments, decimal); counter-increment: countcomments; float: right; font-size: 22px; padding: 15px 20px 10px; position: relative; z-index: 10; } .comment-thread ol ol { counter-reset: contrebasse; } .comment-thread li li:before { content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin); counter-increment: contrebasse; float: right; font-size: 18px; } /***************************************** Responsive styles ******************************************/ @media screen and (max-width: 960px) { .ct-wrapper{ padding:0 15px; } .main-wrapper { margin-right:0; width:100%; } .sidebar-wrapper{ float: left; width: auto; margin-top: 30px; } #About .widget-content .main-wrap { margin-right: 0; } #About .widget-content .main-wrap .info { float: none; text-align: center; width: 90%; padding: 10px 5%; } #About .widget-content .side-wrap { width: 100%; float: none; text-align: center; } .sticky { position: static; } } @media screen and (max-width: 820px){ #nav-menu {width: auto;margin: 0 20px;} .button-menu-mobile {display: block!important;z-index: 1000000;position: absolute;top: 10px;left: 15px;font-size: 21px;} ul.nav-menu{display:none;} .social{width:auto!important;} ul.nav-menu {position: absolute;top: 45px;width: 235px;background: rgb(58, 58, 58);-webkit-border-radius: 5px 5px;-moz-border-radius: 5px 5px;-ms-border-radius: 5px 5px;-o-border-radius: 5px 5px;border-radius: 5px 5px;border-right: 1px solid #282828;border-bottom: 3px solid #282828;} ul.nav-menu li{display:block;} ul.nav-menu li a {background:transparent;display: block;border: 0;color: #eee;letter-spacing: 2px;} #comment-editor { margin:10px; } .hentry{width:30.66%!important;} } @media screen and (max-width: 520px){ #header img { } .post.hentry{width:45.33%!important;} .featured-image{height:165px;} .entry-cntnt .entry-header{padding-top:20px;} .overlay .entry-header .entry-title{font-size:15px;} .entry-content{display:none;} } @media screen and (max-width: 420px){ .comments .comments-content .datetime{ display:block; float:none; } .comments .comments-content .comment-header { height:70px; } } @media screen and (max-width: 320px){ .post.hentry {width: 100%!important;} .social a{padding:10px 10px 10px 0;} .ct-wrapper{ padding:0; } .post-body img{ max-width: 230px; } .comments .comments-content .comment-replies { margin-left: 0; } } /***************************************** Hiding Header Date and Feed Links ******************************************/ h2.date-header,span.blog-admin{display:none!important;} ]]> Home Sample Page About Archive Contact RSS Feed Twitter Facebook : 1 : : () › 1 ‹ › Next Post Previous Post Leave a Comment1 comment comments : () () DEMO SHARE SHARE SHARE Author Hi, Its me Hafeez. A webdesigner, blogspot developer and UI/UX Designer. I am a certified Themeforest top Author and Front-End Developer. I'am business speaker, marketer, Blogger and Javascript Programmer.
0 comments:
Post a Comment