Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Minggu, 16 Maret 2014

Add Facebook Comment Form To Blogger

If you happen to change a template for your blog and you find the comment form doesn't show up.
Or you want to change the comment form using facebook comment form you can try these simple steps.

  1. Login to your blogger account. Go to Template and Edit HTML.
  2. Open a new tab on your browser.
  3. Type this URL :    https://developers.facebook.com/docs/plugins/comments/
  4. Then, log in to your facebook account. You will see the page as shown on the screenshot below :


Customization:

No 1.  Copy and paste your blog URL
No 2.  Set width of the form to match with your posting area.
No.3   Set the number of comments you desire to show.
No 4.  Set color or just use the default.
No 5.  Click the blue button to get the code

Once you have done with the setting and click Get Code, you will find a pop up includes 2 codes.


5. Copy the codes  number 1, and paste them  below  </head>

Example of the code 1  I had tested on my blog :

<div id='fb-root'/>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

6. Next, using CTRL+F   to get these tags :
  
<p class='post-footer-line post-footer-line-3'/>
7. Copy and paste the  code number 2 under / after    <p class='post-footer-line post-footer-line-3'/>

Example of the code 2   I had tested on my blog  - yellow highlighted codes is my own blog URL :

<div class='fb-comments' data-colorscheme='light' data-href='http://jarspbs.blogspot.com/' data-numposts='10' data-width='500'/>

8. Before you save the template (for the code number 2),  if you desire to make this form only appears under full posting, you can put conditional tags as follow (the codes in blue are conditional tags). :

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div class='fb-comments' data-colorscheme='light' data-href='http://jarspbs.blogspot.com/' data-numposts='10' data-width='500'/>
</b:if>

9. Last save template and see the result.

Sabtu, 01 Maret 2014

Add contact form to your your blog page


For you (like me) managing business blogs or websites must have been familiar with online form.
It is a form placed at one separated page to get the visitors to your blog or website to contact you.
Whether they want to ask question about your product, enquiry or reservation, etc.

Blog platform like wordpress has long included contact form to one of its' features.
Blogger / Blogspot has been recognized to provide contact form widget feature since 2013.

If any of you want to give it a try to place the contact form at the certain page of your blog you can do these steps.

Step 1.

  • Go the layout section page.
  • Add new gadget ... choose ContactForm.
  • Place the contact form at any provided area.

Step 2.

  • Make / create a new page.
  • Switch to Edit HTML mode and paste these codes.

<form name="contact-form">
<p></p>
Your Name:
<span style="font-weight: bolder;color:red;">*</span><br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
<p></p>
Your Email Address:
<span style="font-weight: bolder;color:red;">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" />
<p></p>
Your Message: <span style="font-weight: bolder;color:red;">*</span><br />
<textarea class="contact-form-email-message"  id="ContactForm1_contact-form-email-message" name="email-message" cols="25" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button" />
<p></p>
<div style="text-align: center; max-width: 222px; width: 100%">
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</div>
</form>
*You can change the words in the yellow highlight to any words you want.

  • Next, save the page.

Step 3.

  • Open your template HTML editor and find the   ]]></b:skin> 
  • copy and paste these code above the   ]]></b:skin>


#ContactForm1
{
display: none ! important;
}

Step 4.

  • Find these following codes and delete them.

<form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>

  • Last, save template and done.

Senin, 03 Februari 2014

Nice Colorful Cloud Label Widget For Blogger

Just want to be straight to the point.
There are many styles of label cloud widget for blogger can be found on internet, if you are looking for colorful label cloud for your blog you can give it try these one.


To make the colorful cloud label like above, you only need to put some CSS codes.

  • Go to your blogger template --- Click Edit HTML.
  • Find ]]></b:skin>
  • Copy the following codes and paste them right above ]]></b:skin>
