Showing posts with label Tip dan Triks Blogger. Show all posts
Showing posts with label Tip dan Triks Blogger. Show all posts

Monday, February 6, 2012

1 Click 2 Tab Tampil


Kali ini kita akan membahas bagaimana cara membuat tautan atau link yang membuka di 2 tab baru. Link jenis ini bila diklik maka akan membuka di dua tab baru browser secara bersamaan.

Nah, jika Anda membutuhkan link seperti ini untuk keperluan membuat suatu artikel atau untuk menaruhnya di sidebar blog, berikut ini format dari linktersebut.

<a href="URL 1" onclick="window.open('URL 2')" target="_blank">Teks</a>

Contoh:
<a href="http://ff-koleksi.blogspot.com/2011/11/awas-terlalu-sering-buka-facebook-bisa.html" onclick="window.open('http://ff-koleksi.blogspot.com/2011/11/wanita-lebih-pilih-facebook-ketimbang.html')" target="_blank">1 Click 2 Tab Tampil</a>

Silikan Click Contoh dibawah ini.

1 Click 2 Tab Tampil

Semoga bermanfaat.
Sumber: http://www.adaisinya.com/
Read more...

Tuesday, January 31, 2012

cara-memasang-newsticker-via-google-api

News Ticker, merupakan salah satu widget yang berfungsi untuk mempercantik tampilan web atau blog. Namun fungsinya tentu saja tak kalah bermanfaat. Sebab fasilitas ini tentu saja akan lebih memudahkan pengunjung untuk membuka link artikel di blog Anda. Tutorial memasang newsticker ini saya dapatkan di Dynamic Drive.

Karena widget ini menggunakan script yang berpengaruh terhadap loading page, maka saya melakukan sedikit perubahan dalam penempatan kode script di halaman blog. Jika sebelumnya, script harus dihosting sendiri, atau menggunakan script bawaan yang disediakan oleh siempunya, maka saya menempatkannya langsung di pengkodean halaman alias tanpa host pihak ketiga lagi.

Oke, langsung saja kita menuju ke TKP. Langkah pertama, Anda harus mendapatkan kode API key blog terlebih dahulu. Caranya mudah, silahkan menuju ke halaman API key Google Code, lalau masukkan alamat blog Anda dan tekan Generate API key. Maka secara otomatis API key Anda akan muncul. Contohnya seperti di bawah ini :
ABQIAAAAUMsU2d40bO1-m8DeADFRexSdupW3UblI5-uymDD3tToJ_XzTzRTHuyVgfpokD8LoL9kqMyn5QmrKKA


Setelah kode API key sudah Anda dapatkan, silahkan masuk ke halaman tab edit HTML halaman blog Anda (tidak perlu dicentang). Lalu masukkan kode di bawah ini tepat di atas tag :

Untuk mendapatkan Code HTML tersebut anda silakan »» Click Here

Reply Post yang lain Oke Banget Bro...: Click Here Again

Semoga bermanfaat. Terimakasih.
Read more...

Wednesday, January 4, 2012

Widget Button Facebook Like and Facebook Share for Blog



Facebook adalah Social Network yang berkembang dengan pesat dan masyarakat diseluruh dunia hampir dipastikan suka memiliki akun Facebook. (entah yang baca ini). Pada kesempatan ini saya ingin Berbagi Informasi mengenai cara pasang Widget Button Facebook Like dan Facebook Share pada Blog anda. yang saya dapatkan dari Dunia Maya, karena suka berlanglang buana Internet.

Kedua Widget ini berguna untuk membagikan Sebuah Halaman Situs atau Blog ke Profil akun Facebook anda (orang lain).

Misalkan, Anda membuka Situs berita online dari salah satu Media di Internet atau Blog orang lain, dan apabila anda menyukai (Like) anda bisa membagikan halaman tersebut keteman Facebook anda dengan meng-klik tombol Facebook Like atau Facebook Share.

