Cara Memasang Banner iklan 125x125 di Blog

Haloo sobat bloger kali ini Joe  share tentang bagaimana cara memasang banner iklan 125 X 125 yang cukup keren.Langsung aja yu ikuti langkah-langkahnya

Cara Membuat Kotak Iklan 125x125 4 Kolom .

Di Blog Menggunakan  Css

1. Masuk ke Akun Blog sobat.

2. Klik Template 

3.Klik Edit HTML

4. Sobat cari kode masukkan kode ]]></b:skin> lebih mudah dengan Ctrl+F,

5. letakkan kode dibawah ini tepat di atas kode ]]></b:skin>

/*Kotak Iklan 125x125*/ #kotak-iklan-125x125 { margin: 0px; padding: 1px; text-align: center; } #kotak-iklan-125x125 img { margin: 3px 3px 6px 6px; padding: 1px; text-align: center; border: 3px dotted #000; -webkit-border-radius:70px; -moz-border-radius:70px; -o-border-radius:70px; border-radius:10px; -webkit-transition: all 0.45s ease-out; -moz-transition: all 0.45s ease-out; -o-transition: all 0.45s ease-out; transition: all 0.45s ease-out; } #kotak-iklan-125x125 img:hover { margin: 3px 3px 6px 6px; padding: 3px; text-align: center; border: 3px solid #ff0000; -webkit-border-radius:0px; -moz-border-radius:0px; -o-border-radius:0px; border-radius:10px; }

6.Simpan

Sekarang Sobat

7. Klik Tata Letak 

8.Tambahkan Gadget  HTML/Javascript.

Masukkan kode dibawah ini dalam kotak HTML/Javascript.

<div id="kotak-iklan-125x125"> <a target="_blank" href="http://softwaremaniapc.blogspot.com/2013/04/pasang-iklan-murah-ini-solusinya.html"><img alt="banner ads" src="http://i1261.photobucket.com/albums/ii585/zainelhasany/banner125x125_zps642e2780.png" border="0"/></a> <a target="_blank" href="http://softwaremaniapc.blogspot.com/2013/04/pasang-iklan-murah-ini-solusinya.html"><img alt="banner ads" src="http://i1261.photobucket.com/albums/ii585/zainelhasany/banner125x125_zps642e2780.png" border="0"/></a> <a target="_blank" href="http://softwaremaniapc.blogspot.com/2013/04/pasang-iklan-murah-ini-solusinya.html"><img alt="banner ads" src="http://i1261.photobucket.com/albums/ii585/zainelhasany/banner125x125_zps642e2780.png" border="0"/></a> <a target="_blank" href="http://softwaremaniapc.blogspot.com/2013/04/pasang-iklan-murah-ini-solusinya.html"><img alt="banner ads" src="http://i1261.photobucket.com/albums/ii585/zainelhasany/banner125x125_zps642e2780.png" border="0"/></a> </div> </center> <div> <br /></div> </div> </form>

Ingin Foto/Gambar Bulat Pada Photo Di Blog

Halo haloo sobat bloger,kalian ingin membuat foto atau gambar sobat memiliki efek bulat pada blog,gampang.Gambar sobat akan mearik hehehehehehehe
Langsung aja yu ke TKP?

Ini dia langkah-langkahnya :

1. Masuk ke blogger.
2. Pilih template.
3. Pilih edit html.
4. Cari kode </head>.
5. Salin kode dibawah ini serta taruh kodenya diatas kode tadi.