.sidebar .label-size {
position:relative;
text-transform: none;
text-decoration:none;
font-family: Ubuntu, Arial;
margin-top: 10px;
line-height: 20px;
font-weight: 300;
font-size: 13px;
color:#fff!important; text--align:center;
}
.sidebar .label-size a {
color:#fff!important; border-radius:3px;
font-weight:bold;
padding:8px 8px;
margin:0 6px 6px 0;
float:left;
display:block;
-moz-transition: all 0.4s ;
-o-transition: all 0.4s;
-webkit-transition: all 0.4s ;
-ms-transition: all 0.4s ;
transition: all 0.4s ;
}
.sidebar .label-size-1 a {background:#1abc9c;border-bottom:0px solid #127F69;}
.sidebar .label-size-1 a:hover {background:#16a085;}
.sidebar .label-size-2 a {background:#3498db;border-bottom:0px solid #226693;}
.sidebar .label-size-2 a:hover {background:#2980b9;}
.sidebar .label-size-3 a {background:#2ecc71;border-bottom:0px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#27ae60}
.sidebar .label-size-4 a {background:#9b59b6;border-bottom:0px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#8e44ad}
.sidebar .label-size-5 a {background:#e74c3c;border-bottom:0px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#c0392b}

  • Save temple and see how it looks like.
  • Done.

Senin, 20 Januari 2014

Make Fixed Header For Blogger


Geek Gadgets is  one of templates using fixed header style

I have seen a lot many blogs and blogger template providers offer free templates using fixed header style, but it's been a while for me to take interest in experimenting the way how to make fixed header on my blog.
Surprisingly it's not hard (even for beginner like) and to do so we only need to just put some css codes.

Having browsed many tutorials and tried to implement several suggested css codes didn't make me satisfied.
Some of their codes were working, but it resulted awful look of the template header and I found it little bit difficult to modify. No choice except block the codes and press delete button :).

Other suggested codes seemed better, but it didn't prove any enlightenment. Worst of all it didn't work and screwed up the appearance of the template itself.

It was simple finding. When I got stuck with my experiment and returned to may blog dashboard i noticed blogger.com also uses such fixed header menu style.

Instantly I right clicked and pointed the cursor to inspect element drop down options. Here I the codes.

Copied them and pasted on header area. Viola! it worked. Next I did other adjustment on other element.

Here's the step I did to complete my experiment in making fixed header.


  • Find     #header {     OR     .header {    or other similar codes refer to the header area.
  • Right  after   #header {   OR   .header {     put  these codes :

position: fixed;
left: 0;
z-index: 6;
height: 68px;
width: 100%;
background: white;
Note :  Value 68px  is the height size of your blog header. You can change the 68px to any number adjusted with the size of your blog header.

  • Next find     #main {      OR     .main {
  • After the     "{"     put      margin-top : 68px.  


68px   is just an example. You may need to change the size / height to match with your header.

Save temple and done.

Jumat, 17 Januari 2014

Add Customized Search Box Widget Blogger


As a blogger sometimes when using 3rd party template I tend to not being satisfied with the look or function of the search box.
When the look is OK, there comes problem that it doesn't work well. I mean when I try to type certain word query and hit enter no result appears.
That's little bit annoying. As everybody knows the search box on a site or blog is essential.
There are times I myself or users are lazy to browse labels or have a look at the archive and I need search box to look for a post I want to read.

Thanks to many creative and expert bloggers roaming around the internet performing their great work to help me and other beginner bloggers when dealing with the matter of template customization.

Following are the steps to put customized search box on a blog (style 1 & style 2).

Style 1.

On the Layout page  --->  click Add a Gadget  --->  Select  HTML/JavaScript  --->  paste the below codes on the provide box ---> Click Save and done.

<form id="searchThis" action="/search" style="display: inline;" method="get"><input onfocus="if(this.value==this.defaultValue)this.value='';" value="Search this Site" type="text" id="searchBox" onblur="if(this.value=='')this.value=this.defaultValue;" style="width: 150px;color:#636363;" vinput="" name="q"> <input id="searchButton" value="Go" type="submit"></form>

Style 2.

On the Layout page  --->  click Add a Gadget  --->  Select  HTML/JavaScript  --->  paste the below codes on the provide box ---> Click Save and done.

<style>
#MBBOldSearch {
display: block;
clear: both;
margin: 10px 0;
}
#MBBOldSearch #MBBSinput {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjY_1qY13iCFqHswmbLagkWZIxOofIhDmnCGj5g_Bq8_nd0OEUkHRxaGfyT0gL0opEEJHOe7eQIMzIPVMt2S903yF2-1-DJXoJXijuC01xbwtlZQX1VJ01Xp_BS-QrPMgXOnQlOWMoJ9jz/s20/Search-icon.png") no-repeat scroll 8px center transparent !important;
padding: 7px 15px 7px 35px !important;
color: #444;
font-weight: normal; font-style:italic;
text-decoration: none;
border: 1px solid #D3D3D3 !important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 59%;
}
#MBBOldSearch #MBBSsubmit {
color: #444;
font-weight: bold;
text-decoration: none;
padding: 8px 15px;
border: 1px solid #D3D3D3;
cursor: pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
</style>
<div id="MBBOldSearch">
    <form action="/search">
        <input name="q" id="MBBSinput" type="text" />
        <input value="GO!" id="MBBSsubmit" type="submit" />
    </form>
</div>
Note: The codes in blue are items for you to change according to your taste.

Selasa, 14 Januari 2014

3 Awesome Blogger Templates

Having browsed many third party blogger / blogspot template providers' sites, I found one site that offer awesome templates.

It's soratemplates.com. This site offers users 2 type of templates : free and paid version.
The free version ones not included css codes.
And the paid version gives users complete xml format incudes css codes.
The free version in some cases may cause difficulties for those want to customize the template look, but don't know much css codes.

The paid version templates relatively easier for users going to personalize the templates. However at least the basic knowledge about css is needed.

For you want to test the templates can download them from its' website.

These are screenshot of the 3 nice templates from soratemplates.com

Sight

Jarid

ModernBlog




Senin, 13 Januari 2014

Post Snippets Blogger


For me Post Snippets and Read More feature are not much different. The function is same : To shorten articles into summary or excerpt.
There some ways how to add post snippets with read more link at the end of the post summary.

This post will be about 2 other ways how to add the post snippets


Style 1.
  • Login to your blogger account ---> click   Template    ---> click   Edit HTML
  • Above / before    ]]></b:skin>    put these codes :
.thumb img{float:left; margin:0 10px 10px 0}
  • Next, find <data:post.body/> 
  • Replace the <data:post.body/> with the following codes : 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.hasJumpLink'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
<div class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if
cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/>
<data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</div>
</div>
<b:else/>
<data:post.body/>
</b:if>
</b:if>
</b:if>
</b:if>

  • Save template and done.

Style2.
  • Login to your blogger account ---> click Template ---> click Edit HTML
  • Above / before    </head>    put these codes :

<script type='text/javascript'>//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('5 6(s,n){b s.c(/<.*?>/d,"").e(/\\s+/).f(0,n-1).g(" ")}5 h(a){i p=j.k(a),3="",2=p.l("2");m(2.o>=1)3=\'<2 7="8" 4="\'+2[0].4+\'" />\';q 3=\'<2 7="8 r-2" 4="t://u.v.w/-y/z-A/B/C-D/E.F" />\';p.9=\'<a G="\'+x+\'">\'+3+"</a>"+"<p>"+6(p.9,H)+"...</p>"};',44,44,'||img|imgtag|src|function|stripTags|class|thumb|innerHTML||return|replace|ig|split|slice|join|readmore|var|document|getElementById|getElementsByTagName|if||length||else|no||https|lh4|googleusercontent|com||G9M2DTCTUwM|Tlh|2pwtc5I|AAAAAAAABKM|kCJg|Kf3W2M|no_image_yet|jpg|href|12'.split('|'),0,{}))
//]]></script>

  • Next, find     <data:post.body/> 
  • Replace the    <data:post.body/>     with the following codes : 

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<span expr:id='&quot;p&quot; + data:post.id'><data:post.body/></span>
<script type='text/javascript'>var x=&quot;<data:post.url/>&quot;;readmore(&quot;p<data:post.id/>&quot;)</script><b:else/><data:post.body/></b:if>
<br/>
<b:if cond='data:post.hasJumpLink'>
<a class='jump-link' expr:href='data:post.url + &quot;#more&quot;' rel='nofollow'>READ MORE &#187;</a><b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>READ MORE &#187;</a>
</b:if>
</b:if>

  • Save template and done.

Rabu, 30 Oktober 2013

Hide Quick Edit Wrench On Blogspot



If you are blogging using blogspot platform you have been familiar with quick edit displayed with wrench symbol.
If during your blogging activity and you don't want to see it you just can do this simple step.

  • First, you log in to your blogger dashboard, click, template, then Edit template.
  • Copy and paste the following code above the </b:skin>

.quickedit{display:none;}

  • Save template and done. 
  • Now, you are not going to see wrench picture while you signing in your blogspot blog.

Rabu, 23 Oktober 2013

Another variation of related posts



This related posts feature is adopted from a blogger template : SUPER and SUPER SEO.It is simple, yet it is nice and simple with blank / white background.
If you want to add this feature to your blogspot blog simply follow these following steps.
  • From your blog dashboard go template , edit HTML
  • Just   above / before    ]]></b:skin>    add the below codes :
