All About: Tutorial Blog

Latest Updates

Showing posts with label Tutorial Blog. Show all posts

Showing posts with label Tutorial Blog. Show all posts

Area postingan menjadi 2 (dua) colomn di homepage blogger - by s2c3rr

6:23 PM

•

Banyak sekali cara untuk mendesign template blogger agar penampilan template enak dipandang mata dan tidak membuat pengunjung blog kebingungan karen tampilan template yang acak-acakkan.Untuk mendesign tampilan template salah satunya yaitu membagi area postingan menjadi 2 (dua) colomn di homepage atau halaman depan blogger saja.

Bagaimana caranya...?
Yuk kita sama-sama simak langkah-langkahnya di bawah ini.

1. Login Blogger terlebih dahulu
2. Di dasbor sobat pilih Menu Design/Rancangan >> Edit HTML.
3. Jangan lupa Expand template widget.
4. Cari kode ]]></b:skin>.
5. Letakkan kode di bawah ini setelah kode No.4

<b:if cond='data:blog.pageType != "item"'>
<style>
.post {width:285px;height:400px;margin-right:5px;overflow:hidden;float:right; background:#F2F2F2border:3px double #808080;}
</style>
</b:if>

6. Kemudian caro kode CSS .Post { contoh kode cssnya

.post{margin:0.5em 0.5em; padding-bottom:0.5em}

7. Jika sudah ketemu, coba perhatikan margin:0.5em 0.5em; kamu tinggal menyisipkan auto pada margin tersebut hingga menjadi seperti di bawah ini.

.post{margin:0.5em auto 0.5em; padding-bottom:0.5em}

8. Simpan Template.

Semoga bermanfaat artikel tentang cara membuat Area postingan menjadi 2 (dua) colomn di homepage blogger.
Selamat mencoba..

Cara menampilkan thumbnail di homepage blogger - by s2c3rr

6:43 AM

•

Postingan kali ini saya akan menjelaskan bagaimana Cara Menampilkan Thumbnail Hanya di Halaman Depan (Home Page).
Thumbnail ini hanya akan tampil pada halaman depan (Home Page) dan tidak akan tampil di halaman posting.

Bagaimana caranya..?ikuti langkah-langkah di bawah ini.

1. Login blogger.
2. Di dasbor sobat pilih Design/Rancangan > Edit HTML
3. Expand template widget
4. cari kode </head> dan letakkan kode di bawah ini tepat di atas kode </head>

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>

.thumbnail {display:none}

</style>
</b:if>

5. Simpan template

Pada Entri Baru atau posting baru saat memasukkan gambar tambahkan kode class="thumbnail"

berikut contohnya

<img class="thumbnail" src="http://i1220.photobucket.com/albums/dd456/cybersahrul/No-images.png" alt="no-images" />

class="thumbnail" yang mengatur thumbnail atau gambar dihidden/disembunyikan jika masuk ke halaman posting.

selamat mencoba dan semoga berhasil..

Kontak Us - by s2c3rr

7:37 PM

•

Powered by

EMF HTML Form Builder

Report Abuse

Cara memasang iklan di samping form kotak komentar blogger - by s2c3rr

2:19 AM

•

Cara memasang iklan di samping form kotak komentar blogger.Kali ini saya ingin berbagi tentag tutorial blogger yang berjudul Cara memasang iklan di samping form kotak komentar blogger setelah kemaren membahas tentang Cara membuat recent post thumbnail by label di blogger.mungkin bagi para blogger ada yang sudah mengetahui tutorial ini.Nah,bagi yang belum tahu nggak ada salahnya untuk sejenak menyimak tentang Cara memasang iklan di samping form kotak komentar blogger.Saya telah menyiapkan Sebagai Screenshotnya sobat bisa lihat gambar di bawah ini.

Cara memasang iklan di samping form kotak komentar blogger

Bagi sobat yang ingin Memasang Kotak Iklan Disamping Form Komentar, silahkan Expand template kamu, cari kode:

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

Jika sudah ketemu, ganti kode tersebut dengan kode berikut:

<table border='0' width='600'><tr> <td align='center'>ISI DENGAN KODE IKLAN</td> <td align='center'><iframe class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='210' id='comment-editor' name='comment-editor' src='' width='100%'/></td></tr></table>

Pastikan kode yang diganti adalah kode iframe yang kedua. Karena yang pertama adalah kode iframe form komentar untuk index mobile. Silahkan isi dengan kode iklan atau apa saja yang kamu suka. Dan jika itu iklan adsense, maka harus di parse dulu agar iklannya bisa tampil. Untuk lebar tabel harus sesuai dengan lebar post body. Untuk value lainnya silahkan disesuaikan sendiri..

Sumber : www.iskaruji.com

Cara membuat recent post thumbnail by label di blogger - by s2c3rr

8:02 PM

•

Cara membuat recent post thumbnail by label di blogger.Sobat blogger pasti sudah tidak asing lagi mendengar kata-kata recent post atau artikel terbaru atau mungkin sudah bosen mendengar kata-kata tersebut atau mungkin sobat blogger beranggapan artikel ini sudah basi,sudah terpendam bersama artikel-artikel yang sudah basi lainnya.Tetapi apa mungkin sobat blogger yang baru ataupun newbie tahu tentang artikel semacam ini..??saya kira tidak.Oleh karena itu saya ingin memberi artikel ini buat yang masih newbie termasuk saya sebagai admin blog ini pokoknya yang baru tahu artikel kaya gini aja dech..hehe.

Recent post ini menurut saya lebih lengkap dari pada yang lainnya karena fiturnya yaitu menampilkan artikel terbaru dengan thumbnail (gambar) dan juga kita bisa mengatur artikel terbarunya berdasarkan label atau kategori artikel.saya rasa widget blog ini cocok buat template yang banyak menampilkan artikel terbaru dengan kategori yang berbeda.

Untuk lebih jelasnya cara memasang recent post dengan thumbnail berdasarkan label ini sobat bisa ikuti langkah-langkah di bawah ini.

1. LOGIN Blogger
2. Didasbor sobat pilih RANCANGAN/DESIGN >> EDIT HTML
3. EXPAND TEMPLATE WIDGET
4. cari kode ]]></b:skin>.

