Sunday, 28 September 2014

Membuat Menu Scroll di Blogger


Pada kesempatan kali ini saya akan sedikit berbagi tips bagaimana cara membuat dan memasang menu scrool di blog. Adapun fungsi dan kegunaan menu ini adalah agar daftar list artikel yang kita posting tidak memakan tempat karena lebar dan panjang menu bisa kita sesuaikan dengan lebar space halaman blog. Bagi blogger pemula seperti saya, membuat menu dengan fungsi scroll ini awalnya saya pikir susah, padahal jika kita mengerti bahasa pemrograman, membuat menu seperti ini sangatlah mudah. Untuk penghematan tempat jika anda mempunyai daftar menu yang sangat panjang, menu dengan fungsi scroll ini bisa menjadi solusi yang tepat selain menggunakan marquee atau text berjalan. Dan pembuatan menu ini tidak menggunakan kode HTMLyang banyak dan ribet, hanya sedikit kode HTML, anda sudah bisa membuat menunya. Menu ini bisa juga anda menfaatkan dalam menempatkan blogroll yang panjang atau daftar menu postingan yang anda miliki.

Untuk membuat menunya anda hanya membutuhkan kode HTML seperti ini :
<div style="overflow:auto;width:320px;height:250px;padding:10px;border:1px solid #eee"> 

ISI MENU 

</div>
Keterangan :
  • width --> lebar menu 
  • height --> tinggi menu 
  • padding --> jarak antar tulisan dengan garis pinggir 
  • border --> ketebalan garis pinggir
Tinggal temen-temen kreasikan sendiri sesuai dengan blog anda.

Contoh kode HTML untuk menu yang saya punya :
<div style="overflow:auto;width:310px;height:200px;padding:10px;border:1px solid #eee">

1. <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-multi-level-drop-down-dengan.html">Membuat Multi Level Drop Down dengan jQuery</a>

2. <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-menu-dtree-di-blogger.html">Membuat Menu dTree di Blogger</a>

3. <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-menu-horizontal-animasi-di-blog.html">Membuat Menu Horizontal Animasi di Blog</a>

4. <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-menu-navigasi-horizontal-glossy.html">Membuat Menu Navigasi Horizontal Glossy di Blog</a>

5. <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-effect-jquery-link-nudging-di.html">Membuat Effect JQuery Link Nudging di Blog</a>

6. <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-info-panel-slide-vertikal.html">Membuat Info Panel Slide Vertikal dengan jQuery</a>

7. <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-chatbox-slide-vertikal-dengan.html">Membuat Chatbox Slide Vertikal Dengan jQuery di Blog</a>

8. <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-daftar-isi-dengan-jquery.html">Membuat Daftar Isi Dengan jQuery Accordion</a>

9. <a href="http://creatingwebsite-maskolis.blogspot.com/2011/01/memasang-slider-gambar-ala-drakon.html">Memasang Slider Gambar ala Drakon Template</a>

10.<a href="http://creatingwebsite-maskolis.blogspot.com/2011/01/memasang-gambar-slide-ala-zinmag-primus.html">Memasang Gambar Slide Ala Zinmag Primus</a>

11.<a href="http://creatingwebsite-maskolis.blogspot.com/2011/01/memasang-translate-gambar-bendera-di.html">Memasang Translate Gambar Bendera di Blog</a>

12.<a href="http://creatingwebsite-maskolis.blogspot.com/2011/01/membuat-menu-navigasi-horisontal-dan.html">Membuat Menu Navigasi Horisontal dan Kotak Pencari di Blog</a>

13.<a href="http://creatingwebsite-maskolis.blogspot.com/2011/01/memasang-artikel-berlangganan-di-blog.html">Memasang Artikel Berlangganan di Blog</a>

</div> 

Friday, 26 September 2014

Cara Memasang Status Twitter Diblogger

Twitter merupakan media yang cukup efektif untuk mempromosikan blog atau barang dan jasa karena twitter adalah salah satu social media yang memiliki pengguna terbesar di dunia. Pernahkah Anda melihat sebuah blog memasang status twitternya pada widget? Bagaimana cara memasangnya?

Pada kesempatan kali ini kita akan membahas cara memasang status twitter pada blog, fungsi dari memasang widget status twitter adalah agar pengunjung dapat mengetahui status twitter Admin / official akun blog Anda dan mem-follownya. Berikut simak langkah-langkahnya :

1. Kunjungi https://twitter.com/settings/widgets (login dulu akun twitter Anda).
2. Kemudian klik 'Create New'. 
3. Setelah itu atur tampilan widget yang akan ditampilkan di blog. 
Keterangan :
Username: username akun twitter Anda.
Height: tinggi widget yang akan ditampilkan.
Theme: Light untuk template terang, Dark untuk template yang gelap.
Link color: warna link status twitter.
Domains: isi dengan URL blog Anda.
4. Selanjutnya klik 'Create widget'. 
5. Kemudian copy paste kode widget pada HTML/JavaScript blog Anda.

