Contact online

This is default featured slide 1 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

Friday, September 27, 2013

Keterkaitan Sistem Informasi & Ilmu Sosial Dasar

Tugas Softskill ke-1
OKY SETYA KELANA
1KA39

1. Pengertian Ilmu Sosial Dasar
Ilmu sosial dasar adalah ilmu-ilmu sosial yang dipergunakan dalam pendekatan, sekaligus sebagai sarana jalan keluar untuk mencari pemecahan masalah-masalah sosial yang berkembang dalam kehidupan masyarakat. Seperangkat konsep-konsep dasar dan pengetahuan dasar ilmu-ilmu sosial secara interdisplin atau multidisiplin dipergunakan sebagai alat bagi pendekatan dan pemecahan problema-problema yang timbul dan berkembang dalam masyarakat.

Tujuan dari Ilmu Sosial Dasar adalah membantu perkembangan wawasan pemikiran dan kepribadian mahasiswa agar memperoleh wawasan pemikiran yang lebih luas dan ciri-ciri kepribadian yang diharapkan dan setiap anggota golongan terpelajar Indonesia, khususnya berkenaan dengan sikap dan tingkah laku manusia dalam menghadapi manusia lainnya.


2. Pengertian Sistem Informasi

Sistem Informasi adalah aplikasi komputer untuk mendukung operasi dari suatu organisasi: operasi, instalasi, dan perawatan komputer, perangkat lunak, dan data. Atau dengan kata lain, system informasi adalah sekumpulan komponen dari informasi yang saling terintegrasi untuk mencapai tujuan yang spesifik. Komponen yang dimaksud adalah komponen berupa input, model, output, teknologi, basis data (data base), kontrol atau komponen pengendali.


3. Keterkaitan Sistem Informasi & Ilmu Sosial Dasar

Banyak hubungan yang dapat diambil antara system informasi dan ilmu social dasar. Seperti pengaksesan informasi secara online sangat bermanfaat bagi IPTEK. Dalam IPTEK internet menjadi kebutuhan sehari-harinya. Karena melalui internet maka orang bisa mengetahui ilmu pengetahuan yang kita tidak ketahui menjadi tahu. Kemudian manfaat yang lainnya internet bagi IPTEK, yaitu mempelajari teknologi-teknologi yang berkembang saat ini. Dan juga bisa membantu dalam menyelesaikan tugas-tugas sekolah yang tugasnya membuat laporan-laporan lainnya. Pada masa sekarang ini Internet rasanya sudah tidak asing lagi di kehidupan masyarakat pada zaman modern ini. Bahkan pada saat anda membaca tulisan ini, itu berarti anda sudah terhubung dengan internet. Internet sudah dikenal luas oleh kehidupan masyarakat, bahkan di segala aspek masyarakat dan di segala bidang kehidupan manusia.



Dampak positif yang ditimbulkan dari penggunaan internet terhadap kehidupan manusia sehari-hari adalah :

1. Penyebaran Informasi lebih cepat, luas dan mudah
Karena konsep internet yang dapat menghubungkan semua pengguna-nya dan dengan adanya mesin pencari (search engine) seperti google, yahoo, wikipedia, dan lain lain maka pengguna internet dapat menemukan informasi yang ingin didapatkan dengan cepat dan mudah. Dengan alasan ini internet sekarang menjadi media nomor satu dalam penyebaran informasi di antar Negara.

2. Memajukan kualitas dan kuantitas dalam dunia pendidikan
Dengan adannya fasilitas pendidikan yang dibangun di dunia internet seperti e-Learning maka penyebaran pendidikan menjadi lebih mudah, lebih atraktif dan lebih komunikatif. Sehingga dapat meningkatkan kualitas dan kuantitas dalam dunia pendidikan.

3. Memudahkan Birokrasi dalam pemerintahan

Sering sekali masyarakat mengeluh terhadap birokrasi yang panjang dan sulit dalam urusan pemerintaBahkan sampai saat ini sifat copyleft lebih banyak daripada copyrhan, tapi dengan adanya pemanfaatan di dunia internet maka birokrasi pemerintahan menjadi lebih mudah dan cepat, contohnya adalah penerapan sistem online terhadapt urusan pemerintahan, sehingga masyarakat tidak harus menhabiskan banyak waktu dalam mengurus kegiatan pemerintahan. Tapi di Negara yang masih berkembang seperti Indonesia pemanfaatan ini belum di gunakan secara maksimal.

