hariez.reaper@yahoo.com
Get in touch - Saturday: 8:30 am - 6:00 pm

Sunday, January 29, 2012

Cara Pasang Floating Images di Blog WordPress

Filled under:

Cara buat gambar melayang Floating Image di Blog WordPress | Cara Pasang Animasi Flash di Blog
Sobat narablog, artikel berikut saya ambilkan dari blognya mas bro Bootingskoblog. Artikel-artikel tutorial wordpress di blog dia sangat bagus baik untuk narablog pemula maupun yg sudah bangkotan di wordpress.com :lol: Dari blog inilah saya pribadi banyak belajar bagaimana membangun blog wordpress.
Artikel ini istimewa karena:
  • dari dulu saya ingin tahu bagaimana caranya memasang floating images (  gambar melayang ) di blog wordpress dan ketemu di artikel mas bro ini. Dulu saya gak tahu apa itu namanya, jadi saya search di mbah google dengan kata kunci: pasang gambar di pojok blog :D . Bagi sobat yg belum tahu apa itu floating images :  ini adalah sebuah/beberapa gambar yang selalu berada di pojok blog kita. Gambar tersebut tidak akan bergerak dan tetap berada di pojok halaman walaupun kita meng-scroll halaman ke atas dan ke bawah
  • ternyata mas bro bootingskoblog mengetahui trick ini dari duo ●●ЄЯШЇЙ●●● yang super narsis itu :mrgreen: . buseeeedd dah! Rupanya mas dan mbak Erwin ini emang ajibbbb! Kalu maen ke blog mereka pasti narablog sudah ‘dihadang’ oleh macan dan elang yang menjadi floating images blog mereka. Entah sampai kapan macan imutnya ada disana wkwkwkwk:D
Jika rekan narablog tertarik untuk mencoba memasang floating images di blog untuk sekedar mempercantik tampilan blog, atau untuk alasan2 lainnya, caranya super mudah.
  • Login ke akun WordPress.com sobat.
  • Kemudian klik [Tampilan] > [Widget].
  • Pilih widget “Text”. Click and drag (klik dan tarik dengan mouse) widget teks ini ke sisi kanan (sidebar)
  • Copy dan pastekan kode dibawah ini:
Posisi bawah-kanan:
<a style="display:scroll;position:fixed;bottom:0;right:0;">
<img src="URL gambar" /></a>
Posisi atas-kanan:
<a style="display:scroll;position:fixed;top:0;right:0;">
<img src="URL gambar" /></a>
Posisi bawah-kiri:
<a style="display:scroll;position:fixed;bottom:0;left:0;">
<img src="URL gambar" /></a>
Posisi atas-kiri:
<a style="display:scroll;position:fixed;top:0;left:0;">
<img src="URL gambar" /></a>
  • Dan klik tombol “Save”.

Posted By Ekho Renaldy2:49 AM

Friday, January 27, 2012

Cara Membuat Link Memiliki Ragam Efek Menarik

Filled under:

Bingung mau ngasih judul apa, maksud anaa jika Ingin link tersentuh pointer menjadi huruf besar, bekedip kedip warna pelangi dan backgroundnya seperti kembang api atau bintang bertaburan (contohnya seperti di blog ini).
Berikut cara buatnya:


  • Loggin ke blogger
  • Klick layout atau tata letak
  • Edit HTML
  • Cari code berikut:
