Tips Blogger (ppt)

berikut ini adalah tips blogger yg saya post dalam bentuk ppt. semoga anda bisa lebih enjoy dalam membaca postingan saya ini :D

Read More

Cara Membuat Navbar Bertingkat pada Blog

Nah, hari ini saya akan menjelaskan tentang cara membuat Navbar. apa sih navbar itu? nih gambar contohnya: 

Bagaimana cara membuatnya? berikut ini cara membuatnya:

1. Login ke Blogger.

2. Pilih Template.

3. Klik Edit HTML.

4. Klik tanda panah hitam disebelaha kode yang mirip <b:skin>...</b:skin> (untuk membuka seluruh css).

5. Cari kode ]]></b:skin> (gunakan CTRL+F), lalu letakkan kode dibawah ini tepat diatasnya.

/* Kode CSS Menu Navigasi Start */
 #tuliskancom_litemenu {
 width:auto;
 background:#166bea;
 border-bottom: 5px solid #993300;
 border-top: 1px solid #e14d09;
 clear: both;
 overflow: hidden;
-moz-box-shadow: 2px 3px 5px #000000;
-webkit-box-shadow: 2px 3px 5px #000000;
box-shadow: 2px 3px 5px #000000;
border:none 5px #000000;
-moz-border-radius-topleft: 16px;
-moz-border-radius-topright:16px;
-moz-border-radius-bottomleft:16px;
-moz-border-radius-bottomright:16px;
-webkit-border-top-left-radius:16px;
-webkit-border-top-right-radius:16px;
-webkit-border-bottom-left-radius:16px;
-webkit-border-bottom-right-radius:16px;
border-top-left-radius:16px;
border-top-right-radius:16px;
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;
 }
 #tuliskancom_litemenu ul {
 float: left;
 width: 100%;
 }
 #tuliskancom_litemenu li {
 float: left;
 list-style-type: none;
 }
 #tuliskancom_litemenu li a {
 background:#166bea;
 color: #fff;
 display: block;
 font-size: 14px;
 padding: 5px 17px 5px 15px;
 position: relative;
 text-decoration: none;
 }
 #tuliskancom_litemenu li a:hover {
 background:#002660;
 color: #fff;
 }
 #tuliskancom_litemenu li li a {
 background: none;
 background-color: #0d56c4;
 border: 1px solid #0d408d;
 border-top-width: 0;
 color: #fff;
 font-size: 14px;
 padding: 5px 10px;
 position: relative;
 text-transform: none;
 width: 130px;
 }
 #tuliskancom_litemenu li li a:hover {
 background: none;
 background-color: #166bea;
 }
 #tuliskancom_litemenu li ul {
 height: auto;
 left: -9999px;
 margin: 0 0 0 -1px;
 position: absolute;
 width: 160px;
 z-index: 9999;
 }
 #tuliskancom_litemenu li:hover ul {
 left: auto;
 }
/* Kode CSS Menu Navigasi End */

6. Klik "Save/Simpan" Template, dan selesai.

7. Sekarang menuju ke halaman Tata Letak / Layout.

8. Klik Add / Tambahkan gadget.

9. Pilih HTML/JavaScript.

10. Letakkan kode berikut ini kedalamnya.

<div id="tuliskancom_litemenu">
<li><a href="#">Home</a></li>
<li><a href="http://uniquenessknowledge.blogspot.com">Menu 1</a> 
 <ul>
<li><a href="#">Sub Menu 1.1</a></li>
<li><a href="#">Sub Menu 1.2</a></li>
<li><a href="#">Sub Menu 1.3</a></li>
</ul>
</li>
<li><a href="http://uniquenessknowledge.blogspot.com">Menu 2</a> 
 <ul>
<li><a href="#">Sub Menu 2.1</a></li>
<li><a href="#">Sub Menu 2.2</a></li>
<li><a href="#">Sub Menu 2.3</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
</div> 

Keterangan:

• Ganti kode yang berwarna merah dengan URL dari masing-masing judul menu
• Ganti kode yang berwarna biru dengan Judul dari masing-masing URL

