Multimedia Tutorials: blog

Showing posts with label blog. Show all posts

BLOG vs WEBSITE

Berikut dinyatakan maksud blog dan website berdasarkan pembacaan dan pemahaman saya..

Website dan Blog adalah fail-fail dokumen yang disimpan di tempat simpanan syarikat penyedia perkhidmatan hosting. Tempat penyimpanan dikenali sebagai server, sama macam hard disk di komputer kita. Cuma kapasiti penyimpanan dan kecekapannya adalah jauh lebih tinggi berbanding hardisk. Kedua-duanya memaparkan pelbagai elemen seperti text, grafik, bunyi, dan video.

Apa itu Blog?

Blog adalah singkatan kepada kepada Web-Log. Log pada dasarnya bermaksud catatan berfrekuensi tertentu seperti sekali setiap saat, minit, jam, hari, minggu dan sebagainya. Mengambil dari maksud istilah ini, dapat difahami bahawa blog merupakan web yang mempunyai catatan yang di kemaskini dalam sela masa tertentu. Blog umpama juga diari yang maklumatnya sentiasa di kemaskini untuk menggambarkan keadaan atau situasi semasa yang berlaku.

Rekabentuk blog biasanya ringkas supaya muat naik maklumat pantas. Ia dapat digunakan oleh golongan yang tidak tidak berapa mahir dalam pembinaan web kerana blog sudah siap tersedia dengan template tertentu. pengguna hanya perlu mendaftar dan log masuk untuk meng update maklumat terkini. Aktiviti mengemaskini blog di panggil blogging dan orang yang mengemaskini di panggil blogger.

Apa itu website?

Website terdiri dari 1 atau lebih halaman(page) yang dipaparkan di internet. Kandungan website biasanya statik disebabkan isikandungannya mewakili sesuatu yg jarang berubah. Sebagai contoh maklumat sesuatu syarikat atau maklumat model sesuatu produk tidak berubah.

Website biasanya memerlukan orang yang arif dalam bidang tersebut kerana ia diintegrasikan dengan fungsi penyimpanan data, sistem tertentu seperti menerima bayaran, dan sebagainya. Rekabentuk website pun biasanya lebih 'advance' dan teraktif bergantung kepada keperluan dan fungsi yang ingin tonjolkan oleh pemiliknya.

Namun demikian dengan kemajuan dan inovasi perisian masakini, website dan blog sudah semakin susah untuk dibezakan. kita dapat lihat ada website yang dapat berfungsi seperti blog iaitu mudah diupdate begitu juga sebaliknya..

Apa yang dapat difahami bahawa Website dan Blog adalah medium penyebaran maklumat tidak kira untuk perniagaan atau selainnya.

Pertama, pergi ke Dashboard.
Pada bahagian Manage Blogs, klik pada Setting.

Untuk menukar nama blog, anda hanya perlu tukar pada ruangan Title.
Kemudian, untuk menukar URL blog, cari navigation di bahagian atas, Publishing.

Tukar URL anda pada ruangan Blog*Spot Address.
Kemudian, taip verification pada Word Verification berdasarkan imej yang diberi.
Kemudian klik SAVE SETTINGS.
Anda kini telah memperbaharui blog anda.

SELAMAT MENCUBA ^_^

Have you ever visited http://kompas.com? One of the most famous newspaper website in Indonesia... At the left of the site, you can see a tab menu which is usually called “Tab View”. Why is it called Tab Menu? Because when the tab is clicked, it will move the menu content (wanna prove, just click the tab). However, it is a little different from the normal tab menu. The tab menu usually shows the content of the menu in turn or what we usually call “slide show”. Kang Rohman takes a conclusion that menu has 2 functions; as a “Tab View” and “Slide Show”.

Kang Rohman was interested in that tab menu, tried to apply it in blogger template and it works. To see the sample ofSlide Show Tab View menu, please visit http://magazine-1.blogspot.com and pay attention to the left side of the top, there you can see the menu that is similar to the menu in kompas.com.

If you are interested in making Slide Show Tab View menu, please follow the steps below.

#1 step

Log in into blogger with your ID
Click Layout
Click Edit HTML tab
Click Download Full template. Please back up your template first

