Auto Slide Up 'Recommended Post For You' Widget For Blogger
Live Demo
Hello Friends We Are Back With Another Trending And Very Useful Widget For Blogger i.e. Auto Slide Up 'Recommended Post For You' Widget For Blogger & Popularly Known every bit You Might Also Like Widget. We convey Added Many Great Features To this widget to arrive await Beautiful in addition to piece of work Faster.
Hello Friends We Are Back With Another Trending And Very Useful Widget For Blogger i.e. Auto Slide Up 'Recommended Post For You' Widget For Blogger & Popularly Known every bit You Might Also Like Widget. We convey Added Many Great Features To this widget to arrive await Beautiful in addition to piece of work Faster.
Features of Recommended Post For You Widget:
- This Will Not Take Any Extra Space inwards Your Post Area
- This Widget Will Only Appear When the Reader/User Scroll Down Half the page.
- This Widget Will Hide Automatically When User Scroll Up The Page.
- This Will Show The Random Post From Your Blog to the user
- It is attractive in addition to brand your site or spider web log to a greater extent than professional.
- This Widget Will Only Appear inwards Posts Pages.
- This Widget Will Show Title, Thumbnail And Description of Post.
ChangeLog for Recommended Post For You Widget:
- Added Close Button So That User Can Close The Widget.
- Duplicates Posts Displaying Issue Resolved
- Added Background Image To The Widget
We Have Styled This Widget inwards Such a Way That It Looks More Official in addition to Beautiful. We Checked inwards Many Templates This Widget Works Very Smoothly. Recommended post service Widget Will Work Similar To Random Posts Widget But Here It Showcase alone One Post From whatever Category or Label You Assigned.
After Influenza A virus subtype H5N1 Lot of Hard Work in addition to Tweaking Few Things We convey Created this Widget For our Users So that They Can Add It in addition to Increase User Engagement.
But Adding This Widget is lilliputian Tricky But We Will Guide You. Lets Start.
Benefits of Using Recommended Post For You Widget:
We Can Get Many Benefits From This Widget every bit Many Blogs Does Not Have User Interaction. So From This Widget The Blog Will Recommend Related Post To Users This volition increase Internal Linking every bit good every bit User Interaction volition besides increase So Bounce Rate Will Decrease When Bounce Rate Decreases This Shows Users are Spending Much Time In Your Site And When Pageviews Increases Ranking Also Improves.But Adding This Widget is lilliputian Tricky But We Will Guide You. Lets Start.
First We Will Add The Styling( CSS ):
STEP 1: Log inwards to your Blogger job organisation human relationship in addition to Go to your Blogger Dashboard
STEP 2: In The Left Side Bar You volition notice Template Section every bit highlighted inwards the picture inwards a higher house Click on Template.
STEP 3: Click On Edit HTML.
STEP 4: After Clicking on Edit HTML Search for
]]></b:skin>
STEP 5: Copy This Below Code Before ]]></b:skin>
/* Start Recommended Post Widget By http://www.allbloggertricks.com */
.ABT_Recommended_widget_Wrap {
width: 300px!important;
box-sizing: border-box;
position: fixed;
bottom: 10px;
right: 0px;
z-index: 99989658;
background: rgb(183, 35, 61) url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKufjPH96ejak-wZINB8ZGO1qcBu5EgOXCEpGPOtQ3wXCvORzclJtWcjDxf_MOoUcr4lWzVrAUeYDH2A4i_Yand0FQ7p6B8z0s5pKHFFftb9Pyva63EM0GYpNClS7DJiWW7W8IH6Yb6Rw/s1600/bg.png');
border-top: 4px enterprise rgb(54, 88, 156);
font-family: 'Oswald', sans-serif;
}
.ABT_Recommended_widget_Wrap .ABT_Recommended_widget_Inner_Wrap {
padding: 10px;
overflow: hidden;
}
.ABT_Recommended_widget_Wrap img {
width: 100%!important;
max-height: 200px;
border-radius: 5px;
}
.ABT_Recommended_widget_Wrap .ABT_Widget_Title h2 {
font-size: 18px;
text-decoration: none;
text-transform: capitalize;
word-break: break-all;
}
.ABT_Recommended_widget_Wrap .ABT_Widget_Title h2 a, .ABT_Small a {
text-decoration: none;
text-transform: capitalize;
color: rgb(54, 88, 156);
font-family: 'Oswald', sans-serif;
}
.ABT_Widget_Close_Button bridge {
position: absolute;
left: 0;
top: 0;
padding: 1px 8px 3px;
background: rgb(54, 88, 156);
color: #FFF;
font-size: 19px;
cursor: pointer;
}
.ABT_Recommended_widget_Wrap {
display: none;
}
.ABT_Widget_Close_Button h3 {
display: inline-block;
margin: 30px 0px 5px 0px;
color: rgb(54, 88, 156);
font-family: 'Oswald', sans-serif;
}
.ABT_Widget_Snippet {
font-size: 16px;
line-height: 1.2em;
}
.ABT_Small{
font-size: 14px;
text-decoration: none;
text-align: right;
}
/* End Recommended Post Widget By http://www.allbloggertricks.com */
STEP 6: All Done Save the template.
[II] We Will Add Markup ( HTML):
STEP 1: Go To Template Section As Shown inwards The Image Below
<data:post.body/>
You Will Find This Code three Times or to a greater extent than inwards your Template So Refer s or tertiary Time.
<b:if cond='data:blog.pageType == "item"'>
<div class='ABT_Recommended_widget_Wrap' id='ABT_Recommended_widget_Wrap'>
</div>
<script type='text/javascript'>
var ListCount = 1;var RandomArray = [];var TotalPosts = 0;
function TotalCount(json) {TotalPosts = json.feed.openSearch$totalResults.$t;}
document.write('<script type=\"text/javascript\" src=\"http://www.trendingwidgets.com/feeds/posts/default?alt=json-in-script&callback=TotalCount\"><\/script>');
function GenerateNum() {
for (var i = 0; i < ListCount; i++) {
var RandomNum = Math.floor(Math.random() * (TotalPosts) + 1);
RandomArray[i] = RandomNum;}}
function trendingWidgets(json) {
var pageNum, thumbnail, trueThumbnail;
var ul_list = document.getElementById('ABT_Recommended_widget_Wrap');
for (var a = 0; a < 1; a++) {
for (var b = 0; b < json.feed.entry[a].link.length; b++) {
if (json.feed.entry[a].link[b].rel == 'alternate') {
break;}}
var get_url = json.feed.entry[a].link[b].href;
var get_label = json.feed.category[a].term;
if (json.feed.entry[a].link !== null) {
var ListTitle = json.feed.entry[a].title.$t;}
if (json.feed.entry[a].media$thumbnail.url !== null) {
thumbnail = json.feed.entry[a].media$thumbnail.url;
var trueThumbnail = thumbnail.replace("?imgmax=800", "");
trueThumbnail = trueThumbnail.replace("s72-c", "");
} else if (json.feed.entry[a].content.match(/src=(.?[\.jpeg|\.jpg|\.gif|\.png])/) !== null) {
trueThumbnail = json.feed.entry[a].content.match(/src=(.?[\.jpeg|\.jpg|\.gif|\.png])/)[1];
} else {
trueThumbnail = "<span id='no-image'>No Thumbnail</span>";}
var newContent = json.feed.entry[a].summary.$t;
var theContent = newContent.replace(/(<([^>]+)>)/ig, "").substr(0, 80);
var listing = "<div class='ABT_Widget_Close_Button'><span title='Close Button'>Close</span><center><h3 style='text-align: center'>You Might Also Like</h3></center></div><div class='ABT_Recommended_widget_Inner_Wrap'><div class='ABT_Widget_Thumbnail'><a href='" + get_url + "'><img src='" + trueThumbnail + "' alt='" + ListTitle + "' title='" + ListTitle + "'></a></div><div class='ABT_Widget_Title'><h2><a href='" + get_url + "'>" + ListTitle + "</a></h2></div><div class='ABT_Widget_Snippet'>" + theContent + "</div><div class='ABT_Small'><a href=''>Get This Widget</a></div></div>";
ul_list.innerHTML += listing;}
$(document).ready(function() {
$('.ABT_Widget_Close_Button span').on('click', function() {
$('#ABT_Recommended_widget_Wrap').animate({right: '-550px'}, 'slow', function() {
$(this).css('display', 'none');});});
var pinnacle = $(document).height() / 2;
$(window).on('scroll', function() {
if ($(document).scrollTop() > height) {
$(".ABT_Recommended_widget_Wrap").slideDown("slow").css({right: '0px'});} else {
$(".ABT_Recommended_widget_Wrap").slideUp("slow").css({
right: '-550px'});}}); }); }
</script>
<b:if cond='data:top.showPostLabels in addition to data:post.labels'>
<data:postLabelsLabel/>
<b:loop index='i' values='data:post.labels' var='label'>
<b:if cond='data:i == 0'>
<script>
for (var i = 0; i < ListCount; i++) {
GenerateNum();
var blogLink = "http://www.allbloggertricks.com";
var callScript = document.createElement("script");
callScript.src = blogLink + "/feeds/posts/default?alt=json-in-script&start-index=" + RandomArray[i] + "&max-results=1&callback=trendingWidgets";
var latest_posts_new = document.getElementById('ABT_Recommended_widget_Wrap');
latest_posts_new.appendChild(callScript);}
</script>
</b:if>
</b:loop>
</b:if>
</b:if>
STEP 4: All done salve the template in addition to Open Your Post in addition to Scroll Down Half The Way To See This Widget Working.
Customization:
- The Orange Highlighted Text Represents the URL Of The Blog. So Add Your Blog URL Starting With http in addition to don't add together the Slash at the end.
Conclusion:
Finally You convey Added The Widget inwards Your Blog. And In our Upcoming Post We Will Share Related Recommended Post Widget. This Widget Will Work Similar To This But THe Difference is That This Will Generate Random Posts but That Widget Will Fetch Related Post.
And those who convey added this widget successfully without whatever hurdles congrats to them. in addition to if you lot desire whatever styling or improvement to this recommended widget notify us nosotros volition endeavour to add together it for you.
And those who convey added this widget successfully without whatever hurdles congrats to them. in addition to if you lot desire whatever styling or improvement to this recommended widget notify us nosotros volition endeavour to add together it for you.
That's It Thanks For Following our Tutorial '' Auto Slide Up 'Recommended Post For You' Widget For Blogger '' Along With us If you lot flora whatever difficulty Please Comment in addition to Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This in addition to Share this alongside your friends.
Incoming Search Terms:
Incoming Search Terms:
Belum ada Komentar untuk "Auto Slide Up 'Recommended Post For You' Widget For Blogger"
Posting Komentar