DC Community

Tampilkan postingan dengan label Tip Trik Blogger. Tampilkan semua postingan

Minggu, 08 Januari 2012

Cara Menyembunyikan Widget Follow

Ini buat agan-agan yang tidak memiliki banyak ruang di sidebar blognya. Untuk membuat alternatifnya, saya buat tutorial ini. Mudah-mudahan bermanfaat.

Berikut langkah-langkahnya :
1. Login ke Blogger
2. Masuk Rancangan - Elemen Laman
3. Tambah Gadget Html/Java Script
4. Copy - Paste kode berikut :

.fltab{
height:32px;
width:270px;
float:top;
cursor:pointer;
background:url(#) no-repeat;
}
.flcontent{
float:right;
border:2px solid #676767;
background:url()#F90 repeat-x bottom center scroll;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideFL(){
var fl = document.getElementById("fl");
var w = fl.offsetWidth;
fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
fl.opened = !fl.opened;
}
function moveFL(x0, xf){
var fl = document.getElementById("fl");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
fl.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}
}
</script>
<div id="fl">
<div class="fltab" onclick="showHideFL()"> </div>
<div class="flcontent">

GANTI TEXT INI DENGAN CODE FOLLOWERS ANDA

<a href="javascript:showHideFL()">
[Tutup]
</a></div>
<span style="font-size:85%;"><a href="http://dinarcool.blogspot.com/2012/01/cara-menyembunyikan-widget-follow.html"><div style="color: rgb(68, 68, 68);">
<span style="font-size:xx-small;">Get This Gadget</span></div></a></span>
</div>
</div>
<script type="text/javascript"><br />var fl = document.getElementById("fl");<br />fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";<br /></script>

5. Ambil code script followers anda di sini
6. Setelah itu,bika rancangan - edit Html.cari code <body> dengan cara tekan Ctrl + F, copy paste kode di atas <body>

Sumber : http://www.idsena.web.id/2011/02/cara-menyembunyikan-widget-follow.html

Baca Selengkapnya»»

Selasa, 27 Desember 2011

Tips cara blog bisa masuk google search engine, yahoo, dsb

Kali ini DC akan membahas tentang Tips cara blog bisa masuk google search engine, yahoo, dsb

Sumber pengunjung blog kita bisa dari direktori web, mesin pencari, tautan / link dari website lain dan kunjungan langsung ke alamat / url situs kita. Untuk bisa dicrawl dan diindex google, situs kita harus ditemukan oleh sistem bot google yang akan menelusuri blog kita dan menampilkan situs kita di hasil pencarian google.

berikut ini adalah beberapa cara agar situs web kita kenalan dengan bot punya google, yahoo, dan kawan-kawan :

1. Submit url situs web atau blog kita di sistem milik google, yahoo, dll.

- www.google.com/addurl/

- www.google.com/webmasters/tools/ (khusus yang ahli saja / expert)

- www.submitexpress.com/submit.html (pihak ketiga)

- www.altavista.com/addurl/default

- search.yahoo.com/info/submit.html

2. Submit alamat blog / situs ke web direktori terkenal

- www.dmoz.org

3. Promosi baik-baik

- Pasang signature email kita yang ada link blog atau website kita (hati-hati email kita diangap spam)

- Pasang signature di komentar blog atau forum walaupun nofollow

- Pasang iklan di iklan online gratisan

- Masukkan blog kita di web direktori lokal dan internasional sebanyak-banyaknya

- Daftar direktori blog seperti blog-indonesia.com

- Pakai pakaian atau atribut yang ada tulisan alamat situs kita

- Kalau kenalan sama orang lain di internet jangan lupa promosi blog kita.

- Pasang link blog kita di profil friendster, facebook, hi5, myspace, dan lain-lain.

4. Rajin menebar link blog aktif kita di internet

carilah forum atau blog yang memperbolehkan kita posting link aktif follow web kita di situsnya. seperti memberi komentar atau respon balasan thread di forum komunitas dengan melampirkan link di signature kita. cara ini lumayan ampuh untuk menarik pengunjung dan banyak bot search engine.

-----

Tambahan :

