Blog Archive

Perempuan apabila sembahyang lima waktu, puasa bulan Ramadhan, memelihara kehormatannya serta taat akan suaminya, masuklah dia dari pintu syurga mana sahaja yang dikehendaki.(Women are five times when prayer, fasting month of Ramadan, will maintain his honor and obey her husband, she entered the door of heaven where the desired sake only.)

Senin, 06 Desember 2010

Doa Awal Tahun & Doa Akhir Tahun

Doa Awal Tahun & Doa Akhir Tahun
Imam al-Hakim meriwayatkan dalam “al-Mustadrak ‘ala ash-Shohihain” dengan sanad daripada Sayyidina Abu Hurairah RA bahawa Junjungan Nabi SAW bersabda:-

Berdoalah kalian kepada Allah dengan keyakinan yang ianya akan diijabahkan Allah, dan ketahuilah bahawasanya Allah tidak menerima doa daripada hati yang lalai dan leka (yakni tiada kesungguhan).”
Marilah kita memanjatkan doa akhir dan doa awal tahun yang diajar oleh para ulama kita. Menurut keterangan tuan-tuan guru kita, Doa Akhir Tahun dibaca sebelum terbenam matahari (sebelum waktu Maghrib), manakala Doa Awal Tahun dibaca setelah Maghrib. Mudah-mudahan dimakbulkan Allah. Insya-Allah, jika dikabulkan Allah, menangislah Iblis dan Syaithan atas kegagalan mereka menjerumuskan kita ke neraka. Qabuul Qabuul Ya Rabb.
*******************************

Tutorial on adding Alexa Widget in Blog

Alexa Certified Site Stats for www.blogspottutorial.com
Continuing the previous article about alexa rank, now I would like to tell about more detail about adding alexa widget in blog. This posting is special for those who are still confused to add alexa widget not for advance bloggers because it won't be useful Before reading the main topic that is about steps to add alexa widget in blog you had better know the advantages you will get if you add alexa in your blog. Ok, in my previous posting Kang Rohman told that one of the ways to increase alexa rank is by adding alexa widget in our web or blog.
As we know that alexa rank will make a ranking based on the numbers of visitors to our blog or web, more visitor better alexa rank. How can alexa know the visitor numbers of the web or blog? Alexa will know it based on computers which have installed alexa toolbar. But not all people install alexa browser in their internet browser? That's why there is another alternative for blog or web owners. They can add alexa widget in their blog or web in order to get the accurate data about the visitors who come to our blog or web. By adding the alexa widget in the blog or web, them alexa machine will know accurately how many visitors and page views in our blog or web.