hover
  • Untuk memudahkan tekan ctrl+F, hasilnya akan banyak.
  • Setelah ketemu tambahkan code berikut sejajar pada setiap code tadi.
{ color: #00FFFF; text-transform: uppercase; font-weight: bolder; font-size: 20px; background-image: url(http://i27.tinypic.com/2626vyh.jpg); }
  • Silahkan edit codenya sesuai selera anda, font size, image backgroud dan warna font, untuk code warna bisa lihat disini
  • Jangan lupa save, simpan template!

Posted By Ekho Renaldy6:01 PM

Saya Buat Blog Ini Via Hp

Filled under:

Ketika demam ngeblog menyerang orang orang, sayapun ingin terjangkiti tapi sayang hasrat terbentur sarana yang terbatas, disini saya tidak menemukan warnet yang menyediakan ruangan khusus bagi wanita.

Sampai kemudian saya memiliki Hp dengan jaringan gprs yang dapat mengakses internet, saya mulai ngotak ngatik, dan masyaAllah saya takjub dengan hasilnya. Hp saya ternyata tidak saja terbatas pada fungsinya sebagai alat komunikasi, tapi memiliki fungsi beragam yang luar biasa. Diantaranya, ya untuk mewujudkan satu impian kecil saya diatas tadi.
Alhamdulillah bini'matihi tatimmushsholihat, kemudian semakin berterima kasihlah saya dan bertambah cinta pada orang yang menghadiahi hp ini. Terngiang kembali pesannya ketika hendak memberi hp ini " semoga bisa ade gunakan untuk da'wah" dan "bisnis" tambahku :). Jangan jangan terbesit tanya dipikiran teman teman, siapa sih orangnya? He he. Siapa lagi kalau bukan pujaan hati, suami tersayang.

Inilah hadiah itu dan yang membantu saya membuat blog ini. Nokia 9300 Communicator

Dan kali ini saya ingin sharing ilmu dengan teman teman, berbagi pengalaman, melalui blog ini, yang saya buat dengan hp saya sendiri.
***
Bagaimana saya membuat blog via HP?

Membuat blog itu ternyata sangat mudah karena tidak memerlukan keahlian khusus dan pengetahuan kode HTML. Apalagi ditunjang dengan banyaknya website yang menyediakan blog gratis dan menawarkan beragam kemudahan bagi penggunanya. Blog dapat diatur hanya dalam hitungan menit, sangat sederhana dan mudah.
Pada kesempatan kali ini saya mencoba menuliskan bagaimana mendaftar atau log in ke blogger.

Nah berikut tutorialnya:
1. Download aplikasi OperaMini melalui web browser di hp anda. Anda bisa mendapatkannya dari situs resminya http://
www.oporamini.com atau dari http://wap.getjar.com. Jika di hp anda telah ada browsing opera mini, langsung melangkah pada tahap ke 2.

2. Buka aplikasi OperaMini anda, ketikkan dikolom paling atas alamat url http://www.blogger. com

3. Cari dan klik "ciptakan blog anda/create your blog now" atau "masuk/ log in' jika anda telah memiliki account google. Jika anda belum memiliki account google. Anda akan segera diarahkan kehalaman pendaftaran.

4. Pada halaman pertam 'ciptakan sebuah account google/ create account', isikan username, nama awal, nama akhir, alamat email dan password. Anda juga akan diminta membaca vertivikasi kata dan penerimaan persyaratan, klik box dibagian bawah sebagai persetujuan. Setelah itu klik tombol lanjutkan.

5. Setelah itu anda akan mendapatkan halaman kedua 'beri nama blog anda/ name blog. Masukkan judul blog yang ingin anda buat, alamat blog, klik cari ketersedian, isikan verifikasi kata yang terlihat dikotak dibawahnya, klik lanjutkan/ continue jika nama yang anda pilih masih tersedia atau pilih nama lain blog yang ditawarkan oleh blogspot.

4. Pada halaman ketiga pilih template blog yang anda inginkan atau biarkan saja karena dapat anda atur nanti. Klik lanjutkan/ continue.

5. Tunggu proses yang berlangsung sampai tampil informasi 'Blog anda sudah jadi/ your blog has been created'. Dan anda dapat memulai posting pertama anda.

Semoga bermanfaat!!!

InsyaAllah akan ada info terkait lainnya, bagaimana ngeblog via HP. Juga diantara fungsi hp lainnya, menjadikan hp sebagai modem bagi komputer atau laptop anda mengakses internet.

Posted By Ekho Renaldy6:00 PM

Membuat Efek Stabilo/ Background Tulisan

Filled under:

Kalau sebelumnya anaa pernah membuat postingan cara membuat background pada postingan, kali ini anaa ingin sharing lagi cara membuat efek stabilo atau cara membuat background pada tulisan. Seperti ini: 
Contoh tulisan Dengan Efek Stabilo

Contoh tulisan Dengan Efek Stabilo
Bagaimana cara membuatnya? Mudah saja hanya dengan menambahkan code berikut

<span style="background-color:#FFFFB3;"> Disini letak tulisan yang ingin diberi efek stabilo </span>
Untuk menambahkan code tersebut anda harus dalam edit HTML.
Untuk melihat code warna dapat merujuk disini

Posted By Ekho Renaldy6:00 PM

Ngeblog Offline Tanpa Terhubung Ke Internet

Filled under:


Mungkin teman-teman sudah pernah mendengar atau bahkan sudah tak asing lagi dengan Windows Live Writter, tapi saya yakin tidak menutup kemungkinan ada diantara pengunjung yang belum mengetahuinya, maka saya memandang perlu untuk mempublikasikan hal ini dalam postingan saya kali ini, postingan yang saya ketik menggunakan aplikasi yang akan kita bahas saat ini.
Bagi kita yang koneksi internetnya lambat atau sering putus-putus, atau ingin ngirit besar biaya penggunaan internet untuk blogging maka ini adalah merupakan sebuah kabar gembira. Saat ini kita bisa ngeblog tanpa terhubung dengan internet atau ngeblog offline, tanpa harus sign in ke blogger dan masuk pada dasbor. Lho kok bisa? Jawabnya pasti bisa dengan Windows Live Writter (WLW).
Apakah Windows Live Writter (WLW) itu? WLW adalah salah satu sofware atau produk yang baru saja dirilis oleh Microsoft, sebuah aplikasi editor untuk mempublikasikan postingan kita ke layanan blog paling populer, termasuk Windows Live Spaces, SharePoint, Wordpress, Blogger, LiveJournal, TypePad, Community Server dan banyak lagi.
Jika kita sudah biasa dan akrab menggunakan Microsoft Word, maka kita tidak akan kesulitan lagi menggunakan WLW, bahkan tanpa belajar.
Asyiknya ngeblog offline dengan WLW:
1. Yang pertama karena ini gratis (sukanya yang gratis mulu), tidak perlu sign in lagi ke blogger.
2. Area untuk mengetik ditampilkan secara penuh, sehingga jika kita sudah memiliki artikel diword tinggal copy paste saja (senangnya). Kalau punya banyak artikel tinggal kita atur kapan akan dipublikasikan dengan menset publish date disebelah kanan bgian kategori. Dan menerbitkannya saat kita online.
3. Kita bisa mengupload foto (bahkan lengkap dengan fasilitas edditing dan effecnya, keren khan?), video link, peta, tag, hiperlink, table dan lain lain.
4. Memungkinkan pula untuk mencari tulisan-tulisan yang ada di Local Drafts, Recently Published, atau tulisan terbaru yang sudah diambil langsung dari blog secara online. Untuk yang terakhir ini, terbatas pada jumlah tulisan yang diambil, bukan untuk keseluruhan tulisan pada blog.
5. Dan fitur kerennya lagi preview post kita karena diawal konfigurasi tool aplikasi ini juga mendownload template kita. Jadi hasilnya nanti InsyaAllah sama persis dengan postingan kita diWLW ini. Dengan fitur ini kita juga bisa melihat kode HTMLnya jadi jangan khawatir tidak bisa buat read morenya. He3.
Nah ingin mencoba aplikasi ini, silahkan download langsung  disini atau disini 

Sumber: www.home.live.com dengan bantuan google translate, jadi maaf kalau ada bahasa yang kurang pas! Dan berbagai sumber lainnya.

Posted By Ekho Renaldy5:59 PM

Menambahkan Effect JQuery Link Nudging Pada Tabel

Filled under:


link-nudgingJQuery link nudging adalah effect animasi pada link hasil dari penambahan padding kiri, effect ini akan nampak saat kita menyentuhkan pointer/mouse  pada link, link akan bergerak kekanan atau bergoyang. Seru juga jadinya, tertarik ingin menerapkan JQuery Link Nudging pada blog sobat? Silahkan ikuti tutorial berikut atau terlebih dahulu silahkan lihat demo effect JQuery link nudging pada tabel di blog ini

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Rancangan>>> Edit HTML
2. Tambahkan Script JQuery berikut diatas kode </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
Catatan: abaikan langkah kedua bagi sobat yang sudah menginstal script JQuery diatas pada template blogger sobat.
3. Tambahkan lagi script berikut dibawah script JQuery tadi:
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#Label1 li&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script><!-- end LinkNudging -->
4. Simpan, dan lihat hasilnya pada blog sobat.
Mudah bukan? Selamat mencoba, semoga berhasil dan bermanfaat.
Resource David Wals
Demo 

Posted By Ekho Renaldy5:57 PM

Cara Membuat Tabber Tab Dengan JQuery

Filled under:

Postingan sebelumnya saya pernah mengetengahkan cara membuat tabber tab atau tab view dengan bantuan JQuery part 1. Namun tabber tab tersebut memiliki beberapa keterbatasan, diantaranya tidak dapat menambahkan beberapa widget umum seperti arsip blog, label, kecuali dengan memasukkan link widget yang saya sebutkan tadi dengan cara manual. Sedangkan tabber tab dengan JQuery part 2 ini, kita dapat menembahkan fitur atau widget tadi dengan mudah, cukup dengan mendrag/ memindahkan widget kesidebar.
Sedang kegunaan tabber tab ini sangat membantu menghemat ruang sidebar blog sobat. Karena sobat dapat memberikan fitur lebih pada wilayah tunggal sidebar tidak terbatas sekedar recent post, recent comment, random posts, tapi juga lebel/ kategori, daftar link, profil dan banyak lagi.
Nah tertarik ingin membuat tabber tab dengan JQuery part 2 ini? Silahkan ikuti tutorial berikut:
Tabber Tab Dengan Jquery #2
Langkah Pertama:
1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan kode CSS berikut diatas tag atau kode ]]></b:skin>
/* Tabbed Sidebar Widgets
--------------------------------- */
.widget-wrapper2{
    border:1px solid #494e52;
    background-color:#636d76;
    padding:8px;
}
.widget-tab {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#FFFFFF url(http://sites.google.com/site/amatullah83/bg/tabcontentbg.gif) repeat-x scroll left bottom !important;
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}
.widget-tab  ul {
    margin:0px;
    padding:0px 20px 0px 20px;
}
.widget-tab  ul li {
    list-style:none;
    border-bottom:1px solid #d6dde0;
    padding-top:10px;
    padding-bottom:10px;
    font-size:13px;
}
.widget-tab  ul li:last-child {
    border-bottom:none;
}
.widget-tab  ul li a {
    text-decoration:none;
    color:#3e4346;
}
.widget-tab  ul li a small {
    color:#8b959c;
    font-size:9px;
    text-transform:uppercase;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    position:relative;
    left:4px;
    top:0px;
}
.tab-content  ul li a:hover {
    color:#a59c83;
}
.tab-content  ul li a:hover small {
    color:#baae8e;
}
.active-tab{
background:#FFFFFF url(http://sites.google.com/site/amatullah83/bg/tabtopbg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;       
}
ul.tab-wrapper {
    margin:0px; padding:0px;
    margin-top:5px;
    margin-bottom:6px;
}
ul.tab-wrapper li {
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#191919 url(http://sites.google.com/site/amatullah83/bg/tabinactivebg.gif) repeat-x scroll left top;
border:1px solid #464C54;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:2em;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin-right:1px;
padding:8px 14px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}
Cataan CSS diatas masih bisa sobat modifikasi lagi sesuaikan dengan blog sobat. Untuk mengganti warna silahkan lihat tabel kode warna disini. Image lain yang bisa sobat gunakan tabtopbg tabinactivebg 
3. Tambahkan Script JQuery berikut sebelum tag atau kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
Catatan: Bagi sobat yang pernah menambahkan atau ditemplate sobat sudah terdapat script JQuery maka langkah kedua abaikan saja,
4. Kemudian tambahkan pula script berikut dibawah script JQuery tadi:
<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar1";
</script>
<script type="text/javascript" src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bloggertabv1.0-min.js.txt'></script>
Catatan: Tab dari kode diatas terdiri dari 3 tab. Untuk menyesuaikan jumlah tab dengan keinginan sobat, silahkan ganti angka 2 dengan jumlah tab yang sobat inginkan, awal tab dimulai dengan angka 0. Sedangkan sidebarname adalah sidebar id.
5. Selanjutnya cari kode HTML berikut:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
Sekarang ganti tulisan berwarna merah dengan sidebar id dari tabber tab, yaitu sidebar 1
6. Selesai.
Sekarang sobat bisa menambahkan widget yang diinginkan pada bagian elemen halaman, pastikan setiap widget memiliki nama. Kemudian drag ke sidebar. Simpan dan simpan lihat hasilnya diblog sobat.
Lihat demo disini
Terima kasih Semoga Bermanfaat ...

