cara menampilkan lagu di blogspot

Untuk membuat lagu bisa diputar didalam blog anda harus mengkonversi lagu kedalam flash sedangkan memerlukan hosting untuk menampung file flash sehingga untuk gratisan sulit tetapi anda jangan berkecil hati untuk itu copas kode ini

<a href="http://tipsmakeablog.blogspot.com" target="_blank"><img src="http://divine-music.info/images/dmmusicbar.gif" border="0" title="justin beiber" alt="Justin Beiber"></a><EMBED SRC="http://divine-music.info/musicfiles/02-Justin Bieber - Somebody To Love.swf" AUTOSTART="TRUE" LOOP="TRUE" WIDTH="1" HEIGHT="1" ></EMBED>

Kemudian bisa anda taruh di widget caranya tambahkan widget HTML & Javascript kemudian pastekan dan simpan lalu lihat hasilnya contoh seperti di bawah ini:

Membuat Tv Online di blog

Tv online yang sudah marak diakses oleh berbagai user dari semua negara sekarang yang saya bagikan adalah cara memasang tv online yang berasal dari Indonesia dan itu sangat menarik jika anda penggemar siaran tv kalau tidak ada tv anda bisa online dan menontonnya sendiri untuk membuatnya tidak perlu banyak tenaga yang diperlukan anda tinggal copas kode berikut:

<embed align="top" allowfullscreen="true" allowscriptaccess="always" bgcolor="#ffffff" devicefont="false" height="860" menu="true" name="MivoTV" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" scale="noscale" src="http://id.imediabiz.com/MivoTV.swf?r=17285" type="application/x-shockwave-flash" width="650" wmode="transparent"></embed>

Setelah anda copas terus anda mau taruh dimana..?
Kalau di postingan maka buat posting terus klik tab edit html kemudian pastekan dan klik publish post untuk menerbitkan atau klik preview untuk melihat sedangkan kalau di bagian badan web anda silahkan klik tab layout kemudian tambahkan widget HTML & Javascrif kemudian pastekan kode tersebut setelah itu klik simpan dan lihat hasilnya untuk contoh lihat dibawah ini :

How to make breadcrumbs in your blog

 
For the comfort of visitors so as not to get lost there needs breadcrumbs navigation Sebuat which navigation can help visitors to know their current location diwebsite us, beside our website more familiar with search engines because this trick is also one seo tricks you should try to increase your traffic on google especially. Let us begin to consider the following steps
1. Login to Blogger
2. Click the Design tab and click edit html
3. Check the expand template widgets and find this code <div class='post hentry'>  and Copy the code below and paste it right under the code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
<span class='Apple-style-span' style='font-family: Verdana, sans-serif;'>Your Are Here</span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibB2k-rgCT_zwNA-m72i0QMN7VQUt2VoxrMPukajIOEvBElWgNCcdHBMbHGioWknuFUGVRlyiaWmPYLmhTVo1e2zcMCdR0FtLrAeoIAQLlXmKTUe9xVZ8kya8sPEBSilqHYS8un9OTY6E/s1600/kangsalman+crumb.gif'/> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
&#187;
<b:if cond='data:post.labels'>
<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 != &quot;true&quot;'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
<span class='Apple-style-span' style='font-family: Verdana, sans-serif;'>Browse</span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibB2k-rgCT_zwNA-m72i0QMN7VQUt2VoxrMPukajIOEvBElWgNCcdHBMbHGioWknuFUGVRlyiaWmPYLmhTVo1e2zcMCdR0FtLrAeoIAQLlXmKTUe9xVZ8kya8sPEBSilqHYS8un9OTY6E/s1600/kangsalman+crumb.gif'/> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
&#187; Archives for <data:blog.pageName/>
</div>
</b:if>

If you want to use a box (border) in the breadcrumb, add the following code and paste it directly above the ]]></b:skin> :

.breadcrumbs {
padding:8px 0px 10px 5px;
margin: 0px 0px 5px 0px;
font-size:88%;
border:1px double
#e6e4e3;
}

and then klik save

Replacing older post and newer post with image

 
Image replacement of this paper is very interesting because it makes us more plasticity blog pretty sight to make us feel at home to edit this template okay let's start
To change the writing older post, newer post and the home is easy you just need to do this properly consider
1. Login to Blogger
2. Click the Design tab and edit the html and find this code <data:newerPageTitle/> and replace with this code

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJbFRMWl13uqIylRlfY2h9Qy5SCQPPHZ6gvj1O3Ul3deFVPc72XJ9KwVlj7gh8Bcje5cXvl5Ai9_0p6tQd6eb4AuWEsLAoRBT3kHQSY8WytzRqDDeJb8Zk6Q30TEzrTwdrUbLEENYSJSQ/s0/newer_posts.png"/>

