Tutorial Install JomSocial Indonesia

Tutorial Install JomSocial Indonesia - Cara Install JomSocial 2.5 / Versi Selanjutnya. Pada dasarnya menginstall Jomsocial masih sama dengan cara menginstall CMS Jomla pada umumnya. Oke, lebih baiknya mungkin anda bisa menyimak gambar-gambar berikut ini :

Tutorial Install JomSocial Indonesia

Sebelumnya Anda harus sudah menginstall joomla terlebih dahulu, sehingga nantinya akan bisa memanfaatkan JomSocial ini.

1. Setelah Anda download jomSocial silahkan extrak All dahulu

2. Misalnya anda ingin menggunakan com_community_[version].zip' untuk installanya

3. Silahkan Anda install seperti biasanya yang seperti pada di joomla, anda bisa menggunakan XAMPP /localhost jika ingin mengeditnya dulu atau langsung anda upload pada Hosting.

Oke, sekarang kita lanjut ke Tahap selanjutnya dalam penginstalan di hosting.

1. Silahkan Log in ke Administrator Area dan menuju ke Site > Sistem Information > Directory Permission 

2. Kemudian silahkan ke Extention Manager dan broser file kamu yang sudah unzip tadi

3. Silahkan Anda pilih Next > Next beberapa kali

Alternative Install JomSocial
1. Extrak Comunity Joomla/ file yang sudah Di Download tadi...

2. Kemudial Upload lewat FTP Client misal menggunakan FileZille

3.  Pilih Extension Manager

Selesai

Jika anda berhasil maka akan tampil seperti ini.

Semoga Bermanfaat

+++++++++++++++++++++++++++++++++++++++++++++++++

Continue

Download Template Blog Maintenance Part 2

Template Blog Maintenance - Download template blog 'Site Underconstruction' atau blog dalam perbaikan/ maintenance. Bagi anda yang sedang membenahi blognya atau memang masih baru membuat blog dan belum siap tampil, anda bisa memakai template berikut ini untuk membuat pelanggan atau pengunjung blog anda tidak ngacir.

Download Template Blog Maintenance

Tampilannya template yang akan anda dapatkan adalah seperti diatas, berminat..?? silahkan Anda Download Template Blog Maintenance secara Gratis.

Download : Click here

Continue

Download Template Blog Maintenance Part 1

Download Template Blog Maintenance Part 1 - Template Blog untuk tampilan Maintenance / perbaikan. Tampilan blog anda masih dalam perancangan atau masih pilih-pilih template, gunakan template berikut ini yang tentunya gratis 100% untuk anda pergunakan dan modifikasi.

Download Template Blog Maintenance Part 1

Silahkan anda mencobanya di blog anda jika memang blog anda masih dalam tahap perbaikan.

Download  : Click here

Continue

Cara Membuat Multi Menu Horizontal Drop Down Di Blog

Kali ini saya akan membahas Cara Membuat Multi Menu Horizontal Drop Down Di Blog, menu yang satu ini berbeda dengan menu drop down lainnya, yang satu ini menu drop down nya bisa bercabang lagi lebih banyak, menu ini lumayan bermanfaat bagi anda yang ingin menyimpan link yang cukup banyak.

Cara Membuat Multi Menu Drop Down :

1. Login ke Blog kamu.

2. Pilih Menu Edit HTML, cari kode ]]></b:skin>

3. Setelah ketemu letakan kode di bawah ini tepat di atas kode nomor 3.

