Arz Docs

Kali ini saya akan membahas tentang cara mengganti template blogspot kita supaya terlihat lebih menarik. caranya sangantlah mudah, tinggal memasang template blogspot baru yang bisa anda download di postingan saya pada free blog template. Ok, langsung saja ikuti langkah-langkah berikut.

1. Download dulu template yang kamu inginkan disini

2. Extract file tersebut menggunakan winzip/winrar, nanti akan muncul folder baru yang isinya file dengan extension .xml

3. Login di http://www.blogger.com

4. Klik Layout

5. Jika sebelumnya kamu memasang widget entah itu javascript, text, adsense atau yang lainnya, kamu copy dulu di notepad untuk disimpan dengan cara klik edit pada widget yang ingin disimpan. Karena saat memasang template baru semua widget akan dihapus.

3. Selanjutnya klik Edit HTML

4. Nanti akan terlihat link "Download full template" , klik saja untuk menyimpan template yang lama

5. Setelah itu klik browse, arahkan pada file dengan extension .xml yang telah kamu download tadi kemudian klik upload

6. Akan tampil pesan yang akan menghapus widget kamu, klik confirm & save karena sebelumnya sudah disimpan di notepad.

Nah.... sekarang coba liat blog kamu, templatenya sudah berubah menjadi baru dan lebih menarik. O iya, Jangan lupa memasang kembali widget yang telah disimpan tadi. OK

Posted in: Tutorial Blog

Tuesday, January 25, 2011

Cara Membuat Widget SMS Gratis di Blog

11:54 PM

Ariawan

Kita semua sudah memasuki zaman modern, tapi apa gunanya zaman modern apabila kita tidak bisa mengelolanya, tetapi ada juga teman-teman kita diluar sana yang belum menikmati bagaimana rasanya berada di zaman modern seperti saat ini.

Weh-weh gombal banget yach, yah udah dech langsung aja kita bahas, nah kita kan udah berada di zaman modern, tapi untuk apa ada zaman modern kalau kita tidak bisa memanfaatkannya, banyak orang yang memposisi negatifkan hal itu.

Weh-weh gombal lagi, oke dech kita langsung masuk ke materi, Enggak ada uang...??? Enggak ada pulsa...??? Mau SMS-an...??? (Oh tidak bisa) (^_^)

Gampang kalau kita tidak mempunyai pulsa yang cukup, kita masih bisa SMS-an dengan seseorang... Caranya cukup gampang koq, anda tinggal memasang widget SMS Gratis di Blog anda... Selain dengan cara itu, anda juga bisa mendapat trafic yang lumayan, karena para korban yang kehabisan pulsa bisa membuka Blog anda untuk mengirim SMS Gratis lewat Blog anda (yang sudah di pasang widget SMS gratis)

Jika anda memang berniat ingin memasangnya anda tinggal mengcopy script di bawah ini :

<iframe
name="I2" src="http://sms-online.web.id/widget"style="border: 1px solid
rgb(255, 255, 255);" frameborder="0" height="264" scrolling="no"
width="84%"> not support</iframe><br
/><small><center><a
href='alamat blog anda'
rel='nofollow'>Make
Widget</a></center></small><br />

Anda bisa mengubah tulisan alamat blog anda dengan alamat yang anda inginkan, anda juga bisa mengatur lebar dan tingginya, yaitu dengan cara merubah height(tinggi) dan width(lebar)

Untuk cara memasangnya juga sangat gampang koq, anda tinggal mengikuti cara-cara di bawah ini :

Silakan login ke blogger
Pilih tata letak
Tambah widget baru
Setelah itu kamiu pilih
Edit HTML/Javascript
Paste kan kode yang sudah kamu copy tadi

Cukup gampang untuk di praktekkan... Semoga bermanfaat...

Sumber: http://www.dalleboy.co.cc

Posted in: Tutorial Blog

Cbox.ws Pengganti Shoutbox Shoutmix

12:00 AM

Ariawan

Baru-baru ini muncul permasalahan dari pelayanan shoutbox shoutmix.com yang tidak memunculkan link untuk member basic shoutmix. Ternyata pihak shoutmix ingin meningkatkan kepopuleran website shoutmix, untuk memunculkan link di pesan, Anda harus log in ke website shoutmix terlebih dahulu.
Para blogger yang menggunakan fasilitas shoutmix pun merasa kurang nyaman karena susahnya jika ingin meningkatkan traffic blog melalui meninggalkan jejak di shoutbox (blogwalking).