Nah, sekarang blog Anda sudah terpasang widget status twitter dan pengunjung bisa melihat status twitter Anda lewat blog. 

Wednesday, 3 September 2014

Kata Bijak Terbaru Terpopuler Penuh Inspirasi

Setiap orang pastinya pernah merasakan rasa purus asa, bisa disebabkan oleh rencananya yang gagal ataupun karena cintanya yang ditolak. Apapun penyebabnya, rasa putus asa merupakan kondisi dimana seseorang akan merasakan ketidak nyamanan dan mulai jenuh dalam melakukan rutinitasnya sehari – hari. Biasanya orang yang habis patah hati juga sering mengalami rasa putus asa, sebab mereka masih memikikan mantan yang mereka cintai. Untuk mengatasi rasa putus asa itu sendiri ada banyak caranya, bisa dengan melakukan liburan ataupun yang lainnya. Namun itu semua hanya bersifat sementara, arena liburan biasanya dianggap sebagai pelarian bagi sebagaian orang untuk menghilangkan rasa putus asa mereka. Sebaliknya, bila ingin menghilangkan rasa putus asa dan bangkit dari keterpurukan haruslah ada sesuatu yang dapat menjadi motivasi bagi orang tersebut. Dalm hal ini, solusi terbaik adalah dengan menceramahi orang tersebut menggunakan kata kata bijak. Karena kata kata bijak bersifat memberikan motivasi, serta membangkitkan semangat orang yang sempat down. Sebagai contoh, mereka yang habis ptah hati bisa diberikan kata kata bijak seperti “jika kamu tulus mencintainya, relakan dia bersama orang yang dicintainya”. Untuk contoh kata kata bijak lebih lengkapnya, silahkan simak di bawah ini.
Kata Kata Bijak Menyentuh Hati
  • Kemampuan adalah apa yg dpt anda lakukan.Motivasi menentukan apa yg anda lakukan Sikap menentukan seberapa baik Anda melakukannya.
  • Jangan pernah biarkan kesedihan di masa lalu membuatmu takut tuk menerima seseorang yg baru
  • Luangkan waktumu untuk keluarga. Karena saat dapat berkumpul bersama, itu adalah kebahagiaan yg sempurna.
  • Keikhlasan adalah bukti kesabaran yg sejati.
  • Ketika apa yang kamu inginkan belum tercapai, Tuhan sedang memberitahumu untuk berusaha lebih lagi!
  • Terluka dan memaafkan adalah bagian dari cinta. Karena cinta yg tulus pasti akan ada kata maaf untuknya.
  • Jangan janjikan seorang untuk tetap tinggal jika sifatmu saja membuatnya ingin pergi 
  • Cinta bukan sekedar menunggu tuk dicintai, melainkan juga keberanian untuk mencintai~
  • Cinta akan sempurna ketika saling melengkapi, dan akan indah ketika kita bisa mengasihi.
  • Sahabat yg baik adalah saat mereka dibelakangmu, mereka memotivasimu. Tp saat dia didepanmu, mereka tak akn melupakanmu.
  • Wanita yang tegar slalu mempunyai hati yang sempurna.
  • Cinta yang tulus slalu mempunyai alasan untuk mempertahankan meski sedang diuji dalam cobaan yg mungkin bisa memisahkan.
  • Perjalanan hidup yang indah adalah ketika kita mampu berbagi, bukan menikmatinya sendiri atau bahkan menyombongkan diri.
  • Bukan mereka yg mempunyai segalanya, tapi mereka yg mempunyai hati yg sempurna yg bisa membuatmu benar2 bahagia.
  • Bekerja lah tuk duniamu seakan engkau hidup selamanya, beramal lah tuk akhiratmu seakan esok hari engkau tlah tiada.
  • Kesuksesan bukanlah segalanya, kegagalan hanya proses semata, berbuat yang terbaik adalah yang terutama.
  • Kadang kamu harus mengikhlaskan. Bukan karena tak sayang, melainkan kita tau ada sesuatu yg memang tak bisa dipaksakan.
  • Penyesalan akan hari kemarin, dan ketakutan akan hari esok adalah dua pencuri yg mengambil kbahagiaan saat ini
  • Ketika kamu tulus mencinta, kamu selalu mencintainya meski telah berpisah. Jika tidak, kamu memang dari awal tak mencintainya.
  • Terkadang, tak peduli apapun usaha Anda tuk mengusir seseorang dari pikiran, dia tak pernah meninggalkan hati .
  • Lebih mudah senyum dan bertindak semuanya baik saja ketimbang menjadi berantakan dan menangis, lalu byk org menanyakan mengapa.  #zedquotes”
  • Saat Anda membalas rasa sakit dgn senyuman, saat itulah Anda memastikan bhw diri Anda lbh baik dr org yg menyakiti itu
  • Diam bukan berarti lemah, terkadang kita diam karena kita cukup dewasa untuk menyikapi masalah.
  • Sesibuk²nya seorang pria, pasti akan berusaha menyisakan sedikit waktu u/ dpt menghubungi wanita yg ia cinta. ☺
  • Jangan terlalu lelah untuk mencari, lebih baik belajar menerima dia dengan setulus hati.
  • Bahagia adalah ketika dapat bersama, saling mencinta tanpa mempermasalahkan kekurangan yg kita punya.
  • Senyuman itu seperti perban, menutupi luka, tapi sakitnya masih terasa.
  • Cowok cakep itu gampang dicari. Yang susah; mendapatkan seseorang yg tulus & setia mencintai.
  • Sahabat adalah keindahan jiwa yg dimana bisa memberikan warna ketika hari kita tampak biasa.
  • Masa lalu memang menyimpan banyak kenangan, namun itu bukan alasan tuk tak terus melangkah ke depan.
  • Tegas berbeda jauh dengan kejam. Tegas itu mantap dalam kebijaksana sedangkan kejam itu keras dalam kesewenang-wenangan.
  • Bahagia itu sederhana; mensyukuri, mencintai dan menjaga apa yg kita miliki.
  • Jika cinta, buktikan saja. Jika tak cinta, lebih baik jangan memberi sebuah harapan yg bisa melukainya.
  • Hidup bukan tentang mempermasalahkan sebuah perbedaan, melainkan saling melengkapi kekurangan.
  • Memberi memang mudah, terutama disaat kita memiliki sesuatu dalam keadaan berlebih. Namun “memberi” sesuatu, akan terlihat luar biasa tatkala kita memilikinya hanya satu itu saja, sedangkan kita juga sama-sama membutuhkan.
  • Tidak ada yang salah jika kamu menunjukkan rasa peduli pada seseorang, yangg salah adalah mengharapkan dia untuk melakukan hal yang sama.
  • Kebaikan yang ditanam tak kan pernah berbuah nista. Meskipun adakalanya kebaikan dibalas angkara murka. Dan patut disadari, ranum buahnya akan selalu bisa di petik di surga nanti.
  • Jangan pernah menyerah! Jika Tuhan belum menjawab doamu, itu karena Tuhan punya rencana yg lebih baik tuk hidupmu.
  • Kesenanagan terbesar dalam hidup ini adalah melakukan hal, dimana orang lain menganggap bahwa kita tidak mampu melakukan hal tersebut.
  • Berharap menjadi pribadi yang besar boleh saja. Dan perlu diketahui, awal dari yang besar selalu dibentuk dengan hal-hal kecil dalam diri.
  • Berhenti mencari seseorang yg sempurna tuk dicintai, lebih baik belajar dan persiapkan diri menjadi seorang yg pantas tuk dicintai.
  • Dia yg mengeluh adalah dia yg tak pernah bisa bersyukur, padahal tanpa ia sadari, karunia dari Tuhan telah ia nikmati setiap hari.
  • Jangan rendahkan dirimu untuk mendapatkan sesuatu, tapi rendahkan hatimu untuk berikan sesuatu.
  • Bergembira tatkala mendapatkan buah durian segar yang jatuh dari pohonnya adalah sesuatu yang lumrah. Namun bergembira tatkala mendapatkan buah durian busuk dari tetangga adalah hal yang luar biasa. 