.related_posts h4{
border-top: 1px dotted #eee;
color: #333;
font-size:14px;text-shadow:3px 3px #ededed; text-transform:uppercase;
letter-spacing: 0;
line-height: 15px;
margin: 25px 0 5px;
padding: 25px 0px;
}
  • Now, copy and paste the following codes  under / after     <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related_posts'>
<!-- *****************http://blogger.com*****Jan,2007****************** -->
<!-- *****************Related Articles by Labels - Take Two****************** -->
<!-- 1. Now, users don't need to change anything to use this widget. just copy and paste, and done!
2. The current article will also be listed, now it's no more.
-->
<div class='widget-content'>
<h4>Similar Posts You Might Like : </h4>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 5;
var maxNumberOfLabels = 2;
maxNumberOfPostsPerLabel = 5;
maxNumberOfLabels = 2;
function listEntries10(json) {
 var ul = document.createElement(&#39;ul&#39;);
 var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
                json.feed.entry.length : maxNumberOfPostsPerLabel;
 for (var i = 0; i &lt; maxPosts; i++) {
   var entry = json.feed.entry[i];
   var alturl;
   for (var k = 0; k &lt; entry.link.length; k++) {
     if (entry.link[k].rel == &#39;alternate&#39;) {
       alturl = entry.link[k].href;
       break;
     }
   }
   var li = document.createElement(&#39;li&#39;);
   var a = document.createElement(&#39;a&#39;);
   a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t); a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li); }
 }
 for (var l = 0; l &lt; json.feed.link.length; l++) {
   if (json.feed.link[l].rel == &#39;alternate&#39;) {
     var raw = json.feed.link[l].href;
     var label = raw.substr(homeUrl3.length+13);
     var k;
     for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
     var txt = document.createTextNode(label);
     var h = document.createElement(&#39;b&#39;);
     h.appendChild(txt);
     var div1 = document.createElement(&#39;div&#39;);
      div1.appendChild(h);
     div1.appendChild(ul);
     document.getElementById(&#39;data2007&#39;).appendChild(div1);
   }
 }
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
 <b:loop values='data:post.labels' var='label'>
   textLabel = &quot;<data:label.name/>&quot;;
 
   var test = 0;
   for (var i = 0; i &lt; labelArray.length; i++)
   if (labelArray[i] == textLabel) test = 1;
   if (test == 0) {
      labelArray.push(textLabel);
      var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
             labelArray.length : maxNumberOfLabels;
      if (numLabel &lt; maxLabels) {
         search10(homeUrl3, textLabel);
         numLabel++;
      }
   }
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>
Note : Change the codes in blue to your desired text.
  • Save template and done. :)

Senin, 14 Oktober 2013

Add Related Posts To Your Blog

If you are looking for another related posts style you can try this if you like.

  • Above </head> paste these codes;

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related_posts {
}
#related_posts h4 {
font: normal bold 140% &#39;Segoe UI&#39;, Calibri, &#39;Myriad Pro&#39;, Myriad, &#39;Trebuchet MS&#39;, Helvetica, Arial, sans-serif;
text-shadow: #fff 1px 1px 1px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
color: #333;
  letter-spacing: normal;
line-height: 20px;
margin: 20px 0 5px;
padding: 10px 10px;
background:#fff;
}
#relpost_img_sum {
/* height: 320px;
overflow: auto; */
margin: 0;
padding: 0px;
line-height: 16px;
}
#relpost_img_sum:hover {
background: none;
}
#relpost_img_sum ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#relpost_img_sum li {
border: 1px solid transparent;
background:#fff;
margin: 0 0 10px;
padding: 5px;
height: 65px;
list-style: none;
}
#relpost_img_sum .news-title {
display: block;
font-weight: normal !important;
}
#relpost_img_sum .news-text {
display: block;
text-align: left;
font-weight: normal;
text-transform: none;
color: #333;
}
#relpost_img_sum img {
float: left;
margin-right: 14px;
padding: 0;
border:1px solid #ddd;
width: 70px;
height: 70px;
background:#fff;
}
</style>
<script type='text/javascript'>//<![CDATA[
var relnum = 0;
var relmaxposts = 5;
var numchars = 175;
var morelink = "Read More";
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\' I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... <a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a><17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnum|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxposts|li|span|text|split|join|relpostimgthum|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|relatpost|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
//]]></script>
</b:if>

  • Next, after / below <data:post.body/> put the following codes :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related_posts'>
      <h4>Similar Posts : </h4>
    <b:loop values='data:post.labels' var='label'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/>
    </b:loop>
    <ul id='relpost_img_sum'>
    <script type='text/javascript'>relatpost();</script>
    </ul>
    </div>
    </b:if>  
  • Save your editing.