Copy the code below, then paste it above ]]></b:skin>

.indentmenu{
font: bold 11px Arial;
width: 100%; /*leave this value as is in most cases*/ 
} 
.indentmenu ul{
margin: 2px;
padding: 0;
float: left;
/* width: 80%; width of menu*/
background: transparent;
} 
.indentmenu ul li{
display: inline;
} 
.indentmenu ul li a{
float: left;
margin: 2px;
color: #000; /*text color*/
padding: 5px 11px;
text-decoration: none;
border: 1px solid #ccc; 
} 
.indentmenu ul li a:hover{
background:#ddd;
} 
.indentmenu ul li a:visited{
color: white;
} 
.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
border: 1px solid #000000;
background:#000000;
} 
.tabcontentstyle{ /*style of tab content container*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
} 
.tabcontent{
display:none;
} 
@media print {
.tabcontent {
display:block !important;
}
}

Before continuing, please download this script , copy it, then paste it right above </head>
Click SAVE TEMPLATE
The 1^st is done. Now, why don’t you take a rest first, drink coffee, tea or milk to make you relax

Ok, finish you coffee, let’s continue to the 2^nd step

#2 step

Click Page Element tab
Click Add Gadget
Click plus button (+) for HTML/JavaScript. (img)

Copy and paste the code in available column:

<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;">
<div id="pettabs" class="indentmenu"><ul>
    
<li><a href="#" class="selected" rel="tab1">1</a></li>
     
<li><a href="#" rel="tab2">2</a></li>
      
<li><a href="#" rel="tab3">3</a></li>
       
<li><a href="#" rel="tab4">4</a></li> 
</ul>
        
<br style="clear: left"/>
     
</div> 
<div style="width:240px;text-align:justify;padding: 5px; margin-bottom:1em"> 
<div id="tab1" class="tabcontent">
        
<a href="http://magazine-1.blogspot.com/2008/11/obama-will-change-bush-policy.html">
       
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="obamabush" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHfWB52EWaBhTZo7xaJgPXkmvoaGDq4eOBHxZnipNeGanM9BJ2gsJBoAZA-uYosTv3FsI4BMqljDBGjBQ4qd8BstFdKHrRl7yahDHrUmZCO1N8HLFuq3iAaOe5kj7BxvvMMzxdnupS2bc/?imgmax=800" height="152" title="obamabush"/></a> 
<p><h3><a href="http://magazine-1.blogspot.com/2008/11/obama-will-change-bush-policy.html">Obama Will Change Busf Policy</a></h3></p>
      
U.S. President Barack Obama will change several numbers of controversial policies by President George W. Bush, including the restriction of the parent embryo cell research [...]
      
</div> 
<div id="tab2" class="tabcontent">
        
<a href="http://magazine-1.blogspot.com/2008/11/beyonce-will-never-sell-her-wedding.html">
    
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="beyone" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjysfsz9zTozyg_7lqsQ48JWRvW3jUw4tvmB5e5kYTVzaBAFw4PD052WLmWcBOAkKpR6wlE69OGSSGJs75AG3Mh32H13gS-t2wc-m-MN9sHxLJL05jEgRwrWNDdIOkGN6Jfg4sg1TlXzLg/?imgmax=800" height="152" title="beyone"/></a>
       
<p><h3><a href="http://magazine-1.blogspot.com/2008/11/beyonce-will-never-sell-her-wedding.html">Beyone Will Never Sell Her Wedding Photo</a></h3></p> 
Beyonce said, she will never consider to sells her wedding photo with Jay-Z to a celebrity magazine that offering a large amount of money as rewards, even she wonder with the amount of money that offered to her [...]
        
</div> 
      
<div id="tab3" class="tabcontent">
        
<a href="http://magazine-1.blogspot.com/2008/11/guns-n-roses-will-back.html">
       
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="Guns N 'Roses" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq5jQ-YYRE5hhZ5lTumqpMGibVfltgr7Pp1wpnmaHZwZCny3fq_KP1CUlJTDIieEfuZrQZyiGaye9mVnp554jxtISg_w2J_SKlH2cwb4-tFSiJhegH3qej3PT4hqBaLKSsfbr1FdbIKCI/?imgmax=800" height="152" title="Guns N 'Roses"/></a> 
      
<p><h3><a href="http://magazine-1.blogspot.com/2008/11/guns-n-roses-will-back.html">Guns N 'Roses Will Back</a></h3></p>      
After 15 years not releasing album, the group rock Guns N ' Roses will launch a new album in the United States on 23 November. The band's latest album is "The Spaghetti Incident", released in 1993 [...]
        
</div> 
<div id="tab4" class="tabcontent">      
<a href="http://magazine-1.blogspot.com/2008/11/i-pod-can-make-your-ear-buzz.html">
     
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="ipod" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE0wvlWnuDDw5yAXiLduhzGWwpwm9EhO5gazhn-nWRHAptgaG0qrhDXT-mwh6x_d0QMUp-WXwrVLt83ZtVtvJfvg59y-TI1-ap33lV3oiZn9luOOPiC5hfAFJm_DfiefIFMx7-ft4OS90/?imgmax=800" height="152" title="ipod"/></a>
     
<p><h3><a href="http://magazine-1.blogspot.com/2008/11/i-pod-can-make-your-ear-buzz.html">Ipod Can Make Your ear Buzz</a></h3></p> 
Music is one way to wake the spirit, to create happy life, but what happens if the music makes the ears buzz? of course, not the music that makes the ear 'buzzy',[...]
        
</div>
</div> 
<script type="text/javascript">      
var mypets=new ddtabcontent("pettabs")       
mypets.setpersist(true)       
mypets.setselectedClassTarget("link")       
mypets.init(2000)       
</script>

Click SAVE TEMPLATE button.
Finish and view you blog to see the result.

The code above is not absolute as Kang Rohman has written. You can modify it as your interest or suitable with your template.

Below is additional information that will ease you in modifying this code.

In the 1^st step, there is a row of CSS code, that code can be modified so that it produces a beautiful row tab.

Take a look at the code below

<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;">
<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" class="selected" rel="tab1">1</a></li>
<li><a href="#" rel="tab2">2</a></li>
<li><a href="#" rel="tab3">3</a></li>
<li><a href="#" rel="tab4">4</a></li>
</ul>
<br style="clear: left"/>
</div>

This code is a tab row with the tab row such as1, 2, 3, and 4. You can change with your favorite ones, suchRecent Comments, Recent Post, Shoutbox or anything you want. To arrange the height of your widget, change height:350px with the value that you want, example; height:400px.

Please, Pay attention the code below too.

The code above is used to arrange the menu content and it can be changed as you want to, such as;

width:240px : it is used to arrange the width, change it with the value that you want, example; width:300px.

text-align:justify : it is used to arrange the writing, change it with the value that you want,

Example; text-align:left, text-align:right.

Also, Pay attention the code below too.

    var mypets=new ddtabcontent("pettabs")
    mypets.setpersist(true)
    mypets.setselectedClassTarget("link")
    mypets.init(2000)

</script>

To arrange the moving of image from one tab to other tab, change 2000 with the value that you want, example; 2100.

Code in “Slide Show Tab View” contains Kang Rohman Articles. Please change it with your own articles.

Have a nice trying

Original Script by: dynamic drive. Modified by: Blogspot tutorial

http://www.blogspottutorial.com/2008/11/make-slide-show-tab-view-menu.html

What Is Social Bookmark Network Site?

When we are reading the tips from master bloggers on how to increase the blog visitors or web, they often say “submit your articles into Social Bookmark Site” or Social bookmark Network or Favorite Bookmark and others

For newbie or new blogger in blogging, they are often confused with those words, and maybe they will ask a question” What is Social Bookmark Network site?” and what can we can from it?”

Hmmm..for you who have been blogging in blogspheres may forget those who don’t understand about this, and we often forget that we used to be like them (newbie). For you who still don’t understand about Social Bookmark site and its advantages, lets find out its information together.

While we are looking for complete info, Kang Rohman tries to share what Kang Rohman has known. What is Social Bookmark Network site? basically, Kang Rohman can say that Social Bookmarking Network site is a network site that function to mark the information in the Internet.

Generally, a website or blog will be posted or updated by the website or blog owner but different with social bookmark network because the content of the site will be filled by articles or information from otherwebsites which are submitted into this site. Everyone can submit any useful articles or information.

What are the advantages of submitting our blog articles into Social Bookmark? Before knowing the advantages of submitting blog articles into Social Bookmark, we surely have to know how it works. If Kang Rohman tells you how it works, it would be probably like below;

First, submitting your articles into social bookmark can be done by everyone, not always by the admin or the blog owner. For example, if you feel that the article you are reading is useful and interesting and want to share the info with the others, you may submit that articles into social bookmark.

Second, in social bookmark site, there is Vote, you and anyone may give a vote to the article that you think the article is useful or interesting.

And there are still ways on how it work. From both ways, we can take a conclusion the advantages of submitting articles of a blog or site into the social bookmark., they are;

Get a lot of visitors.

This is what the blogger master always promises about. They promise and talk about the advantages of submitting articles into social bookmark site. Why and why? Let’s pay attention!

In order to make it easier to understand, Kang Rohman takes one sample from one of social bookmark site, digg.com. If you submit the article into digg.com, it means your article will be in digg.com and if your article is really interesting to read, the readers of the site perhaps will visit your blog. Article in digg.com is only summary and a link to your posting. Below is the screen shoot sample.

If the article is very interesting or useful to read, the readers will not hesitate to give a vote to your article. More vote will give a chance for our article to be shown on the sidebar and if your article is shown on the sidebar, thousands of readers will see the title of your articles. And if thousand readers see it, it is a big chance for them to visit our blog.

Sometimes the article we submit has good position in search engine, It is absolutely a gift of a lot of visitors for our blog or site.

2. Get a lot of free back links (link popularity)

You know back links or link popularity, don’t you? More blog or site linked to our blog or site is good for our blog or site. If it is a commercial blog, many people don’t hesitate to spend hundred or even thousand dollars per month for getting back links from other site. If you submit your articles into social bookmark, you will get free back links.

There are still many advantages we can get if we submit our articles diligently and if kang rohman continue it again, this article will be very long.

Some social bookmark site are; http://digg.com, http://www.stumbleupon.com, http://ma.gnolia.com, http://delicious.com, http://www.furl.net, and others

That’s why many masters often suggest us to submit our article into social bookmark site..

Good luck

http://www.blogspottutorial.com/2008/11/what-is-social-bookmark-network-site.html

How To Hide Blogger Navbar

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

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

Disappear the Blogger Navbar

Log in into blogger with your ID
Click Layout
Click EDIT HTML tab
Click Download Full template. Back up your template first (important!)

Find the code which is similar to the code below, focus at the body code:

body {
background: #8F8E8E;
width: 100%;
color: #000000;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
margin: 0px auto 0px;
padding: 0px;
}

Copy and paste the following code above the body {….} :

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

Click SAVE TEMPLATE
Finished and now your blog navbar has hidden.

Besides the steps above, there is still another alternative through AUTO HIDE, this auto hide is safer frombreaking the blogger rules because we don’t disappear the navbar but only hide it. If we drop the mouse to navbar, then the navbar will appear again. These steps will not work normally in Internet explorer browserbut work well in other browser.

Below are the steps to hide the navbar.

Log in into blogger with your ID
Click Layout
Click EDIT HTML tab
Click Download Full template. Back up your template first (important!)

Find the code which is similar to the code below, focus at the body code:

body {
background: #8F8E8E;
width: 100%;
color: #000000;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
margin: 0px auto 0px;
padding: 0px;
}

Copy and paste the following code above the body {….} :

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

Click SAVE TEMPLATE
Finished and now your blog navbar has AUTO HIDE.

. I hope it is easier to understand and happy blogging

http://www.blogspottutorial.com/2008/11/how-to-hide-blogger-navbar.html

Multimedia Tutorials

BLOG vs WEBSITE

Tutorial : Mengubah nama blog dan menukar URL blog

Make Slide Show Tab View Menu

What Is Social Bookmark Network Site?

How To Hide Blogger Navbar

Labels

Popular Posts

Template Information

Template Information

Test Footer 2