From the reasons above, Caniago Online suggests you to add alexa widget in every blog if you want to get better rank. Well, is it clear enough? I think that it is clear enough why we need to add alexa widget in our blog or web.
Now, If you want to add alexa widget in your blog or web but you are confused, just follow the following steps;
1st Step
  1. Click here to go to alexa website
  2. Type your blog URL in available column. Example: kolom-tutorial.blogspot.com (without http://), then click "Build Widget". alexa rank button
  3. There 3 types and sizes you can choose, copy the code next to the images and paste in notepad or other text editor. Save the code in your computer.

2nd Step
  1. Log in into blogger with your ID
  2. Click Layout
  3. Click Page Element
  4. Click Add a Gadget
  5. Click Plus sign plus (+) next to HTML/JavaScript. add-html 
  6. Paste the code you have saved in notepad into the column shown or available
  7. Click Save button.
  8. Move the element you just made into the place you want.
  9. Don't forget to click save button located on the right.
  10. Finish
Hopefully that after adding alexa widget in your blog, alexa rank of your blog or website will be better (the smaller, the better)
Alexa rank is also really quick in updating so the result can be seen in a few days. One important thing in increasing alexa is by trying to increase the number of visitors into your web or blog
Good Luck!!!


Free Software: PHP and HTML Editor

php editor Would you like to be a Web designer? If the answer is yes, then you should master the basics of programming, such as; CSS, HTML, PHP, MySQL and others. Besides mastering them, you should understand the software to manage the pictures, such as; adobe Photoshop, Corel draw, Macromedia flash player and others.
If you want to try to study about them, try to study about HTML program or PHP.
In order to make you easier to study, use the supporting software, for example PHP editor or HTML editor. You can buy this software in software seller, but if you want to get the free software, you can get it, too. Kang Rohman has tried free software called PHP editor, even though it is free but they are good enough. We can not only use it for editing PHP editor, but also for editing HTML. Are you interested in trying PHP editor software? Just click the banner below:
download php editor
Remember that, this software is not created by Kang Rohman, so for you who want to install this software into your computer, all the risk belongs to you.
Have a nice studying and I hope that you become an expert in web designer


What is Alexa Rank?

alexa.com Recently Caniago Online often gets e-mails which ask me about Alexa Rank or what is Alexa Ranking? Well, after thinking the questions, it seems interesting to talk about it in this blog. Besides increasing my vocabulary of keywords for uncle Google, this topic is also good for killing my boredom after playing with script or template codes almost everyday.
In order to fulfill the curiosity of the readers who have asked about Alexa Rank, below is some writing of Kang Rohman that deal with Alexa Rank.

What is Alexa Rank?
To define what Alexa rank is, Kang Rohman quotes directly from alexa.com and here is its original quote;
The traffic rank is based on three months of aggregated historical traffic data from millions of Alexa Toolbar users and data obtained from other, diverse traffic data sources, and is a combined measure of page views and users (reach). As a first step, Alexa computes the reach and number of page views for all sites on the Web on a daily basis. The main Alexa traffic rank is based on a value derived from these two quantities averaged over time (so that the rank of a site reflects both the number of users who visit that site as well as the number of pages on the site viewed by those users). The three-month change is determined by comparing the site's current rank with its rank from three months ago. For example, on July 1, the three-month change would show the difference between the rank based on traffic during the first quarter of the year and the rank based on traffic during the second quarter.
Because the definition is directly from Alexa.com, so it is very accurate and trustable.
How does Alexa.com know the number of traffics or visits in our blog?
As the definition above, the information of visitors or traffics number in our blog is taken from alexa toolbar which has been installed in internet users. If the alexa toolbar is installed in the browser we use, then, alexa.com will identify how many visitors and page view in our website or blog. After the data is collected, then the alexa machine will automatically make ranking in that website or blog.
Alexa rank starts from 1 and the best ranking is of, course one (1), the same as the ranking in school. The boy with ranking one is the most diligent student in the class. The smaller alexa rank a website or blog has, the better alexa ranking a website or blog gets or it means that ranking quality of the website or blog gets better. It is extremely opposite with Google Page Rank, if the page rank is high, it means the website or blog is good and has a lot of traffics or visitors. The bigger, the better.
How important is Alexa rank for a website or blog?
For those or blog owners who do not make their web or blog to look for money in the internet, Alexa rank is not important and useful. However, having a web or blog with good alexa rank could be a prestige for the owner because it shows that their web or blog is very popular. Am I right? Well. It depends on us.
For those or web or blog owners who become their web or blog to look for money, alexa rank is very important. Why is it very important? Because money giver websites, such as; Texts Link ads, Sponsored Review, ReviewMe, ask2link and others become alexa rank as the standard. Better alexa rank your web or blog has, more advertisers want to advertise in your web or blog. It means that $$$ will come to your wallet easily.
How can we increase the alexa rank?
Because alexa rank is very important for you who is looking for some money online, so you must make the alexa rank in your blog or web better and better. There are many ways to increase the alexa rank, but it seems that I will post about increasing the alexa rank in the next posting.
One of the most effective ways is by putting alexa widget in your blog or web, as Kang Rohman does in my present blog. For you who want to add alexa widget, just visit this website! You only type the URL address of your web or blog and then pick up the scripts and add into your web or blog.
Still confused about adding alexa widget, just wait for my next posting about alexa. Well, readers I think that's the entire topic about alexa and for more details, just wait for my next posting...ok!!


Add Yahoo! Buzz Button in Blogger Template

yahoobuzz Someone has asked Kang Rohman "How To Add Yahoo! Buzz Button in Blogger?" In this tutorial, I would like to try explaining how we can add Yahoo Buzz Button in blogger. And I hope that it will be useful for others.
What is the advantage of adding Yahoo! Buzz Button in blog? The advantage is to ease the blog owner or blog visitors to submit the article they think interesting into Yahoo! buzz. More articles which are submitted to Yahoo Buzz, More frequent your articles shown on the yahoo! buzz front page. and of course, it would make your blog have much traffic afterwards.
If you are interested in adding Yahoo! Buzz Button in your blog, just read the following tricks.
First, please choose the form of yahoo! Buzz button you like in this page. Match your choice with tour template design; click Get Code next to the button you like, click Select Code, copy the code and paste into notepad or other text editors. Save in your computer. Code will be used and added in blogger template.


buzzbutton
Second, in yahoo buzz code, there is a code you must change. For example, I have chosen square yahoo! buzz button, and the following is the code of yahoo buzz button I got.
<script type="text/javascript" src="http://d.yimg.com/ds/badge2.js" badgetype="square">ARTICLEURL</script>
Change ARTICLEURL with the code <data: post.url/>, so the code will look like below;
<script type="text/javascript" src="http://d.yimg.com/ds/badge2.js" badgetype="square"><data:post.url/></script>
In order to make it beautiful when it is added into blog, add a few codes so the code will look like below;
<div style='float:right;padding:5px;'><script badgetype='square' src='http://d.yimg.com/ds/badge2.js' type='text/javascript'><data:post.url/></script></div>
Now, yahoo! buzz code is ready to add in your template and below are the step;
  1. Log in into blogger with your ID...
  2. Click Layout
  3. Click Edit HTML tab
  4. Click "Download full template" and please back up them first. (important).
  5. Give a mark next Expand Widget Templates expand-widget
  6. Find this code:
    <div class='post-body entry-content'>
    <data: post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
    Or, sometimes looks like below:
    <div class='post-body entry-content'>
    <p><data:post.body/></p>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
  7. Add yahoo! buzz code like this:
    <div class='post-body entry-content'>
    <div style='float:right;padding:5px;'><script badgetype='square' src='http://d.yimg.com/ds/badge2.js' type='text/javascript'><data:post.url/></script></div>
    <data:post.body/>
    <div style='clear: both ;'/> <! -- clear for photos floats -->
    </div>
  8. Click Save template button.
  9. Finish and See the result.

The steps above are for those who haven't modified their template with Read More facility. How about if the code is change with read more, like my post here? Well, you can change it like below;
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p>
<div style='float:right;padding:5px;'><script badgetype='square' src='http://d.yimg.com/ds/badge2.js' type='text/javascript'><data:post.url/></script></div>
<data:post.body/>
</p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p>
<div style='float:right;padding:5px;'><script badgetype='square' src='http://d.yimg.com/ds/badge2.js' type='text/javascript'><data:post.url/></script></div>
<data:post.body/>
</p>
<a expr:href='data:post.url'><b>Read More...</b></a>
</b:if>
Save the template and finish.

As an addition, in the yahoo! buzz code above, there is a code like this;
<div style='float:right;padding:5px;'>
This code can be changed if you are familiar with CSS, for example;
float:right
The placement of the code above will make the yahoo buzz located on the right side, if you want to place the yahoo buzz on the left, then the code will be like below;
float:left

Well… do you want to see the examples? Just click here!
That' all, have a nice try and happy blogging!!!



Showing Top Commentators in Blogger

topcommentators When we are visiting our friends' blog which uses WordPress, we sometimes find the blogs use Top Commentators plug in, right! What is To Commentator used for? Well, it is used to show the most visitors who give comments to the articles. The top commentators are usually shown in the sidebar.
Now, is there a widget for blogger machine? Is there a widget that can show the top commentators in blogger? The answer is yes. It happens because there are many bloggers lovers who participate in making Top Commentator Widget for blogger so that blogger look nicer to look at.
Top Commentator Widget was firstly created by this blog owner and then developed by this blog owner. How about Kang Rohman? Well, Caniago Online got this information from Kang Rohman's friend, oom.
To add Top Commentator Widget, you simply need to insert this script into your blog :


<script type="text/javascript">
function pipeCallback(obj) {
document.write("<ol>");
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write("</ol>");
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=c92ac21897d8b56e61cfa85930dd89a1&filter=nickname&url=http%3A%2F%2FBlogName.blogspot.com&num=10" type="text/javascript"></script>

From the script above, we need to do some editing so that it matches your blog:
filter=nickname : Change the nickname with the name you want to filter, for example ; your own name. It is done not to show your comments in the widget. Example; Rohman
BlogName.blogspot.com : please change the blog address with your blog address. Example: rubrik-elektronik.blogspot.com
num=10 : The maximal number of commentators that you want to show in the widget, please change with the number you want, example: 5,6,7, or 8.
And how can we add the widget in our blog. Just read the steps below:
  1. Log in into blogger with your ID.
  2. Click Layout
  3. Click Page Elements tab
  4. Click add a Gadget addgadget
  5. Click plus sign (+) for HTML/JavaScript add-html
  6. Copy and paste the code that you have
  7. Clicks save button.
  8. Please move to the area you want, do not forget to click save button.
  9. Finish
Have a nice Trying and Good Luck!!


BlogUpp! : Alternative to look for the traffic

blogupp Many ways we can do to look for the traffic for our blog or website, some of them are by searching Search Engine Optimization (SEO), Submit to Social bookmarking, Join the forum and many else. However, there is other alternative to look for the traffic that is by adding BlogUpp! Widget in blog.
If you add BlogUpp! Widget, the banner of blog or web of other blogger will appear in your blog, and your blog banner will appear in other blogger blog or web, too as long as they add BlogUpp! widget. In addition, we can say that we exchange banner each other, but it work automatically.
Adding BlogUpp! Widget! In your blog is very easy and practical. Below are the specialties of BlogUpp! Widget That I quoted from its original web.


  1. No signup. No email and privacy exposure
  2. No ad submission and no efforts
  3. No animation and annoying ads
  4. Multi language support
  5. Cheat-proof and fair sharing
  6. WordPress platform and alike friendly
  7. Targeted readers reach
  8. Welcome bonus for everyone
  9. Best de facto exchange ratio (10:9) and more
Well, interested in adding blogupp! Widget in your blog, just read the steps below:
1st step
  1. Please click here to visit blogUpp! website.
  2. Drop your attention to the top of the website.
  3. Enter the URL address of your blog in the available column, example: http://rubrik-elektronik.blogspot.com, then click Shoot ahead button. There are three kinds of widget you can choose. Please choose one as you like. Shoot-ahead
  4. Copy and paste the code given, and then paste it into notepad or other text editor. Save in your computer. bloguppcode_03

2nd step
  1. Log in into blogger with your ID.
  2. Click Layout
  3. Click Page Elements tab
  4. Click add a Gadget addgadget
  5. Click plus sign (+) for HTML/JavaScript add-html
  6. Copy and paste the code that you have
  7. Clicks save button.
  8. Please move to the area you want, do not forget to click save button.
  9. Finish
Or you can directly click "add to blogger" button in BlogUpp! website! And later on, the widget will be installed automatically in your blog.
Good luck ! and hopefully, you will get a lot of traffic.


Google Pages / Google Page Creator is closed

google page creator Many people have known about this information. but many haven't known it yet. A few months ago, kang rohman posted or informed about one of Google service, Google Pages or Google Page Creator, with Google page creator, we can save various kinds of data, e.g; images, JavaScript, CSS, and others. But, now we can't use it anymore because Google page creator will be closed in the end of this year. And they will change it with a new service "Google Site".
Below is the information quote of Google Page Creator:


Google Page Creator is no longer accepting new sign-ups.
We are no longer accepting new sign-ups for Page Creator because we have shifted our focus to developing Google Sites, which offers many of the capabilities of Page Creator along with new features like site-level navigation, site-level headers, control over who can see and edit your site, and rich embeddings like calendars, videos, and Google docs.
If you are currently a Page Creator user, you can continue to use Page Creator and your pages will automatically be transitioned to Google Sites later this year. We are committed to making this transition as smooth and easy as possible, and we will post more details as we get closer to the transition time. You can also manually move your web pages from Page Creator to Google Sites or other service providers at any time.
Learn more about this change.
In Google Page Creator, we can save JavaScript or CSS, but according to rumor we can not do that in Google Site. That's why, if you save various Java Script in Google Page Creator, you should move them in your computer so that you are still able into upload them into other server.
Is there another server beside Google page creator? Of, course there is. You can try yahoo service! Yahoo! Geocities. If you have has account in yahoo! Please log in here! After log in, you should sign up for geocities. In order to upload the data into yahoo! Geocities, you can read here!
If you have info about a website for saving JavaScript or CSS freely, please inform me by comment box so the other will know it.


Tutorial on Making Horizontal Navigation

Recently, Hazirah Online has got many questions on how to make navigation button, like HOME,, FREE TEMPLATE, ELECTRONIC RUBRIC, and as seen in below illustration:
navigation
Actually, I have explained about this topic. Please read my post about "Vertical-1 menu", "Make Drop down Menu With CSS". You might be interested in one of navigation menu I have ever posted.
Some bloggers can't find the articles about making navigation button but some can find it and have succeeded to make navigation button. However, when they were trying to insert the link address into the buttons, they could not do that. It means that Kang Rohman tutorial is not clear yet. That's why in this post, I would like to explain more clearly and hopefully that you will understand.


One thing you should know that designing a template is very complex and different each others. So when reading my tricks, you should work harder to match with the template you are using.
Before making navigation button, there are some things that you should prepare; they are the keywords that you will insert on the buttons, example Kang Rohman decides to insert HOME,, FREE TEMPLATE, ELECTRONIC RUBRIC to be inserted in navigation button that Kang Rohman uses.
The other preparation is the links that you will use. The links can be blog address or others web, links to the blog posting or links to your own web, For example; because Kang Rohman has some blogs, then I want some blog navigation are inserted by the log links, example;
http://rubrik-elektronik.blogspot.com
http://blogtemplate4u.com
How about if the links are the blog links not links for others blog? Don't worry because we still can do that, however there is one lack of blogger compared with WordPress, that is not be able to make Static page. What does Static page mean? Static page means that the page that doesn't belong to the lines of posting page, example; about me in WordPress.
In blogger, we can not do that, if you want a page to have a link, then you should post it. So, please post the page you want to be linked. How can we know a link of a post? It's easy. Just click the title of a post or click the Read more menu if you use Read more, then look at your address bar, that's the link address of a posting, finally copy and paste it into the notepad. Sample of posting address:
http://www.blogspottutorial.com/2008/11/google-pages-google-page-creator-is.html
illustration:
post URL
URL
Beside the posting link address, you can also insert links for label or category. This function is very useful because when the navigation button is clicked; all posting will be shown in its category. Example, if a visitor clicks the navigation button, and then all posting in the category of free template will be opened:
http://www.blogspottutorial.com/search/label/free%20template
free template label
Link Lable
Ok, I consider that you have understood the first step. The next step is adding the code navigation into your template. Below is the navigation sample that Kang Rohman will explain, please see here.
Just remember that the template design between one templates with the others are different, so what I am going to explain might be different with your template. That's why please use or make one blog as your experiment blog, so if you make mistakes or something wrong happens, it won't damage your blog. Please choose the ordinary white minima template.
Well, Let's start the experiment;
  1. Please Log in into blogger with your ID.
  2. Click Layout.
  3. Click Edit HTML Tabs. Edit HTML
  4. Find the following Code ]]></b:skin>
  5. Copy paste the below code above ]]></b:skin>
    /*  navbar
    ==================  */
    #bg_nav {
        background: #000000;
        width: 660px;
        height: 29px;
        font-size: 11px;
        font-family: Arial, Tahoma, Verdana;
        color: #FFFFFF;
        font-weight: bold;
        margin: 0px auto 0px;
        padding: 0px;
        border-top: 1px solid #333333;
        border-bottom: 1px solid #333333;
        overflow: hidden;
        }
    #bg_nav a, #bg_nav a:visited {
        color: #FFFFFF;
        font-size: 11px;
        text-decoration: none;
        text-transform: uppercase;
        padding: 0px 0px 0px 3px;
        }
    #bg_nav a:hover {
        color: #FFFFFF;
        text-decoration: underline;
        padding: 0px 0px 0px 3px;
        }
    #navleft {
        width: 440px;
        float: left;
        margin: 0px;
        padding: 0px;
        }
    #navright {
        width: 200px;
        font-size: 11px;
        float: right;
        margin: 0px;
        padding: 6px 5px 0px 0px;
        }
    #navright a img {
        border: none;
        margin: 0px;
        padding: 0px;
        }
    #nav {
        margin: 0px;
        padding: 0px;
        list-style: none;
        }
    #nav ul {
        margin: 0px;
        padding: 0px;
        list-style: none;
        }
    #nav a, #nav a:visited {
        background: #222222;
        color: #FFFFFF;
        display: block;
        font-weight: bold;
        margin: 0px;
        padding: 8px 15px 8px 15px;
        border-left: 1px solid #000000
        }
    #nav a:hover {
        background: #6e6d6d;
        color: #FFFFFF;
        margin: 0px;
        padding: 8px 15px 8px 15px;
        text-decoration: none;
        }
    #nav li {
        float: left;
        margin: 0px;
        padding: 0px;
        }
    #nav li li {
        float: left;
        margin: 0px;
        padding: 0px;
        width: 150px;
        }
    #nav li li a, #nav li li a:link, #nav li li a:visited {
        background: #333333;
        width: 160px;
        float: none;
        margin: 0px;
        padding: 7px 30px 7px 10px;
        border-bottom: 1px solid #000000;
        border-left: 1px solid #000000;
        border-right: 1px solid #000000;
        }
    #nav li li a:hover, #nav li li a:active {
        background: #666666;
        padding: 7px 30px 7px 10px;
        }
    #nav li ul {
        position: absolute;
        width: 10em;
        left: -999em;
        }
    #nav li:hover ul {
        left: auto;
        display: block;
        }
    #nav li:hover ul, #nav li.sfhover ul {
        left: auto;
        }
  6. Drop your mouse down and find this code:
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
    </b:section>
    </div>
  7. Copy and paste the following code below code above:
    <div id='bg_nav'>
    <div id='navleft'>
    <div id='nav'>
    <ul>
    <li><a href='http://www.blogspottutorial.com/'>home</a></li>
    <li><a href='http://www.kangrohman.com/'>My Notes</a></li>
    <li><a href='http://template-unik.blogspot.com/'>Free Template</a></li>
    <li><a href='http://rubrik-elektronik.blogspot.com/'>Electronic Rubric </a></li>
    </ul>
    </div>
    </div>
    <div id='navright'>
    <form action='http://YourBlogName.blogspot.com/search' id='searchform' method='get' name='searchform'>
    <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Go'/> </form>
        </div>
    </div><!-- end bg_nav -->
  8. Click SAVE TEMPLATE.
  9. Finish.