Yang perlu diingat dan diperhatikan adalah proses mulai dari crawl sampai index bisa memakan waktu sebentar maupun lama suka-suka sistem google. Bisa dalam hitungan jam, hari, minggu, bulan, tahun, dan seterusnya. Jadi harap sabar dan jangan mudah putus asa. Jangan bergantung pada meisn pencari saja, tetapi gunakan metode promosi lain.

Kalau buat blog jangan cuma copy paste dari website lain karena google bisa mendeteksi kejahatan hak cipta semacam itu. Buatlah tulisan blog sendiri biarpun jelek karena lama-lama kita bisa jadi ahli menulis.

Artikel atau tulisan blog yang bagus tidak selamanya bisa memancing orang / pengunjung untuk memberi komentar. Komentar bukanlah sesuatu yang patut dibanggakan. Konsentrasilah pada jumlah pengunjung ketimbang jumlah komentar blog.

Semoga membantu :D

source : http://organisasi.org/cara-agar-blog-bisa-terdeteksi-ditemukan-mesin-pencari-google#comment-13996

Baca Selengkapnya»»

Membuat Salam Pembuka Unik Di Blog

mungkin anda pernah melihat sebuah blog yang menampilkan salam sapaan, trik kali ini ada hubungannya dengan triks yang Membuat pesan konfirmasi
penasaran mau tau cara membuatnya, langsung aja
petama login terlebih dahulu
2. masuk ke Tata Letak (Layout) >> Element halaman
3. tambah GADGEt >> HTML/JAVA SCRIPT
4. copy code berikut dan pastekan kedalamnya

<script type='text/javascript'>
var name = prompt("Welcome!! Nama anda siapa", "Nama Anda ");
alert("salam kenal ya "+name)
alert("selamat browsing di blog saya, semoga berkenan!")
</script>

5. text yang berwarna Biru bisa anda ganti dengan text yang anda inginkan
6.simpan 
7.lihatlah hasilnya, selesai .....

Saya Butuh Komentar Anda Sobat Untk Kemajuan Blog Ini!!!!!!!

Good Luck!!!!!!!!!!

Baca Selengkapnya»»

Senin, 26 Desember 2011

Cara Membuat Efek Kembang Api Pada Blog

Assalamualaikum Sobat DC. Kali ini DC akan share tentang Cara Membuat Efek Kembang Api Pada Blog.

Langkah - langkah :
1. login blog
2. rancangan --> edit HMTL
3. lalu cari kode </body>
4. lalu masukkan kode script dibwah ini diatas kode </body>

<script language="javascript" src="https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/kembangapi.js"></script>

5. simpan...

Kok belum keluar??????
jangan takut dulu sob... masih ada cara yang lain kok... langsung aja ya..

1. login blog
2. rancangan --> elemen halaman --> tambah gadget --> HTML/JavaScript
3. lalu masukkan kode

<script language="javascript" src="https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/kembangapi.js"></script>

4. simpan

Dan selesei deh dan jangan lupa coba lihat hasilnya....

kalo belum keluar berarti kodenya masih di disabled tuh
jadi sobat bisa pakai yang kode dibawah ini aja (versi flash)

<div style="position: fixed; bottom: 0px; right: 2px;"><br /><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="160" height="600" title="grab this widget @ widgetindex.blogspot" src="http://5433001315082274311-a-1802744773732722657-s-sites.googlegroups.com/site/widgetindex/fireworks.swf" wmode="transparent" type="application/x-shockwave-flash" quality="high"></embed></div>

Simpan.
Good Luck sob.... ^_^

source : http://vikrymadz.blogspot.com/2011/12/cara-membuat-widget-timerpenghitung.html

Baca Selengkapnya»»

Cara Membuat Navigasi Halaman (seperti punya google)

Cara Membuat Navigasi Halaman (seperti punya google). Sebelumnya sobat pastinya sudah tahu kan kayak apa navigasi halaman punya mbah google itu,

Nah klo sobat mungkin ingin membuat navigasi halaman sobat seperti punya si mbah, nih saya punya triknya sob.

OK langsung saja ya sob.

Cara Membuat Navigasi Halaman (seperti punya google)

1. login blogger
2. buka rancangan >> edit HTML
3. cari kode ]]></b:skin>
4. lalu taruh kode dibawah ini tepat diatas kode ]]></b:skin>