11. Klik "Save/Simpan" gadget, dan selesai.

Demikian informasi terbaru tentang cara Membuat Menu Navbar. semoga bermanfaat 

Read More

Cara memasang Like Box (Facebook) pada blog

Facebook Page/Fan Page - Like Box semakin lazim digunakan di blog/website mengingat besarnya manfaat untuk perkembangan blog/website maupun product yang ditawarkan. Jaringan sosial beserta pluginnya, khususnya Facebook, terbukti telah memperluas dan meningkatkan popularitas, daya jangkau, traffic, serta penjualan produk jenis apapun. Oleh karena itu, membuat Facebook Fan Page dan memasang Like Box di blog/website merupakan hal yang sangat dianjurkan untuk blog/website anda.

1. Ada beberapa langkah berbeda untuk membuat Facebook Page. Untuk langkah yang lebih mudah, sebaiknya anda telah login terlebih dahulu di account Facebook anda.

2. Kemudian buka halaman ini:  http://www.facebook.com/pages/create.php.

3. Pilih/klik opsi Merk atau Produk 

4. Pilih opsi "Situs web" dan isikan nama Page sesuai dengan yang diinginkan. centang "Saya setuju dengan ketentuan Halaman Facebook" dan klik "Mulai", seperti contoh gambar berikut:

5. Selanjutnya anda akan masuk ke halaman Facebook Page yang telah dibuat. Lakukan kostumisasi terlebih dahulu sesuai petunjuk, misalnya mengupload foto/gambar untuk Facebook Page, mengedit informasi, dan lain sebagainya, atau langsung membuat Facebook Like Box yang nantinya dapat dipasang di blog/website.

1. Jika anda masih berada di halaman Fcebook Fan Page tadi, pilih menu nomer 5, klik "add like box":

Atau bisa juga buka halaman berikut:http://developers.facebook.com/docs/reference/plugins/like-box/

Penting: Sebelumnya copy terlebih dahulu url Facebook Fan Page yang telah dibuat. Fungsinya sebagai spesifikasi url untuk like box yang nantinya hendak dibuat.
Contoh url-nya:http://www.facebook.com/UniqueKnowledge 
2. Selanjutnya, isikan spesifikasi seperti gambar berikut:

Setting Facebook Like Box:

- Facebook Page url: url Facebook Page anda

- Width: lebar tampilan facebook like, sesuaikan dengan lebar sidebar widget.

- Color scheme: pilih light jika ingin tampilan terang, dan dark untuk tampilan gelap.

- Show Faces: Centang untuk menampilkan foto profil likers.

- Border color: Isikan dengan kode warna jika ingin memberi border atau kosongkan agar transparan.

- Show stream: Centang jika ingin menampilkan informasi/posting terakhir di like box.

- Show header: Centang jika ingin menampilkan tulisan header "Find Us on Facebook".

Lihat preview tampilan di sebelah kanan form tersebut.

3. Jika settingan yang dibuat sudah beres, klik get code. Kemudian akan muncul pop-up window yang menampilkan 3 jenis kode, HTML5, iFrame dan XFBML, pilih salah satu dan copy kodenya. (Untuk Blogger, saya sarankan pilih HTML 5).

4. Buka Dashboard > Design/Rancangan > Klik add a gadget/tambah gadget.

5. Pilih opsi HTML/Javascript.
6. Masukkan kode yang telah dicopy ke dalam kotak kode.
7. Save.
8. Like box telah siap digunakan, dan setiap pengunjung blog/website yang menyukai blog/website anda dapat dengan mudah meng-klik like pada like box yag telah disediakan.

Demikian info singkat dari saya semoga bermanfaat

Read More

cara mengganti logo blogger pada tab