Perbedaan Facebook Like dengan Facebook Share adalah :
Facebook Like jika di-Klik:
Maka halaman saja yang muncul pada menu "Recent Activity". (Judul+Nama Situs/Blog)
Facebook Share jika di-Klik:
Maka halaman akan muncul pada menu "News Feed".(Judul+Nama Situs/Blog+Keterangan)
Photobucket
Cara pasang Facebook Like dan Facebook Share sebagai berikut:
  1. Login ke Blogger anda » Menu » Edit HTML.
  2. Klik "Expand Widget Template" (atau Backup dulu).
  3. Cari Code <data: post.body/>.
  4. Akan ada dua (2) buah Code <data: post.body/> pada Blog Template kita. Silakan anda pilih Code yang pertama.

  5. Letakan Code Facebook Like atau Facebook Share (Code HTML lihat dibawah ini).
  6. Jika sudah selesai silakan Preview dulu, kemudian Save. (Happy Newbies)

NOTES :

  • Apabila mau diletakan diatas Postingan Blog atau Artikel anda.
    Code Facebook Like/Share
    <data: post.body/>
  • Apabila mau diletakan dibawah Postingan Blog atau Artikel anda
    <data: post.body/>
    Code Facebook Like/Share

Silakan Copy Code dalam Text Area dibawah ini:

Widget Button FB Share no Counter:
Share

Widget Button FB Share plus Up Counter:
Share

Widget Button FB Share plus Counter:
Share

Semoga bermanfaat untuk kita semua. Terimakasih.
Reply Posts: © Herman™

Photobucket

Read more...

Tuesday, January 3, 2012

Shoutbox HTML Code For Blog and Website

Photobucket

GET YOUR OWN FREE SHOUTBOX IN TWO STEPS

A free ShoutBox™ can be placed on your Blog or Website. Your visitor can use it to Chat with you and other visitor at the some time this is a great interactive add-on that maker your visitor coming back for more. Give our free Chat a try and see how it performs. Copy and Paste HTML Code into your Website.

COPY AND PASTE SHOUTBOX HTML CODE

ShoutBox™ is ready to use ! To install your new ShoutBox™ (or better tagboard) just Copy and Paste this HTML Code into the source code of your webpage. No Registration Required !

YOUR VISITOR HAVE AWESOME IDEAS

Use a Widget to get connected with your visitor ! Harness the ideas of your visitor. they have a lot of comments are you ready to listen ? Build Amazing Website ! Our free Widget are the casiest way to get Feedback for every single page.

Semoga bermanfaat. Terimakasih.
Sourche: ShoutBox™
Read more...

Cara Pasang ReadMore Auto Tanpa JavaScript



Anda tentu sudah mengetahui dan mengenal dengan baik tekhnik menggunakan Auto ReadMore. Namun tekhnik ReadMore Otomatis yang kita kenal selama ini masih memerlukan Script pendukung yang tentu saja mempengaruhi kecepatan Loading Blog kita.

Sekarang ada Triks dan Tekhnik baru untuk memasang Auto ReadMore di Blog kita. Bahkan Tekhnik ini dilengkapi dengan Fasilitas Thumbnails. Triks ini saya dapat dan dipelajari dari hasil berselancar didunia Blogging dan Internet. Menarik, karena Triks ini murni 100% hanya menggunakan tambahan HTML Code dengan sedikit sentuhan CSS Code.

Cara memasang Triks ini adalah:
1. Masuk ke Edit HTML.
2. Klik Expand Widget.
3. Cari Code <data: post.body/>
4. Ganti Code tersebut dengan Code dalam Text Area dibawah ini:

5. Langkah berikutnya cari Code </b:skin> .
6. Letakan Code dibawah ini diatas atau sebelum Code pada langkah No.5.
thumb img{float:left;margin:0 10px 5px 0;}
7. Save dan Silakan Preview.
8. Selesai.

Semoga bermanfaat untuk kita semua. Terimakasih.
Sumber: Herdiansyah Hamzah™

Notes:
Editing Fitz Freedom sesuai aslinya
Read more...

Sunday, January 1, 2012

Solusi Hosting Gratis dari Google Code

Bagi pengguna blog, tentu saja sangat menyadari keterbatasan hosting, khususnya untuk file dalam bentuk javascript. Selama ini, kita hanya menggunakan hosting gratis pihak ketiga yang penuh kendala. Mulai dari pengaruh loading page yang berat, hingga bandwidth yang ala kadarnya. Tapi jangan khawatir, kini google code menyediakan hosting gratis, yang dijamin unlimited bandwidth dengan kecepatan loading yg cukup.

Solusi hosting Anda yang kemarin bermasalah, kini sudah teratasi dengan menggunakan hosting gratis dari Google Code. Saya akan memberikan tips sederhana penggunaan hosting gratis file javascript di google code. Berikut langkah-langkah yang harus Anda lakukan :

