Selasa, 23 April 2013

Cara Memindahkan Postingan dari Beranda ke Laman Lain

Bagaimana Cara Memindahkan postingan dari beranda ke Halaman lain di Blogspot ?

Sebenarnya halaman pada blogspot hanya bisa menampilkan satu postingan saja, halaman yang berada di Blogspot yang bisa menampilkan banyak postingan itu adalah Sub Menu. Jadi halaman di Blogspot yang bisa menampilkan banyak postingan itu adalah Sub menu yang Fungsinya dijadikan Sub menu halaman Kategori. Kategori halaman seperti HOME, KESEHATAN, KEAMANAN dan lain lain, seperti yang berada di blog saya.

Kategori halaman tersebut berisi Postingan yang sudah diberi label, sesuai kategori halaman yang kita Inginkan, Jika postingan kita berhubungan dengan kesehatan kita beri label kesehatan dan jika postingan kita berhubungan dengan keamanan kita beri label keamanan seperti pada blog saya. Disini saya tidak akan memberikan cara membuat label, karena sudah banyak tutorial tutorial bloger yang memberikan caranya.

Jadi langsung aja, cara sebagai berikut :

1. Login dulu ke bloger anda lalu masuk ke Layaut/Tata letak>Edit Html.

2. Jangan lupa centang kotak expand wiget

3. Cari kode dibawah ini, untuk mempermudah pencarian tekan tombol Control+F

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>

Anda ubah kode "showaddelement='no'> menjadi showaddelement='yes'>

setelah dirubah lalu klik simpan Ya

4. Setelah disimpan klik Page elements/elements laman

5. Pilih dan klik Add gadged/Tambah gadged.

6. Pilih HTML/java scripts, lalu copy paste kode dibawah ini, simpan dan letakkan dibawah header.

<a href="http://www.hamsarsalemba.blogspot.com " class="navigation">HOME</a>
<a href="http://www.hamsarsalemba.blogspot.com/search/label/Komputer " class="navigation">Komputer</a>
<a href="http://www.hamsarsalemba.blogspot.com/search/label/Network " class="navigation">Network</a>
<a href="http://www.hamsarsalemba.blogspot.com/search/label/Windows" class="navigation">Windows</a>

PERHATIAN :

* Alamat url diatas silahkan sesuaikan dengan alamat Anda.

* Ubahlah Tulisan yang berwarna Biru, sesuai dengan Nama Halaman yang akan Anda Buat !!

7. Cara menambahkan Gadget dibawah Header.

*. Klik Layout/ Tata letak





*. Lalu Pilih Add Gagdet di bagian header, Jika bagian Header Belum ada Gadgetnya pilih saja Gatget disamping kiri atau kanan, Jika sudah selesai baru kita pindah gadgetnya.





8. Lalu akan muncul Windows baru lalu masukkan kodenya.





9. Lalu klik simpan/ Save

*** Sesuai Dengan permintaan saya akan Menambahkan Cara Untuk Membuat Efek Kotak dan Warna Pada Kolom Halaman !

1. Buka Halaman Dasbor Blogger Anda.

2. Lalu Pilih dan Klik Template -------> Pilih Edit HTML.

3. Centang Kotak Expand Witget -----> Copy dulu kode HTML sebelum kita lakukan pengaturan.

4. Cari kode HTML </b:skin> untuk mempermudah Tekan Tombol CTRL + F

5. Copy kode dibawah ini, letakkan tepat diatas kode </b:skin>

a.navigation {
background: #3333ff ;
color: #ffffff;
margin: 1px;
padding: 2px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #333333;
color: #ffffff;
text-decoration: none;
}

6. Lalu simpan, Dan lihat hasilnya.

Selamat mencoba dan semoga Berhasil.

Senin, 22 April 2013

Cara Memasukan Postingan ke Menu Header

Sebenarnya postingan seperti ini sudah banyak bertebaran di jagadmaya namun karena beberapa rekan kita yang baru memulai membuat blog sering menanyakan hal tersebut maka saya posting disini sejelas jelasnya dengan keaslian yang sebenar-benarnya he...

Jika Anda sedang menemui kesulitan atau kebingungan silahkan simak info ringan ini dan silahkan bertanya bilaman ada yang kurang jelas dalam penyampaian Saya, cekidot.

