ISLAM PKI: blogger template

ArticleMag Responsive Blogger Theme

June 14, 2017 Imdad Ullah 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 class="post-title entry-title" itemprop="name" style="background-color: white; border-bottom: 2px solid rgb(68, 68, 68); border-top: 2px solid rgb(68, 68, 68); color: #444444; font-family: "Martel Sans", sans-serif; font-size: 37px; font-variant-caps: small-caps; font-variant-numeric: normal; margin-bottom: 40px; text-align: center; transition: all 0.5s ease;">
ArticleMag Responsive Blogger Theme</h1>
<div class="post-header" style="background-color: white; color: #333333; font-family: "PT Sans Caption", sans-serif; transition: all 0.5s ease;">
<div class="post-header-line-1" style="transition: all 0.5s ease;">
</div>
</div>
<div class="post-body entry-content" id="post-body-614017467475012691" itemprop="articleBody" style="background-color: white; color: #333333; font-family: "PT Sans Caption", sans-serif; transition: all 0.5s ease;">
<div class="template-demo" style="background: rgb(247, 247, 247); border: 1px solid rgb(221, 221, 221); padding: 25px 20px; text-align: center; transition: all 0.5s ease;">
<img alt="ArticleMag Blogger Theme" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDAV1eNRHDRnc47INmIu-Bc1BB9_sQ5-Eta_CMUdkj3u4c9lj2a-51UHV_wDrD_EKAQD42YBTKxgrIQr2-EVDApX_LLYpSx-J7D-P3Du0v411MJfjTYxuIDFwMdC0q3v_x52X7k-FYUuw8/s1600/main.PNG" style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgITh6nDcuFDkb_27eDir9oVno5JuxviucEZGICyjfj_OkZACEIJSeUG8d8IhEL8t4sww5jvAEfcUw2kjaYJXcrCfLTei_1WsQB7CEGCLI74vpNs28mjx-4qrC6qltl5XhTh_hrCv1GZSY9/s1600/image-layout.png") left top no-repeat scroll rgba(0, 0, 0, 0); border-radius: 6px 6px 0px 0px; border: 1px solid rgb(221, 221, 221); cursor: pointer; float: none; height: 315.469px; margin-top: 1px; max-width: 750px; overflow: hidden; padding: 22px 0px 0px; transition: all 0.5s ease; vertical-align: middle; width: 631.771px;" /><br />
<div class="demotab" style="margin: 30px auto auto; transition: all 0.5s ease; width: 175px;">
<h4>
<a href="https://drive.google.com/file/d/0B_h6HSKP0uakT3lRQlpnYVlaWjQ/view?usp=sharing"><img border="0" data-original-height="117" data-original-width="234" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivZWtu55ICNvElypac5dDQp92R0R41as3c2sC8sxosnJWr1_A9faEXyRu6FZD7KKtGkE1jcuRh3GViVCetlDQ8i_KyPtdxOo-VynpCGFG5MnP2P9_YYf6Va16Hw8Y-VyB79FjV-jEkfDoJ/s1600/seo+time+download.jpg" /></a><span style="background-color: #0091f8; color: #444444; display: inline-block; font-size: large; font-weight: 700; padding-right: 13px; transition: all 0.5s ease;"><a class="demo-buttons" data-tsdemo="true" href="http://articlemagtheme.blogspot.com/" style="background-color: #0091f8; color: #444444; display: inline-block; font-weight: 700; padding-right: 13px; text-decoration-line: none; transition: all 0.5s ease;" target="_blank">Live Preview</a></span></h4>
<h4>
</h4>
</div>
</div>
<div class="template-details" style="margin-top: 50px; transition: all 0.5s ease;">
<br />
<li style="border: 1px solid rgb(221, 221, 221); display: block; float: left; line-height: 25px; list-style: none outside none; margin-bottom: 20px; margin-left: 0px; padding: 0px; transition: all 0.5s ease; width: 673.993px;"><h4 style="border-bottom: 1px solid rgb(221, 221, 221); color: #0091f8; font-size: 20px; font-weight: normal; letter-spacing: 1px; margin: 0px; padding: 10px; text-transform: uppercase; transition: all 0.5s ease;">
<span class="fa fa-edit" style="background: rgb(0 , 145 , 248); border-radius: 100%; color: white; display: inline-block; font-family: "fontawesome"; font-size: 26px; font-stretch: normal; height: 53px; line-height: 53px; margin-right: 15px; text-align: center; transition: all 0.5s ease; width: 53px;"></span>DESCRIPTION</h4>
<div style="font-size: 16.5px; line-height: 28px; padding: 15px 20px; transition: all 0.5s ease;">
Now we come back with another awesome article writing theme "Article Mag" which is purely design for article writing blogs. This theme has lots of perks for SEO as well as for user interaction as like our previous theme <a href="http://www.templatesilk.com/2016/09/seo-time-responsive-blogger-template.html" style="border-bottom: 1px solid rgb(0, 145, 248); color: #0091f8; font-weight: bold; padding: 0px 3px 1px; text-decoration-line: none; transition: all 0.5s ease;">SEO TIME</a>. In this fast pace of high competition in Google search results and higher authority platforms like WordPress which has much SEO Features and plugins than bloggers, but now you don't need to worry about it because we design this theme totally comparative to WordPress Functions. You will feel the same look and Quality in this theme as normal you see in popular WordPress blogs. Qualities and features of Article Mag are mentioned below.</div>
</li>
<li style="border: 1px solid rgb(221, 221, 221); display: block; float: left; line-height: 25px; list-style: none outside none; margin-bottom: 20px; margin-left: 0px; padding: 0px; transition: all 0.5s ease; width: 673.993px;"><h4 style="border-bottom: 1px solid rgb(221, 221, 221); color: #0091f8; font-size: 20px; font-weight: normal; letter-spacing: 1px; margin: 0px; padding: 10px; text-transform: uppercase; transition: all 0.5s ease;">
<span class="fa fa-mobile" style="background: rgb(0 , 145 , 248); border-radius: 100%; color: white; display: inline-block; font-family: "fontawesome"; font-size: 26px; font-stretch: normal; height: 53px; line-height: 53px; margin-right: 15px; text-align: center; transition: all 0.5s ease; width: 53px;"></span>ULTRA RESPONSIVE</h4>
<div style="font-size: 16.5px; line-height: 28px; padding: 15px 20px; transition: all 0.5s ease;">
Like our previous portfolio theme <a href="http://www.templatesilk.com/2017/03/picolio-responsive-blogger-theme.html" style="border-bottom: 1px solid rgb(0, 145, 248); color: #0091f8; font-weight: bold; padding: 0px 3px 1px; text-decoration-line: none; transition: all 0.5s ease;">Picolio</a>, it is fully responsive and breaks point FREE Theme. You can check it's responsiveness on every other new and old browser.</div>
<div class="list-images" style="margin: auto; max-width: 650px; padding: 0px 10px; transition: all 0.5s ease;">
<img alt="ArticleMag Blogger Theme" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRhoOkH7EmEQx_zz8OA_Pj_IzCopwi9LT9cvaFE1QjuvDYMncXtjJXH2uCWVdUSlv-mDjTgoc4bPVv6lLmRABiWkDfuhHG95otG-tA3EkCFdN8kh0QyDLZEHkSVHTtufioT-aMXnuf0MGA/s1600/M2.png" style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgITh6nDcuFDkb_27eDir9oVno5JuxviucEZGICyjfj_OkZACEIJSeUG8d8IhEL8t4sww5jvAEfcUw2kjaYJXcrCfLTei_1WsQB7CEGCLI74vpNs28mjx-4qrC6qltl5XhTh_hrCv1GZSY9/s1600/image-layout.png") left top no-repeat scroll rgba(0, 0, 0, 0); border-radius: 6px 6px 0px 0px; border: 1px solid rgb(221, 221, 221); float: none; height: 433.056px; margin-bottom: 25px; margin-top: 1px; overflow: hidden; padding: 22px 0px 0px; transition: all 0.5s ease; vertical-align: middle; width: 650px;" /><img alt="ArticleMag Blogger Theme" height="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmc8zBVqLJpmakLl9ZR98sxvqpUbvD360A_rhlDlgWhx9miJ17I6McGbvfY4t5hEl5b8ug9jg8fuH3z5Z_Exm6nrdhQ-D46naP-GEfsS0ohyvkpFPFx5qeEuXT08NY1-uc_Zib43YmNZL4/s320/M3.PNG" style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgITh6nDcuFDkb_27eDir9oVno5JuxviucEZGICyjfj_OkZACEIJSeUG8d8IhEL8t4sww5jvAEfcUw2kjaYJXcrCfLTei_1WsQB7CEGCLI74vpNs28mjx-4qrC6qltl5XhTh_hrCv1GZSY9/s1600/image-layout.png") left top no-repeat scroll rgba(0, 0, 0, 0); border-radius: 6px 6px 0px 0px; border: 1px solid rgb(221, 221, 221); float: none; height: 388.125px; margin-bottom: 25px; margin-top: 1px; overflow: hidden; padding: 22px 0px 0px; transition: all 0.5s ease; vertical-align: middle; width: 650px;" width="320" /></div>
</li>
<li style="border: 1px solid rgb(221, 221, 221); display: block; float: left; line-height: 25px; list-style: none outside none; margin-bottom: 20px; margin-left: 0px; padding: 0px; transition: all 0.5s ease; width: 673.993px;"><h4 style="border-bottom: 1px solid rgb(221, 221, 221); color: #0091f8; font-size: 20px; font-weight: normal; letter-spacing: 1px; margin: 0px; padding: 10px; text-transform: uppercase; transition: all 0.5s ease;">
<span class="fa fa-pie-chart" style="background: rgb(0 , 145 , 248); border-radius: 100%; color: white; display: inline-block; font-family: "fontawesome"; font-size: 26px; font-stretch: normal; height: 53px; line-height: 53px; margin-right: 15px; text-align: center; transition: all 0.5s ease; width: 53px;"></span>SEO FRIENDLY</h4>
<div style="font-size: 16.5px; line-height: 28px; padding: 15px 20px; transition: all 0.5s ease;">
After Google New Update of Schema and micro tags, our SEO staff has added the all present schema and micro tags in it with perfect implementation of WordPress head to footer tags.</div>
</li>
<li style="border: 1px solid rgb(221, 221, 221); display: block; float: left; line-height: 25px; list-style: none outside none; margin-bottom: 20px; margin-left: 0px; padding: 0px; transition: all 0.5s ease; width: 673.993px;"><h4 style="border-bottom: 1px solid rgb(221, 221, 221); color: #0091f8; font-size: 20px; font-weight: normal; letter-spacing: 1px; margin: 0px; padding: 10px; text-transform: uppercase; transition: all 0.5s ease;">
<span class="fa fa-bell-o" style="background: rgb(0 , 145 , 248); border-radius: 100%; color: white; display: inline-block; font-family: "fontawesome"; font-size: 26px; font-stretch: normal; height: 53px; line-height: 53px; margin-right: 15px; text-align: center; transition: all 0.5s ease; width: 53px;"></span>SMO READY</h4>
<div style="font-size: 16.5px; line-height: 28px; padding: 15px 20px; transition: all 0.5s ease;">
It is ultimately ready for any social site with new and updated permalink structure.</div>
</li>
<li style="border: 1px solid rgb(221, 221, 221); display: block; float: left; line-height: 25px; list-style: none outside none; margin-bottom: 20px; margin-left: 0px; padding: 0px; transition: all 0.5s ease; width: 673.993px;"><h4 style="border-bottom: 1px solid rgb(221, 221, 221); color: #0091f8; font-size: 20px; font-weight: normal; letter-spacing: 1px; margin: 0px; padding: 10px; text-transform: uppercase; transition: all 0.5s ease;">
<span class="fa fa-book" style="background: rgb(0 , 145 , 248); border-radius: 100%; color: white; display: inline-block; font-family: "fontawesome"; font-size: 26px; font-stretch: normal; height: 53px; line-height: 53px; margin-right: 15px; text-align: center; transition: all 0.5s ease; width: 53px;"></span>UNIQUE TRANSITION MENU</h4>
<div style="font-size: 16.5px; line-height: 28px; padding: 15px 20px; transition: all 0.5s ease;">
We have added a unique transition menu which will describe your whole blog in menu icons. This modern navigation has auto blog title and search box joins with it.</div>
</li>
<li style="border: 1px solid rgb(221, 221, 221); display: block; float: left; line-height: 25px; list-style: none outside none; margin-bottom: 20px; margin-left: 0px; padding: 0px; transition: all 0.5s ease; width: 673.993px;"><h4 style="border-bottom: 1px solid rgb(221, 221, 221); color: #0091f8; font-size: 20px; font-weight: normal; letter-spacing: 1px; margin: 0px; padding: 10px; text-transform: uppercase; transition: all 0.5s ease;">
<span class="fa fa-history" style="background: rgb(0 , 145 , 248); border-radius: 100%; color: white; display: inline-block; font-family: "fontawesome"; font-size: 26px; font-stretch: normal; height: 53px; line-height: 53px; margin-right: 15px; text-align: center; transition: all 0.5s ease; width: 53px;"></span>TURBO SPEED</h4>
<div style="font-size: 16.5px; line-height: 28px; padding: 15px 20px; transition: all 0.5s ease;">
Be keeping in mind the page speed SEO Strategy we make this theme fast as possible with high quality and user-friendly interface.</div>
</li>
<li style="border: 1px solid rgb(221, 221, 221); display: block; float: left; line-height: 25px; list-style: none outside none; margin-bottom: 20px; margin-left: 0px; padding: 0px; transition: all 0.5s ease; width: 673.993px;"><h4 style="border-bottom: 1px solid rgb(221, 221, 221); color: #0091f8; font-size: 20px; font-weight: normal; letter-spacing: 1px; margin: 0px; padding: 10px; text-transform: uppercase; transition: all 0.5s ease;">
<span class="fa fa-cogs" style="background: rgb(0 , 145 , 248); border-radius: 100%; color: white; display: inline-block; font-family: "fontawesome"; font-size: 26px; font-stretch: normal; height: 53px; line-height: 53px; margin-right: 15px; text-align: center; transition: all 0.5s ease; width: 53px;"></span>AUTO CUSTOMIZATION</h4>
<div style="font-size: 16.5px; line-height: 28px; padding: 15px 20px; transition: all 0.5s ease;">
Article Mag is ready to customize blogger theme, from that you can change every single color, font-sizes, font-family and much more in a simple click. See the below video that how you can auto customize this theme.</div>
<div class="silk-embed" style="margin-bottom: 25px; text-align: center; transition: all 0.5s ease;">
<iframe allowfullscreen="" frameborder="0" height="360" src="https://www.youtube.com/embed/SjLhKC-f_ds?ecver=1" style="max-width: 100%; transition: all 0.5s ease;" width="640"></iframe></div>
<div class="list-images" style="margin: auto; max-width: 650px; padding: 0px 10px; transition: all 0.5s ease;">
</div>
</li>
<li style="border: 1px solid rgb(221, 221, 221); display: block; float: left; line-height: 25px; list-style: none outside none; margin-bottom: 20px; margin-left: 0px; padding: 0px; transition: all 0.5s ease; width: 673.993px;"><h4 style="border-bottom: 1px solid rgb(221, 221, 221); color: #0091f8; font-size: 20px; font-weight: normal; letter-spacing: 1px; margin: 0px; padding: 10px; text-transform: uppercase; transition: all 0.5s ease;">
<span class="fa fa-user" style="background: rgb(0 , 145 , 248); border-radius: 100%; color: white; display: inline-block; font-family: "fontawesome"; font-size: 26px; font-stretch: normal; height: 53px; line-height: 53px; margin-right: 15px; text-align: center; transition: all 0.5s ease; width: 53px;"></span>UNIQUE AUTHOR BOX</h4>
<div style="font-size: 16.5px; line-height: 28px; padding: 15px 20px; transition: all 0.5s ease;">
we added two unique author boxes in Article Mag, one you will see at on homepage just above the footer credits and one is present inside the internal post area.</div>
</li>
<li style="border: 1px solid rgb(221, 221, 221); display: block; float: left; line-height: 25px; list-style: none outside none; margin-bottom: 20px; margin-left: 0px; padding: 0px; transition: all 0.5s ease; width: 673.993px;"><h4 style="border-bottom: 1px solid rgb(221, 221, 221); color: #0091f8; font-size: 20px; font-weight: normal; letter-spacing: 1px; margin: 0px; padding: 10px; text-transform: uppercase; transition: all 0.5s ease;">
<span class="fa fa-sitemap" style="background: rgb(0 , 145 , 248); border-radius: 100%; color: white; display: inline-block; font-family: "fontawesome"; font-size: 26px; font-stretch: normal; height: 53px; line-height: 53px; margin-right: 15px; text-align: center; transition: all 0.5s ease; width: 53px;"></span>POWERFUL ADMIN PANEL</h4>
<div style="font-size: 16.5px; line-height: 28px; padding: 15px 20px; transition: all 0.5s ease;">
This theme has powerful admin panel from which you can easily adjust your layouts and gadgets in simple tweaks.</div>
<div class="list-images" style="margin: auto; max-width: 650px; padding: 0px 10px; transition: all 0.5s ease;">
</div>
</li>
<li style="border: 1px solid rgb(221, 221, 221); display: block; float: left; line-height: 25px; list-style: none outside none; margin-bottom: 20px; margin-left: 0px; padding: 0px; transition: all 0.5s ease; width: 673.993px;"><h4 style="border-bottom: 1px solid rgb(221, 221, 221); color: #0091f8; font-size: 20px; font-weight: normal; letter-spacing: 1px; margin: 0px; padding: 10px; text-transform: uppercase; transition: all 0.5s ease;">
<span class="fa fa-clone" style="background: rgb(0 , 145 , 248); border-radius: 100%; color: white; display: inline-block; font-family: "fontawesome"; font-size: 26px; font-stretch: normal; height: 53px; line-height: 53px; margin-right: 15px; text-align: center; transition: all 0.5s ease; width: 53px;"></span>GRID POST AREA</h4>
<div style="font-size: 16.5px; line-height: 28px; padding: 15px 20px; transition: all 0.5s ease;">
This theme has fresh and user-friendly grid design homepage area with author circular image and updated publishing time.</div>
</li>
<li style="border: 1px solid rgb(221, 221, 221); display: block; float: left; line-height: 25px; list-style: none outside none; margin-bottom: 20px; margin-left: 0px; padding: 0px; transition: all 0.5s ease; width: 673.993px;"><h4 style="border-bottom: 1px solid rgb(221, 221, 221); color: #0091f8; font-size: 20px; font-weight: normal; letter-spacing: 1px; margin: 0px; padding: 10px; text-transform: uppercase; transition: all 0.5s ease;">
<span class="fa fa-tags" style="background: rgb(0 , 145 , 248); border-radius: 100%; color: white; display: inline-block; font-family: "fontawesome"; font-size: 26px; font-stretch: normal; height: 53px; line-height: 53px; margin-right: 15px; text-align: center; transition: all 0.5s ease; width: 53px;"></span>INPOST DESIGN</h4>
<div style="font-size: 16.5px; line-height: 28px; padding: 15px 20px; transition: all 0.5s ease;">
It has comparatively fresh InPost design for eye catchy articles with a perfect user interface and text colors like you will see this same internal post design in some popular WordPress sites.</div>
</li>
<li style="border: 1px solid rgb(221, 221, 221); display: block; float: left; line-height: 25px; list-style: none outside none; margin-bottom: 20px; margin-left: 0px; padding: 0px; transition: all 0.5s ease; width: 673.993px;"><h4 style="border-bottom: 1px solid rgb(221, 221, 221); color: #0091f8; font-size: 20px; font-weight: normal; letter-spacing: 1px; margin: 0px; padding: 10px; text-transform: uppercase; transition: all 0.5s ease;">
<span class="fa fa-dollar" style="background: rgb(0 , 145 , 248); border-radius: 100%; color: white; display: inline-block; font-family: "fontawesome"; font-size: 26px; font-stretch: normal; height: 53px; line-height: 53px; margin-right: 15px; text-align: center; transition: all 0.5s ease; width: 53px;"></span>ADS FRIENDLY</h4>
<div style="font-size: 16.5px; line-height: 28px; padding: 15px 20px; transition: all 0.5s ease;">
Like our previous theme SEO TIME, this theme is also Ad Friendly with fast page load and mobile friendly interface with advertisement banners.</div>
</li>
<li style="border: 1px solid rgb(221, 221, 221); display: block; float: left; line-height: 25px; list-style: none outside none; margin-bottom: 20px; margin-left: 0px; padding: 0px; transition: all 0.5s ease; width: 673.993px;"><h4 style="border-bottom: 1px solid rgb(221, 221, 221); color: #0091f8; font-size: 20px; font-weight: normal; letter-spacing: 1px; margin: 0px; padding: 10px; text-transform: uppercase; transition: all 0.5s ease;">
<span class="fa fa-bullhorn" style="background: rgb(0 , 145 , 248); border-radius: 100%; color: white; display: inline-block; font-family: "fontawesome"; font-size: 26px; font-stretch: normal; height: 53px; line-height: 53px; margin-right: 15px; text-align: center; transition: all 0.5s ease; width: 53px;"></span>FINAL WORDS</h4>
<div style="font-size: 16.5px; line-height: 28px; padding: 15px 20px; transition: all 0.5s ease;">
If you like this theme, so don't forget to share it with your blogger friends and we are waiting to hear reviews about this theme in below comment box.</div>
</li>
</div>
<div id="Theme-details" style="transition: all 0.5s ease;">
</div>
<div style="clear: both; transition: all 0.5s ease;">
</div>
</div>
<div class="template-details" style="background-color: white; color: #333333; font-family: "PT Sans Caption", sans-serif; margin-top: 0px !important; transition: all 0.5s ease;">
<br />
<li style="border: 1px solid rgb(221, 221, 221); display: block; margin-bottom: 20px; margin-left: 0px; padding: 0px; transition: all 0.5s ease; width: 673.993px;"><h4 style="border-bottom: 1px solid rgb(221, 221, 221); color: #0091f8; font-size: 20px; font-weight: normal; letter-spacing: 1px; margin: 0px; padding: 10px; text-transform: uppercase; transition: all 0.5s ease;">
<span class="fa fa-tachometer" style="background: rgb(0 , 145 , 248); border-radius: 100%; color: white; display: inline-block; font-family: "fontawesome"; font-size: 26px; font-stretch: normal; height: 53px; line-height: 53px; margin-right: 15px; text-align: center; transition: all 0.5s ease; width: 53px;"></span>COMPATIBLE BROWSERS</h4>
<div style="font-size: 16.5px; line-height: 28px; padding: 15px 20px; transition: all 0.5s ease;">
Google Chrome, Mozilla Firefox, Safari, Opera, Microsoft Edge, Internet Explorer 9, Internet Explorer 10, Internet Explorer 11, Chromodo and UC Browser.</div>
</li>
</div>
</div>