Nah itulah contoh kata kata bijak yang bisa anda gunakan untuk memotivasi diri sendiri ataupun orang lain, selain itu kata kata bijak di atas juga bisa anda jadikan refrensi untuk membuat kata kata bijak ciptaan anda sendiri. Terima kasih telah membaca ulasan kami kali ini, semoga bermanfaat untuk anda. sampai jumpa





Saturday, 13 July 2013

Membuat Menu Horizontal Animasi di Blog By Maskolis

Membuat Menu Horizontal Animasi di Blog By Maskolis

Seperti janji saya pada postingan sebelumnya, saya akan melanjutkan cara memodifikasi menu navigasi horisontal. Saat ini saya memang lagi seneng mengutak-atik template untuk memodifikasi menu horisontal yang ada di blog saya. Tampilan blog yang menarik dan dinamis akan membuat pengunjung lebih betah. Di samping itu kita punya kepuasan sendiri, dari tampilan blog sederhana menjadi tampilan yang kita inginkan. Kali ini saya akan berbagi mengenai cara membuat menu horisontal animasi, silahkan anda menuju kesini untuk melihat contohnya (menu navigasi baris kedua).


Saya tidak akan berpanjang lebar karena sudah ngantuk banget nih, langsung saja perhatikan langkah-langkahnya di bawah ini :
  1. Login ke blogger dengan akun anda 
  2. Kemudian pada dasbor klik  Rancangan  >>  Edit HTML 
  3. Tambahkan kode CSS berikut diatas tag  ]]></b:skin>: 

    .animatedtabs {
    border-bottom: 1px abu-abu padat;
    overflow: hidden;
    width: 100%;
    font-size: 14px; / * Font menu text * /
    }
    .animatedtabs ul {
    list-style-type: none;
    margin: 0;
    margin-left: 10px; / * Offset tab pertama relatif terhadap halaman kiri tepi * /
    padding: 0;
    }
    .animatedtabs li {
    mengapung: kiri;
    margin: 0;
    padding: 0;
    }
    .animatedtabs a {
    mengapung: kiri;
    position: relative;
    top: 5px; / * 1) Jumlah piksel untuk menonjol untuk tab yang dipilih. Harus sama (3) MINUS (2) di bawah * /
    background: tidak mengulang-kiri atas;
    margin: 0;
    margin-right: 3px; / * Jarak antara masing-masing tab * /
    padding: 0 0 0 9px;
    text-decoration: none;
    }
    .animatedtabs rentang {
    mengapung: kiri;
    position: relative;
    display: block;
    background: no-ulangi kanan atas;
    padding: 5px 14px 5px 3px; / * 2) Padding dalam setiap tab. Nilai 3, atau 3px, harus sama (1) MINUS (3) * /
    font-weight: bold;
    warna: hitam;
    }
    / * Komentar Backslash Hack menyembunyikan aturan dari IE5-Mac \ * /
    .animatedtabs rentang {float: none;}
    / * End IE5-Mac hack * /
    .animatedtabs .selected a {
    background-position: 0 -125px;
    top: 0;
    }
    .animatedtabs .selected rentang {
    background-position: 100% -125px;
    warna: hitam;
    padding-bottom: 8px; / * 3) bantalan Bawah tab yang dipilih. Harus sama (1) PLUS (2) di atas * /
    top: 0;
    }
    .animatedtabs a: hover {
    background-position: 0% -125px;
    top: 0;
    }
    .animatedtabs a: hover {rentang
    background-position: 100% -125px;
    padding-bottom: 8px; / * 3) bantalan Bawah tab yang dipilih. Harus sama (1) PLUS (2) di atas * /
    top: 0;
    }
  4. Tambahkan kode HTML berikut diatas atau dibawah <div id='header-wrapper'> atau bisa juga anda tambahkan pada bagian elemen halaman sebagai widget
    <Div class = 'animatedtabs'>
    <Ul>
    <Li> <a href='http://creatingwebsite-maskolis.blogspot.com' title='Home'> <span> Home </ span> </ li>
    <Li> <a href='http://creatingwebsite-maskolis.blogspot.com/search/label/tutorial blog' title='tutorial blog'> <span> Tutorial Blog </ span> </ li >
    <Li> <a href='http://creatingwebsite-maskolis.blogspot.com/search/label/SEO' title='SEO'> <span> SEO </ div> </a> </ li>
    <Li> <a href='http://creatingwebsite-maskolis.blogspot.com/search/label/wordpress' title='wordpress'> <span> Wordpress </ span> </ li>
    <Li> <a href='http://creatingwebsite-maskolis.blogspot.com/search/label/affiliate' title='affiliate'> <span> Afiliasi </ span> </ li> 
    <Li> <a href='http://creatingwebsite-maskolis.blogspot.com/search/label/hosting' title='hosting'> <span> Hosting </ span> </ li>
    </ Ul>
    </ Div>
  5. Simpan template dan lihat hasilnya.
