Headlines News :
Showing posts with label Tutorial Blog. Show all posts
Showing posts with label Tutorial Blog. Show all posts

Komentar Facebook dan Blog Berdampingan

Ahmad Ridoan Pasid-XP Updated at : 03:08

1. Login ke account blogger Anda

2. Klik rancangan lalu klik Edit HTML

3. Download template Anda dulu untuk berjaga-jaga jika nanti terjadi kesalahan

4. Beri centang atau ceklis pada kotak kecil yang bertuliskan Expand Template Widget

5. Jika sudah, cari kode  ]]></b:skin>  (gunakan ctrl + f untuk mempermudah pencarian)

6. Kalau sudah dapat maka masukkan kode berikut ini di atas kode ]]></b:skin>
.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px;
cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

7. Kemudian Anda cari kode </head>
8. Jika sudah dapat, masukkan kode berikut ini tepat diatas kode </head>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID FB Anda disini' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script><span style="font-size: 50%">Widget edited by <a href="http://super-bee.blogspot.com/" target="_blank" rel="follow">super-bee</a></span>

Perhatikan tulisan yang berwarna merah di atas, ganti dengan ID facebook Anda, misalkan https://www.facebook.com/nama Anda maka ID Anda berada pada tulisan yang berwana biru. Namun jika Anda belum merubah ID Anda maka yang tertera adalah berupa angka. Udah ngertikan ? jika sudah maka Akan saya lanjut.

8. Kemudian cari kode  <div class='comments' id='comments'>
Keterangan:  Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini dibawah kode
<div class='comments' id='comments'> yang pertama dan kedua.

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Perhatikan angka yang berwarna merah dan biru diatas, angka 2 merupakan jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 400 merupakan lebar kotak komentar facebook. Anda dapat menyesuaikannya sesuka hati, tapi kalu boleh saya kasih saran, sesuaikanlah dengan lebar template Anda agar kelihatan rapi. Dan perhatikan pula kode yang berwarna merah, jika penempatan kode dibawah <div class='comments' id='comments'> yang kedua terdapat kode yang sama, maka hapus salah satu kode tersebut.

contoh :

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<div class='comments comments-page' id='blogger-comments-page'> ( hapus salah satu)


9. Kemudian klik save, dan lihat hasilnya.
Jika semua langkah-langkah membuat komentar blog dan facebook berdampingan ini Anda ikuti dengan benar, maka seharusnya Anda berhasil melakukannya. Karena langkah diatas sudah saya lakukan dan berhasil seperti yang Anda lihat milik saya. Namun jika Anda memiliki struktur template yang berbeda, Anda dapat meletakkan kode pada poin no.8 dibawah kode <div class='comments' id='comments'> yang kedua saja.
 
special thanks to http://super-bee.blogspot.com

Membuat Judul Blog Berjalan Di Media Browser

Ahmad Ridoan Pasid-XP Updated at : 00:36
Bagaimana cara membuat pengunjung blog kita terkesan dengan blog title atau Judul Blog kita? Salah satu cara untuk membuat pengunjung kita terkesan dengan judul blog kita adalah dengan cara membuat judul blog kita berjalan di media browser yang mereka gunakan. Judul blog yang berjalan akan terlihat seperti sebuah Runnng Text (Teks berjalan) yang sering kita saksikan di Telivisi (Biasanya di program Berita).

Blog tite,judul blog,running blog title,judul blog berjalan,blog title berjalan,nama blog berjalan,nama blog
Kalau kita merubah judul blog kita menjadi judul blog yang berjalan, apakah akan berpengaruh terhadap loading blog kita? Tidak, judul blog yang berjalan tidak akan menjadi penyebab lambannya loading blog kita. Tanpa berbicara panjang lebar, ikuti saja Tutorial blogspot di bawah ini!

Cara Membuat Judul Blog Berjalan


  • Sign in di blogger.com
  • Pada Menu Drop Down pilih Template
  • BackUp template sobat terlebih dahulu
  • Selanjutnya, klik edit HTML dan Klik Proceed
  • Cari kode <title><data:blog.pageTitle/></title>
  • Kalau sudah ketemu kode di atas, hapus kode tersebut dan ganti dengan kode di bawah ini!
<b:include data='blog' name='all-head-content'/>
<script language='JavaScript'>
var txt="<data:blog.pageTitle/>";
var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>
  • Terakhir, simpan template sobat

Tambahan :
Untuk mengatur kecepatan dari judul blog sobat blogger yang berjalan, silahkan ganti angka 100 menjadi angka yang sobat blogger inginkan.

dikutip dari : http://www.tutorialblogspot.com

Cara Memasang Script Linkbucks di Blog