Until this your experiment has done, however if you apply it in your template, you need to match a few things, such as; the width of the navigation, links, keywords and others. Some samples are as follow;
/*  navbar
==================  */
#bg_nav {
    background: #000000;
    width: 660px;
    height: 29px;
    font-size: 11px;
    font-family: Arial, Tahoma, Verdana;
    color: #FFFFFF;
    font-weight: bold;
    margin: 0px auto 0px;
    padding: 0px;
    border-top: 1px solid #333333;
    border-bottom: 1px solid #333333;
    overflow: hidden;
    }
You have to change the width; 660px into the values which is suitable with your template; e.g. width: 990px.

#navleft {
    width: 440px;     float: left;
    margin: 0px;
    padding: 0px;
    }
#navright {
   width: 200px;     font-size: 11px;
    float: right;
    margin: 0px;
    padding: 6px 5px 0px 0px;
    }
This one is also the same; you need to change it with the value that is suitable with your template.

<li><a href='http://www.blogspottutorial.com/'>home</a></li>
<li><a href='http://www.kangrohman.com/'>My Notes</a></li>
<li><a href='http://template-unik.blogspot.com/'>Free Template</a></li>
<li><a href='http://rubrik-elektronik.blogspot.com/'>Electronic Rubric </a></li>
You have to change the available links with the links you want. For this matter or problem, I have explained above. Examples http://www.blogspotutorial.com is changes into http://example.blogspot.com. And the keyword can be changed as you want; example "home" becomes "Front Page".
Have a nice work!!