(*Gunakan F3 di keyboard untuk mempermudah pencarian)

5. Copy paste kode di bawah ini sebelum kode No.4

img.label_thumb{float:left; padding:5px; border:1px solid #8f8f8f; background:#D2D0D0; margin-right:10px; height:55px; width:55px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left; width:100%; min-height:70px; margin:0px 10px 2px 0px; adding:0}
ul.label_with_thumbs li{padding:8px 0; min-height:65px; margin-bottom:10px}
.label_with_thumbs a{}
.label_with_thumbs strong{}

6. Scroll ke bawah dan temukan kode </head>
7. Copy paste kode di bawah ini sebelum kode No.5

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWAg4WHxMh7ab_M1H58_e1J0uQ7VG5W07CazKrSHrQ0_9JJZUkQKW2MRAVdSGrTpFh8oFYevfo2bjhiJHsllEuQBQuABFkpSpOC2HHFz-FHyIKbYftEHRJKjdAQEkQm7HZREroI1rlRRU9/';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

8. SAVE template.sampai disini belum selesai.
9. masih di menu DESIGN >> PAGE ELEMENTS >> ADD GADGET >> HMTL/javaScript
10. Masukkan kode di bawah ini kedalam contents

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>

<script type="text/javascript" src="/feeds/posts/default/-/NAMA LABEL?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

apabila nama labels atau kategori lebih dari satu kata maka penulisannya disisipkan %20.contoh : Tutorial blog maka di label penulisannya Tutorial%20Blog dan seterusnya apabila sampai 2 kata lebih.
11. kemudian pilih SAVE

Untuk menambah artikel terbarunya berdasarkan kategori lainnya sobat cukup COPAS kode no.10 dan sesuaikan nama ketegorinya.

Selamat mencoba dan sukses selalu.

Link Download bergambar di blog - by s2c3rr

6:16 PM

•

Link Download bergambar di blog Setelah kemaren kita sama-sama membahas bagaimana cara mendapatkan link download dan cara mendaftar akun di 4shared untuk penyimpanan file online.Nah,untuk kesempatan kali ini saya ingin membahas cara menampilkan ataupun membuat link download bergambar di blog.Link download bergambar selain menarik juga terlihat professional.

Mungkin bagi blogger papan atas artikel ini terdengar basi tetapi bagi pemula ataupun newbie seperti saya artikel ini sangat bermanfaat oleh karena itu saya ingin sobat blogger pemula lainnya untuk mengetahuinya.
Nah,untuk lebih jelasnya mari kita sama-sama bahas.

1. Perhatikan kode di bawah ini.

<A HREF='URL/LINK DOWNLOAD' TITLE='KETERANGAN LINK DOWNLOAD' TARGET='_BLANK'><IMG SRC='URL GAMBAR' ALT='KETERANGAN'/></A>

Keterangan :

URL/LINK DOWNLOAD adalah link dimana kita menyimpan file secara online
TITLE adalah untuk memberi keterangan LINK/GAMBAR download yang berupa tooltips (Keterangan akan tampil apabila pointer di dekatkan di link/gambar)
TARGET='_BLANK' adalah berfungsi apabila link di klik maka akan terbuka di jendela baru atau new tab
IMG SRC adalah kode untuk memanggil gambar yang telah di hosting di photobucket atau yang lainnya untuk mendapatkan link gambarnya
ALT adalah berfungsi untuk mengganti gambar apabila halaman tidak mendukung untuk gambar maka yang akan keluar adalah keterangan alt

contoh :

1. Link download tanpa gambar

<div align='center'>
<A HREF='http://xmantan.blogspot.com/' TITLE='PErcobaan' TARGET='_BLANK'>DOWNLOAD HERE</A>
</div>

maka hasilnya seperti di bawah ini.

2. link download bergambar.

<div align='center'>
<A HREF='http://xmantan.blogspot.com/' TITLE='PErcobaan' TARGET='_BLANK'><IMG SRC='http://farm5.static.flickr.com/4042/4278913170_e7973277d8_o.png' ALT='download'/></A>
</div>

maka hasilnya seperti di bawah ini.

download

Untuk pilihan gambar download sobat bisa lihat di bawah ini.

http://i1220.photobucket.com/albums/dd456/cybersahrul/linkdownloadbergambardiblog.png

http://i1220.photobucket.com/albums/dd456/cybersahrul/linkdownloadbergambardiblog1.png

http://i1220.photobucket.com/albums/dd456/cybersahrul/linkdownloadbergambardiblog2.jpg

http://i1220.photobucket.com/albums/dd456/cybersahrul/linkdownloadbergambardiblog4.jpg

Gampangkan...
mungkin hanya ini yang dapat saya sampaikan pada artikel Link Download bergambar di blog semoga artikel ini bermanfaat bagi yang membutuhkannya.
selamat mencoba dan salan sukses selalu.

Cara Memasang efek loading di blogger - by s2c3rr

6:37 PM

•

Cara Memasang efek loading di blogger.Efek-efek terkadang sangat perlu untuk menarik minat pengunjung blog,seperti efek shadow,blur ataupun yang lainnya.tetapi apabila efek tersebut sangat memberatkan loading blog saran saya mending nggak usah di pasang karena minat pengunjung akan berubah ketika menunggu loading blog yang sangat lambat atau lemot karena efek-efek tersebut.di sini saya hanya ingin berbagi pengetahuan tentang efek loading untuk blogger apabila sobat blogger ingin memasangnya karena merasa loading blognya sangat cepat (fast loading) dan ingin memasang efek loading untuk menarik minat pengunjung.caranya cukup mudah kok..penasaran..??kita langsung ke TKP.

1. Login Blogger dengan akun sobat
2. Di dasbor sobat pilih rancangan/Design >> Edit HTML
3. Expand template Widget
4. cari kode <body>
(*gunakan F3 di keyboar untuk mempermudah pencarian)
5. Setelah ketemu DELETE dan ganti dengan kode di bawah ini.

<body onLoad='init()'><div id='loading' style='position:absolute; width:100%; text-align:center; top:300px;'> <img border='0' src='http://i1220.photobucket.com/albums/dd456/cybersahrul/loading.gif'/></div> <script src='http://loading-js.googlecode.com/files/loading.js' type='text/javascript'/>

Keterangan:
-URL gambar bisa sobat ganti dengan gambar uang sobat inginkan.

6. Setelah selesai semua jangan lupa di save/SIMPAn template dan lihat hasilnya.

Gampang bukan...??
em...mungkin hanya itu yang dapat saya bagikan untuk kesempatan kali ini semoga artikel cara memasang efek loading di blogger bermanfaat bagi yang membutuhkannya.
selamat mencoba dan salam sukses selalu.

Cara mudah pasang alexa toolbar - by s2c3rr

12:58 AM

•

Cara mudah pasang alexa toolbar adalah cara untuk meningkatkan alexa rank selain blogwalking,submit blog dll ataupun disini.karena dengan mendownload dan memasangnya di home browser maka akan meningkatkan alexa rank.yah walupun cara ini sudah banyak yang ngeshare tetapi tidak apalah mungkin salah satu di antara sobat blogger belum mengerti cara memasang alexa toolbar untuk itu saya share artikel ini.untuk lebih jelasnya ikuti langkah-langkah di bawah ini tentang cara memasang alexa toolbar.

1. Kunjungi http://www.alexa.com/toolbar.
2. Akan muncul form seperti di bawah ini dan sobat pilih Install Alexa Extension.

3. kemudian akan muncul form seperti di bawah ini.sobat pilih Accept and install.

4. Setelah melakukan cara di atas maka akan keluar logo alexa di sekitar adress bar berarti sobat telah berhasil melakukannya.

itulah keempat cara untuk memasang alexa toolbar semoga bermanfaat dan selamat mencoba.

Cara mudah dan cepat meningkatkan alexa rank di blogger - by s2c3rr

12:23 AM

•

Cara mudah dan cepat meningkatkan alexa rank di blogger sebenarnya gak sulit di lakukan asalkan sobat mau continue saja melakukannya.bagi para blogger pasti sudah tidak asing lagi mendengar kata alexa rank karena hampir setiap blog sudah memasang widget alexa rank.tetapi apabila salah satu sobat blogger ada yang belum memasangnya sobat bisa lihat disini.kembali ke permasalahan awal yaitu cara mudah dan cepat meningkatkan alexa rank di blogger sobat hanya perlu beberapa langkah dan untuk langkah-langkahnya sobat bisa simak di bawah ini.

1. Blogwalking
pastinya kata ini lagi-lagi tidak asing buat para blogger karena sudah bnyak yang melakukan ini.memang terasa sekali buat alexa rank karena dengan blogwalking dan kemudian sobat meninggalkan pesan di blog yang kita kunjungi dengan menekankan untuk mengunjungi kembali (kunjungan balik) ke blog maka kita akan mendapat pengunjung yang berbeda IP.semakin banyak pengunjung yang berbeda IP maka akan semakin banyak pula traffic yang akan masuk ke blog dan nilai alexa akan semakin menurun (menuju no 1 atau terpopuler).karena hal ini telah saya rasakan sendiri tetapi sungguh menyedihkan domain blog ini harus ganti yang tadinya [dot] co [dot] cc menjadi [dot] blogspot [dot] com jadi perlu dari awal lagi meningkatkan alexa rank dari awal.

2. Pasang widget alexa rank
Setelah melakukan cara no.1 pastinya sobat ingin tahu donk nilainya meningkat atau menurun oleh karena itu untuk mengetahuinya sobat harus memasang widget alexa rank lihat disini untuk tutorialnya.

3. Menginstall alexa toolbar
mengintal alexa toolbar bisa meningkatkan alexa rank karena akan terjadi penambahan point dari alexa.com oleh karena itu disarankan untuk memasangnya apabila sobat ingin meningkatkan alexa rank klik disini untuk tutorial cara memasng alexa toolbar di browser.

4. DAftar blog ke search engine.
cara ini di lakukan agar artikel dalam blog cepat terindeks oleh mesin pencari trutama google,yahoo,msn,bing dll.

5. Cari backlink
carilah backlink dengan cara tukar link blog ataupun comment di blog yang berPR tinggi.cara ini juga saya lakukan dan saya merasakan yaitu meningkatnya alexa rank.
6. Update artikel rutin
selalu menambah artikel untuk blog karena artikel adalah raja untuk itu rajin2 lah mengupdate artikel yang mungkin bermanfaat bagi pengunjung selain itu juga setelah mengupdate artikel lakukan promosi ke friends blog bisa juga mensubmite ke situs social bookmark.

7. Melakukan Ping blog
Cara ini di lakukan agar artikel yang telah di share bisa terindeks oleh mesin pencari maupun situs sosial bookmark.

mungkin itu ketujuh cara mudah dan cepat meningkatkan alexa rank di blog sebenarnya masih banyak lagi cara yang lain tetapi tujuh itu yang menurut saya harus di lakukan terlebih dahulu sebelum yang lainnya.semoga bermanfaat dan selamat mencoba.

cara mudah memasang widget alexa rank di blogger - by s2c3rr

2:08 AM

•

Cara mudah memasang widget alexa rank di blogger itulah judul artikel yang akan kita bahas pada kesempatan kali ini.Banyak sudah blogger yang telah memasang widget alexa rank karena sangat berguna untuk mengtahui ranking blog versi alexa karena semakin kecil nilai yang di berikan oleh alexa maka semakin bagus perkembangan traffic suatu blog atau situs (populer).lalu bagaimana cara mendapatkan traffic ?? pertanyaan tersebut mungkin yang ada di benak para sobat.untuk mudah mendapatkan traffic tunggu artikel berikutnya..hehe..lanjut ke masalah memsang widget alexa rank di blogger sobat bisa ikuti langkah-langkah di bawah ini.

1. kunjungi situs alexa.com atau sobat bisa klik disini.maka akan keluar halaman home website alexa.com.setelah sobat berada di halaman utama alexa.com sobat kemudian pilih site tools kemudian pilih alexa site widgets.lihat gambar di bawah ini.

2. Kemudian akan muncul halaman seperti gambar di bawah ini.

masukkan alamat blog sobat kemudian pilih build widget.sobat bisa memilih tampilan widget yang akan tampil di blog.
3. Setelah build widget maka akan keluar halaman seperti di bawah ini.

halaman tersebut untuk mendapatkan kdoe widget alexa rank.setelah dapat kodenya maka sobat bisa memasangnya di blog.untuk memasangnya di blog cukup mudah.sobat hanya perlu beberapa langkah.
1. Login blogger
2. Di dasbor sobat pilih Rancangan/design >> Page elements

3. kemudian pilih Add gadget.

4. pilih HTML/javaScript.

5. kemudian letakkan kode yang telah sobat copas tadi kedalam content dan lihat hasilnya.

mudah bukan untuk memasang widget alexa rank diblogger.mengkin hanya itu yang dapat kami sampaikan untuk cara mudah memasang widget alexa rank di blogger semoga artikel ini bermanfaat bagi yang membutuhkannya.selamat mencoba..

5 (lima) point kesalahan dalam ngeblog - by s2c3rr

1:35 AM

•

Lima point kesalahan dalam ngeblog itulah judul artikel yang akan saya bahas pada kesempatan kali ini karena saya tidak ingin para blogger tidak salah langkah dalam menggeluti dunia blogger.
walaupun kelihatannya sepele tapi apabila tidak memperhatikan point-point yang bisa membuat blog sobat gagal maka tidak akan pernah berkembang.oleh karena itu di bawah ini beberapa point kesalahan dalam menggeluti dunia blogger.

1. Terlalu fokus pada tampilan dalam artian terlalu sering gonta ganti template tanpa mengetahui efek dari langkah tersebut.karena apabila blog sering gonta ganti template maka akan susah untuk mesin pencari mengindek blog tersebut.saran saya kalau sobat ingin mengotak-atik template blog maka sediakan blog yang khusus buat di otak-atik atau gampangnya blog percobaan.

2. Tidak pernah mengupdate artikel dalam artian artikel yang ada di dalam blog tersebut hanya itu-itu saja sehingga pengunjung bosan untuk mengunjunginya lagi.saran saya update lah secara teratur sehingga pengunjung tidak bosan dengan isi content itu-itu saja atau yang udah basi.

3. Memilih tema yang salah dalam artian antara blog dan isi blog tidak berkaitan sama sekali sehingga mesin pencari untuk mengindek blog tersebut.saran saya lebih baik fokus pada satu tema yang mungkin lagi banyak di cari netter.

4. Blog berisi content yang sulit dimengerti oleh pengunjung dalam artian pengunjung harus perfikir lagi untuk memecahkan masalah dalam artikel yang sudah di share ;dan

5. Jadilah diri sendidi karena mesin pencari lebih senang dengan blog yang tidak banyak copy paste (copas).

Itulah beberapa point yang sering kita lalaikan oleh karena adanya artikel ini di harapkan bermanfaat bagi yang ingin berhasil dalam menggeluti dunia blogger.untuk artikel lima point kesalahan dalam ngeblog saya akhiri sampai disini..salam sukses selalu.

cara mudah pasang tombol share horizontal di blogger - by s2c3rr

3:03 AM

•

1. Login Blogger.com
2. Pilih Rancangan/Design >> Edit HTML
3. Expand template widget.
4. Cari kode <p><data:post.body></p> dan letakkan kode di bawah ini setelahnya.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<div style='border-top:1px solid #FE9A2E;border-bottom:1px solid #FE9A2E; padding:5px 0px 5px 0px;margin:10px 0px 7px 0px;width:100%;float:left;height:23px;'>
<div style='float:left;'>
<span class='st_twitter_hcount' displayText='Tweet'/><span class='st_facebook_hcount' displayText='Share'/><span class='st_email_hcount' displayText='Email'/><span class='st_sharethis_hcount' displayText='Share'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher:'63b83a98-def5-427f-ac7c-4b24bcff910d'});</script>
</div>
</div>
</b:if>