Customization (see the codes in blue) : 

  • For other customization, if you want to experiment on the codes, you can change and personalize according to your taste.
  • You can also adjust the display e.g the length of the character by changing the value.  

Kamis, 26 September 2013

Cara Non Aktifkan Infinite Scrolling Pada Template Blogger Flat UI




Ini cuma sharing pengalaman saya tentang cara mudah menonaktifkan feature Infinite Scrolling pada template Falt Ui yang saya pernah saya obox obox tempo lalu.

Untuk demo riil template dengan masih terintegrasi infinite scrolling bisa di klik disini.

Template Flat Ui ini memang oleh yang buat om Prayag Verma di tanamkan feature auto loading dengan memakai  Infinite Ajax Scroll jQuery plugin.
Sebenarnya bagus dan masih menurut om Prayag dengan pasang fitur ini memberikan keuntungan halaman blog bisa loading lebih cepat (walaupun saya belum coba apa juga akan loading cepat jika koneksi net nya lemoth :)) ).

Namun kalo teman bloger lebih mempunyai selera pakai templat Flat UI tanpa infinite scrolling seperti saya bisa coba langkah di bawah ini.
  • Seperti biasa kalau mau customize template, teman blogger masuk ke HTML editor.
  • Scroll / gulung ke bagian bawah. Temukan tag  </body>
  • Inti kode infinite scrolling ini letaknya ada di atas </body> ....... sampai dengan bawah kode   <b:include data='blog' name='google-analytics'/>
  • Lihat susunan letaknya di bawah.
<b:include data='blog' name='google-analytics'/> 
  <b:if cond='data:blog.pageType == &quot;index&quot;'>