Umur blog ini sudah setahun lebih, tapi baru sekarang ini saya terpikir untuk membuat icon/logo blog ini. Tanpa pikir panjang lagi saya langsung membuatnya.
Icon yang saya buat cukup sederhana. Saya membuat icon dengan Adobe Photoshop. Hasilnya saya konversi ke format jpg. Ukuran gambar icon 25×25 pixel.
Untuk menempatkan icon di tab browser, saya meng-upload terlebih dahulu gambar icon tersebut. Kemudian memasang kode tampilan gambar di antara kode <head> dan </head>. Hasilnya bisa dilihat di tab browser.
Penempatan kode gambar bisa seperti contoh di bawah ini.
<head>
...
<link rel="shortcut icon" href="http://i1258.photobucket.com/albums/ii525/mmmm442/a75361fd.png" />
...
</head>

tulisan yang berwarna merah ganti dengan milik sobat.

Read More

Cara Membuat Banner Tukar Link Pada Blog

Tukar Link

Hai kawan  blogger ...? posting kali ini mengenai cara membuat banner tukar link untuk meningkatkan traffic blog. Untuk membuatnya cukup mudah dan memasang banner pun juga mudah. 

1. Langkah pertama yang perlu dipersiapkan yaitu membuat banner terlebih dahulu. Kawan - kawan dapat membuatnya melalui adobe photosop atau corel draw atau program lain yang dapat mendukung misalnya format gambar png.

2. Langkah kedua : mengupload gambar atau banner yang kawan buat tadi misalnya di photobucket, imageshack, namun lebih baik kamu upload ke picasa web album. Terkadang kalau di imageshack, misal sudah lama akun kamu tidak kamu upgrade, maka berubah jadi gambar kodok. Sebagai contoh di bawah ini adalah banner blogku , gambar aku upload di photobucket.

3. Langkah ketiga yaitu membuat kode html banner
- Kode untuk menampilkan banner : 

<a href="http://uniquenessknowledge.blogspot.com/"><img alt="carapada" src="

http://i1258.photobucket.com/albums/ii525/mmmm442/796b40bd.png

"/></a>

- Kode untuk menampilkan kode html dengan textarea 
 

<textarea code="" rows="4" cols="21" name="">

<a href="http://uniquenessknowledge.blogspot.com/"><img alt="carapada" src="

http://i1258.photobucket.com/albums/ii525/mmmm442/796b40bd.png

"/></a>

</textarea>

Cara membuat banner tukar link mudah kan ? Jangan lupa ganti kode url menjadi kode url blog anda,serta ganti url gambar sesuai gambar anda.

Read More

Panduan Cara Membuat Tombol "Like" Pada Tiap-tiap Artikel Blog

Panduan blogger untuk blogger pemula.Panduan blogger yang akan membahas dan menjelaskan tentang Panduan Cara Membuat Tombol "Like" Otomatis Pada tiap-tiap Artikel Di Blog.Disini akan menjelaskan tentang cara membuat serta memasang tombol like facebook secara otomatis pada tiap-tiap artikel/postingan di blog.Mungkin panduan ini
dibutuhkan oleh para blogger pemula ( seperti akoe ini ),namun bagi para blogger yang mahir dan berpengalaman mungkin panduan ini kurang menarik.Tombol like ini memang akoe sarankan dan akoe rekomendasikan pada sobat blogger semua.Fungsi dan kegunaannya memang banyak,salah satunya adalah untuk mendongkrak popularitas blog.Pengunjung yang memberikan like pada artikel kita di blog,berarti postingan atau artikel kita dinilai berkualitas oleh pengunjung yg bersangkutan tersebut.Dan sehingga apabila artikel yang telah diposting tersebut disukai oleh pengunjung,maka mungkin secara tidak langsung akan membuat pemilik/penulis artikel tersebut bersemangat dalam menulis sebuah artikel lagi yang berkualitas.

Untuk mengetahui caranya,silahkan sobat blogger langsung saja simak caranya dan ikuti langkah-langkah di bawah ini.
Panduannya adalah sebagai berikut :

