Tampilkan postingan dengan label Blogger's. Tampilkan semua postingan
Tampilkan postingan dengan label Blogger's. Tampilkan semua postingan
Kode Warna (HTML Color Code)

Kode Warna (HTML Color Code)




Untuk mengambil kode HTML dari warna yang sobat inginkan, silahkan soba klik Menu Gir Warna yang berputar, setelah itu sobat perhatikan kotak yang berwarna yang berada di sebelah kanan Gir tersebut. Disana terdapat kode seperti ini :#660099, #47006B, #EABFFE, dan #D580FE, itu adalah kode warnanya, jadi sobat blogger tinggal copy paste kode tersebut di blog sobat.

Profesional Design Blog AboutMe

Apa yang baru didalamnya?

Desain ini meliputi 4 fitur yang paling penting yaitu:

  1. Semua Widget Blogger dibawah judul Pos dan di bagian bawah disimpan tersembunyi
  2. Tiga Baris keren yang menjelaskan konsep seluruh situs anda yaitu 1 - Bio Anda, 2 - Tujuan Blog dan 3 - Penutup.
  3. Pidato Voice Pasif digunakan untuk membuat benda terlihat profesional
  4. Ini Memuat dalam detik


Jika Anda pikir Anda benar-benar membutuhkannya seperti itu maka saya yakin Anda akan senang untuk membaca tutorial di bawah ini.

Cara membuat halaman "About Us" desain baru


Dibawah Ini scripnya silahkan copas bagi yang membutuhkan

<div style="border: #686868 5px solid; padding: 10px; -moz-border-radius: 15px; -webkit-border-radius: 15px"> <div style="text-align: justify"><img style="display: inline; float: right" align="right" src="ADD IMAGE LINK HERE" width="128" height="128" /></div> <div style="text-align: justify"><font color="#666666"> ADD PARAGRAPH-1 TEXT HERE </font></div> </div> <div style="text-align: justify">&#160;</div> <div style="border: #686868 5px solid; padding: 10px; -moz-border-radius: 15px; -webkit-border-radius: 15px"> <div style="text-align: justify"><img style="display: inline; float: right" align="right" src="ADD IMAGE LINK HERE" width="128" height="128" /></div> <div style="text-align: justify"><font color="#666666"> ADD PARAGRAPH-2 TEXT HERE </font></div> </div> <div style="text-align: justify">&#160;</div> <div style="border: #686868 5px solid; padding: 10px; -moz-border-radius: 15px; -webkit-border-radius: 15px"> <div style="text-align: justify"><img style="display: inline; float: right" align="right" src="ADD IMAGE LINK HERE" width="128" height="128" /></div> <div style="text-align: justify"><font color="#666666"> ADD PARAGRAPH-3 TEXT HERE </font></div> </div> <div style="text-align: justify">&#160;</div>


Memasang Lagu di Blog Autoplay Via SoundCloud

Sudah lama tidak post , heheh , ok langsung saja , di sini mungkin sudah banyak yang bisa memasang lagu di blog , tapi tidak sedikit juga yang belum bisa , begini caranya :

  • Masuk ke sini dulu SoundCloud
  • Lalu Klik Sign Up bagi yang belum punya akun [daftar menggunakan akun fb juga bisa]
  • lalu jika sudah kita upload lagu kita , bisa juga dengan mancari nya , tapi biar tidak COPAS mending upload manual saja :) 
Lihat Screenshoot Dibawah ini
  • Lalu akan Muncul "Choose File" , kalau sudah selesai Upload , akan seperti ini
Lihat Screenshoot Dibawah ini

  • Edit Sesuai Keinginan , Dan Save
Lihat Screenshoot Dibawah ini

  • Nanti Muncul Tampilan Seperti ini
Lihat Screenshoot Dibawah ini
  • Pilih Share - lalu edit Widget
Lihat Screenshoot Dibawah ini

  • Akan Muncul tampilan Seperti ini , Kita pilih FLASH lalu sesuaikan dengan keinginan mu, lalu Copas kode yang untuk BLOGSPOT

Lihat Screenshoot Dibawah ini