Ahmad Ridoan Pasid-XP Updated at : 15:42
Seorang blogger tentunya menginginkan blognya bisa menghasilkan uang dengan mudah dan tanpa susah payah, begitu juga dengan saya sendiri. Google Adsense, adalah penghasil uang dari blog terbaik di Internet tetapi masalahnya tidak mudah untuk menjadi publisher Google Adsense seperti yang saya alami berakhir dengan penolakan oleh Adsense mungkin sudah lebih dari 10x dan menghabiskan banyak email "tahu sendirikan setiap kita ditolak oleh Google Adsense email yang kita gunakan untuk register tidak akan diterima lagi, dengan kata lain email hanya bisa satu kali register, jika gagal tidak akan bisa diulangi lagi kecuali mengganti emailnya".

Nah, maka dari itu saya mencoba berbisnis dengan linkbucks dimana setelah saya register dan berhasil saya merasa bingung cara memasang script-nya di blog namun pada akhirnya berhasil juga.

Berikut adalah langkah-langkah yang saya lakukan tentang Cara Memasang Script Linkbucks di blog saya :

  1. Pertama registrasi / mendaftar dulu di linkbucks, klik disini untuk mendaftar lalu klik sign up
  2. Isi formulis dengan lengkap sesuai data asli anda
  3. Setelah semua tahap register selesai anda akan mendapat email untuk aktivasi, buka email anda dan klik link aktivasi yang diberikan.
  4. Selanjutnya, login dengan username dan password yang anda buat saat mendaftar
  5. Nah, untuk memasang script-nya klik Create Links
  6. Lalu klik menu Full Page Script
  7. Kemudian isi kolom sesuai keinginan anda
  8. Terakhir, copy script yang diberikan lalu pastekan pada widget dimana saja..
  9. Selamat mencoba, selama berbisnis
Kira-kira begitulah cara yang saya gunakan untuk memasang script linkbucks di blog saya..

Buat Heading, Subheading, Minor Heading lebih keren & Cantik

Ahmad Ridoan Pasid-XP Updated at : 15:52

Kali ini saya mau bagi-bagi css heading, subheading, minor heading template saya. Kalo menurut saya sih keren dan enak dilihat, entah kalo menurut sobat. jika menurut sobat juga keren bisa disedot langsung deh.

Heading

.post h2 {background:url(http://3.bp.blogspot.com/-MWU-FEV2XYc/UA7dBBQO4BI/AAAAAAAACOc/61Pg8LiMrjY/s1600/garis-bawah2.gif) left bottom no-repeat;
color: #2673AC;
font-size: 20px;
font-family: Arial, sans-serif;
font-weight: normal;
margin-bottom: 15px;
margin-top: 5px;
padding-left: 0px;
padding-bottom: 10px;
line-height: 27px;
}

Subheading

.post h3 {
font-family: 'Share', Arial; font-size:15px; font-weight:bold; margin:8px 0;text-shadow:1px 0 0 #eee,-1px 0 0 #fff,0 1px 0 #eee,0 -1px 0 #eee,1px 1px 2px #000;
}

Minor Heading

.post h4 {
background:url(http://1.bp.blogspot.com/-h4ZLomxOJsc/TzcHp_4RpDI/AAAAAAAABbM/XqbwFDg0ptQ/s1600/point.png) left bottom no-repeat;
color: #2673AC;
font-size: 20px;
font-family: arial, sans-serif;
font-weight: normal;
margin-bottom: 15px;
margin-top: -5px;
padding-left: 40px;
line-height: 27px;
}

Bagi sobat yang belum tau cara pasangnya gimana, gini nih cara pasang kode cssnya :

1. Mengedit Heading, Subheading, Minor Heading

Pada halaman Edit HTML cari aja tag post h2, post h3, post h4. satu-satu ya nyarinya, kalo salah satu sudah ketemu langsung ganti aja dengan kode yang sudah saya sediakan diatas. Namun sob ada beberapa template yang kodenya nggak dipisah-pisah kayak kode saya. kalo punya saya kan udah saya pisahin jadi heading, subheading, minor heading udah saya pisahin sendiri-sendiri. sedangkan yang belum, biasanya langsung digabungin jadi sati. misalnya h2, h3, h4, h5, h6 dst. itu sobat hapus aja yang h2, h3, h4. lalu pasang aja semua kode diatas diatas tag penutup CSS "]]></b:skin>"

Kayaknya ribet banget nih saya ngejelasinnya, bagi kamu yang kesulitan ngutak-ngatiknya. mumpung saya lagi ganteng nih, sini saya bantuin. kirim template kamu ke email 1lhamatsarhjm@gmail.com, ntar saya beresin. hehe lagi ganteng nih. buruan! biasanya saya gantengnya cuma semenit abis itu jelek setahun tapi kalo emailnya sudah dikirim kasih konfirmasi ya!

2.Menerapkan Heading, Subheading, Minor Heading

Ini kan fungsinya buat nandain teks-teks penting pada postingan kamu. jadi ini cuma berlaku pada postingan kamu aja. cara nerapinnya gini :


  • 1. Pada form Entri buat judul seperlunya kamu. misalnya "Ilham Bachtiar Ganteng" wkwkwk
  • 2. Kemudian pada akhir judul itu kamu tekan aja salah satu menunya (Heading/Subheading/Minor Heading) yang ada di menu bar form entri kamu.
  • 3. dan hasilnya

Pasid-XP


Sekian dulu kalo gitu sob, karena ini udah malem dan nggak sabar lagi mau main Point Blank oya terakhir saya mau ngasih tau posisi saya dimana. saya lagi diwarnet depannya smp 1 batu namanya study net lantai 2 nomor 18. SStttt jangan keras-keras. malam ini ane lagi jadi teroris, males jadi CT. jangan bilang-bilang kedensus kalo ane disini ya takut warnetnya ancur ditembakin, kan punya orang. hehehe Selamat bekerja, semoga berhasil sesuai dengan harapan.
 
dikutip dari : http://obachti-95.blogspot.com

Membuat Home Blog Tampil Judul Saja

Ahmad Ridoan Pasid-XP Updated at : 12:32

Langkah untuk Membuat Home Page Hanya Menampilkan Judul Posting


1.Login Blogger -> Rancangan -> Edit HTML
2.Download Template Lengkap dan beri centang pada kotak Expand Template Widget
3.Cari kode ]]></b:skin>
Setelah ketemu paste kode dibawah ini tepat dibawah kode tadi ( ]]></b:skin> )
<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body{display:none;}
</b:if>
</b:if>
</style>
4.Simpan template dan selasai.