1. Silahkan masuk terlebih dahulu di alamat Google Code Hosting. Dan akan terlihat tampilan gambar seperti di bawah ini :



2. Lalu tekan tombol Create a new project, maka tampilan selanjutnya akan seperti ini :



3. Isilah form sesuai dengan gambar di atas, diakhiri dengan menekan tombol Created Project. Tampilan berikutnya akan seperti ini :



4. Selanjutnya, tekan tombol tab Download lalu tekan kembali tab New Download.



5. Isilah form yang disedikan dengan data file Anda. Setelah itu, browse file javascript Anda, dan silahkan attach. Selanjutnya tekan tombol Summit File.



6. Sekarang file javascript Anda sudah tersimpan di google. Tampilannya akan seperti gambar di bawah ini :


7. Jika anda ingin menggunakan file yang sudah tersimpan, arahkan cursor mouse Anda di nama file yang sudah tersimpan, lalu klik kanan. Copy file tersebut, dan silahkan gunakan di blog Anda.


Cukup mudah bukan?. Yang pasti, solusi hosting Anda yang kemarin bermasalah, kini sudah teratasi dengan menggunakan hosting gratis dari google code tersebut. Jika tetap mengalami kendala, semisal kecepatan loading yang lambat, maka sudah saatnya Anda menggunakan hosting berbayar!he...3x.

Sumber: Hardiansyah Hamzah

Read more...

Saturday, December 31, 2011

Cara Pasang Widget Follow Twitter Button di Blogspot



Salah satu cara mudah untuk mendapatkan Follower atau Pengikut di akun Twitter kita adalah memasang Widget Folllow Button Twitter. Silakan anda Copy Code di dalam Text Area dibawah ini, kemudian anda pasang di Blog atau Website anda.


Notes-1: Fitz Freedom Blog™
Ganti FitzFreedom1 dengan UserName anda.
Hasil Code Script diatas dapat anda lihat dibawah ini. Sekalian Follow Me ya..? (..Terimakasih...)


Twitter merupakan Jejaring Sosial (Network Social) terbesar setelah Facebook. bahkan kedepannya nanti Twitter bisa mengalahkan ketenaran Facebook.

Pada Jejaring Sosial Twitter, kita bisa menghasilkan uang. Banyak cara untuk hal tersebut, salah satunya adalah Program Coast per Tweet (CPT) dari IdBlogNetwork.

CPT IdBlogNetwork ini adalah IdBlogNetwork yang memberikan kita OB Twitter dengan keharuskan kita wajib membuat Tweet yang mempromosikan Produk atau Jasa dari para Peng-Iklan di IdBlogNetwork. Besaran biaya yang kita terima dalam satu kali Tweet sekitar Rp.150.000,- (bahkan lebih), tergantung dari Iklan atau Jasa yang kita Promosikan di akun Twitter kita. Untuk mendapatkan JobTwitter dari IdBlogNetwork kita harus memenuhi syaratnya yaitu:
  1. Kita harus mempunyai akun Twitter.
  2. Mempunyai Follower (Pengikut) minimal 500 orang di akun Twitter kita.
  3. Menjadi member (mendaftar/Registered) di IdBlogNetwork.


Bagaimana menurut anda, apakah anda tertarik..? (saya tertarik berkali-kali.....)

Semoga artikel ini bermanfaat untuk kita semua. Terimakasih.
Sumber: © Ponsel Promo

Notes-2: Fitz Freedom Blog™
Code Script didalam Text Area bawah ini berasal dari Website Resmi Twitter yang sudah saya seting.


Hasil demonya dibawah ini:
Read more...

Friday, December 23, 2011

Cara Mengubah Favicon di Blogger



Hai Blogger Newbies. Pasokan setiap blog dengan oranye standar

"B"

Blogger Favicon. Memiliki Favicon unik anda sendiri adalah cara yang baik dan bagus untuk memberikan template Blogger baik merk yang berbeda dan eksplisit. Gambar-gambar kecil 16x16 pixel akan pasti membantu Blog anda untuk menonjolkan sisa dari Blog di Blogspot.

Apa itu Favicon itu?

Favicon adalah gambar 16x16 kecil yang terletak di bagian atas browser anda di bar URL.