#nav a,#nav a:visited,.blk a{color:#000}
#nav a{display:block}
#nav .b a,#nav .b a:visited{color:#20c}
#nav .i{color:#a90a08;font-weight:bold}
.csb,.ss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbZWxbY08vuVtc-OqbFlVD5OSpwxMGNi4orPL4lYiIYn7P4CudCfCgVw2zz50RHuzvLu_iECg9Kp7X9TDsHKhes-Bb5b5gkq8ECUoczj6el3IY5vxvLS55rgtKwy7Ehn5qiXctQnZddOe/s1600/nav_logo7.png) no-repeat 0 0;height:26px;display:block}
.ss{background-position:0 -88px;position:absolute;left:0;top:0}
.cps{height:18px;overflow:hidden;width:114px}
.mbi{width:13px;height:13px;background-position:-91px -74px;margin-right:3px}
#nav td{padding:0;text-align:center}

5. lalu cari kode </body>
6. taruh kode dibawah ini tepat diatas kode </body>

<script type='text/javascript'>
var home_page_url = location.href;
var pageCount=10;
var displayPageNum=6;
var upPageWord ='Previous';
var downPageWord ='Next';
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 ='';
htmlMap[htmlMap.length]='/';
postNum++;
for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}
var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};
for(var p =0;p< banyaknomer;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = '<a href="/"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
}else{
upPageHtml = '<a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
}
fFlag++;
}
if(p==(thisNum-1)){
if(p==0){
html += '<span class="csb" style="background-position: -26px 0pt; width: 18px;"></span></td><td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
}else{
html += '<td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
}
}else{
if(p==0){
html += '<td><a href="/"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>1</a></td>';
}else{
html += '<td><a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>'+ (p+1) +'</a></td>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<td class="b"> <a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -76px 0pt; margin-right: 34px; width: 66px;"></span>'+ downPageWord +'</a></td>';
eFlag++;
}
}
}
if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}
html2 = '<table id="nav" style="margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;" align="center"><tbody><tr valign="top"><td class="b">Page ('+(postNum-1)+') </td><td class="b">';
html3 = '</tr></tbody></table>';
html = html2+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}else{
html += '<td class="b"><span class="csb" style="background-position: -76px 0pt; width: 42px;"></span></td>';
}
if(postNum==1) postNum++;
html += html3+ '</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&&pageArea.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.length) : "";
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 = '<a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;
htmlMap[htmlMap.length]=labelHtml;
postNum++;
for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;
itemCount++;
}
var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};
for(var p =0;p< banyaknomer;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = labelHtml +'<span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
}else{
upPageHtml = '<a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
}
fFlag++;
}
if(p==(thisNum-1)){
if(p==0){
html += '<span class="csb" style="background-position: -26px 0pt; width: 18px;"></span></td><td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
}else{
html += '<td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
}
}else{
if(p==0){
html = '<td>'+labelHtml+'<span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>1</a></td>';
}else{
html += '<td><a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>'+ (p+1) +'</a></td>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<td class="b"> <a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -76px 0pt; margin-right: 34px; width: 66px;"></span>'+ downPageWord +'</a></td>';
eFlag++;}}}
if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';}}
html2 = '<table id="nav" style="margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;" align="center"><tbody><tr valign="top"><td class="b">Page ('+(postNum-1)+') </td><td class="b">';
html3 = '</tr></tbody></table>';
html = html2+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}else{
html += '<td class="b"><span class="csb" style="background-position: -76px 0pt; width: 42px;"></span></td>';}
if(postNum==1) postNum++;
html += html3+ '</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&&pageArea.length>0){
html ='';}
if(blogPager){
blogPager.innerHTML = html;}}
</script>
<script type='text/javascript'>
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("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));}}
var home_page = "/";
if (thisUrl.indexOf("?q=")==-1 && thisUrl.indexOf(".html")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&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>

7. simpan dan lihat hasilnya.

Buseeeeetttt panjang banyak yahh kodenya.... hahahahaha

daripada nanti ada yang komentar gt, jadi saya komentarin dlu nih... wkwkwkwkwkwk

source : http://vikrymadz.blogspot.com/2011/12/cara-membuat-navigasi-halaman-seperti.html

Baca Selengkapnya»»

Kamis, 11 Agustus 2011

Cara membuat tulisan berbayang (shadow) pake CODE HTML

Membuat tulisan berbayang (shadow) itu lah topik saya kali ini. di mana suatu blog kita temukan tulisan nya berbayang. nah pasti ada yang udah tahu kan. untuk membuat nya sangatlah mudah. trik ini hanya menggunakan kode CSS dan sedikit HTML. ikuti langkah-langkah di bawah ini

Log ini dulu ke blogger
Tata letak
Klik edit HTML
Kasi tanda centang di "Expand Widget Template"
Kemudian cari kode ]]></b:skin>
Letak kan kode dibawah ini diatas kode ]]></b:skin>
.tshadow {
color: #000;
background: transparant;
height: 35px;
width: auto;
padding-left: 20px;
line-height: 32px;
font-size: 1.8em;
margin-bottom: 5px;
margin-left: 5px;
text-shadow: 2px 2px 3px #000; /* IMPORTANT */
}
Simpan Tamplate anda
Setelah itu kode untuk posting. Sobat hanya menambah kode dibawah ini untuk membuat tulisan berbayang:
<div class="tshadow">Tulisan Yang Ingin Dibuat Berbayang</div>
Silahkan liat hasilnya.