Bila hasil kurang memuaskan dan sobat hanya ingin yang tampil hanya judul post saja tanpa menampilkan tanggal posting silahkan gunakan kode dibawah ini.
<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body, .post-footer, .jump-link,
.post-timestamp, .reaction-buttons,
.star-ratings, .post-backlinks,
.post-icons, .date-header{display:none;}
</b:if>
</b:if>
</style>
Tutorial di atas merupakan cara termudah untuk membuat home page hanya menampilkan judul posting saja sobat bisa mencoba dan melihat hasil yang menkjubkan.

Mempercepat Loading Blog

Ahmad Ridoan Pasid-XP Updated at : 00:36
 
Berikut ini beberapa trik untuk mengatasi loading blog yang cukup berat

Solusinya  :
  1. Hilangkan script-script yang tidak begitu penting serta pernak pernik lainnya
  2. Saya sarankan, lebih baik jangan memasang lagu atau video pada blog karena itu juga dapat memperlambat loading blog
  3. Perkecil ukuran-ukuran image yang terdapat pada blog. Terutama gambar header bagi yang menggunakan gambar sebagai header blog
  4. Kompress file xml atau html blog sobat, kunjungi http://htmlcompressor.com/compressor.html
  • Copas html blog sobat pada kolom yang tersedia
  • Pilih compress
  • Tunggu beberapa saat, setelah html blog sobat terkompress, silahkan copas html blog yang sudah dikompres ke edit html blog. Jika kurang paham bahasanya, ganti html lama blog sobat dengan html blog yang sudah dikompress tadi.
Sebelum mengkompress, amankan dulu html blog sobat. siapa tahu terjadi suatu kesalahan.

Membuat Template dan Form di Microsoft Word

Ahmad Ridoan Pasid-XP Updated at : 12:58
Anda sering berulang-ulang membuat suatu surat dengan layout dan isi yang sama ? atau, Anda ingin memiliki formulir dalam format digital yang bisa diisi langsung di layar komputer dan bisa diarsip filenya tanpa harus mencetak? Semua bisa Anda buat secara praktis dan langsung menggunakan program aplikasi Microsoft Word. Cukup dengan satu file, semua dapat terpenuhi.


Apa itu Template & Form ?

Dalam program aplikasi perkantoran, Anda dapat bekerja secara cepat dan praktis. Salah satunya adalah dengan memanfaatkan Template dan Form.

Template adalah file master untuk membuat sebuah dokumen baru. Dengan menggunakan template, Anda bisa membuat dokumen berulang-ulang berdasarkan tata-letak dan isi yang sudah disiapkan sebelumnya. Selain memanfaatkan beberapa template siap pakai yang telah disediakan Microsoft Word, Anda juga dapat membuat template sendiri sesuai kebutuhan.

Adapun Form adalah template formulir isian dalam bentuk file. Melalui form, Anda secara mudah dapat membagikan file untuk diisi langsung dan dikirim kembali oleh sang penerima dokumen, tanpa harus mencetaknya.

Contoh manfaat template, jika Anda sering membuat surat kontrak perjanjian, pada dasarnya layout dan isi perjanjian adalah sama. Dengan menggunakan template, maka Anda hanya perlu mengubah nomor perjanjian, tanggal, dan identitas pihak kedua yang ada di dokumen baru. Untuk kebutuhan arsip, setiap dokumen yang tercipta dapat Anda beri nama file sesuai dengan nomor perjanjian.

Bagaimana dengan manfaat form ? penggunaan form akan mempercepat distribusi formulir isian dan pengumpulan datanya secara digital. Sebagai contoh, jika Anda menawarkan lowongan pekerjaan, maka Anda dapat menyiapkan form untuk didownload, diisi, dan dikirimkan kembali oleh para pelamar. Untuk pengarsipan, setiap formulir yang telah diisi dapat diberi nama file sesuai dengan nama sang pelamar.

