MENU DROP DOWN

Kamis, 25 Desember 2014

MEMBUAT DROPDOWN HORISONTAL YANG BISA DIKENALI OLEH WEB DAN MOBILE


Setelah cukup lama berguru kesana-sini, akhirnya ketemu juga cara membuat menu dropdown horisontal yang bisa menggunakan sub menu. Caranya cukup mudah dan tidak menggunakan memory yang cukup besar. Bisa dipraktekkan oleh rekan-rekan yang ingin mencoba.
Anda bisa melihat gambar disamping, dimana menu utama yang terdiri dari beberapa sub menu, dan bisa dipisahkan lagi dengan beberapa sub-sub menu.
Yang penting disini adalah alamat yang dituju oleh menu/ submenu/ sub-sub menu harus berbentuk ".html" atau berupa "/search/label". Beberapa metode sudah pernah penulis coba tapi begitu sampai di submenu ada kesulitan sehingga tidak dapat digunakan.
Beberapa rekan yang kesulitan membuat submenu/ sub-submenu, akhirnya mengambil jalan pintas dengan menambah menu-menu baik diatas maupun dibawah header, atau ada juga dengan membuat sistem kategori/ label yang terpisah dan cukup banyak serta merepotkan. Dengan cara ini kita dapat dengan mudah menambah/ mengurangi, mengganti menu-menu / submenu-submenu / sub-submenu - sub-submenu sesuka kita sendiri.
Caranya adalah sebagai berikut :
1. Login ke blog anda
2. Langsung masuk ke Template
3. Klik Edit Template
4. Tekan Ctrl F cari ]]></b:skin> tekan enter
5. Letakkan kode berikut ini diatas ]]></b:skin>

/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuhorizontal{
background: #222222 repeat-x;
width:100%;
margin:0 auto;
padding:0 auto
}
#menuhorizontal1{
position:static;
width:100%;
height:30px;
margin:0 auto
}
.clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%}
#submenubarhorizontal,#submenubarhorizontal ul{
list-style:none;
font-family:Arial, serif;
margin:0;
padding:0
}
#submenubarhorizontal a{
display:block;
text-decoration:none;
font-size:11px;
font-weight:700;
text-transform:uppercase;
color: #ff9900;
border-right:1px solid #222222;
padding:12px 10px 8px
}
#submenubarhorizontal
a.trigger{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD2Yq3xAgaNWCQDCGcthgYd5WGbbaVHDwVFsIzs1hURIZIwzYkK-GPjqu08S_LditlAeNXfDqrkPyoZRVEKOYrrVsmFrMrxaGNFZdqJYAnEkoeh1OhftOWFcetVYAKu-hQYaqbPaEawWM/s1600/arrow_white.gif);
background-repeat:no-repeat;
background-position:right center;
padding:12px 24px 8px 10px
}
#submenubarhorizontal li{
float:left;
position:static;
width:auto
}
#submenubarhorizontal li ul,
#submenubarhorizontal ul li{
width:170px
}
#submenubarhorizontal ul li a{
text-align:left;
color:#fff;
font-size:12px;
font-weight:400;
text-transform:none;
font-family:Arial;border:none;padding:5px 10px
}
#submenubarhorizontal li ul{z-index:100;position:absolute;
display:none;
background:#C50A0A;padding-bottom:5px;
-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);
-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)
}
#submenubarhorizontal li:hover ul,
#submenubarhorizontal li.hvr ul{display:block}
#submenubarhorizontal li:hover ul a,
#submenubarhorizontal li.hvr ul a{color:#edfdfd;
background-color:transparent;
text-decoration:none
}
#submenubarhorizontal li ul li.hr{border-bottom:1px solid #444;
border-top:1px solid #000;
display:block;font-size:1px;
height:0;line-height:0;
margin:4px 0
}
#submenubarhorizontal ul a:hover{
background-color:#ff9900!important;
color:#fff!important;text-decoration:none
}

