Blogger alıntı şablonları ~ MandoTeam

Blogspot Şablonları için her zavke göre 20 Blockquote CSS Tasarımı

Aşağıda internette arama yaparken karşılaştığım 20 blok alıntı tasarımı var.Ücretsiz CSS kodları ve hem kişisel hem de ticari web sitesinde kullanılmasına izin verilir

1- Tasarım 2- Tasarım 3- Tasarım 4- Tasarım 5- Tasarım 6- Tasarım 7- Tasarım 8- Tasarım 9- Tasarım 10-Tasarım 11- Tasarım 12- Tasarım 13- Tasarım 14- Tasarım 15- Tasarım 16- Tasarım 17- Tasarım 18- Tasarım 19- Tasarım 20- Tasarım

Tasarım 1

Denemek için birini kurdum görmek için üstteki resme tıkla.

.post blockquote {
overflow:auto;width:250px;height:260px;
font-family: “Consolas”, “Courier New”, Courier, mono, serif;
color:#ffffff;
margin : 15px 35px 15px 15px;
padding : 5px 8px 15px 165px;
clear : both;
list-style-type : none;word-wrap:break-word;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE9ULBofD5nQ8yN_7ielmEe02T0OfVzutLb1cnb9_IdF41tApY9EvSYikWYYkfMGGlSma7VmFSMP8hwgMzrmOVhf6P6d9eNFdj2zxt2cQveOt-QT7r_VCgyuehEjF0CV6rQ-HC51jNL371/s1600/teacher.png);
background-repeat: no-repeat;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;
}
.post blockquote:hover{
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx-6ZrZ5S7IpCDrVTeTwqxfNbelc9Fy2ATTZ4Fp_nLCVIqMTYey4LyhB9vxB_14u3R-zRplDcWqSla30jvv5h7I4wvkwj9bjYD9qQBdmX7CyTRIXPRO7CiuJqNTbh-BAnzNxgcq-dnInwe/s1600/hover+html+teacher.png);
background-repeat: no-repeat;
color:#F1F1F1;
}

Tasarım 2

.post blockquote {
display:block;
background: #fff;
margin: 0px 50px 0px 50px;
padding: 30px 30px 30px 50px;
position: relative;
font-family: Georgia, serif;
font-size: 20px;
line-height: 1.5;
color: #446578;
text-align: justify;
border-left: 15px solid #EBF2F8;
border-right: 1px dotted #EBF2F8;
-moz-box-shadow: -1px 2px 5px #ccc;
-webkit-box-shadow: -1px 2px 5px #ccc;
box-shadow: -1px 2px 5px #ccc;
}
.post blockquote:before{
content: “201C”;
font-family: Georgia, serif;
font-size: 60px;
font-weight: bold;
color: #8DACC0;
position: absolute;
left: 10px;
top:5px;
}
.post blockquote:after{
content: “”;
}
.post blockquote a{
text-decoration: none;
background: #eee;
cursor: pointer;
padding: 0 3px;
color: #c76c0c;
}
.post blockquote a:hover{
color: #666;
}

Tasarım 3

blockquote{
display:block;
background: #fff;
margin: 0px 50px 0px 50px;
padding: 30px 30px 30px 50px;
position: relative;
font-family: Georgia, serif;
font-size: 20px;
line-height: 1.2;
color: #666;
text-align: justify;
border-left: 15px solid #c76c0c;
border-right: 5px solid #c76c0c;
-moz-box-shadow: 2px 2px 15px #ccc;
-webkit-box-shadow: 2px 2px 15px #ccc;
box-shadow: 2px 2px 15px #ccc;
}
blockquote::before{
content: “201C”; /*Unicode for Left Double Quote*/
font-family: Georgia, serif;
font-size: 60px;
font-weight: bold;
color: #999;
position: absolute;
left: 10px;
top:5px;
}
blockquote::after{
content: “”;
}
blockquote a{
text-decoration: none;
background: #eee;
cursor: pointer;
padding: 0 3px;
color: #c76c0c;
}
blockquote a:hover{
color: #666;
}
blockquote em{
font-style: italic;
}

Tasarım 4

blockquote{
background:#fff;
margin: 0px 50px 0px 50px;
padding: 30px 30px 30px 50px;
border-left:5px dashed #ddd;
font-size: 20px;
}
blockquote :first-letter {
float: left;
margin: 5px 3px 1px 0;
font-family: Georgia;
font-size: 60px;
font-weight: bold;
}

Tasarım 5

blockquote {
background: #B9DFF1;
margin: 0px 50px 0px 50px;
padding: 30px 30px 30px 50px;
color:#333;
border-radius:15px;
font-size: 20px;
font: bold 0.9em  “Comic Sans MS”, verdana;
line-height: 1.6em;
box-shadow: 4px 4px 10px #e3e3e3;
}