Sekarang di SoundCloud sudah beres , kita tinggal pasang di blog caranya :

  1. Masuk ke blogger masing-masing
  2. Pilih Tata Letak 
  3. Lalu Tambah Gadget
  4. Pilih yang Html/ javascript
Lihat Screenshoot Dibawah ini

 5. Buka dan paste code mu di sana dan Save
Lihat Screenshoot Dibawah ini


Cukup Mudah kan ?, Bagi yang tidak mau repot Upload Lagu , bisa Search Langsung kok , atau bisa juga make lagu Dewa 19- Risalah hati  kalau masih bingung silahkan Berkomentar dengan Sopan dan Santun ,

Widget Related Post Unik Dengan Summary (Deskripsi+Image)


Widget Related Post Unik Dengan Summary (Deskripsi+Image)
Widget Related Post Unik Dengan Summary (Deskripsi+Image) - Hallo selamat malamsahabat kucoba! Malam ini kang salman akan mengenalkan sebuah widget blog terbaru untuk artikel berkaitan. Berbeda dengan versi sebelumnya yang pernah kang salman ulas yaitu Related Post With Icon for Blogger danMembuat Related Post Dengan Fungsi Scroll. Kali ini widgetnya banar-benar unik dimana pengunjung tidak hanya melihat judul atau fotonya saja tetapi mereka juga bisa membaca sekilas terlebih dahulu sebelum memutuskan untuk mengklik link / artikel tersebut.

Demonya seperti ini:


Sebenarnya widget ini lebih tepat di katakan label thumb.
Mau Tau Cara Pasangnya?
Langsung aja:

Langkah1:
1. Login Blogger  >  Rancangan >  Edit Template  >  Copy kode berikut dan simpan di atas </head>

<style>
#related_posts {
}
#related_posts h4 {
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    color: #333;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 20px;
    margin: 0 0 5px;
    padding: 5px 10px;
background:#ccc;
}
#relpost_img_sum {
/* height: 320px;
overflow: auto; */
margin: 0;
padding: 0px;
line-height: 16px;
}
#relpost_img_sum:hover {
background: none;
}
#relpost_img_sum ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#relpost_img_sum li {
border: 1px solid #ccc;
background:#f0f0f0;
margin: 0 0 5px;
padding: 5px;
height: 65px;
list-style: none;
}
#relpost_img_sum .news-title {
display: block;
font-weight: bold !important;
}
#relpost_img_sum .news-text {
display: block;
text-align: justify;
font-weight: normal;
text-transform: none;
color: #333;
}
#relpost_img_sum img {
float: left;
margin-right: 14px;
padding: 4px;
border: solid 1px #ccc;
width: 55px;
height: 55px;
background:#fff;
}
</style>
<script type="text/javascript">
//<![CDATA[
var relnum = 0;
var relmaxposts = 5;
var numchars = 165;
var morelink = "readmore";
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\' I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... <a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a><17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnum|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxposts|li|span|text|split|join|relpostimgthum|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|relatpost|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
//]]>
</script>
Langkah 2
Simpan kode ini di bawah <data:post.body/>

<div id="related_posts">
<h4>Related Posts</h4>
<script src="/feeds/posts/default/-/Widget?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50" type="text/javascript">
</script>
<ul id="relpost_img_sum"><script type="text/javascript">
relatpost();
</script> </ul>
</div>

Keterangan:
Tulisan warna merah adalah nama label yang ingin di tampilkan.

var relmaxposts = jumlah artikel yang di tampilkan
var numchars = panjang summary (deskrisi yang di tampilkan)

width: 55px; = ukuran gambar
height: 55px; = ukuran gambar

Cara paling mudah adalah dengan mengcopy semua kode di atas ke dalam widget di sidebar kita
1. Pilih Rancangan > Tambah Widget  >  Pilih HTML/Javascript
2. Paste semua kode di atas baik langkah1 dan langkah2
3. Simpan widget dan lihat hasilnya.

Semoga bermanfaat dan silakan komentar sesuai topik.

Penulis: Widget Related Post Unik Dengan Summary (Deskripsi+Image)
Kang Salman

Kategori

Kategori