PENTING

Kode ini atau Trik ini hanya support dan berfungsi pada beberapa browser.

Selamat mencoba............

cara membuat tulisan berbayang (shadow) di blog, langkah menambah tulisan berbayang shadow di blogspot, tutorial tulisan berbayang shadow, cara memasang tulisan berbayang shadow, cara membuat tulisan berbayang unik.

Baca Selengkapnya»»

Jumat, 15 Juli 2011

Cara Mengganti Tulisan Newer Post, Older Post, dan Home

Teman-teman DC comunnity. . . .!! Salam DC-ker's!! Neh aq punya ilmu baru, neh caranya buat ganti tulisan "Postingan Lama" "Postingan Baru" sama "Home" jadi gambar. . . .!! Kayak punya quw ntu thu!! Caranya gampang koq teman-teman!! Tapi sebenernya kalo kamu "Find" kata-kata tadi di template kau, nggak ada di sana!! Meskipun udah di expand. Nah, pertanyaannya pasti "yang mana sih tulisan yang diganti??". Yea thow??

Sebenernya yang diganti ntu tulisannya

1. Buat ngganti tulisan "Posting Baru" kamu!!:

<data:newerPageTitle/>

Ganti code diatas jadi <img src="alamat gambar kamu"/>

2. Buat ngganti tulisan "Posting Lama" kamu!!
<data:olderPageTitle/>
Ganti code diatas jadi <img src="alamat gambar kamu"/>

3. Buat ngganti tulisan "Home" kamu!!
<data:homeMsg/>
Ganti code diatas jadi <img src="alamat gambar kamu"/>
gampang kan teman-teman!! Selamat mencoba!!

Baca Selengkapnya»»

Cara Membuat Related Post / Artikel Terkait di bawah Postingan Blog

Cara Membuat Related Post / Artikel Terkait di bawah Postingan Blog. Salah satu cara yang paling ampuh untuk menampilkan artikel yang dicari oleh pengunjung blog yaitu dengan Membuat Artikel Terkait atau Related Post di bawah artikel blog.

Dengan Memasang Related Post atau artikel Terkait di bawah postingan blog, pengunjung akan langsung melihat daftar isi blog saat selesai membaca artikel sesuai dengan Label artikel artikel yang sedang ia baca. Bagi seorang blogger blogspot, ada 2 macamrelated post yang paling banyak digunakan. Yang pertama adalah related post biasa, dan yang kedua adalah Related Post dengan Gambar Thumbnail. Untuk tutorial kali ini. Saya hanya akan membahas Related Post atau Artikel Terkait biasa karena menurut saya Related Post biasa ini lebih baik dari Related Post Thumbnail dilihat dari jumlah Judul artikel yang ditampilkannnya. Tapi, karena Related Post Thumbnail lebih menarik, akhirnya saya menggunakan Related Post dengan Gambar / Thumbnail.