Menu header itu apaan si mas ? ini dia

klik gambar biar lebih jelas :)

Jika kita lihat dalam tampilan HTML pada menu Rancangan blogger ini dia penampakannya :

Perhatikan tulisan yang saya garis bawahi, ada yang berwarna merah dan biru. Pada url yang saya garis bawahi warna merah adalah link tujuan setelah Anda meng-klik, dan pada url yang saya garis bawahi berwarna biru adalah tamnpilan Teks pada Menu di halaman blog.
"Terus jika kita ingin memasukan link DOWNLOAD gimana mas?" ini yang sering ditanyakan.
Kita anggap nama-nama pada barisan menu adalah spesifikasi apa-apa saja yang tersaji pada blog tersebut, didalam spesifikasi masih ada lagi sub-subnya, dalam hal ini adalah Label, maka dari itu jika kita mempunyai postingan maka haruslah diberi label, sebagai contoh diatas adalah label Download- perhatikan url kedua yang bergaris bawah merah. Terus gimana cara dapetin url/ link http://www.masbugie.com/search/label/download seperti contoh diatas? ya tulis saja http://nama-blog-anda.blogspot.com/search/label/download. Masih bingung? saya ambil contoh lain, misal Anda membuat postingan berjudul Gingseng Obat Kuat Lelaki ;) terus postingan dengan judul Daun Sirih Sebagai Antiseptik dan lain-lainlah , kemudian silahkan spesifikasikan diantara posting tersebut dengan menggunakan label yang cocok, OBAT HERBAL misalnya. Label tersebut kita pasang saja sebagai Menu dengan penulisan url/link http://nama-blog-anda.blogspot.com/search/label/obat herbal

Nanti jika ada pengunjung yang meng-klik menu Obat Herbal maka otomatis pengunjung akan dibawa kepada postingan yang berlabel Obat Herbal, salah satunya ya postingan yang berjudul Gingseng Obat Kuat Lelaki dan Daun Sirih Sebagai Antiseptik.  mudah bukan ?

Untuk bagian Menu download sama seperti diatas bedanya cuma kita menyediakan link download dalam postingan, link download kita dapatkan setelah kita upload file di hosting Ziddu atau yang lainnya, jangan lupa postingan tersebut diberi label download atau yang menurut Anda sesuai dengan spesifikasi postingan tersbut.

Mudah bukan?

Cara Mudah Memasang Meta Tag Agar Postingan Cepat Terindeks Di Google


Mungkin bagi para master blogger, meta tag bukanlah hal asing. Tapi bagi sobat blogger yang pemula, perlu rasanya mengetahui apa itu meta tag. Mungkin teman-teman telah mengalami dimana setiap memposting, biasanya postingan kita belum ada di google khan.
Dan itu wajar saja, karena memang biasanya google baru memasukkan postingan kita sekitar 3 hingga 6 hari. Lah lama amat...
But jangan khawatir, dengan menggunakan meta tag... postingan atau artikel sobat akan terindeks google hanya dalam waktu sehari. Selain itu, dengan meta tag posisi kita di google akan semakin baik, paling tidak ada di halaman depan, gimana tertarik gak?..
Tapi apa itu meta tag??? Meta Tag adalah informasi yang dimasukkan kedalam area “head” dalam suatu halaman website, dimana informasi dalam area head ini tidak terlihat oleh browser pada saat kita melihat halaman website tersebut, tetapi area head ini menjadi sangat penting jika dihubungkan dengan mesin pencari / search engine, karena informasi Meta Tag ini akan ditampilkan dalam mesin pencari / search engine
Kalau begitu, gimana cara memasang metatag ini.??? Caranya gampang koq. Ikuti aja petunjuk di bawah ini:

1. Login ke blogger ID sobat.
2. Masuk ke "tata letak atau layout" dan pilih "edit html".
3. Cari kode seperti ini:    <b:skin>

4. Lalu paste kode di bawah ini, di atas kode skin tadi

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<meta content='Isi dengan DESCRIPTION blog anda' name='description'/>
</b:if>
<meta content='Isi dengan KEYWORD yang anda bidik pada tiap postingan anda' name='keywords'/>
<meta content='follow,all' name='robots'/>