<!-- kondisi home -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
.post-body {
padding: 0 0 10px 0;
}
.post img {
width: 100px;
height:100px;
background: transparent;
border: 3px Groove #8aff00;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.post img:hover {
border: 3px Groove #8aff00;
-webkit-border-radius: 90px;
-moz-border-radius: 90px;
border-radius: 90px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
</style>
</b:if>
</b:if>
<!-- /kondisi home -->

Kalau sudah simpan ok,Dan lihat hasilnya wow wow keren

Wow Membuat Slideshow Tanpa Edit HTML

Halooo sobat kali ini Joe berbagi tentang Cara Membuat Slideshow Tanpa Edit HTML.Kalau sobat ingin blognya keren dan unik alangkah baiknya gunakan ini.Tentu membuat pengunjung blog sobat keren dan banyak pengunjung hehehe.
Langsubg aja yu ikuti langkah-langkahnya sebagai berikut :

1. Masuk ke blogger.
2. Pilih tata letak.
3. Pilih tambahkan.
4. Cari html/javascript.
5. Salin kode dibawah ini.

script type="text/javascript"> script type="text/javascript"> /*********************************************** * Conveyor belt slideshow script- �© Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ //Specify the slider's width (in pixels) var sliderwidth="970px" //Specify the slider's height var sliderheight="170px" //Specify the slider's slide speed (larger is faster 1-10) var slidespeed=3 //configure background color: slidebgcolor="#ffffff" //Specify the slider's images var leftrightslide=new Array() var finalslide='' leftrightslide[0]='<a href="Your-Link"><img width=""200" height="150" style="border:1px solid #ddd;" src="Your-Image-Link" border=1></a>' leftrightslide[1]='<a href="Your-Link"><img width=""200" height="150" style="border:1px solid #ddd;" src="Your-Image-Link" border=1></a>' leftrightslide[2]='<a href="Your-Link"><img width=""200" height="150" style="border:1px solid #ddd;" src="Your-Image-Link" border=1></a>' leftrightslide[3]='<a href="Your-Link"><img width=""200" height="150" style="border:1px solid #ddd;" src="Your-Image-Link" border=1></a>' leftrightslide[4]='<a href="Your-Link"><img width=""200" height="150" style="border:1px solid #ddd;" src="Your-Image-Link" border=1></a>' leftrightslide[5]='<a href="Your-Link"><img width=""200" height="150" style="border:1px solid #ddd;" src="Your-Image-Link" border=1></a>' //Specify gap between each image (use HTML): var imagegap=" " //Specify pixels gap between each slideshow rotation (use integer): var slideshowgap=5 ////NO NEED TO EDIT BELOW THIS LINE//////////// var copyspeed=slidespeed leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>' var iedom=document.all||document.getElementById if (iedom) document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>') var actualwidth='' var cross_slide, ns_slide function fillup(){ if (iedom){ cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2 cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3 cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth cross_slide2.style.left=actualwidth+slideshowgap+"px" } else if (document.layers){ ns_slide=document.ns_slidemenu.document.ns_slidemenu2 ns_slide2=document.ns_slidemenu.document.ns_slidemenu3 ns_slide.document.write(leftrightslide) ns_slide.document.close() actualwidth=ns_slide.document.width ns_slide2.left=actualwidth+slideshowgap ns_slide2.document.write(leftrightslide) ns_slide2.document.close() } lefttime=setInterval("slideleft()",30) } window.onload=fillup function slideleft(){ if (iedom){ if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8)) cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px" else cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px" if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8)) cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px" else cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px" } else if (document.layers){ if (ns_slide.left>(actualwidth*(-1)+8)) ns_slide.left-=copyspeed else ns_slide.left=ns_slide2.left+actualwidth+slideshowgap if (ns_slide2.left>(actualwidth*(-1)+8)) ns_slide2.left-=copyspeed else ns_slide2.left=ns_slide.left+actualwidth+slideshowgap } } if (iedom||document.layers){ with (document){ document.write('<table border="0" cellspacing="0" cellpadding="0"><td>') if (iedom){ write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden"> ') write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"> ') write('<div id="test2" style="position:absolute;left:0px;top:0px"> </div> ') write('<div id="test3" style="position:absolute;left:-1000px;top:0px"> </div> ') write('</div> </div> ') } else if (document.layers){ write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>') write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>') write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>') write('</ilayer>') } document.write('</td></table> ') } } </script>

6. Simpan.

Catatan:
1. Tulisan "your link",Ganti >> anda bisa masukkan alamat website anda.
2. Tulisan "Your-Image-Link" Ganti >> anda bisa masukkan alamat gambar anda.


Semoga bermanfaat 

Kode Warna HTML

Cara Membuat Tombol Social Media Open Hide Popup Keren Abis Di Blog

Cara Membuat Tombol Social Media Open Hide Popup Keren Abis Di Blog :
1.Login ke Blogger, atau klik disini
2.Pilih Tata Letak
3.Tambahkan Gadget
4.Pilih HTML/JavaScript


Copy kode dibawah ini dan Letakkan ke kolom HTML/JavaScript




<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script><style type="text/css">#db-circle-mod{bottom: 0 !important;left: 5px;position: fixed;}#db-container-circle{position:relative;height:100px;width:100px}#db-base-button{background:-moz-linear-gradient(center top,#A90329 0,#8F0222 44%,#6D0019 100%) repeat scroll 0 0 #6D0019;background:-webkit-linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);background:-o-linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);background:-ms-linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);background:linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);border:4px solid #fff;text-decoration: none;z-index:9999;cursor:pointer;border-radius:50px 50px 50px 50px;box-shadow:0 1px 3px rgba(0,0,0,0.5);color:#fff;font:68px Arial;height:80px;left:0;padding:0;position:absolute;text-align:center;top:0;width:80px}.db-btn{position:absolute;height:50px;width:50px;border-radius:25px;top:15px;left:15px;-webkit-transition:all 250ms;-moz-transition:all 250ms;-o-transition:all 250ms;-ms-transition:all 250ms;transition:all 250ms;box-shadow:0 1px 3px rgba(0,0,0,.5)}#db-fb.open{top:-125px;left:25px}#db-fb.open.clicked{top:-135px;left:15px}#db-tw.open{top:-105px;left:80px}#db-gplus.open{top:-75px;left:125px}#db-rss.open{top:-30px;left:160px}#db-mail.open{left:175px;top:25px}.plus{-moz-user-select: none;-moz-transition:all 200ms ease-in 0s;-webkit-transition:all 200ms ease-in;-o-transition:all 200ms ease-in}.rot{-moz-transform:rotate(137deg);-o-transform:rotate(137deg);-webkit-transform:rotate(137deg);transform:rotate(137deg)}</style><script type="text/javascript">var delay=40,delayTime;$(function(){btns=$(".db-btn");$("#db-base-button").toggle(function(){$("span.plus").addClass("rot");btns.each(function(a){var b=$(this);delayTime=a*delay;window.setTimeout(function(){b.addClass("open")},delayTime)})},function(){$("span.plus").removeClass("rot");$($(btns).get().reverse()).each(function(a){var b=$(this);delayTime=a*delay;window.setTimeout(function(){b.removeClass("open")},delayTime)})})});</script><a href="http://gj37765.blogspot.com" style="position:absolute;z-index:-11"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEO6l5dVdB7W3gqWrd_m3_evNNeoH1MZM6zyd8_9FxVKp5WCgN1xFnHLxkbLfmw_J5e6iNwVywYvKyxRiGRi0lev6i5JTM-0LPw-6n68LQOIwdg4baBe9hQtD0zreuQwVv4raDZhMvBrc/s1600/1x1juice.png" /></a><div id="db-circle-mod"><div id="db-container-circle"><a id="db-fb" class="db-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC7c-qdQw8z-c4jv39ghFup7gwPEWx_budC6dhbmPKIte-y1yAz7iuKIkTuSMF38EGDRuSGS4czRKVT1Pf6sHcLPyl9IlmzJn7KE8RG07N5iE3JDraivP6mfKRHDftKdOCL3tcqT0BG5VQ/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -1px 0" href="https://www.facebook.com/johaedi" rel="nofollow" target="_blank"></a><a id="db-tw" class="db-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC7c-qdQw8z-c4jv39ghFup7gwPEWx_budC6dhbmPKIte-y1yAz7iuKIkTuSMF38EGDRuSGS4czRKVT1Pf6sHcLPyl9IlmzJn7KE8RG07N5iE3JDraivP6mfKRHDftKdOCL3tcqT0BG5VQ/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -52px 0" href="http://twitter.com/johaedi76" rel="nofollow" target="_blank"></a><a id="db-gplus" class="db-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC7c-qdQw8z-c4jv39ghFup7gwPEWx_budC6dhbmPKIte-y1yAz7iuKIkTuSMF38EGDRuSGS4czRKVT1Pf6sHcLPyl9IlmzJn7KE8RG07N5iE3JDraivP6mfKRHDftKdOCL3tcqT0BG5VQ/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -157px 0" href="https://plus.google.com/ID Google+ sobat" rel="nofollow" target="_blank"></a><a id="db-rss" class="db-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC7c-qdQw8z-c4jv39ghFup7gwPEWx_budC6dhbmPKIte-y1yAz7iuKIkTuSMF38EGDRuSGS4czRKVT1Pf6sHcLPyl9IlmzJn7KE8RG07N5iE3JDraivP6mfKRHDftKdOCL3tcqT0BG5VQ/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -105px 0" href="http://feeds.feedburner.com/ID FeedBurner sobat" rel="nofollow" target="_blank"></a><a id="db-mail" class="db-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC7c-qdQw8z-c4jv39ghFup7gwPEWx_budC6dhbmPKIte-y1yAz7iuKIkTuSMF38EGDRuSGS4czRKVT1Pf6sHcLPyl9IlmzJn7KE8RG07N5iE3JDraivP6mfKRHDftKdOCL3tcqT0BG5VQ/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -210px 0" href="http://feedburner.google.com/fb/a/mailverify?uri=ID FeedBurner sobat&loc=en_US" rel="nofollow" target="_blank"></a><a id="db-base-button"><span class="plus">+</span></a></div></div><a href="http://www.tuliskan.com"></a>


Ganti yang warna merah dengan ID anda

Selamat Mencoba

Cara Menghilangkan Tanda Obeng Dan Tang Di Blog

Haloooo sobat bloger,kali ini Joe mau share tentang bagimana cara menghilangkan obeng dan tang diblog.
Kalau sobat mau mencoba silahkan ikuti langkah-langkah berikut ini :

1.Login ke akun blogger sobat
2. Edit html --> centang kolom expand widget template
3.Cari kode ini:  ]]></b:skin>
4.Copy kode dibawah ini dan letakkan tepat diatas kode tersebut di atas

.quickedit{

display:none;
}

 5.  Klik tombol Simpan Template
6.Lihat hasilnya.

Membuat Widget Buka-Tutup di Blog

H

alo sobat kali ini share tentang bagimana sih caranya membuat buka tutup.Langsung aja yu ikuti langkah-langkahnya.

1.Buka blog sobat

2.Copy yang ada di bawah ini kemana aja yang sobat suka

<div style="margin-bottom: 2px;"> <span style="color: rgb(102, 102, 204);">Judul Widget</span><div style="margin-top: 5px; text-align: left;"> <input onclick="if (this.parentNode.parentNode.getEle mentsByTagName('div')[1].getElementsByTagName ('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div') [1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElem entsByTagName('div')[1].getElementsByTagName ('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'BUKA'; }" value="BUKA" style="margin-top: 5px; width: 60px; font-size: 10px;" type="button" /> </div> <div style="border: 1px inset ; margin: 0px; padding: 6px;"> <div style="display: none;" LETAKKAN WIDGET SOBAT DISINI </div> </div> </div>

Catatan

 *Judul Widget bisa sobat ganti dengan kata-kata sobat

*Letakan widget sobat disini bisa sobat ganti dengan artikel sobat

Selamat mencoba

Cara Membuat Gambar Berputar dan Membesar Saat Di Sentuh Kursor

Halooo sobat blog kali ini share tentang bagaimana caranya membuat gambar berputar dan membesar bila disentuh mouse mau ?.Ayo ikuti langkah-langkahnya.

Langkah-langkahnya :

1.Pertama Anda Log-in dulu ke blog
2.Lalu Buka menu Template
3.Klik Edit HTML
4.Setelah itu cari kode ini ]]></b:skin>
5.Kalou sudah ketemu Copy Paste Kode di bawah ini di atas kode ]]></b:skin>

post img{-o-transition: all 1.5s ease;-moz-transition: all 1.5s ease;-webkit-transition: all 1.5s ease;}
.post img:hover{-o-transform: scale(1.2) rotate(360deg) translate(0px);-moz-transform: scale(1.2) rotate(360deg) translate(0px);-webkit-transform: scale(1.2) rotate(360deg) translate(0px);-o-transition: all 1.5s ease;-moz-transition: all 1.5s ease;-webkit-transition: all 1.5s ease;}

Klik Save dan Lihat hasilnya

Semoga bermanfaat

Cara Membuat Menu dTree Di Blog Sobat Mau?

Haloooo sobat ,kali ini share tentang bagaimana cara membuat menu dtree.Menu dTree adalah menu yang menyerupai/mirip menu explore dan menu ini dapat kita tampilkan ke dalam web/blog kita. Teman2 pasti sudah pada tahukan Ayooo ikuti langkah langkah pemasngannya.

1.Buka Blog Anda
2.Klik Tata Letak Edit Template html
3. Cari kode </head>
4.Simpan script diatas </head>

<link rel="StyleSheet" href="http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/dtree.css" type="text/css" /> <script type="text/javascript" src="http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/createdtree.js"></script>

5 Template Simpan 

6.Caranya klik Tata Letak 

7. Tambah Gadget HTML 

8. Simpan  kode HTML dibawah ini

<h2> Menu Blog Ini</h2> <div class="dtree"> <p> <a href="javascript: d.openAll();">Buka Semua</a> | <a href="javascript: d.closeAll();">Tutup Semua</a></p> <script type="text/javascript"> <!-- d = new dTree('d'); d.add(0,-1,'T4belajarblogger'); d.add(1,0,'Folder 01','#.html'); d.add(2,1,'Sub Folder 01',' #.html'); d.add(3,2,'Sub/file Sub Folder 01',' link anda.html'); d.add(4,0,'Folder 02',' #.html'); d.add(5,4,'Sub Folder 02',' #.html'); d.add(6,5,'Sub/file Sub folder 02',' link anda.html'); d.add(7,0,'Folder 03',' #.html'); d.add(8,7,'Sub Folder 03',' #.html'); d.add(9,8,'Sub/file Sub folder 03',' link anda.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif'); d.add(10,0,'File[non-folder]',' link anda.html'); d.add(11,0,'File[non-folder]',' link anda.html'); d.add(12,0,'File Single',' link anda.html','','','img/trash.gif'); document.write(d); //--> </script> </div>

Ini dia Tampilannya

Semoga bermanfaat 

Catatan : Kalau sobat merasa kurang jelas silahkan kunjungi sumbernya

Disini

Cara Menambahkan Widget jadwal shalat Indonesia

Haloo Sobat ,kali ini share tentang bagaimana cara menambahkan widget jadwal shalat langsung aja yu ikuti cara-caranya.

1.Buat Postingan Baru
2.Copas "Copy All " di postingan baru sobat ,ingat bukan di compose tapi copy di htmlnya

Ini adalah tampilan dalam satu bulan

<p style="text-align: center;"> <iframe src="http://www.jadwalsholat.org/adzan/monthly.php" width="430" height="940" frameborder="0"></iframe></p>

Ini adalah tampilan harian

<p style="text-align: center;"> <iframe src="http://www.jadwalsholat.org/adzan/ajax.row.php" frameborder="0" width="220" height="220"></iframe></p>

Semoga bermanfaat ,selamat mencoba

Cara Memasang TV Online

1.Masuk akun blog sobat.
2.Sobat Klik tata letak >>>>  Tambah widget html/javascript
3.Copas kodenya dibawah ini dan letakan pada kolom kosong javascriptnya untuk judul kosongkan saja.

<!-- TV Online Buat Blog Copy Scriptnya Dari Sini --> <div style="border: 10px solid #868e89; height: 558px; overflow: hidden; width: 450px;"> <div style="margin-left: -34px; margin-top: -227px; text-align: center;"> <img src="//img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 860px; width: 100%px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_0" data-original-id="BLOGGER_object_0" /></div> </div> <!-- Sampai Sini -->

Atau Copy All letakan di Postingan baru

1.Masuk ke Entri New

2.Masuk dan Copas "Copy All" ke Bagian Html,ingat bukan ke composnya

3.Simpan 

4.lihat Hasilnya

Semoga bermanfaat

Cara Membuat dan Memasang Read More Otomatis di Blog

Halo sobat selamat malam kali ini share tentang Share Read More Otomatis
Read more atau baca selengkapnya sering kali kita jumpai di halaman beranda atau home sebuah blog.

Kegunaan read more:

Memenggal kalimat yang di tampilkan pada halaman utama blog anda.
Menghemat ruang pada tampilan halaman utama sebuah website.
Menjadi lebih elegant dan interaktif.
Membuat pengunjung membaca artikel tersebut hingga selesai.
Menambah pageviews artikel yang dibaca oleh pengunjun.
Menambah link anchor terhadap keyword judul.

Cara Pemasangannya ikuti langkah-langkah berikut

Login dengan akun blog saudara
Buka menu TEMPLATE blog anda
Lalu klik pada tombol EDIT HTML
Cari kode berikut </head>
Simpan kode di bawah ini tepat di atas kode </head>

<script type='text/javascript'> var thumbnail_mode = "float" ; summary_noimg = 250; summary_img = 250; img_thumb_height = 120; img_thumb_width = 120; </script> <script type='text/javascript'> //<![CDATA[ /****************************************** Auto-readmore link script, version 2.0 (for blogspot) (C)2008 by Anhvo visit http://en.vietwebguide.com to get more cool hacks ********************************************/ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } var summary = imgtag + '<div> ' + removeHtmlTag(div.innerHTML,summ) + '</div> '; div.innerHTML = summary; } //]]> </script>

