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! :)

Read More

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.

Read More

Well We Blood - Kisah Kita

Kisah kita

(*)

Berjalan dengan sejuta mimpi

Dengan langkah yang tak pasti

Owh kasih

Hadapi semua masalah

Dengan rasa tenang

Agar semua terselesaikan

            Jangan kau hadapi semua dengan egomu

            Jangan kau hadapi semua dengan sakitmu

            Jangan kau sakitiku

Reff

Lihatlah luka ini

Yang Sakitnya abadi

Yang terbalut hangatnya bekas pelukmu

Simpan saja semua

Cerita tentang kita

Takan ada lagi kisah diantara kita

(**)

            Bawalah diriku kedalam duniamu

            Agar aku dapat merasakan cinta darimu  (2X)

BACK TO REFF

Read More

How To Remove Blogger Attribution Gadget in Blogger Blog

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

Some of the templates in blogger, we find some tools that can not be deleted, and unfortunately, these tools can distort the form template.The reason is that the template designer making tool locked so as to protect it, and to unlocked it 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 Attribution
5. We change the option 'true' to option 'false' ( Look the screen )

6. To become like this <b:widget id='Attribution1' locked='false' title='' type='Attribution'>

7. Finally click on Save template

Now go to gadget which you want remove it.

Read More

PENGALAMAN DI UNIVERSITAS GUNADARMA eps.1

Langsung aja yuk,saya bercerita awal mula saya di UNIVERSITAS GUNADARMA.waktu itu hari sabtu tanggal 04 May 2013 saya datang ke UNIVERSITAS GUNADARMA untuk awal pendaftaran.begitu saya masuk gerbang UNIVERSITAS GUNADARMA suasananya sangat asing.maklum lah baru awal pertama dateng ke kampus jadi parno.hahahah....

berjalan sendiri sambil tengok kanan kiri,agak malu sihh...tapi di coba untuk tidak malu.hahahahha.... masuk ruangan pendaftaran langsung saya tanya2 sama wanita yang ada di sebelah saya, wanita itu mahasiswi  UNIVERSITAS GUNADARMA. Cantik lagihh.. :D  tanya itu lah, tanya apa lah... semua tentang UNIVERSITAS GUNADARMA.kebetulan saya tertarik.ya sudah saya langsung saja mendaftarkan diri untuk masuk ke UNIVERSITAS GUNADARMA. keluar ruangan dari tempat pendaftaran saya keliling dulu untuk melihat isi Gedung kampus UNIVERSITAS GUNADARMA ternyata sangat lengkap dengan fasilitas. Hotzone pun banyak tersebar di area kampus.

O iyaa,, saya kuliah sambil bekerja ya.jadi saya ambil kuliah malam. Setelah saya melakukan pendaftaran saya menunggu jadwal tes dari pihak kampus dari SMS jadwal tesnya hari Rabu, 08 May 2013. saya tidak bisa hadir di karenakan bekerja. saya meminta kepada pihak kampus agar ada dipensasi. Akhirnya saya diberi jadwal tes hari Sabtu,11 May 2013. Saya tes jam 09.30 ,tesnya Cuma pilihan ganda,tapi yang saya heran tesnya melalui PC (Personal Computer) .bisa ya soal Tes di masukan ke PC (Personal Computer)…?dari pihak yang mengawasi tes bilang.”tunggu hasil tesnya dari handphone ya” kelamaan saya menunggu hasil tes kemduian hari saya mendatangi pihak kampus, saya mendapat grade B. Lumayan lah dari pada “lumanyun” :D .Melunasi pembayaran untuk Smester 1 di bank DKI yang terletak di area kampus.

Kamis, 22 agustus 2013 di suruh hadir untuk mengikuti  “Pengenalan Program Studi” mengenakan kemeja putih dan celana bahan berwarna hitam. Layaknya seorang yang ingin melamar kerja,heheh… datang pagi2 jam 07. Lihat wanita yang seger,karna masih pagi jadi masih seger aura wanitanya.heheh...

Masuk ke ruangan besar seperti ruangan BIOSKOP seru sih AC nya juga lumayan dingin, awal mula dari situ saya langsung dapat teman banyak.SKSD aja sama orang lain,heheh…

Sekian dulu ya cerita dari mimin,ntar di lanjut lagih..masih kerja nih jadi takut ketauan.heheheh … see you :D

Read More

WELL WE BLOOD

KEMBALILAH PADANYA

( * )

Seandainya dulu

Kita tak pernah bertemu

Mungkin semua ini takan pernah terjadi

Mungkin sudah takdirku

Memang harus begini

Derita dan perih selalu terjadi

                (**)

                Apakah aku salah

                Hingga membuatmu pergi

                Jauh dari sisiku

                Takan Pernah Tergantikan

                Senyum dan rayu manismu

                Yang pernah kau beri padaku

REFF
Kembalilah padanya

jika memang kau cinta padanya

lupakan saja aku dan buang semua harapanmu padaku

Pergi saja dariku

Dan lupakan semua kenangan

Yang pernah kauberi padaku dan

Terukir dalam hatimu

Hattimu…

Read More

How to Protect Your Adsense Account from Invalid Clicks

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

Perhaps the majority of Google AdSense publishers are subjected to the so-called illegal clicks and the reason is that some of the hate and envious are trying to cancel your adsense account by clicking on your ads several times or use a program that automatically  to close your adsense account then he feels happy , There are also ways like showing your ads on sites contrary to the terms of Google Adsense account , so in this post we will learn how to protect your adsense account from those invalid clicks that by reporting for it.

First fill up the invalid contact form. (look the screen )

After filling out the form click on submit.

Read More