Bagaimana Cara Mengubah Favicon Anda, caranya adalah sebagai berikut:

  1. » Pertama pergi ke Layout » Edit HTML di Dashboard Blogger anda.
  2. » Backup template yang ada anda sebelum membuat perubahan!
  3. » Tempatkan kode di bawah ini tepat di bawah tag < /head > di template Anda.
  4. » Sekarang simpan template anda.
  5. » Setelah template anda disimpan coba lihat blog anda dan pastikan untuk me-refresh halaman dan menghapus cookie anda.

Membuat Favicon Anda sendiri


» Ganti URL gambar (2X) dengan sendiri Anda 16 piksel dengan 16 piksel gambar host di internet.Silakan click link ini »»»© Favicon Online

» Anda dapat host gambar anda sendiri di Favicon blogger di situs seperti © Image Shack, © Photobucket,© Flickr, dan lain-lain.

» Check out this © Favicon Generator Tool yang memungkinkan anda untuk meng-upload gambar dan yang akan mem-format untuk anda!

Semoga bermanfaat.
Reply:© You Say Too To © Fitz Freedom Blog ™
Read more...

Cara Mengetahui Code ID GFC



Cara Mengetahui Code ID Google Friend Connect anda (ID GFC) adalah sebagai berikut:
(Contoh gambar belum saya pasang..maaf.)

  • » Login ke Google Friend Connect ® menggunakan akun Blogger anda.
  • » Click nama Blog anda pada posisi sidebar kiri..» Pilih "Add the member gadget".
  • » Sesuaikan Customisasi Page pada halaman tersebut, seperti: lebar gadget, jumlah baris follower, warna background, warna border, bentuk huruf dan lain-lainnya.
  • » Jika Customisasi Page sudah selesai di edit..» Click teks "Generate Code" pada langkah ke 3 "Create the HTML Code".
  • » Code HTM Gadget Follower Google Friend Connect milik anda sudah selesai.
  • » Copy Code HTML tersebut dan letakan pada Blog anda, posisi bisa anda atur sendiri.

Semoga bermanfaat.
© Fitz Freedom
Replay: Google Friend Connect ® To Fitz Freedom Blog ™
Read more...

Thursday, December 22, 2011

Pasang Otomatis Search Bar Form



» BLOGGER SEARCH BAR FORM «
Pasang secara otomatis Search Bar Form pada Blogger


Add a search engine in the sidebar of your blogger blog. This search all the post on your blog and displays them by latest post first. Inside the search bar you will finda the text. "search this site", this can easily be changed to any text you desire. Such as "Search My Site", "Search", type and hit enter, etc. Just simply replace the code. You can also change the text "Go" on the button to something lika "Search", "Find", etc.

Secara otomatis pasang Search Bar Form Blogger dapat anda klik gambar dibawah ini:


Atau anda copy Script HTML yang berada di dalam Text Area dibawah ini: ( Cekidooot...sedot Bro...?)


Semoga bermanfaat.
Reply is: © Fitz Freedom Blog ™ from Search Bar Form
Read more...

Pasang Otomatis Recent Post Di Blogspot



Display beautifully cratted links to Recent Post on your blog with this widget you can easily custimize when then or not you would lika to display thumbnails post summaries, and the number of commanets for each post along side titles.



Features and customization


  • » The Resend Post Titles.
  • » Display Post Thumbnails.
  • » Choose which blog post to display (choose URL).
  • » Display post summaries.
  • » Lenght of summaries.
  • » Display post date.
  • » Display Number of comments on each post.
  • » Display separator between post.
  • » Number of posts do display.
  • » Determine height

Untuk memasang Widget Recent Post With Thumbnails, secara otomatis, silakan anda klik link dibawah ini:

Recent Post With Thumbnails

Selanjutnya silakan anda tentukan sendiri letak Widget tersebut dielement blog anda. (sesuai selera)

Semoga bermanfaat.
Replay: © Fitz Freedom Blog ™ from © Recent Post With Thumbnails ™

Notes: Images from t4belajar Blogger

Read more...

Cara Buat Widget Parse HTML



Parse HTML adalah sebuah alat/Widget untuk meng-Convert code HTML yang akan ditampilkan pada postingan Blogspot anda, walaupun ada situs yang menyediakannya yaitu: © Blog Crowds ™ tapi alangkah baiknya kita memilikinya di Blog kita sendiri.

