Create search box on Blogger com blog

Create search box on Blogger com blog

Today we will create a search box for our blogger.com hosted blog. This search box can able to search your blog context. Add this search box in a HTML/ Javascript gadget box.

First code:

<form id="searchThis" action="/search" style="display:inline;" method="get"><input id="searchBox" name="q" type="text"/> <input id="searchButton" value="Go" type="submit"/></form>

This search box will look like this:

Here is an another code for a search box.

<p align="center"><form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" size="25" type="text"/><input id="search-btn" value="Search" type="submit"/></form></p>

It will look like this one:

I wish these search box will serve as your wish.

{ Read More }

create blogger sitemap generator webmaster tools sitemap Luarbiasa heboh dan terbaik untuk blogspot

create blogger sitemap generator webmaster tools sitemap Luarbiasa heboh dan terbaik untuk blogspot

how to create and submit blogger sitemap to Google? to submit blogger sitemap,we need to access the WEBMASTER Tools. dont know on how to access webmaster tools? click here for the tutorial.
CREATE and SUBMIT GOOGLE SITEMAP to Google is very easy.

1. go to Google webmaster tools. (masuk ke WEBMASTER TOOLS)
2. select the site which need to submit the sitemap to Google.(pilih salah satu blog) in this tutorial, I will select www.arick.net. (DASHBOARD Menu will appear)
3. select SITE CONFIGURATION and SITEMAP.
4. in SITEMAPS, click the SUBMIT THE SITEMAP.
5. it is now the time. you can write your own sitemap. if you have BLOGSPOT BLOGGER, it usually YOUR URL/feeds/posts/default other site maybe URL/?feed=rss2. mine is http://www.arick.net/feeds/posts/default.(masukkan sitemap)
6. Done - selesai.

There are several kinds of sitemap in BlogSpot blogger. I have tried many combination and this is surely based on my own experiences.(macam-macam sitemap terbaik untuk Blogger BlogSpot berdasarkan pengalaman pribadi):

• feeds/posts/default   =>Simple RSS/RSS sederhana (default). maximum index 26 (in webmaster tools).listed as UNKNOWN. it works fine.use it if you have trouble with sitemap or if this is the first time you make the sitemap.
• feeds/posts/default?alt=rss => RSS which forks fine for many devices such as mobile phones. sometimes, it i called as MRSS. use this and Google might index your site better. generally i always use this kind of rss as the default for me. (maximum index 26 - listed as MRSS)
• feeds/posts/default?max-results=9999&amp => well,this RSS is the best in the universe. all blogger which use this surely will know why. many bloggers use other technique and failed. a month ago i was searching for the script to create sitemap. so many webmaster told me to use feeds/posts/default?max-results=9999. and the result is always buggy (based in my testing ground.:-P). then i realize it will works like a charm when i added &amp in the end. and it works.

here is the sample of my sitemaps. you can do the same like me or try the new formula.

I only have no more than 110 post but Google index 135 pages. how comes. it is easy,... by using all the combination of them, Google will index all the pages, even when someone makes a comments,it will be considered as a single pages and got crawled. i have been prove it using my own website.
believe it or not, I call this the BEST INVENTION this MONTH.
if you found out this is useful, you can post it in your blog, but give me the credit. thanks.
Selesai sudah percobaan sitemapku. atas bantuan dan percobaan para master di forum sebelah, akhirnya sitemap ini tercipta. posting ini tercipta untuk semua blogger di tanah air. HIDUP BLOGGER.
got any opinion or question? ask me.
There is a secret in submitting sitemap,Im not supposed to write it here as the technique is still unconfirmed.masih ada satu rahasia sitemap, suatu saat dibahas kalo dah selesai di tes.
Arick.net

{ Read More }

Create Newsletter for your Blogger Blog

Create Newsletter for your Blogger Blog