Itu dulu ya teman, maaf kalau tulisannya ada yang salah karena udah ngantuk banget nih. selamat malam dan semoga mimpi indah

Thursday, 11 April 2013

Membuat Menu Navigasi Horizontal dan Kotak Pencari di Blog

Membuat Menu Navigasi Horisontal dan Kotak Pencari di Blog

Menu Navigasi pada blog merupakan elemen yang perlu diperhatikan di dalam sebuah blog yang mementingkan penampilan dan style untuk setiap detilnya. Ada bermacam-macam bentuk menu navigasi di dalam sebuah blog itu, ada menu navigasi horizontal, menu navigasi vertikal atau yang lainya. Selain menggunakan menu horisontal drop down menu, kita juga bisa membuat menu horisontal sederhana (tanpa cabang) ataupun membuat menu horisotal bercabang dengan script css. Seperti yang telah saya buat dalam postingan sebelumnya tentang menu horisontal versi dynamic drive, maka kali ini akan dibuat versi css menu maker. Tampilan menunya bisa dilihat pada gambar di bawah ini.

Untuk membuatnya bisa lakukan posedur berikut:
1.  Login ke menu blogger. Klik Design -> Edit HTML
2.  Backup template anda
3.  Setelah itu, letakkan kode dibawah ini diatas ]]></b:skin>