Membuat Template Sendiri 

Pembuatan template sangat mudah. Anda hanya perlu membuat dokumen master, lalu menyimpannya sebagai file template. Sebagai contoh, berikut langkah membuat template yang nantinya akan kita gunakan sebagai master bagi pembuatan formulir digital.
  1. Buat dokumen baru di Microsoft Word 2007. Klik New > Blank document
  2. Mulai susun komponen dan isi dokumen Anda, sebagai contoh disusun dokumen berisi item daftar isian seperti terlihat pada gambar berikut.
  3. Berikan header atau footer, misal berupa identitas perusahaan dan mottonya. 
  4. Untuk mempercantik tampilan, Anda bisa menggunakan tabel seperti pada contoh. Selain itu, Anda format ukuran dan warna teks agar selain lebih cantik juga bisa berfungsi membedakan item-item informasi di dokumen. 
  5. Tambahkan teks atau komponen lain (misal gambar logo perusahaan), sesuai kebutuhan dokumen Anda. 
  6. Simpan file master dokumen template Anda. Klik Save As > Word Template. Berikan nama, misalnya BIODATA.dotx atau BIODATA.dot. Pada contoh digunakan ekstensi .dotx.
Catatan, ekstensi file template dokumen adalah .dotx untuk Microsoft Word 2007, atau .dot untuk Microsoft Word 2003 ke bawah. Jika Anda ingin agar template Anda dapat dibuka di Microsoft Word versi lama, maka gunakan ekstensi .dot. Pada latihan digunakan format .dotx karena akan kita edit lebih lanjut untuk membuat template Form.

Menggunakan Template

Kini Anda telah memiliki satu file template buatan sendiri, yaitu BIODATA.dotx. Sekarang bagaimana cara menggunakannya ? Ada beberapa cara membuka file template untuk membuat dokumen baru :
  • Cara pertama, melalui jendela Microsoft Word 2007 yang telah terbuka. Klik New > New from existing. Browse dan buka file BIODATA.dotx yang telah Anda buat. Hasilnya dokumen baru dengan desain yang telah Anda buat akan ditampilkan dan siap digunakan.
  • Cara kedua, melalui Windows Explorer (My Documents atau My Computer). Buka Windows Explorer Anda, browse dan klik dua kali atau klik kanan > New pada file BIODATA.dotx, maka jendela program Microsoft Word akan tampil dengan sebuah dokumen baru yang siap dipakai.

Anda cukup mengisi data seperlunya dan menyimpannya dengan nama file baru. Dokumen siap dicetak dan diarsip sesuai kebutuhan.

Contoh template di atas sangat sederhana, Anda dapat menggunakan teknik di atas untuk membuat template dokumen yang lebih kompleks, misalnya surat perjanjian, news letter produk baru, atau bahkan booklet dan majalah.

Membuat Form

Pada dasarnya, form adalah template juga. Di dalam template form, telah tersedia kotak isian, daftar pilih, dan sejenisnya untuk mempermudah pengisian form.

Tidak seperti pada Microsoft Word versi lama, pada versi 2007, menu pembuatan form tersembunyi dan tidak tampil di ribbon atau toolbar. Menunya harus kita tampilkan via Microsoft Word Options. Berikut contoh membuat template form :
  1. Buat template baru seperti sebelumnya, atau cukup edit template yang sudah kita buat. Untuk mengedit template, klik Open (bukan New), browse dan buka file BIODATA.dotx. Cara lain, browse file melalui Windows Explorer, klik kanan file BIODATA.dotx lalu pilih Open (bukan New). File template BIODATA akan terbuka dan siap diedit. 
  2. Tampilkan menu pembuatan form. Pada Microsoft Word, klik Office Button di sudut kiri atas, lalu klik Word Options. Pada jendela Word Options, klik Popular lalu aktifkan kotak pilih Show Developer tab in the Ribbon. Klik OK.
  3. Pada jendela Microsoft Word, klik tab Developer yang baru Anda tampilkan. Kini Anda siap menyisipkan komponen form ke item-item isian form yang telah Anda susun.
  4. Sebagai contoh, kita sisipkan komponen kotak isian teks pada item isian nama. Tempatkan kursor di kolom isian nama yang telah kita siapkan. Jika Anda menggunakan format file .dotx, maka cukup klik pada ribbon Developer > Design Mode > pilih tombol jenis komponen form yang tersedia, misalnya Rich Text.
    Jika Anda menggunakan format file .dot, maka tombol shortcut komponen form tidak aktif. Anda harus memilihnya dari Legacy Tools. Klik pada tab Developer > Design Mode > Legacy Tools. Pilih item Text Box, maka text box akan muncul di posisi yang telah kita atur. 
  5. Lakukan hal serupa pada item-item form lain yang harus diisi oleh pengguna form nantinya. 
  6. Kini coba tambahkan kotak pengisian tanggal pada item isian tanggal lahir. Tempatkan kursor pada posisi penyisipan, lalu klik tombol Date Picker. Perhatikan hasilnya.
  7. Atur format tanggal, klik pada komponen form Date Picker yang telah disisipkan, lalu klik Properties. Pilih format tanggal sesuai contoh yang tersedia. Klik OK.
  8. Untuk memudahkan pengisian form, gunakan komponen Drop Down List berisi alternatif jawaban untuk dipilih. Misalnya, letakkan pointer pada kolom isian item Strata Pendidikan Terakhir, klik tombol Drop Down List.
  9. Klik Properties, kali ini isikan alternatif jawabannya. Klik Add untuk menambahkan item jawaban. Klik OK.
  10. Lengkapi form menggunakan komponen-komponen form lain yang telah tersedia hingga seluruh item isian siap digunakan. 
  11. Agar formulir tidak bisa diedit dan hanya bisa diisi oleh pengguna, maka proteksi template form Anda. Pada tab Developer, klik Protect Document, lalu pilih Restrict Formatting and Editing.
  12. Pada sidebar Restrict Formatting and Editing di sisi kanan layar Anda, klik opsi Allow only..., lalu pilih Filling in forms.
  13. Simpan hasilnya. Template Form siap digunakan dan didistribusikan. 