Setelah itu, cari kode <data:post.body/>
Ganti kode <data:post.body/> dengan kode di bawah ini

<b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'> <data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script> <span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Semoga Artikel ini bermanfaat,selamat mencoba

Membuat Kotak Iklan 125x125 4 Kolom Keren Di Blog

Haloooo sobat kali ini share tentang membuat kolom iklan,Langsung aja yu ke TKP

Berikut Cara Membuat Kotak Iklan 125x125 4 Di Blog:
1.  Login ke Blogger
2.  Pilih Template >> Edit HTML
3. Cari kode ]]></b:skin>, copy kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin>.

/* Kotak Iklan 125x125 ===================== */ #kotak-iklan-125x125 { margin: 0px; padding: 5px; text-align: center; } #kotak-iklan-125x125 img { margin: 3px 3px 6px 6px; padding: 3px; text-align: center; border: 3px dotted #ff0000; -webkit-border-radius:70px; -moz-border-radius:70px; -o-border-radius:70px; border-radius:10px; -webkit-transition: all 0.45s ease-out; -moz-transition: all 0.45s ease-out; -o-transition: all 0.45s ease-out; transition: all 0.45s ease-out; } #kotak-iklan-125x125 img:hover { margin: 3px 3px 6px 6px; padding: 3px; text-align: center; border: 3px solid #ff0000; -webkit-border-radius:0px; -moz-border-radius:0px; -o-border-radius:0px; border-radius:10px; }