4. Memajukan dunia bisnis
Tersedianya fitur-fitur di internet seperti e-mail daalam dunia bisnis sehingga dunia bisnis saat ini dapat menjadi lebih berkembang.

5. Mendukung kehidupan sosial dalam masyarakat

Pemanfaatan inilah yang sering dirasakan di kalangan dunia masyarakat terutama dalam kalangan pemuda, dengan adanya fasilitas di internet seperti e-mail, chating dan situs jejaring sosial (seperti facebook, friendster dan twitter) dapat menjadi terobosan baru di dalam kehidupan sosial masyarakat. Karena hal ini dapat menjadi sarana penghubung antar manusia tanpa harus bertatap muka.


Walaupun begitu banyak dampak positif yang didapatkan dari internet, ada pula dampak negatif yang ditimbulkan, antara lain :

1. Pelanggaran Hak Cipta
Jelas sekali dengan adanya internet pembajakan dalam berbagai bidang seperti teknologi, musik, film menjadi lebih mudah. Bahkan sampai saat ini sifat copyleft lebih banyak daripada copyright.

2. Kasus Pornografi

Pada tiap tahunnya semenjak kelahiran internet situs yang memuat informasi pornografi semakin meningkat, tentunya ini dapat merusak kehidupan manusia tentunya di kalangan anak di bawah umur, karena internet dapat diakses oleh siapapun.

3. Kecanduan Internet
Melalui game online yang terintegrasi dengan internet sering sekali banyak orang (terutama anak dibawah umur) kecanduan untuk memainkan game ini melebihi batas.

4. Kurang Bersosialisasi Terhadap Masayarakat Sekitar
Kehidupan sosial masyarakat juga ikut berdampak akibat perkembangan informasi tersebut, terutama pada perkembangan internet. Dampak dari pengaruh tersebut adalah kurangnya sikap gotong-royong dari masyarakat, individualisme terlihat pada masyarakat kota. Hubungan sosial yang terjalin di masyarakat kita bisa hanya dengan menggunakan via hand phone atau via email. Memang cara seperti itu praktis, cepat dan mudah. Tapi tanpa sadar mereka tidak dapat bersilaturahmi secara langsung.

Contoh lainnya adalah aplikasi komputer yang dipakai di pemerintahan. Seperti aplikasi pengolahan data ini diperkirakan meliputi bidang permasalahan kenaikan pangkat, kenaikan gaji berkala, mutasi pegawai, penentuan masa pension dan beberapa permasalahan penting lainnya dalam bidang kepegawaian.


REFERENSI  : http://dinibe2k.blogspot.com

Monday, September 16, 2013

lirik dan chord gitar jendral kantjil - bertahan

jendral kantjil - bertahan



Intro : (Crunch Guitar) C F Am G

(Breaking in) C F Am G

C F Am
bersama kita lewati berdua masa masa yang tak pernah indah
G
waktumu bukan untukku
C F Am
terbuang semua cerita kisah kasih diantara kita
G
yang harusnya tak pernah tercipta

C F Am G

C F Am
ku bersabar menunggu semua yang kau berikan kepada cinta
G
walau hanya sebuah cerita
C F Am
kau coba buat diriku bahagia walau itu hanya sementara
G
trimakasih kenangan bersamamu

Bridge :
Am G F Am G F G
Hilang semua harapanku untuk hidup bersama dirimu

Reff :

C F
Lemah... diriku bertahan
Am
untuk cinta yang tak pernah ada
G
haruskah berakhir cerita
C F
Bertahan... menahan semua jeritan
Am
harusnya ini kau dengarkan
G
cintaku untuk dirimu untuk slalu bersamamu

Interlude : C F Am G 2x
Back To Reff .

Encore : C F Am G 2x
F

Friday, September 13, 2013

How to Add a Shining CSS3 Horizontal Menu For Blogger