Solutions Not To Make Favicon Disappear Frequently

favicon You have read Kang Rohman tutorial about "Add Favicon to Your Blog URL Address", haven't you? However, many readers who get confused because the favicon of ten disappear and only blogger logo appears. Is there a solution to handle this matter? Well, to handle disappeared favicon, you can use some tips below;
  • Make sure that the extension of your favicon image is .ico, not the others
Perhaps, you have ever tried to make favicon image with the other extension, except .ico, for example .gif. .jpg. Or else. Actually, after you uploaded it, the favicon will appear but sometimes it disappears. That's why; you have to change it with .ico.  Please read the my previous tutor to change the favicon image.


 Add your favicon code under blogger favicon code
I believe you are confused where the location of blogger favicon code. If you pay attention to the code in your template, you will not find favicon code unless you add it by yourself. However, actually blogger inserts its favicon code in the template. The code is as follow;
<b:include data='blog' name='all-head-content'/>
Do you believe in me? Ok, please visit your blog address. Click View menu at the menu bar on the top of your browser, then click "Source" for internet explorer or "Page Source" for firefox. You will see all code of your template. Pay attention to the code in the head, you will not see Kang Rohman code, but will see the following code:
<head> <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> <meta content='true' name='MSSmartTagsPreventParsing'/> <meta content='blogger' name='generator'/> <link href='http://www.blogger.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/> <link rel="alternate" type="application/atom+xml" title="Kolom Tutorial - Atom" href="http://kolom-tutorial.blogspot.com/feeds/posts/default" /> <link rel="alternate" type="application/rss+xml" title="Kolom Tutorial - RSS" href="http://kolom-tutorial.blogspot.com/feeds/posts/default?alt=rss" /> <link rel="service.post" type="application/atom+xml" title="Kolom Tutorial - Atom" href="http://www.blogger.com/feeds/4569368524623882898/posts/default" /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.blogger.com/rsd.g?blogID=4569368524623882898" /> <link rel="alternate" type="application/atom+xml" title="Kolom Tutorial - Atom" href="http://kolom-tutorial.blogspot.com/feeds/147113262052297401/comments/default" />