Setelah memasang kode css kedalam template, sekarang tinggal pasang kode kotak iklannya di bawah ini.

1.  Pilih Tata Letak

2. Tambah Gadget

3. Pilih HTML/JavaScript

4 Copy kode di bawah ini 

<center> <div id="kotak-iklan-125x125"> <a target="_blank" href="Link Iklan Sobat"><img alt="banner ads" src="Gambar Iklan Sobat" border="0"/></a> <a target="_blank" href="Link Iklan Sobat"><img alt="banner ads" src="Gambar Iklan Sobat" border="0"/></a> <a target="_blank" href="Link Iklan Sobat"><img alt="banner ads" src="Gambar Iklan Sobat" border="0"/></a> <a target="_blank" href="Link Iklan Sobat"><img alt="banner ads" src="Gambar Iklan Sobat" border="0"/></a> </div> </center>

5.letakkan ke kolom HTML/JavaScript
6.Simpan/Save


Keterangan:
Kode "Link Iklan Sobat"ganti dengan Link/URL Iklan sobat.
Kode "Gambar Iklan Sobat" ganti dengan Link/URL Gambar Iklan Sobat.

Silahkan dicoba

Semoga bermanfaat

Cara Membuat All Copy Pada Blog

Text Area adalah sebuah kotak tempat menyimpan artikel atau gambar di postingan supaya postingan yang sedang dikelola tidak memanjang kebawah
Dengan memasang text area,blog kita kelihatan rapih dan elegant,dan memudahkan pengunjung untuk mengcopy.
Langsung aja yu sob lihat caranya:
Cara pasangnya :
1.Buka blog anda
2.Buat postingan baru
3.Pilih Html bukan compose
4.copykan  yang ada dibawah ini
5.Jangan lupa ganti "Silakan artikel yang mau dimuat ditampung disini"