Menggunakan Form 

Untuk memakai form, caranya sama seperti pada template. Bedanya, kini pengguna cukup mengisi atau memilih jawaban sesuai dengan nilai yang telah kita tentukan.
 Selamat mencoba!

Membuat Iklan Pop Up di Blog

Ahmad Ridoan Pasid-XP Updated at : 03:33
Sahabat Blogger, dah lumayan lama gak posting dan nulis Tutorial lagi nih, karena lagi sibuk belajar Wordpress dan Bahasa Inggris neh, hehe. baik, kali ini kita akan membahas tentang CARA MEMBUAT IKLAN POP UP (MELAYANG) Tutorial Menambah Aplikasi Iklan Pop UP atau iklan melayang di blogspot. Langsung saja kita menuju ke cara MEMBUAT IKLAN POP UP disini, langsung disimak ya :


  • Login terlebih dahulu ke blogger
  • Kemudian klik tambah gadget
  • Pilih HTML/JavaScript
  • Copy dan Pastekan kode di bawah ini ke dalam nya


Skrip Iklan pop up di blog
<style>
#topbar {
height:30px;
width:auto;
background: #005094 url('http://lh3.ggpht.com/_beEpWOXwLJE/TIb57Lu4fwI/AAAAAAAABE0/q7niFVRbyNE/top-toolbar.jpg');
background-repeat:repeat-x;
text-align:left;
padding-top:4px;
}
#adsground {
height:auto;
margin:0 auto;
width: 728px;
background:#fff;
border-bottom:2px #005094 solid;
border-right:2px #005094 solid;
border-left:2px #005094 solid;
text-align:Center;
padding:4px;
}


#headlineatas {
opacity:1.0;
height:auto;
width:auto;
position:fixed;
top:65px;
left:170px;
border-bottom:1px #005094 solid;
border-bottom:0px blue solid;
color:#333;
padding:0px;
z-index:1001;
font-size:13px;}
</style>
<script type="text/javascript">
function getValue()
{
document.getElementById("headlineatas").style.display = 'none';
}
</script>
<div id="headlineatas">
<div id="topbar">
<img align="left" style="padding-left:2px;" src="http://icons.iconarchive.com/icons/deleket/folder/24/Mozilla-Thunderbird-icon.png" />
<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em">Space Ads</span>
<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;float:right;padding-top:3px;padding-right:10px"><a href="http://foldmus.blogspot.com" target="_blank" onclick="getValue()">close</a></span>
</div>
<div id="adsground">
<h3>Sponsor Ads </h3>
<p align="left"><h3></h3></p>
<p>
letakkan script iklan anda disini
<br/></p></div></div>


  • Kemudian simpan
  • Ganti Kode yang di beri hurup tebal di atas dengan kode iklan yang anda inginkan.
  • Selesai...

Merubah Posisi Navbar Blogger

Ahmad Ridoan Pasid-XP Updated at : 22:57
Munculnya beberapa opini blogger yang menyebutkan "Menghilangkan atau menghapus Navbar blog melanggar Term Of Service (TOS) yang telah ditentukan oleh Google" membuat rekan-rekan kita sesama blogger merasa khawatir untuk menghilangkan Navbar yang terdapat di dalam blog mereka.

Kekhawatiran tersebut membuat mereka harus berpikir tentang bagaimana cara membiarkan Navbar tetap sepert seperti adanya, akan tetapi tidak merusak atau mengganggu keindahan blog mereka. Pokoknya, bagaimana cara supaya blog tetap terlihat profesional walaupun Navbar tetap ada. Seperti itulah kesimpulan yang saya bisa petik.