6. Kemudian carilah kode
    -   <header>          : untuk menu diatas header blog
    -   </header>         : untuk menu dibawah header blog
7. Copy paste kode dibawah ini dan letakkan diatas kode <header> untuk menu diatas header
    dan atau diatas kode </header> untuk menu dibawah header


<div id='menuhorizontal'>
<div id='menuhorizontal1'>
<ul id='submenubarhorizontal'>
<li><a href='http://arkeyes88.blogspot.com' target='new'>Home</a></li>
<li><a class='trigger'>TEKNIK SIPIL</a>
<ul><li class='hr'/>
<li> <a href='http://petapetaku.blogspot.com/2014/10/coba2.html' target='new '>JALAN</a></li>
<li class='hr'/>
<li> <a href='http://petapetaku.blogspot.com/2014/10/tips-cara-membuat-author-blog-di-bawah.html' target=' new '> JEMBATAN</a></li>
<li class='hr'/>
<li> <a href=' nama-alamat-blog.html ' target=' new '> HYDRO</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html  ' target=' new '> STRUKTUR</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html  ' target=' new '> ANALISA</a></li>
</ul></li>
<li><a href=' http://arkeyes88.blogspot.com/2014/09/tvonline.html  ' target=' new '>TV ONLINE </a></li>
<li><a href=' nama-alamat-blog.html ' target=' new '>BERITA UMUM</a></li>
<li><a class='trigger'>MUSIK FOTO</a>
<ul><li class='hr'/>
<li><a href='http://arkeyes88.blogspot.com/search/label/MUSIK ' target=' new '>MUSIK</a></li>
<li class='hr'/>
<li><a href=' http://arkeyes88.blogspot.com/search/label/FOTO ' target='_blank '> FOTO</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target='  new '> MARTIAL ART</a></li>
</ul></li>
<li><a href=' http://arkeyes88.blogspot.com/2014/09/tvonline.html  ' target=' new '>HTML BLOG </a></li>
<li><a href=' nama-alamat-blog.html ' target=' new '>APLIKASI</a></li>
<li><a class='trigger'>IKLAN</a>
<ul><li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target=' new  '> JUAL BELI</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target='new'> PRUDENTIAL</a></li>
</ul></li>
<li><a class='trigger'>nama menu 4</a>
<ul><li class='hr'/>
<li><a href=' nama-alamat-blog.html '>Sub nama menu 4</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target='new '> Sub nama menu 4</a></li>
<li class='hr'/>
<li><a href='  nama-alamat-blog.html ' target='new '> Sub nama menu 4</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html  ' target='new '> Sub nama menu 4</a></li>
</ul></li>
</ul>
<br class='clearit'/></div>
<div style='clear:both;'/></div>

Catatan  :  Tulisan yang berwarna Ungu adalah judul/ nama Menu / Submenu, sedangkan tulisan yang berwarna Merah, adalah alamat blog anda atau alamat pos/ laman yang dituju.


Demikianlah sedikit pencerahan bagaimana membuat menu dropdown horisontal, selanjutnya "Terserah Anda" untuk mengkotak-atiknya sesuai dengan selera.

MEMBUAT NUMBERED PAGE NAVIGATION DI BLOG

Untuk memperrmudah mencari topik-topik halaman pos di blog, diperlukan sebuah metode praktis yang disebut Numbered page navigation (NPN) atau Navigasi halaman bernomer.
NPN ini pada umumnya terletak di bagian bawah kolom Pos di Halaman Utama (Home Page)
Ada beberapa tipe/ style penomoran yang penulis akan kemukakan dan semuanya berhasil guna. Style ditentukan oleh selera masing-masing pembaca. Baiklah untuk segera memulai pertama-tama :
      1. Buka blog saudara
      2. Masuk ke Template
      3. Klik HTML
      4. Tekan Ctrl + F
      5. Tulis ]]></b:skin> terus klik Enter
      6. Letakkan kode berikut diatas ]]></b:skin>


1. STYLE 1
arkeyes88.blogspot.com