Nah apakah ada pengganti Shoutmix untuk pelayanan free shoutbox yang masih bisa untuk nge-link?

Yaitu Cbox.ws, iya benar cbox.ws adalah layanan free shoutbox untuk blogger yang masih bisa untuk menampilkan link. Tak kalah dengan shoutmix, cbox.ws ini memiliki fitur yang sama seperti shoutmix.

Apakah Anda ingin mencoba cbox.ws?

caranya cukup mudah Anda tinggal masuk ke website www.cbox.ws lalu ikuti panduan untuk membuat shoutbox cbox.ws gratis.

Nah sedikit ulasan tentang shoutbox yang lebih nyaman dipakai jika Anda ingin bisa memunculkan link kedalam shoutbox Anda.

Sekian semoga bermanfaat

Posted in: Tutorial Blog

Saturday, January 22, 2011

Mengganti Background Blog Dengan CSS

10:02 PM

Ariawan

Background atau latar belakang pada blog adalah bagian yang paling dasar pada blog, banyak template blog yang sama yang banyak dipakai, maka untuk memberi ciri khas pada blog Anda hal yang paling dasar dan yang paling mudah adalah mengganti warna background pada blog Anda atau dengan tambahan gambar pada background blog Anda.
Kali ini Saya akan menulis tutorial singkat blogspot tentang mengganti background dengan CSS, Mau tau caranya?
perhatikan dibawah ini.

Langkah pertama adalah masuk menu Layout (tata letak) kemudian masuk menu Edit HTML

Lalu cari CSS dari body seperti dibawah ini

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Kalau mau mencari CSS diatas perhatikan code yang berwarna hijau saja.

perhatikan Code CSS background diatas
$bgcolor adalah variabel definisi, jika Anda ingin menggantinya bisa dengan code warna misalnya ganti dengan warna putih code warnanya adalah : #FFFFFF atau warna hitam #000000. Atau warna yang lain bisa dilihat disini.

Mengganti background blog dengan gambar :

untuk membuat background gambar kita perlu sebuah gambar yang sudah diupload di hosting. Atau Anda bisa mencari di google image search dan copy URL gambarnya.
Kalu sudah tersedia gambar yang mau dijadikan background perhatikan dibawah ini.

background:#FFFFFF url(URL_GAMBAR) ;

URL_GAMBAR ini bisa Anda ganti dengan URL gambar yang Anda pilih misalnya gambar :

back

URLnya : http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg

Mengatur Background Gambar

background:#FFFFFF url(URL_GAMBAR) no-repeat top left;

no-repeat : berarti gambar didak akan mengulang, Bisa Anda ganti dengan

repeat : Mengulang-ulang gambar
repeat-x : mengulang secara horizontal
repeat-y : Mengulang secara vertikal

top left : Adalah posisi background bisa anda ganti misalnya bottom right

sedikit tambahan jika Anda mau mencari koleksi background

http://www.patterncooler.com/
http://www.bgpatterns.com/
http://patterns.ava7.com/

Nah sekian tutorial mengganti background blog, sedikit semoga membantu Anda.

Sumber:
http://tutorial-jitu.blogspot.com/

Posted in: Tutorial Blog

Membuat Tepi Gambar Bershadow Dengan CSS 3

9:58 PM

Ariawan

CSS 3 adalah generasi CSS (Cascading Style Sheet) yang ke 3, banyak keunggulan CSS 3 dibandingkan generasi yang sebelumnya, dan sudah mulai digunakan browser-browser, yaitu diantaranya adalah Mozilla Firefox v 3.6 dan Safari V 3, semoga saja browser-browser lainya menyusul untuk mendukung CSS 3.

Nah sebenarnya topik kita kali ini adalah "Membuat image post blogger berbayang/shadow" dengan menggunakan CSS 3, terlihat seperti gambar di samping kiri. Nah bagaimana caranya? silahkan ikuti langkah-langkah dibawah ini dan buktikan kecanggihan CSS 3.

Setelah Log In ke blogger pada dashboard masuk pada bagian "Design" lalu ke "Edit HTML"

lalu cari code CSS dibawah ini

.post img {
- - -
- - -
}

Note :