<script type='text/javascript'>
//<![CDATA[
(function($){'use strict';Date.now=Date.now||function(){return+new Date()};$.ias=function(g){var h=$.extend({},$.ias.defaults,g);var i=new $.ias.util();var j=new $.ias.paging(h.scrollContainer);var k=(h.history?new $.ias.history():false);var l=this;function init(){var d;j.onChangePage(function(a,b,c){if(k){k.setPage(a,c)}h.onPageChange.call(this,a,c,b)});reset();if(k&&k.havePage()){stop_scroll();d=k.getPage();i.forceScrollTop(function(){var a;if(d>1){paginateToPage(d);a=get_scroll_threshold(true);$('html, body').scrollTop(a)}else{reset()}})}return l}init();function reset(){hide_pagination();h.scrollContainer.scroll(scroll_handler)}function scroll_handler(){var a,scrThreshold;a=i.getCurrentScrollOffset(h.scrollContainer);scrThreshold=get_scroll_threshold();if(a>=scrThreshold){if(get_current_page()>=h.triggerPageThreshold){stop_scroll();show_trigger(function(){paginate(a)})}else{paginate(a)}}}function stop_scroll(){h.scrollContainer.unbind('scroll',scroll_handler)}function hide_pagination(){$(h.pagination).hide()}function get_scroll_threshold(a){var b,threshold;b=$(h.container).find(h.item).last();if(b.size()===0){return 0}threshold=b.offset().top+b.height();if(!a){threshold+=h.thresholdMargin}return threshold}function paginate(d,e){var f;f=$(h.next).attr('href');if(!f){if(h.noneleft){$(h.container).find(h.item).last().after(h.noneleft)}return stop_scroll()}if(h.beforePageChange&&$.isFunction(h.beforePageChange)){if(h.beforePageChange(d,f)===false){return}}j.pushPages(d,f);stop_scroll();show_loader();loadItems(f,function(a,b){var c=h.onLoadItems.call(this,b),curLastItem;if(c!==false){$(b).hide();curLastItem=$(h.container).find(h.item).last();curLastItem.after(b);$(b).fadeIn()}f=$(h.next,a).attr('href');$(h.pagination).replaceWith($(h.pagination,a));remove_loader();hide_pagination();if(f){reset()}else{stop_scroll()}h.onRenderComplete.call(this,b);if(e){e.call(this)}})}function loadItems(b,c,d){var e=[],container,startTime=Date.now(),diffTime,self;d=d||h.loaderDelay;$.get(b,null,function(a){container=$(h.container,a).eq(0);if(0===container.length){container=$(a).filter(h.container).eq(0)}if(container){container.find(h.item).each(function(){e.push(this)})}if(c){self=this;diffTime=Date.now()-startTime;if(diffTime<d){setTimeout(function(){c.call(self,a,e)},d-diffTime)}else{c.call(self,a,e)}}},'html')}function paginateToPage(a){var b=get_scroll_threshold(true);if(b>0){paginate(b,function(){stop_scroll();if((j.getCurPageNum(b)+1)<a){paginateToPage(a);$('html,body').animate({'scrollTop':b},400,'swing')}else{$('html,body').animate({'scrollTop':b},1000,'swing');reset()}})}}function get_current_page(){var a=i.getCurrentScrollOffset(h.scrollContainer);return j.getCurPageNum(a)}function get_loader(){var a=$('.ias_loader');if(a.size()===0){a=$('<div class="ias_loader">'+h.loader+'</div>');a.hide()}return a}function show_loader(){var a=get_loader(),el;if(h.customLoaderProc!==false){h.customLoaderProc(a)}else{el=$(h.container).find(h.item).last();el.after(a);a.fadeIn()}}function remove_loader(){var a=get_loader();a.remove()}function get_trigger(a){var b=$('.ias_trigger');if(b.size()===0){b=$('<div class="ias_trigger"><a href="#">'+h.trigger+'</a></div>');b.hide()}$('a',b).off('click').on('click',function(){remove_trigger();a.call();return false});return b}function show_trigger(a){var b=get_trigger(a),el;el=$(h.container).find(h.item).last();el.after(b);b.fadeIn()}function remove_trigger(){var a=get_trigger();a.remove()}};$.ias.defaults={container:'.blog-posts',scrollContainer:$(window),item:'.post-outer',pagination:'#blog-pager',next:'#blog-pager-older-link a',loader:'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRDDYtLto4sVsWsjOO0I1XWVR5Cm1J57d-s63L02gNRSZz9uGmCdJrphia5vAM3Xfm5le9y8moCYYlCoEzMjCtO6qmrVIF3tsO57hHL1GyIPFqY2Mg1gpekwcVdVsrXFjFbEAwGeRkvRyY/s0/loading.gif"/>',loaderDelay:600,triggerPageThreshold:8,trigger:'Load more Posts',thresholdMargin:-500,history:true,onPageChange:function(){},beforePageChange:function(){},onLoadItems:function(){},onRenderComplete:function(){},customLoaderProc:false};$.ias.util=function(){var c=false;var d=false;var e=this;function init(){$(window).load(function(){c=true})}init();this.forceScrollTop=function(a){$('html,body').scrollTop(0);if(!d){if(!c){setTimeout(function(){e.forceScrollTop(a)},1)}else{a.call();d=true}}};this.getCurrentScrollOffset=function(a){var b,wndHeight;if(a.get(0)===window){b=a.scrollTop()}else{b=a.offset().top}wndHeight=a.height();return b+wndHeight}};$.ias.paging=function(){var c=[[0,document.location.toString()]];var d=function(){};var e=1;var f=new $.ias.util();function init(){$(window).scroll(scroll_handler)}init();function scroll_handler(){var a,curPageNum,curPagebreak,scrOffset,urlPage;a=f.getCurrentScrollOffset($(window));curPageNum=getCurPageNum(a);curPagebreak=getCurPagebreak(a);if(e!==curPageNum){scrOffset=curPagebreak[0];urlPage=curPagebreak[1];d.call({},curPageNum,scrOffset,urlPage)}e=curPageNum}function getCurPageNum(a){for(var i=(c.length-1);i>0;i--){if(a>c[i][0]){return i+1}}return 1}this.getCurPageNum=function(a){a=a||f.getCurrentScrollOffset($(window));return getCurPageNum(a)};function getCurPagebreak(a){for(var i=(c.length-1);i>=0;i--){if(a>c[i][0]){return c[i]}}return null}this.onChangePage=function(a){d=a};this.pushPages=function(a,b){c.push([a,b])}};$.ias.history=function(){var e=false;var f=false;function init(){f=!!(window.history&&history.pushState&&history.replaceState);f=false}init();this.setPage=function(a,b){this.updateState({page:a},'',b)};this.havePage=function(){return(this.getState()!==false)};this.getPage=function(){var a;if(this.havePage()){a=this.getState();return a.page}return 1};this.getState=function(){var a,stateObj,pageNum;if(f){stateObj=history.state;if(stateObj&&stateObj.ias){return stateObj.ias}}else{a=(window.location.hash.substring(0,7)==='#/page/');if(a){pageNum=parseInt(window.location.hash.replace('#/page/',''),10);return{page:pageNum}}}return false};this.updateState=function(a,b,c){if(e){this.replaceState(a,b,c)}else{this.pushState(a,b,c)}};this.pushState=function(a,b,c){var d;if(f){history.pushState({ias:a},b,c)}else{d=(a.page>0?'#/page/'+a.page:'');window.location.hash=d}e=true};this.replaceState=function(a,b,c){if(f){history.replaceState({ias:a},b,c)}else{this.pushState(a,b,c)}}}})(jQuery);
//]]>
</script><script>jQuery.ias();</script>
    </b:if>

    