5. Selanjutnya simpan template. Selesai degh

NB: Sebaiknya sebelum memasang meta tag ini, terlebih dahulu backup template sobat supaya kalau terjadi hal-hal yang tidak diinginkan, sobat bisa mengembalikan templatenya ke keadaan semula. 
Selamat bereksperimen

MENDAFTARKAN BLOG DI MESIN PENCARI (GOOGLE, YAHOO!, dan BING)


Mungkin kita semua sudah tau mengenai search engine, yakni google, yahoo, maupun bing… Bahkan kita sangat berharap agar blog kita dapat terindeks oleh mereka.. benar khan? Oleh karena itu, pada postingan kali ini saya memberikan tips agar blog kita dapat cepat terindeks dengan mendaftarkannya langsung ke search engine…


Berikut penjelasan mengenai cara mendaftarkan blog ke google, yahoo, maupun bing:
1. Cara daftar ke Google

Untuk mendaftarkan blog ke google, caranya sangat gampang yakni dengan mengunjungi  http://www.google.com/addurl . Pada halaman formulir pendaftaran, isi alamat blog sobat dan beri komentar sesuai tema blog sobat, kemudian klik tombol Add Url. Gimana mudah bukan?

2. Cara Daftar ke Yahoo !

Untuk mendaftarkan blog sobat ke  Yahoo, syaratnya harus sudah punya account Yahoo terlebih dahulu. Jadi, kalau belum punya mending daftar dulu degh.. Namun jika sobat sudah punya account di Yahoo, silahkan ke http://siteexplorer.search.yahoo.com/submit. Kemudian untuk mengisi formulir pendaftarannya, perhatikan dua kolom isian yang di sediakan oleh Yahoo.

Kolom yang pertama sobat bisa isikan alamat Website atau Blog sobat, seperti ini contohnya :
http://www.namablog.blogspot.com
Kolom yang kedua sobat bisa isikan alamat sitemap sobat, contoh :
 http://www.namablog.blogspot.com/atom.xml
Kemudian klik Submit.
3. Cara Daftar ke Bing !

Untuk mendaftar di bing! Silakan ke  http://www.bing.com/docs/submit.aspx?FORM=WSDD2
Kemudian pada halaman formulir, isi kode verifikasi dan sobat diminta memasukkan alamat blog sobat.
Jadi, tunggu apa lagi… ayo segera daftarkan blog sobat supaya trafik dari mesin pencari dapat meningkat…

Kode Warna Pada HTML Full Lengkap

Warna adalah sebuah elemen penting pada suatu website maupun blog , warna juga memiliki nilai lebih untuk urusan menarik minat pengunjung agar betah berlama-lama dalam blog atau website kita, untuk keperluan merubah warna background, dan juga warna widget dan elemen-elemen penting yang terdapat dalam suatu blog maupun pada halaman postingan tentu kita membutuhkan sebuah kode warna baik dalam Hexa RGB maupun Decimal RGB, berikut adalah kumpulan kode warna lengkap yang dapat anda manfaatkan.



Color Name

Hexa Code
RGB