<div><form name="copy"><div align="center"><span><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" value="Highlight All" type="button"> </span></div><p align="center"><textarea style="width: 150px; height: 80px;" name="txt" rows="5" wrap="VIRTUAL" cols="20">Silakan artikel yang mau dimuat ditampung disini</textarea></p></form></div>

Dan Ini Hasilnya

<div> <form name="copy"> <div align="center"> <span><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" value="Highlight All" type="button"> </span></div> <p align="center"> <textarea style="width: 150px; height: 80px;" name="txt" rows="5" wrap="VIRTUAL" cols="20">Silakan artikel yang mau dimuat ditampung disini
Atau Seperti ini

<form><textarea rows="10" cols="50">Artikel kamu disini</textarea></form>


Hasilnya 

<form> <textarea rows="10" cols="50">Artikel kamu disini

Selamat Mencoba
catatan kalo tidak bisa dicopy dipostingan saya ,silahkan anda "tekan Copy All "aja.

Membuat Facebook Like Box Melayang Dengan Timer Saat Membuka Blog

Halo sobat blogger kali ini  share tentang membuat like Box pakai timer,langsung aja yu ikuti langkah-langkahnya

>Login ke akun bloger anda
>Masuk pada rancangan template
>Pilih edit HTML
>Cari  kode </body>biar gampang, tekan CTRL + F kalau sudah  ketemu kodenya lalu copy paste kode di bawah ini