</body>  
  • Hapus semua kode script sebagaimana terlihat dalam blockquote di atas. (Untuk amannya, kode yang mau di hapus dari template di CUT dan PASTE saja ke notepad buat di simpan. Siapa tahu jika di masa yang akan datang teman blogger berubah pikiran ingin kembali fitur gulung tak terbatas (infinite scrolling) tadi ada di blog teman, bisa gampang di buka).
  • Save template. Selesai.
Sebagai info, jika ada pakai template lain yang tanpa fitur Infinite Ajax Scroll jQuery plugin, dan ingin coba pasang, bisa lihat dan sedot kode script nya di blog mas  Parayag Verma langsung.

Matur tengkiyu dan selamat Nyobi .... monggo ....:)))

Senin, 23 September 2013

Make Blog Pager With Image 2



Next Post, Prev Post, Newer Post, Older Posts, Home, etc or usually displayed in other similar plain text are example of blog pager.

My previous article was to share tutorial about how to customize blog pager with image.
http://feelwantsearchlearn.blogspot.com/2013/07/make-blog-pager-with-image.html

The above article has shown you the way to change blog pager to image by changing codes on HTML Structure Integration.
*In an easy interpretation : HTML Structure Integration normally located  below    ]]></b:skin>

Here I'm going to share with you (especially beginners in blogging) another way how to change the display of the blog pager to image by adding some codes on CSS Style Integration.
*Again in an easy interpretation :  CSS Style Integration normally located  above    ]]></b:skin>

Copy these codes and paste them anywhere  above   ]]></b:skin>
OR  it will be better if you can easily find on css area the codes related to blog-pager, then paste / add the below mentioned codes to them.

.blog-pager-older-link,.blog-pager-newer-link{width:32px;height:32px;display:block;text-indent:-9999px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmTd_umMM5XUKPwaWMsLjwPpjFpJ2rQqLGh0JL_e2NPexc1aCxsPVB_tXOh-uITduoWjLPSF3fb4ntmHT52-0a7dBxuExZ-9iUbbp-tSrhzfliap14k4iXGiNx0qn9ZMthLRESou9M_MEi/s1600/rightarrow.png);background-repeat:no-repeat}
.blog-pager-newer-link{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxHQ4u_RDIwHi2mZvUF9wcn5brmHsvmYGxSqhavYhqYvmy1DsP58gOA8mW8Tx-3r5ETwn1NtScNH1mlwzyty3SG4J2sQ8IufmCDp-5nJ7v6LBYJ4iEdpXnxLxh0rqadMFSYAL8-cYQzb9F/s1600/leftarrow.png)}
.blog-pager-older-link,.blog-pager-newer-link{width:32px;height:32px;display:block;text-indent:-9999px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmTd_umMM5XUKPwaWMsLjwPpjFpJ2rQqLGh0JL_e2NPexc1aCxsPVB_tXOh-uITduoWjLPSF3fb4ntmHT52-0a7dBxuExZ-9iUbbp-tSrhzfliap14k4iXGiNx0qn9ZMthLRESou9M_MEi/s1600/rightarrow.png);background-repeat:no-repeat}
.blog-pager-newer-link{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxHQ4u_RDIwHi2mZvUF9wcn5brmHsvmYGxSqhavYhqYvmy1DsP58gOA8mW8Tx-3r5ETwn1NtScNH1mlwzyty3SG4J2sQ8IufmCDp-5nJ7v6LBYJ4iEdpXnxLxh0rqadMFSYAL8-cYQzb9F/s1600/leftarrow.png)}
.home-link{display:none}
.feed-links {
margin-top: 10px;
clear: both;
line-height: 2.5em;
}

Note: The URLs in blue are the image url. You can also change with other image you like if you want :))).

Pretty easy isn't it?. Happy blogging!

Sabtu, 21 September 2013

Fix Wrong Read More Feature


Blogging is my one of my daily menus.
Everyday, besides doing my daily routine serving my customers (like answering, replying emails, making rate calculation, arranging tour program, booking hotel or accommodation and other travel things), I always spare my time for blogging.
Blogging for me isn't always be associated with posting articles or updating, but modifying templates, learning css, html are also blogging.
I may be a blogaholic and a blogger templateaholic too :)))))
Everyday I always try to find new thing, and that's fun. That might be one of reasons I'm getting in love with blogging things.

As I'm not a geek or have something like education background on template stuffs, all I do is just try and fail. Hope not always try and fail, but try, try, try, succeed and develop and so on ...

Below is one of my findings during my learning by doing when trying to customize and modify a blogspot template.

Read More feature works both on blog post and static page.

How to fix :
  • Using CTRL+F find the the Read More text or something like Read the rest of entry, etc.
  • Find these codes and delete them :
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>Read more ... - <data:post.title/></a></span>
</b:if>
  • Next, replace the deleted codes with the following codes : 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div style='float:left;margin-right:10px;margin-top:5px;'>