Newsletter is a good option when you want to send custom mails to your blog readers. It lets you send content rich HTML emails to your readers.Its not like the Feedburner Email Subscription(which just sends post updates via email at regular intervals) .You will be able to compose and send the newsletter at any time. Here are the steps to enable and send Newsletters.

1. Go to http://google.com/friendconnect and login there

2.Click on your Blog Name from the Left Pane.(If your blog is not already there, then add it)

3.Click on the Send a newsletter Option

4. Click the check box which says �Ask visitors to subscribe immediately after their first sign-in". After that Click on the Newsletter Gadget Tab.

5.Customize the Colors and other Options and Click on the Generate Code Button and Copy the Code from there.

6.You need to add this Code to your website. If you are using blogger, then Go to theLayout > Page Elements and Click on the Add a Gadget Link

Opt for HTML/JavaScript Gadget

and paste the copied Code into the Box Which appears and Save the Gadget

7.Now your blog readers will be able to subscribe to your Newsletters.

When you have enough subscribers, you can Compose the Newsletter from theCompose newsletters tab ,When you are done with creating the newsletter, Click on thePreview and send newsletter button and Click on the Send newsletter button from the popup preview window. you can see how many recipients will receive the newsletter.(In my case it is Total recipients : 539 as shown in the screenshot)

Newsletter subscription is just one of the different Friend Connect Gadgets. There are many more on the Friend Connect Website.

{ Read More }

Creating a Contact Me page for Blogger Blog

Creating a Contact Me page for Blogger Blog

Blogger has added a new widget in their widget page. This widget is a Contact Me widget which allows blog visitors to contact you.

This can be added in your blog sidebar or footer. In this tutorial I will tell you to how to add this to a blog page.

Create a blank page from Blogger -> Pages -> New Page -> Blank Page

Toggle to tab HTML and paste these code in the HTML textarea :

<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
Name
<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
Email
<span style="font-weight: bolder;">*</span>
<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Message
<span style="font-weight: bolder;">*</span>
<br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br />
<br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /><p style="display: inline-block;">Powered By <a href="http://sag-3.blogspot.com">Subins Blog</a></p>
<div style="max-width: 222px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

Now we have to register the widget to make it work properly. To do that Go to Template -> Edit HTML and scrollto the bottom of the code and paste the following code before </html>