3. find <data:olderPageTitle/> and replace with this code

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlD7yuA54ePSG91ZTaaKOdwdFHpkWXLQe6c5Q_L4OAweP0n0KMsoTq0KZmwnyUZ-iOgPiMWyyH1bptyiTafJBF2fB9B4ZFxQgP-P2cZ0gBSRTW8-eZhkK7cUBVPEiSeyokoX0FspWRn6s/s0/older_posts.png"/>

4. find <data:homeMsg/>and replace with this code

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXPkS56fI2rXFZd1sKHF6qPJ7mhakfLlSfBfWD5yv4y_uiM4Zehyphenhyphencf16Ys0ZZiIYTBdL09rIEzOl4fBbj41LQJ5xKgnygYPTMDDTH4STBaniay5J1mB8NwUdEInDXDVhgcz0e_LiyAJoE/s0/10.png"/>

Eliminate the appearance of the navigation bar on blogger

Eliminate display this navigation bar will help you look more professional blog why because in the absence navbar impressed blog is second to none. As a website owned by a webmaster. To make it really easy is that bloggers copy and paste the code below, how
1. Log in to blogger
2. Click the Design tab
3. Click edit html and look for the code #navbar replace with this code of # navbar {until} or if no paste just above tag ]]></ b: skin> and click save

#navbar{display:none; height:0; visibility:hidden;}

For example you can see on my blog no its not the navigation bar

How to make a related article

Related articles are very necessary because if one day visitors visiting your blog through search engines then relates this article will be able to help visitors easily search for them on our blog therefore very important to make you first need
1. Log in to blogger
2. Click the tab design
3. Then click edit HTML tab and check the Expand Widgets template find this code <data:post.body/> then after See you paste the code below right underneath

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h3>I Suggest You Also Read</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

After you copy and paste now you just click save and view blog to see the results open a blog page

How to make a textarea box link exchange

Link exchange box is needed to facilitate your friendship in the world of the Internet so it is very necessary to if your blog discusses social issues and knowledge that require the same friend with the topic of your blog or website that you created
example picture

Making a textarea box is very easy to exchange links with you only need to paste this code in your widgets

<textarea name="textarea" cols="30"><a href="http://tipsmakeablog.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg37T-Kdeucy3rEX0WIsFIWWZSXXDzRL1hWlP-By7P-b63-8Y_2bSUMDy72aMFuXdxX3pn1jsV0q2r4WfyDr74lWq_jbldpme0bvxrjuN3T9hEty_ZrlvZqeCTuvaQIt-YhC2w0I2sWvWY/s1600/christmas-banner-thumb3487683.jpg" width="300" height="300" border="0" /></a></textarea>

example result

<a href="http://tipsmakeablog.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg37T-Kdeucy3rEX0WIsFIWWZSXXDzRL1hWlP-By7P-b63-8Y_2bSUMDy72aMFuXdxX3pn1jsV0q2r4WfyDr74lWq_jbldpme0bvxrjuN3T9hEty_ZrlvZqeCTuvaQIt-YhC2w0I2sWvWY/s1600/christmas-banner-thumb3487683.jpg" width="300" height="300" border="0" /></a>

Inserting flash in your blog

Flash is helping to beautify the look of your website then gunakanlan flash section that you like certain parts of the dam makes the display to be attractive so as to attract our visitors to feel at home for long in our website okay let's use the code below

<div align="center">
<embed allowscriptaccess="always" flashvars="alink1=http://tipsmakeablog.blogspot.com//" height="450px" quality="high" src="http://www.myplaycity.com/online_games/galaxy_guard.swf" type="application/x-shockwave-flash" width="550px" wmode="transparent"></embed></div>

Well interesting not to make it easy you guys live coffee above code and replace the red line with your own flash file to the size you can change yourself in 550px according to the size you want

Example

Create a guest book hidden