<style>#fblikepop { background-color: #fff; display: none; position: fixed; top: 200px; _position: absolute; /* hack for IE 6*/ width: 450px; border: 10px solid #6F6F6F; z-index: 200; -moz-border-radius: 9px; -webkit-border-radius: 9px; margin: 0pt; padding: 0pt; color: #333333; text-align: left; font-family: arial,sans-serif; font-size: 13px; }#fblikepop body { background: #fff none repeat scroll 0%; line-height: 1; margin: 0pt; height: 100%; } .fbflush { cursor: pointer; font-size: 11px !important; color: #FFF !important; text-decoration: none !important; border: 0 !important; } #fblikebg { display: none; position: fixed; _position: absolute; /* hack for IE 6*/ height: 100%; width: 100%; top: 0; left: 0; background: #000000; z-index: 100; }#fblikepop #closeable { float: right; margin: 7px 15px 0 0; }#fblikepop h1 { background: #6D84B4 none repeat scroll 0 0; border-top: 1px solid #3B5998; border-left: 1px solid #3B5998; border-right: 1px solid #3B5998; color: #FFFFFF !important; font-size: 14px !important; font-weight: normal !important; padding: 5px !important; margin: 0 !important; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important; }#fblikepop #actionHolder { height: 30px; overflow: hidden; }#fblikepop #buttonArea { background: #F2F2F2; border-top: 1px solid #CCCCCC; padding: 10px; min-height: 50px; }#fblikepop #buttonArea a { color: #999999 !important; text-decoration: none !important; border: 0 !important; font-size: 10px !important; }#fblikepop #buttonArea a:hover { color: #333 !important; text-decoration: none !important; border: 0 !important; }#fblikepop #popupMessage { font-size: 12px !important; font-weight: normal !important; line-height: 22px; padding: 8px; background: #fff !important; }#fblikepop #counter-display { float: right; font-size: 11px !important; font-weight: normal !important; margin: 5px 0 0 0; text-align: right; line-height: 16px; }</style> <script src="http://www.google.com/jsapi"></script><script>google.load("jquery", "1");</script> <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> <script type="text/javascript"> //<![CDATA[ kakinetworkdotcom01username="fan page anda", kakinetworkdotcom01title="Join us at Facebook!", kakinetworkdotcom01skin="04", kakinetworkdotcom01time="5", kakinetworkdotcom01wait="0", kakinetworkdotcom01lang="en" //]]> </script> <script type="text/javascript" src="http://allbloggingtips.com/wp-content/uploads/2012/06/popup-with-timer-codez.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){$().kakinetworkdotcom({ closeable: true });}); //]]> </script>6

 > kemudian paste kan script yang barusan di copy tepat di atas kode </body>


ganti tulisan "fan page anda" dengan username halaman fanpage sobat
ganti timer 20 yang di tulis warna biru untuk menentukan waktu yang anda inginkan
kemudian jangan lupa preview takutnya gagal sobat klo udah fix kemudian save beres dueh ,,,,hehehe

Semoga bermanfaat,selamat mencoba semoga berhasil

Membuat Tulisan Atau Text Berjalan Pada Blog Secara Digital

Halooooo sahabat ,Joe 'Blogs kali ini akan share membuat tulisan/text berjalan secara digital,udah tahu belum kalo belum tahu ,ayoooo ikuti cara-caranya.

1.Buka Blog Sobat

2.Kunjungi widgeoDisini

3 Sobatkan Akan menemui beberapa pilihan Geo Counter,Weather,Flash Effect ,dan Flas pilih message

4.Anda pilih Flash Message,lihat pada gambar dibawah ini

5.Anda ikuti sesui petunjuknya lihat gambar dibawah ini

Tata cara pengisian pada kolom diatas 

1 : isi dengan tulisan yang sobat-sobat inginkan

 2 : pilih warna yang untuk tulisannya

 3 : pilih ukuran yang diinginkan

 4 : pilihlah salah satu category apa saja

 5 : pilihlah opsi no

6 : ceklist

jika sudah lalu klik Get Widget

6.Nanti Akan tampil Html,nah sobat copy HTML nya dan terapkan diblog sobat

Gimana Mudahkan ,Selamat mencoba 

Sumber : Dari segala sumber

Cara Memasang Widget Google Translate Di Setiap Postingan Blog

Selamat malam sobat bloger kali ini Joe share tentang membuat Transalte Google di setiap postingan.Transale penting loSoalnya blog kita kan tersebar keseluruh penjuru dunia dengan adanya Translate memudahkan pengunjung blog kita untuk membaca dan menyimak artikel yang ada diblog kita.
Tertarik ayooo pasang

1. Masuk ke blogger.
2. Pilih template.
3. Pilih edit html.
4. Carilah kode dibawah ini
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
5. Apabila sudah ketemu dengan kode tersebut, simpan diatas kode yang berwarna putih </b:if>


<div style='text-align: right;'><div id='google_translate_element'/><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'id'
}, 'google_translate_element');
}
</script><script src='http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'/></div> 
6. Simpan.
dan lihat hasilnya

Selamat Mencoba