<script>
_WidgetManager._RegisterWidget(_ContactFormView, new _WidgetInfo(ContactForm1, lowerbar2, null, document.getElementById(ContactForm1), {contactFormMessageSendingMsg: Sending..., contactFormMessageSentMsg: Your message has been sent., contactFormMessageNotSentMsg: Message could not be sent. Please try again later., contactFormInvalidEmailMsg: A valid email address is required., contactFormEmptyMessageMsg: Message field cannot be empty., title: Contact Form, blogId: YOUR BLOG ID, contactFormNameMsg: Name, contactFormEmailMsg: Email, contactFormMessageMsg: Message, contactFormSendMsg: Send, submitUrl: http://www.blogger.com/contact-form.do}, displayModeFull));
</script>

Replace the Wheat color background text above to your blog id. See this post to see how you can find blogger blog id.

When a user submits the Contact Me form you will get a mail from Blogger like this :

{ Read More }

Create Text Editor using HTML Jquery like in Blogger

Create Text Editor using HTML Jquery like in Blogger

You might have seen text editors where you can bold a text, italic a text etc... The perfect example of this the Blogger Post Text Editor. 

This is a simple tutorial that will create a text editor using HTML, Jquery & JavaScript.

Download Demo

We have two files, index.html which contains the HTML code and texteditor.js which contains the jQuery code. You should include the texteditor.js in index.html.

index.html

<!DOCTYPE html><html>
 <head>
  <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
  <script src="texteditor.js"></script>
 </head>
 <body>
  <center style="margin-bottom:20px;">
   <div class="ze ie"></div>
   <style>
   .font-bold.bold{font-weight:bold;}.italic{font-style:italic;}.selected{background-color: orange;}#openpb{margin:15px;}
   </style>
   <button type="button" class="g-button g-button-submit" id=stext>Text</button>&nbsp;&nbsp;&nbsp;&nbsp;
   <button type="button" class="g-button g-button-submit" id=shtml>HTML</button>
   <div id="controls" style="margin-bottom: 10px;">
    <a id="bold" style="color:black;display: inline-block;" class="font-bold">
     <button type="button">B</button>
    </a>&nbsp;&nbsp;&nbsp;
    <a id="italic" style="color:black !important;display: inline-block;"class="italic">
     <button type="button">I</button>
    </a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a id="link" class="link" style="display: inline-block;">
     <button type="button">Link</button>
    </a>&nbsp;&nbsp;&nbsp;&nbsp;
    <select id="fonts" class="g-button">
     <option value="Normal">Normal</option>
     <option value="Arial">Arial</option>
     <option value="Comic Sans MS">Comic Sans MS</option>
     <option value="Courier New">Courier New</option>
     <option value="Monotype Corsiva">Monotype</option>
     <option value="Tahoma New">Tahoma</option>
     <option value="Times">Times</option>
     <option value="Trebuchet New">Trebuchet</option>
     <option value="Ubuntu">Ubuntu</option>
    </select>
   </div>
   <iframe frameborder="0" id="textEditor" style="width:500px; height:80px;border:2px solid #CCC;border-radius:20px;overflow:auto;"></iframe>
  </div>
  <textarea name="text" id=text style="border-radius:20px;overflow:auto;display:none;padding-left: 10px;" rows="6" cols="53"></textarea>
 </center>
 </body>
</html>

texteditor.js

$(document).ready(function(){
 document.getElementById(textEditor).contentWindow.document.designMode="on";
 document.getElementById(textEditor).contentWindow.document.close();
 var edit = document.getElementById("textEditor").contentWindow;
 edit.focus();
 $("#bold").click(function(){
  if($(this).hasClass("selected")){
   $(this).removeClass("selected");
  }else{
   $(this).addClass("selected");
  }
  boldIt();
 });
 $("#italic").click(function(){
  if($(this).hasClass("selected")){
   $(this).removeClass("selected");
  }else{
   $(this).addClass("selected");
  }
  ItalicIt();
 });
 $("#fonts").on(change,function(){
  changeFont($("#fonts").val());
 });
 $("#link").click(function(){
  var urlp=prompt("What is the link:","http://");
  url(urlp);
 }); 
 $("#stext").click(function(){
  $("#text").hide();
  $("#textEditor").show();
  $("#controls").show()
 });
 $("#shtml").on(click,function(){
  $("#text").css("display","block");
  $("#textEditor").hide();
  $("#controls").hide();
 });
});
function boldIt(){
 var edit = document.getElementById("textEditor").contentWindow;
 edit.focus();
  edit.document.execCommand("bold", false, "");
  edit.focus();
}
function ItalicIt(){
 var edit = document.getElementById("textEditor").contentWindow;
 edit.focus();
 edit.document.execCommand("italic", false, "");
 edit.focus();
}
function changeFont(font){
 var edit = document.getElementById("textEditor").contentWindow;
 edit.focus();
 edit.document.execCommand("FontName", false, font);
 edit.focus();
}
function url(url){
 var edit = document.getElementById("textEditor").contentWindow;
 edit.focus();
 edit.document.execCommand("Createlink", false, url);
 edit.focus();
}
setInterval(function(){
 var gyt=$("#textEditor").contents().find("body").html().match(/@/g);
 if($("#textEditor").contents().find("body").html().match(/@/g)>=0){}else{
  $("#text").val($("#textEditor").contents().find("body").html());
 }
 $("#text").val($("#textEditor").contents().find("body").html());
},1000);

The user will type text in the iframe. The HTML of iframe will be added in the textarea. So when the user clicks HTML button he sees the HTML of iframe. You can pass the textarea value to your database if needed, but use htmlspecialchars when passing in PHP, because the user can inject XSS codes.

{ Read More }