• Silahkan sobat login terlebih dulu di akun Blogger sobat
• Klik Rancangan
• Klik Edit HTML
• Kalau perlu silahkan sobat Download lengkap template blog sobat terlebih dulu,untuk mencegah terjadinya salah pasang kode HTML
• Beri tanda centang pada Expand Widget Template
• Cari dulu kode <data:post.body/></div> caranya tekan ctrl+f  kemudian masukkan kode tersebut
• Copy dan Paste kode HTML di bawah ini 

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins    /like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show-faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px'/>

• Letakkan kode HTML yang telah di Copy dan Paste tersebut tepat di bawah kode <data:post.body/></div> .Dan untuk lebih jelas di bawah ini adalah contoh meletakkan kode HTML nya 

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
                                                                                 <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show-faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px'/>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
</b:if>
</b:if>

• Jadi letak kode <data:post.body/></div> dan kode HTMLnya adalah sejajar

• Saran akoe sobat klik Pratinjau,untuk melihat apakah tombol like tersebut sudah terpasang atau belum 
• Kalau sudah terpasang,baru klik Simpan Template
• Kalau belum terpasang,sobat klik aja Bersihkan Edit untuk mengembalikan template sobat blog sobat seperti semula
• Selesai

Nah........itulah panduan blogger yang bisa ku bagikan dan ku jelaskan,semoga bermanfaat.

Selamat mencoba

Read More

Cara Memasang Tombol Share Facebook,Twitter ,Google+ di Blog

Sebagai blogger tentunya sangat senang jika blognya banyak pengunjung,dengan banyak pengunjung tentunya akan mendapatkan kepuasan dan manfaat, hanya dengan  memanfaatkan berbagai jejaring sosial seperti facebook, twitter, maupun Google+ kita bisa mendapatkan banyak pengunjung blog kita. Tombol berbagi ke facebook dan sebagainya ini mempunyai fungsi untuk membagikan artikel kita yang sedang di baca oleh pengunjung.

Dengan memasang tombol berbagi ini, blog kita akan lebih berguna. Semakin banyak artikel yang di share pengunjung ke media jejaring social, maka semakin banyak pula pengunjung yang datang ke blog kita. Bagi anda yang berminat untuk memasangnya, silangkan ikuti langkah -langkah

Cara memasang tombol share di bawah postingan.

Cara Memasang Tombol Share facebook, twitter, google+ di blog
1. Loggin ke blogger dengan akun blog anda.
2. Klik menu Tata Letak > Edit HTML > Expand Template Widget
3. Cari kode <div class='post-body entry-content'> atau class='post-body entry-content' dan biasanya ada 2 kode tersebut, pakailah kode yang pertama
4. Jika sudah ketemu, copy kode dibawah ini dan paste tepat diatas kode <div class='post-body entry-content'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:5px 0px 5px 0px;width:100%;float:left;height:20px;'>
<div style='float:left;padding-left:0px;font:normal 12px Georgia;'>
Share on :
</div>
<div style='float:left;padding-left:10px;'>
<a name='fb_share' type='button_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>
</script></div>
<div style='float:left;padding-left:10px;'>
<a class='DiggThisButton DiggCompact'/>
<script type='text/javascript'>
(function() {
var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0];
s.type = &#39;text/javascript&#39;;
s.async = true;
s.src = &#39;http://widgets.digg.com/buttons.js&#39;;
s1.parentNode.insertBefore(s, s1);
})();
</script>
</div>
<div style='float:left;padding-left:10px;'>
<a class='twitter-share-button' data-count='horizontal' data-via='User Name' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div style='float:left;padding-left:10px;'>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="medium"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>
</div>
</b:if>

5, Simpan Template dan lihat hasilnya.

Read More

CARA MEMBUAT SCROLL BOX PADA ARSIP BLOG

Bosan dengan tampilan widget arsib blog anda kepanjangan turun kebawah ?? sebenarnya untuk tidak menampilakan bentuk arsib blog yang tidak  kepanjangan bisa dilakukan dengan pengaturan standar bawaan blogger sendiri, seperti membuat tampilan menu drop down atau tampilan flat bisa dilakukan secara gampang. tinggal masuk kepengaturan blog saja dan tinggal memilih tampilan mana yang anda suka.