Jika anda ingin memasang Related Post atau Artikel Terkait di bawah postingan blog anda berikut saya share caranya. Tapi sebelumnya, supaya related post bekerja sesuai dengan yang diharapkan, berikan Label pada setiap artikel anda. Baik artikel yang baru mau di posting, maupun artikel yang sudah di posting tapi tidak berLABEL.

Berikut cara membuat Related Post atau Artikel Terkait Biasa dengan Fungsi Scroll :

Seperti biasa, masuk dulu ke Akun blog anda.

Pada halaman Dasbor, cari kata "RANCANGAN" lalu klik

Pada halaman Rancangan, klik tombol "EDIT HTML"

Sebaiknya simpan dulu template anda dengan mengklik tombol "DOWNLOAD TEMPLATE LENGKAP".

Beri tanda CHECKLIST pada kotak kecil yg ada di depan tulisan Expand Template Wdget yang terletak diatas kotak kode HTML template blog anda

Cari kode ]]></b:skin> (Gunakan tombol F3 pada keyboard untuk melakukan pencarian cepat).

Copy kode dibawah ini, lalu paste DI ATAS kode ]]><b/skin> berikut kodenya :

.rbbox{border: 1px solid #000000;padding: 5px;

background-color: #F2F2F2;-moz-border-radius:5px; margin:5px;}

.rbbox:hover{background-color: #EFFBEF;}

Selanjutnya, cari kode ini <data:post.body/></b:if> . simpanlah code di bawah ini di tengah-tengah kode tadi. contoh: <data:post.body/>kode diletakan disini</b:if>

<b:if cond='data:blog.pageType == "item"'>
<br/>
<br/>
<H2>Artikel Terkait:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid
#ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('albri').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>

Lakukan pratinjau untuk melihat hasilnya. ( jika anda tidak menggunkan Read More Otomatis )

Jika sudah sesuai, silahkan klik tulisan "SIMPAN TEMPALATE" untuk menyimpan hasil kerja anda.

Jika belum sesuai dengan yang diharapkan dan ingin mengubah warna / tampilan kotak Related Post, silahkan simak petunjuk berikut ini :

Anda bisa mengganti warna dan tebal garis pinggir kotak Related Post anda dengan mengganti angka dan kode warna yang berwarna merah pada kode pertama baris pertama.
Untuk melihat kode warna, silahkan sklik tulisan "KODE WARNA" yang ada diatas / header blog ini.

Jika ingin mengganti warna background kotaknya, ganti kode warna ( #F2F2F2 ) pada kode pertama baris kedua.

Kode pertama baris ketiga ( .rbbox:hover ) adalah warna background kotak jika mouse menyentuh kotak Related Post. Silahkan Ganti kode Warnanya sesuai dengan warna yang anda inginkan.

Anda Juga bisa mengganti Tulisan "Artikel Lainnya" dengan kata yang anda inginkan. Silahkan Ganti Tulisan Artikel Lainnya pada kode kedua ( kode yang ada didalam Text Area ).

Oke sob, selamat melakukan Copy Paste....
Happy Blogging...

Baca Selengkapnya»»

Rabu, 13 Juli 2011

Cara Membuat Label Cloud Berputar

Buat sobat yang pengen membuat tampilan labelnya seperti gambar disamping.

Label cloud berputar ini terlihat lebih menarik karena gerakannya yang dinamis sehingga dapat menarik perhatian para pengunjung blog kita dan label cloud ini gerakannya juga mengikuti cursor.

Sebenarnya untuk membuat label cloud berputar ini membutuhkan kode HTML yang lumayan agak panjang dan sobat harus menambahkannya pada template sobat, jadi saran ane saranin nanti sebelum mengedit template, ada baiknya backup terlebih dahulu template sobat.
I. Langkah Pertama

Login ke Blogger dengan ID sobat.
Klik Tata Letak
Klik tab Edit HTML
Download dahulu template sobat dengan mengklik Download Template Lengkap
Kemudian klik button Expand Template Widget dan cari kode yg seperti ini :

<b:section class='sidebar' id='sidebar' preferred='yes'>

Copy kode berikut ini setelah kode diatas :

    <b:widget id='Label99' locked='false' title='Labels' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
    <div id='flashcontent'>Blogumulus by <a href='http://vikrymadz.blogspot.com/'>vikrymadz</a></div>
    <script type='text/javascript'>
    var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
    // uncomment next line to enable transparency
    //so.addParam("wmode", "transparent");
    so.addVariable("tcolor", "0x333333");
    so.addVariable("mode", "tags");
    so.addVariable("distr", "true");
    so.addVariable("tspeed", "100");
    so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
    so.addParam("allowScriptAccess", "always");
    so.write("flashcontent");
    </script>
    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>

II. Langkah Kedua
* Mengubah lebar dan tinggi kolom serta warna background
Angka "240" adalah lebar kolom
Angka "300" adalah tinggi kolom
Sedangkan #ffffff adalah kode untuk backgroud

* Merubah warna font, untuk kode warna bisa sobat lihat disini
so.addVariable("tcolor", "0x333333");

* Merubah ukuran font
so.addVariable("tagcloud", "12'>");

Jika dalam membuat label cloud ini tidak berfungsi, silahkan sobat ganti label text menjadi label cloud. Perhatikan gambar dibawah ini :

good luck sob...

Baca Selengkapnya»»

Cara Membuat widget Recent Post / Postingan Terbaru

Seperti pada judulnya kali ini saya akan share mengenai Cara Membuat widget Recent Post / Postingan Terbaru. widget Recent Post adalah sebuah widget untuk menampilkan posting" terbaru.

Untuk membuat widget ini cukup mudah kok, karena hanya membutuhkan sedikit kode HTML saja. Dan widget ini juga tidak terlalu berat kok.

udah deh ya sob langsung aja deh pada langkah"nya.... lagi males basa basi nih.... hehehehehe

1. login blog
2. rancangan >> elemen halaman >> tambah gadget (HTML/JavaScript)
3. lalu masukkan kode dibawah ini

<script style="text/javascript" src="https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/recentposts.js"></script>
<script style="text/javascript">
var numposts = 10;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://dinarcool.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts">
</script>

NB :
text yang berwarna biru adalah jumlah banyak posting yang akan tampil pada widget tersebut
text yang berwarna merah adalah alamat blog, jadi jangan lupa ganti dengan alamat blog sobat.

4. simpan

gimana??? mudah kan??? jadi selamat mencoba ya sob.... ^_^

Baca Selengkapnya»»

Selasa, 12 Juli 2011

Cara Membuat Google Site

Halo sobat blogger semua...
ok deh kali ini saya akan share mengenai Cara Membuat Google Site.
Google Site???? yups mungkin masih ada yang belum tau tentang Google Site. Google Site menurut saya adalah situs file hosting persembahan dari Mbah Google.... hehehehehe...

ok langsung aja pada langkah-langkah Cara Membuat Google Site.

1. Buka link http://sites.google.com/.
2. Login dengan Google akun sobat. Kalo belum punya, silahkan daftar terlebih dahulu di http://gmail.com.
3. Klik menu Setelan Pengguna (User Setting). Ubah bahasa menjadi Bahasa Indoenesia dan Zona waktu GMT+7 (Ini untuk membantu menyimpan file Anda di server google Indonesia). Simpan perubahan!
4. Klik tombol Buat Situs.
5. Pilih template sesuai selera Anda, isi nama situs, URL, kode chaptcha. Klik tombol Buat situs. Dan situs Anda sudah jadi sekarang.

6. Klik menu Tindakan Lainnya --> Berbagi pakai situs ini seperti gambar disamping. Ceklist pada pengaturan izin tingkat lanjut yaitu Setiap orang di dunia dapat melihat situs ini (tampilkan untuk umum). Biar file yang kita upload bisa diakses oleh semua orang.

Untuk menyimpan/upload file [MP3, MP4, FLV, SWF, JPG, GIF, PNG, DOC, PPT, XLS, PDF, JS, CSS, dll.] Agar bisa di download dan digunakan.
1. Klik tombol Buat laman.
2. Pilih template Lemari Berkas.
3. Isi Nama halamannya. dan klik tombol Buat Laman
4. Klik tombol Tambahkan berkas. Dan silahkan untuk mengupload file sobat.

Selamat Mencoba

Baca Selengkapnya»»

Rabu, 06 Juli 2011

Menu Navigasi Slide Out / Slide Out Navigation

Naah, Sekarang kita akan membuat menu navigasi dengan efek Slide Out yang tetap menggunakan framework JQuery. Menu ini mempunyai efek Slide yang sangat halus, saat kita mengarahkan pointer mouse (mouse hover) pada menu, maka menu akan bergeser keluar (slide out) secara perlahan dan akan kembali pada posisi semula jika kita menggeser mouse keluar dari area menu selain itu menu ini akan selalu dalam posisi tetap walau kita menggeser (scroll) halaman naik ataupun turun. Kita bisa saja menggunakan navigasi menu ini untuk berbagai keperluan, misal Sosial Bookmark dan lain sebagainya.

Jika sobat ingin melihat Demonya silahkan klik disini atau disini.

OK, mungkin setelah melihat demo di atas para sobat pingin langsung pasang di blog sobat mari kita lanjut ke langkah-langkah sebagai berikut :

Seperti biasa Login ke Blogger sobat
Masuk ke Tata Letak --> Edit HTML
Kemudian centang "Expand Template Widget"
Selanjutnya cari kode ]]></b:skin>
Jika sudah ketemu Masukkan (Copy Paste) kode CSS di bawah ini, tepat di atas kode ]]></b:skin> tadi.