Posted By Ekho Renaldy5:56 PM

Sunday, January 22, 2012

Newsworld Theme Wordpress dari Deluxe Themes

Filled under:

Jika teman-teman ada yang menginginkan theme wordpress untuk portal berita yang komplit dengan bermacam-macam fitur yang dilengkapi dengan slider gambar yang menarik. Saya sarankan untuk memakai Newsworld Theme dari Deluxe Theme. NewsWorld adalah theme Wordpess premium yang unik dari Deluxe Theme, NewsWorld memungkinkan Anda untuk menjalankan sebuah portal berita hanya dalam beberapa menit. Dengan tambahan fitur ajax secara otomatis theme ini akan merefresh halaman.

Di samping itu theme ini juga menampilkan arsip yang ditampilkan dengan dua metode yang berbeda. Bagi yang suka memonitisasi blog theme ini sangat cocok karena theme ini juga dilengkapi beberapa kolom yang dipakai untuk memasang ikan, seperti di header, di bawah header juga bisa diletakkan di footer. Anda tinggal masukkan kode iklan yang diinginkan tidak perlu lagi untuk mengedit kode-kode yang ada di dalam style.css maupun kode php nya. Dengan menggunakan fasilitas domain dot.tk dan hosting gratisan dari 000webhost, saya juga sudah membuktikan theme ini disini, sedikit modifikasi pada header.php dan single.php tampilan blog menjadi lebih menarik.

newsworld theme maskolis

Berikut ini adalah fitur lengkap yang ditawarkan Newsworld theme :
  • Original PSD Template Included!
  • Control panel to manage theme options
  • Simple Installation (instructions, how-to guide included)
  • A unique blog layout featuring a super presentation of blog posts
  • One of a kind News Filter Module to browse all blog posts.
  • Ajax-powered Archive Template with various display options
  • 12 different sorting options
  • Unique content tagging for news, photo, or video content
  • Ajax Pagination in Archives
  • Custom comment pagination system included
  • Automatic Thumbnail Creation & Caching
  • Ad Manager module built-in, ad rotation, ad monitoring, and more
  • Custom photo gallery template
  • QuickVideo Publisher to post videos from 60+ video sites easily
  • Fully-widgetized Sidebar (no hardcoded widgets)
  • Custom widgets to show weather, galleries, advertisements, etc.
  • Compatible with WordPress 3.0 or higher
  • Compatible with all modern browsers
Fiturnya sangat lengkap dan cocok untuk blog portal berita, kelemahan pada theme ini adalah pada loadingnya yang cukup lamban karena banyak plugin yang mesti diinstal seperti WP-Postrating, WP-email dan lain-lain. Tetapi bagi Anda yang sering bermain dengan kode-kode PHP hal itu tak terlalu sulit karena Anda bisa mempercepat loading misalnya menghemat Quota Bandwidth dengan HTTP Compression atau melalui penggabungan style.css, atau bisa juga dengan menambah kecepatan loading dengan memasang plugin seperti WP Super Cache atau W3 Total Cache dan sejenisnya.

Oke, dibawah ini saya lampirkan dimana Anda dapat melihat demonya dan bisa mendownloadnya secara gratis, jika ada kesulitan dalam memasang theme ini bisa dikonsultasikan lewat email saya. Pada artikel selanjutnya saya akan mereview satu theme lagi yang tak kalah menarik dengan Newsworld yaitu Newspapertimes dari Magazine3

Demo :
http://deluxethemes.com/newsworld/

Download :
http://www.mediafire.com/?1s6cbuacy1y7ibh
http://megaupper.com/files/0KCQ7RXU/newsworld.zip
http://www.mirrorcreator.com/files/WENDUACB/newsworld.zip_links

Posted By Ekho Renaldy9:01 PM

NewsPaper Times Magazine Theme Wordpress dari Magazine3

Filled under:

Seperti janji saya pada artikel sebelumnya, kali ini saya akan mereview satu lagi theme wordpress yang tak kalah menarik dengan Newsworld Theme. Fiturnya juga lengkap (lihat di bawah), kelebihan dari theme ini loadingnya ringan dan tidak ada plugin yang mesti dipasang untuk mensupport tampilan theme ini. Secara umum Wordpress sekarang lebih dari sebuah aplikasi blogging sederhana. Sehingga dapat digunakan untuk menjalankan situs web lengkap, sama seperti Content Management System (CMS) lainnya. Anda dapat membuat fitur penuh, konten berat, situs berita atau situs majalah online pada platform Wordpress.