5. Simpan template dan lihat hasilnya.

Apabila sobat ingin melatakkan di bawah judul postingan blog,sobat cari kode <div class='post-header-line-1'/> dan letakkan di bawahnya.

Semoga artikel cara mudah pasang tombol share horizontal di blogger bermanfaat bagi yang membutuhkannya.

Cara menambah icon di samping link label blogger - by s2c3rr

1:26 AM

•

Sobat harus sudah memasang widget labels terlebih dahulu sebelum menambah icon di samping link labels blog sobat.berikut langkah-langkah untuk cara menambah icon di samping link labels blog.
1. Login Blogger.com
2. Pilih Rancangan/Design >> Edit Html

3. Expand template widget.

4. Cari kode ]]></b:skin> dan letakkan kode di bawah ini sebelum kode tersebut.

#Label1 ul, #Label2 ul{list-style:none; margin:0 0 0; padding:0 0 8px}
#Label1 li, #Label2 li{background:url(http://i894.photobucket.com/albums/ac148/fajrialhadii/folder-open-16x16.png) no-repeat; padding-top:0; padding-right:0; padding-bottom:3px; padding-left:20px; margin-bottom:3px; border-bottom:1px dotted #063E3F; line-height:1.2em}

5. Setelah selesai pilih save template dan lihat hasilnya.
semoga bermanfaat artikel cara menambah icon di samping link labels blog bagi yang membutuhkannya.