/*-- (Nav & Search Box) --*/
#nav{
background: #1c426d; /* Warna backgroud Kotak Navigasi */ 
height:31px; /* Tinggi Kotak Navigasi */
padding:0px;
margin-bottom:5px
}
#nav-left{
float:left;
display:inline;
width:580px
}
#nav-right{
float:right;
display:inline;
width:275px;
padding:1px 0px 0px 0px;
}
#nav ul{
position:relative;
overflow:hidden;
padding-left:5px;
padding-top:1px;
margin:0;
font:1.1em /* Ukuran font tab navigasi */ 
Arial,Helvetica,sans-serif;
font-weight: bold;
}
#nav ul li{
float:left;
list-style:none
}
#nav ul li a, #nav ul li a:visited{
display:block;
color:#ffffff; /* Warna teks pada kotak navigasi */
margin:0 8px;
padding:5px 7px
}
#nav ul li a:hover{
color:#ffffff;
background-color:#C4C5B8; /* Warna kotak ketika kursor melintasi teks navigasi */
margin:0 8px;
padding:5px 7px
}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#A6A994; color:#ffffff; padding:5px 7px}
#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #EEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPlLMyF-Bs_jnWBZcdV4VigRsOs3W5WnlK0XNTjzeWYHWTL9JkM_vzKh1uvw2TCAxELxALA0xDFdHMW-Qn3V4j9Os4SWI2_yGAJDQy0wVkdqg9Ss4QPcMAnYlef0ZDghAtC9dnBfJ2r06l/) no-repeat left top;
width: 180px;
height: 16px;
color: #202020;
font-size: 12px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight: normal;
margin: 2px 0px 0px 15px;
padding: 4px 0px 3px 25px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
display: inline;

#searchbutton {
background: #1c426d; /* Warna background tombol pencari */
color: #FFF; /* Warna teks tombol pencari */
font-size: 11px; 
font-family:Verdana,Arial,Helvetica,sans-serif;
margin: 0px;
padding: 3px 0px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}

Keterangan:
Tulisan berwarna merah diatas merupakan keterangan dari masing-masing kode. Silahkan ganti sesuai dengan template anda.

Jika anda ingin mengganti background menu navigasi dengan gambar, maka tambahkan kodeurl(alamat gambar anda) dibelakang kode "warna background kotak navigasi". Contohnya:
background: #1c426d url(http://url-gambar);

4.  Setelah itu cari kode seperti dibawah ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Creating Website (Header)' type='Header'/>
</b:section>
<div style='clear: both'/>
</div>
Cari kode di template anda yang paling mendekati dengan kode diatas

5.  Kalau sudah ketemu, letakkan kode berikut dibawahnya.

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML30' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='250' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;cari artikel disini...&quot;;}' onfocus='if (this.value == &quot;cari artikel disini...&quot;) {this.value = &quot;&quot;}' type='text' value='cari artikel disini...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

6.  Sehingga susunannya menjadi seperti ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Creating Website (Header)' type='Header'/>
</b:section>
<div style='clear: both'/>
</div>

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML30' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='250' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;cari artikel disini...&quot;;}' onfocus='if (this.value == &quot;cari artikel disini...&quot;) {this.value = &quot;&quot;}' type='text' value='cari artikel disini...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

7.  Kalau sudah, Save Template lalu lihat hasilnya.

Jika anda tidak mau menggunakan kotak pencari tinggal hapus kode yang dicetak tebal. Beres. Untuk menambah link pada menu navigasi. Buka menu Page Element lalu klik Edit pada "Top Tabs". Tambahkan link yang ingin anda tampilkan disana.

Selamat mencoba. Semoga bermanfaat.

Saturday, 16 February 2013

Cara Mempercepat Koneksi Internet Super Ampuh Wusss

Cara mempercepat koneksi internet sudah banyak sekali beredar di internet atau khusunya di google, tapi apakah semua cara mempercepta koneksi internet yang bertebaran di google benar-benar ampuh untuk mempercepat koneksi internet Anda ? belum tentu bukan.

