GET TIMELINE

We shape the modern world !

How to add Elegant and Responsive Popular Post Widget to your blogspot?

, No comments
Good Day Bloggers! Looking for Elegant and Responsive Popular Post Widget for your blogspot? Stop looking because you found it now. From time to time many updates to blogger widget designs have released and today I’m going to give you the codes for this widget and of course with the step by step tutorial on how to implement the code correctly.

Below are the Step by Step process on how to add the codes and the widget.
1.     Adding the Elegant and Responsive Popular Posts Widget

Go to Blog  Layout >Add Widget →>Popular Posts. Add the widget in the desired location and save the template.

Note: Check the Item Snippet and Image Thumbnail option.
2.     Adding the CSS Code to Template

Now we will add the CSS Code to your template. Go to Blog Theme and  Edit HTML. Press Ctrl + F and search for ]]></b:skin> in search box. After that, paste the code below  just above ]]></b:skin>
/* Popular Posts Widget customized by techtsismisph.blogspot.com */
.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0; overflow: hidden; position: relative; width: 100%; }
.PopularPosts .item-title { position: relative; }
.PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; }
.item-title a { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-family: Impact; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; right: 0; text-align: center; top: 30px; width: 100%; }
.item-snippet { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-weight: 900; left: 12%; padding: 10px; position: absolute; text-align: center; top: 95px; width: 70%; }
.item-content:hover img {transform: rotate(10deg) scale(1.2);}
.item-content { position: relative; }


Note:  Be sure to have removed all the previous Popular Posts CSS codes (if any) before adding this one or the result will be the combination of the two.
3.     Adding the Javascript Code

Usually Popular posts widget does not require any JavaScript, but this one needs in order to change the size of the popular posts images and cut short the snippet.

To add the JavaScript, search for </body> and paste the below given code just above it.
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
 $(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
</script>
    <script type='text/javascript'>
    //<![CDATA[
    // Popular Posts customization by AllBloggerTricks.com
    // Trim Code by MS-potilas 2012
    $('.popular-posts ul li .item-snippet').each(function(){
     var txt=$(this).text().substr(0,120);
      var j=txt.lastIndexOf(' ');
      if(j>10)
         $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
    });
    //]]>
    </script>


After adding the JavaScript code save the template.
Note: Remove the code in red if you already have it in your template.

Done. Now you and your readers can see this Elegant and Responsive Popular posts widget on your blogger blog.



Share:
Read More

How to Add Animated Latest Posts News Ticker to your blogspot ?

, No comments
Good Day Bloggers and Readers, today I will show you on how to add Animated Latest Posts News Ticker to your blogspot site. WordPress sites can add this widget easily by uploading the plugins but in blogger we have to manually add code for it. So this widget will show the 10 latest posts of your blog in a ticker box.

This ticker widget is perfectly Animated and you just have to add URL of your blog and it will update the new posts automatically.

Follow the step by step procedures below:


1. Editing HTML of your Blog Template

Go to your Blog Template and  Edit HTML. Press Ctrl + F and look for  <div id='content-wrapper'> and add the given code just above it.



<div style="width:970px;height:20px;position:relative;">
<script type="text/javascript">
var blog_url = "http://techtsismisph.blogspot.com";
var latest_post = 10;
var scrolling_speed = "8";
var close_button = false;
var info_text = true;
</script>
<script src="http://files.allbloggertricks.com/Scripts/abt-ticker.js"></script>
</div>
<br />
<br />
<div style='clear:both;'/>


2. Configure Blogspot Settings


Change  the following according to your desires -

var blog_url - Add your blog URL by replacing http://www.techtsismisph.blogspot.com
var latest_post - The number of posts link you want to have in the ticker(must be in digit)
var scrolling_speed – Change the number to increase/decrease the scrolling speed.
var close_button – Add Close Button if ever you want.
var info_text - Remove/keep the text "Latest Articles" and RSS icon.

After making the changes save the template and you are done now.

 Now you and your readers can see this Animated Latest Posts News Ticker in your blogspot.

Source: allbloggertricks.com


Share:
Read More

How to Add Animated and Responsive Recent Posts Widget to your blogspot?

, No comments
Recent Posts Widget is a widget for blogger which will show the recent posts of your desired blog. With help of HTML,CSS and JavaScript Codes this widget can be customized to make it more responsive and animated. Now, I’m going to show you on how to add Animated and Responsive Recent Posts Widget to your blogspot. This Animated Recent Posts Widget updates automatically and you do not have to edit the widget and add images, titles and description again and again. You just have to add the URL of the blogspot and your configuration of the code is complete.

Adding the Animated Recent Posts Widgets code in Blogspot

In order to add this Animated Recent Widget's code, go to Blog Layout> Add Widget> HTML/JavaScript and paste the given code below in the box opened.
<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({
    url: "http://YOURURL.blogspot.com" // Add your blog URL
});
</script>


After adding the code change the URL in Bold Red with your own blogspot URL and save the widget. Example: http://techtsismisph.blogspot.com  Finally save the template and you’re done.


 Now you and your visitors can see this awesome Animated Recent Posts Slider in your blogspot. Enjoy!
Share:
Read More

How to add Elegant and Responsive Popular Post Widget to your blogspot?

, No comments
Good Day Bloggers! Looking for Elegant and Responsive Popular Post Widget for your blogspot? Stop looking because you found it now. From time to time many updates to blogger widget designs have released and today I’m going to give you the codes for this widget and of course with the step by step tutorial on how to implement the code correctly.

Below are the Step by Step process on how to add the codes and the widget.


1.     Adding the Elegant and Responsive Popular Posts Widget


Go to Blog  Layout >Add Widget →>Popular Posts. Add the widget in the desired location and save the template.



Note: Check the Item Snippet and Image Thumbnail option.


2.     Adding the CSS Code to Template


Now we will add the CSS Code to your template. Go to Blog Theme and  Edit HTML. Press Ctrl + F and search for ]]></b:skin> in search box. After that, paste the code below  just above ]]></b:skin>


