Memasang Widget Mode Energy Saver untuk Blog

Senin, 02 Juli 2012


widget energy saver mode
Energy Saver Mode alias mode hemat energi adalah sebuah widget tambahan hiasan blog berupa tampilan hemat energi pada layar komputer jika online melebihi batas waktu yang telah ditentukan dan tidak ada pergerakan kursor maupun keyboard komputer. Buat sobat blogger yang ingin baterai laptopnya awet maupun listriknya hemat, bisa memasangnya di blog sobat.
Oke langsung saja kita ikuti tutorial cara membuat mode energy saver di blog.
Sebelum sobat mulai ini ada baiknya memback up template dulu.
1. Masuk ke akun blogger Dasbor>Template>Edit HTML> centang expand template widget
2. Cari kode </head>
3. Tepat di atas kode tadi masukkan kode berikut.
<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js"></script>
   Lalu simpan template

4.  Masuk ke Tata Letak > Tambahkan Gadget > pilih HTML Javascript, lalu Masukkan kode berikut.

<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js?time=120"></script>
    Simpan, Simpan Perubahan

Catatan;
  1. Tutorial ini menggunakan tampilan dasbor blogger terbaru.
  2. time=120 adalah waktu untuk mencapai mode hemat energi tadi, terhitung mulai kita membuka blog, sobat bisa mengaturnya 120 berarti sama dengan 120 detik (2 menit)
  3. Jika gagal atau tidak berfungsi silakan tambahkan kode di bawah ini tepat di bawah kode no. 3, yang mungkin bisa terjadi akibat konflik kode jquery. (Opsional)
<script>jQuery.noConflict();</script>
Mode energy saver sudah terpasang, silakan sobat lihat demonya di sini, tunggu selama 20 detik, karena saya atur selama 20 detik. Selamat mencoba.

Cara Membuat Random Post Versi News Headline Animasi


Blog Trik dan Tips akan memberikan tutorial cara membuat headline news random post dengan efek animasi seperti gambar disamping. Random post yang akan kita buat tidak hanya memuat judul posting namun ada beberapa elemen tambahan seperti judul blog, penulis, waktu penerbitan serta rincian posting (summary). Random post akan memuat artikel secara acak pada blog anda, dimana tiap judul artikel ditampilkan dengan animasi yang sangat keren. Nah jika sobat penasaran gimana dengan tampilannya mengapa tidak dicoba aja. Untuk itu langsung aja ikuti tutorialnya dibawah ini:

1. Login ke Blogger
2. Masuk ke Rancangan --> Edit Laman
3. Tambahkan Gadjet lalu pilih HTML/Javascript
4. Masukan kode dibawah ini pada gadjet tersebut

<style type="text/css">
.gfg-root {
width : 100%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 12px;
border: 1px solid #BCCDF0;
}

.gfg-title {
font-size: 13px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
}

.gfg-title a {
color : #3366cc;
}

.gfg-subtitle {
font-size: 12px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
margin-bottom : 0px;
}

.gfg-subtitle a {
color : #3366cc;
display:none !important;
}

.gfg-entry {
background-color : white;
width : 100%;
height : 6.9em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}

/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}

.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
margin-bottom : 5px;
display:none !important;
}

.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
margin-left : 5px;
margin-right : 5px;
}

.gfg-listentry-odd {
background-color : #F6F6F6;
}

.gfg-listentry-even {
}

.gfg-listentry-highlight {
background-image : url('garrow.gif');
background-repeat: no-repeat;
background-position : center left;
}

/*
* FeedControl customizations.
*/

.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 13px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
margin-bottom : 2px;
}

.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}

/*
* Easy way to get horizontal mode, applicable via js options to gadget.
*/

.gfg-horizontal-container {
position : relative;
}

.gfg-horizontal-root {
height : 1.5em;
_height : 100%;
position : relative;
white-space : nowrap;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 13px;
border: 1px solid #AAAAAA;
padding : 5px;
margin-right : 80px;
}

.gfg-horizontal-root .gfg-title {
font-weight : bold;
background-color: #FFFFFF;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
float : left;
padding-left : 10px;
padding-right : 12px;
border-right: 1px solid #AAAAAA;
}