Apakah sobat blogger ada ide atau solusi untuk masalah ini? Bagi saya pribadi, alternativ terbaik untuk memecahkan masalah ini adalah dengan cara memodifikasi tampilan Navbar seperti dengan cara membuat Navbar Auto Hide (Navbar Buka Tutup) seperti tutorial blogspot yang saya berikan sebelumnya atau merubah posisi Navbar Navbar yang tadinya di atas Header menjadi di bawah Footer. Emang bisa merubah posisi Navbar dari posisi Top menjadi Buttom?Ya.. Jelas bisa. Untuk detailnya, ikuti saja trik blogspot di bawah ini!

Cara Merubah Posisi Navbar Blogger

  • Sign In di blogger.com
  • Pada Menu drop down, pilih template
  • Klik tombol Costumize untuk menuju laman Blogger Template Designer
  • Klik Advanced dan klik Add CSS
  • Copy Paste kode berikut pada kolom yang tersedia
#navbar-iframe{
position:fixed;
bottom:0px;
}
  • Klik tombol Apply to blog.

Tutorial Blogger tentang cara merubah posisi navbar dari posisi top menjadi posisi buttom ini tidak akan berarti tanpa komentar, saran dan pertanyaan sobat blogger.

Cara Memasang Like Box Facebook dan Twitter Auto Hide di Blogspot

Ahmad Ridoan Pasid-XP Updated at : 23:34
Social media sudah menjadi suatu hal yang harus dimiliki oleh blogger. Kita bisa menshare artikel kita disana dan tentu mendapatkan kunjungan dari link yang kita share disana. Untuk mendapatkan pengunjung secara berkala tentu kita harus menaruh tombol like fan page fb dan follow twitter di blog. Nah, langsung saja kita mulai memasang tombol pop up like box facebook dan follow twitter di blogspot.


Silahkan sobat ikuti beberapa langkah berikut
1.Login ke akun blogger
2.Klik menu Tata Letak/Rancangan
3.Klik Tambah Gadget
4.Klik/pilih HTML/Javascript
5.Masukan kode di bawah ini

 <script src="http://andreykusanagi.googlecode.com/files/pop-up.js" type="text/javascript"></script>
<div id="fbslidebox" style="position: fixed; width: 310px; overflow: hidden; bottom: 5px; right: 5px; background: url(&quot;http://www.scri8e.com/white.gif&quot;) repeat scroll 0% 0% transparent;-moz-border-radius: 15px 15px 15px 15px; border: 3px solid rgb(255, 51, 0); display: block;"><div style="width: 295px; padding: 10px; margin: 0pt auto; overflow: hidden;"><a id="fbcloseslidebox" style="float: right; color: rgb(153, 153, 153); padding: 0pt 2px; border: 1px solid rgb(204, 204, 204); text-decoration: none; font-size: 9px; font-family: Verdana,Geneva,sans-serif;" href="#">Keluar</a><strong style="color: rgb(0, 0, 0);">Jangan Lupa Klik Like Dan Follow ya!</strong><br/>
<a href="https://twitter.com/PasidOnline" title="alibloggers" class="twitter-follow-button" data-button="grey" data-text-color="#000000" data-link-color="#ffffff">Follow @PasidOnline</a><script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fid-id.facebook.com%2FSidimpuanXp&amp;width=292&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true&amp;height=212&amp;appId=128536653899046" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:212px;" allowtransparency="true"></iframe></div></div>

Keterangan : Ganti tulisan yang bercetak tebal sesuai dengan nama twitter dan alamat fan page facebook anda


6.Klik Simpan
7.Selesai 

Itulah Cara Membuat Tombol Pop Up like Box Facebook Dan Follow Twitter Di Blog dapat bermanfaat.

sumber: http://www.andreykusanagi.com/2012/02/membuat-pop-up-facebook-like-dan.html

Mengganti Kursor Blog Dengan Animasi

Ahmad Ridoan Pasid-XP Updated at : 13:35
Salam blogger, apakah sobat sudah bosan dengan tampilan kursor pada blog sobat? Sekarang sobat gak perlu khawatir lagi mikirin cara menggantinya, dengan tutorial blogger yang satu ini pasti bisa deh. Bicara soal kursor blog banyak cara untuk memodifikasi si kecil yang paling utama dilayar monitor ini. Misalnya dengan membuat efek pada kursor atau merubah tampilan kursor itu sendiri. Cara kerja dari tutorial ini sendiri sangat mudah, kursor para pengunjung akan berubah jika sedang berada di blog sobat.

Berikut langkah-langkah membuat widget blogger indonesia:
1. Login ke account blogger sobat
2. klik menu Tata letak
 
 
3. lalu tambah gadget
 
 
4. kemudian pilih html/javascript
 