Newspapertimes adalah premium Wordpress Theme dengan tata letak yang unik dan skema warna yang menarik. Muncul dengan pilihan warna lengkap yang akan membuat Anda dengan mudah mengubah tampilan setiap masing-masing  blok kategori. Selain itu, Newspapertimes dilengkapi dengan panel pilihan theme khusus, dimana Anda dapat mengedit atau memodifikasi berbagai pilihan seperti perubahan logo, setup fitur kategori, penyesuaikan navigasi, dan mengelola iklan. Tiga halaman kustom template dapat Anda digunakan dengan mudah untuk menambahkan contact form, dan halaman sitemap arsip penuh ke situs. Demo yang saya buat dengan menggunakan fasilitas domain dan hosting gratisan menggunakan Theme ini bisa dilihat disini.


Berikut ini fitur lengkap dari Newspapertimes :
  • Premium News or Magazine Style WordPress Theme.
  • Unique front page layout.
  • Widgetized areas.
  • Featured content slider.
  • Attractive news ticker.
  • Beautiful color scheme.
  • Custom page templates.
  • Custom logo and background option.
  • WordPress 3.0 compatible navigation.
  • Theme control panel.
  • Advanced color options.
  • Automatic Thumbnails.
  • Unique popular posts widget.
  • Threaded comments.
  • Related Posts With Thumbnails.
  • Social bookmarking module.
  • Advertisement Options.
  • Optimized for search engines.
  • Compatible with latest version of WordPress.
  • Works on all modern web browsers.
Jika anda masih kurang yakin dengan kecepatan loading dari theme ini, bisa dilihat demo yang sudah saya modifikasi navigasi menunya disini. Untuk lebih jelasnya anda bisa juga melihat demo asli pada link di bawah. Dan anda juga bisa mendownloadnya secara gratis.

Demo :
http://magazine3.com/newspapertimes/demo/

Download :
http://www.mediafire.com/?4z8iz8ug8970gu9

Posted By Ekho Renaldy8:58 PM

Memasang Tombol Twitter, Facebook Share dan Facebook Like di Blog

Filled under:

Anda tentu tau apa itu Twitter, Facebook atau tombol share lainnya. Saat ini situs-situs jejaring sosial terutama Facebook dan Twitter merupakan jenis situs online yang paling banyak diakses oleh pengguna internet di seluruh dunia, dengan salah satu layanan yang banyak digunakan adalah kemudahan bagi penggunanya untuk menyebarkan/membagikan aka share artikel online yang ada di berbagai website/blog.

Bagi pemilik atau pengelola website/blog, tentunya hal tersebut menjadi salah satu peluang untuk memperbesar tingkat kunjungan ke situsnya melalui Facebook dan Twitter ini, dengan memberikan kemudahan bagi pengunjung untuk share artikel yang ada di blog, salah satunya adalah dengan memasang tombol share Facebook dan Twitter.


Sebelumnya pernah disampaikan secara terpisah cara memasang tombol share Twitter dan Facebook, dan juga tombol Facebook Like. Kali ini masih soal cara memasang tombol Facebook dan Twitter, tapi sedikit berbeda dari cara sebelumnya itu. Pemasangan tombol share kali ini menggunakan layanan dari LinksAlpha, yang menyediakan tombol share yang menggabungkan ketiga tombol tersebut (Facebook Share, Facebook Like, dan Share Twitter) untuk ditampilkan menjadi satu baris saja, sehingga terlihat lebih simpel, kompak dan lebih rapi.

Sebenarnya, tombol bernama “1-Click Retweet/Share/Like” yang disediakan oleh LinksAlpha ini bisa anda pasang dengan menggunakan kode yang diberikan di situs tersebut. Tapi sayangnya, kode tombol yang disediakan hanya untuk halaman / URL statis saja (Website), jadi tidak bisa tampil secara otomatis membaca URL/alamat setiap artikel blog. Kecuali anda install plugin untuk blog WordPress (self-hosted), atau blog TypePad.

Untuk platform blog/situs lainnya, tenang saja, bisa diakali kok. Berikut ini cara pemasangannya.

1. Pasang di template Blogspot/Blogger

Silahkan login, masuk ke tab Design/Layout, lalu klik Edit Template, centang pilihan Expand Widget Templates. Cari kode <data:post.body/> di template anda, lalu di atas/di bawahnya pasang kode ini:
view plainprint?
  1. <iframe id='websites_iframe' expr:src='&quot;http://www.linksalpha.com/social?link=&quot; + data:post.url + &quot;&quot;' frameborder='0' height='25px' scrolling='no' width='320px'/>  

2. Pasang di template WordPress.ORG (self hosted)

Anda bisa install plugin ini, atau bila anda seperti saya  yang tidak suka install terlalu banyak plugins (karena semakin banyak plugins, semakin berat beban server hosting), silahkan pasang kode berikut ini. Silahkan login, masuk ke Appearance, lalu klik Editor (Themes editor). Silahkan buka template Single Post (single.php) atau Page Template (page.php). Carilah kode <?php the_content(); ?>, lalu di atas/di bawahnya tambahkan kode ini:
view plainprint?
  1. <iframe id="websites_iframe" src="http://www.linksalpha.com/social?link=<?php the_permalink() ?>" scrolling="no" frameborder="0" height="25px" width="320px"></iframe>  


3. Pasang di Sidebar/Widget/Webpage (javascript)

Ini adalah kode generik untuk semua website (tentunya yang membolehkan pemasangan kode javascript) tanpa perlu edit template/theme, seperti pada demo pemasangan di artikel ini.
view plainprint?
  1. <script type="text/javascript">  
  2. document.write('<ifr'+'ame id="websites_iframe" src="http://www.linksalpha.com/social?link=' + escape(location.href) + '" scrolling="no" frameborder="0" height="25px" width="320px"></ifr'+'ame>');  
  3. </script>  

