HOW TO ADD ALERT MESSAGES TO BLOGGER POSTS [BLOGGER SHORTCODES]

HOW TO ADD ALERT MESSAGES TO BLOGGER POSTS [BLOGGER SHORTCODES]



INSTRUCTION TO FOLLOW:

  1. Go to Blogger Dashboard→Your Blog
  2. Click Template→Click Edit HTML tab
  3. Find anywhere inside template </style> or ]]></b:skin>
Now,copy the above CSS code and put it above ]]></b:skin>

CSS CODE:

/* CSS Shortcodes By UrduBloggingHub */
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;
padding:2px;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download {padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:&#39;Open Sans&#39;,sans-serif;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;transition:all 0.3s ease-out;}
.demo {background-color:#444;}
.download {background-color:#f53b3b;}
.demo:hover {background-color:#f53b3b;color:#fff;}
.download:hover {background-color:#444;color:#fff;}
.demo:before {content:&#39;\f135&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:&#39;\f019&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.first-letter{float:left;color:#f77c6a;font-size:75px;line-height:60px;padding-top:4px;padding-right:8px;padding-left:3px;font-family:Georgia}
.widget .post-body ul,.widget .post-body ol{line-height:1.5;font-weight:400}
.widget .post-body li{padding:0;line-height:1.5}
.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}
.fa-check-circle:before{content:&quot;\f058&quot;}
.fa-info-circle:before{content:&quot;\f05a&quot;}
.fa-exclamation-triangle:before{content:&quot;\f071&quot;}
.fa-exclamation-circle:before{content:&quot;\f06a&quot;}
#flippy {text-align:center;}
#flippy button {margin:10px auto;cursor:pointer;font-weight:700;font-size:14px;font-family:&#39;Open Sans&#39;,sans-serif;background-color:#444;color:#fff!important;padding:8px 12px!important;text-transform:uppercase;border:none;border-radius:2px;transition:all 0.3s ease-out;}
#flippy button:hover, #flippy button:focus {outline:none;background-color:#f53b3b;color:#fff;}
#flippanel {padding:1px;text-align:left;background:#fafafa;border:1px solid #e9e9e9;}
#flippanel {padding:24px;display:none;}
#flippanel img {background:#f5f5f5;margin:10px auto;}

  • Now,Save your template.
Almost you have done,but one more thing after installing this to your blog you should using fontawesome,if your not using any of fontawesome then put it to your blog.You can insert it as fallows;
  1. Go to Blogger Dashboard→Your Blog
  2. Template→Edit HTML
  3. Find anywhere </head>
Put below code just before it.

CODE:

<link  href= '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'  rel= "stylesheet"/>
Now,Save your template.
Now,whenever you want to add such alert messages to your posts put one of code according to your need in blogger POST HTML EDITOR!


<div class="alert-message success">success message : You successfully read this important message.<i class="fa fa-check-circle"></i></div><br />
<div class="alert-message alert">Alert message : This alert needs your attention.<i class="fa fa-info-circle"></i></div><br />
<div class="alert-message warning">Warning message : Warning! Best check yo self.<i class="fa fa-exclamation-triangle"></i></div><br />

<div class="alert-message error">Error message : Oh snap! Change a few things up.<i class="fa fa-exclamation-circle"></i></div><br />
Success message : You successfully Inserted this plugin to your blogger blog!

Comments

Post a Comment

இந்தப் பதிவு பற்றிய உங்கள் கருத்து எங்களுக்கு முக்கியம். எதுவானாலும் தயங்காம எழுதுங்க!

Popular posts from this blog

HOW TO ADD ANNOUNCEMENT STICKY NOTIFICATION BAR TO BLOGGER

Image
HOW TO ADD ANNOUNCEMENT STICKY NOTIFICATION BAR TO BLOGGER Adding this notification bar to blogger: Login to your  blogger dashboard  and  select your blog . Select  Layout  option and select  Add a gadget  option. Select  HTML/JavaScript  widget from the list. In the HTML/JavaScript widget paste  following code  and save it. Preview your blog to see the new changes. Note:  In the following code replace  red colored code  with your post titles and remove  #  symbols with links to these posts. CODE: <style> #wcnot-cont { top:0px; left:0px; z-index:9999999; position:fixed; width:100%; background:#222222; color:#ffffff; font:16px georgia; box-shadow:2px 2px 5px  #444444; -moz-box-shadow:2px 2px 5px  #444444; -web-kit-box-shadow:2px 2px 5px  #444444; -goog-ms-box-shadow:2px 2px 5px  #444444; } #wc-movtext { text-align:center; padding:8px; font-family:  Ve...
Keep reading

Hacking அறிந்தும் அறியாமலும் – பாகம் 2

Image
Hacking அறிந்தும் அறியாமலும் – பாகம் 2 ஹக்கிங் பற்றிய இந்த தொடரில், ஹக்கிங் என்றால் என்ன? என்பது பற்றியும் மற்றும் ஹக்கேர்ஸ் பற்றியும் கடந்த பதிவில் பார்த்தோம்.ஹக்கிங் அறிந்தும் அறியாமலும் – பாகம் 1 அதன் தொடர்ச்சியாக இன்று அனைவரும் கட்டாயம் அறிந்து வைத்திருக்க வேண்டிய சிலவற்றை பற்றி பார்க்கலாம். அதாவது தனிநபர் பாதுகாப்புக்கு அச்சுறுத்தல் விடும் ஹக்கிங் முறைகள், அவற்றிற்கான பாதுகாப்பு ஏற்பாடுகள் பற்றிய விடயங்களை தொடர்ந்து பார்க்கலாம். ஹக்கேர்ஸ்ஸைப் பொறுத்தவரையில் அவர்கள்  ஒரு தனிநபரின் இணையக்கணக்குகளின் மீதோ அல்லது அதையொத்த தனிநபர் தகவல்கள் மீதோ தாக்குதல் நடாத்துவதற்கு குறிப்பிட்டு சொல்லக்கூடிய ஒருசில வழிவகைகளை பயன்படுத்துகிறார்கள். அவை வருமாறு தனிநபர் கணக்குகள்/தகவல்கள் மீதான ஹக்கேர்ஸ்ஸின் தாக்குதல் வழிமுறைகள் 1. Phishing 2.Key Loggers 3.Social Engineering 4.Tap Napping இந்த மேற்குறிப்பிட்ட வழிமுறைகளையே தனிநபர் கணக்குகள்/தகவல்கள் மீதான தாக்குதல்களுக்கு இன்று அதிகம் ஹக்கேர்ஸ் பயன்படுத்துகின்றனர். இவற்றைப்பற்றியும் இதிலிருந்து எவ்வாறெம்மை பாதுகாத்துக...
Keep reading