DKDE || blogpemula2019.blogspot.com || okysetyakelana.blogspot.com 

Horizontal menu best alternative option for labels or sections.
The importance of horizontal menu including: reducing the space occupied by the sections/labels and distort the appearance of blog, coordinate and beautify the style of blog.
This widget is designed by CSS3 technology, And you can add this gadget to your blog with very easy way:


Adding the widget to Blogger blog:
1. Go to Blogger Dashboard  → Layout → click on "Add a gadget".
2. Select "html/java script" and add the code given below:
<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbEFbqP2hiX2K2t_1sgGiTbnIpMKNiHgxbNMkFqxIMmeteAAAAwbk32mDnRWuudsce85wqg6OXopY6NwkvJSmwqy5HYZzVZxNuKxTryqyEmEq_d_3sY9QAX0quh4NtJPNI9VNoRL7zR6E/s1600/noop-menu-blogger.png") repeat scroll 0 0 transparent;border:1px solid #1357AF!important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style>
<a href="http://bbloggertutorials.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4o480ieFHFfbACbkBARdijGXFCHkVNjoBLBCWYrSYJ2WN7SNunflW9q4Q7DpjjKmuiOJoCpmBL4ZilS6YUOtVBNe5-m2IeXWe1MYnkjVLPSkzxg_do6jIjotYJ9TP40nz3fcJIdmaZ-M/s1600/1x1juice.png" /></a>
<div class="wg-shining-menu">
    <ul class="menu">
        <li><a href="http://bbloggertutorials.blogspot.com/">Home</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="http://bbloggertutorials.blogspot.com/p/blogger-tools.html">Products</a></li>
        <li><a href="http://bbloggertutorials.blogspot.com/p/contact-me.html">Contact</a></li>
        <li><a href="http://bbloggertutorials.blogspot.com/p/sitemap.html">Tips</a></li>
        <li><a href="http://bbloggertutorials.blogspot.com/p/terms-and-conditions.html">Tricks</a></li>
        <li><a href="#">About</a></li>
    </ul>

</div>
NOTE
3. - Replace the URL in blue with your own.
    - Replace the tab name in red with your own.
4. Finally click on save.
Now you can see the result  (o)

Tuesday, September 10, 2013

Remember Of Today - Kaulah Segalanya

REMEMBER OF TODAY - KAULAH SEGALANYA

kaulah segalanya yang tak pernah sirna 
kitalah yang terkuat hiraukan kata mereka
janganlah kau melihat dari warna kulitnya siapalah mereka dan tutur bahasanya
kita yang ada disini tak kenal pilah pilih kita berbaur bersama berkumpul dan bernyanyi bahagia
angkat keras suaramu dan ikuti suaraku wooo wooo
agar semua tau suara hati kita wooo wooo

terangilah hidupmu dan jaga cahaya kalian untuk tetap bersinar di hati kala kelam
rangkul yang ada di sebelahmu janganlah kau ragu kawan satu kan dan berteriak

REFF :
wooo..lepaskan semua semangatmu
wooo..buang semua rasa takutmu
wooo..hempaskan keras suaramu
wooo..kaulah segalanya untukku

tatap mukaku kawan jangan pernah lupakan
satukan semua egomu hancurkan kesombongan
satukan tekad hatimu gabungkan jadi satu
dan ingat aku berkata bahwa persahabatan itu nyata.
terangilah hidupmu dan jaga cahaya kalian untuk tetap bersinar di hati kala kelam
rangkul yang ada di sebelahmu janganlah kau ragu kawan satu kan dan berteriak

kembali ke REFF 2x

tunjukan pada mereka bahwa kita pun bisa melangkah bersama dan bukan bicara saja
tetaplah berlari jangan berhenti melangkah lihat diriku disini dan nilai kita sendiri
wooo wooo wooo wooo

kembali ke REFF

Remember Of Today - Hilang


 REMEMBER OF TODAY - HILANG

Dunia hari ini begitu tak berarti
 Tak berjalan cepat seolah tak peduli 
Lambat laun ku bertahan dengan hari ini 
Hari yang takkan pernah berakhir