Untuk blog WordPress.COM (atau blog lainnya yang tidak mendukung pemasangan kode script atau pun iframe, alternatifnya bisa menggunakan layanan dari situs GetSocialLive (klik disini). Tapi terpaksa pasang tombol satu-satu di setiap artikel

Posted By Ekho Renaldy8:47 PM

Membuat Recent Post Thumbnail + Spy di Blog

Filled under:

recent post maskolisKali ini saya akan memberikan tutorial tentang gimana caranya membuat recent post yang ada gambarnya, nggak itu aja gambarnya bisa jalan lagi, hebat kan? Karena dengar-dengar fungsi atau keberadaan recent post akan sangat berguna (terasa dibutuhkan) ketika pengunjung berada pada halaman posting. Kemungkinan besar mereka ingin mencari link posting-posting terbaru yang masih tergolong fresh.

Recent post kali ini ada sedikit berbeda dengan recent post yang  saya postingkan kemarin  yang hanya menyediakan fasilitas thumbnailsnya saja, teman teman bisa lihat di homepage blog ini. Tapi kalau yang ini agak sedikit berbeda, karena selain memiliki thumbnail (gambar), disertakan juga tampilan tanggal postingan dan jumlah komentar, dan tentu dengan efek spy. Sangat menarik untuk di coba teman-teman. Recent post ini saya dapatkan dari hasil browsing ke tempatnya om Abu Farhan .

Silahkan lihat demo ini bagi yang belum melihatnya, soalnya widgetnya saya tampilkan di home saja. Baik, langsung kita menuju ke langkah-langkah pembuatannya  :
  1. Log in ke Blogger
  2. Kemudian pilih Design --> Page Element
  3. Add gadget -->> HTML/Javascript
  4. Copy paste kode di bawah ini ke gadget sidebar teman-teman.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.hariezgrafor.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

Save-->> Selesai.

Catatan Penting :
  1. Ganti URL ( http://www.hariezgrafor.blogspot.com/ ) dengan URL teman .
  2. Atur lebar dan sesuaikan dengan lebar sidebar teman-teman.
  3. Apabila ingin menyesuaikan lagi dengan background template teman-teman, bisa menggantinya dengan background yang lain.
  4. Sesuaikan juga lebar dan tinggi gambar (thumbnails) nya.
  5. Berapa post yang teman-teman ingin tampilkan bisa di ubah sesuai selera.
Itu tadi sedikit gambaran bagaimana caranya untuk membuat recent post thumbnail yang bisa gerak naik turun, semoga berhasil.

Sekian dari saya. Semoga bermanfaat

Posted By Ekho Renaldy8:44 PM

Membuat Iklan Melayang dengan Tombol Close

Filled under:

Objek melayang atau sering juga di sebut dengan Float Top Bar, sebuah jendela kecil yang muncul dari atas halaman setiap kali kita mengunjungi Website atau Blog. Float Top Bar ini biasanya berisi Content Iklan ataupun sebuah Form SubScribe sehingga pasti terlihat oleh pengunjung Website atau Blog kita. Untuk membuat Iklan melayang seperti ini sangatlah mudah, hanya dengan beberapa langkah, maka Iklan Melayang tersebut sudah bisa terpasang pada Website atau Blog Anda.


 Oke, berikut ini adalah langkah-langkah pembuatannya :
  1. Login Ke Blogger.com dengan Akun anda masing-masing Pastinya
  2. Masuk ke Tab Tata Letak
  3. Pilih Elemen Halaman
  4. Tambah Gadget Pilih HTML / JAVASCRIPT
  5. Dan copy kode di bawah ini kedalamnya yah
<a onblur="try {parent.
deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivBuMzBhRUwcWofjXEli8rJyyTAl9sX1bF-ODZGKNnm4uV_e4QZVzx_wHCWsAd5Xomi3ItZi81AxYTeiH8KEv-4tb_l05ExrfqvFQDrL515EuLzHF_rj9G7pLMOGpzjKY5OoHk3wmQTb8/s1600-h/Widget.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivBuMzBhRUwcWofjXEli8rJyyTAl9sX1bF-ODZGKNnm4uV_e4QZVzx_wHCWsAd5Xomi3ItZi81AxYTeiH8KEv-4tb_l05ExrfqvFQDrL515EuLzHF_rj9G7pLMOGpzjKY5OoHk3wmQTb8/s400/Widget.JPG" alt="" id="BLOGGER_PHOTO_ID_5433478876639914642" border="0" /></a>

<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close][Klik 2x]:.
</a>
</div>
<center>

Masukan Kode iklan atau Gambar yang anda inginkan di sini

</center>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></center></div></div>
    6. Simpan

Untuk tulisan yang berwarna merah, bisa teman-teman ganti dengan kode iklan, gambar ataupun tulisan yang diinginkan, selamat mencoba.

Semoga bermantaat

Posted By Ekho Renaldy8:39 PM

Membuat Tweet Box Dibawah Postingan

Filled under:

Tombol social bookmark akhir-akhir ini sangat diminati oleh para pengguna blogger untuk. mempopulerkan blognya. Selain Facebook yang membuat fitur likenya, Twitterpun tidak mau kalah dan kembali menyaingi facebook dengan menyediakan Tweet Box. Twitter box ini berfungsi untuk mempromosikan artikel kita di twitter. Seperti contoh pada halaman bawah postingan ini, anda bisa langsung menekan tombol Tweet, atau bisa juga diisi dengan kata-kata sendiri.

Tertarik untuk membuatnya? Dibawah ini akan saya jelaskan lahkah-langkah untuk membuatnya :
  • Kunjungi Penyedia Layanannya
  • Login dengan akun Twitter Anda, dan isikan data-data yang diminta untuk membuat aplikasinya. Seperti gambar dibawah ini

  • Isi Aplications Name Dengan Judul Suka-suka anda
  • Isi Aplications Website Dengan Url Blog anda
  • Kosongkan Organizations
  • Isi Call Back Url Dengan Alamat Blog Anda
  • Untuk Default Acces Type jangan lupa centang Read & Write 
  • Aplications Icon Tidak Perlu Diisi
  • Klik Register Application

Kemudian, akan muncul kotak peraturan seperti gambar diatas, dan klik I Accept, setelah itu akan muncul tab baru dengan kode Javascript dan API key nya. Salin script yang saya kotakkan seperti gambar dibawah ini
Kemudian login ke Akun Blogger Anda Masing-masing, klik rancangan >> Pilih Edit HTML >> Centang Expand Template WidgetDan Cari Kode </head> Jika sudah ketemu, masukkan kode yang tadi anda kopi tepat diatasnya Jika sudah, cari kode seperti dibawah ini:
<data:post.body/>
Jika Sudah Ketemu, Masukkan Kode dibawah ini Dan taruh tepat dibawah kode <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='bp_tweetBox'/>
<script type='text/javascript'>
bp_tweet_link=&quot;<data:post.url/>&quot;;
twttr.anywhere(function (T) {
T(&quot;#bp_tweetBox&quot;).tweetBox({
width: 560,
label: &quot;Retweet This&quot;,
defaultContent: &quot;RT @akun_twitter_anda <data:post.title/>&quot;+&quot; &quot;+bp_tweet_link
});
});
</script>
</b:if>

Simpan dan lihat hasilnya. Untuk yang diberi warna merah silahkan ganti sesuka anda. Sekian penjelasan dari saya, semoga dapat bermanfaat.

Posted By Ekho Renaldy8:38 PM

Membuat Efek Memindahkan Gambar Dengan jQuery

Filled under:

   Gambar dalam sebuah artikel sangat berarti dalam memperjelas isi atau konten yang sedang kita buat. Tampilan gambar juga bisa dimodifikasi sehingga menjadi lebih cantik, Setelah sebelumnya saya pernah membahas dalam mempercantik tampilan gambar dengan efek zoom, kali ini saya akan berbagi  lagi satu tips untuk memperindah gambar yang kita tampilkan di artikel, yaitu memindahkan gambar dengan jQuery. Maksud dari effect ini ialah kita dapat menggeser atau mendrag gambar sesuai dengan keinginan kita pada gambar posting kita atau gambar di blog kita. Untuk lebih jelasnya klik tombol demo dibawah ini, geser salah satu gambar yang ada disana.:


Nah jika temen-temen tertarik untuk membuatnya, perhatikan langkah-langkahnya di bawah ini :
  1. Login dulu di Blogger dengan akun anda.
  2. Pada dashboard pilih Rancangan >> edit HTML
  3. Jangan lupa Centang Expand Template Widget
  4. Klik Download template lengkap untuk jaga-jaga.
  5. Sekarang pasang Css kode dibawah ini diatas kode ]]></b:skin>
    .drag_gambar img { cursor: move;}
  6. Selanjutnya simpan script berikut diatas kode </head>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    $(document).ready(function() {
    $(&quot;div.drag_gambar img&quot;).draggable();
    });
    </script>
    Keterangan :
    Perhatikan kode script berwarna Kuning diatas, jika pada template anda sudah terdapat script tersebut, jangan dipasang lagi, pasang saja script yang berwarna merah.

  7. Kemudian klik Save/Simpan Template 
  8. Untuk penggunaannya pada gambar, anda bisa menggunakan kode berikut :
    <div class='drag_gambar'><img alt='KETERANGAN GAMBAR' src='URL GAMBAR'/></div>