Tasarım 6

blockquote {
margin: 0px 50px 0px 50px;
padding: 30px 30px 30px 50px;
font-weight: 300;
border-top: 5px solid #77818d;
border-left: 5px solid #dfdfdf;
background: #f4f4f4;
color: #999999;
font-size: 20px;
font-style: italic;
line-height: 24px;
}
blockquote p {
margin: 0;
}

Tasarım 7

blockquote {
font-size: 20px;
line-height: 1.65em;
font-weight: 300;
margin: 0px 50px 0px 50px;
padding: 30px 30px 30px 50px;
color: #fff;
border-top: 5px solid #77818d;
background: #77818d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZzhqqSathtRN6RhPMwr06AxfWy5AbNFf2r7g6dBwUYbSwScyFkkcS1lrFd4GKPeGTZYrHDhzZwpQ3_gkPF81ZLxD_7Vo5VPRkyPSauHoOtp6Gg3xinVpTNekd5BoSdMRoD1cm6DtH8xo6/s16/icon_blockquote.png) no-repeat 20px 25px;
}
blockquote p {
margin: 0;
}

Tasarım 8

blockquote {
margin: 0px 50px 0px 50px;
padding: 30px 30px 30px 50px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
font-size:20px;
}

Tasarım 9

blockquote {
margin: 0px 50px 0px 50px;
padding: 30px 30px 30px 50px;
color:#FFF;
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#7d7e7d’, endColorstr=’#0e0e0e’,GradientType=0 ); /* IE6-9 */
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
font-size: 20px;
font-family: Candara, Calibri, Segoe, “Segoe UI”, Optima, Arial, sans-serif;
}

Tasarım 10

blockquote { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiYAWRiEVvG76PqNKdNRjIF25BDb9ggFgYaAEhBz8hHK_wVU8c3X_EKILJbV7kt2gXJXGsQ-OYitNcj0tDb7rPjRjSEWFqNhJ8Sb6uxngdKA6v0ittwn4pxGFuwKQfUtFGdPUtPHlj2ew/s1600/paper1.png) repeat-y scroll 0 0 transparent;
border-radius: 5px;
margin: 0px 50px 0px 50px;
padding: 30px 30px 30px 50px;
line-height: 1.6em;
font-family:’Fondamento’, cursive, sans-serif;
font-size:20px;

}

Tasarım 11

blockquote {
color: #333;
padding: 70px 30px 30px 50px;
background: #fafafa
/*The Image URL. You should replace it with your own */
background: #fafafa url(“https://www.bloggingvision.com/wp-content/uploads/2015/10/Logo-version-3.png“) no-repeat top center;
font-size: 20px;
}

Tasarım 12