Atas dasar itulah, disini saya kan membagikan beberapa Tips atau Cara Mempercepat Koneksi Internet Super Ampuh Wusss  alias benar-benar bekerja, bukan basi.
Mengingat koneksi internet di Indonesia yang bisa dibilang masih jauh tertinggal dengan negara-negara lain, sekedar informasi, bahwa kecepatan internet di negara kita berada di urutan ketiga. Ketiga dari bawah maksud saya, lebih jelasnya silahkan lihat infographic dari situs techinasia.com ini.
berikut peringkat kecepatan internet negara asia:
Cara Mempercepat Koneksi Internet
Kecepatan Rata-rata Koneksi  Internet Tiap Negara di Asean

Melihat fenomena tersebut, tidak ada salahnya memanfaatkan kekreatifitasan kita untuk menambah 'sendiri' kecepatan internet yang ada di modem kita.

Menurut survey juga, banyak anak yang merasa frustasi akibat kecepatan internet yang lemot, dan ujung-ujungnya si anak malas untuk ngeblog dan parahnya lagi jadi malas juga googling untuk menyelesaikan tugas dia, masihkan pantaskah jika ada seseorang yang mengatakan 'kalau internetnya cepat mau buat apa ?' semua saya kembalikan ke Anda.

Oke, kita kembali ke Topik. Bicara tentang cara mempercepat koneksi internet, sejujurnya ada banyak sekali cara yang bisa kita lakukan untuk menambah kecepatan internet kita, tapi kembali lagi sesuai judul diatas, saya hanya akan berbagi Cara Mempercepat Koneksi Internet yang hanya terbukti saja, jadi yang belum di tes saya tidak akan bagikan.

Setidaknya ada 7 Cara yang benar-benar terbukti utnuk meningkatkan kecepatan koneksi internet.

  1. Cara Mempercepat Koneksi Internet dengan menggunakan Proxy
  2. Cara Mempercepat Koneksi Internet dengan mengubah Port
  3. Cara Mempercepat Koneksi Internet dengan mengubah Bandwith
  4. Cara Mempercepat Koneksi Internet dengan mengganti DNS
  5. Cara Mempercepat Koneksi Internet dengan mengaktifkan DNS Cache
  6. Cara Mempercepat Koneksi Internet dengan melakukan Tweak cpipParameter
  7. Cara Mempercepat Koneksi Internet dengan mengubah Prioritas ISP

Langsung saja kita masuk pada pembahasan pertama mengenai cara mempercepat koneksi internet yang benar-benar work.


1. Cara Mempercepat Koneksi Internet dengan menggunakan Proxy


Akhir-akhir ini saya lihat banyak sekali teman-teman facebook saya yang membicarakan proxy, spontan saya tanya kepada mereka apa itu proxy dan fungsinya, mereka menjawab secara garis besar proxy adalah server yang menyediakan sebuah layana untuk meneruskan setiap permintaan kita kepada server lain di internet. Dan fungsi dari Proxy ini ya untuk mempercepat koneksi internet kita yang mayoritas kita kan mengakses server luar, seperti Blogger, Facebook, Twitter dan lain-lain.

Lalu bagaimana cara menggunakan proxy untuk mempercepat koneksi internet ?

  • Masuk ke Control Panel lalu pilih Network and Internet

    Cara Mempercepat Koneksi Internet gambar 1
    Cara Mempercepat Koneksi Internet (Gambar: 1)
  • Lanjutkan dengan mengklik Internet Option
  • Setelah malakukan klik pada Internet Option, maka Anda akan dibawa ke tab Internet Properties. Pada tab ini silahkan Anda klik Connections lalu double klik pada nama operator yang sedang Anda gunakan, dalam contoh ini saya menggunakan Indosat.

    Cara Mempercepat Koneksi Internet gambar 2
    Cara Mempercepat Koneksi Internet (Gambar: 2)

    Disinilah tempat Anda mengubah Proxy untuk mendapatkan kecepatan koneksi yang lebih cepat.

Cepat atau Tidaknya, Pengaruh atau Tidaknya, semua itu tergantung dengan proxy yang akan Anda pakai, jika menggunakan proxy premium jelas kecepatan yang akan Anda dapat akan jauh lebih cepat ketimbang proxy gratisan yang banyak beredar di Internet.


2. Cara Mempercepat Koneksi Internet dengan mengubah Port


Untuk melakukan pengubahan port, caranya tidaklah sama dengan mengubah Proxy, karena disini kita akan mengubah port komputer bukan port koneksi, caranya adalah sebagai berikut.

  • Buka Control Panel, lalu klik Hardware and Sound, dan pilih Device Manager

    Cara Mempercepat Koneksi Internet gambar 3
    Cara Mempercepat Koneksi Internet (Gambar: 3)
  • Klik pada Port (COM & LPT) lalu Double klik pada masing-masing port, di tab Port Setting silahkan Anda ubah setting bits per second menjadi 128000 dan ubah juga Flow Control menjadi Hardware. Lakukan hal ini untuk setiap port yang ada.