Mudah bukan, tutorial ini sangat sederhana dan bisa memperindah tampilan gambar yang ada di artikel anda. Jika ada yang mau ditanyakan silahkan untuk mengisi kotak komentar yang ada di bawah. Selamat mencoba dan semoga bermanfaat.

Posted By Ekho Renaldy8:31 PM

Membuat Menu Navigasi Horizontal Glossy di Blog

Filled under:

    Kembali saya akan berikan tutorial dalam modifikasi menu navigassi horisontal di blog anda. Seperti yang sudah saya jelaskan sebelumnya menu navigasi pada blog merupakan elemen yang penting di  alam sebuah blog yang mementingkan penampilan dan style untuk setiap detilnya. Setelah sebelumnya saya memberikan tutorial membuat multi level menu drop down, kali ini saya akan berikan lagi penjelasan membuat menu horisontal glossy. contohnya ada pada gambar di bawah, atau langsung menuju disini.


Langsung saja. berikut ini tutorial membuat glossy horizontal menu
  1. Login ke blogger dengan akun anda 
  2. Kemudian pada dasbor  klik Rancangan >> Edit HTML 
  3. Tambahkan kode CSS berikut diatas tag  ]]></b:skin>
    /*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */
    /*Modified : IB  (http://www.maskolis.co./) */
    .glossymenu{
        position: relative;
        padding: 0 0 0 34px;
        margin: 0 auto 0 auto;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPyTErDAtvQdpAdd5-z2sNW4tKr_r-4CBye-MNgIxwD9k2rpoimkggItKnRAF7CMjItCTvKmZX5JPF4_VlSgTfKoxJ3zjkJxeWE59NhdUNFGD9M9pQsHdtVT9X0GWZe960k9k0mxHVeTE/s1600/maskolis+menu.png) repeat-x; /*tab background image path*/
        height: 46px;
        list-style: none;
    }
    .glossymenu li{
        float:left;
    }
    .glossymenu li a{
        float: left;
        display: block;
        color:#000;
        text-decoration: none;
        font-family: sans-serif;
        font-size: 13px;
        font-weight: bold;
        padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
        height: 46px;
        line-height: 46px;
        text-align: center;
        cursor: pointer;   
    }
    .glossymenu li a b{
        float: left;
        display: block;
        padding: 0 24px 0 8px; /*Padding of menu items*/
    }
    .glossymenu li.current a, .glossymenu li a:hover{
        color: #fff;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU3AL5leejOALoZfBODEKnKFNW3eALbFsoBGjDgkNT9cUCNQywHtokt4se9tXzKHxp98ffxc2_zSc4BXq5Ac6uCmS8p-chkPCrlm1EfaR_LlGA9ucp7POf4N8Ow-z6emI3_Xw73WS5a9A/s1600/maskolis+nav.png) no-repeat; /*left tab image path*/
        background-position: left;
    }
    .glossymenu li.current a b, .glossymenu li a:hover b{
        color: #fff;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpw2r5PjqSbhSgQniGmKC_QsGFXDQIjDr1t2OraFwiPd6PpfAEb5XKv371Hkuro-z7W3F8HRCEwq-qkgKfHjP1V4gTpq1TOLm6h2bdrbCkABVMqzxDt0RbmMMi4DhvbARy2bwNewT5xRw/s1600/naskolis+leftnav.png) no-repeat right top; /*right tab image path*/
    }
    Jika gambarnya tidak cocok, bisa anda ganti sesuaikan dengan template yang dipakai. Di bawah ini adalah contoh gambar background yang bisa anda gunakan :
    image 
  4. Silahkan upload dulu image diatas ke tempat hosting masing-masing. 
  5. Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>
    <ul class='glossymenu'>
    <li class='current'><a href='http://www.maskolis.co.cc/'><b>Home</b></a></li>
    <li><a href='http://www.maskolis.co.cc/search/label/tutorial blog' title='tutorial blog'><b>Tutorial Blog</b></a></li>
    <li><a href='http://www.maskolis.co.cc/search/label/SEO' title='SEO'><b>SEO</b></a></li>
    <li><a href='http://www.maskolis.co.cc/search/label/wordpress' title='wordpress'><b>Wordpress</b></a></li>
    <li><a href='http://www.maskolis.co.cc/search/label/affiliate' title='affiliate'><b>Affiliate</b></a></li> 
    <li><a href='http://www.maskolis.co.cc/search/label/hosting' title='hosting'><b>Hosting</b></a></li> 
    </ul>
  6. Temen-temen bisa edit link dan anchor teks kode HTML diatas 
  7. Terakhir Save template anda
Memang banyak sekali menu navigasi horisontal yang dapat kita pakai untuk memperindah blog. Pada postingan selanjutnya saya akan coba memberikan cara membuat menu navigasi animasi dengan jQuery..Tunggu tanggal mainnya.....

Posted By Ekho Renaldy8:28 PM

Friday, January 20, 2012

Cara Pasang Fans Box Di Blog

Filled under:

kebetulan posting kali ini ialah " CARA PASANG FANS BOX FB " di blog. So kalau sobat sekalian sudah habis baca artikel ini jangan lupa di LIKE blogku ya
okey, here we go...

First :
- Buat halaman komunitas FB sobat. Tutorialnya dapat sobat lihat pada postingan sebelumnya yaitu Cara Buat Halaman FB blogger-emoticon.blogspot.com
- Klik tombol " sunting halaman " yang berada persis di bawah foto profil halaman.


- cari dan klik : "Promosikan Dengan Kotak Suka" ( lihat contoh screenshoot di atas, lihat bagian sidebarnya ).



- Sobat sekalian akan masuk pada pengeditan box, keterangannya sebagai berikut :
  • isilah Facebook page id sobat ( Note: Page id terdapat di ADDRESS BAR dan umumnya berupa angka. Copas ke kotak pengeditan Facebook Pages id ) Lihat gambar screenshoot di atas.
  • width: Lebar kotak, dapat sobat sesuaikan sendiri
  • connections: menampilkan jumlah fans yang menyukai halaman sobat
  • show stream: melampirkan posting pada dinding halaman fb
  • show header: menampilkan tulisan "temukan kami di fb" pada header box
- klik GET CODE bila telah selesai
- Dan akan muncul tampilan pop-up lalu copas kode iframe ke notepad

Di atas itu, baru first stepnya gan. Sebelum masuk ke ronde berikutnya, ku saranin sobat pada istirahat minum dulu deh.
blogger-emoticon.blogspot.com

Next...

- Sign in di BLOGGER.COM
- Pilih tab Rancangan
- Lalu Elemen Laman
- Klik tombol Tambah Gadget pada edit tata letak elemen laman
- pilih HTML/JAVASCRIPT
- Copas ( copy paste ) kode iframe yang disimpan dalam notepad tadi ke kotak konfigurasi HTML/JAVASCRIPT
-Klik SIMPAN dan Lihatlah hasilnya pada blog sobat.


Semoga berhasil !!!
See you next time...
:sleep: zzzzzzzzz