Dibawah ini adalah Code Script HTML untuk membuat Widget Parse HTML tersebut. Copy dan Paste Code dibawah ini kepostingan anda pada posisi (edit html).


PARSE HTML WIDGET



Semoga bermanfaat.
Reply: © Fitz Freedom Blog from © Vikry Madz
Read more...

Wednesday, December 21, 2011

Cara Pasang Script Anti iFrame diBlogspot



Script anti iFame ini gunanya untuk mematahkan fungsi iFame itu sendiri. Ilustrasi sederhananya sebagai berikut:
Anda mempunyai satu buah gambar yang sudah terindek oleh om Google Image, saat orang lain ingin melihat gambar tersebut om Google Image akan menunjukan gambar hasil pencarian yang kita lakukan tersebut.

Dengan kata lain secara normal kita tidak akan dibawa langsung kesitus gambar tersebut, tapi jika kita sudah pasang Script Anti iFrame pada tempalate Blogspot, maka saat gambar tersebut di klik orang lain maka secara otomatis akan langsung di REDIRECT ke URL blog kita. Hal tersebut kita akan mendapat trafik tambahan dari hasil pencarian gambar di om Google Image.

Langkah untuk hal tersebut pada Template Blogspot adalah Sbb:

  1. » Login ke Dasborad Blogger anda.
  2. » Masuk ke menu Rancangan dan Centang Expand Widget Template
  3. » Cari code <,/head > kemudian letakkan Script dalam Textarea dibawah ini tepat di atas </head >

» Silakan anda Copy Script di Text Area dibawah ini...cekidoot...!


  1. » Save/Simpan Tempalte anda.
  2. » Selesai

Semoga bermanfaat.
Replay: © Fitz Freedom ™ » rayhanzhampiet «
Read more...

IP Address Widget For You Blogger



Here is a unique collection of IP Address Widgets which shows shows your visitors their IP Address, Operating, System, Country, Browser and The Version of the browser. It is cool thing to display IP Address to your visitor's specially if you have Tech related blog.

Now you can get these any of these widget anda Add these to your blogs by following these steps.

Get IP Address Widget for you Blog:
  1. Choose any widget they are in diffecent size and shapes, choose any according to your blog requirement.
  2. Login to Blogger Dasboard, and the Click on Layout » Page Element.
  3. Add a new HTML/JavaScript Gadget anywhere in your blog.
  4. Copy and Code from below (all are working) and Paste in to HTML/JavaScript Gadget and the save your Gadget.
  5. Done, your Widget now Live.

SQUARE IP ADDRESS WIDGET
IP widget


COUNTRY FLAG WIDGET
What's my ip address, create your own visitors IP image


IP AND COUNTRY WIDGET
What's my ip address, create your own visitors IP image


BROADER UP ADDRESS WIDGET
IP


Semoga bermanfaat.
Replay » Fitz Freedom ™ from IP Address For Blogger
Read more...

Monday, December 19, 2011

Cara Buat dan Pasang Buku Tamu

Photobucket Photobucket

Postingan pada blog ini adalah Cara Buat dan Pasang Buku Tamu di Blogspot, dengan menggunakan via Hp
dan memakai aplikasi parse HTML yang tersedia. Semoga tampilannya tidak mengecewakan di Komputer/Laptop anda.

Silakan anda tambah gadget ( add a gadget) kemudian anda Click Select All atau Copy Code Script HTML dibawah ini. (biar lebih cepat cara Copy Code Script dibawah ini... Cekidootttt ...)

Kalau anda mau pasang Code Script Buku Tamu yang saya buat dari Shoutbox dibawah ini silakan Copy juga semua. Cekidot again...!
Semoga bermanfaat
Source: Dari Blogger Indonesia
Reply is: » @copy Exercise Blogger «
Notes:
Saya menggunakan Text Area pada Postingan ini bertujuan supaya meng-hemat waktu untuk anda.
Read more...

Cara Buat Menu Horizontal Drop Down


Cara Membuat Menu Horizontal Drop Down Membuat menu horizontal Drop Down sebenarnya ada banyak alternatif, untuk kali ini kita akan mencoba membuat jenis menu horizontal type professional dropdown, sebagaimana namanya tentunya ini akan membuat blog/site kita menjadi lebih tampak professional.