#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;} .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;} .displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;} .showpageOf{display:none!important} #blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;} #blog-pager .pages{border:none;}


2. STYLE II

arkeyes88.blogspot.com


#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;} .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;} #blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;} .showpageOf{display:none!important} #blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}


3. STYLE III
arkeyes88.blogspot.com


#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}


4. STYLE IV
arkeyes88.blogspot.com

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; } .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;} #blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;} .showpageOf{display:none!important} #blog-pager .pages{border:none;}


5. STYLE V

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; } .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;} #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;} .showpageOf{display:none!important} #blog-pager .pages{border:none;}


6. STYLE VI

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; } .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;} #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;} .showpageOf{display:none!important} #blog-pager .pages{border:none;}


7. STYLE VII



.blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;} .displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} .showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;} a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;} #blog-pager .pages{border:none;background: none;}


NOTE :  JIKA ANDA INGIN MENYEMBUNYIKAN TOMBOL "FIRST" DAN "LAST" TAMBAHKAN SEBARIS PERINTAH INI DIBAWAH KODE CSS

                .firstpage, .lastpage {display: none;}


      7. Tekan Ctrl + F  >>  ketik </body>, kemudian tekan Enter

      8. Letakkan kode berikut diatas </body>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
/*<![CDATA[*/
var perPage=7;
var numPages=6;
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
var urlactivepage=location.href;
var home_page="/";
/*]]>*/
</script>
<script src="
http://yourjavascript.com/121103324123/page-navigation2.js"/>
</b:if>
</b:if>




Catatan : 
- per Page : menunjukkan berapa banyak Pos ditampilkan tiap halamannya
- numPages : menunjukkan berapa banyak halaman ditampilkan per Page navigation=nya

Temukan kalimat berikut :

                                    expr:href='data:label.url'

Gantikan dengan :


              expr:href='data:label.url + "?&amp;max-results=7"'

Sabtu, 13 Desember 2014

10 ARSITEKTUR STASIUN KERETA API TERBAIK DI DUNIA

Stasiun kereta api yang mempunyai bangunan dengan arsitektur terbaik di dunia.

1. WTC Transportation Hub, Amerika Serikat
arkeyes88.blogspot.com

2. Southern Cross Railway Station, Australia
arkeyes88.blogspot.com

3. Central Station Rotterdam, Belanda

arkeyes88.blogspot.com

4.Antwepen Central, Belgia 

arkeyes88.blogspot.com

5. Chhatrapati Shivaji Terminus, India

arkeyes88.blogspot.com

6. Liège-Guillemins railway station, Belgia
arkeyes88.blogspot.com

7. Gare do Oriente, Portugal
arkeyes88.blogspot.com

8. Grand Central Terminal, United States

arkeyes88.blogspot.com
9. Hundertwasser Station, Jerman

arkeyes88.blogspot.com

10. King’s Cross Railway Station, Inggris

arkeyes88.blogspot.com

Sabtu, 06 Desember 2014

MEMBUAT ROTATING SLIDER RECENT POST DI BLOGGER



Kali ini kita akan membuat Widget berupa Recent Pos yang berbentuk slider yang bisa berputar secara otomatis. Widget ini menambah kecantikan penampilan blog kita... Teknik membuat widget ini cukup sulit sehingga salah dalam pengetikan dan penempatan akan membuat widget kita tidak berjalan sesuai dengan yang diharapkan.
Widget ini sudah saya uji coba dan ternyata berhasil.. Adapun langkahnya adalah sebagai berikut :
      1. Login terlebih dahulu ke blog anda
      2. Masuklah ke Template
      3. Klik "Edit HTML"
          Ada baiknya anda terlebih dulu membackup data template sehingga bila terjadi 
          kesalahan, tidak mengakibatkan kesalahan fatal yang dapat merusak blog anda.
      4. Klik di sembarang tempat, kemudian cari :]]></b:skin> dengan menekan Ctrl + F
      5. Copy paste perintah berikut ini di atas :]]></b:skin>