Posted By Ekho Renaldy5:08 AM

Friday, January 13, 2012

Cara buat Slide Menu horisontal dibawah posting

Filled under:

Menu horisontal ini terletak dibawah posting. Selain lebih fungsional karena letaknya dibawah posting, dilihat dari tampilannya menu horisontal ini memang sangat menarik. Sehingga tampilan web atau blog kita menjadi lebih bervariatif. Selain kelebihan diatas menu horisontal ini saya lengkapi dengan efek slide yang menggunakan fitur transition, agar tampil lebih dinamis.
Slide Menu horisontal ini saya buat dengan menggunakan kode CSS dan beberapa kode HTML tanpa menggunakan kode javascript ataupun jQuery, sehingga menu ini akan bekerja lebih ringan.


OK... bila anda berminat memasang tombol ini, silahkan anda bisa ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :
</head>

7. Copy kode dibawah ini dan paste sebelum kode </head>:

Posted By Ekho Renaldy7:53 PM

Slide Out Navigation With Apple Icon Style

Filled under:

Untuk Melengkapi Tutorial Blogger Pada Blog Filiex ini Saya Akan Menambahkan Tutorial Cara Membuat Slide Out Navigation With Apple Icon Style Yang Mungkin Akan membatu Mempercantik Halaman Blog Sobat Semua.

Untuk Melihat Atau Meninjau Demo Slide Out Navigation With Apple Icon Style Sobat Bisa Click Gambar Dibwah ini.


Bila Sobat Sudah Melihat Demonya Diatas Sekarang Saya Akan Paparkan Cara Membuat Dan Memasangnya Pada Halaman Blog Sobat Semua.
  • Seperti Biasa Silahkan Sobat Login Keakun Blogger Sobat.
  • Masuk Rancangan Lalu Pilih Edit HTML dan Centang Expand Template Widget.
  • Selanjutnya Silahkan Sobat Cari Kode ]]></b:skin> Dan Taruh Kode Dibawah ini Tepat Diatasnya.
.navigation{
position:relative;
margin:0 auto;
width:915px;
}
ul.menu{
list-style:none;
font-family:"Verdana",sans-serif;
border-top:1px solid #bebebe;
margin:0px;
padding:0px;
float:left;
}
ul.menu li{
float:left;
}
ul.menu li a{
text-decoration:none;
background:#7E7E7E url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMBsT8kShZH_RhNWyXuy8NA0J_M4dzMZkMKBHq8oc0JqvBbiFAZWap9sqr4STM6-YYkDBa0xaVu2_Bb_SyRHwhdW3N1Z0D9qnXtgySd2bSAp3nj5NsQqhT2KZIG_4XILzIVo8I00bo5tq1/s400/bgMenu.png) repeat-x top left;
padding:15px 0px;
width:128px;
color:#333333;
float:left;
text-align:center;
border-right:1px solid #a1a1a1;
border-left:1px solid #e8e8e8;
font-weight:bold;
font-size:13px;
-moz-box-shadow: 0 1px 3px #555;
-webkit-box-shadow: 0 1px 3px #555;
text-shadow: 0 1px 1px #fff;
}
ul.menu li a.hover{
background-image:none;
color:#fff;
text-shadow: 0 -1px 1px #000;
}
ul.menu li a.first{
-moz-border-radius:0px 0px 0px 10px;
-webkit-border-bottom-left-radius: 10px;
border-left:none;
}
ul.menu li a.last{
-moz-border-radius:0px 0px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
}
ul.menu li span{
width:64px;
height:64px;
background-repeat:no-repeat;
background-color:transparent;
position:absolute;
z-index:-1;
top:80px;
cursor:pointer;
}
ul.menu li span.ipod{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Cg10X5uAzPAkTouLvwUrNZ7PkLP8wKW2mrCgnLgoJrkShYJeeACRgU8ZV30Q8_PNtheoVg1cs2uQ55tECGaKMdMvsWq7jMQvzKkHcRNMOfhSoftq-54oLep8w3MkvSG8UYWxUvlRni3h/s400/ipod.png);
left:33px; /*128/2 - 32(half of icon) +1 of border*/
}
ul.menu li span.video_camera{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9exH3Z527GZeUdtgoNGZdug1sxR0OzN2gzbYRWnyfnqee9Yiw5mn9O-U4J-vOZluSy8ynjTWdeyOgROwnZPfwacbSdlIfPCnKszREJs2D03YWaXoN0l4hIihrH3JEn1yIlkcjTWF2eVOJ/s400/video_camera.png);
left:163px; /* plus 128 + 2px of border*/
}
ul.menu li span.television{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgymqd2aZWoCkoc6GQDdcJXE_Gyvh4dCIfMm9kDfpqGM6beHXfossnQx34SpsV-R4sbHqwWmRXcE44WvIJUO5QpxmVL9GFgVVDjt4Sih3y5su-u5O66V2eJicm7Od1mYLO8yr4aqicLLtd/s400/television.png);
left:293px;
}
ul.menu li span.monitor{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3d7J7jsaAVWzFEx_x9G0o8hWP2ngZY5wqK3vte7THJWrUa6cQigEXj3zFQDvl1sHYHkltACYpIe76tgx-ag9fjj-fGAgdqSS0hNtIHl75kUBf2p3eftbrZrmbiTEDbVthWoreFV_rcaYb/s400/monitor.png);
left:423px;
}
ul.menu li span.toolbox{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ9NWVWhl859ck3HlfCSgKWzKtyRACgohllHFpgFKoKqyIM51JU7EzLbQoguhmUYqNiD23nrvkB9DIAu6f0-bcg8-gVtJQfqcpOxRlNgQHeyCnlPe6KhMw65-Z29qNM3BuDB3flJAUTACS/s400/toolbox.png);
left:553px;
}
ul.menu li span.telephone{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc3zW9JxMzXW2ywBb9WzTPh3S8nwS9Ud7TV-u-fyDVNOkzL8K830tY6LmXjPdNgLrKIGFVxNH_RRIKOuTVdNU2eS45HyzkakMQg9U6XP9l9himD_ZEpxJfVpjNa5t2rsAHybqmywFUJf1N/s400/telephone.png);
left:683px;
}
ul.menu li span.print{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg90Po1BBzOu-uiyPzIGRKd6AMPSXGZY61ZZ7-Yc6LlfsFxRcaKhUu3dDehyO0gqpCmmnq-nyqGynSaI9IDxdMHV9ydwwh23LkYm3KIngCW4J7T-bKIRdVig_DdXtG5y0CJqs8jWvlIk-yN/s400/print.png);
left:813px;
}

  • Kemudian Sobat Cari Kode </head> Lalu Taruh kode Dibawah ini Tepat Diatasnya.
<script type="text/javascript" src="http://filiex.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
var d=1000;
$('#menu span').each(function(){
$(this).stop().animate({
'top':'-17px'
},d+=250);
});

$('#menu > li').hover(
function () {
var $this = $(this);
$('a',$this).addClass('hover');
$('span',$this).stop().animate({
'top':'40px'
},300).css({
'zIndex':'10'
});
},
function () {
var $this = $(this);
$('a',$this).removeClass('hover');
$('span',$this).stop().animate({
'top':'-17px'
},800).css({
'zIndex':'-1'
});
}
);
});
</script>

  • Terakhir Silahkan Sobat Cari Kode </body> Dan Taruh Kode Berikut Tepat Diatasnya.