Dengan mengubah bit per second dari 115200 menjadi 128000 tentu saja hal ini akan membuat kecepetan membaca atau membuat 10% lebih cepat dari sebelumnya.


3. Cara Mempercepat Koneksi Internet dengan mengubah Bandwith


Perlu Anda ketahui, di setiap komputer yang bersistem operasi Windows, default dari bandwith itu sendiri dibatasi sebesar 80% atau dengan kata lain 20% Banwith sudah dipesan untuk Windows, dan untuk mengubahnya menjadi 100% atau memaksimalkannya, dibutuhkan sedikit perubahan gpedit. Caranya adalah sebagi berikut :

  • Ketik Win + R ( tombol dengan gambar Windows + tombol R ) lanjut dengan mengetikkan gpedit.mscdan klik Ok.
  • Lanjut dengan memilih Computer Configuration - Administrative Templates - Network - QoS Packet Scheduler

    Cara Mempercepat Koneksi Internet gambar 4
    Cara Mempercepat Koneksi Internet (Gambar: 4)
  • Double klik pada Limit Reservable Bandwidth, pilih menu Enable dan isi Bandwith limit dengan nilai 0

    Cara Mempercepat Koneksi Internet gambar 5
    Cara Mempercepat Koneksi Internet (Gambar: 5)
  • Terakhir, restar komputer Anda.

Saat saya menjadikan bandwith menjadi 100%, sejauh ini tidak ada masalah (gangguan) yang rasakan pada windows saya, justru, kecepatan koneksi meningkat menjadi Full Speed.


4. Cara Mempercepat Koneksi Internet dengan mengganti DNS


DNS atau Domain Name Server adalah sebuah sistem yang menyimpan informasi tentang nama host, jadi setiap host akan disimpan oleh DNS. Secara umum DNS yang ada di modem kita biasanya OFF, jadi disini kita akan menyalakannya, dengan tujuan untuk menyimpan nama-nama host.

  • Untuk mengaktifkan DNS cukup mudah, silahkan Anda masuk ke View Network Connection, biar mudah ketikkan saja di fitur pencarian yang ada di Windows 8, setelah tab Network Connection terbuka double klik pada operator yang sedang aktif atau sedang kamu gunakan.
    Di Windows 8
    Cara Mempercepat Koneksi Internet gambar 6
    Cara Mempercepat Koneksi Internet (Gambar: 6)
  • Lanjutkan dengan klik Properies - Network - Properties dan Isi DNS yang sudah Anda dapatkan sebelumnya, jika belum punya Anda bisa menggunakan DNS Google Public : 8.8.8.8 (isi pada kolom pertama) dan 8.8.4.4 (isi pada kolom kedua).

    Cara Mempercepat Koneksi Internet gambar 7
    Cara Mempercepat Koneksi Internet (Gambar: 7)

DNS mungkin tidak akan berpengaruh pada semua website, hanya web-web tertentu saja yang akan Anda rasakan lebih cepat, misalnya kalau DNS Google, maka saat Anda mengakses google nanti, akan jauh lebih cepat, karena host sudah tersiman di dalam DNS tersebut.


5. Cara Mempercepat Koneksi Internet dengan mengaktifkan DNS Cache


DNS Cache memiliki fungsi yang sama persi dengan DNS diatas, yang membedakan disini adalah, pada tahap ini kita akan mengaktifkan settingan DNS cache pada regedit, caranya adalah sebagai berikut.

  • Buka Notepad
  • Copy lalu Pastekan kode dibawah ini :

    [HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\Dnscache\Parameters]
    "CacheHashTableBucketSize"=dword:00000001
    "CacheHashTableSize"=dword:00000180
    "MaxCacheEntryTtlLimit"=dword:0000fa00
    "MaxSOACacheEntryTtlLimit"=dword:0000012d
  • Lalu simpan dengan nama dnscache.reg
  • Double klik pada file tersebut untuk menjalankannya, dan mengaktifkan DNS Cache

Yang perlu dicatat adalah, DNS Cache tidak membuat laptop lemot, karena ukuran host yang disimpan sangatlah kecil.


6. Cara Mempercepat Koneksi Internet dengan melakukan Tweak cpipParameter


Cara yang satu ini, sangatlah cocok sekali untuk pengguna jaringan Internet Broadband. Dimana kecepatan internet yang Anda dapat bisa jauh lebih cepat.