blogger template ArticleMag Responsive Blogger Theme

ArticleMag Responsive Blogger Theme Live Preview DESCRIPTION Now we come back with another awesome article writing the...

June 13, 2017 Imdad Ullah 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div align="justify" style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 16px;">
<img alt="how to design responsive blogger templates" border="0" height="382" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmMvNwanGLXxfg-hUFLcO5WuczSwpU7AVw1P2oyj93NJXcXnbQDiKx7283nj_ldt-pA0zpKVE2h1RvLIeCdkzVw4rmXsISv7i9C5eGBZ8xdiyJ5e_SNKkXUTlCJYWs3pkng4dF1WavSJw/?imgmax=800" style="background-image: none; border-color: initial; border-style: initial; border-width: 0px; display: block; float: none; margin: 0px auto 6px; padding: 0px 0px 3px; transition: all 0.7s ease;" title="how to design responsive blogger templates" width="559" />Finally we are done with the most comprehensive and descriptive tutorial series on Google powered  blogger blogs. We have discussed the core basics to create and develop a mobile responsive layout using simple CSS3 @media queries and some built-in scripts. This series will help you understand the step-by-step effort involved in transforming an ordinary static, inflexible and non-responsive blogger template into a fluid and responsive one that may help you improve your Mobile Search traffic and better entertain your users with a mobile friendly user-interface (UI). A Mobile UI is an important SEO ranking metric and helps you improve your mobile pageviews and thereby the site CTR revenue.</div>
<center>
<div class="title-ad" style="border-top: 1px dotted rgb(221, 221, 221); margin: 20px 0px;">
<br /><ins id="aswift_2_expand" style="border: none; display: inline-table; height: 60px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 468px;"><ins id="aswift_2_anchor" style="border: none; display: block; height: 60px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 468px;"><iframe allowfullscreen="true" allowtransparency="true" frameborder="0" height="60" hspace="0" id="aswift_2" marginheight="0" marginwidth="0" name="aswift_2" scrolling="no" style="height: 60px; left: 0px; max-width: 100%; position: absolute; top: 0px; width: 468px;" vspace="0" width="468"></iframe></ins></ins> </div>
</center>
<h3 align="justify" style="background-color: white; border-bottom: 1px dotted rgb(78, 85, 90); border-top: 1px dotted rgb(78, 85, 90); color: #289728; font-family: helvetica, arial; font-size: 19.2px; line-height: 1.3em; margin-bottom: 10px; padding: 3px;">
Why bother creating a responsive design?</h3>
<div align="justify" style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 16px;">
Google recently rolled out a <a href="http://www.mybloggertricks.com/2015/04/new-google-mobile-friendly-update.html" style="color: #289728; outline: none; text-decoration-line: none;">Mobile Friendly update</a> on April 21, 2015, which boosts the ranking of mobile-friendly sites on mobile search results.  Google no longer favors fixed width layouts and recommends that all sites must provide better touch experience, where text should be readable without tapping or zooming, tap targets are spaced appropriately and the page avoids unplayable content or horizontal scrolling.</div>
<div align="justify" style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 16px;">
<strong>Running out of time?</strong> Let's read a brief summary to each part.</div>
<div align="center" class="box" style="background-color: lightyellow; border: 5px solid rgb(247, 240, 184); box-shadow: rgb(237, 227, 150) 1px 1px 0px; color: #707037; font-family: helvetica, arial; font-size: 16px; line-height: 1.4em; margin: 10px 0px 1.5em; padding: 1.2em;">
<span style="color: #ff8040; font-size: x-large;"><strong>Brief Summary</strong></span></div>
<div align="left" class="box" style="background-color: lightyellow; border: 5px solid rgb(247, 240, 184); box-shadow: rgb(237, 227, 150) 1px 1px 0px; color: #707037; font-family: helvetica, arial; font-size: 16px; line-height: 1.4em; margin: 10px 0px 1.5em; padding: 1.2em;">
<strong><span style="color: #333333; font-size: x-small;"><em>1. <a href="http://www.mybloggertricks.com/2013/05/design-responsive-blogger-template.html" style="color: #289728; outline: none; text-decoration-line: none;" target="_blank">Design a Responsive Blogger Template</a></em></span></strong></div>
<div align="justify" style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 16px;">
<span style="color: #d16349;"><span style="line-height: 1em;"><strong>H</strong></span></span>ere we demonstrated what exactly are responsive designs and how they are created using CSS3 @media screen queries. Normally mobile browsers emulates a desktop view by squeezing big resolutions into small screens that is often difficult to read and browse. You must be familiar that how difficult it is to click a web link in iphone unless you zoom it.</div>
<div align="justify" style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 16px;">
Therefore we make sure all elements on the site from buttons, links and images/media provide a better touch experience. To make them look big and clean with clear resolution all that needs to be done is to add Meta Viewport tag in the page header and some CSS3 Media queries that does all the job. </div>
<div align="left" class="box" style="background-color: lightyellow; border: 5px solid rgb(247, 240, 184); box-shadow: rgb(237, 227, 150) 1px 1px 0px; color: #707037; font-family: helvetica, arial; font-size: 16px; line-height: 1.4em; margin: 10px 0px 1.5em; padding: 1.2em;">
<strong><span style="font-size: x-small;"><span style="color: #333333;"><em>2.</em> <em><a href="http://www.mybloggertricks.com/2015/07/common-device-breakpoints-for-blogger-blogs.html" style="color: #289728; outline: none; text-decoration-line: none;" target="_blank">Common Device Breakpoints For a Responsive Blogspot Template</a></em></span></span></strong></div>
<div align="justify" style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 16px;">
<span style="color: #d16349;"><span style="line-height: 1em;"><strong>B</strong></span></span>reakpoints are points at which your layout design breaks or crashes. Breakpoints are CSS3 Media Queries that tells the browser which Layout to load for your website based on the screen size (viewport). It controls the display of your user interface (UI) on mobile devices.</div>
<div align="justify" style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 16px;">
With so many Mobile Products in market where each smartphone or tablet has a different Screen size, it is important that we select some <strong>Content Specific Breakpoints</strong> so that your blogspot page may adjust and fit perfectly to the different screen sizes and may not looked squeezed or poor in resolution<br /></div>
<div align="left" class="box" style="background-color: lightyellow; border: 5px solid rgb(247, 240, 184); box-shadow: rgb(237, 227, 150) 1px 1px 0px; color: #707037; font-family: helvetica, arial; font-size: 16px; line-height: 1.4em; margin: 10px 0px 1.5em; padding: 1.2em;">
<strong><em><span style="color: #333333;"><span style="font-size: x-small;">3. Hiding Widgets & Scripts in Mobile Templates </span><a href="http://www.mybloggertricks.com/2015/07/Blogger-Mobile-Conditional-Expressions.html" style="color: #289728; outline: none; text-decoration-line: none;" target="_blank"><span style="font-size: x-small;">[1],</span></a><span style="font-size: x-small;"> <a href="http://www.mybloggertricks.com/2015/07/disable-loading-javascript-and-html-in-mobile-devices.html" style="color: #289728; outline: none; text-decoration-line: none;" target="_blank">[2]</a></span></span></em></strong></div>
<div align="justify" style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 16px;">
<span style="color: #d16349;"><span style="line-height: 1em;"><strong>S</strong></span></span>urprisingly blogger templates supports a rarely used mobile conditional expression i.e. <strong>isMobileRequest</strong> which is a Globally Available Data which can be applied to any HTML DOM inside the template. <strong>isMobileRequest</strong>  is a Boolean Data Type that accepts only two values which is either True or False. It can be used to show or hide HTML content or widgets containers in smartphone devices. It currently does not support Tablets or iPads etc. but you can surely use it to prevent rendering of unnecessary widgets and scripts on mobile devices to speed up your page load time on small screen devices.</div>
<div align="justify" style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 16px;">
This tag also helps you to avoid using CSS Display:none  to hide content on your site which is not a SEO friendly approach to responsive designs. Thus it is really a time saving condition that gives you more control and power over the blog content that loads in mobile phones.</div>
<div align="left" class="box" style="background-color: lightyellow; border: 5px solid rgb(247, 240, 184); box-shadow: rgb(237, 227, 150) 1px 1px 0px; color: #707037; font-family: helvetica, arial; font-size: 16px; line-height: 1.4em; margin: 10px 0px 1.5em; padding: 1.2em;">
<strong><em><span style="color: #333333; font-size: x-small;">4. <a href="http://www.mybloggertricks.com/2015/07/how-to-create-responsive-menu-in-blogger.html" style="color: #289728; outline: none; text-decoration-line: none;" target="_blank">Design a Mobile Responsive Drop Down Menu for Blogger</a></span></em></strong></div>
<div align="justify" style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 16px;">
<span style="color: #d16349;"><span style="line-height: 1em;"><strong>T</strong></span></span>he fundamental part of a responsive design is the structure of its <strong>Header</strong> which includes your blog <strong>logo</strong> and <strong>navigation</strong> menu. This tutorial shares an easy to use responsive drop down menu with a search functionality. This menu can be displayed on both PC Desktop screens and smartphones and tablets. You can also choose to maintain your current desktop menu and instead chose to use this responsive menu for mobile screens only. A simple fix to the most important component of your mobile layout.<br /></div>
<div align="left" class="box" style="background-color: lightyellow; border: 5px solid rgb(247, 240, 184); box-shadow: rgb(237, 227, 150) 1px 1px 0px; color: #707037; font-family: helvetica, arial; font-size: 16px; line-height: 1.4em; margin: 10px 0px 1.5em; padding: 1.2em;">
<strong><span style="font-size: x-small;"><span style="color: #333333;"><em>5.</em> <a href="http://www.mybloggertricks.com/2015/08/create-responsive-images-in-blogspot.html" style="color: #289728; outline: none; text-decoration-line: none;" target="_blank"><em>Using Mobile Friendly Images in Blogger.</em></a></span></span></strong></div>
<div align="justify" style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 16px;">
<span style="color: #d16349;"><span style="line-height: 1em;"><strong>E</strong></span></span>ver wondered how to make your blog images to <strong>auto adjust</strong> their dimensions in mobile phones and tablets without effecting its resolution and quality? Images with large sizes often don't fit in small screen devices and as a result gives a bad UI impression. Images must be fluid in its behavior, their width and height dimensions should be stylized such that they may instantly change their overall size as the browser screen goes smaller or bigger.</div>
<div align="justify" style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 16px;">
Our approach is based on CSS @media Queries unlike adaptive image methods which makes use of JavaScript of php. </div>
<div align="left" class="box" style="background-color: lightyellow; border: 5px solid rgb(247, 240, 184); box-shadow: rgb(237, 227, 150) 1px 1px 0px; color: #707037; font-family: helvetica, arial; font-size: 16px; line-height: 1.4em; margin: 10px 0px 1.5em; padding: 1.2em;">
<strong><span style="font-size: x-small;"><span style="color: #333333;">6.<em> </em><a href="http://www.mybloggertricks.com/2015/05/AdSense-Responsive-Ads-not-working-in-Blogger.html" style="color: #289728; outline: none; text-decoration-line: none;" target="_blank"><em>Create Mobile Responsive AdSense Ads and Safely Hide AdSense units</em></a></span></span></strong></div>
<a href="https://draft.blogger.com/null" name="more" style="background-color: white; color: #0084ce; font-family: helvetica, arial; font-size: 16px; outline: none;"></a><span style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 16px;"></span><span style="background-color: white; color: #d16349; font-family: helvetica, arial;"><span style="line-height: 1em;"><strong>A</strong></span></span><span style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 16px;">re you among people who complain about AdSense responsive Ad units showing a </span><strong style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 16px;">blank</strong><span style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 16px;"> </span><strong style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 16px;">space</strong><span style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 16px;"> on your webpage? If yes then read this tutorial to fix this blank rendering issue and better style your responsive ads for different screen sizes using device breakpoints. </span><br style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 16px;" /><br />
<div align="left" class="box" style="background-color: lightyellow; border: 5px solid rgb(247, 240, 184); box-shadow: rgb(237, 227, 150) 1px 1px 0px; color: #707037; font-family: helvetica, arial; font-size: 16px; line-height: 1.4em; margin: 10px 0px 1.5em; padding: 1.2em;">
<span style="color: #333333;"><span style="font-size: x-small;"><strong>7. <strong><em>Make Blog Sections Responsive:</em></strong> <a href="http://www.mybloggertricks.com/2015/08/design-responsive-blogspot-header.html" style="color: #289728; outline: none; text-decoration-line: none;" target="_blank"><strong><em>Header Widgets</em></strong></a><em><strong>,</strong> <strong><a href="http://www.mybloggertricks.com/2015/08/make-blogspot-posts-and-sidebar--responsive.html" style="color: #289728; outline: none; text-decoration-line: none;" target="_blank">Posts + Sidebar</a></strong>, <strong><a href="http://www.mybloggertricks.com/2015/08/make-a-responsive-footer-for-blogger-blogs.html" style="color: #289728; outline: none; text-decoration-line: none;" target="_blank">Footer</a></strong></em></strong></span></span></div>
<div style="background-color: white; font-family: helvetica, arial;">
<span style="color: #d16349;"><b>S</b></span><span style="color: #555555; font-size: 16px;">ince we have learned the core basics, now its time to start customizing different sections of your blog and make them auto adapt to mobile screens. This tutorial in chunk discusses ways to mobilize the 4 important sections of your blog which are:</span></div>
<ol style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 16px;">
<li style="font-size: 15px !important; line-height: 1.5em; margin: 10px 0px;"><br /></li>
</ol>
</div>

Finally we are done with the most comprehensive and descriptive tutorial series on Google powered blogger blogs. We have discussed the co...

ISLAM PKI

Post Top Ad

Tags

Latest Results

Trending Now

ArticleMag Responsive Blogger Theme

by google

Popular Posts

About & Social

Labels