Decimal Code
RGB
Reds
IndianRed#CD5C5C2059292
LightCoral#F08080240128128
Salmon#FA8072250128114
DarkSalmon#E9967A233150122
LightSalmon#FFA07A255160122
Crimson#DC143C2202060
Red#FF000025500
FireBrick#B222221783434
DarkRed#8B000013900
Pinks
Pink#FFC0CB255192203
LightPink#FFB6C1255182193
HotPink#FF69B4255105180
DeepPink#FF149325520147
MediumVioletRed#C7158519921133
PaleVioletRed#DB7093219112147
Oranges
LightSalmon#FFA07A255160122
Coral#FF7F5025512780
Tomato#FF63472559971
OrangeRed#FF4500255690
DarkOrange#FF8C002551400
Orange#FFA5002551650
Yellows
Gold#FFD7002552150
Yellow#FFFF002552550
LightYellow#FFFFE0255255224
LemonChiffon#FFFACD255250205
LightGoldenrodYellow#FAFAD2250250210
PapayaWhip#FFEFD5255239213
Moccasin#FFE4B5255228181
PeachPuff#FFDAB9255218185
PaleGoldenrod#EEE8AA238232170
Khaki#F0E68C240230140
DarkKhaki#BDB76B189183107
Purples
Lavender#E6E6FA230230250
Thistle#D8BFD8216191216
Plum#DDA0DD221160221
Violet#EE82EE238130238
Orchid#DA70D6218112214
Fuchsia#FF00FF2550255
Magenta#FF00FF2550255
MediumOrchid#BA55D318685211
MediumPurple#9370DB147112219
Amethyst#9966CC153102204
BlueViolet#8A2BE213843226
DarkViolet#9400D31480211
DarkOrchid#9932CC15350204
DarkMagenta#8B008B1390139
Purple#8000801280128
Indigo#4B0082750130
SlateBlue#6A5ACD10690205
DarkSlateBlue#483D8B7261139
MediumSlateBlue#7B68EE123104238
Greens
GreenYellow#ADFF2F17325547
Chartreuse#7FFF001272550
LawnGreen#7CFC001242520
Lime#00FF0002550
LimeGreen#32CD325020550
PaleGreen#98FB98152251152
LightGreen#90EE90144238144
MediumSpringGreen#00FA9A0250154
SpringGreen#00FF7F0255127
MediumSeaGreen#3CB37160179113
SeaGreen#2E8B574613987
ForestGreen#228B223413934
Green#00800001280
DarkGreen#00640001000
YellowGreen#9ACD3215420550
OliveDrab#6B8E2310714235
Olive#8080001281280
DarkOliveGreen#556B2F8510747
MediumAquamarine#66CDAA102205170
DarkSeaGreen#8FBC8F143188143
LightSeaGreen#20B2AA32178170
DarkCyan#008B8B0139139
Teal#0080800128128
Blues/Cyans
Aqua#00FFFF0255255
Cyan#00FFFF0255255
LightCyan#E0FFFF224255255
PaleTurquoise#AFEEEE175238238
Aquamarine#7FFFD4127255212
Turquoise#40E0D064224208
MediumTurquoise#48D1CC72209204
DarkTurquoise#00CED10206209
CadetBlue#5F9EA095158160
SteelBlue#4682B470130180
LightSteelBlue#B0C4DE176196222
PowderBlue#B0E0E6176224230
LightBlue#ADD8E6173216230
SkyBlue#87CEEB135206235
LightSkyBlue#87CEFA135206250
DeepSkyBlue#00BFFF0191255
DodgerBlue#1E90FF30144255
CornflowerBlue#6495ED100149237
MediumSlateBlue#7B68EE123104238
RoyalBlue#4169E165105225
Blue#0000FF00255
MediumBlue#0000CD00205
DarkBlue#00008B00139
Navy#00008000128
MidnightBlue#1919702525112
Browns
Cornsilk#FFF8DC255248220
BlanchedAlmond#FFEBCD255235205
Bisque#FFE4C4255228196
NavajoWhite#FFDEAD255222173
Wheat#F5DEB3245222179
BurlyWood#DEB887222184135
Tan#D2B48C210180140
RosyBrown#BC8F8F188143143
SandyBrown#F4A46024416496
Goldenrod#DAA52021816532
DarkGoldenrod#B8860B18413411
Peru#CD853F20513363
Chocolate#D2691E21010530
SaddleBrown#8B45131396919
Sienna#A0522D1608245
Brown#A52A2A1654242
Maroon#80000012800
Whites
White#FFFFFF255255255
Snow#FFFAFA255250250
Honeydew#F0FFF0240255240
MintCream#F5FFFA245255250
Azure#F0FFFF240255255
AliceBlue#F0F8FF240248255
GhostWhite#F8F8FF248248255
WhiteSmoke#F5F5F5245245245
Seashell#FFF5EE255245238
Beige#F5F5DC245245220
OldLace#FDF5E6253245230
FloralWhite#FFFAF0255250240
Ivory#FFFFF0255255240
AntiqueWhite#FAEBD7250235215
Linen#FAF0E6250240230
LavenderBlush#FFF0F5255240245
MistyRoseFFE4E1255228225
Greys
Gainsboro#DCDCDC220220220
LightGrey#D3D3D3211211211
Silver#C0C0C0192192192
DarkGray#A9A9A9169169169
Gray#808080128128128
DimGray#696969105105105
LightSlateGray#778899119136153
SlateGray#708090112128144
DarkSlateGray#2F4F4F477979
Black#00000000
Sekian dari saya, Silahkan dicoba...

