Showing posts with label Widget. Show all posts
Showing posts with label Widget. Show all posts

Placing Google CSE to Blogger Static Page

Google CSE

One widget provided by Google is CSE (Custom Search Engine); a search widget that can be easily use to display the search results from your blog. If you have connected to Google Adsense, then with Google CSE (Custom Search Engine) can be set as the Search Engine Monetization by setting in the menu Make Money.

Create Blogger mostComment Widget #1

Create Blogger mostComment Widget

One of the facilities provided by the feed bloggers are taking the data with sorting index number of comments. Not difficult to apply in your blogger widget. Well in this article we will explain in detail How to Create mostComment Widget independently.

Display Most Commented Posts on Blogger with Yahoo Pipe

Display Most Commented Posts on Blogger with Yahoo Pipe
In a blog we need to accentuate the very articles that we rely on to improve the reader's desire to explore our blog further. There are many ways that can be used in doing so, one of which is by way of display the most commented posts.

There is a very easy way of doing the things above, especially if our blog using blogger.com; using yahoo pipes, you don't have to think hard, but simply used in a simple manner that is like the following guidelines:

#1. From your blogger dashboard, select "Layout" menu, then specify the position of the most commented posts widget is placed.

#2. Press Add a Gadget button, and then select type of gadget "HTML/JavaScript".
HTML/JavaScriptHTML/JavaScript
#3. From configuration of "HTML/JavaScript", add javascript code as below, and then press the Save button.
<script type="text/javascript">
function stripTags(s,n) {return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")}
function mostcommented(feed) {
var i;
for (i = 0; i < feed.count ; i++) {
 var postURL = "'" + feed.value.items[i].link + "'";
 var postTitle = feed.value.items[i].title;
 var postthumbnail = "<img src="+feed.value.items[i].postthumbnail+" />";
 var postDescription = feed.value.items[i].postdescription;
 var postComments = feed.value.items[i].commentcount;
 var postList = '<div class="most-commented"><ul><li><div class="comment-count">' + postComments + " Comment(s)</div>" + postthumbnail + "<a href="+ postURL + '">' + postTitle + "</a>"  + '<p>' +stripTags(postDescription,10)+'...</p>' + '</li></ul></div>';
 document.write(postList);
    }
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
AddUrlHere=http://www.senatechno.com/
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json"
type="text/javascript"></script>
Then your blog will show up Most Commented Posts widget, quite simple isn't it.

To specify address of blog that will be processed, replace "AddUrlHere = http://www.senatechno.com/" with  "AddUrlHere = {your blog url}"; and to change the number of posts to be displayed, replace "NumberofPosts=5" with "NumberofPosts={number of post}"

Add Alexa Rank Checker on Blogger

Add Alexa Rank Cheker on Blogger
Recognition of the credibility of a web traffic is urgently needed on the internet; It is very necessary to know how good the web rank. There are several providers that accommodate web traffic rank system, and one of the most known is Alexa.com.

In addition to web traffic ranking data, Alexa.com also provides information some other much-needed data to analyse the advantages of a web. Therefore, as bloggers we want to provide facilities to the reader the article we can check the alexa rankings of a web.

It is very easy to add Alexa Rank Checker Widgets into your blog, especially for those who use Blogger or Blogspot; perform the following steps:

1. Go into your Blogger Dashboard, then select "Layout" menu.
2. Click "Add a Gadget" in the position you want.
3. Select type of gadget "HTML/JavaScriptAdd", add the code below and then click Save button.
<form method="get" action="http://www.alexa.com/data/details/traffic_details" target="_blank">
<input name="url" maxlength="255" size="30" type="url" placeholder="Enter a site"/>
<input value="Check Alexa Rank" type="submit"/>
</form>
After all the commands above you've done, then it will show up like the example below:
With the addition of this facility, then your blog will be more useful to the readers of your blog article. Good luck!

3 Tricks to Show or Hide a Widget in Blogger

3 Tricks to Show or Hide a Widget in Blogger

In composing a blog especially Blogger/Blogspot, of course we will always use Widgets to provide information with a wide variety of forms in accordance with the expected goal and purpose.

In a blog we certainly want a dynamic blog and look very good to read, so that will make readers comfortable and will certainly improve our blog traffic.

One thing that will usually become a problem that we have to do, namely: set up a widget that we created are displayed only under certain conditions only. In this article will be explained fully how to do that.

1. Create a widget in your blog

Steps to create the widget do in the following ways:
  • Go to the blog you are going to edit by selecting the Dashboard Menu Layout.
    Show or Hide Widget
  • Clik the button Add Gadgets, and then choose the type of widget or gadget that you want.
    Show or Hide Widget
  • Please enter an existing selection list as you want, and then press the Save button.
    Show or Hide Widget

2. Edit the blog manually (Edit HTML)

Next to be able to arrange for Widget or Gadget is displayed or hidden with certain conditions, then you have to edit it manually.
  • Select a Template on the Dashboard Menu to edit a blog.
  • Press Edit HTML button.
    Show or Hide Widget
  • After showing up like the picture below, we can manually edit the HTML code according to which we are referring.

3. How to show or hide a widget

To show and hide the Widget/Gadget in this article, we will use the statement "b:if" with conditions in accordance with the needs of the type of blog page what we will use.

The most effective way at this time we are going to edit the code to display and hide the widget is in a way:

  • Remember and specify the name of the widget which we will be edited.
  • Do a search in the edit HTML button, by pressing Ctrl + F.
  • Further give conditions to regulate, whether to be shown or hidden.

In the following example we use in this case is the gadget "Popular Posts"; After we search in the edit HTML, feed will show up like this:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
  <b:includable id='main'>
   <b:if cond='data:title'><h2><data:title/></h2></b:if>
   <div class='widget-content popular-posts'>
     ...
     <b:include name='quickedit'/>
   </div>
  </b:includable>
</b:widget>
These are conditions that are given to hide or show the widget.

Just Shown in homepage

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
  <b:includable id='main'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:title'><h2><data:title/></h2></b:if>
   <div class='widget-content popular-posts'>
     ...
     <b:include name='quickedit'/>
   </div>
  </b:if>
  </b:includable>
</b:widget>

Just Shown in post page

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
  <b:includable id='main'>
  <b:if cond='data:blog.url == "item"'>
   <b:if cond='data:title'><h2><data:title/></h2></b:if>
   <div class='widget-content popular-posts'>
     ...
     <b:include name='quickedit'/>
   </div>
  </b:includable>
  </b:if>
</b:widget>

Just Shown in archive page

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
  <b:includable id='main'>
  <b:if cond='data:blog.url == "archive"'>
   <b:if cond='data:title'><h2><data:title/></h2></b:if>
   <div class='widget-content popular-posts'>
     ...
     <b:include name='quickedit'/>
   </div>
  </b:includable>
  </b:if>
</b:widget>

Just Shown show in static page

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
  <b:includable id='main'>
  <b:if cond='data:blog.url == "static_page"'>
   <b:if cond='data:title'><h2><data:title/></h2></b:if>
   <div class='widget-content popular-posts'>
     ...
     <b:include name='quickedit'/>
   </div>
  </b:includable>
  </b:if>
</b:widget>

Just Shown in specific page url

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
  <b:includable id='main'>
  <b:if cond='data:blog.url == "URL of the page"'>
   <b:if cond='data:title'><h2><data:title/></h2></b:if>
   <div class='widget-content popular-posts'>
     ...
     <b:include name='quickedit'/>
   </div>
  </b:includable>
  </b:if>
</b:widget>

Hidden from homepage

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
  <b:includable id='main'>
  <b:if cond='data:blog.url != data:blog.homepageUrl'>
   <b:if cond='data:title'><h2><data:title/></h2></b:if>
   <div class='widget-content popular-posts'>
     ...
     <b:include name='quickedit'/>
   </div>
  </b:includable>
  </b:if>
</b:widget>

Hidden from post page

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
  <b:includable id='main'>
  <b:if cond='data:blog.url != "item"'>
   <b:if cond='data:title'><h2><data:title/></h2></b:if>
   <div class='widget-content popular-posts'>
     ...
     <b:include name='quickedit'/>
   </div>
  </b:includable>
  </b:if>
</b:widget>

Hidden from archive page

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
  <b:includable id='main'>
  <b:if cond='data:blog.url != "archive"'>
   <b:if cond='data:title'><h2><data:title/></h2></b:if>
   <div class='widget-content popular-posts'>
     ...
     <b:include name='quickedit'/>
   </div>
  </b:includable>
  </b:if>
</b:widget>

Hidden from static page

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
  <b:includable id='main'>
  <b:if cond='data:blog.url != "static_page"'>
   <b:if cond='data:title'><h2><data:title/></h2></b:if>
   <div class='widget-content popular-posts'>
     ...
     <b:include name='quickedit'/>
   </div>
  </b:includable>
  </b:if>
</b:widget>

Hidden from specific page url

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
  <b:includable id='main'>
  <b:if cond='data:blog.url != "URL of the page"'>
   <b:if cond='data:title'><h2><data:title/></h2></b:if>
   <div class='widget-content popular-posts'>
     ...
     <b:include name='quickedit'/>
   </div>
  </b:includable>
  </b:if>
</b:widget>

I hope this article was useful to you. Get our other articles on our blog www.senatechno.com.