Semua telah berubah sejalan dengan waktu
 Setiap detik berharga bagiku
Waktu pun ingin kuubah 
Kembali tertawa 
Aku hanya bisa menangis 
Aku tak bisa...

REFF: 

Maafkanlah diriku  
Atas semua kesalahan yang kuperbuat 
Selama ini kepada dirimu 
Aku berjanji akan melepasmu  
Dengan senyuman yang akan kau ingat  
Dan kau kenang sampai matiSelamanya...

Semua telah berubah sejalan dengan waktu 
Setiap detik berharga bagiku
Waktu pun ingin kuubah 
Kembali tertawa 
Aku hanya bisa menangis 
 Aku tak bisa...

Back to REFF

Lupakanlah semua kenangan ini 
Hancurkanlah semua mimpi-mimpi 
Jangan pernah kembali 
Dan takkan pernah kembali
Dan janganlah kau pernah berikan aku satu harapan 
Dan karena ku ingin 
Pergi, hilang dan lupakan...!!!

Back to REFF
Selamanya....

Monday, September 9, 2013

Remember Of Today - Lewati Semua

REMEMBER OF TODAY - LEWATI SEMUA

 #Intro : C F Am F (2x)
Am F (2x) C
Lihat harimu yang indah
Dan bersinar dengan cerah
Untuk sekian lama kalinya
Dan keterpurukan merekah 

Hilangkan semua ingatan
Yang hanya membuatmu terjatuh
Seakan kau hanya keledai
Membodohi diri sendiri
Tunjukkanlah jati dirimu semula
Kepalkan tanganmu dan raihlah cita
citamu
 
#Chorus :
Kuyakin kaupun bisa melewati semua
Rintangan yang kan menghadang
untuk hadang segala 
Pengorbanan dirimu 
demi perbuatannya
Kan kau dapatkan xxxx yang kau
inginkan
 #Interlude : C Am (2x)
Tunjukkanlah jati dirimu semula
Kepalkan tanganmu dan raihlah cita
citamu
#Chorus :
Kuyakin kaupun bisa melewati semua 
Rintangan yang kan menghadang
untuk hadang segala
Pengorbanan dirimu 
demi perbuatannya
Kan kau dapatkan xxxx yang kau
inginkan

Kuyakin kaupun bisa melewati semua
Rintangan yang kan menghadang
untuk hadang segala
Pengorbanan dirimu 
demi perbuatannya
Kan kau dapatkan xxxx yang kau
inginkan

Remember Of Today - Pergi, Hilang Dan Lupakan

REMEMBER OF TODAY - PERGI,HILANG DAN LUPAKAN

C G Am
Dunia hari ini begitu tak berarti
F G
Tak berjalan cepat seolah tak peduli
C G Am
Lambat laun ku bertahan dengan hari in
i
F G
Hari yang takkan pernah berakhir
C G Am
Semua telah berubah sejalan dengan waktu

F G

Setiap detik berharga bagiku
C G 
Waktu pun ingin kuubahAm
Kembali tertawa

F
Aku hanya bisa menangis

G
Aku tak bisa...

REFF:


C G 
Maafkanlah diriku
Am
Atas semua kesalahan yang kuperbuat

F G
Selama ini kepada dirimu

C G
Aku berjanji akan melepasmu 

Am
Dengan senyuman yang akan kau ingat
F
Dan kau kenang sampai mati
G
Selamanya...

C G Am
Semua telah berubah sejalan dengan waktu

F G
Setiap detik berharga bagiku

C G
Waktu pun ingin kuubahAm
Kembali tertawa


Aku hanya bisa menangis

G
Aku tak bisa...

Back to REFF

Am G F Am G C 2X


Am G
Lupakanlah semua kenangan ini
Em
Hancurkanlah semua mimpi-mimpi
Jangan pernah kembali
C
Dan takkan pernah kembali

Am G Em
Dan janganlah kau pernah berikan aku satu harapan

G
Dan karena ku ingin Pergi, hilang dan lupakan

Back to REFF


C G Am F G
Selamanya....

Sunday, September 8, 2013

How to Add Metro Style Social Widget for Blogger