/* START
--------------------------------------------------------------------
Easy Slider
--------------------------------------------------------------------
EasySlider
*/
#slide-container {
height:360px;
position:relative;
width:480px;
}
#slider {
height:360px;
left:25px;
overflow-x:hidden;
overflow-y:hidden;
position:relative;
width:480px;
}
.slide-desc {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTIfGaW0_3HEvCCHM4-Oq6RpUytoJOqyJLpgYu6HLar7nEiFlzZCjQwMa9rWFDs31Xam6yWLWBcRgX1ROCo3UwFldtyyM2GZK6JLTMN8dzUyKhAfCSLhXfo57j-7ckvDtJw8OgZE-aXiw/s5/darkbg.png) repeat scroll 0 0;
color:#FFFFFF;
padding:10px;
position:absolute;
right:0px;
text-align:left;
top:0;
width:200px;
z-index:99999;
}
.slide-desc h2{display:block;}
.crosscol .widget-content {position:relative;}
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:480px;
height:360px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
text-indent:-9999px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:500px !important;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
display:block;
height:77px;
left:0;
position:absolute;
top:132px;
width:30px;
z-index:1000;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipI_RodT8ZCSjLGpWWJ8s491EQFwOewfgYdR4q3FaBMh0kuYV-Qb8eaijYXNMAsA8Yf_aImXTK2nL2dvdqCJvu9MqWV8tFc2f3dV-rNmtSnQK8mleIFRly-_dhA_tc3nB_oDemuKvObMg/s77/prev.png) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1IGDAcdWSDOeOm90rjvHcCGG5EMHg_l6Pd9fpzWBl_wI81JJ3PEDS4uz-cwvdQ6KzZ_C5Afa_c_icSWIxndJCnarIKQoyjR-mZvMNMLMstLTs07YQt6hSeqG1o-v0qCXyGrSJuGEznjU/s77/next.png) no-repeat 0 0;
}
/* numeric controls */
ol#controls{
margin:1em 0;
padding:0;
height:28px;
}
ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/* END
--------------------------------------------------------------------
Easy Slider
--------------------------------------------------------------------
EasySlider
*/


6. Tekan Ctrl+F cari </body>
7. Copy paste kode berikut di atas </body>


<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $("#slider").easySlider({
 auto: true,
 continuous: true
 });
});
//]]>8
</script>


8,  Selesai sudah mengedit template-nya, klik Tata Letak/ Layout
9.  Klik "Add Gadget" >> Pilih HTML/ Javascript
10. Masukkan kode berikut ke dalam formulir Gadget


<div id="slider">
<script style="text/javascript" src="http://pantel.googlecode.com/files/galleryposts-easySlider-min.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="http://www.arkeyes88.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>



** kode merah adalah dimensi slider ...
** kode biru adalah otomasi ...
** kode ungu jumlah posting jika Anda ingin posting acak (false / true)
** ganti warna hijau dengan alamat blog anda sendiri..





PENEMUAN FOTO-FOTO DARI KAMERA TENTARA AMERIKA YANG TEWAS PADA SAAT PERANG DUNIA KE-2


Walaupun sudah berakhir hampir 70 tahun yang lalu, perang dunia kedua masih menimbulkan rasa penasaran yang besar dan masih sangat menarik untuk dipelajari oleh para ahli sejarah.
Seperti yang dilansir dari Viralnova.com, Sabtu (6/12/2014), berbagai barang peninggalan perang dari perang dunia kedua seperti senjata dan alat peperangan lainnya hingga kini masih banyak dicari bahkan diburu oleh orang-orang dari berbagai penjuru dunia.
Seperti dua orang ini yang merupakan sejarahwan dan ahli logam dari amerika,Mark D. Anderson dan Jean Muller. Hingga kini mereka mencari sisa perang dunia kedua yang masih bisa di temukan.
Banyak peninggalan sejarah di temukan mereka, dan yang paling mengejutkan adalah penemuan kamera klasik milik tentara Amerika, Louis J. Archambeau yang tewas pada operasi Ardennes di Luxembourg.
Meskipun puluhan tahun terkubur di kedalaman tanah gambar-gambar hasil dari kamera itu masih bisa di cetak dan di nikmati.

