Salah satu cara meningkatkan traffic blog Anda yaitu harus mengirim sitemap/rss blog ke Google Webmaster Tools untuk menghasilkan organik yang murni .Dengan istilah "lalu lintas organik" Maksud nya lalu lintas traffic yang datang ke blog Anda melalui mesin pencari seperti Google dan search engine lain nya.
Link or anchor text is the text that will appears as a hyperlink, and is probably one of the most important elements in terms of the use of keywords. You must have often see this previous anchor text. In fact, anchor text has become a major element of web pages, which are often used without know its effect on rankings.
Anchor text has been discussed previously, but knowing how to use it is vital, because these elements are very influential to rank them. When search engines see Your web page, it will automatically search engines will explore all the links that exist in
these web pages.
If the link (or most) based text, then it will be better, because the search engines are not just going to track it down, but also see the keywords that exist in it.
However, making all text-based links It is not enough to need its own art take all the benefits of anchor text. The first thing you should understand is that anchor text was divided into two types,
that is yours and belongs to someone else. This is serious,
no joke. It is important for you to
understand how to link to website
others. But not only that, you should also understand how they link back to you.
For example, if you enter into a search on Search for the word ''click,''you will see that almost at the Adobe website attitude The top of the search results. This is not in caused because the Adobe website many include the keyword click.
What actually happens is that many people are linking Adobe PDF reader by using the word ''click''in anchor his text. This can be understood because the website
offers a PDF file which can be downloaded usually include a link that reads Click here to download or similar.
As you can see, not just the anchor text You are having an effect, but also how Your website will be included in the anchor text from other websites. We will discuss
how others will link you later.
For now, think about how you
using anchor text in the websites.
As we already know, the anchor text is the text that are interconnected in wabsite you. This text can connect to your own website or to another website
contentnya relevant to the content of the website You. That is the main cause why are so powerful anchor text, ie the relevancy of the links and words that are used
to create the link.
When your website search engine explore, He will look at several factors, among others:
Of course, not just these factors which will in observe, but these factors are most affect the rankings. Therefore, how these elements will handle determine how user-friendly (and authentic)
your website.
Therefore, if your website is aimed to serve the businessmen, then your website probably will include articles and information about the type of business, business strategy,
and linking to website where visitors will join in a business.
When observing a website crawler, He will see if the topic of your website is is about business (which will be determined by keywords that you use in text).
Then He will explore all the links
on the website. If the text based links that include keywords and leads to relevant websites,
then the crawler will give a high score. The result is that you will appear higher in SERP, than if you do not include relevant keywords in the text and links.
However, you must be careful when
make the anchor text. If using word-wrong word, then you may not be never getting the results expected from link. One of the mistakes that are often done by the owner of the website is to make
web page with the anchor text "click here''.
The word is not only too often in
use and in disregard by the crawler, but also there is no way to link it with content of the website. We observe crawlers anchor text is, He did not see the keywords
relevant, even if the link leads to the relevant website.
Suppose that the anchor text as an opportunity for indicate your relationship with the website
relevant. The best way is use keywords as much as possible,
which is taken from a list of keywords that have been
You make during the planning process.
Back to business website in the above example, if You use an anchor text use the word "business type" and linking to
website associated with their
each type of business, then search engines will see the keywords and links that lead to website of certain business them.
Therefore, the attempt at making a small piece anchor text, you not only have compelling reason to use the keyword, but also has a link to direct to relevant websites. If you want to add anchor text into the Bus Type Your web pages, then add a piece of HTML code like the following example, in every
a place where you want the anchor text appears:
< a href="http://www.online business.com"> Online business </a>
One more strategy to the anchor text must considered is to vary the anchor text. When you repeat the anchor text together repeatedly on a single web page, then anchor text will begin to decrease
effectiveness. Can even cause the search engine gives low rankings.
It would be more effective if they use the keyword varied as the anchor text. This gives Opportunity to vary your anchor text, while keeping the consistency of
keyword that is in use.
Another type of anchor text is in use by others to link back your website. Anchor text is often not considered as an SEO strategy. In fact this is one The most effective type of optimization can
You use. Here's an example:
One internet marketing expert
decided to see how fast he it can make website rank high in the SERP. He uses anchor text links on web pages, then pleaded backlinks using keywords are targeted, and relevant to your website him. The result? Within days, his website
had been in fourth position in Google SERP.
There are two things that should be remembered from this example.
The first is to ask the website owner backlinks. Backlinks or back links are links from another website that leads to your page in retaliation for the link you provided on them. Backlinks are the most effective comes from relevant websites with website You, but sometimes you have to look for
own.
In addition, in order to get all the virtues that There on backlinks, you will also need to ensure Your website will be linked in a way that you want. From the get backlinks which leads to the main page of your website, would be more effective if they provide an
anchor code text you want on the website will link back.
The second thing to be aware of the example above is, you must ensure that the link behind the need to include keywords is the target, ie keywords most effective for your website. Keyword is
most often used in the search and
highly relevant to your website, is
keywords should you use in
anchor text. Therefore, the main function of the anchor text is
to optimize the website in the ranking order high by search engines, so it can provide traffic for your website. But how often the anchor text should be in use on a web page? It is one magic number, no person really knows for sure.
Other people will said another.
Some say no more than two or three times, while others argue no less from 10 to 12 times. As a basic rule, use anchor text as much as you can. If you have a link that can be included, Do not miss it just because you have uses several times in the anchor text pages. But not to meet the content with the anchor text just because you want
have links.
To determine where the anchor text
essential and which are not, that depends on each person. However, if you analyzer using a good program, that traces the links on your web pages, You should be able to determine the anchor text
The most effective where and how
use it on the page affect the flow of traffic.
Anchor text is a good way to
improve rankings. But as has been
You often hear, web pages should be in created with the main objective is for the user.
One more thing that should be remembered about the anchor
text before we proceed. One way
The most effective way to use anchor text is placed within the content dynamic.
Dynamic content is content that always changed. Often, that means the blog. Anchor text very suitable for daily updated blog or weekly. This is the fresh content (Which will also give a plus for improving rankings on search engines) that
gives you the opportunity to change the anchor regular text.
Crawler search engines can also be bored. If you could give them a dynamic content and contain relevant anchor text, then the crawler will help you.
Anchor text has been discussed previously, but knowing how to use it is vital, because these elements are very influential to rank them. When search engines see Your web page, it will automatically search engines will explore all the links that exist in
these web pages.
If the link (or most) based text, then it will be better, because the search engines are not just going to track it down, but also see the keywords that exist in it.
However, making all text-based links It is not enough to need its own art take all the benefits of anchor text. The first thing you should understand is that anchor text was divided into two types,
that is yours and belongs to someone else. This is serious,
no joke. It is important for you to
understand how to link to website
others. But not only that, you should also understand how they link back to you.
For example, if you enter into a search on Search for the word ''click,''you will see that almost at the Adobe website attitude The top of the search results. This is not in caused because the Adobe website many include the keyword click.
What actually happens is that many people are linking Adobe PDF reader by using the word ''click''in anchor his text. This can be understood because the website
offers a PDF file which can be downloaded usually include a link that reads Click here to download or similar.
As you can see, not just the anchor text You are having an effect, but also how Your website will be included in the anchor text from other websites. We will discuss
how others will link you later.
For now, think about how you
using anchor text in the websites.
As we already know, the anchor text is the text that are interconnected in wabsite you. This text can connect to your own website or to another website
contentnya relevant to the content of the website You. That is the main cause why are so powerful anchor text, ie the relevancy of the links and words that are used
to create the link.
When your website search engine explore, He will look at several factors, among others:
- The topic of the website is indicated by the words words used in the text
- Links that lead to outside websites
- Links from the outside that leads to your website
Of course, not just these factors which will in observe, but these factors are most affect the rankings. Therefore, how these elements will handle determine how user-friendly (and authentic)
your website.
Therefore, if your website is aimed to serve the businessmen, then your website probably will include articles and information about the type of business, business strategy,
and linking to website where visitors will join in a business.
When observing a website crawler, He will see if the topic of your website is is about business (which will be determined by keywords that you use in text).
Then He will explore all the links
on the website. If the text based links that include keywords and leads to relevant websites,
then the crawler will give a high score. The result is that you will appear higher in SERP, than if you do not include relevant keywords in the text and links.
However, you must be careful when
make the anchor text. If using word-wrong word, then you may not be never getting the results expected from link. One of the mistakes that are often done by the owner of the website is to make
web page with the anchor text "click here''.
The word is not only too often in
use and in disregard by the crawler, but also there is no way to link it with content of the website. We observe crawlers anchor text is, He did not see the keywords
relevant, even if the link leads to the relevant website.
Suppose that the anchor text as an opportunity for indicate your relationship with the website
relevant. The best way is use keywords as much as possible,
which is taken from a list of keywords that have been
You make during the planning process.
Back to business website in the above example, if You use an anchor text use the word "business type" and linking to
website associated with their
each type of business, then search engines will see the keywords and links that lead to website of certain business them.
Therefore, the attempt at making a small piece anchor text, you not only have compelling reason to use the keyword, but also has a link to direct to relevant websites. If you want to add anchor text into the Bus Type Your web pages, then add a piece of HTML code like the following example, in every
a place where you want the anchor text appears:
< a href="http://www.online business.com"> Online business </a>
One more strategy to the anchor text must considered is to vary the anchor text. When you repeat the anchor text together repeatedly on a single web page, then anchor text will begin to decrease
effectiveness. Can even cause the search engine gives low rankings.
It would be more effective if they use the keyword varied as the anchor text. This gives Opportunity to vary your anchor text, while keeping the consistency of
keyword that is in use.
Another type of anchor text is in use by others to link back your website. Anchor text is often not considered as an SEO strategy. In fact this is one The most effective type of optimization can
You use. Here's an example:
One internet marketing expert
decided to see how fast he it can make website rank high in the SERP. He uses anchor text links on web pages, then pleaded backlinks using keywords are targeted, and relevant to your website him. The result? Within days, his website
had been in fourth position in Google SERP.
There are two things that should be remembered from this example.
The first is to ask the website owner backlinks. Backlinks or back links are links from another website that leads to your page in retaliation for the link you provided on them. Backlinks are the most effective comes from relevant websites with website You, but sometimes you have to look for
own.
In addition, in order to get all the virtues that There on backlinks, you will also need to ensure Your website will be linked in a way that you want. From the get backlinks which leads to the main page of your website, would be more effective if they provide an
anchor code text you want on the website will link back.
The second thing to be aware of the example above is, you must ensure that the link behind the need to include keywords is the target, ie keywords most effective for your website. Keyword is
most often used in the search and
highly relevant to your website, is
keywords should you use in
anchor text. Therefore, the main function of the anchor text is
to optimize the website in the ranking order high by search engines, so it can provide traffic for your website. But how often the anchor text should be in use on a web page? It is one magic number, no person really knows for sure.
Other people will said another.
Some say no more than two or three times, while others argue no less from 10 to 12 times. As a basic rule, use anchor text as much as you can. If you have a link that can be included, Do not miss it just because you have uses several times in the anchor text pages. But not to meet the content with the anchor text just because you want
have links.
To determine where the anchor text
essential and which are not, that depends on each person. However, if you analyzer using a good program, that traces the links on your web pages, You should be able to determine the anchor text
The most effective where and how
use it on the page affect the flow of traffic.
Anchor text is a good way to
improve rankings. But as has been
You often hear, web pages should be in created with the main objective is for the user.
One more thing that should be remembered about the anchor
text before we proceed. One way
The most effective way to use anchor text is placed within the content dynamic.
Dynamic content is content that always changed. Often, that means the blog. Anchor text very suitable for daily updated blog or weekly. This is the fresh content (Which will also give a plus for improving rankings on search engines) that
gives you the opportunity to change the anchor regular text.
Crawler search engines can also be bored. If you could give them a dynamic content and contain relevant anchor text, then the crawler will help you.
Before her I had confused this blog to register dmoz directory because it is not the
same as other directory, after the pan one by one menu at dmoz directory the end of his work also to register this ugly blog directory dmoz and hopefully it will be accepted dmoz directory.
There may be colleagues who wanted to enroll his blog also to the dmoz directory who do not know him the same way as I have before it, so here I will write step-ledge how how to register your blog dmoz directory which it says is one of seo optimization.
Ok just his registration step is easy enough:
Accepted or whether we are in the directory dmoz blog that depends on selectors and it took quite a while, I myself do not know because the new sign as well.
same as other directory, after the pan one by one menu at dmoz directory the end of his work also to register this ugly blog directory dmoz and hopefully it will be accepted dmoz directory.
There may be colleagues who wanted to enroll his blog also to the dmoz directory who do not know him the same way as I have before it, so here I will write step-ledge how how to register your blog dmoz directory which it says is one of seo optimization.
Ok just his registration step is easy enough:
- Please go to his site dmoz.org and will look like a picture
- Then click Suggest URL at the top right, and you will be brought to a page that contains the rules you should know
- After you finish reading all of it, look at the bottom and click Proceeds home to the open
directory at dmoz.org and you'll see a page like the picture above, well Sekaran you choose
the appropriate category with the contents of your blog and it will go next category. - If already now you click on the top added URL will open the last page is the registration, up here you would already know ..!
We live to fill:
> Web URL / blog
> Description of the web / blog
> Your email address
> Code Capcha
> And then Submit.
Accepted or whether we are in the directory dmoz blog that depends on selectors and it took quite a while, I myself do not know because the new sign as well.
How to create a blog on facebook and blogger as a complement to my article Who knew there who are looking for this tutorial and stray into my blog a new simple and poor, ok not use long, ..! facebook.com us to create a blog using third party application like any other application that is not an official facility of facebook. The Blogger has
sanga many application using these blog.
If you are interested to create a blog on facebook follow the steps which are below :
- In keaadaan you are already logged in into your Facebook account, try to enter a keyword blog on the blog search to find That applications are available
- Will Appear applications created by China Trust blog third parties. This time, choose one That Is Made
by Shujaat bin Tariq with a blue B icon, and click The View Application - Further applications Appear will from the main page blog. Click Go the Application
- Then you'll get A Few That Have Been in blogs publishkan by other Facebook users with similar
applications. Also on this page has links to create your first blog. Click the Create New Blog Entry - Before Can you create a new blog entry, you must activate the Face blog. Click Add Face Blog
- On the next page you'll be prompted for confirmation to allow access to the display profile and everything related to your personal data on Facebook. Click Allow
- You'll find re-display before The Same page with him. Click the Create New Blog Entry
- There are good you create categories in advance changed from to make your blog more orderly based on Different Topics That you have created. Click Add New Category
- In the Add New Category dialog, give the name for that category in the Title. To give a brief
These description Description of categories, Also Can you or let in to the situation but there is'
empty a good idea at the contents first. - A moment later a new category That you have created is now listed in your blog
- You Can Make Some other categories in the Same way. If so then Later in the Categories Will Appear The names of the categories you've created Earlier. This time you are Able to make a blog entry by clicking the Create New Blog Entry
- Actually for the application of artificial shujaat bin Tariq has fitir WYSIWYG blog editor, but as this
article in the high-rises Were there still improvement. Because it was no Different this His time view Basic Editor. The name on the title input
the title and select the category you want to use - Can you enter your blog posts in the section That has been provided. Unfortunately this time fitue WYSIWYG editor is still not perfect. But you cans include link from the Youtube video here
- To insert a video from Youtube, search videos your search using the search facility on Youtube.
Once you find the video search result, click on one to your liking, then copy the URL from the
video input and you get video URL from Youtube Video URL Earlier in the section - After all believed to have been filled with the tone Right click Publish. Then you'll get a That
message your blog has been completed on the make
Very easy is not it .. ?
Because the claim in the state of my blog and no by Technorati after I sent the feed, whereas before it had no claim for this blog post but did not find the code token technorati claim in the blog feeds that I sent it, so I have to claim back all the posts how to register and claim your blog on Technorati.
Now if you have not done it can see the following article:
Technorati Tell a little about your blog and click save info blog. Congratulations, you've claimed
your blog at Technorati, I hope this article is also my success to this blog claims that prior to his failed two times, really boring ...!
Now if you have not done it can see the following article:
- First you have to register, please go to http://technorati.com/account/signup/ and sign up for new accounts Technorati.
It's not too difficult, just follow the instructions as usual and in a short time must be completed. - After that claim your blog to get into your account settings (where you can claim your blog)
click on your name at the top right hand corner next to the sign out link. Then click the tab of the blog claimed and claim your blog.
Type in your blog URL and click start the claim. - After the technorati open a new tab will provide you a code you will enter in your post pages.
Proficiency level in these codes to verify that you are the owner of the blog, please post that you do a bit of code found in his claim as mine was SE982JFHW8GM, but to make the claim do not have to post like this can also only contain the code. Once finished you publish now you must
go back to Technorati and click Complete Claims.
Technorati will search your home page to verify that the link is there.
When finding the link, you will be given the opportunity to give a little more information about your blog.
Technorati Tell a little about your blog and click save info blog. Congratulations, you've claimed
your blog at Technorati, I hope this article is also my success to this blog claims that prior to his failed two times, really boring ...!
Masih mengenai footer, sebenar nya untuk cara membuat footer menjadi 3 kolom tidaklah jauh berbeda dengan membuat jadi 4 kolom footer, dari pada hanya merubah jadi 3 kolom baik sekalian jadi 4 kolom footer, he..he.! Tapi punya saya juga cuma 3 kok.
Langsung saja gak pakai lama.. Itu yang ku mau..!
Selamat bekerja kawan, salam sukses selalu dari pemula blogger..!
Langsung saja gak pakai lama.. Itu yang ku mau..!
- Seperti biasa login account blogger anda >> Layout >> Edit HTML, beri centang Expand Widget Template nya
- Bila perlu download terlebih dahulu, back up kalau - kalau terjadi kesalahan fatal, masih ada cadangan
- Langkah selanjut nya cari kode berikut :
< div id='footer-wrapper'>
< b:section class='footer' id='footer'/>
< /div> - Kalau sudah ketemu hapus kode < b:section class='footer' id='footer'/> dan ganti dengan kode script berikut :
- Bila kode di atas tidak ada masalah dan bisa di terima template anda lanjut ke langkah berikut nya
- Cari kode :
< b:skin/> - Sekarang letakan koke berikut tepat di atas < b:skin/>
#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
} - Sekarang simpan template anda dan lihat hasil nya
< div id='footer-column-container'>
< div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
< b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
< /div>
< div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
< b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
< /div>
< div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
< b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
< /div>
< div style='clear:both;'/>
< p>
< hr align='center' color='#5d5d54' width='90%'/> </p>
< div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
< b:section class='footer' id='col-bottom' preferred='yes'>
< b:widget id='Text2' locked='false' title=''type='Text'/>
< /b:section>
< /div>
< div style='clear:both;'/>
< /div>
Bila sudah sebaik nya simpan terlebih dahulu untuk memastikan tidak ada yang kurang dan salah
Selamat bekerja kawan, salam sukses selalu dari pemula blogger..!
Tutorials cara membuat footer menjadi 4 kolom yang telah di perbaharui menjadi lebih menarik, biasa nya blogger hanya memiliki 3 kolom dan 2 kolom footer saja, jadi buat sahabat blogger yang suka meletakan pernak - pernik blog nya perlu merubah footer menjadi 4 kolom agar anda bisa memuat cukup banyak widget, seperti widget twitter, facebook, iklan dan yang lain nya.
Nah.. Bila berminat menambah footer blog anda bisa teruskan dan ikuti tutorials nya :
Bila anda tutorials di atas tidak membawa hasil bisa lihat Klinik-it yang lebih mudah.
Nah.. Bila berminat menambah footer blog anda bisa teruskan dan ikuti tutorials nya :
- Pertama tentunya anda login ke dasboard blogger >> Layout ( tata letak ) >> Edit HTML, beri centang kotak kecil ( Expand Widget Template )
- Untuk jaga - jaga bila terjadi kesalahan sebaik nya Back Up template anda terlebih dahulu ( download template ), bila gagal anda bisa upload kembali
- Sudah siap...? Cari kode seperti berikut
:
< div id='footer-wrapper' >
< b:section class='footer' id='footer'/>
</div> - Bila sudah ketemu hapus kode < b:section class='footer' id='footer'/> dan ganti dengan kode script di bawah :
< div id='footer-column-container'>
< div id='footer1' style='width: 225px; float: left; margin:0; '>
< b:section class='footer-column' id='footer-column-1' preferred='yes' style='float:left;'>
< b:widget id='Text1' locked='false' title='About B-G'type='Text'/>
< /b:section>
< /div>
< div id='footer2' style='width: 225px; float: left; margin:0; '>
< b:section class='footer-column' id='footer-column-2' preferred='yes' style='float:left;'>
< b:widget id='Text4' locked='false' title='About Author' type='Text'/>
< /b:section>
< /div>
< div id='footer3' style='width: 225px; float: right; margin:0; '>
< b:section class='footer-column' id='footer-column-3' preferred='yes' style='float:right;'>
< b:widget id='Text3' locked='false' title='Subscribe in Reader' type='Text'/>
< /b:section>
< /div>
< div id='footer4' style='width: 225px; float: right; margin:0; '>
< b:section class='footer-column' id='footer- column-4' preferred='yes' style='float:right;'>
< b:widget id='Text2' locked='false' title='Access B-G on Go' type='Text'/>
< /b:section>
< /div>
< div style='clear:both;'/>
< /div> - Bila sudah anda letakan, kini cari lagi kode ]]></b:skin> dan letakan kode script berikut tepat di atas kode ]]></b:skin> tadi :
#footer-column-container { border: .3px dotted #cccccc;}
.footer-column { margin: 0 10px 0 10px; padding:5px; color: #666666; line-height: 1.5em; font-size:12px;}
.footer-column h2 {
padding-bottom:.15em; text-align:center; font:"normal normal 80% 'Comic Sans MS','Lucida Sans Unicode','Trebuchet MS',Sans-
serif"; color:#333333; line-height:1em; letter-spacing:.1em; border-bottom: 1px solid #cccccc;}
.footer-column ul { list-style:none; margin:0 0 0; padding:0 0 0;}
.footer-column ul li {
background: url(http://i411.photobucket.com/albums/pp194/methoz/Theme%20Quadro/read-more.gif) no-repeat;
margin:0 0 0; padding-left: 16px;
padding-bottom: 0.5em; line-height:1.2em;}
.footer-column .widget {margin:0 0 .5em; padding:0 0 1em;} - Selanjut nya simpan template anda dan lihat hasil nya
Bila anda tutorials di atas tidak membawa hasil bisa lihat Klinik-it yang lebih mudah.
Bila tampilan blog anda masih masih seperti halaman utama saat klik label maka akan memanjang kebawah sampai semua artikel pada label tersebut tampil, bayangkan jika dalam satu label atau kategori memiliki artikel posting lebih dari 50, bisa - bisa panjang nya 10 meter dan butuh berapa lama untuk loading nya.
Nah, agar yang tampil hanya judul postingnya saja saat klik label anda perlu melakukan sedikit perubahan pada template anda yang bi anda lihat paduannya di bawah.
Bila cara di atas gagal anda bisa gunakan cara kedua berikut dan kembali Edit Template anda
Cara kedua hasilnya akan lebih baik karena sudah di modifikasi, dari salah satu cara di atas pasti ada yang membawa hasil.
Mumpung lagi berurusan sama label sekalian kalau mau mehapus angkanya yang terdapat pada label bisa anda lihat Di Sini tutorial nya.
Nah, agar yang tampil hanya judul postingnya saja saat klik label anda perlu melakukan sedikit perubahan pada template anda yang bi anda lihat paduannya di bawah.
- Langsung saja Edit Template anda dan beri centang kotak kecil sebelah Expand Widget Template anda
- Langkah selanjutnya cari kode berikut :
- Bila sudah ketemu hapus dan ganti dengan kode di bawah
- Sekarang simpan template anda dan coba klik label blog anda lihat hasilnya
< b:include data='post' name='post'/> Atau < b:include data='post' name='post'> sama saja.
< b:if cond data = ': blog.homepageUrl! =
data: blog.url '>
< b:if cond='data:blog.pageType != "item"'>
< a expr:href='data:post.url'>
< data:post.title/> </a> < br/> < br/>
< b:else/>
< b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
data: blog.url '>
< b:if cond='data:blog.pageType != "item"'>
< a expr:href='data:post.url'>
< data:post.title/> </a> < br/> < br/>
< b:else/>
< b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
Bila cara di atas gagal anda bisa gunakan cara kedua berikut dan kembali Edit Template anda
- Pertama cari kode sama seperti berikut
- Hapus kode < data:post.title/></a> dan ganti dengan kode berikut :
- Secara lengkap kode nya menjadi seperti di bawah :
- Kini jangan lupa simpan dan lihat hasilnya
< b:if cond='data:blog.homepageUrl !
=data:blog.url'>
< b:if cond='data:blog.pageType != "item"'>
< a expr:href='data:post.url'>
< data:post.title/></a>
< b:else/>
< b:include data='post' name='post'/>
</b:if>
< b:else/>
< b:include data='post' name='post'/>
</b:if>
=data:blog.url'>
< b:if cond='data:blog.pageType != "item"'>
< a expr:href='data:post.url'>
< data:post.title/></a>
< b:else/>
< b:include data='post' name='post'/>
</b:if>
< b:else/>
< b:include data='post' name='post'/>
</b:if>
< div style='padding:6px 0 6px 5px;border-
right:1px solid #ccc;border-bottom:1px solid
#ccc;margin-
bottom:2px;background:#E0F8E0;color:#000000;'>
< data:post.title/></div></a>
right:1px solid #ccc;border-bottom:1px solid
#ccc;margin-
bottom:2px;background:#E0F8E0;color:#000000;'>
< data:post.title/></div></a>
< b:if cond='data:blog.homepageUrl !=data:blog.url'>
< b:if cond='data:blog.pageType != "item"'>
< a expr:href='data:post.url'>
< div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid
#ccc;margin-bottom:2px;background:#E0F8E0;color:#000000;'>
< data:post.title/></div></a>
< b:else/>
< b:include data='post' name='post'/>
</b:if>
< b:else/>
< b:include data='post' name='post'/>
</b:if>
< b:if cond='data:blog.pageType != "item"'>
< a expr:href='data:post.url'>
< div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid
#ccc;margin-bottom:2px;background:#E0F8E0;color:#000000;'>
< data:post.title/></div></a>
< b:else/>
< b:include data='post' name='post'/>
</b:if>
< b:else/>
< b:include data='post' name='post'/>
</b:if>
Cara kedua hasilnya akan lebih baik karena sudah di modifikasi, dari salah satu cara di atas pasti ada yang membawa hasil.
Mumpung lagi berurusan sama label sekalian kalau mau mehapus angkanya yang terdapat pada label bisa anda lihat Di Sini tutorial nya.
Lanjut lagi... tutorials kali ini cara membuat area post/posting dalam kotak terpisah atau postingan yang terpisah - pisah seperti blog ini, bisa anda lihat di sini sebagai contoh.
Dengan memisahkan posting yang satu dengan lainnya ini akan terlihat rapi dan menarik serta mudah bagi pengunjung untuk membedakan dari posting ke posting.
Cara membuat post dalam kotak terpisah ini ada tiga jenis tampilan, jadi anda bisa praktekan satu persatu mana yang cocok dengan tampilan blog anda.
Sekarang ikuti langkah mudah di bawah ini :
KETERANGAN :
Untuk kode warna#0000ff ini warnanya BIRU jadi ganti sesuai warna blog anda.
Padding :Jarak antara text post dengan garis pinggir.
Border-top : warna garis pinggir atas.
Border-bottom : warna garis pinggir bawah.
Border-left : warna garis pinggir kiri.
Border-right : warna garis pinggir kanan.
Margin-bottom : jarak antara post yang satu dengan yang lainnya.
Anda bisa merubah angka ukuran di atas berdasarkan keterangan tesebut.
Selamat mencoba...!
Dengan memisahkan posting yang satu dengan lainnya ini akan terlihat rapi dan menarik serta mudah bagi pengunjung untuk membedakan dari posting ke posting.
Cara membuat post dalam kotak terpisah ini ada tiga jenis tampilan, jadi anda bisa praktekan satu persatu mana yang cocok dengan tampilan blog anda.
Sekarang ikuti langkah mudah di bawah ini :
- Log in blogger dasbor anda >> Tata Letak >> Edit HTML beri centang Expand Widget Template
- Dan cari kode di bawah ini, intinya cari .post { karena tidak semua template sama
- Bila sudah ketemu hapus dan ganti dengan kode di bawah ini pilih salah satu jangan semuanya di paste, gak tau apa yang terjadi bila semua kode terpasang
- Bila sudah anda pilih dan paste jangan lupa klik simpan dan lihat hasil nya
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
# Kode 1 #
Kode ini yang pertama dulu bayak di gunakan penguna blogger.
.post {
background:#0000ff
border:1px solid #0000ff;
margin:0 0 0.5em;
padding:0.5em;
font-family:"Trebuchet MS";
}
# Kode 2 #
Kode kedua ini telah di perbaharui sedikit.
.post {
background:#fff url(http://
i38.tinypic.com/2lt5wsl.jpg) repeat-x top;
border:1px solid #0000ff;
margin:0 0 0.5em;
padding:0.5em;
font-family:"Trebuchet MS";
}
# Kode 3 #
Kode ini juga hasil pembaharuan.
.post {
padding:10px;
Border-top: 3px solid #0000ff;
Border-bottom: 3px solid #0000ff;
Border-left: 3px solid #0000ff;
Border-right: 3px solid #0000ff;
Margin-bottom: 15px;
font-family:"Trebuchet MS";
}
KETERANGAN :
Untuk kode warna#0000ff ini warnanya BIRU jadi ganti sesuai warna blog anda.
Padding :Jarak antara text post dengan garis pinggir.
Border-top : warna garis pinggir atas.
Border-bottom : warna garis pinggir bawah.
Border-left : warna garis pinggir kiri.
Border-right : warna garis pinggir kanan.
Margin-bottom : jarak antara post yang satu dengan yang lainnya.
Anda bisa merubah angka ukuran di atas berdasarkan keterangan tesebut.
Selamat mencoba...!
Kali ini tentang salah satu tutorials design blog yang berhubungan dengan area posting dengan cara membuat Read More bergambar atau menganti Read More dengan icon image agar terlihat lebih cantik. Bila anda belum membuat Read More bisa ada lihat Di SINI tutorials nya, Read More merupakan hal penting dalam blog yang berhubungan dengan seo.
<<== Langsung saja ke cara menganti Read More dengan icon image ==>>
Sebelumnya silakan pilih salah satu gambar di bawah ini atau anda buat sendiri gambarnya di photobucket untuk menganti read more blog anda.
Link -> http://i760.photobucket.com/albums/xx242/duniablog23/ButtonSelengkapnya.png
Link -> http://i666.photobucket.com/albums/vv28/hutchingsjill/readmorebutton.jpg
Link -> http://i819.photobucket.com/albums/zz118/ckellyireland7/read_more.png
Link -> http://i842.photobucket.com/albums/zz348/calfordgpb/Work/readmore.png
Agar gambarnya bisa muncul anda tambahkan sedikit kode.
< img src="http://i842.photobucket.com/albums/zz348/calfordgpb/Work/readmore.png"/ >
<<== Sekarang ke langkah cara menganti Read More nya ==>>
==>> Pertama masuk ke dasbor blogger anda >> Klik tata letak >> Klik Edit HTML dan centang expand widget template.
==>> Selanjutnya Cari kode di seperti bawah ini :
< p > > data:post.body/ > < /p >
< a expr:href='data:post.url' > < strong > Read More... < /strong > < /a >
< /b:if >
==>> Bila sudah ketemu gantilah kalimat Read More dengan URL gambar yang telah disiapkan diatas, sehingga menjadi seperti ini :
< p > > data:post.body/ > < /p >
< a expr:href='data:post.url' > < strong > < img src="http://i842.photobucket.com/albums/zz348/calfordgpb/Work/readmore.png"/ > < /strong > > /a >
< /b:if >
==>> Langkah selanjutnya klik simpan dan lihat hasilnya.
Selamat bekerja, salam dari newbie..!
<<== Langsung saja ke cara menganti Read More dengan icon image ==>>
Sebelumnya silakan pilih salah satu gambar di bawah ini atau anda buat sendiri gambarnya di photobucket untuk menganti read more blog anda.
Link -> http://i760.photobucket.com/albums/xx242/duniablog23/ButtonSelengkapnya.png
Link -> http://i666.photobucket.com/albums/vv28/hutchingsjill/readmorebutton.jpg
Link -> http://i819.photobucket.com/albums/zz118/ckellyireland7/read_more.png
Link -> http://i842.photobucket.com/albums/zz348/calfordgpb/Work/readmore.png
Agar gambarnya bisa muncul anda tambahkan sedikit kode.
< img src="http://i842.photobucket.com/albums/zz348/calfordgpb/Work/readmore.png"/ >
<<== Sekarang ke langkah cara menganti Read More nya ==>>
==>> Pertama masuk ke dasbor blogger anda >> Klik tata letak >> Klik Edit HTML dan centang expand widget template.
==>> Selanjutnya Cari kode di seperti bawah ini :
< p > > data:post.body/ > < /p >
< a expr:href='data:post.url' > < strong > Read More... < /strong > < /a >
< /b:if >
==>> Bila sudah ketemu gantilah kalimat Read More dengan URL gambar yang telah disiapkan diatas, sehingga menjadi seperti ini :
< p > > data:post.body/ > < /p >
< a expr:href='data:post.url' > < strong > < img src="http://i842.photobucket.com/albums/zz348/calfordgpb/Work/readmore.png"/ > < /strong > > /a >
< /b:if >
==>> Langkah selanjutnya klik simpan dan lihat hasilnya.
Selamat bekerja, salam dari newbie..!
kembali lagi ke salah satu design blog agar lebih baik dan indah dengan cara membuat / pasang smiley di atas atau sebelum kolom komentar, smiley ini dapat di gunakan pengunjung saat memberi komentar blog untuk lebih menunjukan ekspresi wajah para pembaca dalam komentarnya.
Smiley emoticon ini sama sepeti milik yahoo.
Langsung saja ke langkah cara pasang smiley nya.
- Langkah pertama log in ke dasbor blogger >> Klik tata letak >> Edit HTML >> jangan lupa beri centang pada kotak Expand widget template
- Kemudian cari kode seperi ini
- Bila sudah ketemu paste kode script ini tepat di bawah kode tadi
- Langkah selanjutnya paste kode di bawah ini tepat di atas kode < /body >
- Langkah ketiga klik simpan selesai dan lihat hasilnya
< b:if cond='data:post.embedCommentForm' >
< div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-
background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding:
5px; background: #eeeddf; height:86' >
< b >
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/ > :))
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/ > ;))
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/ > ;;)
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/ > :D
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/ > ;)
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/ > :p
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/ > :((
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/ > :)
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/ > :(
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/ > :X
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/ > =((
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/ > :-o
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/ > :-/
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/ > :-*
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/ > :|
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/ > 8-}
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/ > :)]
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/ > ~x(
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/ > :-t
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/ > b-(
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/ > :-L
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/ > x(
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/ > =))
< /b >
< /div >
background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding:
5px; background: #eeeddf; height:86' >
< b >
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/ > :))
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/ > ;))
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/ > ;;)
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/ > :D
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/ > ;)
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/ > :p
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/ > :((
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/ > :)
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/ > :(
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/ > :X
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/ > =((
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/ > :-o
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/ > :-/
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/ > :-*
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/ > :|
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/ > 8-}
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/ > :)]
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/ > ~x(
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/ > :-t
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/ > b-(
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/ > :-L
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/ > x(
< img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/ > =))
< /b >
< /div >
< script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/smiley.js' type='text/
javascript'/ > < noscript > < a href="http://bloggerstop.net" target="_blank" > < span style="font-size: x-small;" > Add Smilies < /span > < /a > < /noscript >
javascript'/ > < noscript > < a href="http://bloggerstop.net" target="_blank" > < span style="font-size: x-small;" > Add Smilies < /span > < /a > < /noscript >
Semoga saja demgan adanya smiley di blog anda akan banyak komentar yang masuk.
Situs jejaring sosial bukan hal yang asing lagi bagi para pengguna internet .seperti Twitter atau facebook yang sekarang ini sedang booming untuk menjalin pertemanan dan bisnis. Langsung saja kemasalah bagaimana Cara
memasang Ikon Followme on twitter dan facebook di blog. Yang bisa dipasang pada sidebar.
Ikuti langkah-langkah mudah seperti biasa,berikut untuk memasang Ikon Followme on twitter dan facebookpada blog:
Salam blogging..!
memasang Ikon Followme on twitter dan facebook di blog. Yang bisa dipasang pada sidebar.
Ikuti langkah-langkah mudah seperti biasa,berikut untuk memasang Ikon Followme on twitter dan facebookpada blog:
- Login ke blogger.
- Klik Tata Letak.
- Klik tab Elemen Halaman.
- Klik Tambah Gadget.
- Kemudian Pilih HTML/Javascript.
- Ganti ijaya56 dan 100000141999712 dengan ID anda
- Selanjut simpan dan lihat hasilnya
Copy paste Kode HTML di bawah ini :
Follow me Twitter
< a href="http://twitter.com/ijaya56" > < img src="http://www.twitterbuttons.com/images/ex/nt11.png" title="Twitter Buttons" width="90" height="55"/ > < /a >
Gambarnya seperti ini.!
Follow me Facebook
< a href="http://www.facebook.com/profile.php?id=100000141999712" > < img src="http://tdias.files.wordpress.com/2010/01/follow-me-on-facebook.jpg" title="Facebook Buttons" width="90" height="55"/ > < /a >
Gambarnya seperti ini.!
Salam blogging..!
Untuk cara memghapus angka di Label Posting blog cukup mudah untuk melakukannya. Tentunya anda tahu apa itu label, label ini menunjukkan jumlah posting pada kategori tertentu yang dapat anda lihat dalam kategori di sidebar blog saya, yang segaja tidak saya hapus untuk angka di label karena saya lebih suka pada aslinya. Bila ingin menghapus jumlah posting di label blog anda lihat langkah sederhana di bawah ini:
- Log in ke blogger > > Tata Letak > > Edit HTML > > Jangan Lupa Centang Expand Widget Template
- Tekan Ctrl + F dan cari kode seperti di bawah ini
- Untuk menghapus angka labelnya silakan hapus kode < data:label.count/ > atau hapus saja semuanya sampai bersih he..he..he mudah bukan.
< span dir='ltr' > < data:label.count/ > < /span >
Selamat mencoba....!
Apa itu Yahoo Buzz.?
Yahoo merupakan jaringan sosial yang mirip dengan Digg, Google Buzz, dan masih banyak lagi.
O.k saya tidak panjang lebar membahas tentang yahoo buzz, jadi langsung saja untuk cara memasang tombol yahoo buzz tepatnya di bawah artikel posting.
Pertama-tama, anda pergi ke halaman Buzz Yahoo.com pilih jenis tombol yang anda inginkan kemudian klik untuk mendapatkan kode scriptnya.
- Ini Kode salah satu button "square button"
- Untuk ARTICLEURL anda ganti dengan < d a t a : p o s t . u r l / > Setelah diganti, kodenya akan terlihat seperti ini
- Untuk memasangnya, log in Blogger > Tata Letak > Edit HTML
- Kemudian cari dan letakan kode button tadi tepat di atas
- Sekarang save dan lihat hasilnya
< s c r i p t t y p e = " t e x t / j a v a s c r i p t " s r c = " h t t p : / / d . y i mg . c om / d s / b a d g e 2 . j s " b a d g e t y p e = " s q u a r e " > A R T I C L E U R L < / s c r i p t >
< s c r i p t t y p e = " t e x t / j a v a s c r i p t " s r c = " h t t p : / / d . y i mg . c om / d s / b a d g e 2 . j s " b a d g e t y p e = " s q u a r e " > < d a t a : p o s t . u r l / > < / s c r i p t >
< d a t a : p o s t . b o d y / >
Untuk cara lainnya memasang yahoo buzz yang telah di modifikasi sereti di bawah ini:
Cari kode ini >
< d i v c l a s s = ' p o s t - h e a d e r - l i n e - 1 ' / >
Setalah ketemu sisipkan kode di bawah ini tepat setelah kode di atas
< !--BUZZ-STARTS-- >
< a href='javascript:var%20b=document.body;var %20GR________bookmarklet_domain="http://
www.google.com";if(b&&! document.xmlVersion){void
(z=document.createElement
("script"));void(z.src="http://www.google.com/reader/ui/link-bookmarklet.js");void(b.appendChild(z));}else
{}' title='Buzz It!' > < div style='text-align: right;margin-top:-42px;' > < img alt='Buzz It'
src='http://i671.photobucket.com/albums/vv80/dadfereneczi/th_121wg9e.png'/ > < /div > </a >
< !--BUZZ-STOPS-www.newbloging.com-- >
< a href='javascript:var%20b=document.body;var %20GR________bookmarklet_domain="http://
www.google.com";if(b&&! document.xmlVersion){void
(z=document.createElement
("script"));void(z.src="http://www.google.com/reader/ui/link-bookmarklet.js");void(b.appendChild(z));}else
{}' title='Buzz It!' > < div style='text-align: right;margin-top:-42px;' > < img alt='Buzz It'
src='http://i671.photobucket.com/albums/vv80/dadfereneczi/th_121wg9e.png'/ > < /div > </a >
< !--BUZZ-STOPS-www.newbloging.com-- >
Selamat bekerja semoga sukses, salam blogger..!
Versi Indonesia:
T his timewill share about how to create the textarea border and sometimes - sometimes we often see this textarea and border when a friend visited the blog in which the contents of the writing of the script code. I think that's writing the script code should be different from writing ordinary letters, the goal to make it look more prominent than others who
signify most important thing in that article.
Ok now for the manner of manufacture as follows. >
For the border there are three kinds here
For color code and Can format you replace the taste ..!
While for the textarea is often used to put a link like create tukeran link.
How to create a textarea which is usually a lot of use like this ==>>
& l t t e x t a r e a r o w s = " 5 " c o l s = " 2 5 " > & l t ; a h r e f = & q u o t ; h t t p : / / w w w . n e w b l o g i n g . c om / & q u o t ; t i t l e = & q u o t ; b l o g g i n g t i p s t u t o r i a l s f o r b u s i n e s s & q u o t ; t a r g e t = & q u o t ; _ n e w & q u o t ; & g t ; n e w b l o g i n g . c o m & l t ; / a & g t ; < / t e x t a r e a >
And will apper like this == >>
At this point my eyes had been felt faint . . . .
signify most important thing in that article.
Ok now for the manner of manufacture as follows. >
For the border there are three kinds here
- First with the edge of a border point - the point
- Border into two with the width and height
- and the third with a line break - end
< div style="border: 2px #00FF00 dotted; padding: 10px; background-color: #c3fdb8; text- align: left;" > WRITING SCRIPT HERE </div >
< div style="border: 2px #0000FF solid; padding: 10px; background-color: #c3fdb8; overflow: auto; height: 50px; width: 300px; text-align: left;" > WRITING SCRIPT HERE < /div >
< div style="border: 2px #FF0000 dashed; padding: 10px;background-color: #c3fdb8; text- align: left;" > WRITING SCRIPT HERE < /div >
For color code and Can format you replace the taste ..!
While for the textarea is often used to put a link like create tukeran link.
How to create a textarea which is usually a lot of use like this ==>>
& l t t e x t a r e a r o w s = " 5 " c o l s = " 2 5 " > & l t ; a h r e f = & q u o t ; h t t p : / / w w w . n e w b l o g i n g . c om / & q u o t ; t i t l e = & q u o t ; b l o g g i n g t i p s t u t o r i a l s f o r b u s i n e s s & q u o t ; t a r g e t = & q u o t ; _ n e w & q u o t ; & g t ; n e w b l o g i n g . c o m & l t ; / a & g t ; < / t e x t a r e a >
And will apper like this == >>
At this point my eyes had been felt faint . . . .
English Version:
K ali ini saya akan share tentang cara membuat border dan textarea yang Kadang - kadang kita sering melihat textarea dan border ini pada saat mengunjungi blog sahabat yang di dalamnya di isi dengan penulisan kode - kode script HTML. Menurut saya memang penulisan kode script harus berbeda dengan tulisan huruf biasa, tujuannya agar terlihat lebih menonjol dari yang lainnya yang menandakan hal terpenting di dalam artikel tersebut dan dapat di lihat dengan jelas yang bermaksud memudahkan pengunjung dalam memahaminya. O.k sekarang untuk cara pembuatannya cukup mudah saja, bisa anda lihat seperti di bawah ini >
< < == untuk border di sini ada tiga macam anda tingal pilih saja salah satu, semuanya juga gak apa - apa gratis lagi..! Wehh...gaya..!== > >
Untuk kode warna dan ukuran bisa anda ganti sesuai selera..!!
Sedangkan untuk textarea ini sering di gunakan untuk meletakan link seperti buat tukeran link, banyak juga yang memakai buat meletakan script
Cara membuat textarea yang biasanya banyak di gunakan seperti ini == > >
< t e x t a r e a r o ws = " 5 " c o l s = " 2 5 " > & l t ; a h r e f = & q u o t ; h t t p : / / w w w . n e w b l o g i n g . c om / & q u o t ; t i t l e = & q u o t ; b l o g g i n g t i p s t u t o r i a l s f o r b u s i n e s s & q u o t ; t a r g e t = & q u o t ; _ n e w & q u o t ; & g t ; n e w b l o g i n g . c o m & l t ; / a & g t ; < / t e x t a r e a >
Dan dengan tampilan seperti bawah ini == >>
Sampai di sini dulu mata saya sudah terasa redup...ngantuk mungkin ya..! Semoga bisa bermanfaat...
< < == untuk border di sini ada tiga macam anda tingal pilih saja salah satu, semuanya juga gak apa - apa gratis lagi..! Wehh...gaya..!== > >
- Border pertama dengan tepi titik - titik
- Border ke dua dengan lebar dan tinggi
- Dan yang ke tiga dengan garis tepi putus - putus
< div style="border: 2px #00FF00 dotted; padding: 10px; background-color: #c3fdb8; text- align: left;" > TULIS SCRIPT DISINI </div >
< div style="border: 2px #0000FF solid; padding: 10px; background-color: #c3fdb8; overflow: auto; height: 50px; width: 300px; text-align: left;" > TULIS SCRIPT DISINI < /div >
< div style="border: 2px #FF0000 dashed; padding: 10px;background-color: #c3fdb8; text- align: left;" > TULIS SCRIPT DISINI < /div >
Untuk kode warna dan ukuran bisa anda ganti sesuai selera..!!
Sedangkan untuk textarea ini sering di gunakan untuk meletakan link seperti buat tukeran link, banyak juga yang memakai buat meletakan script
Cara membuat textarea yang biasanya banyak di gunakan seperti ini == > >
< t e x t a r e a r o ws = " 5 " c o l s = " 2 5 " > & l t ; a h r e f = & q u o t ; h t t p : / / w w w . n e w b l o g i n g . c om / & q u o t ; t i t l e = & q u o t ; b l o g g i n g t i p s t u t o r i a l s f o r b u s i n e s s & q u o t ; t a r g e t = & q u o t ; _ n e w & q u o t ; & g t ; n e w b l o g i n g . c o m & l t ; / a & g t ; < / t e x t a r e a >
Dan dengan tampilan seperti bawah ini == >>
Sampai di sini dulu mata saya sudah terasa redup...ngantuk mungkin ya..! Semoga bisa bermanfaat...
English Version:
M enambah icon gambar pada judul post mempunyai daya tarik tersendiri dan juga akan memperindah blog bagi yang suka dengan pernak - pernik salah satunya gambar animasi yang ada di judul posting seperti blog ini. Untuk cara meletakan gambarnya ikuti langkah mudah di bawah ini ::
Sebelumnya siapkan kode gambar animasi terlebih dahulu, cari saja di internet atau di photobucket.com, anda juga bisa upload gambar milik anda sendiri di situ lalu ambil kodenya, contoh kodenya seperti ini
:
< img src="http://i234.photobucket.com/albums/ee37/ira_raselli/upin-upin.jpg" border="0" alt="ipin upin"/ >
Anda tambahkan width dan height nya seperti ini
< img src="http://i234.photobucket.com/albums/ee37/ira_raselli/upin-upin.jpg" width="30" height="30" border="0" alt="ipin upin"/ >
Dan ini gambarnya,
Cara meletakannya === >>
Bila anda ingin icon gambarnya berada setelah judul posting tinggal di rubah saja peletakan kodenya yang menjadi seperti ini
< a expr:href='data:post.url' > < data:post.title/ > < img src="http://i234.photobucket.com/albums/ee37/ira_raselli/upin-upin.jpg" width="30" height="30" border="0" alt="ipin upin"/ > < /a >
< b:else/ >
Untuk ukuran width dan height di rubah sesuka anda.
Semoga bermanfaat bagi yang suka mendesain blog,....!
Sebelumnya siapkan kode gambar animasi terlebih dahulu, cari saja di internet atau di photobucket.com, anda juga bisa upload gambar milik anda sendiri di situ lalu ambil kodenya, contoh kodenya seperti ini
:
< img src="http://i234.photobucket.com/albums/ee37/ira_raselli/upin-upin.jpg" border="0" alt="ipin upin"/ >
Anda tambahkan width dan height nya seperti ini
< img src="http://i234.photobucket.com/albums/ee37/ira_raselli/upin-upin.jpg" width="30" height="30" border="0" alt="ipin upin"/ >
Dan ini gambarnya,
Cara meletakannya === >>
- Login ke Blogger
- Klik Tata Letak
- Edit Html
- Centang Expand Widget Template
- Cari Kode Berikut
- Letakan Kode Gambarnya Di Antara post.url' > < data:post
- Sehingga akan Jadi Seperti Ini
- Selesai Dan save
< a expr:href='data: post.url' > < data:post .title/ > < /a >
< b:else/ >
< a expr:href='data:post.url' > < img src="http://i234.photobucket.com/albums/ee37/ira_raselli/upin-upin.jpg" width="30" height="30" border="0" alt="ipin upin"/ > < data:post.title/ > < /a >
< b:else/ >
Bila anda ingin icon gambarnya berada setelah judul posting tinggal di rubah saja peletakan kodenya yang menjadi seperti ini
< a expr:href='data:post.url' > < data:post.title/ > < img src="http://i234.photobucket.com/albums/ee37/ira_raselli/upin-upin.jpg" width="30" height="30" border="0" alt="ipin upin"/ > < /a >
< b:else/ >
Untuk ukuran width dan height di rubah sesuka anda.
Semoga bermanfaat bagi yang suka mendesain blog,....!
English Version:
U ntuk cara membuat post terkait blog ada 2 pilihan yang bisa anda lakukan, post terkait/realeted post atau artikel terkait ini akan tampil/muncul di bawah posting artikel blog anda berdasarkan kategori/label yang sama, dengan adanya post terkait/realeted post akan memudahkan pengunjung dalam menemukan artikel - artikel yang berhubungan dengan artikel yang sedang di baca, membuat artikel terkait ini juga dapat meningkatkan seo blog.
Silakan pilih salah satu tutorials di bawah ini:
Langkah pertama === > >
Langkah yang kedua == > >
Semoga tutorial ini membawa hasil seperti yang anda harapkan.......!
Silakan pilih salah satu tutorials di bawah ini:
Langkah pertama === > >
- Login account Blogger.com > > Tata Letak > > Edit Html
- Centang expand widget template
- Cari kode seperti ini
- Lalu copy paste kode di ini tepat di bawah kode di atas
- Bila sudah jangan lupa save dan lihat hasilnya
< p > < data:post.body/ > < /p > atau < data:post.body/ > sama saja
< b:if cond='data:blog.pageType == "item" ' >
< div class='similiar' >
< div class='widget-content' >
< h3 > post terkait < /h3 > < div id='data2010'/ > < br/ > < br/ >
< script type='text/javascript' >
var homeUrl3 = "< data:blog.homepageUrl/ >";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
fungsi listEntries10 (json) (
var ul = document.createElement ( 'ul');
var maxPosts = (json.feed.entry.length < =
maxNumberOfPostsPerLabel)?
json.feed.entry.length:
maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i + +) (
var entry = json.feed.entry [i];
var alturl;
for (var k = 0; k < entry.link.length; k + +) (
if (entry.link [k]. rel == 'alternate') (
alturl = entry.link [k]. href;
break;
)
)
var li = document.createElement ( 'li');
var a = document.createElement ( 'a');
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 < json.feed.link.length; l + +) (
if (json.feed.link [l]. rel == 'alternate') (
var mentah = json.feed.link [l]. href;
var label = raw.substr (homeUrl3.length +13);
var k;
for (k = 0; k < 20; k + +) label = label.replace ( "%
20", "");
var txt = document.createTextNode (label);
var h = document.createElement ( 'b');
h.appendChild (txt);
var div1 = document.createElement ( 'div');
div1.appendChild (h);
div1.appendChild (ul);
document.getElementById ( 'data2010').
appendChild (div1);
)
)
)
fungsi search10 (query, label) (
var script = document.createElement ( 'script');
script.setAttribute ( 'src', query + 'feeds/posts/
default/- /'
+ Label +
'? Alt = json-in-script & callback = listEntries10');
script.setAttribute ( 'type', 'text / javascript');
document.documentElement.firstChild.appendChild
(script);
)
var labelArray = new Array ();
var numLabel = 0;
< b:loop values='data:posts' var='post' >
values='data:post.labels' < b:loop var='label' >
textLabel = "< data:label.name/ >";
var test = 0;
for (var i = 0; i < labelArray.length; i + +)
if (labelArray [i] == textLabel) test = 1;
if (test == 0) (
labelArray.push (textLabel);
var maxLabels = (labelArray.length < =
maxNumberOfLabels)?
labelArray.length: maxNumberOfLabels;
if (numLabel < maxLabels) (
search10 (homeUrl3, textLabel);
numLabel + +;
)
)
< /b: loop >
< /b: loop >
< /script >
< /div >
< /div >
< /b: if >
< div class='similiar' >
< div class='widget-content' >
< h3 > post terkait < /h3 > < div id='data2010'/ > < br/ > < br/ >
< script type='text/javascript' >
var homeUrl3 = "< data:blog.homepageUrl/ >";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
fungsi listEntries10 (json) (
var ul = document.createElement ( 'ul');
var maxPosts = (json.feed.entry.length < =
maxNumberOfPostsPerLabel)?
json.feed.entry.length:
maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i + +) (
var entry = json.feed.entry [i];
var alturl;
for (var k = 0; k < entry.link.length; k + +) (
if (entry.link [k]. rel == 'alternate') (
alturl = entry.link [k]. href;
break;
)
)
var li = document.createElement ( 'li');
var a = document.createElement ( 'a');
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 < json.feed.link.length; l + +) (
if (json.feed.link [l]. rel == 'alternate') (
var mentah = json.feed.link [l]. href;
var label = raw.substr (homeUrl3.length +13);
var k;
for (k = 0; k < 20; k + +) label = label.replace ( "%
20", "");
var txt = document.createTextNode (label);
var h = document.createElement ( 'b');
h.appendChild (txt);
var div1 = document.createElement ( 'div');
div1.appendChild (h);
div1.appendChild (ul);
document.getElementById ( 'data2010').
appendChild (div1);
)
)
)
fungsi search10 (query, label) (
var script = document.createElement ( 'script');
script.setAttribute ( 'src', query + 'feeds/posts/
default/- /'
+ Label +
'? Alt = json-in-script & callback = listEntries10');
script.setAttribute ( 'type', 'text / javascript');
document.documentElement.firstChild.appendChild
(script);
)
var labelArray = new Array ();
var numLabel = 0;
< b:loop values='data:posts' var='post' >
values='data:post.labels' < b:loop var='label' >
textLabel = "< data:label.name/ >";
var test = 0;
for (var i = 0; i < labelArray.length; i + +)
if (labelArray [i] == textLabel) test = 1;
if (test == 0) (
labelArray.push (textLabel);
var maxLabels = (labelArray.length < =
maxNumberOfLabels)?
labelArray.length: maxNumberOfLabels;
if (numLabel < maxLabels) (
search10 (homeUrl3, textLabel);
numLabel + +;
)
)
< /b: loop >
< /b: loop >
< /script >
< /div >
< /div >
< /b: if >
Langkah yang kedua == > >
- Cari dan paste kode di bawah ini tepat di atas kode < /head >
- Kemudian di save terlebih dahulu
- Cari lagi seperti kode ini
- tambahkan kode di bawah ini tepat di atas < /b:loop >
< /b:if > - Dan letakan kode ini di tepat di bawah kode < /b:loop >
< /b:if > - Simpan template dan lihat perubahannya
< script type="text/javascript" >
// < ![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return
true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) *
Math.random());
var i = 0;
document.write(' < ul >');
while (i < relatedTitles.length && i < 20) {
document.write(' < li > < a href="' + relatedUrls[r] +
'" > ' +
relatedTitles[r] + ' < /a > < /li > ');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write(' < /ul > ');
}
//]] >
< /script >
// < ![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return
true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) *
Math.random());
var i = 0;
document.write(' < ul >');
while (i < relatedTitles.length && i < 20) {
document.write(' < li > < a href="' + relatedUrls[r] +
'" > ' +
relatedTitles[r] + ' < /a > < /li > ');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write(' < /ul > ');
}
//]] >
< /script >
< b:if cond='data:post.labels' >
< data:postLabelsLabel/ >
< b:loop values='data:post.labels' var='label' >
< a expr:href='data:label.url'
rel='tag' > < data:label.name/ > < /a > < b:if
cond='data:label.isLast != "true"' > , < /b:if >
< /b:loop >
< /b:if >
< data:postLabelsLabel/ >
< b:loop values='data:post.labels' var='label' >
< a expr:href='data:label.url'
rel='tag' > < data:label.name/ > < /a > < b:if
cond='data:label.isLast != "true"' > , < /b:if >
< /b:loop >
< /b:if >
< b:if cond='data:blog.pageType == "item" ' >
< script expr:src='"/feeds/posts/default/-/" +
data:label.name + "?alt=json-in-
script&callback=related_results_labels&max-
results=10"' type='text/javascript'/ >
< /b:if >
< script expr:src='"/feeds/posts/default/-/" +
data:label.name + "?alt=json-in-
script&callback=related_results_labels&max-
results=10"' type='text/javascript'/ >
< /b:if >
< b:if cond='data:blog.pageType =="item"' >
< h4 > Realeted Post < /h4 >
< script type="text/javascript" >
removeRelatedDuplicates();
printRelatedLabels();
< /script >
< /b:if >
< h4 > Realeted Post < /h4 >
< script type="text/javascript" >
removeRelatedDuplicates();
printRelatedLabels();
< /script >
< /b:if >
Semoga tutorial ini membawa hasil seperti yang anda harapkan.......!
Versi Indonesia:
Back again into probelm web design blog among them by creating a horizontal menu this, it seems if a blog without the menu seems less than perfect ..?
If your blog is equipped menu or sequence specific links will be look more beautiful in the eye and see whether beam.how you think so ..!
Ok if your blog does not have horizontal menu can follow steps below::
The first step for a similar code like this > >
Then Put this script code directly below >>
The next step for longer code below >>
After that paste this script below this code >>
To change the green to your liking.
Come on try luck.
Back again into probelm web design blog among them by creating a horizontal menu this, it seems if a blog without the menu seems less than perfect ..?
If your blog is equipped menu or sequence specific links will be look more beautiful in the eye and see whether beam.how you think so ..!
Ok if your blog does not have horizontal menu can follow steps below::
- Of course, log into blogger
- Layout and click Edit Html
- Do not forget to Expand widget templates
The first step for a similar code like this > >
/* Footer
----------------------------------------------- */
#footer {background:#222;-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
width:920px;height:34px;
clear:both;
margin:0 auto;
padding: 0 auto;
line-height: 1.6em;
text-transform:none;
letter-spacing:.1em;
text-align: center;
}
----------------------------------------------- */
#footer {background:#222;-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
width:920px;height:34px;
clear:both;
margin:0 auto;
padding: 0 auto;
line-height: 1.6em;
text-transform:none;
letter-spacing:.1em;
text-align: center;
}
Then Put this script code directly below >>
/* Menu Horisontal
----------------------------------------------- */
.menuhorisontal{background:#000;
width: 100%;height:30px;
overflow: hidden;
}
.menuhorisontal ul{
margin: 0;
padding: 0;
padding-left: 4px;
font: bold 11px Arial;color:#222;
list-style-type: none;
}
.menuhorisontal li{
display: inline;
margin: 0;
}
.menuhorisontal li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px;
color: #dedede
}
.menuhorisontal li a:visited{
color: #dedede;
}
.menuhorisontal li a:hover, .menuhorisontal li.selected a{color:#fff; text-decoration:underline;/*Background Setelah Pointer Diarahkan */
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
height:35px;
}
----------------------------------------------- */
.menuhorisontal{background:#000;
width: 100%;height:30px;
overflow: hidden;
}
.menuhorisontal ul{
margin: 0;
padding: 0;
padding-left: 4px;
font: bold 11px Arial;color:#222;
list-style-type: none;
}
.menuhorisontal li{
display: inline;
margin: 0;
}
.menuhorisontal li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px;
color: #dedede
}
.menuhorisontal li a:visited{
color: #dedede;
}
.menuhorisontal li a:hover, .menuhorisontal li.selected a{color:#fff; text-decoration:underline;/*Background Setelah Pointer Diarahkan */
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
height:35px;
}
The next step for longer code below >>
< b:include name='description'/ >
< /div >
< /b:if >
< /b:includable >
< /b:widget >
< /b:section >
< /div >
< /div >
< /b:if >
< /b:includable >
< /b:widget >
< /b:section >
< /div >
After that paste this script below this code >>
< div class='menuhorisontal' >
< ul >
< li > < a href='http://your url link' > Home < /a > < /li >
< li > < a href='http://your url link' > Template < /a > < /li >
< li > < a href='http://your url link' > Seo < /a > < /li >
< li > < a href='http://your url link' > Blogger Hack < /a > < /li >
< li > < a href='http://your url link' > Blogger Tools < /a > < /li >
< li > < a href='http://your url link' > Blogger Stuf < /a > < /li >
< li > < a href='http://your url link' > E-book < /a > < /li >
< /ul >
< /div >
< ul >
< li > < a href='http://your url link' > Home < /a > < /li >
< li > < a href='http://your url link' > Template < /a > < /li >
< li > < a href='http://your url link' > Seo < /a > < /li >
< li > < a href='http://your url link' > Blogger Hack < /a > < /li >
< li > < a href='http://your url link' > Blogger Tools < /a > < /li >
< li > < a href='http://your url link' > Blogger Stuf < /a > < /li >
< li > < a href='http://your url link' > E-book < /a > < /li >
< /ul >
< /div >
To change the green to your liking.
Come on try luck.
English Version:
Kembali lagi kemasalah design web blog di antara nya dengan membuat menu horisontal ini,kelihatannya bila suatu blog tanpa adanya menu sepertinya kurang sempurna ya..?
Bila blog anda di lengkapi menu atau barisan link-link tertentu maka akan kelihatan lebih indah di pandang mata dan terlihat rapi.bagaimana menurut anda apakah demikian..!
O.k bila blog anda belum memiliki menu horisontal bisa ikuti langkahnya di bawah ini::
Langkah pertama cari kode yang mirip seperti ini >>
Kemudian letakan kode script ini tepat di bawahnya >>
Langkah selanjutnya cari lagi kode di bawah ini >>
Setelah itu paste script ini di bawah kode tadi >>
Untuk yang berwarna hijau ganti sesuai dengan keinginan anda.
Silakan di coba semoga berhasil.
Kembali lagi kemasalah design web blog di antara nya dengan membuat menu horisontal ini,kelihatannya bila suatu blog tanpa adanya menu sepertinya kurang sempurna ya..?
Bila blog anda di lengkapi menu atau barisan link-link tertentu maka akan kelihatan lebih indah di pandang mata dan terlihat rapi.bagaimana menurut anda apakah demikian..!
O.k bila blog anda belum memiliki menu horisontal bisa ikuti langkahnya di bawah ini::
- Tentunya login ke blogger
- Klik tata letak dan Edit Html
- Jangan lupa Expand widget template
Langkah pertama cari kode yang mirip seperti ini >>
/* Footer
----------------------------------------------- */
#footer {background:#222;-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
width:920px;height:34px;
clear:both;
margin:0 auto;
padding: 0 auto;
line-height: 1.6em;
text-transform:none;
letter-spacing:.1em;
text-align: center;
}
----------------------------------------------- */
#footer {background:#222;-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
width:920px;height:34px;
clear:both;
margin:0 auto;
padding: 0 auto;
line-height: 1.6em;
text-transform:none;
letter-spacing:.1em;
text-align: center;
}
Kemudian letakan kode script ini tepat di bawahnya >>
/* Menu Horisontal
----------------------------------------------- */
.menuhorisontal{background:#000;
width: 100%;height:30px;
overflow: hidden;
}
.menuhorisontal ul{
margin: 0;
padding: 0;
padding-left: 4px;
font: bold 11px Arial;color:#222;
list-style-type: none;
}
.menuhorisontal li{
display: inline;
margin: 0;
}
.menuhorisontal li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px;
color: #dedede
}
.menuhorisontal li a:visited{
color: #dedede;
}
.menuhorisontal li a:hover, .menuhorisontal li.selected a{color:#fff; text-decoration:underline;/*Background Setelah Pointer Diarahkan */
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
height:35px;
}
----------------------------------------------- */
.menuhorisontal{background:#000;
width: 100%;height:30px;
overflow: hidden;
}
.menuhorisontal ul{
margin: 0;
padding: 0;
padding-left: 4px;
font: bold 11px Arial;color:#222;
list-style-type: none;
}
.menuhorisontal li{
display: inline;
margin: 0;
}
.menuhorisontal li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px;
color: #dedede
}
.menuhorisontal li a:visited{
color: #dedede;
}
.menuhorisontal li a:hover, .menuhorisontal li.selected a{color:#fff; text-decoration:underline;/*Background Setelah Pointer Diarahkan */
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
height:35px;
}
Langkah selanjutnya cari lagi kode di bawah ini >>
< b:include name='description'/ >
< /div >
< /b:if >
< /b:includable >
< /b:widget >
< /b:section >
< /div >
< /div >
< /b:if >
< /b:includable >
< /b:widget >
< /b:section >
< /div >
Setelah itu paste script ini di bawah kode tadi >>
< div class='menuhorisontal' >
< ul >
< li > < a href='http://your url link' > Home < /a > < /li >
< li > < a href='http://your url link' > Template < /a > < /li >
< li > < a href='http://your url link' > Seo < /a > < /li >
< li > < a href='http://your url link' > Blogger Hack < /a > < /li >
< li > < a href='http://your url link' > Blogger Tools < /a > < /li >
< li > < a href='http://your url link' > Blogger Stuf < /a > < /li >
< li > < a href='http://your url link' > E-book < /a > < /li >
< /ul >
< /div >
< ul >
< li > < a href='http://your url link' > Home < /a > < /li >
< li > < a href='http://your url link' > Template < /a > < /li >
< li > < a href='http://your url link' > Seo < /a > < /li >
< li > < a href='http://your url link' > Blogger Hack < /a > < /li >
< li > < a href='http://your url link' > Blogger Tools < /a > < /li >
< li > < a href='http://your url link' > Blogger Stuf < /a > < /li >
< li > < a href='http://your url link' > E-book < /a > < /li >
< /ul >
< /div >
Untuk yang berwarna hijau ganti sesuai dengan keinginan anda.
Silakan di coba semoga berhasil.
