Membuat Penanda atau Tag Khusus pada Teks di Blogger

Sebenarnya bingung saya mau ngasih judulnya apa karena lebih mirip seperti judul di atas lah tutorial yang akan saya share ke sahabat blogger kali ini. Fungsinya hampir sama dengan tag "blockquote" atau juga tag "pre".

• Demo

Bila anda tertarik setelah melihat demo atau gambar di atas, maka ikuti langkahnya di bawah ini.

1. Login Blogger

2. Template - Edit HTML

3. Simpan kode di bawah ini sebelum kode ]]></b:skin> atau </style>

.alert-message{position:relative;display:block;background-color:#f7f8fa;padding:20px;margin:20px 0;border-radius:2px;color:#39484d;}
.alert-message p{margin:0!important;padding:0;line-height:22px;font-size:13px;color:#39484d}
.alert-message span{font-size:14px!important}
.alert-message i{font-size:22px;text-align:left;display:inline-block;
position:absolute;right:0;top:0;padding:20px;opacity:0.8;}
.alert-message.success{background-color:#00acd6;color:#fff}
.alert-message.success a,.alert-message.success span{color:#fff}
.alert-message.alert{background-color:#0073b7;color:#fff}
.alert-message.alert a,.alert-message.alert span{color:#fff}
.alert-message.warning{background-color:#efa666;color:#fff}
.alert-message.warning a,.alert-message.warning span{color:#fff}
.alert-message.error{background-color:#f56c7e;color:#fff}
.alert-message.error a,.alert-message.error span{color:#fff}

4. Taruh kode Fontawesome di bawah ini sebelum kode </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Bila sudah ada pada template anda tidak perlu lagi memasang kode Fontawesome di atas

5. Simpan

Berikut untuk kode pemanggilnya yang di gunakan pada mode HTML artikel anda

/*----Success message----*/

<div class="alert-message success">
Success message : You successfully read this important message. <i class="fa fa-check-circle"></i>
</div>

  /*----Alert message-----*/

<div class="alert-message alert">
Alert message : This alert needs your attention. <i class="fa fa-info-circle"></i>
</div>

  /*----Warning message-----*/

<div class="alert-message warning">
Warning message : Warning! Best check your self. <i class="fa fa-exclamation-triangle"></i>
</div>

  /*----Error message-----*/

<div class="alert-message error">
Error message : Oh snap! Change a few things up. <i class="fa fa-exclamation-circle"></i>
</div>

Ganti teks yang bertanda di atas sesuai keinginan anda!

Yang bingung dengan caranya silahkan tuliskan di kolom komentar. Dan terimakasih sudah membaca artikel ini sekian dan terimakasih. Semoga bermanfaat.