<a expr:href='data:post.url'>Read more ... - <data:post.title/></a>
</div>
</b:if>
</b:if>
Save template and see how the auto read more feature work as you wanted : Only work for blog post page NOT for static page.

Have a nice day!

Minggu, 08 September 2013

Add Simple Scroll Box On Blog Post



When writing tutorial post, you might have to type long css or html codes. Sometimes they are too long and take much space of your posting. To get them organized you can use scroll box.

Here's how to make simple scroll box.

When writing  post, directly   switch to  HTML mode. Copy and paste these codes :
<div style='padding: 5px; overflow: auto; width: 400px; height:50px;border:1px solid #000000'> 
---- YOUR TEXT ----

then close it   by

 </div> 
 See how to put the codes in action as shown below :

<div style='padding: 5px; overflow: auto; width: 400px; height:50px;border:1px solid #000000'> 
One of enjoyable things when playing around with blogspot blog is even if I 'm not an expert in coding or css I can easily grab various ways in the way how customize my blog template. Some say wordpress offers more awesome features compared to blogspot. I must confess it is true. However I stil can find more and more fun when playing around with blogspot. That's way for my personal blog I am till using blogspot platform.</div>
Sample output of a simple scroll box 

One of enjoyable things when playing around with blogspot blog is even if I 'm not an expert in coding or css I can easily grab various ways in the way how customize my blog template. Some say wordpress offers more awesome features compared to blogspot. I must confess it is true. However I stil can find more and more fun when playing around with blogspot. That's way for my personal blog I am till using blogspot platform.

Customization:

  • width : 400px   the width of the scroll box. If you like to set the width to be shorter you can do it too. For example instead of simply write  auto you set the value becomes  300px, 350px, .... or any size you want.
  • height : 50px    on the codes above is just a sample. Again you can customize the value as you wish.

Have FUN!

Jumat, 30 Agustus 2013

Another Way To Add Breadcrumb To Your Blog



As a curious blogger like me, you might have ever tried to change templates / themes many times.
When changing different template, sometimes it feels like frustrating when you get stuck and still unable to find a way to customize a certain codes to get your blog's look as what you expected.
I myself ever changed template for my blogs more than 10 times. Just for exploration and experiment.

Sometimes a 3rd party template doesn't have breadcrumbs. The worse part is when trying to add breadcrumbs, some codes may not work or even if we have put the breadcrumbs codes we still can't see breadcrumbs on the full post page above date header or post title.

For your info, there area some ways to add breadcrumbs.
Based on my own experience I found there are several type of codes for adding breadcrumbs.
On my previous posts I have also shared 2 ways when you are going to add it to your blogspot blog.
Just browse the below URL to check them :
http://sogoodall.blogspot.com/2013/03/breadcrumbs-untuk-blogger.html
http://sogoodall.blogspot.com/2013/07/add-breadcrumbs-to-your-blog.html

Now, I want to share with you another way to add breadcrumbs to your blog if the codes on the 2 above articles doesn't work as you expected.

Step1.
Login to the dashboard --- > Template --- > Edit HTML.
Copy and paste the following code  above   ]]></b:skin>

.breadcrumbs{
padding:0 5px 5px 0px;
margin:0 0 15px;
font-size:11px;
font-weight:normal;
font-style: normal;
border-bottom: 4px double #ededed;
background-color: none;
}    

-----

Step 2. 
Copy the below  codes in blue and paste them  after or  below   <b:includable id='main' var='top'>

<b:include data='posts' name='breadcrumb'/>

Example :

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
              <b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>
  <b:if cond='data:mobile == &quot;false&quot;'>

-----

Step 3. 
Using CTRL + F   find    these codes : 

 <p class='comment-footer'>
    <a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + &quot;_backlinks-create-link&quot;' target='_blank'><data:post.createLinkLabel/></a>
  </p>
</b:includable>

-----

Step 4. 
Copy and paste all the codes (in italic blue)   under OR after   </b:includable>

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>


See example below for more details :

<p class='comment-footer'>
    <a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + &quot;_backlinks-create-link&quot;' target='_blank'><data:post.createLinkLabel/></a>
  </p>
</b:includable>

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

              <b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>

Now, save your template and done. :)))

Rabu, 28 Agustus 2013

Floating Blog Pager




On my previous post I have shared how to add blog pager with image.
Now, for more variety of blog pagers modification, I will also share the way how to embed floating blog pagers.
Floating blog pagers are displayed by image, and their position are added on the right end and on the left end of the blog page.
Basically floating blog pagers replace the display of the default blog pager usually found / seen at the post footer area.
  • Go to Template ----> click Edit HTML
  • Using CTRL + F find </head> tag.
  • Copy and paste the below codes before / above the </head>.
<style> #blog-pager a{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;height:75px;opacity:0.4;overflow:hidden;position:fixed;text-indent:-9999px;top:50%;width:75px;z-index:9;margin:0 0 0 5px} .blog-pager-older-link{background:url(http://4.bp.blogspot.com/-OqfA8438n_0/UhyM6Y4shSI/AAAAAAAAByw/gaQ6tV_rQU4/s1600/Prev%2BPost.png) no-repeat scroll 0 0 transparent;right:5px;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;-webkit-transition:all 0.3s ease-in;transition:all 0.3s ease-in;}.blog-pager-newer-link{background:url(http://2.bp.blogspot.com/-7QlvmMP5H_M/UhyNC62wxLI/AAAAAAAABy8/VYh7sWWBWas/s1600/Next%2BPost.png) no-repeat scroll 0 0 transparent;left:0;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;-webkit-transition:all 0.3s ease-in;transition:all 0.3s ease-in;}#blog-pager a:hover{opacity:1} </style>
Customization: Check out the codes in blue.
  • To change position of the pager image change the percentage number at this tag top:50%; become 60%, 70%, 80% or 90% or else. The number represents the distance from the top end of the blog. 60%, 70%, 80% or 90% from the top end of the blog page.
  • If you want to change the image with your own, simply upload the image, get the image URL and replace it with yours.