Perhatikan saja code yang berwarna merah diatas, karena garis ( - - - ) yang berwarna hijau adalah definisi CSS yang berbeda-beda setiap template
Dan kadang code yang berwarna merah ada tambahanya sehingga seperti ini : .post img, table.tr-caption-container {

Nah kalau sudah ganti code CSS tadi dengan definisi seperti dibawah ini

.post img {
background:#FFFFFF;
border:1px solid $bordercolor;
padding: 7px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

Nah yang diganti adalah code CSS yang berwarna hijau saja.

kalau sudah lalu SAVE deh, dan lihat hasilnya di browser Mozilla v 3.6, Safari V 3 dan Google Chrome.

Sekian semoga bermanfaat.

Sumber:
http://tutorial-jitu.blogspot.com

Posted in: Tutorial Blog

Mengatur Link di Blog

9:51 PM

Ariawan

Kali ini saya akan membahas tentang warna font link, warna link jika pointer diarahkan, warna link yang sudah dikunjungi dan lain-lain
langsung saja tanpa basa-basi lagi karena sudah cape' basa-basinya :D

Masuk menu Layout kemudian masuk ke Edit HTML kemudian cari Code CSS seperti dibawah ini

a:link {
color:#346ba4;
text-decoration:underline;
}
a:visited {
color:#800000;
text-decoration:underline;
}
a:hover {
color:#56b9ff;
text-decoration:underline;
}

Nah jik anda ingin mengotak-atik akan saya terangkan dibawah ini..

a:link { <<<-- Link aktif
color:#346ba4; <<<---- Ini adalah warna Link aktif yang belum tersentuh apapun text-decoration:underline;
}
a:visited { <<-- Link jika sudah dibuka/diklik
color:#800000; <<<--- Ini adalah warna Link jika URLnya sudah pernah dikunjungi text-decoration:underline;
}
a:hover { <<--Link jika pointer berada pada Link
color:#56b9ff; <<<--- Ini adalah ini adalah warna jika Pointer diarahkan pada Link text-decoration:underline;
}

Ganti tulisan yang berwarna merah dengan code warna yang anda sukai, Untuk code warna anda bisa cari di DISINI.
Tulisan yang tercetak biru diatas menandakan Link bergaris bawah anda bisa merubah menjadi tidak bergaris bawah dengan mengganti tulian underline menjadi none

Jika anda ingin mengatur Link Postingan anda berbeda dengan yang lain tambahkan Code CSS dibawah ini

#main .post-body a:link{
color:#346ba4;
text-decoration:underline;
}
#main .post-body a:visited{
color:#800000;
text-decoration:underline;
}
#main .post-body a:hover{
color:#56b9ff;
text-decoration:none;
}

Rubahlah sesuai keinginan kamu seperti cara diatas tadi

Jika gambar anda juga terinfeksi link dan anda juga ingin merubah tampilan jika pointer diarahkan pada gambar tambahkan Code Css dibawah ini

a img{ border-width:0}
.post-body img{ margin:5px; border:1px solid #444}

Jika Anda Ingin mengatur Link main wrapper/Link dibawah postingan dan juga diatas yang biasanya memberikan informasi Label, Komentar, Author dan lain-lain tambahkan Code Css Dibawah ini

#main-wrapper a:link{
color:#c13a10;
text-decoration:none;
}
#main-wrapper a:visited{
color:#800000;
text-decoration:none;
}
#main-wrapper a:hover{
color:#800000;
text-decoration:underline;
}

Jadi Tampilan Css Jika Lengkap seperti Dibawah ini

a:link {
color:#346ba4;
text-decoration:none;
}
a:visited {
color:#800000;
text-decoration:none;
}
a:hover {
color:#56b9ff;
text-decoration:underline;
}
#main .post-body a:link{
color:#346ba4;
text-decoration:underline;
}
#main .post-body a:visited{
color:#800000;
text-decoration:underline;
}
#main .post-body a:hover{
color:#56b9ff;
text-decoration:none;
}
a img{ border-width:0}
.post-body img{ margin:5px; border:1px solid #444
}
#main-wrapper a:link{
color:#c13a10;
text-decoration:none;
}
#main-wrapper a:visited{
color:#800000;
text-decoration:none;
}
#main-wrapper a:hover{
color:#800000;
text-decoration:underline;
}

Dahhh Silahkan Atur sendiri sesuai keinginan dan imajinasi anda

Sumber: http://tutorial-jitu.blogspot.com

Posted in: Tutorial Blog

Berapa Page Rank Blog Kamu

9:45 PM

Ariawan

PageRank adalah sebuah algoritma yang telah dipatenkan yang berfungsi menentukan situs web mana yang lebih penting/populer. PageRank merupakan salah satu fitur utama mesin pencari Google dan diciptakan oleh pendirinya, Larry Page dan Sergey Brin yang merupakan mahasiswa Ph.D. Universitas Stanford.
Trus bagaimana cara kerja Page Rank?

Sebuah situs akan semakin populer jika semakin banyak situs lain yang meletakan link yang mengarah ke situsnya, dengan asumsi isi/content situs tersebut lebih berguna dari isi/content situs lain. PageRank dihitung dengan skala 1-10.
Contoh: Sebuah situs yang mempunyai Pagerank 9 akan di urutkan lebih dahulu dalam list pencarian Google daripada situs yang mempunyai Pagerank 8 dan kemudian seterusnya yang lebih kecil.

Banyak cara digunakan search engine dalam menentukan kualitas/rangking sebuah halaman web, mulai dari penggunan META Tags, isi dokumen, penekanan pada content dan masih banyak teknik lain atau gabungan teknik yang mungkin digunakan. Link popularity, sebuah teknologi yang dikembangkan untuk memperbaiki kekurangan dari teknologi lain (Meta Keywords, Meta Description) yang bisa dicurangi dengan halaman yang khusus di desain untuk search engine atau biasa disebut doorway pages. Dengan algoritma ‘PageRank’ ini, dalam setiap halaman akan diperhitungkan inbound link (link masuk) dan outbound link (link keuar) dari setiap halaman web.

PageRank, memiliki konsep dasar yang sama dengan link popularity, tetapi tidak hanya memperhitungkan “jumlah” inbound dan outbound link. Pendekatan yang digunakan adalah sebuah halaman akan diangap penting jika halaman lain memiliki link ke halaman tersebut. Sebuah halaman juga akan menjadi semakin penting jika halaman lain yang memiliki rangking (pagerank) tinggi mengacu ke halaman tersebut.

Dengan pendekatan yang digunakan PageRank, proses terjadi secara rekursif dimana sebuah rangking akan ditentukan oleh rangking dari halaman web yang rangkingnya ditentukan oleh rangking halaman web lain yang memiliki link ke halaman tersebut. Proses ini berarti suatu proses yang berulang (rekursif). Di dunia maya, ada jutaan bahkan milyaran halaman web. Oleh karena itu sebuah rangking halaman web ditentukan dari struktur link dari keseluruhan halaman web yang ada di dunia maya. Sebuah proses yang sangat besar dan komplek.

Mau tahu algoritma page rank?
Dari pendekatan yang sudah dijelaskan pada artikel konsep pagerank, Lawrence Page and Sergey Brin membuat algoritma pagerank seperti di bawah :

Algoritma awal PR(A) = (1-d) + d ( ( PR(T1) / C(T1) ) + … + ( PR(Tn) / C(Tn) ) )

Salah satu alogtima lain yang dipublikasikan PR(A) = (1-d) / N + d ( ( PR(T1) / C(T1) ) + … + ( PR(Tn) / C(Tn) ) )

* PR(A) adalah Pagerank halaman A
* PR(T1) adalah Pagerank halaman T1 yang mengacu ke halaman A
* C(T1) adalah jumlah link keluar (outbound link) pada halaman T1
* d adalah damping factor yang bisa diberi antara 0 dan 1.
* N adalah jumlah keseluruhan halaman web (yang terindex oleh google)

Random surfer model merupakan pendekatan yang menggambarkan bagaimana sesungguhnya yang dilakukan seorang pengunjung di depan sebuah halaman web. Ini berarti peluang atau probabilitas seorang user mengklik sebuah link sebanding dengan jumlah link yang ada pada halaman tersebut. Pendekatan ini yang digunakan pagerank sehingga pagerank dari link masuk (inbound link) tidak langsung didistribusikan ke halaman yang dituju, melainkan dibagi dengan jumlah link keluar (outbound link) yang ada pada halaman tersebut. Rasanya semua juga menganggap ini adil. Karena bisa anda bayangkan apa jadinya jika sebuah halaman dengan rangking tinggi mengacu ke banyak halaman, mungkin teknologi pagerank tidak akan relevan digunakan.

Metode ini juga memiliki pendekatan bahwa seorang user tidak akan mengklik semua link yang ada pada sebuah halaman web. Oleh karena itu pagerank menggunakan damping factor untuk mereduksi nilai pagerank yang didistribusikan sebuah halaman ke halaman lain. Probabilitas seorang user terus mengkilk semua link yang ada pada sebuah halaman ditentukan oleh nilai damping factor (d) yang bernilai antara 0 sampai 1. Nilai damping factor yang tinggi berarti seorang user akan lebih banyak mengklik sebuah halaman sampai dia berpindah ke halaman lain. Setelah user berpindah halaman maka probabilitas diimplemntasikan ke dalam algoritma pagerank sebagai konstanta (1-d) . Dengan mengeluarkan variable inbound link (link masuk), maka kemungkinan seorang user untuk berpindah ke halaman lain adalah (1-d), hal ini akan membuat pagerank selalu berada pada nilai minimum.

Dalam algoritma pagerank yang lain, terdapat nilai N yang merupkan jumlah keseluruhan halaman web, jadi seorang user memiliki probabilitas mengunjungi sebuah halaman dibagi dengan total jumlah halaman yang ada. Sebaagai contoh, jika sebuah halaman memiliki pagerank 2 dan total halaman web 100 maka dalam seratus kali kunjungan dia mengunjungi halaman itu sebanyak 2 kali (catatan, ini adalah probabilitas).

Wahhh Panjang amattt diatass aku juga lum sempet baca semuanya aku copas aja dari om wikipedia.org heheheeee yawdah deh tapi sebelum kamu dapet pagerank kamu harus baca cara daftar di searach engine... kalau sudah mari silahkan cek page rank kamu dibawah

Check Page Rank of any web site pages instantly:

This free page rank checking tool is powered by Page Rank Checker service

Wahh tools diatas juga saya ambil dari prchecker.info jadi selengkapnya kamu bisa kunjungi website tersebut okey...

Sumber: http://tutorial-jitu.blogspot.com

Posted in: Tutorial Blog

Menampilkan Widget Di Halaman Tertentu

5:31 AM

Ariawan

Pada tulisan kali ini, saya akan membagikan ilmu yang sudah saya pelajari kepada Anda yaitu masih tentang blogger dan topik yang saya bahas kali ini adalah seputar "Menampilkan widget pada halaman tertentu" yang sering digunakan pada template megazine, misalnya anda ingin menampilkan widget dihalaman post saja atau tidak ada hanya dihalaman post.

Nah langsung saja kita pelajari bersama-sama.

Langkah pertama yang harus Anda lakukan adalah masuk menu "Design" kemudian masuk ke bagian "Edit HTML" lalu centang kotak "Expand widget templates"

lalu cari code widgetnya seperti ini

<b:widget id='HTML1' locked='false' title='Pesan' type='HTML'>
<b:includable id='main'>


<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:includable>
</b:widget>

Untuk mempermudah pencarian silahkan masukkan judul widget seperti "Pesan" kedalam kotak pencarian browser (ctrl + F)

Kemudian tambah code

<b:if cond='data:blog.url == data:blog.homepageUrl'>

dan ditutup dengan code </b:if> untuk menempatkan di hanya halaman depan saja

dan ditempatkan seperti dibawah ini

<b:widget id='HTML1' locked='false' title='Pesan' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Perhatikan penempatan code yang berwarna hijau !

kemudian save.

Dan dibawah ini adalah code yang bisa digunakan untuk penempatan lainya

Untuk menempatkan di halaman depan/index digunakan code

<b:if cond='data:blog.pageType == data:blog.homepageUrl'>

Untuk menempatkan di halaman Archive saja

<b:if cond='data:blog.pageType == "archive"'>

Untuk menempatkan dihalaman item/posting saja digunakan code

<b:if cond='data:blog.pageType == "item"'>

Dan untuk pada halaman pages atau static page blogger digunakan

<b:if cond='data:blog.pageType == "static_page"'>

Dan untuk tambahan, jika Anda ingin menempatkan di halaman tertentu dengan menggunakan URL gunakan code dibawah ini

<b:if cond='data:blog.url == "URL_HERE"'>

Ganti code URL_HERE dengan URL yang ingin anda tampilkan.

Dan untuk pengecualian, misalnya anda tidak menempatkan widget hanya di halaman depan saja dengan cara mengganti tanda = pertama dengan tanda !

Contoh

<b:if cond='data:blog.pageType != data:blog.homepageUrl'>

Nah tidak terlalu sulit kan? semoga bermanfaat bagi Anda.

Sekian silahkan berkomentar jika ada pertanyaa, :D

NB : Code diatas juga dapat di aplikasikan ke fungsi-fungsi blogger lainya yang akan saya bahas di waktu selanjutnya

Sumber: http://tutorial-jitu.blogspot.com

Posted in: Tutorial Blog

Jquery Multi Level Menu Horizontal

5:26 AM

Ariawan

Masih membahas tentang cara membuat menu horizontal atau menu navigasi di blog kita, membuat menu horizontal yang lebih canggih yaitu membuat multi level menu atau menu bertingkat.

Okkey langsung saja ke cara pembuatanya ya

langkah pertama yaitu masuk pada bagian Design lalu Edit HTML

Masukkan code dibawah ini dibawah code <head>



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/anasprod/jqueryslidemenu.js' type='text/javascript'/>

Lalu masukkan CSS dibawah ini diatas code ]]></b:skin>

.jqueryslidemenu{
font: bold 13px Verdana;
background: #800000;
width:100%;
float:left
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #800000; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background:#B30000; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
background:#B30000;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu 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;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
position:relative;
}

Code diatas adalah style dari menu Anda, silahkan edit sesuai kebutuhan Anda.

Nah kalau sudah kita menuju kebawah untuk mencari code seperti dibawah ini

Perhatikan saja code yang berwarna merah karena code yang berwarna hitam diatas berbeda-beda setiap template

lalu taruh code dibawah ini dibawah code yang diatas tadi

Kalau sudah SAVE

Pekerjaan kita belum selesai, langkah selanjutnya yaitu menuju menu "Page Elements"

Terlihat pada "Page Elements" muncul tempat gadget baru, lalu klik aja "Add a gadget" dan pilih HTML/JavaScript dan masukkan code dibawah ini.

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="http://sangmerak.blogspot.com">SangMerak</a></li>
<li><a href="#">Kategori</a>
<ul>
<li><a href="#">Sub Kategori 1</a></li>
<li><a href="#">Sub Kategori 2</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>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://tutorial-jitu.blogspot.com">Tutorial Blog</a></li>
</ul>
<br style="clear: left" />
</div>

Nah code diatas adalah code dari widgetnya silahkan di edit sesuai kebutuhan Anda.

Kalau sudah silahkan di SAVE deh.

Sumber:
http://tutorial-jitu.blogspot.com

Posted in: Tutorial Blog

Thursday, January 20, 2011

Membuat Label/Tag Clouds trick untuk blog anda

2:24 AM

Ariawan

Nahhh pada kali ini saya yang bernama Anas akan menulis artikel yang biasanya digunakan di wordpress dan technorati yaitu Tag Clouds.. jika anda belum mengerti tentang Tag Clouds saya akan menerangkan sedikit pengertianya..
Tags Clouds adalah sebuah Label yang hurufnya tidak rata maka dari itu dinamakn Tags Clouds yang artinya Tag adalah Label dan Clouds adalah awan jadi rengkumanya adalah Label yang seperti awan atau tidak rata.. Nah jika Tags yang hurufnya berbentuk rata biasanya itu adalah tags yang populer di blog anda jika kecil itu kurang populer... jadi pengertianya adalah semakin besar hurufnya maka menandakan kepopuleran dari Tags tersebut... makanya anda membuat tags dengan kata-kata yang sering digunakan dan tepat dengan isi tagsnya tul gakk

Nah jika Anda belum tau Tags Clouds Saya akan memberikan contohnya niii dibawahhh

komputer, Blogging, Bisnis Online
laptop, Widget Blog, Yahoo, Google,
blogeer, wordpress, SEO
trik-tips Blog
Pernak-pernik Blog,
other

Nah contoh diatas adalah tampilan Label yang telah dimodifikasi menjadi Tags Clouds... Semakin besar hurufnya maka semakin populer categorinya

Gimanna anda pengen buat gakk kalau pengen nihh dibawah aku ajari caranya..

Log in Ke Blogger Lalu masuk Menu Layout kemudian Edit HTML
Kemudian Taruh Code dibawah diatas Code ]]></b:skin>

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
Lalu juga taruh Code Dibawah tepat dibawah Code <head>

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
Lalu Scroll Kebawah coba cari Code seperti ini <b:widget id='Label1' locked='false' title='Labels' type='Label'/>
Lalu Ganti code diatas dengan Code dibawah Ini

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>
Selesai Deh kemudian Save

Jika kamu Faham tentang CSS kamu bisa mengotak-atik tampilanya sendiri...

Nahh gimana gampang thoo dengan Tags Clouds kan kita bisa mengetahui Tags mana yang paling populer iya kannn..... kalau begitu sekian dulu yahhh .... Jangan lupa isi komentar yahhh.... biar aku bisa membenahi artikel ini jika ada kesalahan .... thanks

Posted in: Tutorial Blog

Membuat Buku Tamu atau "Shoutbox" Gadget untuk Blog anda

2:08 AM

Ariawan

Pertama-tama gw akan kasih tau pengertian dari shoutbox and gunanya bagi anda yang belum tau.
Apa itu Shoutbox??
Shoutbox adalah sebuah media untuk pengunjung blog anda mencurahkan isi hati dan pikiran tentang blog anda seperti: Kritik, Saran, Pujian, Pesan dan juga Kesan
bahkan untu blogwalking atau promosi lewat Shoutbox... ni dibawah screen capturnya

Gimana Dari keterangan diatas anda udah paham belum???
tentunya udah paham dunk kan udah aku kasih contoh gambarnya..
okey kita beranjak ke cara pembuatanya:

Buka situs www.shoutmix.com
Klik CREATE YOUR SHOUTBOX NOW
Kemudian isi form yang disediakan sesuai data anda masing-masing kemudian Centang Kotak "I have read and agree to the Terms of Service" Dan tekan tombol Continue
Pilih Bentuk Shotbox yang anda inginkan Isi Kode Vertifikasi Kemudian tekan Continue
Kalau sudah berhasil Kita langsung beranjak Ke Control Panel kemudian Ke menu Get Codes
Kemudian Pilih "Place Shoutbox On Webpage dan Atur Tinggi dan lebarnya
Kemudian Copy Generate Code/HTML Codenya
Kemudian Kembali ke blog anda Dan masuk Menu Layout - Page element kemudian cari tempatnya dan add a Gadget kemudian Pilih Menu HTML/JavaScript Dan Paste Code Yang sudah Anda Copy tadi di Shoutmix

Gimana gampang kan??? silahkan mencob yaaa moga berhasil okey

Alamat Website Penedia layanan Shoutbox Lainya:

http://www.cbox.ws

Posted in: Tutorial Blog

Widget Penerjemah Dari Google Gadget untuk Blog anda

2:02 AM

Ariawan

Widget penerjemah bahasa dari google ini sudah banyak digunakan dikalangan blogger dan webmaster, apabila ada pengunjung dari manca negara yang tidak bisa mengartikan bahasa indonesia kedalam bahasa yang diinginkan maka widget google translate bisa membantu menerjemahkan situs kita, tapi jika kita menggunakan bahasa yang tidak baku google translate akan kesulitan menerjemahkanya, jadi diharapkan menggunakan bahasa baku jika ingin sempurna diterjemahkan oleh google translate ini.

dibawah ini adalah bentuk widget tool dari google translate :



	Gadgets powered by Google

Udah dicoba belum? kalau sudah jika mau pasang widget ini silahkan baca dibawah ini.

Copy paste code dibawah ini kedalam blog Anda dengan cara :

1. Masuk menu Layout kemudian masuk menu Page Elements
2. Pilih box layout yang diinginkan kemudian klik Add a gadgets
3. Pilih Gadget HTML/JavaScript dan taruh code dibawah ini :

Code yang berwarna merah diatas adalah ukuran dari widget yang bisa kamu ubah-ubah. Kalau sudah kemudian SAVE.

Nah sedikit info dari saya dan jika Anda mau menggunakan layanan dari google translate yang lain kunjungi : http://translate.google.com

Posted in: Tutorial Blog

Widget Sederhana "Twitter" Gadget untuk Blog anda

