Random Post
It's also one way to ensure that visitors will stay longer in our blog to read some entries in a random blog. It was good for most of the contents of the blog is a photo or video, where visitors do not have to read in order of the timeline, but reading the entries at random. Example blog (test blog) fitted with a random button can be seen here> Test blog Tutorial to install a random post button to the blog are as follows.
1.Login blogger account and dashboard and layout.
Blogger Dashboard
2. Then add a gadget> HTML / javascript.
html / Java script
3. In the space of HTML / javascript, copy and paste one of the code below. There are two types of code, one to be in the sidebar, one for static. You can try any of that sounds right.
3 (a) of the Code for the random post button on the sidebar .
<style> #abt-random{position:relative;color:rgba(255,255,255,1);text-decoration:none;background-color:rgba(219,87,5,1);font-family:'Yanone Kaffeesatz';font-weight:700;font-size:20px;display:block;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 9px 0 RGBA (219,31,5,1) 0 9px 25px RGBA (0,0,0, .7);-MOZ-box-shadow: 0 9px 0 RGBA (219,31,5,1), 0 9px 25px RGBA (0,0,0, .7); box-shadow: 0 9px 0 RGBA (219,31,5,1) 0 9px 25px rgba(0,0,0,.7);margin-bottom:10px;margin-top:10px;width:160px;text-align:center;-webkit-transition:all .1 S ease;-MOZ-transition: all .1 s ease;-ms-transition: all .1 s ease;-o-transition: all .1 s ease; transition: all .1 s ease; padding: 4px} # abt-random: active {-webkit-box-shadow: 0 0 3px RGBA (219,31,5,1), 0 3px 6px RGBA (0,0,0, .9);-MOZ-box-shadow: 0 0 3px RGBA ( 219,31,5,1), 0 3px 6px RGBA (0,0,0, .9) box-shadow: 0 0 3px RGBA (219,31,5,1), 0 3px 6px RGBA (0.0 , 0, .9); position: relative; top: 6px} # abt-random a {color: # fff;} </ style> <div <center> id="abt-random"> </ div> </ center> <script type="text/javascript"> showLucky function (root) {var feed = root.feed: var entries = feed.entry | | []; var entry = feed.entry [0]: for (var j = 0, j <entry.link.length; + + j) {if (entry.link [j]. rel == 'alternate') {window.location = entry.link [j]. href;}}} function fetchLuck (luck) {script = document.createElement ('script'); script.src = '/ feeds / posts / summary? start-index =' + luck + '& max-results = 1 & alt = json-in-script & callback = showLucky' ; script.type = 'text / javascript'; document.getElementsByTagName ('head') [0]. appendChild (script);} feelingLucky function (root) {var feed = root.feed: var total = parseInt (feed.openSearch $ totalResults. $ t, 10); luckyNumber var = Math.floor (Math.random () * total); luckyNumber + +: a = document.createElement ('a'); a.href = '# random'; a.rel = luckyNumber; a.onclick = function () {fetchLuck (this.rel);}; a.innerHTML = 'Random Post'; document.getElementById ('abt-random'). appendChild (a)} </ script> <script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"> </ script>
OR
3 (b) - Code for static random post button at the bottom-right side of the blog.
<div> style='display:scroll; position:fixed; bottom:5px; right:5px;'> <style> #abt-random{position:relative;color:rgba(255,255,255,1);text-decoration:none;background-color:rgba(219,87,5,1);font-family:'Yanone Kaffeesatz';font-weight:700;font-size:20px;display:block;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 9px 0 RGBA (219,31,5,1) 0 9px 25px RGBA (0,0,0, .7);-MOZ-box-shadow: 0 9px 0 RGBA (219,31,5,1), 0 9px 25px RGBA (0,0,0, .7); box-shadow: 0 9px 0 RGBA (219,31,5,1) 0 9px 25px rgba(0,0,0,.7);margin-bottom:10px;margin-top:10px;width:160px;text-align:center;-webkit-transition:all .1 S ease;-MOZ-transition: all .1 s ease;-ms-transition: all .1 s ease;-o-transition: all .1 s ease; transition: all .1 s ease; padding: 4px} # abt-random: active {-webkit-box-shadow: 0 0 3px RGBA (219,31,5,1), 0 3px 6px RGBA (0,0,0, .9);-MOZ-box-shadow: 0 0 3px RGBA ( 219,31,5,1), 0 3px 6px RGBA (0,0,0, .9) box-shadow: 0 0 3px RGBA (219,31,5,1), 0 3px 6px RGBA (0.0 , 0, .9); position: relative; top: 6px} # abt-random a {color: # fff;} </ style> <div <center> id="abt-random"> </ div> </ center> <script type="text/javascript"> showLucky function (root) {var feed = root.feed: var entries = feed.entry | | []; var entry = feed.entry [0]: for (var j = 0, j <entry.link.length; + + j) {if (entry.link [j]. rel == 'alternate') {window.location = entry.link [j]. href;}}} function fetchLuck (luck) {script = document.createElement ('script'); script.src = '/ feeds / posts / summary? start-index =' + luck + '& max-results = 1 & alt = json-in-script & callback = showLucky' ; script.type = 'text / javascript'; document.getElementsByTagName ('head') [0]. appendChild (script);} feelingLucky function (root) {var feed = root.feed: var total = parseInt (feed.openSearch $ totalResults. $ t, 10); luckyNumber var = Math.floor (Math.random () * total); luckyNumber + +: a = document.createElement ('a'); a.href = '# random'; a.rel = luckyNumber; a.onclick = function () {fetchLuck (this.rel);}; a.innerHTML = 'Random Post'; document.getElementById ('abt-random'). appendChild (a)} </ script> <script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"> </ script> </ div>
4. Save and see the results. :)
Tag: Tutorial blog, blog tutorial, random post, blogger blog.
Post a Comment