blockquote {
background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4IZBdaXPz81eslmq3sQlF5BjwLqYnWkJCVHKjgWFa6nRgsgTTKndCDu0UAL9a4hl44GnUTIDtY5DkMmwmihCEqA1rtkjN1PbqxwOLqTIuAvqe_-j4d4Fd_S2a38EuFNwbkwX_atC8puc/s1600/green-black-side.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0px 50px 0px 50px;
padding: 30px 30px 30px 50px;
color: #C7CACF;
font: normal 1.105em Helvetica, verdana, serif, Georgia, “Times New Roman”;
.post blockquote p {
margin: 0;
padding-top: 10px;
}

Tasarım 13

.post blockquote {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #FC8E42;
border-radius: 240px 240px 240px 240px;
color: #333333;
margin: 1em 140px 80px;
padding: 70px 70px;
position: relative;
text-align: center;
font: 1.5em/1.4 Cambria,Georgia,sans-serif;
font-weight: bold;
}
.post blockquote:before {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #FFBD54;
border-radius: 50px 50px 50px 50px;
bottom: -40px;
content: “”;
display: block;
height: 50px;
position: absolute;
right: 100px;
width: 50px;
z-index: 10;
}
.post blockquote:after {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #5A8F00;
border-radius: 25px 25px 25px 25px;
bottom: 60px;
content: “”;
display: block;
height: 25px;
position: absolute;
right: 50px;
width: 25px;
z-index: 10;
}

Tasarım 14

.post blockquote {
background: linear-gradient(#B8DB29, #5A8F00) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 10px 10px 10px 10px;
color: #FFFFFF;
margin: 30px 15px 5px;
padding: 15px 30px;
position: relative;
font: 1.6em/1.4 Cambria,Georgia,sans-serif;
font-weight: bold;
}
.post blockquote:after {
border-color: rgba(0, 0, 0, 0) #B5D928;
border-style: solid;
border-width: 50px 0px 0px 20px;
top: -50px;
content: “”;
display: block;
left: 50px;
position: absolute;
width: 0;
}

Tasarım 15

blockquote {
background-color: #f8f8f8;
overflow: auto;
width: 450px;
padding: 0px 25px 25px 25px;
color: black;
border: 2px solid #ca2129;
border-top-right-radius: 100px;
-moz-border-radius-topright: 100px;
-webkit-border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
-moz-border-radius-bottomleft: 100px;
-webkit-border-bottom-left-radius: 100px;
box-shadow: 1px 1px 4px #ca2129;
-moz-box-box-shadow: 1px 1px 4px green -web-kit-box-shadow:1px 1px 4px green;
-goog-ms-box-shadow: 1px 1px 4px green;
white-space: pre-wrap;
white-space: -moz-pre-wrap !important;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
font-size: 20px;
}

Tasarım 16

blockquote {
margin: 20px 30px 20px 30px;
background-image: url(https://blogger.googleusercontent.com/img/proxy/AVvXsEgyw8Qk4W77kBowJNF4ab-BFgTxAj7PZgJ6n9F_AgqjDjizeb6MPlBfygpktQisQot24INz1R9P0UQe2KK3yal6usT_BTeSlP7sLgaZZFume-G_gXIDkiXoo0UeSLYgcoHD3CoGOeahYAFOBI3RO-XdF9BXetitMfssPc1rFUnlQC93DBUB6GluWA=s0-d);
font: 20px/25px Serif, Times, Helvetica;
font-style: italic;
color: #FFF;
border: 1px ridge #0180C3;
border-radius: 20px 10px 20px 10px;
-moz-border-radius: 20px 10px 20px 10px;
-webkit-border-radius: 20px 10px 20px 10px;
-o-transition: all 1.2s ease-in;
-moz-transition: all 1.2s ease-in;
-webkit-transition: all 1.2s ease-in;
padding: 20px 20px 20px 20px;
}
blockquote:hover {
color: #eee;
-o-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
-moz-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
-webkit-transform: rotate(0deg) scale(1.06) translate(-10px, 0);}
blockquote span.bbuka, blockquote span.btutup {
float: left;
margin-right: 5px;
height: 17px;
width: 22px;
background: url(https://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-L.png) left top no-repeat;
-o-transition: all 1.2s ease-in;
-moz-transition: all 1.2s ease-in;
-webkit-transition: all 1.2s ease-in;
}
blockquote span.bbtutup {
float: right;
margin-left: 5px;
margin-right: 0;
background: url(https://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-R.png) right top no-repeat;
}
blockquote:hover span.bbuka, blockquote:hover span.btutup {
-o-transform: rotate(1090deg) scale(1.1);
-moz-transform: rotate(1090deg) scale(1.1);
-webkit-transform: rotate(1090deg) scale(1.1);
}

Tasarım 17

blockquote {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUHVHcTAMdGBne7Zd-TpqEpQ_Gd5x30C1QVb6bM00AhsNEP7vNOrI71EwFdhPX0fph9TQ6f7QaYsfWoQUwDcCgEMTfTYX2hL_frhjZiZPCqJKaceYyzqzmjOmezTIrQVq49tvxPHXY2nw/s320/bg-quote1.png) no-repeat;
color: #a5a4a4;
font-style: italic;
margin: 30px !important;
padding: 0px 1px 0px 75px;
}

Tasarım 18

blockquote {
background: #fcfcfc;
border-left: 1px dashed #ccc;
border-bottom: 1px dashed #ccc;
border-right: 1px dashed #ccc;
border-top: 1px dashed #ccc;
color: #a5a4a4;
font-style: italic;
margin: 30px;
padding: 30px;
}

Tasarım 19

blockquote {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
color: #a5a4a4;
font-style: italic;
margin: 30px;
padding: 30px;
text-align: center;
}

Tasarım 20

blockquote {
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5RJLw7lXtZJu7RuVwYUyLPcrGTY2tFCENk_Qwj8D_Cx1KHP5DgtMimveZDXl0hxUM38IfCqrzAogyxipw68GEiCBsPzonOk-EOFQLu2KdzM6CEm4Gm2DvE7PS4lqeP0Dn92ehpC0FDJE/s320/bg-quote3a.png) top center no-repeat,
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyplVwMj8oZ-dkbD-LHuYVKijf1u2_DyOCg4ES2xuWTyHF4Lnw3R2QAWhukDT-rsxj-TI-PwbSt-1UNvruIDpGn9YJ1bhiZM4FwqR91Ffku6JTmJpvU7kUaDxusgBodifF9txZ9eKvew8/s320/bg-quote3b.png) bottom center no-repeat;
color: #a5a4a4;
font-style: italic;
margin: 30px;
padding: 30px;
text-align: center;
}

Yükleniyor

Bu yazıyı sitenizde/forumunuzda paylaşmak için aşağıdaki linkleri kullanabilirsiniz..

6 Mayıs 2022 Cuma

Blogger alıntı şablonları