Hierarchy

Flat List

Dropdown Menu

Tapi bisakah kita tetap menggunakan pilihan menu Hierarchy dan terhindar dari tampilan arsib yang kepanjangan ?? maka dari itu Kali ini saya akan berbagi bagaimana trik membuat widget  arsib blog yang  mempunyai fungsi scrol .

• Masuk ke blogger
• Klik Tata Letak
• Klik Elemen Halaman
• Tambahkan sebuah elemen halaman=> Tambah elemen Arsip Blog
• Tapi Anda harus pilih gaya Hierarki
• Setelah itu, klik Edit Html
• Beri tanda centang pada tulisan Expand Widget Template
• Lalu Anda cari kode seperti ini

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

Kemudian tambahkan code ini <div style='overflow:auto; width:ancho; height:100px;'> persis dibawah code <div class='widget-content'> jadi hasilnya akan berbentuk seperti ini

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

<div style='overflow:auto; width:ancho; height:100px;'>

Setelah itu cari code ini tidak jauh kog dari code diatas

<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>

Dan terakhir tinggal menutup code tersebut dengan perintah </div> jadi hasilnya akan seperti ini

<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>

Dan bentuk script keseluruhan akan seperti ini

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:100px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>

<div style='overflow:auto; width:ancho; height:100px;'>
100 px adalah tinggi dari bidang tersebut jadi tinggal rubah nilainya sampai anda sudah merasa cocok dengan template anda.

Terakhir simpan template anda dan selamat sekarang anda sudah mempunyai widget arsib blog yang mempunyai fungsi scrol .

Read More

MENDAFTARKAN BLOG PADA MESIN PENCARI

Ketika bertemu beberapa teman menanyakan cara mendaftarkan blognya ke mesin pencari. Sebenarnya untuk mendaftarkan pada mesin pencari caranya cukup sederhana dan mudah. Kali ini saya akan memfokuskan pada pembahasan pada layanan Google dan Yahoo. Seperti yang saya utarakan diatas bahwa Google dan Yahoo menyediakan menu secara gratis dan tak perlu membayar untuk pemilik blog/website yang akan memasukkan alamatnya pada mesin pencari. Yang perlu dilakukan hanya melakukan pendaftaran ke situs Google dan Yahoo caranya adalah sebagai berikut :

SITUS GOOGLE
1. Pada alamat browser ketik http://www.google.co.id/intl/id/add_url.html
2. Atau rekan2 dapat klik disini
2. Muncul halaman Tambahakan URL Anda
3. Pada lajur URL masukkan alamat blog/website
4. Dan lajur Tanggapan ketik diskripsi blog
5. Misal : Blog data base
6. Selajutnya klik tombol Tambah URL
7. Selesai

SITUS YAHOO
1. Pada browser ketik http://siteexplorer.search.yahoo.com/submit
2. Atau klik disini
3. Muncul halaman Tambahakan URL Anda
4. Pada lajur Submit a website or page ketik alamat blog/website
5. Selajutnya klik tombol Submit URL

SITUS MSN
1. Kunungi di http://search.msn.com/docs/submit.aspx?FORM=WSDD2
2. Atau klik disini
3. Silahkan masukkan huruf Verifikasi
3. Tambahakan URL Anda pada kota yang tersedia
4. Pada lajur Type the URL of your homepage ketik alamat blog/website
5. Selajutnya klik tombol Submit URL

Pencantum alamat blog/website yang dikelola tidak dapat dipastikan waktunya.Sabar dan Tunggu beberapa hari sampai situs tersebut tercantum dalam mesin pencari. Sambil menanti tercantumnya alamat blog/website rekan2 jangan berhenti aktivasi blog karena aktivasi blog dapat meningkatkan popularitas sebuah blog pada mesin pencari. Disamping itu dapat pula meminta bantuan beberapa pemilik blog lain untuk menambahkan link di websitenya ke alamat rekan2.

Read More