.gfg-horizontal-root .gfg-title a {
color : #444444;
text-decoration : none;
}

.gfg-horizontal-root .gfg-entry {
width : auto;
height : 1.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 0px;
margin-left : 0px;
padding-left : 10px;
}

/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : 100%;
height : 100%;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
}

.gfg-horizontal-root .gfg-list {
display : none;
}

/*
* FeedControl customizations.
*/

.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
display : none;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-title {
color: #0000cc;
margin-right : 3px;
float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
display : block;
color: #AAAAAA;
}

.gfg-branding {
white-space : nowrap;
overflow : hidden;
text-align : left;
position : absolute;
right : 0px;
top : 0px;
width : 80px;
}

.gfg-collapse-open, .gfg-collapse-closed {
background-repeat : no-repeat;
background-position : center;
cursor : pointer;
float : right;
width : 17px;
height : 20px;
}

.gfg-collapse-open {
background-image : url('arrow_open.gif');
}

.gfg-collapse-closed {
background-image : url('arrow_close.gif');
}

.gfg-collapse-href {
float : left;
}

.clearFloat {
clear : both;
}
#feedGadget {
margin-top : 5px;
margin-left: auto;
margin-right: auto;
width : 300px;
font-size: 10px;
color: #9CADD0;
}
</style>
<noscript><a href="http://blogtrikdantips.blogspot.com" target="_blank">Blog Trik dan Tips</a></noscript>
<script src="http://www.google.com/jsapi/?key=internal-sample"
type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

<script type="text/javascript">

function showGadget() {
var feeds = [
{title:'title',
url:'http://blogtrikdantips.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},

];

new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true,
title: "Blog Trik dan Tips"});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<noscript><a href="www.blogtrikdantips.blogspot.com" target="_blank">Blog Trik dan Tips</a></noscript>
<div id="feedGadget">Loading...</div>
<div id="feedGadget"><a href="http://www.blogtrikdantips.blogspot.com" target="_blank">Click Here To Grab This Widget</a></div>

5. Untuk customize atau pengeditan widget tadi dilihat dibawah ini:
- kode berwarna biru adalah ukuran font
- kode berwarna merah adalah ukuran kotak widget
- kode berwarna hijau adalah judul blog dan url blog, ubah bagian tersebut sesuai blog anda

6. Simpan gadjet lalu lihat hasilnya

Demikianlah langkah Cara Membuat Random Post Versi News Headline Animasi untuk blog anda. Untuk widget ini membutuhkan loading yang sedikit lama jadi cobalah sabar untuk menunggu loadingnya. Sekian dan salam blogging

Cara memasang widget headline news



Pada hari ini kita akan membahas tentang bagaimana cara memasang widget headline news. Maksud headline news bukan berita melainkan menampilkan posting - posting yang baru di terbitkan oleh suatu blog. Jika ingin tahu bagaimana headline news itu bagaimana lihat demonya DISINI. Cara memasangnya tidak terlalu sulit bahkan dapat dikatakan Mudah. Berikut langkah - langkah memasangnya:

1. Login pada blog sobat
2. Tata Letak
3. Tambah Gadget
4. HTML/Javascript
5. copy kode di bawah ini

<script type="text/javascript">
var hn_url_blog = "http://alamatblogsobat.blogspot.com";
var hn_jumlah_post = 8;
var hn_warna_latar = "#F5F5F5";
var hn_warna_garis = "#000000";
var hn_posisi = "bottom";
var hn_tampilkan_judul = true;
var hn_backlink = true;
</script>
<script src="http://www.geocities.ws/reggy/postnew.js">
</script>
Ket: ganti tulisan yang berwarna merah dengan alamat blog sobat
6. Simpan dan lihat hasilnya

Selamat Mencoba!!! :D

Pengikut

 
Support : Creating Website | Johny Template | Dodhy Irawan™
Copyright © 2011. Blog Hacker Inside™ - All Rights Reserved
Template Created by Creating Website Inspired by Wonogiri cyber™
Proudly powered by Blogger