/* Popular Posts Widget customized by techtsismisph.blogspot.com */
.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0; overflow: hidden; position: relative; width: 100%; }
.PopularPosts .item-title { position: relative; }
.PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; }
.item-title a { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-family: Impact; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; right: 0; text-align: center; top: 30px; width: 100%; }
.item-snippet { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-weight: 900; left: 12%; padding: 10px; position: absolute; text-align: center; top: 95px; width: 70%; }
.item-content:hover img {transform: rotate(10deg) scale(1.2);}
.item-content { position: relative; }


Note:  Be sure to have removed all the previous Popular Posts CSS codes (if any) before adding this one or the result will be the combination of the two.



3.     Adding the Javascript Code


Usually Popular posts widget does not require any JavaScript, but this one needs in order to change the size of the popular posts images and cut short the snippet.



To add the JavaScript, search for </body> and paste the below given code just above it.



<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
 $(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
</script>
    <script type='text/javascript'>
    //<![CDATA[
    // Popular Posts customization by AllBloggerTricks.com
    // Trim Code by MS-potilas 2012
    $('.popular-posts ul li .item-snippet').each(function(){
     var txt=$(this).text().substr(0,120);
      var j=txt.lastIndexOf(' ');
      if(j>10)
         $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
    });
    //]]>
    </script>


After adding the JavaScript code save the template.

Note: Remove the code in red if you already have it in your template.


Done. Now you and your readers can see this Elegant and Responsive Popular posts widget on your blogger blog.



Share:
Read More

How to add responding ‘Featured Posts’ to blogspot with images?

, No comments
Within this year 2017, many blogger widgets has released and modified their designs. Some are responsive, some are elegant, and some are simple.

Blogger Widgets used to add more features to your blog. Featured Posts is one of the blogger widgets through which you can display your own selected posts on your own blogspot. The setup is really easy and requires just a work of few minutes.

This widget is very helpful if you want to target a specific post to all your readers. This widget also has hover effect feature that makes this widget responsive and animated. You can add four (4) featured posts with the help of this widget. Three (3) will have images whereas one will have just the title.

Below are the instructions to be followed in order to add this widget to your blogspot. Be sure to follow all the steps to avoid errors.

 Step 1 : Adding CSS Code to your Blog Template

Go to your Blog Template or Theme and Edit HTML. Find for the tag  ]]></b:skin>  by pressing Ctrl + F. Add the below given code just above  ]]></b:skin> 

#featured-post a{color:#fff}
#featured-post ul{list-style:none;padding:0}
#featured-post ul li{padding:2px 0 0 2px;float:left;clear:none;width:183px}
#featured-post .item-content{background:transparent}
#featured-post .item-thumbnail{background:transparent}
#featured-post .item-content img{width:183px;height:183px}
#featured-post .item-title{line-height:1.3em;font-size:90%;min-height:50px;max-height:50px;;opacity:0.75;background:#000;margin:-63px 0 1px;padding:5px;color:#fff;overflow:hidden}
#featured-post ul li:first-child{height:250px!important;width:250px!important;padding:2px 0 0!important}
#featured-post ul li:first-child img{height:250px!important;width:250px!important}
#featured-post ul li:first-child + li + li + li{width:368px!important;height:64px!important;overflow:hidden}
#featured-post ul li:first-child + li + li + li img{width:368px!important;height:368px!important}
#featured-post ul li:first-child + li + li + li div.item-title{margin:-373px 0 5px;padding-right:60px;min-height:56px;max-height:56px;opacity:0.90;background: #000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGl_Tka0vyDdEjFP0Zgcos75V17REYNxEmrZA9PY2ZPRKQcQACTFVFh34E6zbY0VvT6izO90FLbbmfiVP5E5Aw7JG7fB2xvkXKRLTARAZ4m6x8YfamIYyweUdluIpWphxn9vcoZj-P3RY/s48/Arrow%2520Right.png')  305px 7px no-repeat!important}
#featured-post ul li:first-child + li + li + li div.item-title a{font-size:16px;line-height:1.2em}