DKDE || blogpemula2019.blogspot.com || okysetyakelana.blogspot.com 

Today I will give you a very nice addition to your blog and frankly I liked this widget a lot. It is a social networking sites widget on the form of Metro as in windows 8.

Adding the widget in Layout
1. Go to Blogger Dashboard  → Layout → click on "Add a gadget".
2. Select "html/java script" and add the code given below.
<div class="metro-social">
<li><a class="fb" href="Your Facebook URL here"></a></li>
<li><a class="tw" href="Your Twitter URL here"></a></li>
<li><a class="gp" href="Your GooGle + URL here"></a></li>
<li><a class="fd" href="Your FeedBurner URL here"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs
Web link to gadget code: 
Distributed under license CC BY-NC-ND 3.0 INT
Please keep license information intact while using this widget*/
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:140px;height:70px}
.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c}
</style>
<br />
3. Replace "Your ..... URL here" with Your URL.
4. Click on save.
I hope you enjoy & happy blogging! :)

Saturday, September 7, 2013

How To Add Related Posts Widget To Blogger With Summary

DKDE || blogpemula2019.blogspot.com || okysetyakelana.blogspot.com 

I wrote a previous blog post about How To Add Related Posts Widget To Blogger With Thumbnails.We already know the importance of the widget, but in this tutorial I'll show you the best related posts widget to your blog , If you want to add this widget to your blog please follow me:

1. Go to Blogger Dashboard  --> Template
2. Please! download  a copy of your template
3. Now click on Edit HTML
4. Use Ctrl+F to find </head>
5. Then copy and paste the below code just above/before it ( </head> ):
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;

var relatedPostsNum = 4; // number of entries to be shown
var relatedmaxnum = 75; // the number of characters of summary
var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqlxR_s3d8b4Wy-KVnviCQuGreEZYMQ8Pe-FsTTTNxvyaJUxi26J0kU-ZGzp0-pZewVIxCPDzpt8y4PqJYiqtBLM-Amzzwb_by2SnQzNi6I4Wz2BMoNd12xxPOIiYQmNSTqjt5a4f-0SEm/s1600/no_image.jpg"; // default picture for entries with no image