The red code is the code of blogger favicon. In order your favicon not to be blocked by blogger favicon; you have to add your favicon code under the favicon code.
For example, your favicon code is a follow;
<link href='http://www.example.com/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
 
Please save it like this:
<b:include data='blog' name='all-head-content'/>
<link href='http://www.example.com/favicon.ico' rel='shortcut icon' type='image/x-icon'/>

Or, if it doesn't work yet, try to save it right above <b: skin>:
<link href='http://www.example.com/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
<b:skin>
Don't forget to SAVE THE TEMPLATE

Follow the structure of Blogger Favicon Code
If both ways above don't work either, then try to change your favicon code like blogger's, for example your previous favicon code is as follow:
<link href='http://www.example.com/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
Change it into like this:
<link href='http://www.example.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>
Add that code right above </head>:
<link href='http://www.servergambar.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>
</head>
Don't forget to SAVE THE TEMPLATE

If the steps above are correct, the favicon code should be normal again like before.
At wits endKang! I am still confused, please give me more ways! Ok, if you are still confused. I will give more. However, if you still confused on how to make favicon, just read here.
Below are the steps to insert favicon code into your template:
  1. Please Log in into blogger with your ID
  2. Click layout.
  3. Click Edit HTML tab Edit HTML
  4. find this code <b:skin> or it is usually like this; <b:skin><![CDATA[/*
  5. Save your favicon code right above <b:skin>, example : <link href='http://www.example.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>
    <b:skin>
  6. Click SAVE TEMPLATE.
  7. Finish

Hopefully that your favicon image will not disappear again after following the steps above.


How to Migrate from Classic Template into New Template

classic Two days ago, someone asked Kang Rohman. He said that he clicked link "Revert To Classic Template", so his template changed into Classic template.
Then, he asked Kang Rohman on how to change classic template into new template!
The steps are as follows. Before changing it, make sure you have backed up your template so if unexpected something happens; you are still able to backup and return to the normal condition.



  1. Login into blogger with your ID 
  2. Click Template template
  3. Click Customize Design tab  customize design
  4. Click UPGRADE YOUR TEMPLATE button upgrade template
  5. Choose your favorite template
  6. Click SAVE TEMPLATE button
  7. Finish and now your template has become new template.
It is easy, isn't it? Have a nice trying!!!



What is Social Bookmark Network site?

When we are reading the tips from master bloggers on how to increase the blog visitors or web, they often say "submit your articles into Social Bookmark Site" or Social bookmark Network or Favorite Bookmark and others
For newbie or new blogger in blogging, they are often confused with those words, and maybe they will ask a question" What is Social Bookmark Network site?" and what can we can from it?"
Hmmm..for you who have been blogging in blogspheres may forget those who don't understand about this, and we often forget that we used to be like them (newbie). For you who still don't understand about Social Bookmark site and its advantages, lets find out its information together.


While we are looking for complete info, Kang Rohman tries to share what Kang Rohman has known. What is Social Bookmark Network site? basically, Kang Rohman can say that Social Bookmarking Network site is a network site that function to mark the information in the Internet.
Generally, a website or blog will be posted or updated by the website or blog owner but different with social bookmark network because the content of the site will be filled by articles or information from other websites which are submitted into this site. Everyone can submit any useful articles or information.
What are the advantages of submitting our blog articles into Social Bookmark? Before knowing the advantages of submitting blog articles into Social Bookmark, we surely have to know how it works. If Kang Rohman tells you how it works, it would be probably like below;
First, submitting your articles into social bookmark can be done by everyone, not always by the admin or the blog owner. For example, if you feel that the article you are reading is useful and interesting and want to share the info with the others, you may submit that articles into social bookmark.
Second, in social bookmark site, there is Vote, you and anyone may give a vote to the article that you think the article is useful or interesting.
And there are still ways on how it work. From both ways, we can take a conclusion the advantages of submitting articles of a blog or site into the social bookmark., they are;
  1. Get a lot of visitors.
This is what the blogger master always promises about. They promise and talk about the advantages of submitting articles into social bookmark site. Why and why? Let's pay attention!
In order to make it easier to understand, Kang Rohman takes one sample from one of social bookmark site, digg.com. If you submit the article into digg.com, it means your article will be in digg.com and if your article is really interesting to read, the readers of the site perhaps will visit your blog. Article in digg.com is only summary and a link to your posting. Below is the screen shoot sample.
digg
If the article is very interesting or useful to read, the readers will not hesitate to give a vote to your article. More vote will give a chance for our article to be shown on the sidebar and if your article is shown on the sidebar, thousands of readers will see the title of your articles. And if thousand readers see it, it is a big chance for them to visit our blog.
diggsidebar
Sometimes the article we submit has good position in search engine, It is absolutely a gift of a lot of visitors for our blog or site.
     2. Get a lot of free back links (link popularity)
You know back links or link popularity, don't you? More blog or site linked to our blog or site is good for our blog or site. If it is a commercial blog, many people don't hesitate to spend hundred or even thousand dollars per month for getting back links from other site. If you submit your articles into social bookmark, you will get free back links.
There are still many advantages we can get if we submit our articles diligently and if kang rohman continue it again, this article will be very long.
Some social bookmark site are;  http://digg.comhttp://www.stumbleupon.comhttp://ma.gnolia.comhttp://delicious.com, http://www.furl.net, and others
That's why many masters often suggest us to submit our article into social bookmark site..
Good luck



Making a Blog in Magazine Style Template

magazine_03 Since WordPress Theme with Magazine Style Theme appeared, e.g; Mimbo Theme, Revolution Theme, Arthemia Theme and many more, it seems that there is a new trend in making theme or template, that is adopting Magazine Style Theme or Magazine Style Template. One of the real victims is Kang Rohman himselfBig Grin, in the latest two templates that I released; I named them magazine template, though they are not 100 % adopted from Magazine Style Template.
The special characteristic of magazine style template is that there is a column or blog content that can be disappeared when we are reading the whole text or even there is a column that can appear and disappear.



Can blogger template use this kind of system? Yes, we can. Take a look the sample in http://magazine-1.blogspot.com and pay attention all widget available, then click Read Full story button and see what happens. Some widgets dissapper and some widget which first disappear, now appear (bottom sidebar)
It uses very simple technique; you only add additional code into the widget you want them to disappear or opposite. Below is its additional code;
Make a widget appear into disappear
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Widget you want dissappear
</b:if>

Make a widget disappear into appear:
<b:if cond='data:blog.pageType == "item"'>
Widget you want appear
</b:if>
For example, please look at your template code. You will see the code the similar code like below;
<div id='sidebar'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML8' locked='false' title='Blogging Tutorial For Beginner' type='HTML'/>
<b:widget id='HTML7' locked='false' title='Get Update Via Email' type='HTML'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Label2' locked='false' title='Browse by Categories' type='Label'/>
<b:widget id='HTML2' locked='false' title='Site Info' type='HTML'/>
</b:section>
</div>
One widget code like;
<b:widget id='HTML8' locked='false' title='Blogging Tutorial For Beginner' type='HTML'/>

The code above means representative of one widget or gadget that we put in sidebar or footer. The widgets will appear in the front page of your blog. In ordinary template, if we click on read more, the widgets will always appear. And now, if you add the code I have written above, the widgets will disappear. Example ;
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:widget id='HTML8' locked='false' title='Blogging Tutorial For Beginner' type='HTML'/>
</b:if>

That's for only one widget, if you have many widgets at the bottom and want to hide them, then you should add the code like below;
<div id='sidebar'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML8' locked='false' title='Blogging Tutorial For Beginner' type='HTML'/>
<b:widget id='HTML7' locked='false' title='Get Update Via Email' type='HTML'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Label2' locked='false' title='Browse by Categories' type='Label'/>
<b:widget id='HTML2' locked='false' title='Site Info' type='HTML'/>
</b:section>
</b:if>
</div>
The code above will make the widgets appear into disappear. To make widgets appear into disappear a little difficult because you have to open your blog expand template first by giving a mark next Expand Template Widget. Example, if you haven't opened the expand widget template, the widget code will look like below:
<b:widget id='HTML8' locked='false' title='Blogging Tutorial For Beginner' type='HTML'/>
And after the expand is marked, the code will be like below (pay attention to the widget tiles)
<b:widget id='HTML8' locked='false' title='Blogging Tutorial For Beginner' 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>
If the widgets do not appear in the front page, and you want them to appear when you come to article page, you should add the code below;
<b:widget id='HTML8' locked='false' title='Blogging Tutorial For Beginner' type='HTML'/>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
  <!-- 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:if>
</b:includable>
</b:widget>
Don't forget to click SAVE TEMPLATE button and enjoy your blog in Magazine style Template.

clip_image002I am confused and confused…, kang Rohman likes making people confused and never make a full or complete tutor clip_image003. Wait the minute and cool brothers….I have finished the articles yet. Ok, if you are still confused with the articles above, you can read the steps below:
Make widget appear into disappear
  1. Log in into blogger with your ID
  2. Click Layout
  3. Click Edit HTML tab
  4. Please click Download full template. Please back up the template first (important)
  5. Find this code which is similar to your template code : <div id='sidebar'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
    <b:widget id='HTML8' locked='false' title='Blogging Tutorial For Beginner' type='HTML'/>
    <b:widget id='HTML7' locked='false' title='Get Update Via Email' type='HTML'/> <<b:widget id='HTML1' locked='false' title='' type='HTML'/>
    <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
    <b:widget id='Label2' locked='false' title='Browse by Categories' type='Label'/>
    <b:widget id='HTML2' locked='false' title='Site Info' type='HTML'/>
    </b:section>
    </div>
  6. Choose the widgets you want hide and add the code, example;
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:widget id='HTML8' locked='false' title='Blogging Tutorial For Beginner' type='HTML'/>
    </b:if>
  7. Click SAVE TEMPLATE.
  8. Finished
Make widget disappear into appear
  1. Log in into blogger with your ID
  2. Click Layout
  3. Click Edit HTML tab
  4. Give a mark in Expand Template Widget, wait until the process finish expand widget template
  5. Find the code widget that you want to modify, example: <b:widget id='HTML8' locked='false' title='Blogging Tutorial For Beginner' type='HTML'>
    <b:includable id='main'>
    <b:if cond='data:blog.pageType == "item"'>
      <!-- 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:if>
    </b:includable>
    </b:widget>
  6. Click SAVE TEMPLATE
  7. Finished
I hope it is easier to understand and happy blogging



How To Hide Blogger Navbar

You have known blogger navbar, haven't you? If you haven't, you can see at the top of your blog. There you can see a bar, the bar has some important functions, they are; as blogger search, give a flag to tell blogger, log in or log out and others. Below is called as Blogger navbar:

navbar
In fact, many bloggers don't like the presence of this navbar and want to hide it. Can we disappear it? Yes, we can. But before disappear it, please ask blogger if we can disappear it or not because I am afraid that it will break the blogger rules and will not responsible for any effect from disappearing the blogger navbar.
Disappear the Blogger Navbar

  1. Log in into blogger with your ID
  2. Click Layout
  3. Click EDIT HTML tab
  4. Click Download Full template. Back up your template first (important!)
  5. Find the code which is similar to the code below, focus at the body code:
    body { background: #8F8E8E; width: 100%; color: #000000; font-size: 12px; font-family: Arial, Tahoma, Verdana; margin: 0px auto 0px; padding: 0px; }
  6. Copy and paste the following code above the body  {….} :
    #navbar-iframe  { display : none; height : 0; visibility : hidden; }
  7. Click SAVE TEMPLATE
  8. Finished and now your blog navbar has hidden.
Besides the steps above, there is still another alternative through AUTO HIDE, this auto hide is safer from breaking the blogger rules because we don't disappear the navbar but only hide it. If we drop the mouse to navbar, then the navbar will appear again. These steps will not work normally in Internet explorer browser but work well in other browser.
Below are the steps to hide the navbar.
  1. Log in into blogger with your ID
  2. Click Layout
  3. Click EDIT HTML tab
  4. Click Download Full template. Back up your template first (important!)
  5. Find the code which is similar to the code below, focus at the body code:
    body { background: #8F8E8E; width: 100%; color: #000000; font-size: 12px; font-family: Arial, Tahoma, Verdana; margin: 0px auto 0px; padding: 0px; }
  6. Copy and paste the following code above the body  {….} :
    #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)} #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
  7. Click SAVE TEMPLATE
  8. Finished and now your blog navbar has AUTO HIDE.
. I hope it is easier to understand and happy blogging


How To Add A Related Post Widget

There is a reader of this blog who asked Kang Rohman on how to make a Related Post Widget in blogger. Well…can we make it? Don't worry because I can make it for you and it is easy.

There are some advantages by adding related post widget in our blog; the readers will be able to find the articles that relate to the article they reading and it also gives an advantage for the blow owner because the readers can stay in the blog longer.
If you are interested in adding that widget, just read the guide below;


  1. Log in into blogger with your ID
  2. Click Layout
  3. Click EDIT HTML tab
  4. Click Download Full template. Please back up your template first
  5. Please download the script first
  6. Give a mark next to Expand Widget Templates and wait for a few seconds until the process is over. expand-widget
  7. Find the code below (focus on red code):
    <div class='post-body entry-content'>
         <data:post.body/>
         <div style='clear: both;'/> <!-- clear for photos floats -->
       </div>
  8. Copy and paste the script you have downloaded right under the code <data:post.body/>
  9. Click SAVE TEMPLATE
  10. Finish and check the result
The above steps are for those who still the original template and does not use read more feature. If you use a template that has been modified with Read More system just like Kang Rohman Blog, just follow the steps below;
  1. Log in into blogger with your ID
  2. Click Layout
  3. Click EDIT HTML tab
  4. Click Download Full template. Please back up your template first
  5. Please download the script first
  6. Give a mark next to Expand Widget Templates and wait for a few seconds until the process is over. expand-widget
  7. Find the code below (focus on red code): :
    <b:if cond='data:blog.pageType == "item"'>
    <style>.fullpost{display:inline;}</style>
    <p><data:post.body/></p>
    <b:else/>
    <style>.fullpost{display:none;}</style>
    <p><data:post.body/>
    <a expr:href='data:post.url'><strong>Read more...</strong></a></p> 
    </b:if>
  8. Copy the script you have downloaded, then paste you see below :
    <b:if cond='data:blog.pageType == "item"'>
    <style>.fullpost{display:inline;}</style>
    <p><data:post.body/></p>
    Paste Your Script here!
    <b:else/>
    <style>.fullpost{display:none;}</style>
    <p><data:post.body/>
    <a expr:href='data:post.url'><strong>Read more...</strong></a></p> 
    </b:if>
  9. Click SAVE TEMPLATE
  10. Finish and check the result
Good Luck!!!



Increasing Your Visitors With Meta Tag


metatag One of our motivations to make a blog is that our articles or pictures can be read by many people or visitors. We expect the visitors from many sources and one of them is from search engine, e.g; Google, yahoo, msn and others.
In order to make our blog get a lot of attention from search engine, we have to add Meta tag at the header of the template we are using.
Meta tag is divided into four aspects and the aspects that people often use as follows;
  • Meta tag keywords
The code that is often installed for Meta keyword is as follows;
<meta content=' your keywords here' name='keywords'/>
Below is the sample to install Meta tag keywords:


<meta content='blog, blogspot, blogger, blogspot tutorial, tutorial blog, tutorial blogspot, tutorial, CSS, menu, navigation, JavaScript, template, blogspot template' name='keywords'/>
From the sample above, we can install some keywords which are assumed as the main targets of our blog, among keywords are separated by coma. However, try not to add more than 30 keywords and the keywords should be relevant with the articles in our blog. Meta tag Description
The code that is usually installed for meta tag description is as follows;
<meta content='your blog description here' name='description'/>
Below is the sample to install meta tag description:
<meta content='Tips and trick to easy blogging at blogspot also free download e-book and template' name='description'/>
The blog description is surely matched with the blog content.   If you are still confused to add meta tag in blogspot, just follow the guidance below.
  1. Log in into blogger
  2. Click Layout
  3. Click EDIT HTML tab
  4. Click Download Full template and please back up first. (important)
  5. Find the code below: <title><data:blog.pageTitle/></title> .
  6. Add the meta tag code that you have made right under the code below <title><data:blog.pageTitle/></title> .
    <meta content='your blog description here' name='description'/>
    <meta content=' your keywords here' name='keywords'/>
  7. Click SAVE TEMPLATE
  8. Finish
However, if you still confused in making meta tag, now there are many online tools to make meta tag correctly. You only put some keywords and the interest description, then click generate button, your meta tag is made in a short time. One of the website that offers this service is http://www.submitcorner.com/cgi-bin/tools/metagen.cgi .
Have a nice trying!


Make Slide Show Tab View menu


tabview Have you ever visited http://kompas.com? One of the most famous newspaper website in Indonesia... At the left of the site, you can see a tab menu which is usually called "Tab View". Why is it called Tab Menu? Because when the tab is clicked, it will move the menu content (wanna prove, just click the tab). However, it is a little different from the normal tab menu. The tab menu usually shows the content of the menu in turn or what we usually call "slide show". Kang Rohman takes a conclusion that menu has 2 functions; as a "Tab View" and "Slide Show".
Kang Rohman was interested in that tab menu, tried to apply it in blogger template and it works. To see the sample of Slide Show Tab View menu, please visit http://magazine-1.blogspot.com and pay attention to the left side of the top, there you can see the menu that is similar to the menu in kompas.com.
If you are interested in making Slide Show Tab View menu, please follow the steps below.

#1 step
  1. Log in into blogger with your ID
  2. Click Layout
  3. Click Edit HTML tab
  4. Click Download Full template. Please back up your template first
  5. Copy the code below, then paste it above ]]></b:skin>
    .indentmenu{ font: bold 11px Arial; width: 100%; /*leave this value as is in most cases*/ } .indentmenu ul{ margin: 2px; padding: 0; float: left; /* width: 80%; width of menu*/ background: transparent; } .indentmenu ul li{ display: inline; } .indentmenu ul li a{ float: left; margin: 2px; color: #000; /*text color*/ padding: 5px 11px; text-decoration: none; border: 1px solid #ccc; } .indentmenu ul li a:hover{ background:#ddd; } .indentmenu ul li a:visited{ color: white; } .indentmenu ul li a.selected{ color: white !important; padding-top: 6px; /*shift text down 1px*/ padding-bottom: 4px; border: 1px solid #000000; background:#000000; } .tabcontentstyle{ /*style of tab content container*/ border: 1px solid gray; width: 450px; margin-bottom: 1em; padding: 10px; } .tabcontent{ display:none; } @media print { .tabcontent { display:block !important; } }
  6. Before continuing, please download this script , copy it, then paste it right above </head>
  7. Click SAVE TEMPLATE
  8. The 1st is done. Now, why don't you take a rest first, drink coffee, tea or milk to make you relax clip_image001
Ok, finish you coffee, let's continue to the 2nd step
#2 step
  1. Click Page Element tab
  2. Click Add Gadget AddGadget
  3. Click plus button (+) for HTML/JavaScript. (img)
    HTML
  4. Copy and paste the code in available column: 
          
    <div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;"> <div id="pettabs" class="indentmenu"> <ul> <li><a href="#" class="selected" rel="tab1">1</a></li> <li><a href="#" rel="tab2">2</a></li> <li><a href="#" rel="tab3">3</a></li> <li><a href="#" rel="tab4">4</a></li> </ul> <br style="clear: left"/> </div> <div style="width:240px;text-align:justify;padding: 5px; margin-bottom:1em"> <div id="tab1" class="tabcontent"> <a href="http://magazine-1.blogspot.com/2008/11/obama-will-change-bush-policy.html"> <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="obamabush" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQT7tLy2n9L7-5JzC-Jd8YQXXQZ8GOX-sJEAmE0hDz8-1VmIlybleuKixBd7siZJoVOCmLzXO0Am6vyLpectbKwEFjzh-5eCdtBAO-nBM8GBBlftlMa98CL_nVhJPihseb8oqr2W5PgCw/?imgmax=800" height="152" title="obamabush"/></a> <p><h3><a href="http://magazine-1.blogspot.com/2008/11/obama-will-change-bush-policy.html">Obama Will Change Busf Policy</a></h3></p> U.S. President Barack Obama will change several numbers of controversial policies by President George W. Bush, including the restriction of the parent embryo cell research [...] </div> <div id="tab2" class="tabcontent"> <a href="http://magazine-1.blogspot.com/2008/11/beyonce-will-never-sell-her-wedding.html"> <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="beyone" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGREM8NAyEse5RNbmvf5fj7lphxt52l2YhJZnHJ4n1PMbhuqjpDfLrm39RxuWO27fbvpsBoba-FvMovxwRxJGzgM3Q_sP0N-f0W12gziBfLe3jY4lkqEUjHoVeCb_-QB3Ax5Qni4CwxgI/?imgmax=800" height="152" title="beyone"/></a> <p><h3><a href="http://magazine-1.blogspot.com/2008/11/beyonce-will-never-sell-her-wedding.html">Beyone Will Never Sell Her Wedding Photo</a></h3></p> Beyonce said, she will never consider to sells her wedding photo with Jay-Z to a celebrity magazine that offering a large amount of money as rewards, even she wonder with the amount of money that offered to her [...] </div> <div id="tab3" class="tabcontent"> <a href="http://magazine-1.blogspot.com/2008/11/guns-n-roses-will-back.html"> <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="Guns N 'Roses" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqgqXbTPLEuooTs54GDwck_5HBxOHnOVj1772nxzbTILxVS8_L6ZjJ1WlBczDOVRY7cWXq03OH43vWrZ38XPfD0r-EpxfA7lATfks_rfnYQfBHzu64GXWEPj4fzHlmAcsXChTmG1idgVI/?imgmax=800" height="152" title="Guns N 'Roses"/></a> <p><h3><a href="http://magazine-1.blogspot.com/2008/11/guns-n-roses-will-back.html">Guns N 'Roses Will Back</a></h3></p> After 15 years not releasing album, the group rock Guns N ' Roses will launch a new album in the United States on 23 November. The band's latest album is "The Spaghetti Incident", released in 1993 [...] </div> <div id="tab4" class="tabcontent"> <a href="http://magazine-1.blogspot.com/2008/11/i-pod-can-make-your-ear-buzz.html"> <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="ipod" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisXBORWdRGnFvOFsmYrcEObmZpsPujD0MSrceUjticMcCx3jL1WPtW5jmfmG0BnFQx0mZFPGYW9r-pkF_fjTn983tP4ujoz3UwFYSdQ8yFKLdZF3hWUhUCjOlDBv0lIRW_X6WrEm_-FKk/?imgmax=800" height="152" title="ipod"/></a> <p><h3><a href="http://magazine-1.blogspot.com/2008/11/i-pod-can-make-your-ear-buzz.html">Ipod Can Make Your ear Buzz</a></h3></p> Music is one way to wake the spirit, to create happy life, but what happens if the music makes the ears buzz? of course, not the music that makes the ear 'buzzy',[...] </div> </div> <script type="text/javascript"> var mypets=new ddtabcontent("pettabs") mypets.setpersist(true) mypets.setselectedClassTarget("link") mypets.init(2000) </script>
  5. Click SAVE TEMPLATE button.
  6. Finish and view you blog to see the result.
The code above is not absolute as Kang Rohman has written. You can modify it as your interest or suitable with your template.
Below is additional information that will ease you in modifying this code.
In the 1st step, there is a row of CSS code, that code can be modified so that it produces a beautiful row tab. 
Take a look at the code below
<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;">
<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" class="selected" rel="tab1">1</a></li>
<li><a href="#" rel="tab2">2</a></li>
<li><a href="#" rel="tab3">3</a></li>
<li><a href="#" rel="tab4">4</a></li>
</ul>
<br style="clear: left"/>
</div>
This code is a tab row with the tab row such as1, 2, 3, and 4. You can change with your favorite ones, such Recent Comments, Recent Post, Shoutbox or anything you want. To arrange the height of your widget, change height:350px  with the value that you want, example; height:400px.
Please, Pay attention the code below too.
<div style="width: 240px; text-align: justify; padding: 5px; margin-bottom: 1em">
The code above is used to arrange the menu content and it can be changed as you want to, such as;
width:240px : it is used to arrange the width, change it with the value that you want, example; width:300px.
text-align:justify : it is used to arrange the writing, change it with the value that you want,
Example; text-align:left, text-align:right.
Also, Pay attention the code below too.
<script type="text/javascript">
    var mypets=new ddtabcontent("pettabs")
    mypets.setpersist(true)
    mypets.setselectedClassTarget("link")
    mypets.init(2000)
    </script>
To arrange the moving of image from one tab to other tab, change 2000  with the value that you want, example; 2100.
Code in "Slide Show Tab View" contains Kang Rohman Articles. Please change it with your own articles.
Have a nice trying
Original Script by: dynamic drive. Modified by: Blogspot tutorial


Search Islamic Directory
Keyword: