October 31, 2012

Cara Mengganti "Older Post" Dengan Angka Di Blog

dalam postingan ini Bery HackeR akan membahas dan memberi tutorial cara mengganti older post dengan angka, Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts (posting lama)" dan "Newer Posts (posting baru)". Beda dengan wordpress yang navigasinya bisa berbentuk angka sehingga bisa memudahkan untuk loncat beberapa halaman ke postingan yg lama maupun baru.
Nha trik kali ini akan menjelaskan bagaimana cara mengganti link "Older Posts (posting lama)" dan "Newer Posts (posting baru)" menjadi angka seperti gambar di bawah ini



1. Langkah awal tentu saja harus menuju ke desain template anda kemudian ke "Edit HTML" 2. setelah itu cari kode ini   ]]></b:skin>  kalo sudah ketemu taruh script dibawah ini sebelum kode tersebut



.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}


3. setelah itu cari kode ini   </body>   kemudian taruh script dibawah ini sebelum kode tersebut.



<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!--Page Navigation Ends -->


Kalau sudah silahkan dilihat hasilnya.

Modifikasi Label Blog Dengan CSS3

Ne cara ini agar blog kita menjadi lebih bagus,Yaitu dengan Modifikasi Label Blog Dengan CSS3 langsung saja ikuti cara di bawah ini.

1. Login ke blog kamu.
2. Pasang Label terlebih dahulu sebelum mengedit HTML
3. Template > Edit HTML > Cari kode ]]></b:skin>
4. Dan letakan Script di bawah ini tepat di atas kode ]]></b:skin>


label-size{
   display: inline-block;
   padding: 0px 10px;
   height: 29px;
   line-height:29px;
   border-radius: 5px;
   font-weight:bold;
   font-size:12px;
   text-decoration:none;
}

.label-size{
  border: 1px solid #769e42;
  box-shadow: inset 0 1px 0 #c5e59c ;
  background-color: #9ed35a;
  text-shadow: 0px 1px 1px #6ea23b;
  color: #fff;
  background-image: linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -o-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}

.label-size:hover{
  background-color: #b7fa66;
  background-image: linear-gradient(top, #b7fa66 0%, #7ec940 100%);
  background-image: -o-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
  background-image: -moz-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
  background-image: -webkit-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
  background-image: -ms-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
}

.label-size:active{
  background-image: linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -o-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -moz-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -webkit-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -ms-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}

.label-size{
  display:inline-block;
  border-radius: 5px 0 0 5px;
  border-right-width:0;
  position:relative;
  z-index:5;
  margin-right: 20px;
  margin-bottom: 10px;
}

.label-size:after{
  content: " ";
  width: 22px;
  height: 22px;
  line-height: 18px;
  font-size:25px;
  border-top: 1px solid #769e42;
  border-right: 1px solid #769e42;
  box-shadow: inset 0 1px 0 #c5e59c ;
  background-color: #9ed35a;
  text-shadow: 0px 1px 1px #7eac46;
  border-radius: 3px 7px 3px 0;
  color: #fff;
  background-image: linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -o-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -moz-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -webkit-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -ms-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  position:absolute;
  top: 3px;
  right: -12px;
  z-index:-3;
  -webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */
       -moz-transform: rotate(45deg);  /* FF3.5+ */
        -ms-transform: rotate(45deg);  /* IE9 */
         -o-transform: rotate(45deg);  /* Opera 10.5 */
            transform: rotate(45deg);
               filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
                       M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');
                 zoom: 1;
}

.label-size:hover:after{
  background-color: #b7fa66;
  background-image: linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
  background-image: -o-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
  background-image: -moz-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
  background-image: -webkit-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
  background-image: -ms-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
}

.label-size:active:after{
  background-image: linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -o-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -moz-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -webkit-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -ms-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}

.label-size:before{
  content: " ";
  height:5px;
  width:5px;
  display:block;
  position:absolute;
  right:-3px;
  top:11px;
  background-color: #fcfdf5;
  border: 1px solid #83ab52;
  border-radius:5px;
  box-shadow: 0 1px 0 #b2ddd83;
}

.label-size span{
  padding:2px 5px;
  border: 1px solid #9e5c26;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 #f5bf8c;
  background-color: #ed943f;
  text-shadow: 0px 1px 1px #000;
  margin-left: 10px;
  background-image: linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
  background-image: -o-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
}

#Label1 {height:210px !important;}

Simpan, selesai. terimakasih telah mengunjungi blog saya Bery HackeR

October 25, 2012

Cara Membuat Flag Counter di Blog

saya akan posting tentang "Cara Membuat Flag Counter di Blog",..
Flag counter ini cukup populer untuk para blogger. Lumayanlah buat menuhin ruang kosong.hhehe . Oke langsung saja ini dia cara memasang flag counter di blog :
  • Untuk mendapatkan flag counter ini kita tidak perlu daftar/register langsung saja. [KLIK DISINI]
  • Kemudian setting flag counternya sesuai keinginan kalian. (Maximum flags to show, columns of flags, dll)

  • Setelah selesai setiting klik "GET YOUR FLAG COUNTER"
  • Copy script yang muncul

  • Lalu copy ke blog (add html) pasti tau kan gmana caranya?

Nah itu dia cara memasang flag counter di blog !.


                                                         Semoga Bermanfaat !!!

Cara Memasang Widget User Online (Who's Among Us)

Salam Blogger !!!,
Kali ini saya akan posting tentang "Cara Memasang Widget User Online"

Mungkin tutorial ini sudah banyak beredar di internet tapi it's oke lah mungkin masih banyak dari kalian yang masih bingung jadi saya akan mencoba memberikan tutorialnya step by step kawan persis seperti yang saya lakukan, kalo saya saja bisa kenapa kalian ga bisa? :D
Langsung ke pokok masalah, User Online ini banyak digunakan dan cukup populer di kalangan blogger. Tujuan pemakiannya ya bermacam - macam mulai dari yang memang ingin memberikan informasi tentang user yang OL di situs tersebut, hanya untuk pelangkap sampai mungkin ada yang cuma ingin pamer karena situs nya sudah ramai dan banyak yang OL.hhaha hush ga baik suuzon, bulan puasa ni.hhaha :p Kalo saya pribadi pasang karena emang ingin tahu berapa banyak yang mampir ke blog ini dan dan sebagai pelangkap aja sih.
Nah kenapa disini saya pilih who's among us?yang paling utama memang pemasangannya yang mudah dan tidak perlu registrasi jadi tidak perlu repot kawan. Oke langsung saja ini dia cara masang widget user online :





di sini ada 5 jenis widget yang bisa kalian pilih tergantung selera kalian, di sini saya memilih "the tab widget" sebagai contoh. Kalian bisa setting letak widget di tempat yang kalian inginkan.
  • cukup klik script yang tersedia, maka akan otomatis tercopy
  • Kemudian loggin ke blogger kalian, masuk pada Template, Edit HTML, Lanjutkan, centang "expand widget"
  • Kemudian paste script tersebut di bawah kode ]]></b:skin>


  • Simpan
  • Selesai
  • Nah itu dia cara pasangnya, noh jadi kan..tambah keren aja nih blog kesayanganku.hhaha :D Buat yang mau komen dan share info atau yang belum paham monggo dipersialakan komen. Semoga bermanfaat

                                               Selamat Mencoba !!!

Cara Membuat Menu Pada Blog


Hello sobat blogger !!!,

Hmm pada posting kali ini saya akan share tutorial mengenai Cara membuat menu pada Blog, karena banyaknya yang menanyakan tutorial ini untuk itu saya putuskan untuk men-share ke blog saya itung-itung berbagi dan update blog hehehehhe. kembali ke topik postingan, fungsi dari menu pada blog ini adalah untuk mempermudah pengunjung blog untuk menjelajahi isi dari artikel sobat. dan style atau gaya ataupun tampilan yang saya share disini berwarna hitam dengan garis merah dibawahnya ya dari pada penasaran silahkan check sendiri,  ok dari pada basa basi ga jelas dan ga bermutu langsung saja ke tutorial mengenai Cara membuat menu pada Blog

pertama masuk ke bagian edit template sobat, kemudian cari kode ]]></b:skin> ( gunakan F3 agar mempercepat pencarian )
bila sobat sudah menemukan ]]></b:skin> selanjutnya sisipkan kode dibawah ini tepat di atas ]]></b:skin>

ul.menu {list-style-type:none;width:auto;position:relative;display:block;height:33px;font-size:.6em;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi73Ogy8q7MXfOpsUQwjwwVD5JYPuEfiK4hqZnfQnrbUIm-OQxeqW3s0J9VdRvdtOhxx48HoczcsLnl22KdWj7xGNqhtZXO9LNzlNKk1viumLKFpuoFoaclCw9_-T4sP8NhBTCRd4qBnZk/s1600/bg.png") repeat-x top left;font-family:Verdana,Helvetica,Arial,sans-serif;border:1px solid #000;margin:0;padding:0;}
ul.menu li {display:block;float:left;margin:0;padding:0;}
ul.menu li a {float:left;color:#A79787;text-decoration:none;height:24px;padding:9px 15px 0;font-weight:normal;}
ul.menu li a:hover,.current {color:#fff;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi73Ogy8q7MXfOpsUQwjwwVD5JYPuEfiK4hqZnfQnrbUIm-OQxeqW3s0J9VdRvdtOhxx48HoczcsLnl22KdWj7xGNqhtZXO9LNzlNKk1viumLKFpuoFoaclCw9_-T4sP8NhBTCRd4qBnZk/s1600/bg.png") repeat-x top left;text-decoration:none;}
ul.menu .current a {color:#fff;font-weight:700;}
/*Garis Merah*/
ul.menu.red{background-color:#B11718;}
ul.menu.red li a:hover, .menu.red li.current {background-color:#DE3330;}
kemudian save template.

hal selanjutnya adalah masuk ke bagian tata letak atau tempat menambahkan widget, dan hal terakhir adalah sisipkan kode dibawah ini dimana sobat ingin menu tersebut muncul

<ul class="menu red">
<li class="current"><a href="#(url homepage anda)">Home</a></li>
<li><a href="#">EDIT ME</a></li>
<li><a href="#">EDIT ME </a></li>
<li><a href="#">EDIT ME</a></li>
<li><a href="#">EDIT ME</a></li>
<li><a href="#">EDIT ME</a></li>
<li><a href="#">EDIT ME</a></li>
</ul>
ganti dengan link yang dituju



Silahkan selanjutnya sobat edit sendiri, kalau ada kebingungan, atau kesusahan ataupun juga mungkin ada saran jangan sungkan-sungkan untuk berkomentar, terima kasih


                                                         Semoga Berhasil !

October 24, 2012

Mendaftarkan Blog/Situs ke 300+ Mesin Pencari

Mendaftarkan Blog/Situs ke 300+ Mesin Pencari

Ada banyak cara agar membuat blog kita terkenal, populer salah satu cara yang paling penting adalah yaitu dengan cara blog/situs kita dengan mudah terindeks oleh mesin pencari seperti contoh Google Search Engine karena dengan terindeks oleh google search engine dengan mudah pencari artikel menemukan blog kita.
Maka dari itu agar blog/situs kita mudah terindeks oleh mesin-mesin pencari kita perlu mendaftarkannya. disini ade akan membahas bagaimana mendaftarkan blog/situs kita ke lebih dari 300 mesin pencari secara otomatis.
Tidak hanya itu, apabila blog kita sudah terindeks oleh mesin-mesin pencari secara otomatis pengunjung blog kita akan bertambah dan menaikkan page rank blog/situs kita.

Langsung aja to the point.
  1. Klik situs ini Free Search Engine Submission
  2. Masukkan alamat blog/situs yang ingin di daftarkan
  3. Masukkan e-mail (untuk keterangan lebih lanjut)
  4. Kemudian Klik ADD URL

Setelah itu kita diminta untuk menunggu sampai loading selesai karena itu dalam proses submitting (pengiriman Url yang di masukkan ke mesin-mesin pencari).

Berikut beberapa mesin-mesin pencari yang menerima pengiriman blog/situs kita :

Google.com WhatUseek.com InfoTiger.com Tr.abacho.com
Amfibi.com Abacho.de Uk.abacho.com Se.abacho.com
Abacho.ch It.abacho.com Es.abacho Fr.abacho
Abacho.at Thelessonfinder.com Ghetosearch.com Feedplex.com
ScrubTheWeb.com EntireWeb.com ExactSeek.com Voila.com
TrueSearch.com SearchUK.com GigaBlast.com Splatsearch.com
Fybersearch.com Splatsearch.com Amidalla.com Unasked.com
WhatUseek.com InfoTiger.com Rediff.com EntireWeb.com
ExactSeek.com TrueSearch.com SearchUK.com Sentenceseek.com
Big Finder Bivlo Web Squash Surf Gopher
ExactSeek.com Voila.com SearchUK.com Onseek.com
SearchMe Cuil MavicaNet Exalead
BusinessSeek World Site Index 01WebDirectory What U Seek
Is AMRAY Wikidweb Pedsters Planet
GigaBlast A1 Web Directory LII Dramba
IllumiRate Amfibi SonicRun Web World
NetInsert FreshTV Nonar Info Listings
Feedplex.com Web4URL SurfSafely Ablaze Directory
Web Linker SearchSight The Living Link Cipinet
Weblogs.com Feed Burner My Yahoo! BlogRolling
Weblogalot Topic Exchange Bloglines Blo.gs
Syndic8 PubSub.com BlogStreet Icerocket
AideRSS Technorati NewsGator Blogdigger
Moreover Tailrank SkyGrid Audio.Weblogs
BlogShares RubHub GeoURL 1CokeMKG
1HighSchElect 1TennPuters 2KCity Acoon
AdWebZone Aeiwi Aesop Ah-ha
Allestra AnySearch API Links Area Web
Ask2k Aucti0n Avalon B Central
Beamed Beginplein.nl Bellnet Buscadoronline
Canada One Directory Classified2000 Cognigen Telecom Complete Planet
CozyCabin DeBeste.nl Entire Web ExactSeek
Exploora F10 Ffa Genie FFA Links
FindOnce Tailrank Gasta Global-submit
Go Hot Goiso HaSearch Help-site
Hidden Street Hot Launch Hot Skunk Hotbot UK
Hyeguide Hypermaze IDoFind Idoi
IMarvel Info Apex Intel Search Jaan
JBlue Magic Mirror SkyGrid Lycos Spain
Lycos Asia Lycos Italy MultiLinks NetScan
Noago PCI Links PCI Zone PrimeFind
Raging Banners Robolink Search King Skipper
Snow Crest World Directory Internet Directory The Web Directory
Directory Online Submit Resource Global Earth All Web
Free General WebDanes Ultimate Directory Captain General Internet
Wah Directory Heavy Concept ZinLogic Vision Submit
Snow Crest Web Chambers Vision Lynx Portal 4 Websites
Web Links 4U Vision Links Links Directory Link Ape
Link Right FreeLynx Web Link Rabbit Directory Mark
Link Guy Web EatMyLinks Web Linkzilla Web Link Bandit
Link Driver LinkWatch Linkaholic Link Shark
Link Viper Linktropolis Link Runner Linkbinder
Link A Lot Linkstation Linkinc Link Eater
Link 4 Me Link Prune Link Caddy Financial Freeway
Link Campaign Link Canada Cabas Rcvcc
Link Campus Link Candy Toxila Bangla Eye
General Directory Mortal Link Cast Link Capture
IOrkut Link Cart Forex Web Link Stop
Link Captain Link Log Link Depot Link Champ
Link Soup Link Catalog Link Charger Link Cheap
Link Lizard Oscar Robolink THSBL
MassDog List Site Here XOWW LogiSubmit
Blue Web URL Global I Want To Link URL Bang
ProWorks Euro Submit Robolink Web Reg URL
URL Submit GE5 Online URL GoGoSun
PHP Link Link Insanity Find Your Link Toppica
Dragon Hostrator Tech4on Site Cure
Directory Dash Click Alarm Bacardo Brainontology
XY-JT LinkCiti LinkChoice Cohco Free
LinkClerk Classical Lcroskey LinkChef
LinkChest Search King Snow Crest LinkChief
Jemufo Snow Crest Robolink Links Jam
LinkClick Free General URL2C Seven
Wave Readi-Move FT8 Submit Site
Estimamo The Human Networks M. Francisco All Web Dir
Logha Directory Break Major Links Directory Bush
Link Bush Bitter Skank USA TMP1
Find Useful BooBelly SEO Burkeworks Femeba
Net Java Pattis Wagons Link Writer Link Corp
Link Contact Link Counter Link Concepts Link Company
Link Command Link Creator Link Compiler Link Me 2
Link Ledger Link 2 Me Featured Links Link Connect
Feature Links Zydamax Entire Web Kostel General
Qazee Directory Weserd Directory Wish Directory WN3 Web
Time Directory Stripe Directory Saints Directory Directory Bush
Wild West Gen Directory WowSo Directory NetDaddy
Me Free Bare Link GOLET Far Directory
Link Daddy Dir Cart EWebSubmission ColorMadera Web
Bomzei Directory AOOEA Web ArtNinjas AOOIA
EEAAO IAAOA Mad Army Alert Directory
Profit Directory Searching Directory Heaven Directory Directory Bush
Get Zooted 7EVN Directory HWTune General TMP1
Find Useful Dir Monster GBang Direc Blurp Directory
Business Directory



Ket :
  • Jangan hanya mengandalkan pengiriman ini karena ini hanya bersifat membantu.
  • Rajin-rajinlah memposting tulisan yang menarik sekiranya yang banyak dicari orang lewat google ataupun search engine lainnya seperti yahoo search dll.

Semoga Bermanfaat..

Cara Membuat Mesin Pencari (Search Engine) di Blog

Tentu kita semua sudah tahu apa itu Search Engine, kalau belum tahu ade jelaskan search engine adalah mesin pencarian agar kita lebih mudah mencari judul ataupun kata2 yang berkenaan dengan blog kita.
Saat ini Search Engine tidak bisa dipisahkan dalam dunia internet. Dengan Search Engine kita bisa mencari tahu tentang suatu hal yang kita inginkan sesuai dengan keyword yang kita ketikkan, yang mau dibahas disini adalah bagaimana caranya membuat search engine di blogger . Caranya sangat mudah, yaitu:

Cara yang pertama :

dengan menuju
Tata Letak terus pilih Elemen Halaman kemudian disitu ada tulisan Tambah gadget klik link kotak Penelusuran (Baru) seperti gambar dibawah ini :



Cara yang kedua dengan cara manual yang biasa banyak dipakai oleh sobat-sobat Blogger, yaitu :

1. Login ke blogger terus klik Tata Letak terus pilih Elemen Halaman kemudian disitu ada tulisan Tambah gadget klik link tersebut dan sesuaikan dimana tempatnya menaruh search engine
2. kemudian pada layar baru yang muncul pilih HTML/Javascript kemudian copy/paste script/kode berikut ini di dalam kolom konten.


<form action="http://nama-blogmu.blogspot.com/search" method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

Ganti nama-blogmu dengan nama blog kamu contoh menjadi adesyams.blogspot.com. Angka 30 menunjukkan panjang kotak (text box) semakin banyak angkanya maka semakin panjang textbox-nya.
"Semoga Sukses"
Cara Membuat Tulisan Berjalan (Marquee)

Cara Membuat Tulisan Berjalan (Marquee)

Sering kali kita melihat blog yang dihiasi oleh tulisan atau kata-kata yang berjalan di blog teman-teman kita. mungkin sebagian besar sudah mengetahuinya. tapi disini ade mencoba untuk sharing kepada teman-teman yang belum mengetahui cara pembuatannya.

Note: yang akan ade bahas ini merupakan tulisan berjalan biasa bukan tulisan berjalan yang apabila ada mouse di area tulisan itu akan berhenti.

berikut cara pembuatannya :
  1. Login ke Blogger
  2. Kemudian klik Tata Letak dan Elemen Halaman
  3. Ketika sudah berada di Elemen Halaman klik Tambah Gadget
  4. Lalu pilih HTML/JavaScript
  5. Langkah selanjutnya masukkan kode marquee yang anda inginkan seperti contoh dibawah ini :



1. Teks berjalan dari kanan ke kiri


kode :
hasil :

Contoh Tulisan Berjalan



2. Teks berjalan dari kiri ke kanan


kode :
hasil :

Contoh Tulisan Berjalan


3. Teks berjalan bolak balik


kode :
hasil :

Contoh Tulisan Berjalan



4. Teks berjalan dari atas ke bawah


kode :
hasil :

Contoh Tulisan Berjalan



5. Teks berjalan dari bawah ke atas


kode :
hasil :

Contoh Tulisan Berjalan



6. Teks berjalan mondar-mandir


kode :
hasil :

Contoh Tulisan Berjalan



7. Teks berjalan zig-zag nembus


kode :
hasil :

Contoh Tulisan Berjalan




8. Teks berjalan zig-zag mantul


kode :
hasil :



Contoh Tulisan Berjalan

Langkah Selanjutnya adalah mengganti tulisan
Contoh Tulisan Berjalan
dengan tulisan atau kata-kata yang anda inginkan.

Ket :
# direction="left/right/up/down" --> Mengatur arah gerakan teks.

# scrollamount="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semakin cepat gerakannya.

# behavior="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan :
~> Scroll --> teks bergerak berputar
~> Slide--> teks bergerak sekali lalu berhenti
~> Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)

# Fungsi dari :
<center> ............. </center>
adalah agar tulisan tersebut selalu berada di tengah.

SEMOGA BERHASIL

Cara Memasang Google Translate (Penerjemah)

Alat penterjemah pada zaman sekarang sangatlah penting menimbang banyaknya pengunjung situs tidak hanya selalu memakai bahasa yang sama, Dengan widget Google translate anda tidak perlu lagi pusing dengan persoalan bahasa, silahkan anda berkreasi dalam blog anda dengan bahasa anda sendiri dan biarkan google translate menterjemahkan ke dalam bahasa lain. Widget Google Translate bisa anda dapatkan di http://translate.google.com. Bentuk widget nya seperti ini :


Berikut cara memasang widget google translate di blogger
  1. Silahkan login ke blogger dengan ID anda
  2. Klik Tata Letak
  3. Klik tab Elemen Halaman
  4. Klik Tambah Gadget
  5. Klik tanda plus (+) untuk HTML/Javascript
  6. Copy paste kode google translate ke dalam kolom yang tersedia

    <script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&w=160&h=60&title=&border=&output=js"></script>
  7. Klik tombol Simpan

  8. Selesai

Semoga Berhasil.. !!
Cara Membuat Top Populer Artikel (Most Visited)

Cara Membuat Top Populer Artikel (Most Visited)

Top populer artikel adalah artikel-artikel yang sering dikunjungi dan dibaca oleh pengunjung biasanya artikel ini adalah artikel yang bagus dan bermanfaat.
kegunaannya pemilik dan pengunjung blog bisa mengetahui artikel apa yang populer pada suatu blog.

Langkah pembuatannya sangatlah mudah ikuti cara-cara berikut di bawah ini :

1. Login ke Blogger
2. Kemudian klik Tata Letak lalu Elemen Halaman
3. Ketika sudah berada di Elemen Halaman klik Tambah Gadget
4. Lalu pilih HTML/JavaScript
5. Langkah selanjutnya masukkan kode dibawah ini :


<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ul style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=ff855e4f4d4a10fde1c2eb32074f99cd&url=http%3A%2F%2Fnamablog.blogspot.com&num=10" type="text/javascript"></script>
<small>Get this widget [ <a href="http://adesyams.blogspot.com/2009/08/cara-membuat-top-populer-artikel-most.html" target="_blank">Here</a> ]</small>

6. Ganti namablog.blogspot.com pada kode tadi dengan alamat blog kamu. Lalu simpan...


Note : Angka 10 adalah jumlah postingan yang akan mejati top 10 artikel terpopuler.
anda bisa mengganti angka 10 tersebut sesuai keinginan.

Good Luck...!!!
Cara Memasang Live Traffic Feed

Cara Memasang Live Traffic Feed

Live Traffic Feed dari situs feedjit.com diperlukan bagi sebuah blog yang berguna menjadi history untuk mengetahui dari mana datangnya pengunjung blog kita. dan lebih hebatnya lagi kita bisa melihat keyword atau kata-kata apa yang dituliskan di mesin pencari seperti google search engine, atau yahoo search dll. yang berakhir di blog kita secara live (secara langsung) dengan cara mengklik Watch in Real-Time yang ada di bawah widget live traffic feed tersebut.
sebagai contoh klik Watch in Real-Time itu live traffic punya ade he...he...he...

Untuk anda yang ingin menambahkan widget diatas, ikuti langkah-langkah berikut ini.
  • Kunjungi link : http://feedjit.com
  • Klik widgets setelah anda berada di situs tersebut.
  • Klik salah satu pilihan Javascript widget yang anda perlukan.
  • Setelah memilih salah satu dari 4 pilihan disana lalu anda klick "Click here to Customize It!" itu berguna untuk menentukan warna agar sesuai pada blog kita.
  • Selesai mengotak-atik warna, Copy dan Paste ke blog anda dengan cara berikut dibawah ini.
  • ~> Login ke Blogger lalu ke Elemen Halaman dan Tambah gadget di sisi sidebar atau di footer terserah pemilik blog setelah itu pilih HTML/JavaScriptHTML/JavaScript setelah itu paste di dalamnya kode yang telah di copy di atas.
  • Klik simpan dan selesai.
  • Silahkan anda lihat blog anda sekarang

Semoga Berhasil...!!

Read More Otomatis pada Template Blog

Membuat Otomatis Read More - Auto Readmore Button.
Seperti janji minggu lalu ya sob,Pelajaran Blog kali ini akan mengulas dan mengutak atik 'seputar blogger template' yang kita gunakan saat ini.
Betul gan,ini kaitannya 'membuat read more atau tulisan baca selengkapnya' versi kedua.

Beberapa waktu lalu telah diposting cara membuat read more/baca selengkapnya.. secara manual,namun kendalanya bagi blog yang terlanjur sudah memiliki banyak artikel tentu akan banyak makan waktu dan tenaga untuk mengedit satu persatu.

Nah,dengan kombinasi javascript read more yang akan kita ciptakan ini akan tampil otomatis meskipun kita tidak mengeditnya kembali.
Lalu bagaimana jika saya telah menggunakan read more secara manual?
Tidak perlu cemas gan,karena tinggal ganti kodenya dan jreng!!! :D

Langkah Cara Membuat Read More Otomatis pada Blogger dengan Bahasa Javascript


Ada dua(2) pilihan membuat readmore otomatis / auto read more pada blogger ini sob,yakni read more menggunakan gambar dan hanya menggunakan tulisan.

Untuk pertama kali,seperti biasa ya gan pilih Dashboard,lalu Tata Letak dan Contreng tulisan Expand Widget Templates.

Cara membuat readmore otomatis.
(1)

membuat read more baca selengkapnya otomatis.
(2)

otomatis read more.
(3)


Selanjutnya,cari kode </head>,setelah ketemu tepat diATASnya letakkan kode javascript berikut:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>


Kemudian cari kembali kode <data:post.body/> atau <p><data:post.body/></p>

Setelah itu untuk Cara 1.Read More Button Otomatis menggunakan gambar,hapus kode tersebut dan gantilah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></a></span>
<b:else/>
<data:post.body/>
</b:if>


Sedangkan untuk Cara 2.Read More Button Otomatis hanya berupa text,hapus kode <data:post.body/> atau <p><data:post.body/></p>
tersebut dan gantilah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>


Lalu simpan templates dan lihat hasilnya.
Untuk yang terlanjur menggunakan read more secara manual,tinggal hapus kode:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>


Dan gantilah dengan kode sesuai pilihan sobat diatas,bisa menggunakan cara 1 maupun cara 2.Semoga berhasil dan selamat ngutak-atik template ya Membuat Read More Otomatis / Auto ReadMore di Blogger Selesai.

Animasi Buat Blog

Cara Membuat Animasi Lucu Untuk Mempercantik Blog sangatlah mudah cukup
sign in pada account blogger sobat,kemudian ikuti langkah-langkah berikut :

1. Pada Dasbor
2. Rancangan 
3. Tambah Gadget
4. HTML/JavaScript
5. Save atau Simpan




Kakashi Walk To Left


<script type="text/javascript" language="javascript" src="http:./joesetapart.googlecode.com/files/Kakasih.txt" name="DADrun"></script>

Naruto Walk To Left


<script type="text/javascript" language="javascript" src="http://joesetapart.googlecode.com/files/Naruto.txt" name="DADrun"></script>

Sasuke Walk To Left


<script type="text/javascript" language="javascript" src="http://joesetapart.googlecode.com/files/Sasuke.txt" name="DADrun"></script>

Bleach Run


<script type="text/javascript" language="javascript" src="http://joesetapart.googlecode.com/files/Bleach.txt" name="DADrun"></script>

Babi Pink


<script type="text/javascript" language="javascript" src="http://joesetapart.googlecode.com/files/Babi.txt" name="DADrun"></script>

Membuat Tulisan Matrix

Satu lagi tutorial blog widget untuk mendesign blog utamanya bagi anda yang gemar menghiasi blog nya dengan berbagai macam widget. Tampilannya cukup sederhana.Contoh gambarnya bisa anda lihat dibawah ini.





Bagi kamu yang tertarik untuk memasang tulisan matrix sebagai tambahan design blog kamu.,silahkan copy paste code dibawah ini dengan cara Dasbor --> Layout --> Rancangan --> Edit Laman --> Tambahkan Gadget..

<style type="text/css">
.matrix { font-family:Lucida Console, Courier, Monotype; font-size:10pt; text-align:center; width:10px; padding:0px; margin:0px;}
</style>

<script type="text/javascript" language="JavaScript">

<!--
var rows=11;
var speed=50;
var reveal=2;
var effectalign="default"

/***********************************************
* Visit http://www.kikiyo.co.cc
***********************************************/

var w3c=document.getElementById && !window.opera;;
var ie45=document.all && !window.opera;
var ma_tab, matemp, ma_bod, ma_row, x, y, columns, ma_txt, ma_cho;
var m_coch=new Array();
var m_copo=new Array();
window.onload=function() {
if (!w3c && !ie45) return
var matrix=(w3c)?document.getElementById("matrix"):document.all["matrix"];
ma_txt=(w3c)?matrix.firstChild.nodeValue:matrix.innerHTML;
ma_txt=" "+ma_txt+" ";
columns=ma_txt.length;
if (w3c) {
while (matrix.childNodes.length) matrix.removeChild(matrix.childNodes[0]);
ma_tab=document.createElement("table");
ma_tab.setAttribute("border", 0);
ma_tab.setAttribute("align", effectalign);

//=-----Ganti background warna tampilan sesuai keinginan anda ---
ma_tab.style.backgroundColor="Black";
///-------------------------------------------------------------->

ma_bod=document.createElement("tbody");
for (x=0; x<rows; x++) {
ma_row=document.createElement("tr");
for (y=0; y<columns; y++) {
matemp=document.createElement("td");
matemp.setAttribute("id", "Mx"+x+"y"+y);
matemp.className="matrix";
matemp.appendChild(document.createTextNode(String.fromCharCode(160)));
ma_row.appendChild(matemp);
}
ma_bod.appendChild(ma_row);
}
ma_tab.appendChild(ma_bod);
matrix.appendChild(ma_tab);
} else {
ma_tab='<ta'+'ble align="'+effectalign+'" border="0" style="background-color:#000000">';
for (var x=0; x<rows; x++) {
ma_tab+='<t'+'r>';
for (var y=0; y<columns; y++) {
ma_tab+='<t'+'d class="matrix" id="Mx'+x+'y'+y+'">&nbsp;</'+'td>';
}
ma_tab+='</'+'tr>';
}
ma_tab+='</'+'table>';
matrix.innerHTML=ma_tab;
}
ma_cho=ma_txt;
for (x=0; x<columns; x++) {
ma_cho+=String.fromCharCode(32+Math.floor(Math.random()*94));
m_copo[x]=0;
}
ma_bod=setInterval("mytricks()", speed);
}

function mytricks() {
x=0;
for (y=0; y<columns; y++) {
x=x+(m_copo[y]==100);
ma_row=m_copo[y]%100;
if (ma_row && m_copo[y]<100) {
if (ma_row<rows+1) {
if (w3c) {
matemp=document.getElementById("Mx"+(ma_row-1)+"y"+y);
matemp.firstChild.nodeValue=m_coch[y];
}
else {
matemp=document.all["Mx"+(ma_row-1)+"y"+y];
matemp.innerHTML=m_coch[y];
}
matemp.style.color="#66CCFF";
matemp.style.fontWeight="bold";
}
if (ma_row>1 && ma_row<rows+2) {
matemp=(w3c)?document.getElementById("Mx"+(ma_row-2)+"y"+y):document.all["Mx"+(ma_row-2)+"y"+y];
matemp.style.fontWeight="normal";
matemp.style.color="#00ff00";
}
if (ma_row>2) {
matemp=(w3c)?document.getElementById("Mx"+(ma_row-3)+"y"+y):document.all["Mx"+(ma_row-3)+"y"+y];
matemp.style.color="#009900";
}
if (ma_row<Math.floor(rows/2)+1) m_copo[y]++;
else if (ma_row==Math.floor(rows/2)+1 && m_coch[y]==ma_txt.charAt(y)) zoomer(y);
else if (ma_row<rows+2) m_copo[y]++;
else if (m_copo[y]<100) m_copo[y]=0;
}
else if (Math.random()>0.9 && m_copo[y]<100) {
m_coch[y]=ma_cho.charAt(Math.floor(Math.random()*ma_cho.length));
m_copo[y]++;
}
}
if (x==columns) clearInterval(ma_bod);
}

function zoomer(ycol) {
var mtmp, mtem, ytmp;
if (m_copo[ycol]==Math.floor(rows/2)+1) {
for (ytmp=0; ytmp<rows; ytmp++) {
if (w3c) {
mtmp=document.getElementById("Mx"+ytmp+"y"+ycol);
mtmp.firstChild.nodeValue=m_coch[ycol];
}
else {
mtmp=document.all["Mx"+ytmp+"y"+ycol];
mtmp.innerHTML=m_coch[ycol];
}


//=---------Ganti Font warna Anda di bawah ini------
mtmp.style.color="#99FFFF";
//--------------------------------------------------->


mtmp.style.fontWeight="bold";
}

if (Math.random()<reveal) {
mtmp=ma_cho.indexOf(ma_txt.charAt(ycol));
ma_cho=ma_cho.substring(0, mtmp)+ma_cho.substring(mtmp+1, ma_cho.length);
}
if (Math.random()<reveal-1) ma_cho=ma_cho.substring(0, ma_cho.length-1);
m_copo[ycol]+=199;
setTimeout("zoomer("+ycol+")", speed);
}
else if (m_copo[ycol]>200) {
if (w3c) {
mtmp=document.getElementById("Mx"+(m_copo[ycol]-201)+"y"+ycol);
mtem=document.getElementById("Mx"+(200+rows-m_copo[ycol]--)+"y"+ycol);
}
else {
mtmp=document.all["Mx"+(m_copo[ycol]-201)+"y"+ycol];
mtem=document.all["Mx"+(200+rows-m_copo[ycol]--)+"y"+ycol];
}
mtmp.style.fontWeight="normal";
mtem.style.fontWeight="normal";
setTimeout("zoomer("+ycol+")", speed);
}
else if (m_copo[ycol]==200) m_copo[ycol]=100+Math.floor(rows/2);
if (m_copo[ycol]>100 && m_copo[ycol]<200) {
if (w3c) {
mtmp=document.getElementById("Mx"+(m_copo[ycol]-101)+"y"+ycol);
mtmp.firstChild.nodeValue=String.fromCharCode(160);
mtem=document.getElementById("Mx"+(100+rows-m_copo[ycol]--)+"y"+ycol);
mtem.firstChild.nodeValue=String.fromCharCode(160);
}
else {
mtmp=document.all["Mx"+(m_copo[ycol]-101)+"y"+ycol];
mtmp.innerHTML=String.fromCharCode(160);
mtem=document.all["Mx"+(100+rows-m_copo[ycol]--)+"y"+ycol];
mtem.innerHTML=String.fromCharCode(160);
}
setTimeout("zoomer("+ycol+")", speed);
}
}
// -->
</script>

<div id="matrix">Welcome To My Blog</div>

Keterangan :
 kata Black adalah warna background tulisan matrix anda, silahkan anda ganti dengan warna yang anda sukai
 angka #99FFFF adalah warna tulisan matrix anda tinggal anda sesuaikan saja.
yang terakhir adalah Welcome To My Blog silahkan ganti dengan kalimat yang ingin anda tampilkan sebagai tulisan matirks anda