* Langkah Pertama
* Login ke akun Blogger kamu.
* Dari halaman dashboard, pilih Edit HTML.
* Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya agar lebih mudah
* Lalu Copy Script dibawah ini diatas kode ]]></b:skin> tersebut.

Click Here...

/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/pro_dropdown_3.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */

.preload1 {background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0a.gif);}
.preload2 {background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1a.gif);}

#nav {padding:0; margin:0; list-style:none; height:38px; background:transparent url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#FFD700; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0a.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#fff; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1a.gif) no-repeat right top; padding-bottom:3px;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{left:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #50b5d0;}
#nav li ul.sub li a.fly
{background:#50b5d0 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow.gif) 80px 6px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#3f96a9; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#3f96a9 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow_over.gif) 80px 6px no-repeat; color:#fff;}

#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}

#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}

#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#3f96a9 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;}

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#50b5d0 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow.gif) 80px 6px no-repeat; color:#000; border-color:#50b5d0;}

setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="http://lh6.ggpht.com/_wC8_9aR_6uE/S6uJI38TreI/AAAAAAAACbY/QIXMKHei1g0/up.png" style="width:24px; height:24px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:15, offsety:15}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links


* Lalu Simpan Template.
* Kemudian Tambah Gadget HTML Javascript klik button tambah lalu
* Copy dan paste Script dibawah ini

Click Here...

<span class="preload1"></span>
<span class="preload2"></span>

<ul id="nav">
<li class="top"><a href="#" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="#" id="Menu" class="top_link"><span class="down">Menu</span></a>
<ul class="sub">

<li><b>Judul1</b></li>
<li><a href="#" class="fly">Subjudul1</a>
<ul>
<li><a href="#" target="_blank">subitem1.1</a></li>
<li><a href="#" target="_blank">subitem2.1</a></li>
<li><a href="#" target="_blank">subitem3.1</a></li>
</ul>
</li>
<li><a href="#" class="fly">Subjudul2</a>
<ul>
<li><a href="#" target="_blank">subitem1.2</a></li>
<li><a href="#" target="_blank">subitem2.2</a></li>
<li><a href="#" target="_blank">subitem3.2</a></li>
</ul>
</li>
<li><a href="#" class="fly">Subjudul3</a>
<ul>
<li><a href="#" target="_blank">subitem1.3</a></li>
<li><a href="#" target="_blank">subitem2.3</a></li>
<li><a href="#" target="_blank">subitem3.3</a></li>

<li><b>Subjudul3.1</b></li>
<li><a href="#">item1.3.1</a></li>
<li><a href="#">item2.3.1</a></li>
<li><a href="#">item3.3.1</a></li>

<li><b>Subjudul3.2</b></li>
<li><a href="#">item1.3.2</a></li>
<li><a href="#">item2.3.2</a></li>
<li><a href="#">item3.3.2</a></li>
</ul>
</li>


<li><b>Judul2</b></li>
<li><a href="#" target="_blank">subitem1.2</a></li>
<li><a href="#" target="_blank">subitem2.2</a></li>
<li><a href="#" target="_blank">subitem3.2</a></li>
</ul>


</li>
<li class="top"><a href="#" id="services" class="top_link"><span class="down">menu2</span></a>
<ul class="sub">
<li><a href="#" target="_blank">submenu1.2</a></li>
<li><a href="#" target="_blank">submenu2.2</a></li>
<li><a href="#" target="_blank">submenu3.2</a></li>
</ul>
</li>

</li>
<li class="top"><a href="#" id="services" class="top_link"><span class="down">menu3</span></a>
<ul class="sub">
<li><a href="#" target="_blank">submenu1.3</a></li>
<li><a href="#" target="_blank">submenu2.3</a></li>
<li><a href="#" target="_blank">submenu3.3</a></li>
</ul>
</li>

</li>
<li class="top"><a href="#" id="services" class="top_link"><span class="down">menu4</span></a>
<ul class="sub">
<li><a href="#" target="_blank">submenu1.4</a></li>
<li><a href="#" target="_blank">submenu2.4</a></li>
<li><a href="#" target="_blank">submenu3.4</a></li>
</ul>
</li>

<li class="top"><a href="#" id="profil" class="top_link"><span>menu5</span></a></li></li></li></ul>

Lalu Simpan Dan Lihat Hasilnya...

Keterangan:

* Tanda # untuk Tempat Url yang anda inginkan
* Lalu Tulisan Pada Sub Menu Item yaitu Nama Nama Menu Sesuai Dengan Kebutuhan

Semoga bermanfaat.
Reply Source: © Ojel HTC

Saran Dan Kritik Anda Sangat Membantu Saya Dalam Menulis Artikel Selanjutnya Pada Blog Ini...

Pasang Logo Page Feel HTC ( Layar Menggulung Pada Blog Anda, Tidak Berat Saya Yang Jamin Namun Mempercantik Blog ini Juga Memperkuat Rasa Persatuan Dan Persahabatan Antar Bloggers )

Pasang Kodenya Di Bawah ini di atas kode </head> :





Terima Kasih Jika Anda Telah Memasang Logo ini Silakan Konfirmasikan Ke Blog dibawah ini.
http://ojelhtc.blogspot.com/

Read more...

Cara Buat ReadMore Otomatis di Blogspot


Postingan kali ini akan memberikan tutorial Cara Membuat Readmore atau Baca Selengkapnya pada postingan blog secara otomatis. Dengan adanya readmore otomatis, kita bisa menentukan berapa ketinggian dan lebar penggalan postingan dan image yang akan muncul pada halaman pertama blog kita sehingga terlihat rapi dan menarik.

Trik ini mungkin telah banyak yang mengetahui dan ada juga yang belum mengetahuinya. Bagi anda yang belum mengetahui bagaimana cara membuat readmore otomatis, bisa mengikuti tutorial berikut ini.

PERTAMA, silakan masuk ke acount blogger anda kemudian pilih Edit Html, jangan lupa memberikan tanda ceklis pada bacaan "Expand Widget Template" atau lihat gambar di bawah ini :



Cari kode </head> kemudian masukkan script di bawah ini persis dibawah kode </head> tersebut.

Click Here...

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>


KEDUA, cari kode html berikut ini :

<data:post.body/> atau <p><data:post.body/></p>

Ganti kode tersebut dengan kode di bawah ini

Click Here...
<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 class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


Keterangan : tulisan yang berwarna merah adalah yang bisa anda ganti.
==> Summary noimg 430 = tinggi artikel terpenggal tanpa image
==> Summar img 430 = tinggi artikel terpenggal dengan image
==> Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll...

atau dengan yang dibawah ini:



Code Script HTML nya:

KETIGA, klik save template

Selanjutnya anda bisa melakukan postingan dan lihat hasilnya, Readmore atau baca selengkapnya akan secara otomatis terpasang setelah anda publish postingannya.

Semoga bermanfaat. © Tip dan Triks Blogger => Blog GoBlog
Reply Read More: © zona-klik.blogspot
Read more...

Sunday, December 18, 2011

Cara Buat Menu View di Blogger

Menu View Blogger

Silahkan login ke blogger dengan ID sobat tentunya.

Tuju Tata Letak.

Klik Edit HTML.

Jangan lupa backup template sobat terlebih dahulu dengan mengklik Download Template Lengkap.

Kemudian letakkan kode javascript berikut sebelum kode </head>

Please Click:

<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>


Setelah itu letakkan kode berikut di atas kode ]]></b:skin>