Berikut foto hasil bidikan Louis J. Archambeau dari masa perang dunia kedua:

FOTO 1

FOTO 2


FOTO 3


FOTO 4


FOTO 5


Sumber gambar  : www.distractify.com

MEMBUAT/ MENGEDIT VIDEO DAN MEREKAM GAMBAR DI KOMPUTER


Kadang-kadang kita menginginkan apa yang kita kerjakan di komputer dapat didokumentasi-
kan dan disimpan dalam bentuk file video. Sehingga file video tersebut dapat kita gunakan sewaktu-waktu maupun dapat kita bagikan/ share kepada orang lain.  

Pendokumentasian untuk pembelajaran dalam bentuk video mempermudah dan mempercepat orang lain mengerti apa yang kita ajarkan. Program aplikasi yang akan kita gunakan adalah Aplikasi Camtasia studio v6.03   dari Techsmith.
Pertama-tama jelas lebih dahulu download programnya :
      Link1 :     www.techsmith.com/camtasia/
      Link2 :     mirror
Setelah didownload maka tugas selanjutnya menginstal program aplikasi kedalam komputer kita.
Bila sudah diinstal maka langkah berikutnya adalah memasukkan serial key-nya..
Disini akan diberikan contoh penggunaan aplikasi Camtasia untuk mengedit sebuah file video berekstensi *.mpeg.
1. Buka program aplikasi Camtasia
2. Klik Import Media >> Pilih file video yang akan diedit >> klik Open
arkeyes88.blogspot.com

3. Klik file video, tahan mouse arahkan mouse ke time line

arkeyes88.blogspot.com

4. Klik Title Clips untuk membuat judul pembuka sebelum film dimulai
arkeyes88.blogspot.com

5.  Akan terbuka tampilan seperti berikut ini :
arkeyes88.blogspot.com
6. Ketikkan jiudul klip film di kotak warna hijau, begitu Title Name
arkeyes88.blogspot.com

7. Untuk memasukkan gambar di cover centang tanda panah di "Image" kemudian klik gambar browse
arkeyes88.blogspot.com

8. Bila gambar sudah masuk hasilnya seperti gambar di bawah lalu klik OK

arkeyes88.blogspot.com

9. Klik title klip yang sudah jadi, tahan, kemudian letakkan di ujung sebelah kiri timeline video. Penempatan title klip dengan benar ditandai dengan tanda (+)

arkeyes88.blogspot.com

10. Langkah berikutnya memasukkan CallOut (gambar penunjuk di video) >> Klik "Callouts"

arkeyes88.blogspot.com

11. Klik tombol (+)
arkeyes88.blogspot.com

12. Pilih type Callout, ketikkan tulisan yang anda inginkan

arkeyes88.blogspot.com

13. Maka tampilannya seperti gambar berikut ini >> klik Finished

arkeyes88.blogspot.com

14. Selesai sudah mengeditnya sekarang tinggal memproduksi menjadi file video
      >> Klik tombol "Produce video as"

arkeyes88.blogspot.com

15.Ikuti saja perintahnya klik next

arkeyes88.blogspot.com arkeyes88.blogspot.com arkeyes88.blogspot.com arkeyes88.blogspot.com

16.  Ketikkan nama "Production Name" >>klik Finished

arkeyes88.blogspot.com

17. File Video direndering

arkeyes88.blogspot.com

18. Klik Finish
arkeyes88.blogspot.com


Selesai sudah pelajaran mengedit video  menggunakan Camtasia. Anda bisa mengembangkan sendiri dengan cara trial en error.. Bila ada kesulitan anda bisa mengajukan pertanyaan di kolom komentar.
Selamat Mencoba..