<div class="navigation">
<ul class="menu" id="menu">
<li><span class="ipod"></span><a href="URL" class="first">Players</a></li>
<li><span class="video_camera"></span><a href="URL">Cameras</a></li>
<li><span class="television"></span><a href="URL">TVs</a></li>
<li><span class="monitor"></span><a href="URL">Screens</a></li>
<li><span class="toolbox"></span><a href="URL">Tools</a></li>
<li><span class="telephone"></span><a href="URL">Phones</a></li>
<li><span class="print"></span><a href="URL" class="last">Printers</a></li>
</ul>
</div>

  • Bila Semua Langkah Diatas Sudah Selesai Silahkan Save Atau Simpan Template Sobat.
  • Lihat Hasilnya.
  • Selesai.

Posted By Ekho Renaldy7:46 PM

Sensitive Top Menu With JQuery

Filled under:


Pada Postingan Kali ini Saya Kembali Mengajak Sobat Semua Belajar Tutorial Blogger Yang Bisa Membuat Blog Sobat Semua Menjadi Keren Dan Semenarik Mungkin. Jujur Saja Saya Tidak Tau Apa Nama Tutorial ini Karna Saya Tidak Sengaja Berjumpa Dengan Suatu Website Dan Melihat Ada Menu Yang Sangat Menarik Dihalamannya. Ya Dengan Memaksakan Diri Sambil Memutar Kepala Saya Coba Menelusuri Source Pada Template nya Dan Beberapa Jam Kemudian Akhirnya Sepenuhnya Saya Dapat Menirukan Menu Tersebut Dan Saya Namakan Sensitive Top Menu With JQuery.

Bila Sobat Tertarik Dengan Sensitive Top Menu With JQuery Tersebut, Silahkan Simak Tutorial Dibawah ini Dengan Cermat.

  • Silahkan Login Ke Akun Blogger Sobat.
  • Masuklah Pada Rancangan Lalu Pilih Edit HTML Dan Awas Jangan Lupa Centeng Expand Template Widget.
  • Setelah itu Carilah Kode ]]></b:skin> Pada Template Sobat Dan Salinlah Semua Kode Dibawah ini Tepat Diatas ]]></b:skin> Tadi.
/*sensitive top menu hariez*/
#ssmenu{
top: .4em;
left:2em;
width:230px;
position: fixed;
z-index: 200;
}
#hitop {
margin:0 ;
padding:0;
height:55px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTaahvU35ssVaIKOyF3hg6PLzTV63ClmONVM30ZVj6YoPGtB0zZD9Mvr1YLAGM8VEN7-9htkAwVJrBpAu_wQgy33wWZItkxERt044VObog8mR51_61i_hEhg9XFgRPPWSH4O3QzrEChzmU/s400/filiex-abstract.png) no-repeat 0 0;
border-bottom:1px solid #000;
}
#cnmenu{
margin:0 ;
padding:0;
width:230px;
background:url(https://lh4.googleusercontent.com/-QDHA9dSHGyg/TuyZtBjjnFI/AAAAAAAAF30/sEpK9nCYyYk/s800/malubg.png) repeat-y;
}
.hidown{
margin:0;
padding:0;
height:78px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTaahvU35ssVaIKOyF3hg6PLzTV63ClmONVM30ZVj6YoPGtB0zZD9Mvr1YLAGM8VEN7-9htkAwVJrBpAu_wQgy33wWZItkxERt044VObog8mR51_61i_hEhg9XFgRPPWSH4O3QzrEChzmU/s400/filiex-abstract.png) no-repeat 0 -80px;
display:block;
border-top:1px solid #302F2F;
}
span.bootter,span.upter{
width:27px;
height:26px;
display:block;
margin-left:103px;
margin-top:35px;
}
span.bootter{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTaahvU35ssVaIKOyF3hg6PLzTV63ClmONVM30ZVj6YoPGtB0zZD9Mvr1YLAGM8VEN7-9htkAwVJrBpAu_wQgy33wWZItkxERt044VObog8mR51_61i_hEhg9XFgRPPWSH4O3QzrEChzmU/s400/filiex-abstract.png) no-repeat 0 -158px;
}
span.upter{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTaahvU35ssVaIKOyF3hg6PLzTV63ClmONVM30ZVj6YoPGtB0zZD9Mvr1YLAGM8VEN7-9htkAwVJrBpAu_wQgy33wWZItkxERt044VObog8mR51_61i_hEhg9XFgRPPWSH4O3QzrEChzmU/s400/filiex-abstract.png) no-repeat -27px -158px;
}

#cnmenu ul, #cnmenu li{
list-style-type:none;
}
#cnmenu ul li {
margin: 0;
padding : 5px;
border-top:1px solid #302F2F;
border-bottom: 1px solid #000;
}
#cnmenu ul li a {
padding-left:5px;
text-decoration:none;
display:block;
}
#cnmenu ul li:hover {
background-color:#212121;
}
/* sensitive top menu hariez*/

  • Selanjutnya Carilah Kode </head> Pada Template Sobat, Lalu Salinlah Kode Berikut Dan Taruh Tepat Diatasnya Kode </head> Tadi.
<script type='text/javascript'>//<![CDATA[

$(document).ready(function () {

$('#cnmenu').hide();
$(window).load(function () {
$('#cnmenu').slideDown(1500, function () {
$(this).slideUp(200);
});
});
$('#ssmenu').mouseenter(function () {
$('#cnmenu').slideDown(1000, function () {
$('.hidown span').removeClass('bootter').addClass('upter');
});
});
$('#ssmenu').mouseleave(function () {
$('#cnmenu').slideUp(200, function () {
$('.hidown span').removeClass('upter').addClass('bootter');
});
});

});
//]]>

</script>

  • Nah Bila Langkah Diatas Sudah Selesai, Sekarang Sobat Bisa Save Atau Simpan Tempalte Sobat.
  • Setelah itu Silahkan Sobat Masuk Pada Elemen Laman Kemudian Klik Tambahkan Gatget Lalu Pilih Yang HTML/Javascript.
  • Bila Jendela HTML/Javascript Sudah Terbuka, Silahkan Sobat Salin Semua Kode Dibawah ini Lalu Simpan.
<div id="ssmenu">
<div id="hitop"></div>
<div id="cnmenu">
<ul>
<li><a href="#">Filiex Boy</a></li>
<li><a href="#">Cinema Area</a></li>
<li><a href="#">Somia Story</a></li>

<li><a href="#">Full Software</a></li>
<li><a href="#">Full Mega Game</a></li>
<li><a href="#">Blogger Tutorial</a></li>
<li><a href="#">Komputer tutorial</a></li>
<li><a href="#">Blogger template</a></li>
<li><a href="#">Google Plus</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</div>
<div class="hidown"><span class="bootter">&nbsp;</span></div>
</div>

  • Terakhir Lihat Hasilnya.
  • Selesai.

Cukup Sekia untuk Tutorial Blogger Kali ini Dan Silahkan Tinggalkan Komenter Bila Ada Pertanyaan Dan Keluhan. Terima Kasih .

Posted By Ekho Renaldy7:44 PM
Subscribe to: Comments (Atom)

 

About Hariez Geforce Blog

Blablablabla