Sama seperti saat mengatifkan DNS Cache, untuk melakukan Tweak pada cpipParameter, caranya cukup mudah juga.

  • Buka Text Editor (notepad atau yang lain)
  • Pastekan perintah dibawah ini kedalam Text Editor

    [HKEY_LOCAL_MACHINESYSTEMCurrentControlSetServicesT cpipParameters]
    “SackOpts” = dword: 00000001
    “TcpWindowSize” = dword: 0005ae4c
    “Tcp1323Opts” = dword: 00000003
    “DefaultTTL” = dword: 00000040
    “EnablePMTUBHDetect” = dword: 00000000
    “EnablePMTUDiscovery” = dword: 00000001
    “GlobalMaxTcpWindowSize” = dword: 0005ae4c
  • Simpan dengan nama cpip.reg
  • Jalankan file tersebut

Rasakan perbedaanya, melakukan tweaking cpipParameter yang saya rasakan benar-benar ampuh.


7. Cara Mempercepat Koneksi Internet dengan mengubah Prioritas ISP


Disini kita akan memperitoritaskan ISP dengan mengubah nilai dari priority-nya menjadi 1, caranya cukup mudah.

  • Buka Run dengan cara ketik Win + R
  • Ketik Regedit dan Enter
  • AksesHKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\Tcpip\ServiceProvider
  • Lalu ubah nilai key dibawah ini menjadi 1

    DnsPriority=1
    HostsPriority=1
    LocalPriority=1
    NetbtPriority=1
     

Pastikan Anda melakukan backup terlebih dahulu, untuk meminimalisir hal-hal yang tidak diinginkan, caranya dengan membuka System Restore. saya sudah mengetest keseluruhan caranya, dan terbilang terbukti koputer saya lebih kenceng dari sebelumya.

Tips atau cara mempercepat koneksi internet diatas benar-benar sudah terbukti ampuh, jadi jangan tanyakan lagi ampuh atau tidaknya cara mempercepat koneksi internet diatas. Walaupun semua itu sebenarnya hanya berfungsi untuk mempercepat koneksi yang lemot dan bukan untuk melampaui batas kecepatan internet yang ditetapkan tiap ISP.

Artikel cara mempercepat koneksi internet diatas bisa diaplikasikan untuk windows 7 maupun windows 8, namun pada tutorial diatas saya mencontohkan kepada Anda dengan menggunakan windows 8.

Itu saja dari, akhir kata saya ucapkan terimakasih banyak sudah bersedia membaca 7 Cara Mempercepat Koneksi Internet Yang Terbukti Ampuh, selamat mencoba dan semoga berhasil. Jika ada yang kurang jelas, silahkan tanyakan di kolomkomentar.

Monday, 31 December 2012

Membuat Slider Carousel Otomatis Berdasarkan Label

Membuat Slider Carousel Otomatis Berdasarkan Label

Tutorial kali ini saya akan membahas bagaimana membuat slider Carousel otomatis berdasarkan label. Prinsip kerja dari slider ini sama seperti pada slider otomatis berdasarkan kategori. Anda tinggal mengganti dengan label anda dan slider ini akan bekerja sesuai dengan label yang anda masukkan. Slider Carousel yang saya buat kali ini sangat sederhana dan hanya menggunakanjCarousellite script tanpa menambahkan efek easing dan mousewheel.



Cara pemasangannyapun sangat mudah, jika anda sudah pernah mempraktekkan artikel saya terdahulu yang berjudul membuat slider otomatis berdasarkan kategori tertentu, tutorial kali ini terasa sangat mudah, karena langkah-langkah pembuatannya hampir sama. Langsung saja di bawah ini langkah-langkah untuk membuatnya :
  1. Login ke blogger dengan akun Anda
  2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
  3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
  4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
  5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
    Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.
  6. Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode</head> :
    Keterangan :
    Perhatikan URL script warna merah diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.jswalaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satujQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
    Sedangkan kode warna biru : 15 adalah jumlah slider yang ditampilkan. Dan news adalah label yang ditampilkan pada slider nantinya (Ingat besar kecil huruf harus sama dengan label yang sudah Anda buat).
  7. Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini diatasnya :
    Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer. 
  8. Langkah terakhir, save templates dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.
Sangat mudah ya, anda tinggal ikuti langkah-langkah diatas dan baca dengan teliti jangan terburu-buru, Jika masih ada yang kurang jelas silahkan tinggalkan pesan pada kotak komentar yang ada di bawah. Itu tadi tutorial singkat tentang bagaimana cara membuat slider Carousel otomatis berdasarkan kategori atau label kali ini, selamat mencoba dan semoga bermanfaat.

Tutorial Membuat Slider Carousel Otomatis Versi 2