1:54 AM

Ariawan

Tentunya Anda sudah tau apa itu twitter dan Anda jugalah pengguna twitter untuk saat ini. Ya, Twitter adalah salah satu Social Networking yang terkenal selain Facebook yang banyak digunakan orang di seluruh penjuru dunia.

Namun kali ini Saya akan membahas tentang bagaimana caranya membuat widget Twitter yang sederhana ke dalam blog kita, dalam artian widget ini lebih simple dari pada widget yang diberikan oleh pihak twitter.

Isi dari widget ini adalah hanya tweets dan link twitter Anda, pas buat Anda yang suka hal ringkas namun bertujuan jelas. Coba lihat contoh widgetnya dibawah ini

Gambar diatas screen capture dari widget twitter sederhana di blog Saya ini. Yuk mari Saya pandu cara buat widget ini

Pertama yang Anda lakukan adalah Log In ke blogger Anda, setelah masuk Dashboard Lalu klik Link Layout / Tata Letak

Setelah masuk pada menu Layout lalu pilih tempat yang mau Anda pasangi Widget ini kemudian klik "Add a Gadget" kemudian pilih "HTML/JavaScript"

Kemudian Paste code dibawah ini

<div id="twitter_div" style="background: url(http://i725.photobucket.com/albums/ww258/anasceria/new-tuts/single-bird-icon-1.png) top left no-repeat; color:#000000; font-size:14px; padding-left: 50px;"><ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/anasceria">follow me on Twitter</a>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/anasceria.json?callback=twitterCallback2&count=3" type="text/javascript"></script>

Perhatikan !! :

Ganti code yang berwarna merah diatas dengan ID Twitter Anda
Ganti Angka 3 yang berwarna biru diatas dengan jumlah angka tweet Anda yang ingin Anda Tampilkan
Code yang berwarna hijau adalah style dari widget tersebut, diantaranya ada URL gambar dari widget tersebut, sesuaikan dengan selera Anda, klik disini untuk panduan CSSnya
Text "follow me on twitter" adalah text link perintah untuk Follow Twitter Anda yang bisa Anda ganti sesuai Selera Anda

Posted in: Tutorial Blog

Cara Pasang Iklan Di Blog (KumpulBlogger)

1:46 AM

Ariawan

Anda sudah merasa lama didunia perbloggeran?, Anda merasa tidak mendapatkan apa-apa dari blog selain kepuasan hati?. Jangan salah blogger juga bisa dijadikan sumber penghasilan lho, Antara lain dengan cara memasang iklan di blog Anda dengan jasa periklanan Indonesia kumpulblogger.com, Anda tidak perlu bersusah-susah mencari iklan sendiri tinggal daftar terus pasang scriptnya di blog Anda karena kumpulblogger.com sudah mencarikan iklan untuk Anda jadi Anda tinggal terima beresnya saja.
Apalagi kalau blog Anda pengunjungnya sudah banyak pasti uang akan mengalir dengan sendirinya. Kumpulblogger.com menghitung setiap text link atau banner yang disediakan dengan cara PPC (pay per clik) atau setiap ada pengunjung yang mengklik zona iklan Anda.

Gimana enak gak? mau? ikuti caranya dibawah ini

Langkah pertama yang harus Anda lakukan adalah mendaftar kumpulblogger.com disini dengan cara mengklik link "register now" pada pojok kanan atas di situs kumpulblogger.com

Lalu masukkan alamat email Anda lalu klik tombol "Register" otomatis password untuk Log In sudah ada di email Anda. Anda bisa mengubah passwordnya setelah Anda Log In

Lalu setelah Anda Log In sebelum pasang scriptnya klik link "Tambah Blog" Pada menu Blogger

Isi form sesuai perintahnya lalu klik tombol "Submit"

Kalau sudah klik link "Script Text Advertising untuk Blog anda" dan pilih style iklan yang Anda sukai lalu copy scriptnya dan tempatkan di blog Anda dengan cara masuk menu Layout (tata letak) pada dashboard blogger lalu pada menu Page element (elemen halaman) pilih tempat yang Anda sukai dan klik "add a gadget" lalu pilih "HTML/JavaScript" dan Paste Script tadi yang Anda copy di kumpulblogger.com

Nah selesai

Selamat datang didunia Blogger dan selamat datang didunia periklanan.