Senin, 19 Agustus 2013

Change Newer Post, Older Posts With Post Title



I have shared with you on my previous posts about how to change blog pager with image and floating blog pager.
This post is about how to change Newer Post, Older Posts with Post Title.
Basically the function of those tutorials remain the same : Customizing blog pager.

Want to know how the codes work?, check the below simple tutorial. (Leaving comment or not is not compulsory. Just enjoy! :))) )
  • First, open template from dashboard, then click Edit HTML.
  • Find   </head>  tag.
  • Copy the following italic blue codes and paste them below  after / under  </head>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
  #blog-pager-newer-link {font-size:14px;width:350px;float:left; text-align:left;font-weight:bold;}
#blog-pager-older-link {font-size:14px;width:350px;float:right; text-align:right;font-weight:bold;}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='http://biroelangiet.googlecode.com/files/blogpager.js' type='text/javascript'/>
</b:if>

Note:
  • Adjust the width of the pager with your template.
  • You can also change the size of text, by changing font size.

Minggu, 18 Agustus 2013

How To Make Marquee (Dynamic Text)


Some say the marquee style text is eye catching and makes the certain text more inviting.
If you think you want to make your blog more attractive by adding dynamic text, just take a look at some of the the following codes.
May be you will decide to pick one to add to your blog.

Type 1. Text will move repeatedly from the right to the left side.

Hello ... Welcome to my blog

<marquee>Hello ... Welcome to my blog</marquee>

Type 2. Text will move repeatedly from the left to the right side.

Hello ... Welcome to my blog

<marquee direction="right">Hello ... Welcome to my blog</marquee>

Type 3. If the text has rotated for 5 times it will dissapear from the display. Sure thing you can change the number / value to any number you desire.

Hello ... Welcome to my blog

<marquee loop"5"> Hello ... Welcome to my blog </marquee>

Type 4. Text will move to and fro from the right to the left and vice verse repeatedly.

Hello ... Welcome to my blog

<marquee behavior="alternate">Hello ... Welcome to my blog </marquee>

Type 5.The moving text will stop when the pointer touches the text.

Hello ... Welcome to my blog

<marquee behavior"alternate" onMouseOver="this.stop()" onMouseOut="this.start()">Hello ... Welcome to my blog </marquee>

Type 6. This type offers you to display bottom to top moving text. When your pointer touches it, it will stop.

How to make Marquee (dynamic text)

<marquee direction="up" height="30" onMouseOver="this.stop()" onMouseOut="this.start()" scrollamount="5">How to make Marquee (dynamic text)</a></marquee>

Those are only several types of marquee. Of course there area more styles you can explore. Have fun!

Sabtu, 17 Agustus 2013

Add Scroll Function To Your Blog Widget

Many bloggers have posted abundant articles might like to use scroll function on their blog widget area.
It is understandable since they sometimes want to display many information from their blog, but they want also to keep the the size between the posting and the widget area at the same height. Besides it is to make the look of their blog more organized and order.

Those want to try to put this scroll function on the widget area can try these steps.

Go to Template  ----> Edit HTML

(On this post I take an example of adding scroll function on Recent Posts widget found on the sidebar area. You can tray implement this codes / add the scroll codes to other selected widget).

Find these codes:
 <b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
        <b:include name='quickedit'/>
</b:includable>
  </b:widget>

  • Put these codes just after the    <div class='widget-content'>
  • Don't forget to add  </div>   after   </div> 

See the example below:
<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'><div style='overflow:auto; width:97%; height:380px;'>    <data:content/>
  </div>
      </div>  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
Note:

  • 97%  is the width of the sidebar area. You can customize this by changing the number. (Usually maximum width is 100%)
  • 380 px  is the height of the the widget with scroll you want to add.  Change this number as you want.

Next, preview the template look.
When you have seen the scroll embedded as you wished, now you can end your editing by clicking save template. That's all!.

Jumat, 16 Agustus 2013

Make Dropdown Label Widget


This one is an easy and super simple tutorial how to make dropdown style for label list widget for your blogspot blog.


Step 1. Login to your blog dashboard and go to Template editor page by clicking Template ---> Edit HTML.


Step 2. Find these codes:
<b:widget id='Label1' locked='false' title='Labels' type='Label'>



Step 3. Expand the codes until you see these.
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
    <b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
  </b:widget>
Step 4. Replace all those above codes with the following codes:
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
    <b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<select onchange='location=this.options[this.selectedIndex].value;' style='width:97%'>
<option>Click The Dropdown To Browse Posts By Label</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
  </b:widget>
Step 5. You can change the text : Click The Dropdown To Browse Posts By Label   with any desired text suits your taste. Also you can set the value  97%   to any number (normally 100% maximum) to adjust with the width of your widget area.

Step 6. Click save template and done!.