How to make a guest book is hidden, we know books tamukan yes guest book guest book to be filled by well now we make the guest book on your website or blog we see how easy the following steps
1. Login to blogger sign in with your account
2. Click the tab design and we've been on the next page element add the gadget you want diposisi
3. Furthermore, now you add the HTML / Javascript gadgets and paste the following code

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-IKA4hhNJ8-4VnHElB2xZy5OBltDGl-V_sWA_DJ3vAcIwdD8Kj1Dc1HgIj1V1sXhPTd50U2BQoXHMX21vBjpQnXhwUVUmRUcuHrOrTu0KuqI3p2_IfbsrHy-M4WK8qppYvUI37QsTZvxp/') no-repeat;
}
.gbcontent{float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()">   </div>

<div class="gbcontent">

<!-- Replace the code in your guest book -->

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Now add the code above into gadgets had to replace the red code with the code you get on shoutmik and if you do not have please register here
after the list and told to fill out the form and change the theme and view your shoutmix now you can menkopy shoutmix code from the code as below

<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="blogprofesional" src="http://www5.shoutmix.com/?youridentity" width="160" height="400" frameborder="0" scrolling="auto">
<a href="http://www5.shoutmix.com/?youridentity">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />
<!-- End ShoutMix -->

Example



ShoutMix chat widget
and paste the code shoutmix with a combination of the above code so that it can be seen hidden

Setting up Facebook Comments

How to create a facebook comment is very easy you just joined facebook after that to make way for an application list of applications here and then register your site on facebook after you lists on facebook App by pressing the Create the next you have to fill in the information required to enter all the info url info website and then click save changes
after it emerged that the page you created after that click on Application profile page sidebar section after that will appear next page we find the key that contains the Add box like there are many plugins next to the left then the next you select Comments so now you see besides the right and enter the url http://tipsmakeablog.blogspot.com example on your site url to comments later in the tab Number of posts to post comments amount to be shown, the Width to the size of the box and then comment please color schemas to color match you with the blog or website thus enhance the look of your website after all is fulfilled now just click get the code like this code sample

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="http://tipsmakeablog.blogspot.com" num_posts="2" width="500"></fb:comments>

Then you parse using the tool click here to parse and the result will be like the code below:

&lt;script src=&quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;&gt;&lt;/script&gt;&lt;fb:comments href=&quot;http://tipsmakeablog.blogspot.com&quot; num_posts=&quot;2&quot; width=&quot;500&quot;&gt;&lt;/fb:comments&gt;

Now is time to put on the blog's look stride
1. Login to Blogger
2. Sign in with your blog account
3. Click Design then click edit html
4. check the Expand Widget Templates
5. Find the code like this data: post.body
6. Then paste the code that is parsed earlier right under the code and click save template and see the results by opening one of the posts your article
Example

Adding a picture in a corner of our blog

The view that I mean the blog with a picture on the corner of the blog that can be used for advertising, clocks, animation or shoutbox to your liking let's see how easy step by step
1. Login to blogger, click on "Layout -> Edit HTML
2. Find this code ]]></b:skin> if you found it place following code on top.

#corner {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Bottom and Left claimed that the picture will be displayed under the right of our blog and you can change it themselves with or Bottom Up and Left and Right, while 0px replace with your desired position
3. The next step is placed following script code before

<div id="corner"><a href="your url">
<img src="your image" border="0" /></a></div>

4. If you would like that is there not a picture but the clock / calendar / hit counter / widgets else, then replace the text in red with the script these widgets.
5. Save your work and see the results.

How to change the dates of postings with pictures

Changing the date of posting with an image that can beautify your blog
The first we have to do is change the settings first date, do as usual Login to bloggers continue to choose Settings -> Formatting, replace "date header format" or "a date format (mm.dd.yyyy) nha who are beginners definitely confused mean right? that you know next to the words "date header format" it is the box that shows the date, then you click and select the format continues to save bulan.tangal.tahun eg 01/13/2008
The second step menu select Layout -> Edit HTML. Then check the box Expand Widget Templates, Oh yes, do not forget the back-up your template first. well now we proceed
1. Find this code <TITLE> <data:blog.pageTitle/> </ TITLE> (where the top) after See you put this code exactly below

<SCRIPT type='text/javascript'>
//<![CDATA[
function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</SCRIPT>

2. Keep looking for this code
.date-header { or this h2.date-header {
3. Having met the change with this code

.dateblock {
background: url("http://i120.photobucket.com/albums/o190/jaloewig/calendar-1.gif")
no-repeat;
width: 55px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

.month {
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}

.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;

}

replace the image url in red with your own favorite images to fit your website code Continues color: # 3366CC; are color coded
date, you can replace it with another color
4. The next step is for you to find this code <data:post.dateHeader/>, if you have found replace with this code

<div class='dateblock'>
<script>date_replace('<data:post.dateHeader/>');</script></div>

5. Save your template and see the results.
If for example writing the month and the date is too above try adding this code padding: 4px 0px 0px 0px; under the code. month {and also under the code. day {

Download Tutorial Cara Cepat Ngeblog

Pengen belajar ngeblog bisa dengan mudah kita lakukan hanya bermodalkan pengetahuan tentang internet dimana bisa anda baca tutorial yang saya rilis untuk anda berupa panduan lengkap tentang bagaimana cara  membuat blog secara mendalam sehingga anda dengan mudah membuat blog oleh karena itu silahkan anda baca dengan membeli tutorial ini sehingga nantinya akan membuat blog ini lebih berkembang semua panduan terlengkap yang belum pernah anda bayangkan
Maka tunggu apa lagi ayo beli produk ini