Cara menampilkan daftar isi otomatis di blogger - by s2c3rr

7:17 AM

•

1. Login Blogger.com
2. Di dasbor sobat pilih Rancangan/Design >> Page Elements

3. Add Gadget.

4. Kemudian pilih HTML/javaScript.

5. Masukkan kode di bawah ini ke dalam content

<div style="overflow: auto; width: 510px; height: 200px; text-align: left; border:1px solid #FFA500;background:#000;">
<ul>
<script style="text/javascript" src="http://mr-form.googlecode.com/files/D-IsiV1%28new%29.js"></script>
<script src="http://www.xmantan.co.cc/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></ul>
</div>

6. Save dan lihat hasilnya
Selamat mencoba dan semoga berguna artikel Cara menampilkan daftar isi otomatis di blogger bagi yang membutuhkannya.

Cara menampilkan hanya judul postingan di homepage blogger - by s2c3rr

2:25 AM

•

1. Login blogger.com
2. Di dasbor pilih Rancangan/Design >> Edit HTML

3. Expand template widget

4. Cari kode ]]></b:skin> dan letakkan kode di bawah ini setelah kode ]]></b:skin>.

<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
.post-body{display:none;}
</b:if>
</b:if>
</style>

5. save template.

kode di atas masih menyisakan beberapa element seperti tanggal,komentar,label dan lainnya.Untuk menampilkan hanya judulnya saja di halaman depan blogger sobat bisa menggunakan kode di bawah ini.

<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
.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>

Selamat mencoba dan semoga artikel cara menampilkan hanya judul postingan di homepage blogger berguna bagi yang membutuhkannya.

>>> Indahnya Berbagi <<<

Cara pasang iklan melayang di blogger - by s2c3rr

2:05 AM

•

1. Login Blogger.com
2. Di dasbor pilih rancangan/Design >> Page Elements

3. kemudian Add gadget.

4. Pilih HTML/javaScript.

5. Masukkan kode di bawah ini ke dalam content.

<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbcontent{
float:right;
border:0px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<div style="text-align:center">
<a href="javascript:showHideGB()">
<img src="http://www.fileden.com/files/2009/10/12/2599919/close.gif" />
</a>
</div>
<center>
Masukan Kode iklan atau banner di sini
</center>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

6. kemudian pilih simpan dan lihat hasilnya.

>>> Indahnya Berbagi <<<

Cara menambah widget kalender di blogger - by s2c3rr

2:03 AM

•

1. Login blogger.com
2. Di dasbor pilih Rancangan/Design >> Page Elements

3. Kemudian pilih Add gadget

4. Selanjutnya tambahkan HTML/javaScript

5. Copas kode di bawah ini ke dalam content HTML/Javascript.

<style type="text/css">

.month {
background-color:black;
font:bold 12px verdana;
color:white;
}

.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}

.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}

.days #today{
font-weight: bold;
color: red;
}

</style>

<script type="text/javascript" src="http://dsai.588.googlepages.com/basiccalendar.js">

/***********************************************
* Basic Calendar-By Brian Gosselin at http://scriptasylum.com/bgaudiodr/
* Script featured on Dynamic Drive (http://www.dynamicdrive.com)
* Via http://bloggerstop.net
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
<script type="text/javascript">

var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year

document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));
</script>

6. simpan dan lihat hasilnya.

>>> Indahnya Berbagi <<<

Cara menambah effeck bubble atau membesar saat kursor di dekatkan di blogger - by s2c3rr

8:04 PM

•

1. Login Blogger.com
2. Di dasbor pilih Rancangan/design >> Edit HTML

3. Expand template widget

4. Cari kode ]]></b:skin> dan setelah ketemu letakkan kode di bawah ini sebelum kode ]]></b:skin>.

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}

.bubblewrap li img{
width: 55px;
height: 60px;
border:0;
margin-right: 12px;
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in;
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8);
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

5. Save template.
6. Untuk pemanggilannya perhatiakan kode di bawah ini.

<ul class="bubblewrap">
<li><a href="http://www.xmantan.co.cc/"><img src="http://icons.iconarchive.com/icons/artbees/social-networks-pro/64/StumbleUpon-icon.png" /></a></li>
<li><a href="http://www.xmantan.co.cc/"><img src="http://icons.iconarchive.com/icons/artbees/social-networks-pro/64/Facebook-icon.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.xmantan.co.cc/"><img src="http://icons.iconarchive.com/icons/artbees/social-networks-pro/64/Digg-icon.png" title="Add to Digg" /></a></li>
<li><a href="http://www.xmantan.co.cc/"><img src="http://icons.iconarchive.com/icons/artbees/social-networks-pro/64/Twitter-icon.png" title="Add to Twitter" /></a></li>
</ul>

7. Kode diatas hanya contoh saja sobat bisa mengembangkannya lagi.

Cara menambah animasi di link categories blogger - by s2c3rr

7:25 PM

•

1. Login Blogger.com
2. Di dasbor pilih rancangan/design >> Edit HTML

3. Expand template widget

4. Cari kode </head> dan letakkan kode di bawah ini persis di atasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 400; // Duration Of Animation in Milli Seconds
$(document).ready(function() {
$('a.linknudge, .Label ul li a').hover(function() {
$(this).animate({
paddingLeft: '25px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
}); // end of Jquery Script</script>

5. Setelah selesai pilih Save template dan lihat hasilnya.

Cara menambah tombol share melayang di blogger - by s2c3rr

7:20 PM

•

1. Login blogger.com
2. Di dasbor pilih rancangan/design >> Page Elements

3. Kemudian pilih add gadget

4. Kemudian pilih HTML/Javascript

5. Copas kode di bawah ini dan masukkan kedalam content.

<style>
#sharebar {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;right:0;}
#sharebar .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div>
<div id="sharebar">

<div class="sbutton" id="fb">
<a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">
</script>
</div>
<div class="sbutton" id="rt">
<script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript">
</script>
</div>
<div class="sbutton" id="su">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5">
</script>
</div>
<div class="sbutton" id="digg">
<script src="http://widgets.digg.com/buttons.js" type="text/javascript">
</script>
<a class="DiggThisButton DiggMedium" href=""></a>
</div>
<div class="sbutton" id="gb">
<a class="google-buzz-button" data-button-style="normal-count" href="http://www.google.com/buzz/post" title="post on google buzz">
<script src="http://www.google.com/buzz/api/button.js" type="text/javascript">
</script>
</a>

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

6. Setelah selesai pilih Save dan lihat hasilnya.

>>> Indahnya Berbagi <<<

Subscribe to: Posts ( Atom )

Copyright © All About. Designed by OddThemes | Distributed By Gooyaabi Templates