Design By Lc Falcon

6 Mayıs 2022 Cuma

Blogger alıntı şablonları

5/06/2022 01:14:00 ÖS    Yorum yok

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

example 12 of blogger blockquote style

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

blogger blockquote example 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

blogger blockquote css for blogger example 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

example 4 of blockquote css

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 style exapme 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

css blockquote example 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

quote style example 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

example 7 blockquote css

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

example 9 css blockquotes

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

example 10 of blockquote css

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

example 11 css blockquote

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

13 example blockquote style css

.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

14 blockquote example

.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 css example 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

16 examples of blockquote styles 
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

17 example of blockquote css style

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

18 example of blockquote css style

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

19 blockquote example

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

20 blockquote css example

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;
}

Son güncelleme: 2022-06-09T00:34:28Z
WhatsApp uygulamasının yüklü olması gerekiyor
Yükleniyor

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

0 adet mesaj var:

Yorum Gönder

Yorumunuz için teşekkürler enkısa zamanda incelenip yayınlanacaktır.

 

Güncellenmiş Başlıklar

    Duyuru

    Dikkat!!!
    Bloğumuzda bulunan materyaller diğer
    kaynak siteler aracılığı ile çoğu
    denenmiş olup paylaşılması yararlı
    görülen paylaşımlardır. Her halukarda
    olası bir problem sonucunda blog yazarı
    sorumlu değildir tüm sorumluluk
    kullanana aittir.
    MandoTeam

    Bu ay en çok okunan

    • Ergenler ve ergen hissedenlerin hataları
      İşte o anlar yanlışsa düzeltin 500 kaza videosu. Niyetleri sadece acaba yapabilir miyim olan ergenler ve aniden gaza gelen erkekler her za...
    • Notepad++
      Notepad++ her kodu destekleyen program. Notepad++ C, C++, Java, C#, XML, HTML, PHP, Javascript, RC file, makefile, nfo, doxygen, ini dosya...
    • su akar yolunu bulur (zeynep dizdar)
      Su akar yolunu bulur (zeynep dizdar) Herkes layığıyla yaşarmış dediler  İşte ben buna te...
    • Windovs7 de Movie maker yok! (üzgün surat)
      Boşuna aramayın, Movie Maker Windows7 de yok. Bana bazı arkadaşlarım tarafından sorulan Movie Marker neden yok ne yapıcaz sorusuna yanıt o...
    MandoTeam Blog-Map