Please Click:

div.TabView div.Tabs

{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Lebar Menu Utama Atas */

text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #E6E6E6; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Simpan Template.
Tambah Widget, masukkan kode di bawah ini

Please Click:


<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>


Kemudian Simpan.
Selesai. Semoga bermanfaat.


Keterangan :

Untuk lebar dan tinggi menu, silahkan sobat sesuaikan dengan isi. Baik judul-judul dari menu dan isi dari menu. Sobat bisa menambahkan link, gambar, banner, dll.

Sumber: Dari berbagai Blogger Indonesia
Read more...

Recent Posts Blogger (Auto Scroll & Thumbnails)


Widget Recent Posts atau Posting terbaru merupakan widget penting karena berfungsi sebagai penunjang navigasi blog. Dengan adanya daftar posting terbaru, pengunjung yg masuk tidak dari halaman utama (homepage) dapat langsung mengetahui beberapa posting terbaru dari sebuah blog. Selain itu, widget recent posts dapat menjadi sebuah tawaran bagi pengunjung blog untuk mengetahui isi posting-posting lain dari blog tersebut.

Widget recent post yg saya share kali ini memiliki fitur dan tampilan yg cukup menarik. Kombinasi script recent posts, auto scroll / spy list menghasilkan widget recent posts Blogger yg memiliki efek hebat dan dapat mengundang ketertarikan pengunjung. Alhasil, tampilan/desain blog pun dapat bertambah nilainya dengan ditambahnya widget recent posts ini. Sudah lama saya menggunakan widget ini dan perannya dalam menambah jumlah pageview blog pun tidak diragukan lagi.

Ikuti langkah-langkah berikut dan pastikan tidak ada bagian yg terlewatkan:
1. Copy Script berikut:

Click Here...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<style media="screen" type="text/css">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:355px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:335px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/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 = 300;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "Reply(s)";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://tipdantriksblogger.blogspot.com/";
limitspy=5
intervalspy=6000
</script>

<div id="spylist">
<script type="text/javascript">
//<![CDATA[
/*
* Script dikombinasikan dari bloggerstricks.com
* spy effect dari jqueryfordesigners.com
* Oleh Abu Farhan (www.abu-farhan.com)
* Modifikasi oleh buka-rahasia.blogspot.com
*/
jQuery(function(){jQuery("ul.spy").simpleSpy(limitspy,intervalspy).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simpleSpy=function(f,g){f=f||4;g=g||5000;return this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find("> li:first").height();l.find("> li").each(function(){i.push("
<li>"+e(this).html()+"</li>
")});o=i.length;l.wrap('<div class="spyWrapper" />



').parent().css({height:h*f});l.find("> li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}).bind("start",function(){k=true});function n(){if(k){var p=e(i[m]).css({height:0,opacity:0,display:"none"}).prependTo(l);l.find("> li:last").animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function showrecentposts(z){document.write('<ul class="spy">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];break}}if("content" in w){var r=w.content.$t}else{if("summary" in w){var r=w.summary.$t}else{var r=""}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){img[o]=d}cmtext=(text!="no")?'<i><font color="'+acolor+'">('+f+" "+text+")</font></i>":"";var q=[1,2,3,4,5,6,7,8,9,10,11,12];var x=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var u=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=x[e];break}}var n=(showPostDate)?'<i><font color="'+acolor+'"> ('+u+" "+h+" "+t+")</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var v='
<li><a href="'+p+'"><img src="'+img[o]+'" width="'+thumbwidth+'" height="'+thumbheight+'" class="recent-thumb"/></a><a href="'+p+'" class="recent-link">'+g+'</a><div class="spydate">



'+n+'</div>
<div class="spycomment">



'+cmtext+"</div>
";document.write(v);j++}document.write("</ul>
")}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"></script>');
//]]>
</script></div>

Note: Host sendiri gambar http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg dan ganti dengan url gambar yg telah sobat upload.

2. Ganti http://tipdantriksblogger.blogspot.com/ dengan url blog sobat. Pastikan ada tanda slash ( / ) di belakang url blog.
3. Buka dashboard &gt; Design/Layout &gt; Add a Gadget / Tambahkan Gadget.
4. Pilih HTML/Javascript.
5. Paste semua kode ke dalam kotak HTML/Javascript.
6. Save.

Kostumisasi Tampilan Widget Recent Post Blogger
Untuk menyesuaikan tampilan recent post dengan template blog, perhatikan dan ganti beberapa poin dasar berikut sebelum memasukkan script:

* boxwidth = 300 adalah lebar widget dalam pixel (px), ganti nilainya sesuai dengan lebar sidebar blog.
* text = "Reply(s)" adalah teks di belakang jumlah komentar, ganti Reply(s) sesuai keinginan, misalnya: komentar, comment(s), dll.
* numposts = 10; adalah jumlah posting terbaru yg akan di-crawl, ganti nilainya sesuai keinginan.
* limitspy=5 adalah jumlah posting terbaru dalam sekali tampilan, ganti nilainya sesuai keinginan.
* intervalspy=6000 adalah kecepatan scroll / spy dalam milisecond (ms), ganti nilainya untuk mengatur kecepatannya.

Done!

Semoha bermanfaat.
Reply: Buka Rahasia Blogspot
Read more...

CSS Drive - CSS Compressor

CSS Drive-CSS Compressor


Silakan anda klik Links dibawah ini untuk meng-kompres CSS anda untuk meningkatkan kecepatan Loading Browsing. Atau Klik gambar diatas.

Semoga bermanfaat.


Sumber: © Fitz Freedom
Read more...