Minggu, 21 April 2013

Cara Memasang Facebook Activity Feed Widget Pada Blogger

Background Tips

Jika sebuah widget blog bermanfaat besar dalam meningkatkan jumlah pageview sehingga jumlah traffic semakin naik, apakah anda akan menolak memasangnya? :) Tentu tidak. Tidak ada orang yang tidak memiliki akun Facebook (mungkin ada ya, tapi kecil), sehingga seluruh plugin Facebook memiliki fungsi besar dalam menampilkan hal-hal yang personalized di dalam blog. Dengan demikian, user engagement pengguna Facebook akan terasa juga apabila kita menggunakan plugin-pluginnya di web/blog.

Nah, plugin Facebook satu ini juga memiliki andil besar, Facebook Activity Feed Plugin, yang dari namanya bisa dipahami bahwa fungsinya menampilkan seluruh feed aktivitas user Facebook di dalam sebuah website/blog. Yang paling sering kita lakukan adalah "like" atau "recommend". Maka widget ini berfungsi menampilkannya secara personalized (berdasarkan akun anda dan keterkaitan dengan teman-teman anda di Facebook).
Jadi, mari kita pasang widget Facebook Activity Feed ini dengan langkah-langkah yang cukup sederhana, karena plugin ini sudah saya buat dalam bentuk pre-made, tinggal pasang saja, tanpa perlu langkah-langkah lain. Namun jika anda ingin menelusuri lebih jauh setting plugin ini, ada 3 tipe konfigurasi: App ID, action types, dan domain. Dari ketiga jenis tersebut, yang paling lengkap sekaligus membatasi penampilan aktivitas user adalah jenis domain. Sehingga ini setting yang saya pilih karena lebih cocok.

Cara Menambahkan Facebook Activity Feed ke dalam Widget Blog

Note: Lewati langkah 1 - 5 jika anda sudah menggunakan plugin Facebook Recommendation Bar yang dulu saya share, Facebook Comments, dan plugin-plugin Facebook lain yang menggunakan format HTML5 dan langsung masuk ke langkah 6.

1. Buka dashboard > template
2. Klik "Edit HTML" (note: jika perlu backup template lebih dulu)
3. Cari (Ctrl+F) tag <body> atau jika anda sudah menggunakan template-template modifikasi atau bawaan Blogger, cari <body (tanpa penutup).
4. Tepat di bawah tag <body> paste/letakkan code berikut:
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
5. Save template.
6. Buka halaman "Layout"
7. Klik "add a / tambah gadget" sesuai posisi yang diinginkan dan pilih HTML/Javascript.
8. Copy, edit/customize, dan masukkan code berikut ke dalam kolom HTML/Javascript:
<div class="fb-activity" data-site="http://hamsarsalemba.blogspot.com" data-width="340" data-height="340" data-border-color="#ffffff" data-header="false" data-recommendations="true"></div>
Ubah beberapa perintah dan nilai untuk melakukan kostumisasi:

  • Ganti http://hamsarsalemba.blogspot.com dengan url blog anda.
  • Saya sudah set default lebar dan tinggi sebesar 340 piksel , jika ingin mengaturnya ubah nilai dalam data-width="340" untuk mengatur lebar widget sesuai blog dan ubah nilai dalam height="340" untuk mengatur tinggi widget. 
  • Ubah #ffffff (putih) untuk mengganti warna border (gunakan generator kode warna). Warna yang sama seperti background akan membuat widget tampak transparan.
  • Ubah nilai dalam data-header="false" menjadi true untuk menampilkan header activity feed (sama seperti Facebook Like Box).
  • Terakhir, ubah nilai dalam data-recommendations="true" menjadi false untuk tidak menampilkan rekomendasi. Namun jika aktivitas pada web/blog anda minim, rekomendasi tetap akan ditampilkan.
9. Save widget. Jika perlu susun posisi widget melalui halaman layout pada tempat yang sesuai.
10 Kunjungi blog untuk melihat hasilnya.
Selesai..