Cara Membuat Quotes Seperti Google Qoutes di Blogger

Cara Membuat Quotes Seperti Google Qoutes di Blogger

1. Masuk ke blog  > Tema > Edit HTML

2. Letakkan kode berikut di atas ]]></b:skin> atau </style>

 
.info li a, .catatan li a, .peringatan li a{padding: 18px;
    padding-right: 82px;
    background-color: #008dff;}
.info ul{list-style: none;margin: 0; padding: 0}
.info li{display: inline; padding: 0 20px;margin-bottom: 15px; margin-top: 15px}
.info, .catatan, .peringatan {
line-height: 22px;    
min-height: 38px;
    padding-left: 10px;
    padding: 10px 12px 12px 68px;
    margin: 10px -28px;
    align-items: center;
    box-sizing: border-box;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(0.4,0,0.2,1);
    font-family: "Google Sans",Roboto,Arial,sans-serif;
    font-size: .875rem;
    letter-spacing: .0107142857em;
    align-items: center;
    border: 0;
    display: flex;
    flex: 1 0;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    transition-property: background-color
}
.info {  
    border-left: #ea8600 2px solid;
    background: #fef7e0;
color: #bf360c
}
.catatan {  
background: #e1f5fe;
color: #01579b
} 
.peringatan {  
background: #fce8e6;color: #d93025
}
.info:after{
content: "error";
position: absolute;
top: 0;
color: #bf360c;
margin: 11px -36px;
font: normal normal normal 20px/1 Material Icons
}
.catatan:after{
content: "star";
position: absolute;
top: 0;
color: #01579b;
margin: 11px -36px;
font: normal normal normal 20px/1 Material Icons
}
.peringatan:after{
content: "error";
position: absolute;
top: 0;
color: #d93025;
margin: 11px -36px;
font: normal normal normal 20px/1 Material Icons
}
 

3. Jika sudah lalu pilih Simpan Tema

4. Untuk menerapkannya di blog anda > buat postingan baru > pilih mode HTML > lalu letakkan kode berikut di dalamnya :

Untuk tampilan quote info, gunakan kode ini:

<div class='info'> Cara menciptakan block quotes catatan, isu dan peringatan pada blog, dengan tampilan icon dan warna yang berbeda </div><br />

Untuk tampilan klip catatan, gunakan kode ini:

<div class='catatan'> Cara menciptakan block quotes catatan, isu dan peringatan pada blog, dengan tampilan icon dan warna yang berbeda </div><br />

  

Untuk tampilan quote peringatan, gunakan kode ini:

<div class='peringatan'> Cara menciptakan block quotes catatan, isu dan peringatan pada blog, dengan tampilan icon dan warna yang berbeda </div><br />

5. Save

6. View Sample

info

Cara Membuat Quotes Seperti Google Qoutes di Blogger dengan tampilan icon dan warna yang berbeda

Catatan

Cara Membuat Quotes Seperti Google Qoutes di Blogger dengan tampilan icon dan warna yang berbeda

Peringatan

Cara Membuat Quotes Seperti Google Qoutes di Blogger dengan tampilan icon dan warna yang berbeda