5. sobat copy kode dibawah ini
<style type="text/css">
body{cursor: url("
http://1.bp.blogspot.com/-svbqV9m5jCY/UEyG6YdKwsI/AAAAAAAACRc/S_Yl7HeO6q0/s1600/kursor-4-boytriks.gif"), auto;}
</style>
Kursor yang akan dibuat=>

6. Jika ingin mengganti dengan image yang lain, ganti url gambar di atas 
   dengan url gambar yang anda inginkan, misal 3 contoh dibawah ini:
http://3.bp.blogspot.com/-jLf8YeucdVk/UEyG3OcRr8I/AAAAAAAACRE/ee-pqObY8-U/s1600/kursor-1-boytriks.png

http://4.bp.blogspot.com/-NkpUporZr-Q/UEyG4MqZFKI/AAAAAAAACRM/mrBMmbzG8Ok/s1600/kursor-2-boytriks.png

http://4.bp.blogspot.com/-cnjY75jo5Kw/UEyG5TStHII/AAAAAAAACRU/iXVWpsRxco0/s1600/kursor-3-boytriks.png

7. kemudian simpan gadget

Selamat mencoba dan semoga bermanfaat

Tips Seo Pada Template : H1 H2 H3 dst

Ahmad Ridoan Pasid-XP Updated at : 12:19
Penggunaan Tag H1, H2, H3 dst Agar SEO Friendly di Blogspot - Memang Dalam template blogspot sangat banyak kita jumpai yang tidak SEO Friendly, misalnya penggunaan Meta tag, tidak adanya Breadcrumb, struktur H1, H2, H3, dst yang kacau dll. Untuk cara membuat Meta tag dan Cara Termudah Membuat Breadcrumb bisa dilihat dalam posting blog Seo terbaru 2012 sebelumnya

Struktur H1, H2, H3, dst yang baik dan benar sangat membantu sebuah blog menjadi SEO friendly dan bisa bersaing di posisi SERP google.

Lantas bagaimana sturuktur H1, H2, H3, dst yang benar? menurut beberapa pakar SEO yang sempat saya timba ilmunya, sturuktur H1, H2, H3, dst harus berurutan, jangan sampai saling lompat.

Misalnya, untuk TAG H1 diletakkan pada bagian header template atau untuk nama blog kita dan jangan diulang, Tag H2 digunakan pada judul posting blog, begitu seterusnya, maka akan membuat template blog kita struktur kodenya menjadi teratur dan akan disukai robot search engine

Berikut ini adalah cara membuat Tag H1, H2, H3 dst Agar SEO Friendly di template blogspot

1. Login ke dasboard blogspot

2. Pilih layout/tata letak - Edit HTML - centang pada Expand Widget Templates (gunakan CTRL+F pada keyboard, Untuk mempermudah pencarian kode yang akan di rubah)

3. Merubah Judul Posting Dengan Tag H2

cari kode

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

ganti dengan

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>

4. Merubah Judul Blog

Cari kode


<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>

ganti dengan

<b:if cond='data:blog.pageType != "item"'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</p>
</b:if>

Selanjutnya cari kode

<h1 class='title'>
<b:include name='title'/>
</h1>

ganti dengan

<b:if cond='data:blog.pageType != "item"'>
<h1 class='title'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title'>
<b:include name='title'/>
</p>
</b:if>


5. Merubah CSS agar sesuai dengan template

cari kode


.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

ganti dengan

.post h1, .post h2 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h1 a, .post h1 a:visited, .post h1 strong, .post h2 a, .post h2 a:visited, .post h2 strong{
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

.post h1 strong, .post h1 a:hover, .post h2 strong, .post h2 a:hover {
color:$textcolor;
}


selanjutnya cari kode

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}


ganti dengan


#header h1, #header p {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}


Selanjutnya cari kode


h2.date-header {
margin:1.5em 0 .5em;
}



Ganti dengan (hapus H2.date-header):


.date-header {
margin:1.5em 0 .5em;
}

Terakhir cari kode:

<h2 class='date-header'><data:post.dateHeader/></h2>

Ganti dengan :

<div class="date-header">
<data:post.dateheader></data:post.dateheader></div>

Jangan lupa simpan template dengan tekan tombol save.
Semoga bermanfaat, selamat mencoba

Cara Menyembunyikan CSS Blog

Ahmad Ridoan Pasid-XP Updated at : 01:16
Berhubung banyak yang meminta Tutorial ini jadi saya Share disini, dan juga tutorialnya yang sulit =,=" jadi saya sertakan juga Videonya (•_•"), trick ini bekerja sebagai pelindung untuk css dengan cara Menyembunyikan nya ke lain Hosting jadi kalau di CTRL + U tidak kelihatan Source code nya, oke langsung saja saya jelaskan Tutorialnya Yang Rumit hehehe.. slow aja gampang kok ada Tutorialnya \(´▽`)/





Perhatikan dengan Seksama Video di atas ( ¯з¯)-σ disana saya Menggunakan 000Webhost.
  1. Login ke Blogger.com Pergi ke Rancangan/Template > Edit HTML 
  2. Potong (Cut) script CSS diantara tengah-tengah kode berikut<![CDATA[ script css yang di cut ]]>
  3. Paste CSS tersebut di Notepad, namanya Terserah Contoh: Style.css, CSSgue.css, cssblog.css
    terserah asalkan belakanya ada berformat .css
  4. Jika sudah ambil url yang sudah di Upload ke 000webhost/File manager tadi \(´▽`)/ 
  5. Ganti kode <b:skin><![CDATA[ ]]></b:skin> dengan kode dibawah ini
    <link href='URL-FILE-CSS' rel='stylesheet' type='text/css'/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <b:skin><![CDATA[ ]]></b:skin>
    </b:if> 
  6. Terakhir Simpan Template \(´▽`)/ 
Semoga kalian berhasil ≧◡≦   kalo gak bisa ya keterlaluan sudah di kasih tutor dan Videonya juga Xd !

http://jereyztrick.blogspot.com/2012/08/trik-cara-menyembunyikan-css-blogger.html
Rating Artikel : 5Jumlah Voting : 99 Orang

Trik Agar Blog Menjadi Trendsetter

Ahmad Ridoan Pasid-XP Updated at : 10:32

Bagaimana Cara Agar Blog  Kita Menjadi Trendsetter?  

Sebelum saya membahasnya saya akan mendiskripsikan dulu Apa itu Trendsetter. Trendsetter Adalah Orang yang menjadi sorotan dan mempengaruhi untuk trend/gaya .Atau bisa dikatakan sesuatu yang  diikuti atau ditiru oleh banyak orang bisa juga berarti sorotan atau hal yang sedang dilihat oleh banyak orang.Trendsetter itu sendiri biasanya cenderung ke busana/Baju pakaian. Tapi untuk pembahasan kali ini Trendsetter akan saya hubungkan dengan Blog. Lalu apa hubungannya? Banyak sekali hubungannya, Tapi yang paling umum adalah trandsetter Tampilan Blog .Tapi juga banyak hal-hal lain di dalamnya. Di bawah ini adalah beberapa Trik Agar blog menjadi Trendsetter :

1.Tampilan Blog Anda.

 Buatlah Tampilan Blog atau Template anda yang begitu menawan alias Unik.yang sewaktu orang pertama kali melihat blog anda sebelum visitor membaca artikel dari anda itu,visitor langsung terkesan kepada tampilan Blog anda.

2.Artikel yang Unik.

 Jika anda bisa membuat artikel seunik mungkin itu juga bisa menjadi Trendsetter yang akan menginspirasi visitor blog anda.

3.Buatlah perubahan berkala Pada Tampilan yang sudah ada.

 Mungkin jika orang ketika berkunjung keblog anda dengan tampilan yang begitu menawan,tapi ketika sering berkunjung dengan tampilan yang itu-itu saja mungkin dia akan lama-lama bosan,kita kembalika kepada diri kita saja?Ibarat kita makan dengan lauk ikan dan tiap hari makan ikan terus pasti lama-lama juga akan bosan.Jadi untuk mengatasi hal di atas yang harus anda lakukan adalah dengan memBuatlah perubahan secara berkala Pada Tampilan yang sudah ada.

Itulah beberapa trik  Agar blog menjadi Trendsetter.jika anda punya trik yang lebih manjur bisa anda tambahkan di from komentar untuk kita dikusikan bersama-sama. 

http://facewoman.blogspot.com/2012/08/trik-agar-blog-menjadi-trendsetter.html
Rating Artikel : 5Jumlah Voting : 99 Orang

Cara Memasang Energy Saver di Blog

Ahmad Ridoan Pasid-XP Updated at : 05:50
Apakah sobat blogger pernah melihat sebuah blog yang menampilkan screen Saver warna hitam gelap yang menampilkan tulisan "Saving Mode"? Sebenarnya, tampilan Saving Mode yang muncul bukanlah Screen Saver, melainkan fitur Energy Saver untuk Blog. Fitur Energy Saver ini akan muncul apabila pengunjung blog kita tidak melakukan aktivitas apapun di blog kita. Misalkan begini, pengunjung blog kita membuka beberapa blog/situs. Kemudian blog kita yang di buka oleh mereka didiamkan saja. Ketika pengunjung tersebut balik ke blog kita, maka tampilan yang mereka lihat adalah tampilan Saving Mode. Tetapi, ketika mereka sudah menggerakan atau menggeser cursor mereka, maka mereka kembali melihat blog kita seperti semula.


Energy Saver,Energy,saver,tutorial blogspot,screen saver,cara memperindah blog,blog

Fitur ini sangat keren dan sangat bagus kalau di pasang di blog. Jadi buat sobat blogger yang berminat untuk memasang Energy Saver, ikuti tutorial blogspot di bawah ini:

Cara Memasang Energy Saver di Blog

  • Login di blogger.com
  • Pada menu drop down, pilih template
  • Backup Template sobat terlebih dahulu
  • Klik Edit HTML dan klik Proceed
  • Copy paste kode berikut sebelum kode </head>
<script language='javascript' src='http://tutorialblogspot.googlecode.com/files/savetheenvironment.js' type='text/javascript'/>
  • Simpan template sobat

Untuk melihat hasilnya, reload atau refresh blog sobat. Kemudian diamkan selama satu menit.

http://www.tutorialblogspot.com/2012/07/cara-memasang-energy-saver-atau-screen-saver-di-blogger.html

Rating Artikel : 5 Jumlah Voting : 99 Orang
 

Google+ Followers

Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Pasid-XP - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger