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

6:23 PM

•

Tutorial Blog

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 != &quot;item&quot;'>

<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..

READ MORE

Cara menampilkan thumbnail di homepage blogger - by s2c3rr

6:43 AM

•

Tutorial Blog

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 == &quot;item&quot;'>
<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..

READ MORE

Kontak Us - by s2c3rr

7:37 PM

•

Tutorial Blog

EmailMeForm

• 
  Name *
  
  
  
• 
  Email *
  
  
  
• 
  Subject *
  
  
  
• 
  Message *
  
  <br />
  
• 
  
  
  
  
  
• 
  
  

Powered byEMF HTML Form Builder

Report Abuse

READ MORE

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

2:19 AM

•

Tutorial Blog

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.

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

READ MORE

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

8:02 PM

•

Widget

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.

READ MORE

Link Download bergambar di blog - by s2c3rr

6:16 PM

•

Tutorial Blog

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.

DOWNLOAD HERE

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.

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.

READ MORE

Cara Memasang efek loading di blogger - by s2c3rr

6:37 PM

•

Tutorial Blog

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.

READ MORE

Cara mudah pasang alexa toolbar - by s2c3rr

12:58 AM

•

Tutorial Blog

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.

READ MORE