tag:blogger.com,1999:blog-62859885623914497842024-02-19T13:52:53.544+06:00Easy Tricks Easy But Important Tricks & TipsM. Limonhttp://www.blogger.com/profile/07103600535159878470noreply@blogger.comBlogger16125tag:blogger.com,1999:blog-6285988562391449784.post-72408303715961130172021-01-01T03:00:00.001+06:002021-01-01T03:05:11.478+06:00Make a spoiler simple attractive responsive for blogger using jQuery<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZLf-ARo78ptvBDoWxlow4Lurp7-jEuXnuKJGNdR0Rojt2jEp7vu6k9OSrPzXDy1lhadkC5yn-5bH2E3aRAcEkkRhSi-sT9QYk1qxGh76-gV92qhFVECwzXeKParCxufWOpz7T_7z1gd0/s0/Spoiler_LimonSeo.png" style="display: block; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="1365" data-original-width="2048" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZLf-ARo78ptvBDoWxlow4Lurp7-jEuXnuKJGNdR0Rojt2jEp7vu6k9OSrPzXDy1lhadkC5yn-5bH2E3aRAcEkkRhSi-sT9QYk1qxGh76-gV92qhFVECwzXeKParCxufWOpz7T_7z1gd0/s0/Spoiler_LimonSeo.png" /></a></div><br />
Hello friends! Howdy? It’s been a long time since i published a post. I don’t know why! But now i will try to post regularly. <div><br />
Spoiler is very cool and visitor attractive for your Site. A spoiler can be used for many terms it can be an useful utility for your BLOG. Plus it’s attractive and super responsive design will attract more visitors.</div><div>
<br />
<h2>Simply Follow These Steps</h2><div><br /></div>
First go to Blogger Dashboard > Select Your Blog > Theme > Edit HTML
<br />
Add this code before <mark></style></mark> or <mark>]]></b:skin></mark>.
<br />
<pre><code>
/* Spoiler Button By LimonSeo */
#soore-spoiler{display:inline-block;margin:15px auto;}#soore-spoiler button{display:inline-block;background:#292e34;color:#fff;padding:10px 53px;border-radius:6px;border:none;outline:0;}
#soore-spoiler-content{display:none;background:#f0f8ff;margin:10px auto;padding:15px;border-radius:6px;}
</code></pre>
<br />
Now add this <b>Javascript</b> before <mark></body></mark>.
<br />
<pre><code>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('#soore-spoiler').click(function(){
$('#soore-spoiler-content').slideToggle('normal');
})
});
//]]>
</script>
</code></pre>
<br />
<blockquote>
Note That! You will need <b>jQuery</b> Script to run the JS so if you don’t have install before <kbd></body></kbd>. If you have already installed Ignore.
</blockquote>
<br />
<pre><code>
<script async="async" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</code></pre>
<br />
Congratualtions You have successfully completed the installation process.
To Show the spoiler on post or page add the below code.
<br />
<pre><code>
<div id='soore-spoiler'>
<button>Open Spoiler</button>
</div>
<div id='soore-spoiler-content'>
Spoiler Content
</div>
</code></pre>
<br />
<h3>See The Demo If You Want!</h3>
<br />
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="https://codepen.io/LimonDzn/pen/abmqREV" rel="nofollow noopener" target="_blank">Watch Demo</a></li>
</ul>
</div>
<br />
So that was all. I will be back soon with another existing post. Thank You
</div>M. Limonhttp://www.blogger.com/profile/07103600535159878470noreply@blogger.com0tag:blogger.com,1999:blog-6285988562391449784.post-45382426633025977072019-08-02T12:52:00.004+06:002022-01-22T04:27:01.192+06:00How To Make A Cool NewsTicker Widget On Blogger<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0p059T9VglD7Q7Kb5xG9qTuqsUA8N8DNY16uh9Ju4mH_Hm1IPcnncHiGZSPvaNfdYNbZxL1B8TWO_Wm3_mF7wZ1D67tIUtXhifdaFiF61CdFIREi4oLdtpoCBz2bB7ONx0a2PHT384u8/s1600/20190802_120458.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1280" data-original-width="1280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0p059T9VglD7Q7Kb5xG9qTuqsUA8N8DNY16uh9Ju4mH_Hm1IPcnncHiGZSPvaNfdYNbZxL1B8TWO_Wm3_mF7wZ1D67tIUtXhifdaFiF61CdFIREi4oLdtpoCBz2bB7ONx0a2PHT384u8/s320/20190802_120458.jpg" /></a></div>
<br />
This time I am sharing a cool blogger widget <b>NewsTicker!</b> This cool widget inspired from a blog from Namina Kikky. We are using css html & a little bit of JS for this cool widget. So why waiting! Let's get started.<br />
<br /></div>
Go To Blogger > Click menu <b>Theme</b> Then Click <b>Edit HTML</b> > Add This CSS Before <kbd></head></kbd><br />
<br />
<pre><code><style type='text/css'>
/* Breaking News */
#breakingwrapper{position:relative;background-color:#fff;color:#ccc;display:block;margin:20px auto 0 auto;overflow:hidden;border-radius:5px;box-shadow:0 2px 3px -2px rgba(0,0,0,0.1)}#breakingnews{width:100%;max-width:990px;display:block;margin:0 auto;line-height:42px;height:42px;overflow:hidden;font-size:13px;padding:0}#breakingnews .tulisbreaking{background:#e74c3c;color:#fff;display:block;padding:0 15px;font-size:13px;font-weight:600;height:28px;line-height:28px;float:left;margin:7px 14px 0 7px;text-align:center;border-radius:3px}#recentbreaking{float:left;margin:0;font-size:13px;color:#222;font-weight:600}#recentbreaking ul,#recentbreaking li{list-style:none;margin:0;padding:0}#recentbreaking li a{color:#222}#recentbreaking li a:hover{color:#222;text-decoration:underline}.blog-date{display:inline-block;float:right;margin:0 20px 0 0;font-size:13px;border-radius:2px;cursor:pointer}#recentbreaking li i{margin:0 10px 0 0}
@media screen and (max-width:768px) {
#breakingwrapper{background-color:#e74c3c;color:#fff;margin:10px auto 20px auto;border-radius:0}#breakingnews{padding:0 20px;color:#fff;overflow:hidden;text-overflow:ellipsis}#recentbreaking{color:#fbc531;text-align:center;float:none;margin:0 auto}#breakingnews .tulisbreaking .breakhidden,#breakingnews .tulisbreaking{display:none}#recentbreaking li a,#recentbreaking li a:hover{color:#fff}}
</style></code></pre>
<br />
After That Add This JS Before <kbd></body></kbd><br />
<kbd><br /></kbd>
<pre><code><script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="<mark>https://www.easytricks.blogspot.com/</mark>",t=<mark>10</mark>;$.ajax({url:"/feeds/posts/default?alt=json-in-script&amp;max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#recentbreaking li:first").slideUp(function(){$(this).appendTo($("#recentbreaking ul")).slideDown()})}var n,r,a="",i=e.feed.entry;if(void 0!==i){a="<ul>";for(var l=0;l<i.length;l++){for(var s=0;s<i[l].link.length;s++)if("alternate"==i[l].link[s].rel){n=i[l].link[s].href;break}r=i[l].title.$t,a+='<li><i class="fa fa-check-square"></i><a href="'+n+'" target="_blank">'+r+"</a></li>"}a+="</ul>",$("#recentbreaking").html(a),setInterval(function(){t()},5e3)}else $("#recentbreaking").html("<span>There nothing here?</span>")},error:function(){$("#recentbreaking").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script></code></pre>
<br />
<blockquote>
Change the code marked with your blog address and change the number 10 according to the number of posts you want to display.</blockquote>
<br />
Then Add The Code Wherever You Want to Install The Newsticker Between <kbd><body></kbd> And <kbd></body></kbd><br />
<br />
<pre><code><div id='breakingwrapper'>
<div id='breakingnews'>
<span class='tulisbreaking'>News Update<span class='breakhidden'/></span>
<div id='recentbreaking'>Loading...</div>
<div class='blog-date'>
<script language='Javascript'>
var dayName = new Array(&quot;Sunday&quot;, &quot;Monday&quot;, &quot;Tuesday&quot;, &quot;Wednesday&quot;, &quot;Thursday&quot;, &quot;Friday&quot;, &quot;Saturday&quot;);
var monName = new Array(&quot;January&quot;, &quot;February&quot;, &quot;March&quot;, &quot;April&quot;, &quot;May&quot;, &quot;June&quot;, &quot;July&quot;, &quot;August&quot;, &quot;September&quot;, &quot;October&quot;, &quot;November&quot;, &quot;December&quot;);
var now = new Date();
document.write(&quot;&quot; + &quot; &quot; + dayName[now.getDay()] + &quot;,&quot; + &quot; &quot; + now.getDate() + &quot; &quot; + monName[now.getMonth()] + &quot;&quot;);
</script>
</div>
</div>
</div>
<div class='clear'/></code></pre>
<br />
After That Click <b>Save</b> Button And Your Done.
<br />
<br />
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="https://codepen.io/LimonDzn/full/VozQpV" rel="nofollow noopener" target="_blank">Result</a></li>
</ul>
</div>
<br />
Now your blog have a cool Newsticker.</div>
M. Limonhttp://www.blogger.com/profile/07103600535159878470noreply@blogger.com0tag:blogger.com,1999:blog-6285988562391449784.post-31741434209561790502019-08-01T15:25:00.000+06:002019-08-01T15:37:39.699+06:00Make A Cool Author Box Under Blogger Posts<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Hello Viewers It's Been A Long Time Since I Haven't Shared Any Post. Now I am Sharing A Post That Will Make Your Blogger Post Super Cool. Now Lets Get Started.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimlW0y3ZE-FkbRD-2OaEe_9QZD7JiWh2BrZ2HYuOOBiFHlI8AUjB_OxAD1y0JAOvi16ZOgG8bzagfFP0EC95RdyE5u-AFwjEN3HyMtsqURo1zuPj-NsQX9JfuBnI4R2Y85SgWhwxKDkOo/s1600/20190801_145121.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1280" data-original-width="1280" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimlW0y3ZE-FkbRD-2OaEe_9QZD7JiWh2BrZ2HYuOOBiFHlI8AUjB_OxAD1y0JAOvi16ZOgG8bzagfFP0EC95RdyE5u-AFwjEN3HyMtsqURo1zuPj-NsQX9JfuBnI4R2Y85SgWhwxKDkOo/s320/20190801_145121.jpg" width="320" /></a></div>
<br />
<span style="background-color: white; color: #212121; font-family: "roboto" , "arial" , sans-serif; font-size: 16px;">This wigdet is inspired by the Newspaper Wordpress theme, where you can see the example image below.</span><br />
<span style="background-color: white; color: #212121; font-family: "roboto" , "arial" , sans-serif; font-size: 16px;"><br /></span>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0CjbPA42o7PMYgKLdplKtj7lMJWqc0DHfBfgrDHK4lXP0NX_tVn9iuA1yISQWGuQbF06h7YyB3idIlrdMCGBmWchetNXoMm7uTKWf4BN30r2GRzlHszfkuhD5PAAK7ISwlSIRhcTfXASA/s1600/Author_Box_Wordpress_Simple.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="192" data-original-width="638" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0CjbPA42o7PMYgKLdplKtj7lMJWqc0DHfBfgrDHK4lXP0NX_tVn9iuA1yISQWGuQbF06h7YyB3idIlrdMCGBmWchetNXoMm7uTKWf4BN30r2GRzlHszfkuhD5PAAK7ISwlSIRhcTfXASA/s640/Author_Box_Wordpress_Simple.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Image By Bosjn</td></tr>
</tbody></table>
<span style="background-color: white; color: #212121; font-family: "roboto" , "arial" , sans-serif; font-size: 16px;"><br /></span>
<br />
<h3 style="background-color: white; color: #212121; font-family: "Google Sans", Arial, sans-serif; font-size: 20.8px; font-weight: 500; margin: 0px 0px 0.6em; max-height: 1e+07em; padding: 0px; transition: font-size 0.2s linear 0s;">
<span style="margin: 0px; max-height: 1e+07em; padding: 0px; vertical-align: inherit;">How to Make a Simple Author Box Follow The Steps ↓</span></h3>
<span style="background-color: white; color: #212121; font-family: "roboto" , "arial" , sans-serif; font-size: 16px; margin: 0px; max-height: 1e 07em; padding: 0px; vertical-align: inherit;"><span style="margin: 0px; max-height: 1e+07em; padding: 0px; vertical-align: inherit;">Open </span></span><b style="background-color: white; color: #212121; font-family: Roboto, Arial, sans-serif; font-size: 16px; margin: 0px; max-height: 1e+07em; padding: 0px;"><span style="margin: 0px; max-height: 1e+07em; padding: 0px; vertical-align: inherit;"><span style="margin: 0px; max-height: 1e+07em; padding: 0px; vertical-align: inherit;">Blogger</span></span></b><span style="background-color: white; color: #212121; font-family: "roboto" , "arial" , sans-serif; font-size: 16px; margin: 0px; max-height: 1e 07em; padding: 0px; vertical-align: inherit;"><span style="margin: 0px; max-height: 1e+07em; padding: 0px; vertical-align: inherit;"> > </span></span><b style="background-color: white; color: #212121; font-family: Roboto, Arial, sans-serif; font-size: 16px; margin: 0px; max-height: 1e+07em; padding: 0px;"><span style="margin: 0px; max-height: 1e+07em; padding: 0px; vertical-align: inherit;"><span style="margin: 0px; max-height: 1e+07em; padding: 0px; vertical-align: inherit;">Dashboard</span></span></b><span style="background-color: white; color: #212121; font-family: "roboto" , "arial" , sans-serif; font-size: 16px; margin: 0px; max-height: 1e 07em; padding: 0px; vertical-align: inherit;"><span style="margin: 0px; max-height: 1e+07em; padding: 0px; vertical-align: inherit;"> > </span></span><b style="background-color: white; color: #212121; font-family: Roboto, Arial, sans-serif; font-size: 16px; margin: 0px; max-height: 1e+07em; padding: 0px;"><span style="margin: 0px; max-height: 1e+07em; padding: 0px; vertical-align: inherit;"><span style="margin: 0px; max-height: 1e+07em; padding: 0px; vertical-align: inherit;">Theme</span></span></b><span style="background-color: white; color: #212121; font-family: "roboto" , "arial" , sans-serif; font-size: 16px; margin: 0px; max-height: 1e 07em; padding: 0px; vertical-align: inherit;"><span style="margin: 0px; max-height: 1e+07em; padding: 0px; vertical-align: inherit;"> > </span></span><b style="background-color: white; color: #212121; font-family: Roboto, Arial, sans-serif; font-size: 16px; margin: 0px; max-height: 1e+07em; padding: 0px;"><span style="margin: 0px; max-height: 1e+07em; padding: 0px; vertical-align: inherit;"><span style="margin: 0px; max-height: 1e+07em; padding: 0px; vertical-align: inherit;">Edit HTML</span></span></b><br />
<b style="background-color: white; color: #212121; font-family: Roboto, Arial, sans-serif; font-size: 16px; margin: 0px; max-height: 1e+07em; padding: 0px;"><span style="margin: 0px; max-height: 1e+07em; padding: 0px; vertical-align: inherit;"><span style="margin: 0px; max-height: 1e+07em; padding: 0px; vertical-align: inherit;"><br /></span></span></b>
<b style="background-color: white; color: #212121; font-family: Roboto, Arial, sans-serif; font-size: 16px; margin: 0px; max-height: 1e+07em; padding: 0px;"><span style="margin: 0px; max-height: 1e+07em; padding: 0px; vertical-align: inherit;"><span style="margin: 0px; max-height: 1e+07em; padding: 0px; vertical-align: inherit;"><br /></span></span></b></div>
<pre><code>/* AUTHOR POST PROFILE */
.author-profile {overflow: hidden;margin-bottom: 10px;padding: 24px;line-height: 1.5;border: 1px solid #ededed;}
.author-profile-url {font-size: 11px;font-style: italic;line-height: 21px;margin-bottom: 6px;}
.author-profile-url a {color: #444444;}
.author-profile-url a:hover {color: #2ec4f2;}
.author-profile img {border: 0;padding: 2px;width: 96px;float: left;margin-right: 15px;}
.author-profile > span {font-size: 14px;color: #222;}
.author-profile a.g-profile {font-weight: 500;color: #222222;font-size: 15px;margin-bottom: 5px;display: inline-block;}
.web-author-url a:hover, .author-profile a.g-profile:hover {color: #4db2ec;}
.web-author-url {font-size: 11px;font-style: italic;line-height: 21px;margin-bottom: 6px;}
.web-author-url a {color: #444;}
.author-social {margin-bottom: -5px;}
.social-links li {list-style: none!important;float:left;}
.social-links a {border-bottom:none;}
.social-links li a {font-size:18px;color: #222;width: auto;min-width: 18px;height: auto;margin-right: 15px;}
/* SVG ICON SOSIAL MEDIA */
.author-profile a.g-profile:after, .comments .comments-content .icon.blog-author:after {
content:'';width:15px; height:15px; vertical-align:middle;display:inline-block;transition:all 0.3s ease;background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z' fill='%234db2ec'></path></svg>") no-repeat center center;}
.social-links li a.fcb:before {
content:'';width:16px; height:16px; vertical-align:middle; display:inline-block;transition:all 0.3s ease; background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z' fill='%23000'></path></svg>") no-repeat center center;}
.social-links li a.twt:before {
content:'';width:20px; height:20px; vertical-align:middle;display:inline-block;transition:all 0.3s ease;
background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z' fill='%23000'></path></svg>") no-repeat center center;}
.social-links li a.wa:before {content:'';width:20px; height:20px; vertical-align:middle; display:inline-block;transition:all 0.3s ease; background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z' fill='%23000'></path></svg>") no-repeat center center;}
.social-links li a.igicon:before {content:'';width:20px; height:20px; vertical-align:middle; display:inline-block;transition:all 0.3s ease; background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z' fill='%23000'></path></svg>") no-repeat center center;}
.social-links li a.ytb:before {content:'';width:20px; height:20px; vertical-align:middle; display:inline-block;transition:all 0.3s ease; background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M3.42,12C3.42,10.76 3.69,9.58 4.16,8.5L8.26,19.72C5.39,18.33 3.42,15.4 3.42,12M17.79,11.57C17.79,12.3 17.5,13.15 17.14,14.34L16.28,17.2L13.18,8L14.16,7.9C14.63,7.84 14.57,7.16 14.11,7.19C14.11,7.19 12.72,7.3 11.82,7.3L9.56,7.19C9.1,7.16 9.05,7.87 9.5,7.9L10.41,8L11.75,11.64L9.87,17.27L6.74,8L7.73,7.9C8.19,7.84 8.13,7.16 7.67,7.19C7.67,7.19 6.28,7.3 5.38,7.3L4.83,7.29C6.37,4.96 9,3.42 12,3.42C14.23,3.42 16.27,4.28 17.79,5.67H17.68C16.84,5.67 16.24,6.4 16.24,7.19C16.24,7.9 16.65,8.5 17.08,9.2C17.41,9.77 17.79,10.5 17.79,11.57M12.15,12.75L14.79,19.97L14.85,20.09C13.96,20.41 13,20.58 12,20.58C11.16,20.58 10.35,20.46 9.58,20.23L12.15,12.75M19.53,7.88C20.2,9.11 20.58,10.5 20.58,12C20.58,15.16 18.86,17.93 16.31,19.41L18.93,11.84C19.42,10.62 19.59,9.64 19.59,8.77L19.53,7.88M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,21.54C17.26,21.54 21.54,17.26 21.54,12C21.54,6.74 17.26,2.46 12,2.46C6.74,2.46 2.46,6.74 2.46,12C2.46,17.26 6.74,21.54 12,21.54Z' fill='%23000'></path></svg>") no-repeat center center;
}
width: 96px;
float: left;
margin-right: 15px;
}
.author-profile > span {
font-size: 14px;
color: #222;
}
.author-profile a.g-profile {
font-weight: 500;
color: #333333;
font-size: 15px;
margin-bottom: 5px;
display: inline-block;
}
.author-profile a.g-profile:after {
content: "\f058";
font-family: FontAwesome;
font-style: normal;
font-weight: 700;
font-size: 12px;
text-decoration: inherit;
padding-right: 4px;
color: #55ACEE;
}
.web-author-url a:hover, .author-profile a.g-profile:hover {
color: #0066cc;
}
.web-author-url {
font-size: 11px;
font-style: italic;
line-height: 21px;
margin-bottom: 6px;
}
.web-author-url a {
color: #444;
}
.author-social {
margin-bottom: -5px;
}
.social-links li {
list-style: none!important;
float:left;
}
.social-links a {
border-bottom:none;
}
.social-links li a {
font-size: 18px;
color: #222;
width: auto;
min-width: 18px;
height: auto;
margin-right: 15px;
}
.social-links li a:hover {
color: #666666;
}
.social-links li a.fcb:hover {
color:#3b5998;
}
.social-links li a.twt:hover {
color:#1BB2E9;
}
.social-links li a.ytb:hover {
color:#ED3F41;
}
.social-links li a.wa:hover {
color:#25d366;
}
.social-links li a.igicon:hover {
color:#527fa4;
}
@media only screen and (max-width:800px) {
.author-profile img {
width: 76px;
float: none;
margin: 0;
text-align: center;
}
.author-social, .author-profile {
text-align: center;
}
.social-links li {
display: inline-block;
float: none;
}</code></pre>
<br />
Add This CSS Under <mark></style></mark></div>
or <mark></:b skin></mark><br />
<div class="clear">
<br />
<span style="background-color: white; color: #212121; font-family: "roboto" , "arial" , sans-serif; font-size: 16px;">After that, copy the HTML code in the box below.</span><br />
<span style="background-color: white; color: #212121; font-family: "roboto" , "arial" , sans-serif; font-size: 16px;"><br /></span>
<span style="background-color: white; color: #212121; font-family: "roboto" , "arial" , sans-serif; font-size: 16px;"><br /></span></div>
</div>
<pre><code><div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<img class='lazy' src='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQxVGRSs4AQi3Kz-qqZUuk9cK0BdYsAmWOfA_EZeCEjc_SNdUY4' itemprop='image' width='90px'/>
<div>
<a class='g-profile' href='https://github.com/lidesign' itemprop='url' rel='author' title='author profile'>
<span itemprop='name'>Easy Tricks</span>
</a>
</div>
<div class='web-author-url'>
<a href='/' itemprop='url' rel='blog' title='author blog'>https://easytrks.blogspot.com/</a>
</div>
<span itemprop='description'>I am the author's editor of this blog, and really like writing and also reading information about the world of the Internet.</span>
<div class='author-social' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Organization'>
<span class='social-links'>
<li><a class='fcb' href='https://www.facebook.com/bthemebd' rel='nofollow' target='_blank' title='Facebook'></a></li>
<li><a class='twt' href='https://twitter.com/LimonMostafa' rel='nofollow' target='_blank' title='Twitter'></a></li>
<li><a class='wa' href='https://id.pinterest.com/nmlbd' rel='nofollow' target='_blank' title='Vimeo'></a></li>
<li><a class='igicon' href='https://google.com' rel='nofollow' target='_blank' title='VKontake'></a></li>
<li><a class='ytb' href='https://www.youtube.com/#' rel='nofollow' target='_blank' title='Youtobe'></a></li>
</span>
</div>
</div></code></pre>
<pre><code>
</code></pre>
<span style="background-color: white; color: #212121; font-family: "roboto" , "arial" , sans-serif; font-size: 16px; margin: 0px; max-height: 1e 07em; padding: 0px; vertical-align: inherit;"><span style="margin: 0px; max-height: 1e+07em; padding: 0px; vertical-align: inherit;">Place this HTML code in the <div class = 'post-footer'> section, usually each blogger template is different, just look for something similar to the code <div class = 'post-footer'>.</span></span><br />
<span style="background-color: white; color: #212121; font-family: "roboto" , "arial" , sans-serif; font-size: 16px; margin: 0px; max-height: 1e 07em; padding: 0px; vertical-align: inherit;"><span style="margin: 0px; max-height: 1e+07em; padding: 0px; vertical-align: inherit;"><br /></span></span>
<span style="background-color: white; color: #212121; font-family: "roboto" , "arial" , sans-serif; font-size: 16px; margin: 0px; max-height: 1e 07em; padding: 0px; vertical-align: inherit;"><span style="margin: 0px; max-height: 1e+07em; padding: 0px; vertical-align: inherit;">The Result Will Be Like This</span></span><br />
<span style="background-color: white; color: #212121; font-family: "roboto" , "arial" , sans-serif; font-size: 16px; margin: 0px; max-height: 1e 07em; padding: 0px; vertical-align: inherit;"><span style="margin: 0px; max-height: 1e+07em; padding: 0px; vertical-align: inherit;"><br /></span></span>
<br />
<div style="text-align: center;"><ul class="button"><li><a class="demo" href="https://codepen.io/LimonDzn/pen/rXwxEG"/" rel="nofollow noopener" target="_blank">Live Preview <I class='fa fa-eye'></I></a></li>
</ul></div>
<div class="clear">
<br />
<blockquote class="tr_bq">
Note! Don't Forget To Change The Social Links With your Own Links. It Is Very Important .</blockquote>
Thanks .<br />
<br />
<span style="font-size: xx-small;"><i>This Post Is Based On Bosjin Blog author section .</i></span> </div>
</div>
M. Limonhttp://www.blogger.com/profile/07103600535159878470noreply@blogger.com0tag:blogger.com,1999:blog-6285988562391449784.post-23663653022331076122019-05-11T13:40:00.001+06:002019-08-01T14:55:28.493+06:00Helio Premium Version Responsive Blogger Template <div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="background-color: white; color: #333333; font-family: "google sans"; font-size: 16px;">Free download </span><span style="background-color: white; border: 0px; color: #333333; font-family: "google sans"; font-size: 16px; font-stretch: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Helio Grid Style Blogger Template Premium Version</span><span style="background-color: white; color: #333333; font-family: "google sans"; font-size: 16px;">. Helio is the ultra smart and modern gird style blogger template for Blogspot. If you're looking for a nice and smooth responsive blogger template, then try the Helio Blogger template by MS Design. Free download premium blogger template Helio.</span><br />
<span style="background-color: white; color: #333333; font-family: "google sans"; font-size: 16px;"><b>This Template I Share Here Is MsdedignBD Version.</b></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlYa3ckvi6F-rE8Fy9f85fqrX3nVPAECF8NobwDQh4X6OQloZs0oHl5pL1Xbntp-042giXi5Avd2VSFmvDpgbtXbBiAo5O42p0sbRZAIvtnyadNniGHARD51AZNSGzMnKUCgBWk8wqUPzV/w800/Helio-Blogger-Template.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="390" data-original-width="700" height="356" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlYa3ckvi6F-rE8Fy9f85fqrX3nVPAECF8NobwDQh4X6OQloZs0oHl5pL1Xbntp-042giXi5Avd2VSFmvDpgbtXbBiAo5O42p0sbRZAIvtnyadNniGHARD51AZNSGzMnKUCgBWk8wqUPzV/w800/Helio-Blogger-Template.png" width="640" /></a></div>
<span style="background-color: white; color: #333333; font-family: "google sans"; font-size: 16px;"><b><br /></b></span>
<span style="color: #333333; font-family: "google sans";"><span style="background-color: white;">Let's See It's Features. </span></span><br />
<span style="color: #333333; font-family: "google sans";"><span style="background-color: white;"><br /></span></span>
<span style="color: #333333; font-family: "google sans";"><span style="background-color: white;"><br /></span></span></div>
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Features</th> <th>Availability</th> </tr>
<tr> <td>Responsive</td> <td>True <a href="http://www.responsinator.com/?url=http%3A%2F%2Forigin-btemplate.blogspot.com" rel="nofollow noopener" target="_blank">Cek</a></td> </tr>
<tr> <td>Google Testing Tool Validator</td> <td>True <a href="https://search.google.com/structured-data/testing-tool#url=http%3A%2F%2Forigin-btemplate.blogspot.com" rel="nofollow noopener" target="_blank">Cek</a></td> </tr>
<tr> <td>SEO Friendly</td> <td>True <a href="http://chkme.com/seo-origin-btemplate.blogspot.com" rel="nofollow noopener" target="_blank">Cek</a></td> </tr>
<tr> <td>Mobile Friendly</td> <td>True <a href="https://www.google.com/webmasters/tools/mobile-friendly/?url=http%3A%2F%2Forigin-btemplate.blogspot.com" target="_blank">Cek</a></td> </tr>
<tr> <td>Dynamic Heading</td> <td>True</td> </tr>
<tr> <td>Adsense</td> <td>True</td> </tr>
<tr> <td>Valid Schema.org</td> <td>True</td> </tr>
<tr> <td>High CTR</td> <td>True</td> </tr>
<tr> <td>Personal Blog</td> <td>True</td> </tr>
<tr> <td>2 Column</td> <td>True</td> </tr>
<tr> <td>Auto Read More with Thumbnail</td> <td>True</td> </tr>
<tr> <td>Responsive Ad Slot</td> <td>True</td> </tr>
<tr> <td>Breadcrumbs</td> <td>True</td> </tr>
<tr> <td>Footer Link</td> <td>True</td> </tr>
<tr> <td>Related Posts with Thumb</td> <td>True</td> </tr>
<tr> <td>Search Box</td> <td>True</td> </tr>
<tr> <td>Social Share Button</td> <td>True</td> </tr>
<tr> <td>Responsive Sticky Navigation</td> <td>True</td> </tr>
<tr> <td>Back to Top Button</td> <td>True</td> </tr>
<tr> <td>Shortcodes</td> <td>True</td> </tr>
<tr> <td>Unlimited Page Numbered</td> <td>True</td> </tr>
<tr> <td>Recent Post with Thumbnail</td> <td>True</td> </tr>
<tr> <td>Custom Contact Form Widget</td> <td>True</td> </tr>
<tr> <td>Responsive Sitemap Widget</td> <td>True</td> </tr>
<tr> <td>4 Variant Template</td> <td>Premium</td> </tr>
</tbody> </table>
<br />
You Can Download It From Below.<br />
<br /></div>
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="https://helio-templatemark.blogspot.com/" rel="nofollow noopener" target="_blank">Demo</a></li>
<li><a class="download" href="https://safelinksbd.blogspot.com/2013/11/make-perfect-dessert-in-ten-mins.html#?o=cf18acbd7448a2cea3f9fd9998b757f102ef0355c68ca9f43face0a2cdade3e48131cf6284c7dce25515b48089860117c59357488e375b5f8d7fc8997b237e506c52194034baf221" rel="nofollow noopener" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear">
</div>
<blockquote class="tr_bq">
Note If You Can't Find The Download Link, Try Uc Browser, Uc Mini or Google Chrome.Thank You.</blockquote>
</div>
M. Limonhttp://www.blogger.com/profile/07103600535159878470noreply@blogger.com0tag:blogger.com,1999:blog-6285988562391449784.post-39571649806941832132019-04-02T12:08:00.000+06:002019-04-02T12:08:00.519+06:00Social Media Widget For Blogger <div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUm6xGYnMYmSH1TIal-rI5xXmNZL1hCiPz8ogW1Qvx0o7XICxJkPr-eTCgXybD9w_ih4NEA0O-uj97KGnQxbWWS-fqAcVeebf-DJMs8e31cD_VEhHsZPKXiWyiPXgsPGbLgaSI40gpI5Q/s1600/20190402_012118.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1280" data-original-width="1280" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUm6xGYnMYmSH1TIal-rI5xXmNZL1hCiPz8ogW1Qvx0o7XICxJkPr-eTCgXybD9w_ih4NEA0O-uj97KGnQxbWWS-fqAcVeebf-DJMs8e31cD_VEhHsZPKXiWyiPXgsPGbLgaSI40gpI5Q/s320/20190402_012118.jpg" width="320" /></a></div>
<h2 style="text-align: left;">
Hello Bloggers Today I Am Going To Show You How To Add A Cool Social Media Widget On Blogger.</h2>
<div>
So Follow The Article. </div>
<div>
<br /></div>
<div>
<span style="color: #ea9999;">1st Method :</span><br />
<br /></div>
<div>
<b>Go To Blogger.com > Theme > Edit Html > Add The Css Code Before <kbd></style></kbd></b></div>
</div>
<br />
<pre><code>#socialblock{overflow:hidden;margin:0 0 10px 0}
#socialblock h2{margin:0 auto 4px auto}
#socialblock .vam_social{margin-left:-.5%;margin-right:-.5%}
#socialblock .vam_social:before,.vam_social:after{content:"";display:table}
#socialblock .vam_social:after{clear:both}
#socialblock .vam_social .scl_social{margin:0 .5% 1%;width:32.3%;float:left;text-align:center;background:#111;border:1px solid rgba(0,0,0,0.03);transition:all .3s}
#socialblock .vam_social .scl_social.facebookx{background:#3e64ad}#socialblock .vam_social .scl_social.twitterx{background:#58ccff}#socialblock .vam_social .scl_social.bloggerx{background:#f79738}#socialblock .vam_social .scl_social.instagramx{background:#4d749f}#socialblock .vam_social .scl_social.googlex{background:#dd4b39}#socialblock .vam_social .scl_social.youtubex{background:#e62119}
#socialblock .vam_social .scl_social.facebookx:hover{background:#2d4980}#socialblock .vam_social .scl_social.twitterx:hover{background:#4aaeda}#socialblock .vam_social .scl_social.bloggerx:hover{background:#d78432}#socialblock .vam_social .scl_social.instagramx:hover{background:#3c5d81}#socialblock .vam_social .scl_social.googlex:hover{background:#bf3c2c}#socialblock .vam_social .scl_social.youtubex:hover{background:#c71f18}
#socialblock .vam_social .scl_social a{position:relative;overflow:hidden;display:block;color:#fff;padding:22px 5px}
#socialblock .vam_social .scl_social a:before{content:'';position:absolute;left:0;right:0;bottom:0;top:0;background-image:linear-gradient(150deg,rgba(0,0,0,0.02) 45%,rgba(255,255,255,.12) 45%);transition:all .6s}
#socialblock .vam_social .scl_social:hover a:before{transform:rotate(-30deg) scale(1.3);}
#socialblock .vam_social .scl_social span{display:block}
#socialblock .vam_social .scl_social span.app_icon i{font-size:24px;margin-bottom:5px}
#socialblock .vam_social .scl_social span.app_type{font-size:13px;margin:5px auto 0 auto}
#socialblock h2,#Label1 h2{background:#1abc9c}</code></pre>
<br />
<b>After Adding The Css > Add This Html Code Where You Wanna Install The Widget.</b><br />
<b><br /></b></div>
<code></code><br />
<pre><code><div id='socialblock'>
<div class='vam_social'>
<div class='scl_social facebookx'>
<a href='fb.com/myabdurrahim.id' rel='nofollow' target='_blank' title='Like our Facebook'>
<span class='app_icon'><i class='fa fa-facebook'></i></span>
<span class='app_type'>Facebook</span>
</a>
</div>
<div class='scl_social twitterx'>
<a href='twitter.com/abdurrahim_ID' rel='nofollow' target='_blank' title='Follow our Twitter'>
<span class='app_icon'><i class='fa fa-twitter'></i></span>
<span class='app_type'>Twitter</span>
</a>
</div>
<div class='scl_social bloggerx'>
<a href='https://www.blogger.com/follow-blog.g?blogID=7216711388501110503' rel='nofollow' target='_blank' title='Join our Site'>
<span class='app_icon'><i class='fa fa-user'></i></span>
<span class='app_type'>Blogger</span>
</a>
</div>
<div class='scl_social googlex'>
<a href='https://plus.google.com/u/0/110857132806605497220' rel='nofollow' target='_blank' title='Get in touch'>
<span class='app_icon'><i class='fa fa-google-plus'></i></span>
<span class='app_type'>Google+</span>
</a>
</div>
<div class='scl_social instagramx'>
<a href='instagram.com/abdurrahim_id' rel='nofollow' target='_blank' title='Follow our Instagram'>
<span class='app_icon'><i class='fa fa-instagram'></i></span>
<span class='app_type'>Instagram</span>
</a>
</div>
<div class='scl_social youtubex'>
<a href='https://www.youtube.com/channel/UCnUzeQMof2aHNJOveCY9eWQ' rel='nofollow' target='_blank' title='Visit our Channel'>
<span class='app_icon'><i class='fa fa-youtube'></i></span>
<span class='app_type'>Youtube</span>
</a>
</div>
</div>
</div></code></pre>
</div>
<br />
<span style="color: #e06666;">2nd Method :</span><br />
<br />
<b>This Is Easy Method. Just Go To Blogger > Layout > Add Widget > Html / Javascript & Add The Code.</b><br />
<b><br /></b>
<b><br /></b></div>
<code></code><br />
<pre><code><style type='text/css'>
/* css by EasyTrks*/
#socialblock{overflow:hidden;margin:0 0 10px 0}
#socialblock h2{margin:0 auto 4px auto}
#socialblock .vam_social{margin-left:-.5%;margin-right:-.5%}
#socialblock .vam_social:before,.vam_social:after{content:"";display:table}
#socialblock .vam_social:after{clear:both}
#socialblock .vam_social .scl_social{margin:0 .5% 1%;width:32.3%;float:left;text-align:center;background:#111;border:1px solid rgba(0,0,0,0.03);transition:all .3s}
#socialblock .vam_social .scl_social.facebookx{background:#3e64ad}#socialblock .vam_social .scl_social.twitterx{background:#58ccff}#socialblock .vam_social .scl_social.bloggerx{background:#f79738}#socialblock .vam_social .scl_social.instagramx{background:#4d749f}#socialblock .vam_social .scl_social.googlex{background:#dd4b39}#socialblock .vam_social .scl_social.youtubex{background:#e62119}
#socialblock .vam_social .scl_social.facebookx:hover{background:#2d4980}#socialblock .vam_social .scl_social.twitterx:hover{background:#4aaeda}#socialblock .vam_social .scl_social.bloggerx:hover{background:#d78432}#socialblock .vam_social .scl_social.instagramx:hover{background:#3c5d81}#socialblock .vam_social .scl_social.googlex:hover{background:#bf3c2c}#socialblock .vam_social .scl_social.youtubex:hover{background:#c71f18}
#socialblock .vam_social .scl_social a{position:relative;overflow:hidden;display:block;color:#fff;padding:22px 5px}
#socialblock .vam_social .scl_social a:before{content:'';position:absolute;left:0;right:0;bottom:0;top:0;background-image:linear-gradient(150deg,rgba(0,0,0,0.02) 45%,rgba(255,255,255,.12) 45%);transition:all .6s}
#socialblock .vam_social .scl_social:hover a:before{transform:rotate(-30deg) scale(1.3);}
#socialblock .vam_social .scl_social span{display:block}
#socialblock .vam_social .scl_social span.app_icon i{font-size:24px;margin-bottom:5px}
#socialblock .vam_social .scl_social span.app_type{font-size:13px;margin:5px auto 0 auto}
#socialblock h2,#Label1 h2{background:#1abc9c}
/* www.easytrks.blogspot.com */
</style>
<div id='socialblock'>
<div class='vam_social'>
<div class='scl_social facebookx'>
<a href='https://fb.com/btemplatesBD' rel='nofollow' target='_blank' title='Like our Facebook'>
<span class='app_icon'><i class='fa fa-facebook'></i></span>
<span class='app_type'>Facebook</span>
</a>
</div>
<div class='scl_social twitterx'>
<a href='twitter.com/LimonMostafa' rel='nofollow' target='_blank' title='Follow our Twitter'>
<span class='app_icon'><i class='fa fa-twitter'></i></span>
<span class='app_type'>Twitter</span>
</a>
</div>
<div class='scl_social bloggerx'>
<a href='https://www.blogger.com/follow-blog.g?blogID=7216711388501110503' rel='nofollow' target='_blank' title='Join our Site'>
<span class='app_icon'><i class='fa fa-user'></i></span>
<span class='app_type'>Blogger</span>
</a>
</div>
<div class='scl_social googlex'>
<a href='https://plus.google.com/u/0/110857132806605497220' rel='nofollow' target='_blank' title='Get in touch'>
<span class='app_icon'><i class='fa fa-google-plus'></i></span>
<span class='app_type'>Google+</span>
</a>
</div>
<div class='scl_social instagramx'>
<a href='https://instagram.com/nm.limon' rel='nofollow' target='_blank' title='Follow our Instagram'>
<span class='app_icon'><i class='fa fa-instagram'></i></span>
<span class='app_type'>Instagram</span>
</a>
</div>
<div class='scl_social youtubex'>
<a href='https://www.youtube.com/channel/UCnUzeQMof2aHNJOveCY9eWQ' rel='nofollow' target='_blank' title='Visit our Channel'>
<span class='app_icon'><i class='fa fa-youtube'></i></span>
<span class='app_type'>Youtube</span>
</a>
</div>
</div>
</div></code></pre>
</div>
<blockquote class="tr_bq">
Don't Forgot To Change The Social Links To Your Social Links. It's Very Important To Change Those Links.</blockquote>
<i>Thank You. This Tutorial Is Based On <u>Simplify 2 </u>Blogger Template Social Widget.</i> </div>
M. Limonhttp://www.blogger.com/profile/07103600535159878470noreply@blogger.com0tag:blogger.com,1999:blog-6285988562391449784.post-49648815063683271182019-03-27T11:19:00.000+06:002019-03-27T11:19:30.424+06:00How to Speedup your Blogger with Image Lazy Load Script<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCxIGLtybI2XmONyd7JFXYGL1wHTkJOiixY8QFKEL5QGneUH3gY6p6O-33yLou5A0lyJaU9Vh6z24rutiFntnki3iTBZpspEB9zdUdgcSSLtq4uY2kVfEqakN2Pe9mUBKYWuCKiGyIV78/s1600/PicsArt_03-25-10.16.33.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1600" data-original-width="1600" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCxIGLtybI2XmONyd7JFXYGL1wHTkJOiixY8QFKEL5QGneUH3gY6p6O-33yLou5A0lyJaU9Vh6z24rutiFntnki3iTBZpspEB9zdUdgcSSLtq4uY2kVfEqakN2Pe9mUBKYWuCKiGyIV78/s320/PicsArt_03-25-10.16.33.jpg" width="320" /></a></div>
<br />
<br /></div>
Hello blogger, Today I will share simple tips on how to Speedup your Blogger with Image Lazy Load Script. This Tips work on all blog templates, This Tips will make your blog Loading fast.<br />
<br />
<b>Why choose lazy loading pictures at all?</b><br />
<b><br /></b>
Lazy Loading defers the loading of a picture that's not required on the page in real time. a picture that's not visible to the user once the page masses, is loaded later once the user scrolls and therefore the image really come into view. If the user ne'er scrolls, a picture that's not visible to the user ne'er gets loaded.<br />
<br />
<b>1. Performance Improvement</b><br />
<br />
The is that the most significant one for you as a web site administrator – higher performance and cargo time. With lazy loading, you're reducing the number of pictures that require to be loaded on the page at the start. Lesser resource requests mean lesser bytes to transfer and lesser competition for the restricted network information measure accessible to the user. This ensures that the device is ready to transfer and method the remaining resources abundant quicker. Hence, the page becomes usable abundant earlier compared to the case while not lazy loading.<br />
<b><br />
</b> <b>2. value reduction</b><br />
<br />
The second profit for you is in terms of delivery prices. Image delivery, or delivery of the other quality, is sometimes charged on the idea of the number of bytes transferred. As mentioned earlier, with lazy loading, if the image isn't visible, it ne'er get loaded. Thus, you scale back the overall bytes delivered on the page. particularly for users that bounce off the page or move solely with the highest portion of the page. This reduction in bytes transferred from your delivery network reduces delivery prices. this can become a lot of apparent as we have a tendency to explore lazy loading within the returning sections.<br />
<br />
<b>How to Install Lazy Load on your blogger?</b><br />
<b><br />
</b> Login to blogger.com > Theme > Html Editor and find this code </body>.<br />
<br />
Add this code before </body> code and save your template.<br />
<br />
<pre data-codetype="HTMLku" title="<O4U>"><code class="language-javascript hljs"><script type='text/javascript'>
//<![CDATA[
// Lazy Load
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container:window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8u2Kk4wtEUISFaMELyKvpXnvRT-1AneFPaDY-gHBDtlLxJ_lAmuHz1D46o99EhipLHuVZtPbndc3R8vi3sBAATmrJhT9EBdi1CgWGtOSTUiEIE3Lvb1QZgWTz3Mt6mRyiyuh8U3996x41/s1600/Loadingsome.gif",effect:"fadeIn",threshold:"0"})});
//]]>
</script></code></pre>
<br />
when done, save your template then refresh your blogger, Good luck.</div>
M. Limonhttp://www.blogger.com/profile/07103600535159878470noreply@blogger.com0tag:blogger.com,1999:blog-6285988562391449784.post-87909724516870445092019-03-19T13:21:00.002+06:002019-03-19T13:21:28.750+06:00Install Custom Stats Widget for Blogger<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDLrjcQ16_yyyr3G7lH1Q7giQsqGePlBX8qVfZRSDRU5WV0N-fjfiQ_jC5F8kbFbJYiwYB4uTQPoh7t7tn_109pEb1dxXMl2sKrTNYJed9WaqcLzJ65ccFJadbjAtawxBk05FAzK4jls4/s1600/Custom-stats-widget-for-blogger%257E2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="271" data-original-width="600" height="144" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDLrjcQ16_yyyr3G7lH1Q7giQsqGePlBX8qVfZRSDRU5WV0N-fjfiQ_jC5F8kbFbJYiwYB4uTQPoh7t7tn_109pEb1dxXMl2sKrTNYJed9WaqcLzJ65ccFJadbjAtawxBk05FAzK4jls4/s320/Custom-stats-widget-for-blogger%257E2.png" width="320" /></a></div>
<br />
<span style="background-color: white; color: #333333; font-family: "google sans"; font-size: 16px; text-align: justify;">In this post, i am going to share with you </span><span style="background-color: white; border: 0px; color: #333333; font-family: "google sans"; font-size: 16px; font-stretch: inherit; line-height: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">custom stats blogger widget</span><span style="background-color: white; color: #333333; font-family: "google sans"; font-size: 16px; text-align: justify;">. By using this widget you can display total page views, total posts and total comments of your blog. Only blogger has total page views widget. After that time, i modify some css and added some script for total posts and total comments. The design of this widget is modern and clean. I used some icons using font awesome. Installing custom stats widget is very useful.</span><br />
<span style="background-color: white; color: #333333; font-family: "google sans"; font-size: 16px; text-align: justify;"><br /></span>
<span style="background-color: white; color: #333333; font-family: "google sans"; font-size: 16px; text-align: justify;">It is very unique and smart design. Some of friends requested me to share this </span><i style="background-color: white; border: 0px; color: #333333; font-family: "Google Sans"; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">blogger widgets</i><span style="background-color: white; color: #333333; font-family: "google sans"; font-size: 16px; text-align: justify;">. After that time now i am share this with new look and one more extra features. This blogger widgets help you to display Total page views, comments and total posts of your blog. People who want make their blog more attractive and beautiful, some blogger widgets make them easy. </span><br />
<span style="background-color: white; color: #333333; font-family: "google sans"; font-size: 16px; text-align: justify;"><br /></span></div>
<a class="demo" href="http://palki2-msdesignbd.blogspot.com/#Stats1" target="_blank">View Result</a>
<br />
<br />
<h2 style="background-color: white; border: 0px; color: #242d36; font-family: "Google Sans"; font-size: 28.8px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; font-weight: 500; line-height: 1.2; margin: 20px 0px; padding: 0px; position: relative; text-align: justify; vertical-align: baseline;">
How to install custom stats blogger widget</h2>
<div style="background-color: white; border: 0px; color: #333333; font-family: "Google Sans"; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Here is some very simple steps to <span style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">installing custom stats blogger widget</span>. In this blogger widget i used font awesome icons and PT Sans google font. So you have also need to adding These fonts on your blog. <span style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><i style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">If font awesome already added on your blog. then ignore it</i></span>.</div>
<div style="background-color: white; border: 0px; color: #333333; font-family: "Google Sans"; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<br style="margin: 0px; padding: 0px;" /></div>
<div style="background-color: white; border: 0px; color: #333333; font-family: "Google Sans"; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<span style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Step 1:</span> Go to <span style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Layout > Add a Gadget > Blog's Stats</span> add this widget.</div>
<div style="background-color: white; border: 0px; color: #333333; font-family: "Google Sans"; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<br style="margin: 0px; padding: 0px;" /></div>
<div class="separator" style="background-color: white; border: 0px; clear: both; color: #333333; font-family: "Google Sans"; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px; text-align: center; vertical-align: baseline;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfldnBYLG_ZvMEaxGMqAq_QKmi62yUJN9ayXzjDX2xVmP2jbl_Zy1aYhq12Xt7cTGfO4qYQZ4Af6wxilNpWvMVCbOeAZFKhdngzVXXFv9_7BHrSyibRfytks5NtQeEuB2Zg9IFuUGvAMtI/s1600/Blogger-custom-stats-widget.png" imageanchor="1" style="border: 0px; color: #f45145; font: inherit; margin: 0px 1em; outline: none; padding: 0px; text-decoration-line: none; transition: all 0.25s ease 0s; vertical-align: baseline;"><img alt="Install Custom Stats Widget for Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfldnBYLG_ZvMEaxGMqAq_QKmi62yUJN9ayXzjDX2xVmP2jbl_Zy1aYhq12Xt7cTGfO4qYQZ4Af6wxilNpWvMVCbOeAZFKhdngzVXXFv9_7BHrSyibRfytks5NtQeEuB2Zg9IFuUGvAMtI/s1600/Blogger-custom-stats-widget.png" style="border: 0px none; font: inherit; height: auto; margin: 0px; max-width: 100%; outline: none; padding: 0px; position: relative; vertical-align: middle;" title="Install Custom Stats Widget for Blogger" /></a></div>
<div style="background-color: white; border: 0px; color: #333333; font-family: "Google Sans"; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<br style="margin: 0px; padding: 0px;" /></div>
<div style="background-color: white; border: 0px; color: #333333; font-family: "Google Sans"; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<span style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Step 2:</span> Now go to <span style="background: rgb(242 , 242 , 242); border-radius: 2px; border: 1px solid rgba(0 , 0 , 0 , 0.1); color: #222222; cursor: pointer; font-family: inherit; font-size: 11px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; height: 27px; line-height: 26px; margin: 0px; padding: 8px 10px; text-align: center; vertical-align: baseline;">Edit HTML</span> and find below codes.</div>
<div style="background-color: white; border: 0px; color: #333333; font-family: "Google Sans"; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<br /></div>
</div>
<pre><code><b:widget id='Stats1' locked='false' title='Custom Stats' type='Stats' version='1' visible='true'>...</b:widget></code></pre>
<br />
<span style="background-color: white; border: 0px; color: #333333; content: "["; font-family: "google sans"; font-size: 16px; font-stretch: inherit; left: -0.1em; line-height: inherit; margin: 0px; padding: 0px; text-align: justify; transform: translatex(-100%); vertical-align: baseline;">Now replace this line with below codes.</span><br />
<span style="background-color: white; border: 0px; color: #333333; content: "["; font-family: "google sans"; font-size: 16px; font-stretch: inherit; left: -0.1em; line-height: inherit; margin: 0px; padding: 0px; text-align: justify; transform: translatex(-100%); vertical-align: baseline;"><br /></span>
<span style="background-color: white; border: 0px; color: #333333; content: "["; font-family: "google sans"; font-size: 16px; font-stretch: inherit; left: -0.1em; line-height: inherit; margin: 0px; padding: 0px; text-align: justify; transform: translatex(-100%); vertical-align: baseline;"><br /></span></div>
<pre><code><b:widget id='Stats1' locked='false' title='Custom Stats' type='Stats' version='1' visible='true'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<!-- Content is going to be visible when data will be fetched from server. -->
<div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>
<!-- Counter and image will be injected later via AJAX call. -->
<b:if cond='data:showSparkline'>
<img alt='Sparkline' expr:id='data:widget.instanceId + &quot;_sparkline&quot;' height='30' src='http://2.bp.blogspot.com/-nsxCtkYnchQ/VLEifAyf97I/AAAAAAAAIlk/9Viyy0W9r04/s1600/FFF.png' title='Sparkline' width='75'/>
</b:if>
<b:if cond='data:showGraphicalCounter'>
<span class='counter-wrapper graph-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/>
<b:else/>
<span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/>
</b:if>
<script type='text/javascript'>
function postCount(json){
document.write(&quot;<span class='counts post2'> Total Posts &quot;);
var count = json.feed.openSearch$totalResults.$t;
document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;);
document.write(&quot;</span>&quot;)
}
function numberOfComments(json){
document.write(&quot;<span class='counts comment'> Total Comments &quot;);
var count = json.feed.openSearch$totalResults.$t;
document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;);
document.write(&quot;</span>&quot;)
}
</script>
<script src='/feeds/posts/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=postCount' type='text/javascript'/>
<script src='/feeds/comments/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=numberOfComments'/>
</div>
</div>
</b:includable>
</b:widget></code></pre>
<br />
<span style="background-color: white; color: #333333; font-family: "google sans"; font-size: 16px; text-align: justify;">You're 80% done. Now paste all below CSS Codes befor </span><span style="background-color: white; border-radius: 3px; border: 1px solid silver; color: #333333; font-family: "google sans"; font-size: 16px; font-stretch: inherit; line-height: inherit; margin: 0px; padding: 4px; text-align: justify; vertical-align: baseline;"></head></span></div>
<br /></div>
<pre><code><link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
<style type='text/css'>
/* Blogger Custom Stats widget by msdesignbd.com */
.Stats img {display:none!important;background-image:none;}
.Stats .counter-wrapper {width:92%;text-align:right;margin:10px;line-height:35px;color:#333;font-weight:700;font-size:16px;margin-left: 0;}
.Stats .counter-wrapper:after {content:&quot;Page Views&quot;;float:left;text-align:left;font-size:13px;font-weight:700;color:#333;}
.counts {display:inline-block;width:92%;font-size:13px;line-height:35px;color:#333;font-weight:700;}
.counts .count {display:inline-block;font-size:16px;height:30px;
vertical-align:top;direction:ltr;float:right;color:#333;font-weight:700!important;}
.counts:hover .titles:before {color:#333!important;border-radius:2px;border-color:rgba(255,255,255,0.1);}
.counter-wrapper.text-counter-wrapper:before, .counts:before {display:inline-block;font-size:13px;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 10px;float:left;width:10px;text-align:center;}
.counter-wrapper.text-counter-wrapper:before, .counts:before {
display:block;background-color:#fff;color:#333;width:35px;height:35px;font-size:18px;line-height:35px;border-radius:2px;margin:0px 8px 0 0;}
.counter-wrapper.text-counter-wrapper:before {content:&quot;\f06e&quot;;}
.counts.post2:before {content:&quot;\f044&quot;;}
.counts.comment:before {content:&quot;\f0e6&quot;;}
#Stats1_content {width:auto;height:auto;background-color:#fff;}
</style></code></pre>
<br />
<span style="background-color: white; color: #333333; font-family: "Google Sans"; font-size: 16px; text-align: justify;">You're done. Now </span><span style="background: rgb(251, 143, 61); border-radius: 2px; border: 1px solid rgb(251, 143, 61); color: white; cursor: pointer; font-family: "Google Sans"; font-size: 11px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; font-weight: bold; line-height: 26px; margin: 0px; padding: 6px 10px; text-align: center; vertical-align: baseline;">Save template</span><span style="background-color: white; color: #333333; font-family: "Google Sans"; font-size: 16px; text-align: justify;"> and see result by refreshing page.</span><br style="background-color: white; color: #333333; font-family: "Google Sans"; font-size: 16px; margin: 0px; padding: 0px; text-align: justify;" /><br style="background-color: white; color: #333333; font-family: "Google Sans"; font-size: 16px; margin: 0px; padding: 0px; text-align: justify;" /><span style="background-color: white; color: #333333; font-family: "Google Sans"; font-size: 16px; text-align: justify;">Hope you understand that, how to add </span><span style="background-color: white; border: 0px; color: #333333; font-family: "Google Sans"; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">custom stats blogger widgets</span><span style="background-color: white; color: #333333; font-family: "Google Sans"; font-size: 16px; text-align: justify;"> on blog or blogger site. If you have any problem, then feel free to communicate by comment box. If you like this widget, then don't forget to share this post with your social media. Your support is our future. Thanks. </span></div>
M. Limonhttp://www.blogger.com/profile/07103600535159878470noreply@blogger.com0tag:blogger.com,1999:blog-6285988562391449784.post-60580998735326773692019-03-12T23:37:00.003+06:002019-03-12T23:37:49.516+06:00How To Stop Copying Your Article <div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Hello Guys! Today I Am Sharing A Very Important Article.<br />
<h3 style="text-align: left;">
Now A Days People Stealing Articles From Site By Coping & Today I Am Here To stop Them. So If You Want To Stop Copying Articles From Your Site Follow My Article.</h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizu-mgiab3752sHVJxH_1IMBvUvODtZ3Sn7kW_A73LNoIXtKkeLBbi-eV-dsZOcDC-1TnN_Sx7ddgrXvTDTTQZUQJVvk4EX-7S6h5p4bTZDP99-wrljYXhJzYuM95VTGCjMiPw27GY64Y/s1600/20190312_211520.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1024" data-original-width="1024" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizu-mgiab3752sHVJxH_1IMBvUvODtZ3Sn7kW_A73LNoIXtKkeLBbi-eV-dsZOcDC-1TnN_Sx7ddgrXvTDTTQZUQJVvk4EX-7S6h5p4bTZDP99-wrljYXhJzYuM95VTGCjMiPw27GY64Y/s320/20190312_211520.jpg" width="320" /></a></div>
<div>
<br /></div>
<div>
We Are Doing It With JS. So All You Have To Do Is Go To <kbd>Blogger</kbd> & Add This Code Before <kbd></body></kbd> Of Your Blog. That's All.</div>
<div>
<br /></div>
</div>
<pre><code>
<script>
function thang_cuong_matlon() { var ditmecuong = document.getElementsByTagName('body')[0]; var cuongnunglon; cuongnunglon = window.getSelection(); var cuonglon = "Stop Stealing Others Content. Don't You Have Your Brain!"; var copdiditmecuong = cuonglon; var thangmatloncuongcopdi = document.createElement('div'); thangmatloncuongcopdi.style.position='absolute'; thangmatloncuongcopdi.style.left='-99999px'; ditmecuong.appendChild(thangmatloncuongcopdi); thangmatloncuongcopdi.innerHTML = copdiditmecuong; cuongnunglon.selectAllChildren(thangmatloncuongcopdi); window.setTimeout(function() { body_element.removeChild(thangmatloncuongcopdi); },0);} document.oncopy = thang_cuong_matlon;
</script>
</code></pre>
</div>
<br />
So Now Your Sites Content Is Free From Stealing.<br />
<br />
<span style="color: #8e7cc3;"><i>Thanks To Niguen Dien.</i></span><br />
<span style="color: #8e7cc3;"><i><br /></i></span></div>
M. Limonhttp://www.blogger.com/profile/07103600535159878470noreply@blogger.com0tag:blogger.com,1999:blog-6285988562391449784.post-11238102972152200102019-03-12T12:07:00.001+06:002019-03-12T12:10:54.550+06:00How To Add Partner Widget On Blogger Or Wapkiz<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<b>Hello! Welcome To EasyTrks. Today I Will Show You How To Make A Partner Widget On <kbd>Blogger</kbd> Or <kbd>Wapkiz</kbd>.</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT2nhZ9nBbm_9S2Nr5z0BJgws66NPMsDQRKYwTR691OaTi554n6-HxP-6fABfk8OrUfWkPkRDLk9U1WEPLrmVV844EONXCffliXj-hlR1MLGJ4bAMHyHHxIPGWWTFsq2vv8cBIkwI8rEE/s1600/20190311_225402.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1280" data-original-width="1280" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT2nhZ9nBbm_9S2Nr5z0BJgws66NPMsDQRKYwTR691OaTi554n6-HxP-6fABfk8OrUfWkPkRDLk9U1WEPLrmVV844EONXCffliXj-hlR1MLGJ4bAMHyHHxIPGWWTFsq2vv8cBIkwI8rEE/s320/20190311_225402.jpg" width="320" /></a></div>
<br />
First Go To <kbd>Blogger</kbd> & Add This <kbd>Css</kbd> Code Before <kbd></style></kbd></div>
<br />
<i>For Wapkiz Go To Panel Mode > Css Theme > Scroll Down > Add New With Editor & Add This Code. </i><br />
<i><br /></i></div>
<pre><code>/* Partner Widget */
.my-partner-wd {text-align: center;}
.my-partner-wd img {margin:0px 5px 5px 0px;padding:5px;text-align:center;border:1px solid #ddd;}
.my-partner-wd img:hover {border:1px solid #aaa}
.my-partner-wd img.noborder {border:0;}</code>
</pre>
<br />
After Adding The Css Code You Just Need To Add The Html Where You Wanna Install The Partner Widget.<br />
<br />
<br /></div>
<pre><code><div class="my-partner-wd">
<a href="PARTNER-URL" title="PARTNER-TITLE"><img class="noborder" src="PARTNER-IMG-URL" alt="PARTNER-IMG-ALT" width="125" height="125" /></a>
<a href="PARTNER-URL" title="PARTNER-TITLE"><img class="noborder" src="PARTNER-IMG-URL" alt="PARTNER-IMG-ALT" width="125" height="125" /></a>
<a href="PARTNER-URL" title="PARTNER-TITLE"><img class="noborder" src="PARTNER-IMG-URL" alt="PARTNER-IMG-ALT" width="125" height="125" /></a>
<a href="PARTNER-URL" title="PARTNER-TITLE"><img class="noborder" src="PARTNER-IMG-URL" alt="PARTNER-IMG-ALT" width="125" height="125" /></a>
</div></code>
</pre>
<br />
<table><tbody>
<tr><td class="line-content"></td></tr>
<tr><td class="line-number" value="738"></td><td class="line-content"><br /></td></tr>
</tbody>Edit<br />
PARTNER-URL : Partner Blog/Website Url<br />
PARTNER-TITLE : Partner web/blog Title<br />
PARTNER-IMG-URL : Partner Img Banner<br />
IMAGE SIZE : Partner Img Size (As you)<br />
<br />
Then save your widget.<br />
<br />
I don't think it's difficult to create an ad box on a blog, just need to add some code to the blog template. For that I just end the tutorial on How to make a partner widget on blogger. May be useful.</table>
</div>
M. Limonhttp://www.blogger.com/profile/07103600535159878470noreply@blogger.com0tag:blogger.com,1999:blog-6285988562391449784.post-90650129620812789942019-03-10T23:03:00.000+06:002019-03-10T23:09:41.663+06:00How To Make A Bootstrap 4 Navigation Bar<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWw_TdrqOSwQejf1506kYjLT0m39QIrVo75qis9u8a9jmYGAzoO5bkfu4xTt3K9td49m5alNbspOrqUIUn5m_t4HpnS6iGOtMmswhSaZD6mSvKeG5opqTJK4JknDdZugZ8Czj7PoGYmJk/s1600/rename.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1024" data-original-width="1024" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWw_TdrqOSwQejf1506kYjLT0m39QIrVo75qis9u8a9jmYGAzoO5bkfu4xTt3K9td49m5alNbspOrqUIUn5m_t4HpnS6iGOtMmswhSaZD6mSvKeG5opqTJK4JknDdZugZ8Czj7PoGYmJk/s320/rename.png" width="320" /></a></div>
<br />
Hello Guys Welcome To EasyTrks. Today I Will Show You How To Make A Navigation Bar Using Bootstrap 4. So Stay Tuned.<br />
<br />
<b>Introduction : Bootstrap</b> Probably The Best Way Of Making <b>Navigation Bar</b> For New Bees. Bootstrap Is A Program That Have Huge Css Inside It. It's Known World Wide & Beings Used By Many Sites. But The Most Important Thing Is <b>It's Absolutely Free To Use.</b><br />
<b><br /></b>
<b><span style="color: #cc0000;">We Will Use Pooper Js & Jquery To.</span></b><br />
<b><span style="color: #cc0000;"><br /></span></b>
<br />
<h2 style="text-align: left;">
<span style="font-size: x-large;">So Let's Get Started .</span></h2>
<div>
<span style="font-size: large;">> Go To Your Site & Add This Bootstrap In The Middle Of <kbd><head></kbd> & <kbd></head></kbd> Section.</span></div>
<div>
<span style="font-size: large;"><br /></span></div>
<div>
<span style="font-size: large;"><br /></span></div>
</div>
<pre><code><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></code>
</pre>
<br />
> This Was The css <b>& Now Let's Add The Jquery & Popper Js.</b><br />
<b><br /></b></div>
<pre><code>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script></code>
</pre>
<br />
<blockquote class="tr_bq">
For Wapkiz Go To Panel Mode > Meta Header & Add All Of This Codes.</blockquote>
After Installing All Of This Code You Are Ready For Installing Navigation Bar. Just Add This Html Code Where You Want To Install Navigation Bar.<br />
<br />
<br /></div>
<pre><code><nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav></code></pre>
<br />
And Now Your Done.<br />
Wanna See Demo!<br />
<br />
<br /></div>
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="https://getbootstrap.com/docs/4.0/components/navbar/" rel="nofollow noopener" target="_blank">DEMO</a></li>
<li><a class="download" href="https://getbootstrap.com/docs/4.0/components/navbar/" rel="nofollow noopener" target="_blank">How To Style</a></li>
<li><a class="download2" href="https://www.easytrks.blogspot.com/p/contact.html" rel="nofollow noopener" target="_blank">Need Help! Contact</a></li>
</ul>
</div>
<br />
Special Thanks To <b><i>GetBootstrap.Com</i></b></div>
M. Limonhttp://www.blogger.com/profile/07103600535159878470noreply@blogger.com0tag:blogger.com,1999:blog-6285988562391449784.post-32001355103527580252019-03-10T00:10:00.001+06:002019-03-10T00:15:08.753+06:00Livia Luna Responsive Blogger Template Premium<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqNumlj1qwp9Ots7aEEm8vITQ3bcpRhQVM6Bq7tbh9_9AZ3hMQ1rJXKKZFs6_mDRchXKPhRMRfXyarDqh39D2J8hRAbxJjf4oaVgCiH0KK5Erg2KLDrI8DSZffpeEjhvb-CJdqv-YhfXU/s1600/Livia+Luna+Blogger+Template.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="669" data-original-width="1053" height="406" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqNumlj1qwp9Ots7aEEm8vITQ3bcpRhQVM6Bq7tbh9_9AZ3hMQ1rJXKKZFs6_mDRchXKPhRMRfXyarDqh39D2J8hRAbxJjf4oaVgCiH0KK5Erg2KLDrI8DSZffpeEjhvb-CJdqv-YhfXU/s640/Livia+Luna+Blogger+Template.png" width="640" /></a></div>
<br />
<b>Livia Luna </b>is a responsive Blogger Template from Namina. It's very charming & full of features. So if you wanna try this you can easily use it by downloading from here.<br />
<br />
<b>Features : </b>It's a grid based blogger template which makes it charming & pretty attractive & it's very fast.<br />
<br />
It's designed with pure css which makes it lite. It's have <b>Features Slider </b>with quit awesome look.<br />
<br />
<b>Enough Of Talking Let's Have Look At Features Of This Template. </b><br />
<b><br /></b>
<b><br /></b></div>
<br />
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Features</th> <th>Availability</th> </tr>
<tr> <td>Responsive</td> <td>True <a href="http://www.responsinator.com/?url=http%3A%2F%2Flivialuna.blogspot.com%2F" rel="nofollow noopener" target="_blank">Check</a></td> </tr>
<tr> <td>Mobile Friendly</td> <td>True <a href="https://search.google.com/test/mobile-friendly?id=vhxDs-v_Z4pTuqrLH6j3YA" rel="nofollow noopener" target="_blank">Check</a></td> </tr>
<tr> <td>SEO Friendly</td> <td>True</td> </tr>
<tr> <td>Personal Blog</td> <td>True</td> </tr>
<tr> <td>2 Column</td> <td>True</td> </tr>
<tr> <td>Light Base Sky Blue Color</td> <td>True</td> </tr>
<tr> <td>Related Posts with Thumb</td> <td>True</td> </tr>
<tr> <td>Search Box</td> <td>True</td> </tr>
<tr> <td>Subscription Box</td> <td>True</td> </tr>
<tr> <td>Social Share Button</td> <td>True</td> </tr>
<tr> <td>Back to Top Button</td> <td>True</td> </tr>
<tr> <td>Grid Style</td> <td>True</td> </tr>
<tr> <td>Page Numbered</td> <td>True</td> </tr>
<tr> <td>Recent Post Slider</td> <td>True</td> </tr>
<tr> <td>Menu Navigation</td> <td>True</td> </tr>
<tr> <td>Notification Box</td> <td>True</td> </tr>
</tbody></table>
<br />
<h3 style="text-align: left;">
Now Let's Have The Demo & Download Link.</h3>
<div>
<br /></div>
</div>
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://livialunaku.blogspot.com/" rel="nofollow noopener" target="_blank">DEMO</a></li>
<li><a class="download" href="http://djbd.aino.pk/page-4/21/Livia-Luna-2-Blogger-Template.html" rel="nofollow noopener" target="_blank">DOWNLOAD</a></li>
<li><a class="download2" href="https://www.easytrks.blogspot.com/p/contact.html" rel="nofollow noopener" target="_blank">Need Help! Contact</a></li>
</ul>
</div>
<br />
<span style="color: #222;">Pro Version Brought To You By <a href="https://btemplatesbd.blogspot.com/" target="_blank">BtemplatesBD</a>.</span></div>
M. Limonhttp://www.blogger.com/profile/07103600535159878470noreply@blogger.com0tag:blogger.com,1999:blog-6285988562391449784.post-14922908436464277172019-03-05T11:56:00.001+06:002019-03-05T11:56:38.093+06:00How To Make Go Up & Down Button On Blogger<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2_VE82NDKF7Z-GIpB4y433urpaIFDtOwABZ2mrH6-rM6e2aUu-XXrpekv8qV7Yllan1zlAC78wvW494Pxc2l4F6YjgK61gAZOMr-VefGZRREhrmHwIQi74R9V_VxC-fTUHT3noaCmX8A/s1600/20190305_111249.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1280" data-original-width="1280" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2_VE82NDKF7Z-GIpB4y433urpaIFDtOwABZ2mrH6-rM6e2aUu-XXrpekv8qV7Yllan1zlAC78wvW494Pxc2l4F6YjgK61gAZOMr-VefGZRREhrmHwIQi74R9V_VxC-fTUHT3noaCmX8A/s320/20190305_111249.jpg" width="320" /></a></div>
<br />
<span style="font-size: large;">Hello Friends Welcome To <b>EasyTrks </b>Today I will show you how to make a Slide Up & Down Button For Blogger.</span><br />
<span style="font-size: large;">So Follow The Tutorial. </span><br />
<br />
<h2 style="text-align: left;">
<span style="font-size: large;">How To Make Slide Up & Down Button</span></h2>
<div>
First Make Sure Font Awesome Is Installed On Your Site. If Not First Install <mark>Font Awesome Icons</mark> On Your Site.<b> If Not</b></div>
<div>
<br /></div>
<div>
Ad This Font Awesome<kbd> Css</kbd> Code Before <kbd></head></kbd></div>
<span style="font-size: large;"><br /></span></div>
<pre><code><script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script></code></pre>
<br />
After Installing The Font Awesome Icons Go To <b>Blogger > Theme > Edit Html </b>& Add This <kbd>css</kbd> Code Before </head></div>
<br />
<br />
<b>Color Option 1</b><br />
<br />
<pre><code><style type='text/css'>
/* Slide Up and Down */
#slidetop,#slidebottom{background:<mark>#fff</mark>;margin:0;padding:5px 15px 0;border-radius:0;position:fixed;color:<mark>#222</mark>;bottom:0;border:1px solid rgba(0,0,0,0.05);border-bottom:0;cursor:pointer;display:none;line-height:2;box-shadow:0 -1px 20px rgba(0,0,0,0.05);backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);transition:all .3s}#slidetop:hover,#slidebottom:hover{background:<mark>#fafafa</mark>}#slidetop{right:46px;border-radius:5px 0 0 0}#slidebottom{right:0;border-right:0;box-shadow:5px -1px 20px rgba(0,0,0,0.05)}
@media only screen and (max-width:768px){#slidetop{right:43px}}
</style></code></pre>
<br />
<b>Color Option 2</b><br />
<br />
<pre><code><style type='text/css'>
/* Slide Up and Down */
#slidetop,#slidebottom{background:<mark>#e74c3c</mark>;margin:0;padding:5px 15px 0;border-radius:0;position:fixed;color:#fff;bottom:0;cursor:pointer;display:none;line-height:2;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);transition:all .3s}#slidetop:hover,#slidebottom:hover{background:<mark>#333</mark>}#slidetop{right:46px;border-radius:5px 0 0 0}#slidebottom{background:<mark>#c0392b</mark>;right:0}
@media only screen and (max-width:768px){#slidetop{right:43px}}
</style></code></pre>
<br />
Now Add This Code Before <kbd></body></kbd><br />
<br />
<pre><code><div id='downfooter'/>
<a href='#' id='slidetop'><i class='fa fa-chevron-up' title='Slide up'/></a><a href='#' id='slidebottom'><i class='fa fa-chevron-down' title='Slide down'/></a>
<script type='text/javascript'>
//<![CDATA[
// Slide Up and Down by www.easytrks.blogspot.com
!function(o){o(window).scroll(function(){o(this).scrollTop()>75?(o("#slidetop").removeAttr("href"),o("#slidetop").fadeIn()):o("#slidetop").fadeOut()}),o(function(){o("#slidetop").click(function(){return o("html, body").animate({scrollTop:0},"slow"),!1})})}(jQuery),function(o){o(window).scroll(function(){o(this).scrollTop()<0?(o("#slidebottom").removeAttr("href"),o("#slidebottom").fadeOut()):o("#slidebottom").fadeIn()}),o(function(){o("#slidebottom").click(function(){return o("html, body").animate({scrollTop:$("#downfooter").offset().top},"slow"),!1})})}(jQuery);
//]]>
</script></code></pre>
<br />
Now Save The Template.<br />
<br />
<br /></div>
<center>
See The Result</center>
<br />
<br />
<div style="text-align: center;">
Color Option 1</div>
<br />
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="https://codepen.io/NaminaKiky/full/GPWKZR" rel="nofollow noopener" target="_blank">Result</a></li>
</ul>
</div>
<br />
<div style="text-align: center;">
Color Option 2</div>
<br />
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="https://codepen.io/NaminaKiky/full/bOgXWP" rel="nofollow noopener" target="_blank">Result</a></li>
</ul>
</div>
<br />
This Template Is Brought To You By <a href="https://easytrks.blogspot.com/">Easytrks.</a></div>
M. Limonhttp://www.blogger.com/profile/07103600535159878470noreply@blogger.com0tag:blogger.com,1999:blog-6285988562391449784.post-12771057468014409792019-02-24T19:13:00.001+06:002019-02-24T19:20:33.270+06:00How To Make Awesome Demo & Download Button With Hover Effect<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFXbiR_kyqsBCnNjAlrBhA0bZOfajOximwgOV8ITrBwKN2YFx0sGa9C27bT_XoJvZa2pLcuv9Lx2jTolovy1O-7ku_jtJ-7y4tLh0i15B0s1q2ub5E3N8MzVdEna_gizKnAW46dsDNqew/s1600/20190224_183043.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1280" data-original-width="1280" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFXbiR_kyqsBCnNjAlrBhA0bZOfajOximwgOV8ITrBwKN2YFx0sGa9C27bT_XoJvZa2pLcuv9Lx2jTolovy1O-7ku_jtJ-7y4tLh0i15B0s1q2ub5E3N8MzVdEna_gizKnAW46dsDNqew/s320/20190224_183043.jpg" width="320" /></a></div>
<br />
<br />
<b>Today I Will Show You How To Make A <mark>Demo</mark> & <mark>Download</mark> Button With <mark>Hover</mark> Effect Using Only Css!</b><br />
<b><br /></b>
<b><span style="font-family: "arial" , "helvetica" , sans-serif;">So Lets Start</span></b><br />
<br />
<ol style="text-align: left;">
<li><span style="font-family: "arial" , "helvetica" , sans-serif;"><b>Go To Blogger.Com</b></span></li>
<li><span style="font-family: "arial" , "helvetica" , sans-serif;"><b>Theme</b></span></li>
<li><span style="font-family: "arial" , "helvetica" , sans-serif;"><b>Edit Html</b></span></li>
<li><span style="font-family: "arial" , "helvetica" , sans-serif;"><b>Then Add The Code Before <span style="background-color: white; color: white;"><mark></style></mark></span> Or After <span style="color: white;"><mark>]]></b:skin></mark></span></b></span></li>
</ol>
</div>
<br />
<br />
<pre data-codetype="CSSku" title="CSS"><code class="language-css">#wrap {
margin: 20px auto;
text-align: center;
}
#wrap br {
display: none;
}
.btn-slide, .btn-slide2 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid #0099cc;
margin: 10px;
transition: .5s;
}
.btn-slide2 {
border: 2px solid #efa666;
}
.btn-slide:hover {
background-color: #0099cc;
}
.btn-slide2:hover {
background-color: #efa666;
}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: #0099cc;
}
.btn-slide2:hover span.circle2 {
color: #efa666;
}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
left: 40px;
opacity: 0;
}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
opacity: 1;
left: 40px;
}
.btn-slide span.circle, .btn-slide2 span.circle2 {
display: block;
background-color: #0099cc;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.btn-slide2 span.circle2 {
background-color: #efa666;
}
.btn-slide span.title,
.btn-slide span.title-hover, .btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
position: absolute;
left: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #30abd5;
transition: .5s;
}
.btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
color: #efa666;
left: 80px;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
left: 80px;
opacity: 0;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
color: #fff;
}</code></pre>
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b>After Adding The Css You Just Simply Need To Add The Html Markups Where You Want The Buttons.</b></span><br />
<br /></div>
<br />
<pre><code><div id="wrap">
<a href="#" class="btn-slide" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
<a href="#" class="btn-slide2" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div></code></pre>
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b>Then The Result Will Be Like
This</b></span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b><br /></b></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b><br /></b></span></div>
<br />
<div class="codepen" data-default-tab="result" data-height="268" data-slug-hash="myZWvQ" data-theme-id="13957" data-user="arlinadesign">
See the Pen <a href="http://codepen.io/arlinadesign/pen/myZWvQ/">Slide Demo and Download Button</a> by EasyTrks (<a href="http://codepen.io/arlinadesign">@arlinadesign</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<script async="" src="//assets.codepen.io/assets/embed/ei.js"></script><br />
<br />
Isn't It Beautiful. <br />
<br />
<blockquote class="tr_bq">
So Hope You All Enjoyed The Post. The Post Is Inspired From Arlinadzgn. Hope Nothing Will Go Wrong.</blockquote>
<br /></div>
M. Limonhttp://www.blogger.com/profile/07103600535159878470noreply@blogger.com0tag:blogger.com,1999:blog-6285988562391449784.post-58362799744802540482019-02-23T14:09:00.001+06:002019-02-23T14:09:13.694+06:00Awesome Subscribe Box For Blogger<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpwnZHkZlGJJP0jDbw_Kp0EJ3DtmekySNFALzdoUOjrcbHaRIUeO-qvkiaVWnZNwTeP05rN5Lnssci1uNgOJ3sGjJzPoD6NVz5lSvwQIoZo0HxcQyF4YOrSJpZrtoWzpWy13hq_NSv6uQ/s1600/20190223_133722.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1280" data-original-width="1280" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpwnZHkZlGJJP0jDbw_Kp0EJ3DtmekySNFALzdoUOjrcbHaRIUeO-qvkiaVWnZNwTeP05rN5Lnssci1uNgOJ3sGjJzPoD6NVz5lSvwQIoZo0HxcQyF4YOrSJpZrtoWzpWy13hq_NSv6uQ/s320/20190223_133722.jpg" width="320" /></a></div>
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">Hello Everybody ! Welcome To <a href="http://easytrks.blogspot.com/">EasyTrks</a>. Today I will Share a Awesome Subscribe Box Widget For Blogger. So Let's Start. </span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">If You want to see the demo watch it Live from below.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span></div>
<a class="demo" href="https://codepen.io/nazren-naz/full/ZVbVpZ">DEMO</a><br />
<br />
So Let's Get To Work .<br />
<br />
<br />
<ul style="text-align: left;">
<li>First Go To Blogger.</li>
<li>Template </li>
<li>Edit Html</li>
<li>Add The CSS code Before </head>.</li>
</ul>
<br />
<br /></div>
<pre><code>#subscribe-wrap{
background-image: url("https://www.oodlesthemes.com/wp-content/uploads/2017/10/OO0122373-Blue-abstract-background-design-copy-copy-590x300.jpg");
background-position:center;background-attachment:fixed;margin:auto;padding:0 20px;overflow:hidden;z-index:2
}
#subscribe-box{max-width:440px;margin:auto;padding:20px;overflow:hidden}#subscribe-box h4{color:#fff;margin-bottom:20px;text-align:center}
#subscribe-box .emailfield{margin:auto}
#subscribe-box .emailfield form{position:relative;text-align:center}#subscribe-box .emailfield form:before{position:absolute;font-family:fontawesome;content:'\f0e0';color:#f1c40f;left:18.7%;top:21%;z-index:2;font-weight:normal}#subscribe-box .emailfield input{background:#fff;position:relative;display:inline-block;padding:12px 12px 12px 42px;color:#555;border:0;font-size:14px;margin-bottom:16px;width:45%;border-radius:3px}#subscribe-box .emailfield input:focus,#subscribe-box .emailfield input:hover{background:#fff;color:#222;outline:none;border:0}#subscribe-box .emailfield .submitbutton{background-color:rgba(99,110,114,.9);color:#fff;margin:0 0 0 10px;padding:12px;width:20%;letter-spacing:.5px;cursor:pointer;font-weight:500;box-shadow:0 1px rgba(0,0,0,.1);border-radius:3px;transition:all .3s}#subscribe-box .emailfield .submitbutton:active,#subscribe-box .emailfield .submitbutton:hover,#subscribe-box .emailfield .submitbutton:focus{background-color:rgba(244,67,54,.9);color:#fff}
@media screen and (max-width:800px){
#subscribe-wrap{padding:20px 0 40px 0}#subscribe-box {padding:0;width:90%}#subscribe-box .emailfield input {width:100%;border-radius:0;margin:auto}#subscribe-box .emailfield .submitbutton{margin:20px 0 0 0;width:100%;border-radius:0}#subscribe-box .emailfield {overflow:hidden;}#subscribe-box .emailfield form:before{left:2.7%;top:12%}}
@media screen and (max-width:480px){
#subscribe-box .emailfield form:before{left:4.7%;top:14%}
}
</code></pre>
<br />
<br />
After That You Just Need To Add Another Code Where You Want The Subscribe Box.<br />
<br />
<br /></div>
<pre><code><div id='subscribe-wrap'>
<div id='subscribe-box'>
<h4>Get notify via email</h4>
<div class='emailfield'>
<form action='https://feedburner.google.com/fb/a/mailverify' expr:onsubmit='&quot;window.open(\&quot;https://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath + &quot;\&quot;, \&quot;popupwindow\&quot;, \&quot;scrollbars=yes,width=550,height=520\&quot;); return true&quot;' method='post' target='popupwindow'>
<input name='email' placeholder='Email Address' type='text'/>
<input name='uri' type='hidden' value='<span style="color: red;">EasyTrks</span>'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Submit'/>
</form>
</div>
</div>
</div></code></pre>
<br />
That's It.<br />
<br />
<span style="color: #e06666;">Change <b>EasyTrks </b>with your Blog Name.</span><br />
<span style="color: #e06666;"><br /></span>
<blockquote class="tr_bq">
<span style="color: #e06666;">I</span><b>f You Face Any Kind Of Problem Installing The Widget Don't Forget To Comment. I'm Always With You. I Will Do My Best To Help You.</b></blockquote>
<br />
Regards <span style="font-size: x-large;"><b>EasyTrks. </b></span></div>
M. Limonhttp://www.blogger.com/profile/07103600535159878470noreply@blogger.com0tag:blogger.com,1999:blog-6285988562391449784.post-15940883280531447042019-02-23T00:47:00.001+06:002019-02-23T01:38:31.242+06:00How to use FONT AWESOME icons on your website<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHR75pslIv9MehFAGK4cTbiMU6qO5ypQuSqp1PvXg_YJlPnggU4h982PwJja7euyp6PTIBId6diKDi6N49SCRK5uRXTgX21uxUOYg0FQW4aWX3k25dX3eH-nbpdxOF_XtbRZRkaWXGGx8/s1600/20190223_001108.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1280" data-original-width="1280" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHR75pslIv9MehFAGK4cTbiMU6qO5ypQuSqp1PvXg_YJlPnggU4h982PwJja7euyp6PTIBId6diKDi6N49SCRK5uRXTgX21uxUOYg0FQW4aWX3k25dX3eH-nbpdxOF_XtbRZRkaWXGGx8/s320/20190223_001108.jpg" width="320" /></a></div>
<h2 style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span></h2>
<h2 style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;">Hello Guys! Thanks For Visiting <span style="color: #3d85c6;">EasyTrks </span>. Today I Will Show You How To Use <span style="color: #e06666;">Font Awesome Icons </span>On Your Site.</span></h2>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">So Let's Start.</span></div>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><b>First Go To Your Website Edit Mode & Search For The Code <span style="background-color: #f6b26b;"></head> </span><span style="background-color: white;">. Then Paste The Code Before </span><span style="background-color: #f6b26b;"></head> </span><span style="background-color: white;">. </span></b></span><br />
<br />
<div style="background-color: white; box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">
To use the Font Awesome icons, add the following line inside the <code class="w3-codespan" style="background-color: #f1f1f1; box-sizing: inherit; color: crimson; font-family: Consolas, "courier new"; font-size: 16.5px; padding-left: 4px; padding-right: 4px;"><head></code> section of your HTML page:</div>
<div style="background-color: white; box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">
<br /></div>
<div style="box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">
<code class="w3-codespan" style="box-sizing: inherit; color: crimson; font-family: Consolas, "courier new"; font-size: 16.5px; padding-left: 4px; padding-right: 4px;"><b style="background-color: white;"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></b></code></div>
<div style="background-color: white; box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">
<code class="w3-codespan" style="background-color: #f1f1f1; box-sizing: inherit; color: crimson; font-family: Consolas, "courier new"; font-size: 16.5px; padding-left: 4px; padding-right: 4px;"><br /></code></div>
<div style="background-color: white; box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">
<strong style="box-sizing: inherit;">Note:</strong> No downloading or installation is required!</div>
<div style="background-color: white; box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">
You place Font Awesome icons by using the prefix <code class="w3-codespan" style="background-color: #f1f1f1; box-sizing: inherit; color: crimson; font-family: Consolas, "courier new"; font-size: 16.5px; padding-left: 4px; padding-right: 4px;">fa</code> and the icon's name.</div>
<div style="background-color: white; box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">
<br /></div>
<h2 style="background-color: white; box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px; text-align: left;">
Example :</h2>
</div>
<blockquote class="tr_bq">
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>!DOCTYPE<span style="box-sizing: inherit; color: red;"> html</span><span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>html<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>head<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>link<span style="box-sizing: inherit; color: red;"> rel<span style="box-sizing: inherit; color: mediumblue;">="stylesheet"</span>href<span style="box-sizing: inherit; color: mediumblue;">="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/head<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>body<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<br style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;" />
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>i<span style="box-sizing: inherit; color: red;"> class<span style="box-sizing: inherit; color: mediumblue;">="fa fa-car"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/i<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>i<span style="box-sizing: inherit; color: red;"> class<span style="box-sizing: inherit; color: mediumblue;">="fa fa-car"</span>style<span style="box-sizing: inherit; color: mediumblue;">="font-size:48px;"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/i<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>i<span style="box-sizing: inherit; color: red;"> class<span style="box-sizing: inherit; color: mediumblue;">="fa fa-car"</span>style<span style="box-sizing: inherit; color: mediumblue;">="font-size:60px;color:red;"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/i<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<br style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;" />
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/body<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/html<span style="box-sizing: inherit; color: mediumblue;">></span></span></blockquote>
<br />
<h2 style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: x-large;"> The Result Will Be Like This :</span></h2>
<div>
<br /></div>
<div>
<br /></div>
<br /></div>
</div>
</div>
</div>
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size: 48px;"></i>
<i class="fa fa-car" style="color: red; font-size: 60px;"></i>
<br />
<div style="background-color: white; box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">
<br />
<br />
Font Awesome is designed to be used with inline elements. The <code class="w3-codespan" style="background-color: #f1f1f1; box-sizing: inherit; color: crimson; font-family: Consolas, "courier new"; font-size: 16.5px; padding-left: 4px; padding-right: 4px;"><i></code> and <code class="w3-codespan" style="background-color: #f1f1f1; box-sizing: inherit; color: crimson; font-family: Consolas, "courier new"; font-size: 16.5px; padding-left: 4px; padding-right: 4px;"><span></code> elements are widely used for icons.</div>
<div style="background-color: white; box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">
Also note that if you change the font-size or color of the icon's container, the icon changes. Same things goes for shadow, and anything else that gets inherited using CSS.</div>
<div>
<br /></div>
<div>
<h1 style="background-color: white; box-sizing: inherit; font-family: "Segoe UI", Arial, sans-serif; font-size: 36px; font-weight: 400; margin: 10px 0px;">
Larger Icons</h1>
<div style="background-color: white; box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">
The <code class="w3-codespan" style="background-color: #f1f1f1; box-sizing: inherit; color: crimson; font-family: Consolas, "courier new"; font-size: 16.5px; padding-left: 4px; padding-right: 4px;">fa-lg</code> (33% increase), <code class="w3-codespan" style="background-color: #f1f1f1; box-sizing: inherit; color: crimson; font-family: Consolas, "courier new"; font-size: 16.5px; padding-left: 4px; padding-right: 4px;">fa-2x</code>, <code class="w3-codespan" style="background-color: #f1f1f1; box-sizing: inherit; color: crimson; font-family: Consolas, "courier new"; font-size: 16.5px; padding-left: 4px; padding-right: 4px;">fa-3x</code>,<code class="w3-codespan" style="background-color: #f1f1f1; box-sizing: inherit; color: crimson; font-family: Consolas, "courier new"; font-size: 16.5px; padding-left: 4px; padding-right: 4px;">fa-4x</code>, or <code class="w3-codespan" style="background-color: #f1f1f1; box-sizing: inherit; color: crimson; font-family: Consolas, "courier new"; font-size: 16.5px; padding-left: 4px; padding-right: 4px;">fa-5x</code> classes are used to increase the icon sizes relative to their container</div>
<div style="background-color: white; box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">
<br /></div>
<h3 style="box-sizing: inherit; font-family: "Segoe UI", Arial, sans-serif; font-size: 24px; font-weight: 400; margin: 10px 0px;">
Example</h3>
</div>
<div>
<br /></div>
<blockquote class="tr_bq">
<h3 style="box-sizing: inherit; font-family: "Segoe UI", Arial, sans-serif; font-size: 24px; font-weight: 400; margin: 10px 0px;">
</h3>
<div class="w3-code notranslate htmlHigh" style="background-color: white; border-left: 4px solid rgb(76, 175, 80); box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px; margin-bottom: 16px !important; margin-top: 16px !important; overflow-wrap: break-word; padding: 8px 12px; width: auto;">
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>i<span style="box-sizing: inherit; color: red;"> class<span style="box-sizing: inherit; color: mediumblue;">="fa fa-car fa-lg"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/i<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>i<span style="box-sizing: inherit; color: red;"> class<span style="box-sizing: inherit; color: mediumblue;">="fa fa-car fa-2x"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/i<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>i<span style="box-sizing: inherit; color: red;"> class<span style="box-sizing: inherit; color: mediumblue;">="fa fa-car fa-3x"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/i<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>i<span style="box-sizing: inherit; color: red;"> class<span style="box-sizing: inherit; color: mediumblue;">="fa fa-car fa-4x"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/i<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>i<span style="box-sizing: inherit; color: red;"> class<span style="box-sizing: inherit; color: mediumblue;">="fa fa-car fa-5x"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/i<span style="box-sizing: inherit; color: mediumblue;">></span></span></div>
</blockquote>
<br />
The Result Will Be :<br />
<br /></div>
<br />
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
<br />
<br />
<h1 style="background-color: white; box-sizing: inherit; font-family: "Segoe UI", Arial, sans-serif; font-size: 36px; font-weight: 400; margin: 10px 0px;">
List Icons</h1>
<div style="background-color: white; box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">
The <code class="w3-codespan" style="background-color: #f1f1f1; box-sizing: inherit; color: crimson; font-family: Consolas, "courier new"; font-size: 16.5px; padding-left: 4px; padding-right: 4px;">fa-ul</code> and <code class="w3-codespan" style="background-color: #f1f1f1; box-sizing: inherit; color: crimson; font-family: Consolas, "courier new"; font-size: 16.5px; padding-left: 4px; padding-right: 4px;">fa-li</code> classes are used to replace default bullets in unordered lists.</div>
<div style="background-color: white; box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">
<br /></div>
<blockquote class="tr_bq" style="background-color: white; box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">
<h3 style="box-sizing: inherit; font-family: "Segoe UI", Arial, sans-serif; font-size: 24px; font-weight: 400; margin: 10px 0px;">
Example</h3>
<div style="box-sizing: inherit;">
The following code:</div>
<div class="w3-code notranslate htmlHigh" style="border-left: 4px solid rgb(76, 175, 80); box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px; margin-bottom: 16px !important; margin-top: 16px !important; overflow-wrap: break-word; padding: 8px 12px; width: auto;">
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>ul<span style="box-sizing: inherit; color: red;"> class<span style="box-sizing: inherit; color: mediumblue;">="fa-ul"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>li<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>i<span style="box-sizing: inherit; color: red;"> class<span style="box-sizing: inherit; color: mediumblue;">="fa-li fa fa-check-square"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/i<span style="box-sizing: inherit; color: mediumblue;">></span></span>List icons<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/li<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>li<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>i<span style="box-sizing: inherit; color: red;"> class<span style="box-sizing: inherit; color: mediumblue;">="fa-li fa fa-spinner fa-spin"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/i<span style="box-sizing: inherit; color: mediumblue;">></span></span>List icons<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/li<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>li<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>i<span style="box-sizing: inherit; color: red;"> class<span style="box-sizing: inherit; color: mediumblue;">="fa-li fa fa-square"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/i<span style="box-sizing: inherit; color: mediumblue;">></span></span>List icons<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/li<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/ul<span style="box-sizing: inherit; color: mediumblue;">></span></span></div>
</blockquote>
<br />
The Result Will Be :<br />
<br /></div>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li>
<li><i class="fa-li fa fa-square"></i>List icons</li>
</ul>
<br />
<h1 style="background-color: white; box-sizing: inherit; font-family: "Segoe UI", Arial, sans-serif; font-size: 36px; font-weight: 400; margin: 10px 0px;">
Animated Icons</h1>
<div style="background-color: white; box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">
The <code class="w3-codespan" style="background-color: #f1f1f1; box-sizing: inherit; color: crimson; font-family: Consolas, "courier new"; font-size: 16.5px; padding-left: 4px; padding-right: 4px;">fa-spin</code> class gets any icon to rotate, and the <code class="w3-codespan" style="background-color: #f1f1f1; box-sizing: inherit; color: crimson; font-family: Consolas, "courier new"; font-size: 16.5px; padding-left: 4px; padding-right: 4px;">fa-pulse</code> class gets any icon to rotate with 8 steps.</div>
<div style="background-color: white; box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">
<br /></div>
<blockquote class="tr_bq" style="background-color: white; box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">
<h3 style="box-sizing: inherit; font-family: "Segoe UI", Arial, sans-serif; font-size: 24px; font-weight: 400; margin: 10px 0px;">
Example</h3>
<div style="box-sizing: inherit;">
The following code:</div>
<div class="w3-code notranslate htmlHigh" style="border-left: 4px solid rgb(76, 175, 80); box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px; margin-bottom: 16px !important; margin-top: 16px !important; overflow-wrap: break-word; padding: 8px 12px; width: auto;">
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>i<span style="box-sizing: inherit; color: red;"> class<span style="box-sizing: inherit; color: mediumblue;">="fa fa-spinner fa-spin"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/i<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>i<span style="box-sizing: inherit; color: red;"> class<span style="box-sizing: inherit; color: mediumblue;">="fa fa-circle-o-notch fa-spin"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/i<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>i<span style="box-sizing: inherit; color: red;"> class<span style="box-sizing: inherit; color: mediumblue;">="fa fa-refresh fa-spin"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/i<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>i<span style="box-sizing: inherit; color: red;"> class<span style="box-sizing: inherit; color: mediumblue;">="fa fa-cog fa-spin"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/i<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>i<span style="box-sizing: inherit; color: red;"> class<span style="box-sizing: inherit; color: mediumblue;">="fa fa-spinner fa-pulse"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/i<span style="box-sizing: inherit; color: mediumblue;">></span></span></div>
</blockquote>
<br />
The Result Will Be Like :<br />
<br /></div>
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>
<br />
<br />
<h1 style="background-color: white; box-sizing: inherit; font-family: "Segoe UI", Arial, sans-serif; font-size: 36px; font-weight: 400; margin: 10px 0px;">
Stacked Icons</h1>
<div style="background-color: white; box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">
To stack multiple icons, use the <code class="w3-codespan" style="background-color: #f1f1f1; box-sizing: inherit; color: crimson; font-family: Consolas, "courier new"; font-size: 16.5px; padding-left: 4px; padding-right: 4px;">fa-stack</code>class on the parent, the <code class="w3-codespan" style="background-color: #f1f1f1; box-sizing: inherit; color: crimson; font-family: Consolas, "courier new"; font-size: 16.5px; padding-left: 4px; padding-right: 4px;">fa-stack-1x</code> class for the regularly sized icon, and <code class="w3-codespan" style="background-color: #f1f1f1; box-sizing: inherit; color: crimson; font-family: Consolas, "courier new"; font-size: 16.5px; padding-left: 4px; padding-right: 4px;">fa-stack-2x</code> for the larger icon.</div>
<div style="background-color: white; box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">
The <code class="w3-codespan" style="background-color: #f1f1f1; box-sizing: inherit; color: crimson; font-family: Consolas, "courier new"; font-size: 16.5px; padding-left: 4px; padding-right: 4px;">fa-inverse</code> class can be used as an alternative icon color. You can also add larger icon classes to the parent to further control the sizing.</div>
<div style="background-color: white; box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">
<br /></div>
<blockquote class="tr_bq" style="background-color: white; box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">
<h3 style="box-sizing: inherit; font-family: "Segoe UI", Arial, sans-serif; font-size: 24px; font-weight: 400; margin: 10px 0px;">
Example</h3>
<div style="box-sizing: inherit;">
The following code:</div>
<div class="w3-code notranslate htmlHigh" style="border-left: 4px solid rgb(76, 175, 80); box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px; margin-bottom: 16px !important; margin-top: 16px !important; overflow-wrap: break-word; padding: 8px 12px; width: auto;">
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>span<span style="box-sizing: inherit; color: red;"> class<span style="box-sizing: inherit; color: mediumblue;">="fa-stack fa-lg"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>i<span style="box-sizing: inherit; color: red;"> class<span style="box-sizing: inherit; color: mediumblue;">="fa fa-circle-thin fa-stack-2x"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/i<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>i<span style="box-sizing: inherit; color: red;"> class<span style="box-sizing: inherit; color: mediumblue;">="fa fa-twitter fa-stack-1x"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/i<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/span<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
fa-twitter on fa-circle-thin<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>br<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<br style="box-sizing: inherit;" />
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>span<span style="box-sizing: inherit; color: red;"> class<span style="box-sizing: inherit; color: mediumblue;">="fa-stack fa-lg"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>i<span style="box-sizing: inherit; color: red;"> class<span style="box-sizing: inherit; color: mediumblue;">="fa fa-circle fa-stack-2x"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/i<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>i<span style="box-sizing: inherit; color: red;"> class<span style="box-sizing: inherit; color: mediumblue;">="fa fa-twitter fa-stack-1x fa-inverse"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/i<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/span<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
fa-twitter (inverse) on fa-circle<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>br<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<br style="box-sizing: inherit;" />
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>span<span style="box-sizing: inherit; color: red;"> class<span style="box-sizing: inherit; color: mediumblue;">="fa-stack fa-lg"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>i<span style="box-sizing: inherit; color: red;"> class<span style="box-sizing: inherit; color: mediumblue;">="fa fa-camera fa-stack-1x"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/i<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>i<span style="box-sizing: inherit; color: red;"> class<span style="box-sizing: inherit; color: mediumblue;">="fa fa-ban fa-stack-2x text-danger"</span>style<span style="box-sizing: inherit; color: mediumblue;">="color:red;"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/i<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/span<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
fa-ban on fa-camera</div>
</blockquote>
<br />
The Result Will Be Like :<br />
<br /></div>
<span class="fa-stack fa-lg">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle-thin<br />
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle<br />
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger" style="color: red;"></i>
</span>
fa-ban on fa-camera
<br />
<br />
<h2 style="text-align: left;">
<span style="color: #6fa8dc;">So Guys Hope You All Understand Font Awesome Today. Comment Below What You want In The Next Post......</span></h2>
<div>
<span style="color: #6fa8dc;">Special Thanks To</span></div>
<div>
<span style="color: #6aa84f;"><u>w3school.,</u></span></div>
</div>
M. Limonhttp://www.blogger.com/profile/07103600535159878470noreply@blogger.com0tag:blogger.com,1999:blog-6285988562391449784.post-40986559829225291782019-02-05T14:43:00.000+06:002019-07-31T02:06:56.269+06:00Testing Post<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsKwskxINaHnK-cghWCv2X2z6POFdYS-Gi9B9H_LKgMS4OXpzPJ9O8IvxlFoIolulkP5SxBTjOKbldyWi8X9NkPSdYr_qgdRvhnCw8XhYKSGmPsGdDj1Wm2sCwfOo9-rI-nv_522nHlAo/s1600/20190227_222122.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1600" data-original-width="1600" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsKwskxINaHnK-cghWCv2X2z6POFdYS-Gi9B9H_LKgMS4OXpzPJ9O8IvxlFoIolulkP5SxBTjOKbldyWi8X9NkPSdYr_qgdRvhnCw8XhYKSGmPsGdDj1Wm2sCwfOo9-rI-nv_522nHlAo/s320/20190227_222122.jpg" width="320" /></a></div>
<br />
<div style="background: none rgb(255, 255, 255); border: 0px; color: #222222; font-family: "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
Hitler was born in Austria—then part of <a href="https://en.m.wikipedia.org/wiki/Austria-Hungary" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Austria-Hungary">Austria-Hungary</a>—and was raised near <a href="https://en.m.wikipedia.org/wiki/Linz" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Linz">Linz</a>. He moved to Germany in 1913 and was decorated during his <a href="https://en.m.wikipedia.org/wiki/Military_career_of_Adolf_Hitler" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Military career of Adolf Hitler">service in the German Army</a> in <a href="https://en.m.wikipedia.org/wiki/World_War_I" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="World War I">World War I</a>. In 1919, he joined the <a href="https://en.m.wikipedia.org/wiki/German_Workers%27_Party" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="German Workers' Party">German Workers' Party</a> (DAP), the precursor of the NSDAP, and was appointed leader of the NSDAP in 1921. In 1923, he attempted to seize power in <a href="https://en.m.wikipedia.org/wiki/Beer_Hall_Putsch" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Beer Hall Putsch">a failed coup in Munich</a> and was imprisoned. In jail, he dictated the first volume of his autobiography and political manifesto <i style="background: none; border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><a href="https://en.m.wikipedia.org/wiki/Mein_Kampf" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Mein Kampf">Mein Kampf</a></i> ("My Struggle"). After his release in 1924, Hitler gained popular support by attacking the <a href="https://en.m.wikipedia.org/wiki/Treaty_of_Versailles" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Treaty of Versailles">Treaty of Versailles</a>and promoting <a href="https://en.m.wikipedia.org/wiki/Pan-Germanism" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Pan-Germanism">Pan-Germanism</a>, <a class="mw-redirect" href="https://en.m.wikipedia.org/wiki/Anti-semitism" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Anti-semitism">anti-semitism</a>and <a href="https://en.m.wikipedia.org/wiki/Anti-communism" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Anti-communism">anti-communism</a> with <a href="https://en.m.wikipedia.org/wiki/Charismatic_authority" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Charismatic authority">charismatic</a> oratory and <a class="mw-redirect" href="https://en.m.wikipedia.org/wiki/Nazi_propaganda" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Nazi propaganda">Nazi propaganda</a>. He frequently denounced international capitalism and communism as part of a <a href="https://en.m.wikipedia.org/wiki/Antisemitic_canard" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Antisemitic canard">Jewish conspiracy</a>.</div>
<div style="background: none rgb(255, 255, 255); border: 0px; color: #222222; font-family: "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
By July 1932 the Nazi Party was the largest elected party in the German <a href="https://en.m.wikipedia.org/wiki/Reichstag_(Weimar_Republic)" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Reichstag (Weimar Republic)">Reichstag</a>, but did not have a majority, and no party was able to form a majority parliamentary coalition in support of a candidate for chancellor. Former chancellor <a href="https://en.m.wikipedia.org/wiki/Franz_von_Papen" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Franz von Papen">Franz von Papen</a> and other conservative leaders persuaded President <a href="https://en.m.wikipedia.org/wiki/Paul_von_Hindenburg" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Paul von Hindenburg">Paul von Hindenburg</a> to appoint Hitler as Chancellor on 30 January 1933. Shortly after, the Reichstag passed the <a href="https://en.m.wikipedia.org/wiki/Enabling_Act_of_1933" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Enabling Act of 1933">Enabling Act of 1933</a>, which began the process of transforming the <a href="https://en.m.wikipedia.org/wiki/Weimar_Republic" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Weimar Republic">Weimar Republic</a> into <a href="https://en.m.wikipedia.org/wiki/Nazi_Germany" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Nazi Germany">Nazi Germany</a>, a <a href="https://en.m.wikipedia.org/wiki/One-party_state" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="One-party state">one-party</a> dictatorship based on the <a class="mw-redirect" href="https://en.m.wikipedia.org/wiki/Totalitarian" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Totalitarian">totalitarian</a> and <a class="mw-redirect" href="https://en.m.wikipedia.org/wiki/Autocratic" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Autocratic">autocratic</a> ideology of <a class="mw-redirect" href="https://en.m.wikipedia.org/wiki/National_Socialism" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="National Socialism">National Socialism</a>. Hitler aimed to eliminate Jews from Germany and establish a <a href="https://en.m.wikipedia.org/wiki/New_Order_(Nazism)" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="New Order (Nazism)">New Order</a> to counter what he saw as the injustice of the post-World War I international order dominated by Britain and France. His first six years in power resulted in rapid economic recovery from the <a href="https://en.m.wikipedia.org/wiki/Great_Depression" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Great Depression">Great Depression</a>, the abrogation of restrictions imposed on Germany after World War I, and the annexation of territories inhabited by millions of <a class="mw-redirect" href="https://en.m.wikipedia.org/wiki/Ethnic_Germans" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Ethnic Germans">ethnic Germans</a>, which gave him significant popular support.</div>
<div style="background: none rgb(255, 255, 255); border: 0px; color: #222222; font-family: "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; margin-top: 0.5em; padding: 0px; vertical-align: baseline;">
Hitler sought <i style="background: none; border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><a href="https://en.m.wikipedia.org/wiki/Lebensraum" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Lebensraum">Lebensraum</a></i> ("living space") for the German people in Eastern Europe, and his aggressive foreign policy is considered the primary cause of World War II in Europe. He directed large-scale rearmament and, on 1 September 1939, invaded Poland, resulting in Britain and France <a href="https://en.m.wikipedia.org/wiki/British_and_French_declaration_of_war_on_Germany" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="British and French declaration of war on Germany">declaring war on Germany</a>. In June 1941, Hitler ordered an <a href="https://en.m.wikipedia.org/wiki/Operation_Barbarossa" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Operation Barbarossa">invasion of the Soviet Union</a>. By the end of 1941, German forces and the European <a href="https://en.m.wikipedia.org/wiki/Axis_powers" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Axis powers">Axis powers</a>occupied most of Europe and <a href="https://en.m.wikipedia.org/wiki/North_African_Campaign" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="North African Campaign">North Africa</a>. In December 1941, he declared war on the United States, bringing them directly into the conflict. Failure to defeat the Soviets and the entry of the United States into the war forced Germany onto the defensive and it suffered a series of escalating defeats. In the final days of the war, during the <a href="https://en.m.wikipedia.org/wiki/Battle_of_Berlin" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Battle of Berlin">Battle of Berlin</a> in 1945, he married his longtime lover <a href="https://en.m.wikipedia.org/wiki/Eva_Braun" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Eva Braun">Eva Braun</a>. Less than two days later, on 30 April 1945, the two <a href="https://en.m.wikipedia.org/wiki/Death_of_Adolf_Hitler" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Death of Adolf Hitler">committed suicide</a> to avoid capture by the Soviet <a href="https://en.m.wikipedia.org/wiki/Red_Army" style="background: none; border: 0px; color: #6b4ba1; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" title="Red Army">Red Army</a>; their corpses were burned.</div>
<br />
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Features</th> <th>Availability</th> </tr>
<tr> <td>Responsive</td> <td>True <a href="http://www.responsinator.com/?url=http%3A%2F%2Fse7enmag.blogspot.com%2F" rel="nofollow noopener" target="_blank">Cek</a></td> </tr>
<tr> <td>Google Testing Tool Validator</td> <td>True <a href="https://developers.google.com/structured-data/testing-tool?url=http%253A%252F%252Fse7enmag.blogspot.co.id%252F" rel="nofollow noopener" target="_blank">Cek</a></td> </tr>
<tr> <td>SEO Friendly</td> <td>True <a href="http://chkme.com/seo-se7enmag.blogspot.com" rel="nofollow noopener" target="_blank">Cek</a></td> </tr>
<tr> <td>Mobile Friendly</td> <td>True <a href="https://www.google.com/webmasters/tools/mobile-friendly/?url=http%3A%2F%2Fse7enmag.blogspot.com" target="_blank">Cek</a></td> </tr>
<tr> <td>Dynamic Heading</td> <td>True</td> </tr>
<tr> <td>Adsense Ready</td> <td>True</td> </tr>
<tr> <td>Valid Schema.org</td> <td>True</td> </tr>
<tr> <td>High CTR</td> <td>True</td> </tr>
<tr> <td>Personal Blog</td> <td>True</td> </tr>
<tr> <td>2 Column</td> <td>True</td> </tr>
<tr> <td>Auto Read More with Thumbnail</td> <td>True</td> </tr>
<tr> <td>Responsive Ad Slot</td> <td>True</td> </tr>
<tr> <td>Breadcrumbs</td> <td>True</td> </tr>
<tr> <td>About Me Widget</td> <td>True</td> </tr>
<tr> <td>Related Posts with Thumb</td> <td>True</td> </tr>
<tr> <td>Search Box</td> <td>True</td> </tr>
<tr> <td>Social Share Button</td> <td>True</td> </tr>
<tr> <td>Responsive Dropdown Menu</td> <td>True</td> </tr>
<tr> <td>Smooth Back to Top</td> <td>True</td> </tr>
<tr> <td>Shortcodes</td> <td>True</td> </tr>
<tr> <td>Unlimited Page Numbered</td> <td>True</td> </tr>
</tbody> </table>
<br />
<div id="Theme-details">
<div id="store-style">
<a class="storebutton but1" href="http://se7enmag.blogspot.com/" rel="nofollow noopener" target="_blank">Live Preview</a><br />
<a class="storebutton but1" href="http://vikkadua.blogspot.com/" rel="nofollow noopener" target="_blank">Premium Version 1</a><br />
<a class="storebutton but1" href="http://nlight2017.blogspot.com/" rel="nofollow noopener" target="_blank">Premium Version 2</a><br />
<a class="storebutton but1" href="http://nlight2018.blogspot.com/" rel="nofollow noopener" target="_blank">Premium Version 3</a><br />
<div class="rio-ss idb">
See it live with all the features that exist, both on the homepage and the page posts.</div>
</div>
<div id="store-style">
<a class="storebutton but1 free" href="https://bit.ly/2L5bNIL" rel="nofollow noopener" target="_blank">Free Download</a><br />
<a class="storebutton but2" href="http://www.idntheme.com/p/contact-form.html" target="_blank">$7.69 - Buy Now</a><br />
<div class="rio-ss">
<span class="storelist">Support Template Update</span><br />
<span class="storelist">Remove Footer Credits</span><br />
<span class="storelist">For Unlimited Domains</span><br />
<span class="storelist">No Encrypted Scripts</span><br />
<span class="storelist">7 Varian Template</span><br />
<span class="storelist">Recent Post with Thumbnail</span><br />
<span class="storelist">Floating Search Box</span><br />
<span class="storelist">Newsletter</span><br />
<span class="storelist">Random Post Menu</span><br />
<span class="storelist">And Many More...</span></div>
</div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9UpshEmWLBhbQgYRx9FGURhzrWGdY4RCpz5e5-MpAC9Gfq9MRItj64m1aIvR4EGTCfvyLqcOfiSypncDEeWE9cQDTOAHd5ka0WRGwLiKITu0Sy8uVG0pJJ5QJqts39KyzOst0QTB3bU/s1600/btemplatesbd.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1600" data-original-width="1600" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9UpshEmWLBhbQgYRx9FGURhzrWGdY4RCpz5e5-MpAC9Gfq9MRItj64m1aIvR4EGTCfvyLqcOfiSypncDEeWE9cQDTOAHd5ka0WRGwLiKITu0Sy8uVG0pJJ5QJqts39KyzOst0QTB3bU/s320/btemplatesbd.png" width="320" /></a></div>
<div class="clear">
</div>
</div>
M. Limonhttp://www.blogger.com/profile/07103600535159878470noreply@blogger.com0