com
Puji syukur senantiasa tercurah ke hadirat Allah SWT, karena atas limpahan rahmat dan karuniaNya Buku yang berjudul "Cara Mudah Membuat Blog di Blogspot" dapat terselesaikan. Buku ini disusun untuk memberikan panduan bagi mereka yang masih awam dan punya keinginan dan mau belajar tentang dunia blog. Semoga buku ini bermanfaat. Amin Ya Robbal Alamin.
lutfietutor.blogspot.com
Daftar Isi
BLOG .................................................................................................................................... 3 1. 2. 3. 4. 5. 6. CARA MEMBUAT BLOG ............................................................................................. 3 CARA POSTING DI BLOG ............................................................................................ 4 HALAMAN PADA BLOG .............................................................................................. 7 CARA MENAMBAHKAN GADGET DAN TATA LETAK .................................................... 7 Cara Pengaturan Postingan ....................................................................................... 8 Cara Merubah Skin/Template Dalam Blogspot .......................................................... 9
SEO (Search Engine Optimation) ......................................................................................... 11 1. 2. 3. Seputar Seo ............................................................................................................ 11 TUJUAN SEO ........................................................................................................... 11 BEBERAPA TEKNIK SEO ............................................................................................ 11
TAMBAHAN ........................................................................................................................ 16 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. Cara Membuat Related Post ................................................................................... 16 Cara Menyisipkan Widget Flash Analog ................................................................... 18 Cara Membuat Slide Box Di blogger/blogspot ......................................................... 19 Cara Membuat Slide Box Di Blogspot bagian 2 ........................................................ 21 Cara Membuat Page Navigasi 123 di Blogspot ......................................................... 22 Membuat Halaman Blog Seperti Halaman Buku ...................................................... 25 Cara Membuat Search Form.................................................................................... 26 Cara Mengganti Coursors Mouse di blogspot .......................................................... 28 Cara Menyisipkan Tombol PDF Creator di Blogspot ................................................. 28 Cara Mengganti Komen Di Blogspot Dengan IntenseDebate ................................ 29 Cara Menyisipkan Button Sharing Widget............................................................ 30 Float Social Bookmarks Di Blogspot ..................................................................... 32 Free Template Blogspot ...................................................................................... 33
lutfietutor.blogspot.com
BLOG
1. CARA MEMBUAT BLOG
Berbicara tentang blog memang tidak ada habisnya. Walaupun pada saat ini sedang tren situs pertemanan, namun ekstensi blog tidak akan tergantikan. Blog yang pada awal diperkenalkan sebagai buku harian Online, kini berubah menjadi mesin multifungsi yang bukan hanya bisa di jadikan buku harian online. Blogspot, Wordpress, Multiply dan beberapa layanan blogging lainnya masih tetap eksis dan bahkan penggunanya semakin banyak di tengah menjamurnya situs sejaring semacam Facebook Dan Twitter. Langsung pada artikel ini saya akan membahas sedikit tentang cara membuat Blog Di Blogspot. caranya mudah dan gampang sebelum memulai membuat blog , alangkah baiknya kita mempunyai email terlebih dahulu dan direkomdasikan pakai Gmail. cara Membuat E-mail Silahkan anda baca artikelnya disni (http://lutfietutor.blogspot.com/2012/01/cara-membuat-akun-gmail-googlemail.html). Setelah mempunyai E-mail anda buka alamat www.blogger.com atau anda bisa cari di www.google.com. setelah di buka anda akan di hadapkan dengan tampilan seperti gambar di bawah
Blogger.com 1 Jika sudah punya email di Gmail.com sobat tinggal login dengan menggunakan email dan sandi dan klik tombol masuk.
lutfietutor.blogspot.com
Setelah masuk blogger dasboard anda tinggal klik buat blog baru dan masukan Judul Blog,Alamat Blog dan memilih Tampilan.
Tampilan Awal Membuat Blog 1 Sebelum di teruskan cek dulu alamat blognya apakah tersedia atau tidak, jika alamatnya sudah tersedia sobat tinggal klik Tombol Buat Blog, selesai sudah sobat membuat blog.
Post Blog 1 Setelah itu akan terbuka halaman untuk membuat posting di blog.
lutfietutor.blogspot.com
Post Blog 2 Disana ada 2 tampilan yaitu Compose dan HTML, jika sobat lebih mengerti dengan kode HTML sebaiknya sobat menggunakan tampilan HTML tapi jika masih awan sebaiknya menggunakan interface Compose saja. Cara memilih jenis hurup sobat tinggal Klik logo yang bertanda F
Post Blog 3 Untuk Selanjutnya untuk mengatur kecil sobat tinggal klik yang bertanda TT tampilan huruf mau besar atau
Post Blog 4
Post Blog 5
lutfietutor.blogspot.com
I U ABC A = Italic artinya tulisan di post miring = Underline tulisannya bergaris bawah = Strikethrough artinya tulisan di coret di tengah tengah = Untuk member warna pada hurup/tulisan
Teks BackGround Color = Untuk member warna latar pada tulisan Link Insert Image Insert Video Insert Jump Break postingan Aligment kanan Number List Bullet List Quote psotingan T Spelling = Untuk Memberi Link Pada Tulisan = Untuk menyisipkan gambar pada postingan = Untuk memasukan Video ke dalam blog = Untuk memberikan readmore/penggalan
= Untuk member nomor/penomoran pada postingan = Untuk member Bullet pada postingan = Untuk memberi Block Note atau catatan kecil pada
= untuk mengahapus format dalam postingan = Untuk Cek Grammer ada lagi yaitu cara
Post Blog 6
lutfietutor.blogspot.com
Label Jadwal Tautan Permanen Lokasi Pilihan : Untuk member label pada postingan : Untuk Memberi Jadwal Postingan : Untuk menyisipkan tautan permanen pada postingan : Untuk menyisipkan lokasi postingan : Untuk memberikan apakah postingan tersebut boleh di komentar atau tidak,dll.
Desgin Blog 1
lutfietutor.blogspot.com
Setelah itu akan muncul beberapa gadget, sobat tinggal pilih dari salah satu gadget tersebut untuk ditampilkan dalam dalam blog sobat.
Desgin Blog 2
Desgin Blog 3
lutfietutor.blogspot.com
Desgin Blog 4
Jumlah Posting : Tampilan posting di halaman utam Teks Tautan Tanggal Komentar Label : Untuk memberikan tautan teks jika postingan di ringkas : Untuk mengatur format tanggal dalam tampilan postingan : Untuk menampilkan komentar : untuk menampilkan label dalam postingan
Desgin Blog 5
lutfietutor.blogspot.com
Cara kedua sobat bisa desain sendiri di blogger editor, caranya sobat tinggal klik tombol seseuaikan, disana sobat bisa atur dari mulai lebar blog, Latar Belakang,BackGround,Tata Letak,Warna,dan yang lainnya.
Desgin Blog 6
Cara Ketiga sobat bisa upload template hasil download dari penyedia template blogger terus sobat copy Script nya terus masukan dalam form edit HTML lalu klik simpan.
Desgin Blog 7
Engine Optimation)
Secara umum SEO Adalah cara optimasi website agar bisa ditampilkan di halaman utama pada sebuah situs pencarian. Intinya adalah apabila seseorang mengetikkan kata pencarian pada kotak search engine seperti di Google, Yahoo,Bing maupun MSN maka alamat web kita bisa muncul di halaman pertama pencarian sesuai dengan kriteria kata kunci yang dicari user tersebut. terus apa Tujuan SEO tersebut?
2. TUJUAN SEO
Tujuannya yaitu untuk mengoptimalisasi blog/web supaya menjadi nomor satu di Search Engine (mesin pencari), jika kita mempunyai visi dan misi dalam pembuatan web/blog maka dengan teknik ini tujuan dari suatu web/blog akan mudah di capai, dikarenakan dengan secara otomatis pengunjung/visitor akan naik dan meningkat, dan kepopuleran web/produk kita akan lebih cepat.
lutfietutor.blogspot.com
Adalah halaman yang menampilkan peta link pada website, sitemaps memudahkan spider dari search engine untuk menelusuri isi website dan mengupdate setiap perubahan yang terjadi di website pada database search engine. Natural Listing Natural Listing adalah kita mendaftarkan website pada search engine untuk diindex dalam database search engine tersebut agar bisa ditampilkan pada hasil pencarian melalui search engine tersebut 1) Beberapa Cara Optimalisai Blog supaya Seo Friendly dengan Mesin Pencari a) b) c) d) e) f) g) h) i) j) k) l) m) n) Optimasi Tampilan Blog Optimasi Header Blog Optimasi Widget Untuk Interkasi Optimasi Alamat Blog Ke Google Optimasi Alamat Blog Ke Yahoo Optimasi Menggunakan Ping Optimasi Dengan Backlink Optimasi Dengan Tukaran Link Optimasi Menggunakan Meta Tag Optimasi Berlangganan Artikel Melalui Email Optimasi Mengetahui Kebiasaan Pengunjung Optimasi Blog Dengan Situs Jejaring Social Optimasi Memasang Page Rank(PR) Optimasi Dengan Mengisikan Label
2) Cara Optimalisasi Tampilan Blog Cara optimasi blog dengan tampilan blog, emangnya tampilan/design blog mempengaruhi dalam optimasi? mungkin itu yang menjadi pertanyaan sobat blogger, tampilan blog yang bagus dan menarik adalah salah satu optimasi yang dapat meningkatkan pengunjung ke dalam blog, tampilan ini harus sesuai dengan tema yang akan diangkat dan dibahas dalam isi blog kita. Banyak ragam template blogspot yang dapat sobat gunakan untuk mempercantik tampilan blog, baik template dari blogspot itu sendiri hingga template yang disediakn oleh pihak ketiga, jika sobat menggunakan template bawaan blogspot tentunya template blog sobat masih standar, ada banyak sekali template blogspot gratis yang disediakan di dunia maya ini, kalo tidak salah dulu saya pernah posting beberapa situs penyedia template blogger secara gratis, cara optimasi tampilan blog ini ada dua cara : Pertama, sobat Design Template sendiri dengan menggunakan fasilitas Blogger Design Template. Kedua , sobat bisa download template dari situs penyedia Blogger Template
lutfietutor.blogspot.com
3) Cara Optimalisasi Tampilan Blog Jika blog diibaratkan sebuah buku, maka header blog di ibaratkan dengan jilid buku yang bisa mewakili isi dari suatu buku, begitu pula dengan Header Blog yaitu mewakili isi dari suatu blog, tampilan header yang menarik atau setidaknya menunjukan suatu identitas dari isi konten suatu blog akan dapat membantu pengunjung mengenali apa isi yang dimaksud. Sehingga setelah pengunjung melihat tampilan header akan langsung mengerti konten yang ada di dalam blog sobat, untuk membuat tampilan header pada blog memang perlu sedikit keahlian dalam bidang desain Grafis, seperti Adobe Photoshop , Corel Draw, Gimp dan yang lainnnya. Untuk mengganti atau menambahkan Header pada blogspot caranya sangat mudah, jika sobat bermaksud mengganti header blog sobat silahkan sobat terus baca Tutorial blog pada artikel ini. langkah awal yang harus sobat persiapkan adalah sebuah gambar untuk header, dan ingat gambar tersebut harus cocok dengan isi/konten blog sobat, setelah gambar siap di upload langkah selanjutnya sobat ikuti langkah langkah di bwah ini. Login ke blogger Masuk ke area design/tata letak blog Terus sobat tambahakan (jika belum ada) header, atau klik edit pada Gadget Header Langkah selanjutnya sobat klik Browse untuk mencari file header yang sudah sobat buat, atau sobat bisa masukan alamat gambar jika sobat sudah mengupload gambar header tersebut ke internet.
Desgin Blog 8
Sebelum di save sobat atur dulu tampilan header nya disana ada beberap pilihan
lutfietutor.blogspot.com
Behind Title and Description Instead of Title and Description Have Description placed after the image Sharink to fit
Langkah terakhir (jika sudah selesai) sobat klik tombol save dan lihat hasilnya 4) Cara Optimalisasi Widget Untuk Interaksi Cara optimalisasi blog lewat widget untuk interaksi dengan pengunjung, salah satu hal yang menarik dan dapat dijadikan optimalisasi blogspot adalah adanya bermacam macam widget yang dapat dipasang ke dalam sidebar blog. Widget-widget tersebut bukan hanya sebagai pemanis di dalam blog, tetapi dapat pula dijadikan sebagai optimalisasi dan interaksi antara pengunjung dengan admin atau pemilik suatu blog/website. Jika sobat selalu berinteraksi dengan pengunjung maka sobat akan mengerti dan paham tentang apa yang di butuhkan oleh pengunjung, ada bermacam macam widget blog untuk digunakan interaksi antara pemilik blog dengan pengunjung, diantanya : Pemasangan Kotak Komentar Pemasangan YM (Yahoo Masangger) Pemasangan Buku Tamu Pemasangan Chat Live Pemasangan Forum Pemasangan Social Media Milik Admin blog 5) Cara Optimalisasi Blog dengan Google Untuk Optimaliasi ini sama dengan submit blog ke webmaster milik google.com Cara Submit Ke Google Webmaster. menurut para ahli Seo cara ini mungkin sering di lakukan dan harus, karena kebanyakan orang mencari sesuatu di dunia maya atau internet bisanya menggunakan jasa search engine google. jadi sebaiiknya jika blog rekan rekan ingin di index dalam mesin pencari google sebaiknya sobat ikuti cara ini. Sebelum ke TKP alangkah baiknya kita mengetahui dahulu apa Itu Google Webmaster?. Google Webmaster adalah alat untuk para webmaster yang berguna untuk memeriksa status pengindexan dan visibilitas pengoptimalan web di mesin pencari google, atau bisa juga di katakan salah satu teknik Seo, oke mungkin itu sedikit gambaran tentang google webmaster. Silahkan sobat kunjungi alamatnya di www.google.com/webmasters/ 6) Cara Optimalisasi dengan Backlink Sebelum menganal lebih jauh tentang backLink sebaiknya kita mengetahui apa itu BackLink? backliknk atau blogwalking adalah suatu optimasi blog yang sering dugunakan, sobat dapat berkunjung dari blog satu ke blog lainnya dengan memberikan komentar ke dalam blog yang sobat kunjungi. Tentu saja dengan
lutfietutor.blogspot.com
meninggalkan suatu jejak atau link blog milik sobat agar blog sobat yang kunjungi dapat kembali mengunjungi blog sobat. Sobat dapat mencari blog-blog yang sejenis dengan konten yang ada di dalm blog yang sobat buat, sobat dapat memanfaatkan Google (search engine) untuk melakukan pencarian, selain itu sobat juga dapat mengunjungi layanan Direktory blog, misalkan Blog Catalog, Technorati, Topofblogs, Blogtopsite, dan direktori blog yang lainnya. Ada beberapa hal yang harus sobat perhatikan dalam meninggalkan komentar yaitu : Dalam memberikan komentar gunakanlah bahasa yang sesuai dengan bahasan isi/konten blog. Kunjungi Blog yang mempunyai konten sama Jangan melakukan Spaming Berikan kalimat referensi saja jangan kalimat kalimat promosi Yang penting sertakan Link URL artikel sobat yang berhubungan dengan isi artikel yang sobat kunjungi. 7) Cara Optimalisasi dengan Ping Services Sebelumnya sobat mungkin bertanya apa itu ping? Ping adalah sebuah tools atau alat yang dapat sobat gunakan mempromosikan blog ke banyak service yang ada di dunia internet. Jika ping di analogikan sebagai speker pengumuman di keluarahan, maka setiap RT dapat mendengar pengumumam yang dilakukan oleh speaker di kelurahan, jadi jika di dalam dunia blog pengumuman dapat diartikan adalah konten artikel yang ada di dalam blog, dan setiap RT diartikan sebagai web services yang menerima pengumuman. Sobat sudah mengertikan dengan maksud kata kata diatas? kesimpulannya ping services adalah sebuah tools yang dapat digunakan untuk mempromosikan sebuah konten web/blog di dalam dunia internet. banyak sekali tools yang dapat digunakan untuk melakukan ping diantaranya : Google Ping Ping O Matic Pingates Pingoat Dan Masih banyak lagi.. Untuk menggunakan tools ping yang ada di internet caranya mudah sekali pertama sobat kunjungi situs penyedia layanan ping misalkan Ping O Matic, setelah itu sobat diminta untuk memasukan Nama Blog, Alamat (URL) Blog, RSS URL. misalkan sobat ingin ping blog sobat menggunakan Ping O Matic sobat tinggal masukan apa yang harus diasukan dalam form isian. Setelah semuanya di isi sobat klik tombol Send Pings
lutfietutor.blogspot.com
TAMBAHAN
1. Cara Membuat Related Post
Cara membuat related post di blogger, namun pada kesempatan ini saya akan menulis tentang related post dengan gambar, untuk membuat related post dengan gambar seperti di bawah caranya hampir sama seperti pada postingan yang terdahulu, namun ada sedikit penambahan script.
Desgin Blog 9
Oke sekarang kita langsung saja, langkah pertama untuk membuat related post dengan thumbail/gambar yaitu : Sobat Login ke akun Blogger Terus Sobat masuk ke area Design/Rancangan Blog Langkah Selanjutnya Klik Tab Edit HTML Terus jangan lupa sobat centang Expand Widget Templates Terus sobat cari tag </head>, setelah ketemu tag </head> sobat copy kode di bawah ini
lutfietutor.blogspot.com
Setelah itu sobat cari tag/kode <div class='post-footer-line postfooter-line-1'> atau yang menyerupai atau sobat juga bisa meletakannya di bawah tag <data:post.body/>, silahkan yang mana saja boleh yang penting bisa dipasang, setelah itu sobat copy kode di bawah ini dan letakan di bawah kode <data:post.body/> atau kode <div class='post-footer-line postfooter-line-1'>.
<div class='rthumbail'> <b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if>
lutfietutor.blogspot.com
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-inscript&callback=related_results_labels_thumbs&maxresults=6"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div><div style='clear:both'/> </b:if> </div>
Langkah terakhir sobat save template blog nya, dan lihat hasilnya
Gadget 1
Selain dari situs widgetbox.com sobat bisa memasang jam di blog dengan mengambil script dari situs http://www.clocklink.com/ caranya hampir sama dan jam nya pun berbagai macam. pertama sobat kunjungi alamt tadi, terus sobat klik Gallery dan pilih style jam yang ada diatarnya : Jam Analog Jam Animal Jam Animation Jam Digital dan yang lainnya
lutfietutor.blogspot.com
Gadget 2
Slide box disini hampir mirip dengan related post namun disini sobat harus manual memasukan link (url) dan gambarnya. sebelum ke cara membuat slide box sebaiknya sobat lihat dulu contonya di gambar atau sobat bisa lihat di blog ini, jika sobat tertarik dengan gadget seperti itu silahkan sobat di coba pada blog sobat. Langkah pertama untuk membuat slide box yaitu : o Sobat login ke blogger dengan akun masing masing. o Setelah itu sobat langsung menuju ke tab Design/Rancangan blog o Langkah selanjutnya sobat masuk ke area edit HTML terus centang kotak Expand Widget o Setelah itu sobat cari kode/tag <b:skin>, setelah ketemu sobat copy kode di bawah ini dan letakan di atas kode <b:skin>
lutfietutor.blogspot.com
/** * show the first set of posts. * 200 is the initial left margin for the list elements */ load(200); function load(initial){ $list.find('li').hide().andSelf().find('div').css('margin-left',-initial+'px'); var loaded = 0; //show 5 random posts from all the ones in the list. //Make sure not to repeat while(loaded < 5){ var r = Math.floor(Math.random()*elems_cnt); var $elem = $list.find('li:nth-child('+ (r+1) +')'); if($elem.is(':visible')) continue; else $elem.show(); ++loaded; } //animate them var d = 200; $list.find('li:visible div').each(function(){ $(this).stop().animate({ 'marginLeft':'-50px' },d += 100); }); } /** * hovering over the list elements makes them slide out */ $list.find('li:visible').live('mouseenter',function () { $(this).find('div').stop().animate({ 'marginLeft':'-220px' },200); }).live('mouseleave',function () { $(this).find('div').stop().animate({ 'marginLeft':'-50px' },200); }); /** * when clicking the shuffle button, * show 5 random posts */ $('#rp_shuffle').unbind('click') .bind('click',shuffle) .stop() .animate({'margin-left':'-18px'},700); function shuffle(){ $list.find('li:visible div').stop().animate({ 'marginLeft':'60px' },200,function(){ load(-60);
lutfietutor.blogspot.com
}); } }); //]]></script>
Langkah terakhir sobat masukan kode HTML di bawah ini di atas kode/tag </body>
<li> <div> <img height='72' width='72' alt='JUDUL GAMBAR' src='URL-GAMBAR'/> <span class='rp_title'>JUDUL-POSTINGAN</span> <span class='rp_links'> <a href='URL-ARTIKEL' target='_blank'>Article</a> <a href='URL-DEMO' target='_blank'>Demo</a> </span> </div> </li>
Keterangan : ganti lah kode di atas dengan url milik sobat JUDUL GAMBAR ="Judul gambar dalam artikel" URL-GAMBAR ="Alamat (url) gambar contoh 'http://4.bp.blogspot.com/82zuLn1pxRQ/TrOw0D0XkeI/AAAAAAAAAMU/gsibuP0_zac/s72c/download-template-today.jpg' " JUDUL-POSTINGAN : "Judul artikel milik sobat blogger" URL-ARTIKEL ="Alamat artikel yang akan di tuju" contoh :http://lutfietutor.blogspot.com/2012/03/cara-download-file-pdfdari-scribd.html URL-DEMO ="Alamat demo jika blog sobat memiliki demo/tutorial yang online"
lutfietutor.blogspot.com
Setelah itu klik tombol Save/Simpan dan lihat hasilnya.
Langkah pertama anda login ke blogger dan klik Design, langkah selanjutnya Klik Edit HTML dan jangan lupa anda centang Expand Widget. nah setelah itu anda cari kode ]]></b:skin> , setelah ketemu anda anda paste kode di bawah ini tepat di atas kode ]]></b:skin> . Code
.showpageArea { font-family:verdana,arial,helvetica; color: #000; font-size:11px; margin:10px; } .showpageArea a { color: #000; font-weight: 700; } .showpageNum a { padding: 3px 8px; margin:0 1px; text-decoration: none; border:1px solid #999;
lutfietutor.blogspot.com
background: #ddd url(http://2.bp.blogspot.com/xNwmGFU6lS4/Tlwd880bSSI/AAAAAAAABgc/kh0r70Q5UMM/s000/wp1.jpg) 0 50px repeat-x; } .showpageNum a:hover { border:1px solid #888; background: #ccc url(http://2.bp.blogspot.com/xNwmGFU6lS4/Tlwd880bSSI/AAAAAAAABgc/kh0r70Q5UMM/s000/wp1.jpg) 0 25px repeat-x; } .showpageOf{ margin:0 8px 0 0; } .showpagePoint {font-size:11px; color:#fff; padding: 3px 8px; margin: 1px; font-weight: 700; border:1px solid #888; background: #444; text-decoration: none; }
Oke setelah itu save template blog anda dulu biar poll.. he he.. tidak di save juga tidak apa apa. oke next anda cari kode </body> setelah ketemu oke setelah ketemu anda copy kode di bawah dan letakan di atas kode tadi.
<script type='text/javascript'> var pageCount=3; var displayPageNum=5; var upPageWord ='Sebelumnya'; var downPageWord ='Selanjutnya'; </script> <script type='text/javascript'> //<![CDATA[ function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);ti mestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCoun t-1))){if(thisUrl.indexOf(timestamp)!=1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?u pdated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-
lutfietutor.blogspot.com
1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPa geHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){h tml=''+upPageHtml+' '+html+' '}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum1)+')</span>'+html;if(thisNum<(postNum1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageAre a.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.le ngth):"";thisLable=thisLable.indexOf("?")!=1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&maxresults='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);ti mestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCoun t-1))){if(thisUrl.indexOf(timestamp)!=1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/la bel/'+thisLable+'?updated-max='+timestamp+'&maxresults='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPage Html='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a>< /span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPa geHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if (!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageAre
lutfietutor.blogspot.com
a.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?u pdated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("? &max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-inscript&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full//'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}} //]]> </script>
Setelah selesai anda save template blog anda. dan lihat hasilnya. jika belum ada hasil dan masih tetap seperti semula anda cari kode ini 'data:label.url' jika setelah ketemu anda ganti code tersebut dengan kode ini 'data:label.url + "?&max-results=5"' terus klik save biar cepet. he he.. keterangan untuk yang berwana merah diatas yang kodenya seperti ini Sebelumnya dan Selanjutnya silahkan anda ganti sesuai dengan selera anda. var pageCount=3; jumlah tampilan nomor yang di bawah kode ini akan menampilkan cuma 3 var displayPageNum=5 sedangkan yang ini untuk menapilkan postingan ketika di klik angka/nomor anda akan menampilkan berapa postingan, silahkan anda sesuaikan dengan banyak postingan yang kan di tampilkan tiap halamannya.
Gadget 3
Untuk membuat halaman blog seperti diatas caranya mudah sekali, langkah pertama yang harus sobat lakukan adalah :
lutfietutor.blogspot.com
Login ke Blogger Setelah itu sobat masuk ke area design/rancangan blog, Terus sobat masuk ke area Edit HTML dan jangan lupa centang expand widget templates. Setelah itu sobat cari tag </head>, Setelah ketemu tag </head> sobat sisipkan kode dibawah ini diatas tag </head>. Code
Oke sebelum di save sobat ganti tulisan yang berwana merah (http://lutfietutor.blogspot.com/) dengan url milik sobat.
Gadget 4
Untuk membuat kotak pencarian (serch form) seperti itu sangatlah mudah dan gampang, langkah pertama untuk membuat kotak pencarian dalam blogspot yaitu : Sobat login ke Blogger, Setelah itu sobat mauk ke area Design/Tata Letak Blog Selanjutnya sobat masuk ke area Edit HTML dan jangan lupa sobat Centang Expand Widget Templates, Setelah itu sobat cari kode </head>, Setelah ketemu tag </head>, sobat masukan kode CSS di bawah ini tepat di atas tag </head>. <style type='text/css'> .searchform{background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444)); background: -moz-linear-gradient(top, #000, #444); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666'); border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; -webkit-box-shadow:0px 1px 0px #000;
lutfietutor.blogspot.com
border:1px #fff solid; display:inline-block; zoom:1; *display:inline; border:solid 1px #555; padding:3px 5px; -webkit-border-radius:20px; -mozborder-radius:20px; border-radius:20px; -webkit-box-shadow:0 1px 0px rgba(0,0,0,.1); -moz-box-shadow:0 1px 0px rgba(0,0,0,.1); box-shadow:0 1px 0px rgba(0,0,0,.1)} .searchform input{font:normal 12px Arial,Helvetica,sans-serif} .searchfield{background:-webkit-gradient(linear,left top,left bottom,from(#243d63),to(#1a2638)); padding:6px 6px 6px 8px; width:200px; border:solid 1px #222; outline:none; -webkit-borderradius:20px; -moz-border-radius:20px; border-radius:20px; -moz-boxshadow:inset 0 1px 3px #222; -webkit-box-shadow:inset 0 1px 3px #222; box-shadow:inset 0 1px 3px #222} .searchbutton{color:#fff; cursor: pointer; border:solid 1px #fff; fontsize:11px; height:28px; width:55px; text-shadow:0 1px 1px #222; -webkitborder-radius:20px; -moz-border-radius:20px; border-radius:20px; background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f)); background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444)); background: -moz-linear-gradient(top, #000, #444); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666'); } </style> Setelah selesai terus simpan / Save template blog sobat Keterangan Code CSS searchform : Kode CSS untuk memberi style kotak pencarian searchform input : Kode CSS untuk memberi style kotak input searchbutton : Kode CSS untuk memberi style pada tombol Silahkan sobat ganti warna serta beckgrounnya supaya selaras dengan blog sobat. setelah itu sobat masuk ke area Design/Tata Letak Blog dan tambahkan gadget HTML/JavaScript lalu sobat masukan kode di bawah ini
<form class="searchform" method="get" action="http://lutfietutor.blogspot.com/search" > <input class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" name="q" /> <input class="searchbutton" type="button" value="Search" /> </form>
lutfietutor.blogspot.com
8. Cara Mengganti Coursors Mouse di blogspot
Untuk mengganti coursors mouse pada halaman blogspot cukup mudah dan gampang, langkah pertama untuk mengganti tampilan cursor ini adalah : Sobat Login ke Blogger Selanjutnya sobat masuk ke area Design/Rancangan Blog Terus Sobat masuk ke Edit HTML Jangan lupa sobat centang Expand Widget Template Setelah itu sobat cari kode ]]></b:skin> Setelah ketemu, sobat tambahkan kode di bawah ini dibawah kode ]]></b:skin>
Code body, a, a:hover {cursor: url(http://1.bp.blogspot.com/-EqdSuJ1lQr4/Tslwr7TSfI/AAAAAAAAAj4/hBoRlPJy8qM/s300/contoh-cursor.png), progress; Sebelum di save sebaiknya sobat ganti dulu gambar yang akan dijadikan kursor, yaitu dengan cara mengganti kode gambar (http://1.bp.blogspot.com/EqdSuJ1lQr4/Tsl-wr7TSfI/AAAAAAAAAj4/hBoRlPJy8qM/s300/contoh-cursor.png) . Langkah terakhir Save Template Blog sobat. Cara lain untuk mengganti coursor mouse yaitu dengan Cari Tag </head> Setelah ketemu sobat tamabahkan kode di bawah ini diatas kode </head> <style> body, a, a:hover {cursor: url(url-gambar-coursors-mouse,png), progress; </style>
lutfietutor.blogspot.com
Jika sobat mau meletakan button pdf tersebut di atas postingan maka sobat simpan kode tersebut di atas kode <data:post.body/> Contoh di Atas Postingan kode JavaScript <data:post.body/> Di bawah Postingan <data:post.body/> kode JavaScript Setelah selesai disimpan sobat klik save template dan lihat hasilnya
10.
IntenseDebate
Gadget 5
Untuk membuat kotak komentar seperti itu pertama sobat kunjungi situs http://intensedebate.com/ terus sobat register/daftar jika sobat punya akun WordPress sobat langsung saja tinggal login. langkah pertama yang harus sobat lakukan adalah Login ke Blogger Terus masuk ke area Design/Rancangan Blog Terus masuk Edit HTML Setelah itu sobat Download Full Template Setelah template blog sobat di download, sobat login ke akun IntenseDebate Terus sobat klik Site dan Pilih Add Blog/Site terus masukan URL blog sobat
Gadget 6
Setelah itu sobat klik Next Step dan akan tampil seperti di bawah
lutfietutor.blogspot.com
Gadget 7
Terus Geser ke bawah dan upload template yang tadi sobat download, setelah itu klik Upload. setelah upload selesai sobat copy kode yang ada pada form
Gadget 8
Terus Paste (Ctrl + V) dalam template Blog sobat, terus lihat hasilnya..
11.
Caranya cukup mudah dan gampang, langkah pertama untuk menyisipkan Tombol sharing ini sobat harus login pada blogger, setelah itu sobat kunjungi situs share button yang beralamat di http://sharethis.com/, disana banyak beberapa pilihan platform website diantanya : Platform Website Platform WordPress Platform Blogger Platform Drupal Platform Jomla Platform Typepad Platform Thumblr Platform Posterous Platform NewsLetter
Sobat tinggal klik dan pilih sesuai dengan Platform yang sobat gunakan, jika sobat menggunakan Platform Blogspot/Blogger sobat pilih Blogspot, selain itu sobat bisa memilih style yang telah disediakan.
lutfietutor.blogspot.com
Style Button yang Petama
Dalam style button pertama sobat bisa mengatur backgroun apakan mau memakai background atau tidak
Dalam style button ini sobat bisa mengatur dan menambahkan social networking yang lain misalkan Digg, Digo, OZone ,Delicios,Edmodo,Technorati Dan yang lainnya, yang telah disediakan oleh situs sharing Widget cara menambahkan dan menguranginya sobat tinggal klik tombol yang ada di tengan untuk panah yang menghadap ke kiri yaitu untuk menambahkan, sedangkan arah panah yang menghadap ke kanan untuk mngurangi, untuk panah yang mengahadap ke atas dan ke bawah fungsinya untuk menyortir/mengurutkan, selain itu sobat bisa mengatur besar dan kecilnya tombol, jika ingin besar otomatis sobat pilih Large, Terus Horizontal dan Vertikal Layout untuk mengatur tampilan Horizontal : Kesamping Vertikal : Ke bawah
Untuk Style yang ketiga tampilannya seperti di atas, dalam style ketiga ini terdapat Counter, dengan adanya counter kita bisa mengetahui berapa banyak yang add website/blog kita dalam social networking tersebut, terus sobat bisa menambahkan tombol Like Facebook dan Tombol Google Plus (+1).
lutfietutor.blogspot.com
Untuk style ke empat ini hampir sama dengan style ketiga namun counternya terdapat diatas, untuk style ketiga counternya terdapat di pinggir tombol sedangkan ke empat terdapat diatas tombol.
Oke setelah sobat memilih setyle buttonnya langkah terakhir sobat tinggal klik Get Button yang terdapat di bawah , setelah itu akan tampil seperti di bawah dan Klik Add Widget.
12.
Untuk menambahkan Gadget Social bookmark ini tidak perlu repot pokonya mudah. langkah pertama yang sobat harus lakukan adalah : Login ke Blogger Terus masuk ke area Design/Rancangan Blog Setelah itu Tambahkan Gadget HTML/JavaScript Lalu copy Script di bawah ini dan masukan ke area HTML/JavaScript Terakhir Save Dan lihat hasilnya.
lutfietutor.blogspot.com
<style> #lutfi-social {display:scroll; -webkit-border-radius: 10px; -moz-border-radius: 10px;border-radius: 10px; position:fixed; top:30%; left:5%; border: 1px solid #E8E8E8; padding:0px 0px 0px 0px; width:70px;} #lutfi-social li {list-style:none;padding : 5px 5px 5px 5px;} #lutfi-social a:link{color:transparent;text-shadow:none;} #lutfi-social a:visited{color:transparent;text-shadow:none;} </style><div align="center" id="lutfisocial"> <li><a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post"data-button-style="normalcount"></a><script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script></li> <li><a href="https://twitter.com/share" class="twitter-share-button" datacount="vertical" data-via="lutfie-tutor">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></li><li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><div class="g-plusone" data-size="tall"></div></li> <li><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></li> <li><script type='text/javascript'>digg_url= 'php echo get_permalink($postid); ?>';'http://digg.com/tools/diggthis.js' type='text/javascript'/></script></li><a href="http://lutfietutor.blogspot.com/" target="_blank" title="Lutfi Tutorial Blog">GADGET</a> </div>
13.
lutfietutor.blogspot.com
http://btemplates.com/ http://www.blogcrowds.com/resources/blogger-templates/ http://blogtemplate4u.com/ http://www.premiumbloggertemplates.com/ http://www.zoomtemplate.com/ http://bloggertemplateplace.com/ http://www.mybloggerthemes.com/ Dll.. mamasih banyak lagi
Sampai disini dulu artikel yang bisa saya sharing semoga bermanfaat
lutfietutor.blogspot.com
Yakinlah Kamu Pasti Bisa Harta yang paling menguntungkan ialah SABAR.
Teman yang paling akrab adalah AMAL. Pengawal peribadi yang paling waspada adalah DIAM. Bahasa yang paling manis adalah SENYUM. Dan ibadah yang paling indah tentunya KHUSYUK. Pelajarilah Ilmu, karena mempelajarinya karena Allah adalah khasyah, Menuntutnya adalah ibadah, mempelajarinya adalah Tasbih, mencarinya adalah Jihad, Mengajarkannya kepada orang yang tidak mengetahui adalah Shadaqah, menyerahkan kepada ahlinya adalah Taqarrub. Ilmu adalah teman dekat dalam kesendirian dan sahabat dalam kesunyian
Sejauh Mata Memandang, Harapan Terbentang untuk diraih, dan Jangan Lupa Sertakan Tuhan Dalam segala rencan Hidupmu, Karena DIA yang berkenan unutk merancangkan yang baik dalam Hidupmu