ul#menusisi {
position: fixed;
margin: 0px;
padding: 0px;
top: 50px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#menusisi li {
width: 100px;
}
ul#menusisi li a {
display: block;
margin-left: -50px;
width: 100px;
height: 55px;
background-color:#141414;
background-repeat:no-repeat;
background-position:48px center;
border:1px solid #cfcfcf;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
ul#menusisi .beranda a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png);
}
ul#menusisi .tentang a{
background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/S9BJaX0yaqI/AAAAAAAAD_4/GZhfUKvK588/d/nav_info.png);
}
ul#menusisi .cari a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJejnwlAI/AAAAAAAAEAE/B_LZd63vGeI/d/nav_search.png);
}
ul#menusisi .komentar a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaFyqDGI/AAAAAAAAD_w/pNO6TUSigBg/d/nav_comment.png);
}
ul#menusisi .rssfeed a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaabJhzI/AAAAAAAAEAA/Oo4mhwCwzbI/d/nav_rss.png);
}
ul#menusisi .alat a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJelocqyI/AAAAAAAAEAI/6SmP-UHv-eg/d/nav_tools.png);
}
ul#menusisi .kontak a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png);
}
Langkah selanjutnya cari kode seperti ini </head>
Setelah ketemu Masukkan kode JQuery di bawah ini tepat di atas kode </head> tadi.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(function() {
$('#menusisi a').stop().animate({'marginLeft':'-50px'},1000);
$('#menusisi > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-50px'},200);
}
);
});
</script>

PERHATIAN!!
Jika di template sobat sudah pernah dipasang kode yang berwarna merah di atas, sebaiknya kode tersebut tidak usah dipasang
Kemudian langkahk yang terakhir sobat cari kode seperti ini </body>
Setelah ketemu kemudian Masukkan (Copy Paste) kode di bawah ini tepat di atas kode </body> tadi.

<ul id='menusisi'>
<li class='beranda'><a href='LINKSOBAT' title='Beranda'></a></li>
<li class='tentang'><a href='LINKSOBAT' title='Tentang'></a></li>
<li class='cari'><a href='LINKSOBAT' title='Cari'></a></li>
<li class='alat'><a href='LINKANDA' title='Alat'></a></li>
<li class='rssfeed'><a href='LINKSOBAT' title='RSS Feed'></a></li>
<li class='komentar'><a href='LINKSOBAT' title='Komentar'></a></li>
<li class='kontak'><a href='LINKSOBAT' title='Kontak'></a></li>
</ul>
Simpan template sobat dan lihat hasilnya. Selamat mencoba semoga berhasil dan dapat bermanfaat.

KETERANGAN!!

Ubahlah LINKSOBAT dengan keinginan link Sobat.
Ubahlah keterangan didalam tag title (misal; title='Beranda' di ubah menjadi title='Home') sesuai dengan keinginan anda.

Baca Selengkapnya»»

Membuat Tampilan Template 3D

Membuat Template 3D, atau bagaimana caranya membuat agar template kita terlihat 3D. cara untuk membuat bagian dari body template kita agar terlihat 3D, yaitu kita hanya perlu menambahkan nilai ukuran border dan perpaduan warna pada bagian template tersebut. Ada juga cara lainnya, yaitu dengan memasukan background gambar yang sudah berbentuk 3D pada bagian template tersebut.

Yang akan Kita bahas kali ini, yaitu tentang cara membuat agar tampilan dari template kita terlihat 3D tanpa menggunakan Background gambar. Contohnya untuk membuat bagian sidebar, Headder, dll dari template tersebut terlihat 3D seperti contoh pada gambar dibawah ini.

Agar bagian template kita terlihat 3D seperti pada contoh gambar diatas. caranya adalah sebagai berikut ini.

Misalnya kita akan membuat bagian sidebar kita terlihat 3D. yang harus sobat lakukan adalah Edit kode CSS sidebar tersebut pada halaman HTML template kamu dengan memberi nilai ukuran border dan paduan warna pada background dan setiap sisi sidebar itu, contohnya :

#sidebar1 .widget {
margin: 0px 0px 5px 0px;
padding: 5px 5px 5px 5px;
background: #0000c0; /*-Background = Biru --*/
border-top: 10px solid #6666ff; /*-Border atas = Biru Muda-*/
border-bottom: 10px solid #6666ff; /*-Border Bawah = Biru Muda-*/
border-left: 10px solid 1414b0; /*-Border kiri = Biru Tua--*/
border-right: 10px solid 1414b0; /*-Border kanan = Biru Tua--*/
}
Terus misalnya pada bagian Header sidebar tersebut ingin dibuat 3D juga, caranya yaitu :

#sidebar1 h2 {
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
text-align: center;
color: $sidebar1HeaderColor;
font: $sidebarHeaderFont;
text-transform: none;
text-decoration: none;
background: #cc0000; /*-Background = Merah --*/
border-top: 5px solid #ff7070; /*-Border atas = Merah Muda--*/
border-bottom: 5px solid #ff7070; /*----Border Bawah = Merah Muda-*/
border-left: 5px solid #b00000; /*-Border kiri = Merah Tua-*/
border-right: 5px solid #b00000; /*Border kanan = Merah Tua--*/
}

Maka hasilnya akan seperti pada gambar dibawah ini :

Pada dasarnya untuk membuat bagian template tersebut agar terlihat 3D, kita hanya perlu memberi ukuran border dan perpaduan warna saja, silahkan Sobat coba praktekkan tips ini pada template Sobat. Dan bila Sobat berminat dengan template 3D karya Kang Fatur, Sobat bisa lihat contoh templatenya dan mendownloadnya disini. Saya rasa cukup sekian dulu postingan Saya tentang cara membuat tampilan template 3D kali ini.

Untuk para sobat yang perlu kode warana V3 silahkan klik disini

Selamat mencoba semoga dapat bermanfaat dan salam Blogger mania.

Baca Selengkapnya»»

DC Community

Pages

Minggu, 08 Januari 2012

Cara Menyembunyikan Widget Follow

Selasa, 27 Desember 2011

Tips cara blog bisa masuk google search engine, yahoo, dsb

Membuat Salam Pembuka Unik Di Blog

Senin, 26 Desember 2011

Cara Membuat Efek Kembang Api Pada Blog

Cara Membuat Navigasi Halaman (seperti punya google)

Kamis, 11 Agustus 2011

Cara membuat tulisan berbayang (shadow) pake CODE HTML

Jumat, 15 Juli 2011

Cara Mengganti Tulisan Newer Post, Older Post, dan Home

Cara Membuat Related Post / Artikel Terkait di bawah Postingan Blog

Rabu, 13 Juli 2011

Cara Membuat Label Cloud Berputar

Cara Membuat widget Recent Post / Postingan Terbaru

Selasa, 12 Juli 2011

Cara Membuat Google Site

Rabu, 06 Juli 2011

Menu Navigasi Slide Out / Slide Out Navigation

Membuat Tampilan Template 3D

Popular Posts

Tentang

Artikel

NyaNg Comment di DC :