function readpostlabels(json) {
  var entry, postimg, postcontent, cat;
  for (var i = 0; i < json.feed.entry.length; i++) {
    entry = json.feed.entry[i];
    if (i==json.feed.entry.length) { break; }
    relatedTitles[relatedTitlesNum] = entry.title.$t;
    postcontent = "";
    if ("content" in entry) {
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      postcontent = entry.summary.$t;
    }
    relatedpSummary[relatedTitlesNum] = removetags(postcontent,relatedmaxnum);
    if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url;
    } else {
      postimg = relatednoimage;
    }
    relatedThumb[relatedTitlesNum] = postimg;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        relatedUrls[relatedTitlesNum] = entry.link[k].href;
        break;
      }
    }
    relatedTitlesNum++;
  }
}
function showrelated() {
  var tmp = new Array(0);
  var tmp2 = new Array(0);
  var tmp3 = new Array(0);
  var tmp4 = new Array(0);
  for(var i = 0; i < relatedUrls.length; i++) {
    if(!contains(tmp, relatedUrls[i])) {
      tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i];
      tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];
      tmp3.length += 1; tmp3[tmp3.length - 1] = relatedpSummary[i];
      tmp4.length += 1; tmp4[tmp4.length - 1] = relatedThumb[i];
    }
  }
  relatedTitles = tmp2; relatedUrls = tmp; relatedpSummary = tmp3; relatedThumb = tmp4;
  for(var i = 0; i < relatedTitles.length; i++){
    var index = Math.floor((relatedTitles.length - 1) * Math.random());
    var tempTitle = relatedTitles[i]; var tempUrls = relatedUrls[i];
    var tempResum = relatedpSummary[i]; var tempImage = relatedThumb[i];
    relatedTitles[i] = relatedTitles[index]; relatedUrls[i] = relatedUrls[index];
    relatedpSummary[i] = relatedpSummary[index]; relatedThumb[i] = relatedThumb[index];
    relatedTitles[index] = tempTitle; relatedUrls[index] = tempUrls;
    relatedpSummary[index] = tempResum; relatedThumb[index] = tempImage;
  }
  var somePosts = 0;
  var r = Math.floor((relatedTitles.length - 1) * Math.random());
  var relsump = r; 
  var output;
  var dirURL = document.URL;

  while (somePosts < relatedPostsNum) {
    if (relatedUrls[r] != dirURL) {

      output = "<div class='relatedsumposts'>";
      output += "<a href='" + relatedUrls[r] + "' rel='nofollow'  target='_self' title='" + relatedTitles[r] + "'><img src='" + relatedThumb[r] + "' /></a>";
      output += "<h6><a href='" + relatedUrls[r] + "' target='_self'>" + relatedTitles[r] + "</a></h6>";
      output += "<p>" + relatedpSummary[r] + " ... </p>";
      output += "</div>";
      document.write(output);
      
      somePosts++;
      if (somePosts == relatedPostsNum) { break; }
    }
    if (r < relatedTitles.length - 1) {

      r++;
    } else {
      
      r = 0;
    }

    if(r==relsump) { break; }
  }
}
function removetags(text,length){
  var pSummary = text.split("<");
  for(var i=0;i<pSummary.length;i++){
    if(pSummary[i].indexOf(">")!=-1){
      pSummary[i] = pSummary[i].substring(pSummary[i].indexOf(">")+1,pSummary[i].length);
    }
  }
  pSummary = pSummary.join("");
  pSummary = pSummary.substring(0,length-1);
  return pSummary;
function contains(a, e) {
  for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
  return false;
}
//]]>
</script>

Note:
- To change the default picture, replace the URL in pink with your own
- For displaying more than 4 posts or less, replace modify the value in red (4)
To change the number of characters to be shown in posts summary, modify the value in blue (75)
5. Now Search the following code:
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
6. Just after it, copy and paste the below code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/>
  </b:if>
7. Now find the following code:
</b:includable>          
                <b:includable id='postQuickEdit' var='post'>
8. Then copy and paste the below code just above/before it
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='post-footer-line post-footer-line-4'>
    <div id='relatedpostssum'><div style='text-align: left; font-size: 15px; margin-bottom: 10px; font-weight: bold;'>RELATED POSTS</div>
      <script type='text/javascript'>showrelated();</script>
    </div>
    <div style='clear:both;'/>
  </div>
</b:if>
9.  Finally search for this tag:  ]]></b:skin>
10. Add below CSS code just above it,
<relatedsumposts {
  float: left;
  margin: 0px 5px;
  overflow: hidden;
  text-align: center;
  /* width and height of the related posts area */
  width: 120px;
  height: 210px;
}

.relatedsumposts:hover { 
background-color: #F3F3F3; -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.relatedsumposts img:hover {
-khtml-opacity:0.4;
-moz-opacity:0.4;
opacity:0.4;
}

.relatedsumposts a {
  /* link properties */
color: #linkcolor;
  display: inline;
  font-size: 10px;
  line-height: 1;
}
.relatedsumposts img {
  /* thumbnail properties */
margin-top: 2px;
  height: 82px;
  padding: 5px;
  width: 82px;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.relatedsumposts h6 {
  /* title properties */
  display: table-cell;
  height: 5em;
  margin: 5px 0 0;
  overflow: hidden;
  padding-bottom: 2px;
  vertical-align: middle;
  width: 130px;
}

.relatedsumposts p {
  /* summary properties */
border-top: 1px dotted #777777;
border-bottom: 1px dotted #777777;
color: #summarycolor;
  font-size: 10px;
  height: 4em;
  line-height: 1;
  margin: 5px 0 0;
  overflow: hidden;
  padding: 5px 0 15px 0;
  text-align: left;
}
Note:
-Modify the values in red to adjust the width (120) and height (210) of the widget area
-Replace #linkcolor with the hex value of your color to change the color of post titles
-To change the size of thumbnails, modify the values marked in pink (82)
-To determine the border roundness, modify the values in green (100)
-To change the color of the post snippet, change #summarycolor with color hex value
11. Now take a preview and save your template.

Search This Blog