Save the template. 


Step 2 : Add Featured Post Widget to your blog

Go to your Blog Layout > Add Widget > HTML/JavaScript. Add the below code in it and click on Save.

<div id="featured-post">
<ul>
<!--Featured 1>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="post url"><img src="image url" /> </a></div>
<div class="item-title">
<a href="post url">Post Title</a></div></div></li>

<!--Featured 2>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="post url"><img src="image url" /> </a></div>
<div class="item-title">
<a href="post url">Post Title</a></div></div></li>

<!--Featured 3>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="post url"><img src="image url" /> </a></div>
<div class="item-title">
<a href="post url">Post Title</a></div></div></li>

<!--Featured Post 4>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="post url"><img src="image url" /> </a></div>
<div class="item-title">
<a href="post url">Post Title</a></div></div></li>
</ul>




Replace post url, image url, and post title with your own Post URL, Image URL and Post Title.  Save the Template and you are done.
Note: Don't forget to add the widget on the right place.
If you faced difficulties in implementing the code. Please put your comment below for assistance. Thank you!


Share:
Read More

Top 3 Custom ROMs that are compatible to Cherry Mobile S4 Max

, 2 comments


1.   Dodgee X5 – XOS Chameleon Custom ROM
What’s New ?
·        Fixed Camera
·        Fixed AutoFocus Camera (HDR)
·        Fixed Flashlight
·        Fixed Sim 2 No Signal
·        Stock Boot Logo Changed to Doogee X5
Steps on how to install the XOS Dodgee X5 Custom ROM:
REQUIREMENTS:
ü    Rooted Phone
ü    Installed TWRP Recovery
ü    Dodgee X5 – XOS Chameleon Custom ROM
NOTE: Backup first your data and System before flashing this ROM
We are not responsible for whatever will happen to your phone. Take risks and learn.

How to Flash the Custom ROM ?

1)    Download the ROM and keep into SD Card
2)    Remove all your Google Accounts in Settings>Account>Google (to skip Wifi after Flashing)
3)    Boot into TWRP Recovery
4)    Backup your Current data and System first.
5)    Wipe Factory Reset
6)    Wipe Cache
7)    Wipe Data
8)    Install the ROM
9)    After flashing – Click Wipe, Wipe Factory Data Reset
10)                       Reboot and Enjoy
Expect for slow booting at first boot. Enjoy! Your ROM now is XOS Chameleon.
Credits:
§         XDA Dev
§         Nana lyke
§         KD Rasel
§         Ported by: Eric Kim

2.   iPhone7 - iOS 10 Custom ROM
What’s New ?
·        Dual Sim
·        Working Internal and External
Steps on how to install the iPhone7 – iOS 10 Custom ROM
REQUIREMENTS:
ü    Rooted Phone
ü    Installed TWRP Recovery
ü    iPhone7 – iOS 10 Custom ROM
NOTE: Backup first your data and System before flashing this ROM
We are not responsible for whatever will happen to your phone. Take risks and learn.

How to Flash the Custom ROM ?

1.    Download the ROM and keep into SD Card
2.    Boot into TWRP Recovery
3.    Backup your Current data and System first.
4.    Wipe Factory Reset
5.    Wipe Cache
6.    Wipe Data
7.    Install the ROM
8.    Reboot and Enjoy
Expect for slow booting at first boot.
Credits:
§         Android Matrix Development
§         Guiller Pascual for SD Info
§         Ported by Boy Apper

3.   Samsung S7 - Edge Custom ROM
What’s New ?
·        99% Bugless
·        Original TouchWiz UI
·        No Battery Drain
·        Awesome UI
·        Added Dolby Atoms
·        Added Lovely Font English and Bangla
·        Flash Working
·        Camera Focus Working
·        Edge Mode
·        All Notification toggle working
·        All Navigation key working
·        Gesture Working
Steps on how to install the Samsung S7 – Edge Custom ROM
REQUIREMENTS:
ü    Rooted Phone
ü    Installed TWRP Recovery
ü    Samsung S7 – Edge Custom ROM
NOTE: Backup first your data and System before flashing this ROM
We are not responsible for whatever will happen to your phone. Take risks and learn.

How to Flash the Custom ROM ?

1.    Download the ROM and keep into SD Card
2.    Boot into TWRP Recovery
3.    Backup your Current data and System first.
4.    Wipe Factory Reset
5.    Wipe Cache
6.    Wipe Data
7.    Install the ROM
8.    Reboot and Enjoy
Expect for slow booting at first boot.
Credits:
§         Android Matrix Development
§         Tusher Biswas
§         Boy Apper
§         To All Dev. MT6580




Share:
Read More

Contact Form

Name

Email *

Message *

Blog Archive