.ddsmoothmenu{ font: bold 12px Verdana; background: #414141; /*background of menu bar (default state)*/ width: 100%; } .ddsmoothmenu ul{ z-index:100; margin: 0; padding: 0; list-style-type: none; } /*Top level list items*/ .ddsmoothmenu ul li{ position: relative; display: inline; float: left; } /*Top level menu link items style*/ .ddsmoothmenu ul li a{ display: block; background: #414141; /*background of menu items (default state)*/ color: white; padding: 8px 10px; border-right: 1px solid #778; color: #2d2b2b; text-decoration: none; } * html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ display: inline-block; } .ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{ color: white; } .ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/ background: black; color: white; } .ddsmoothmenu ul li a:hover{ background: black; /*background of menu items during onmouseover (hover state)*/ color: white; } /*1st sub level menu*/ .ddsmoothmenu ul li ul{ position: absolute; left: 0; display: none; /*collapse all sub menus to begin with*/ visibility: hidden; } /*Sub level menu list items (undo style from Top level List Items)*/ .ddsmoothmenu ul li ul li{ display: list-item; float: none; } /*All subsequent sub menu levels vertical offset after 1st level sub menu */ .ddsmoothmenu ul li ul li ul{ top: 0; } /* Sub level menu links style */ .ddsmoothmenu ul li ul li a{ font: normal 13px Verdana; width: 160px; /*width of sub menus*/ padding: 5px; margin: 0; border-top-width: 0; border-bottom: 1px solid gray; } /* Holly Hack for IE \*/ * html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/ /* ######### CSS classes applied to down and right arrow images ######### */ .downarrowclass{ position: absolute; top: 12px; right: 7px; } .rightarrowclass{ position: absolute; top: 6px; right: 5px; } /* ######### CSS for shadow added to sub menus ######### */ .ddshadow{ position: absolute; left: 0; top: 0; width: 0; height: 0; background: silver; } .toplevelshadow{ /*shadow opacity. Doesn't work in IE*/ opacity: 0.8; }

4. Selanjutnya cari kode </head>,setelah ketemu letakan script di bawah ini tepat di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script src='http://btemplatescripts.googlecode.com/files/ddsmoothmenu.txt' type='text/javascript'/>

5. Selanjutnya cari kode yang mirip dengan kode di bawah ini.

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Web Design | IT Information (Header)' type='Header'/>

</b:section>

</div>

Kode di atas merupakan kode bagian Header dan untuk yang berwarna merah biasanya itu adalah judul header blog anda, jadi cari saja kode yang mirip kayak di atas. Dan setelah ketemu letakan kode di bawah ini tepat di bawah kode bagian akhir kode header di atas (letakan tepat di bawah kode yang berwarna biru).

<div class='ddsmoothmenu' id='smoothmenu1'><ul><li><a href='http://webikhwan.blogspot.com/'>Item 1</a></li><li><a href='#'>Folder 0</a><ul><li><a href='#'>Sub Item 1.1</a></li><li><a href='#'>Sub Item 1.2</a></li><li><a href='#'>Sub Item 1.3</a></li><li><a href='#'>Sub Item 1.4</a></li><li><a href='#'>Sub Item 1.2</a></li><li><a href='#'>Sub Item 1.3</a></li><li><a href='#'>Sub Item 1.4</a></li></ul></li><li><a href='#'>Folder 1</a><ul><li><a href='#'>Sub Item 1.1</a></li><li><a href='#'>Sub Item 1.2</a></li><li><a href='#'>Sub Item 1.3</a></li><li><a href='#'>Sub Item 1.4</a></li><li><a href='#'>Sub Item 1.2</a></li><li><a href='#'>Sub Item 1.3</a></li><li><a href='#'>Sub Item 1.4</a></li></ul></li><li><a href='#'>Item 3</a></li><li><a href='#'>Folder 2</a><ul><li><a href='#'>Sub Item 2.1</a></li><li><a href='#'>Folder 2.1</a><ul><li><a href='#'>Sub Item 2.1.1</a></li><li><a href='#'>Sub Item 2.1.2</a></li><li><a href='#'>Folder 3.1.1</a><ul><li><a href='#'>Sub Item 3.1.1.1</a></li><li><a href='#'>Sub Item 3.1.1.2</a></li><li><a href='#'>Sub Item 3.1.1.3</a></li><li><a href='#'>Sub Item 3.1.1.4</a></li><li><a href='#'>Sub Item 3.1.1.5</a></li></ul></li><li><a href='#'>Sub Item 2.1.4</a></li></ul></li></ul></li><li><a href='http://webikhwan.blogspot.com/'>Item 4</a></li></ul><br style='clear: left'/></div>

Klik dulu PERTINJAUAN sebelum di SAVE untuk menentukan berhasil atau gagal.

Continue

Cara Membuat Menu Diatas Header Blog

Dengan Membuat Menu Diatas Header Blog, Kita bisa menaruh link lebih banyak lagi di blog, dan dari segi keindahan juga tampilan menu diatas header ini membuat blog kelihatan lebih menarik.

Ikuti Langkah-Langkah Berikut :

-Login ke akun Blogger anda:
-Klik Rancangan

-Edit HTML
-Centang Expand Template Widget
Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya.


/*The top Menu*/
#top{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
border-bottom:1px solid #373127;
}
#top-wrap{
margin:auto;
padding: 0;
width: 960px;
background:#000000;
}
#navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: georgia; font-weight:bold; font-size:10px;display:block;padding:10px 10px;color:#fff;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}
/*The top Menu*/
#med{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
}
#med-wrap{
margin:auto;
padding: 0;
width: 960px;
}
.mednav ul {list-style:none;margin:0;padding:0px; float:left;}
.mednav li {float:left;margin:0;text-align:center;}
.mednav li a {font-family: georgia; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#000000;text-decoration:none; text-transform:lowercase;}
.mednav li a {background:none; }
.mednav li a:hover, li a:focus, li a:active {text-decoration:underline; color:#000000;}
#navbar-iframe {
display: none !important;
}


cari lagi kode </head> dan letakkan kode brikut dibawahnya:

<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='url / link homepage '>home</a></li>
<li><a href='url / link 1'>judul link</a></li>
<li><a href='url / link 2'>judul link</a></li>
<li><a href='url / link 3'>judul link</a></li>
<li><a href='url / link 4'>judul link</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>

Setelah itu simpan template dan Lihat Hasilnya.

Continue