Simple Green Matriks Blogspot Template

Template Simple Green Matriks

Simple Green Matriks Blogspot Template - Pada Postingan ini Belajar Blog ingin Berbagi Template ini yang merupakan template default dari blogger yaitu minima tentunya tetap template ini sangat sederhana. Pada sebelumnya saya sudah berbagi Simple Dark Style SEO Blogspot Template ,yang sederhana dan masih banyak kekurangan, tidak jauh dengan template yang akan share ini merupakan template tugas kuliah saya sekitar tahun 2008 yaitu Blog Aktualisasi Diri, tidak banyak kelebihan dari template yang kebetulan hanya template Tugas Kuliah. adapun fitur-fiturnya sebagai berikut:

• Template 2 Kolom
• SEO Friendly
• Loading Cepat
• Auto Readmore 

 DEMO | DOWNLOAD

XDownload Template Free

File simplegreenmatriks.rar Server 1 [ 18 KB ] via 4shared

Semoga suka

Sekian dulu sobat blogger, jika ada yang ingin dipertanyakan mengenai template ini, silahkan berkomentar dibawah :) Simple Green Matriks Blogspot Template

Link Download template "Simple Green Matriks Blogspot Template" Telah Diupdate, Enjoy! :)

Update : Password :  tutorialbelajarblogger.blogspot.com 

Simple Dark Style SEO Blogspot Template

Simple Dark Style SEO Blogspot Template - Template ini merupakan rancang khusus dari template Default Juragan, yaitu Thesis SEO Blogspot Template dan tentunya tetap mempertahankan SEO Friendly dari template juragan, adapun fitur-fiturnya sebagai berikut:

• Template 2 Kolom
• SEO Friendly
• Meta Tag Dinamis
• Loading Cepat
• Auto Readmore
• Tombol Button
• Qucklink ke Kotak Komentar
• Related Post/Artikel terkait 

 DEMO | DOWNLOAD

XDownload Template Free

File simpledarkstyle seo.rar Server 1 [ 18 KB ] via 4shared

Semoga suka

Sekian dulu sobat blogger, jika ada yang ingin dipertanyakan mengenai template ini, silahkan berkomentar dibawah :)

Link Download template "Simple Dark Style SEO Blogspot Template" Telah Diupdate, Enjoy! :)

Password : ok3darmadiganteng

Thesis SEO Blogger Template

Thesis SEO Blogger Template - Sekedar Ingin berbagi template SEO friendly? Tips Blog akan berbagi informasi dengan berbagi template gratis tetapi sangat amat optimal yang bernama Thesis SEO Blogger Template.

Thesis SEO Blogger Template

Thesis SEO Blogger Template sudah tidak asing lagi di kalangan pecinta blogger apa lagi bagi agan-agan yang sudah lama bergelut di bidang IM ( Internet Marketing ). Karena template yang satu ini sudah lama hadir di DIYthemes dengan versi wordpress yang di hargai senilai $87 kemudian di convert oleh Blog Juragan ( seorang IM Indonesia ) agar bisa di gunakan di blogspot. 

Berikut Fitur Thesis SEO Blogger Template 

• SEO Friendly
• Visitor Friendly
• Dilengkapi dengan Dinamic heading (h1 pada header di index, dan h1 di judul post pada halaman posting)
• Dilengkapi dengan dinamic metatag deskripsi dan keyword otomatis (metatag wajib untuk menghindari duplikat meta deskripsi & keyword)
• Quicklink ke kotak komentar
• Sudah dilengkapi Autoreadmore
• Dilengkapi dengan tambahan beberapa Meta tag untuk mempermudah robot menjelajah blog sobat.
• Loading yang cepat
• Konsep minimalis & simple
• Dll.

Itulah fitur-fitur yang di miliki oleh Thesis SEO Blogger Template, jika agan-agan ingin memilikinya silahkan lihat demo dan download template-nya pada link di bawah ini.

Link Download Thesis SEO Blogger Template

Live Demo : Thesis for Blogger/Blogspot
Download : Download via box

Panduan mengedit :
Jangan lupa untuk mengedit deskripsi dan kata kunci meta tag. Caranya sebagai berikut :
1. Seteleh kode berhasil di unggah, diedit html cari kode seperti ini :

meta name='DESCRIPTION' content='ISI DENGAN DESKRIPSI UNTUK HOMEPAGE BLOG SOBAT'

2. Ganti kode berwarna hijau tersebut dengan deskripsi blog. Contoh :

meta name='DESCRIPTION' content='Blog yang membahas tentang belajar membuat blog terbaru tahun ini'

3.Setelah itu save template. setelah di save, lihat kembali kode dibawahnya seperti ini :

meta name='KEYWORDS' content='ISI DENGAN KATA KUNCI UNTUK HOMEPAGE'

4. Ganti kode yang berwarna hijau tersebut dengan katakunci blog sobat. Contoh :

meta name='KEYWORDS' content='tutorial blog, artis indonesia, gosip terbaru, gosip hot'

Sampai disini dulu tentang sharing Thesis SEO Blogger Template semoga ini dapat bermanfaat, insyaallah di lain kesempatan jika ada umur panjang dan waktu luang ane akan berbagi dan tentunya dengan pembahasan yang lain pula.  

CARA MENGGANTI BACKGROUND BLOG DENGAN GAMBAR

Cara mengganti background blog dengan gambar sebenarnya sangat mudah. Saudara bisa memilih apakah gambar latar itu nantinya diam/fixed atau bergerak dengan scroll. Untuk mengetahui cara melakukan ini silahkan baca penjelasan berikut ini�.


KODE CSS DASAR BACKGROUND BLOG

Saudara perlu mengetahui bahwa kode untuk mengubah gambar latar ini biasanya ada pada CSS BODY pada atribut BACKGROUND�.

Cara Membuat Chatbox Seperti Obrolan Facebook Pada Blog

Tutorial Belajar Blog - Cara Membuat Chatbox Seperti Obrolan Facebook Pada Blog | Pada postingan ini Belajar Blog akan berbagi Tips Blog Cara Membuat Chatbox Seperti Obrolan Facebook di Blog/Website. Tutorial Ini terinsiprasi lagi blogmate DTE yang sudah mau berbagi informasi tentang informasi blog ini

KLIK DISINI DEMO OBROLAN FACEBOOK

<div class="chat-box">

<input type="checkbox" />

    <label data-collapsed="Buka Chatbox" data-expanded="Tutup Chatbox"></label>

    <br />

<div class="chat-box-content">

<!-- Kode buku tamu dsb... -->


    </div>

</div>

nah kalo yang di bawah untuk cssnya :

.chat-box {
  font:normal normal 11px/1.4 Tahoma,Verdana,Sans-Serif;
  color:#333;
  width:200px; /* Chatbox width */
  border:1px solid #344150;
  border-bottom:none;
  background-color:white;
  position:fixed;
  right:10px;
  bottom:0;
  z-index:9999;
  -webkit-box-shadow:1px 1px 5px rgba(0,0,0,.2);
  -moz-box-shadow:1px 1px 5px rgba(0,0,0,.2);
  box-shadow:1px 1px 5px rgba(0,0,0,.2);
}

.chat-box > input[type="checkbox"] {
  display:block;
  margin:0 0;
  padding:0 0;
  position:absolute;
  top:0;
  right:0;
  left:0;
  width:100%;
  height:26px;
  z-index:4;
  cursor:pointer;
  opacity:0;
  filter:alpha(opacity=0);
}

.chat-box > label {
  display:block;
  height:24px;
  line-height:24px;
  background-color:#344150;
  color:white;
  font-weight:bold;
  padding:0 1em 1px;
}

.chat-box > label:before {content:attr(data-collapsed)}

.chat-box .chat-box-content {
  /* padding:10px; */
  display:none;
}

/* hover state */
.chat-box > input[type="checkbox"]:hover + label {background-color:#404D5A}

/* checked state */
.chat-box > input[type="checkbox"]:checked + label {background-color:#212A35}
.chat-box > input[type="checkbox"]:checked + label:before {content:attr(data-expanded)}
.chat-box > input[type="checkbox"]:checked ~ .chat-box-content {display:block}

Semoga bermanfaat codingnya :)

CARA MEMBUAT ARTIKEL DI BLOGGER

Cara membuat artikel di blogger sangatlah mudah, karena blogger sudah menyediakan sebuah fungsi editor yang lumayan lengkap menurut saya. Untuk teman-teman yang baru memulai blognya, ada baiknya mengenal fungsi-fungsi yang ada di dalam editor yang digunakan untuk membuat artikel�.


Tampilan Editor Artikel Di Blogger.com
Tampilan editor ini sangat user friendly, anda yang sudah terbiasa

CARA EDIT MENGGUNAKAN PERANCANG TEMPLATE BLOGGER

Cara edit template blog menggunakan perancang template blogger adalah cara termudah untuk membuat blog saudara lebih menarik. Ada beberapa hal yang bisa saudara lakukan dengan fitur Perancang Template Blogger ini.




Tapi perlu saudara catat bahwa fitur default blogger ini hanya bekerja pada template blog default dari blogger.com. Jadi tidak jaminan trik ini akan bekerja pada template dari

Cara Membuat Template Blog SEO Friendly

Cara Membuat Template Blog SEO Friendly - Saat ini sudah banyak beredar template blog yang SEO friendly, hanya saja banyak orang tidak suka dengan desain template yang tersedia.... Kalau sudah begitu...ya apa boleh buat, sekalian saja buat template blog SEO friendly sendiri....



Berhubung banyak teman-teman blogger yang tidak tahu caranya, jadi di sini saya akan membagi beberapa tips. Hanya

Cara Mengetahui Jumlah Backlink Blog

Cara Melihat Jumlah Tautan Balik Blog  -Sedikit tips tentang bakclink untuk SEO, yaitu Tools untuk Mengecek Backlink yang masuk di Blog, sebelumnya mungkin sobat pasti sudah tau apakah yang dimaksud backlink itu?

Kurang lebihnya backlink adalah sebuah link atau tautan yang terdapat di blog orang lain menuju blog kita ataupun sebaliknya, manfaat backlink bisa anda baca di artikel blog sebelah.

Backlink, adalah suatu hal penting. backlink amat dicari para blogger, tidak pernah habis saya membicarakan kata " Backlink " ,Backlink sendiri dapat membuat atau membantu artikel blog kita meraih posisi 10 besar di google, semakin banyak backlink semakin baik akan tetapi terlalu sering mencari backlink dalam waktu yang sama akan menimbulkan kecurigaan yang mengakibatkan situs kita terkena banned.  Nah bagaimana sih Cara Mengetahui Jumlah Backlink Blog, Mudah saja sebenarnya. kita akan mengetahui jumlah backlink situs kita dengan menggunakan salah satu tools yang pernah saya coba sebelumnya. Oke dibawah adalah Tutorial Melihat Jumlah Backlink situs Blog Website Anda.

1. Masuk ke http://backlinkwatch.com/ 
2. Masukkan URL Blog anda di Kolom yang telah disediakan
 [ Jika Situs anda berflatform .blogspot.com , maka masukkan url Blog TANPA WWW. , Contoh : http://tutorialbelajarblogger.blogspot.com/ ]

Masukan Link Blog / Website

3. Kemudian tekan Tombol Check Backlinks , nanti anda akan di pindahkan ke sebuah halaman dan menampilkan seperti gambar dibawah ini, di Baris Total Backlinks anda dapat melihat Jumlah Backlink situs anda, bisa dilihat situs saya, Blog saya ini memiliki 64 Backlinks. tetapi perlu di ingat jumlah backlinks itu bukan berdasarkan Jumlah backlinks dari Berbagai situs tetapi dari berbagai Halaman.

Contoh Total Backlink

dan Untuk melihat Backlinks anda berasal dari mana bisa di lihat di situs tersebut dengan mengScroll kebawah maka akan seperti gambar dibawah ini

Backlink URL : dari manakah Backlink situs anda berasal
Anchor Text : Link anda disitus tersebut di tampilkan dalam Teks apa
PR : Pagerank dari Situs Backlink anda berasal
OBL : Outbound Links which means total external links found on backlink giving webpage.

Referensi : http://kesiangansekolah.blogspot.com/

Cara Membuat Floating Menu Keren Widget Social Media

Tutorial Belajar Blogger - Cara Membuat Floating Menu Keren Widget Social Media - Melanjutkan Tutorial blog sebelumnya Cara Membuat Social Button Melayang Banyak blogger berlomba-lomba memasang widget yang paling keren pada blog mereka agar tampak menarik.Widget ini berfungsi untuk mempermudah pengunjung menemukan dan mengikuti anda dalam jejaring social atau yang lainnya dan dilengkapi dengan Efek Floating menu yang keren.

Cara Membuat Floating widget Social Media keren

• login ke blogger
• pilih menu template-->expand template widget
• cari kode ]]></b:skin> dan letakkan kode berikut diatasnya

/* social button http://tutorialbelajarblogger.blogspot.com* /
.social-buttons {
    position: fixed; 
    top: 130px;
    width: 45px;
    z-index: 9999;
}
.button-left {
    left: 0;
}
.button-right {
    right: 0;
}
.social-buttons #twitter-btn .social-icon, 
.social-buttons #facebook-btn .social-icon, 
.social-buttons #google-btn .social-icon, 
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #33353B;
    background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);
}

.button-left #facebook-btn span {
    background-position: right 10px;
}
.button-left #twitter-btn span {
    background-position: right -35px;
}
.button-left #google-btn span {
    background-position: right -127px;
}
.button-left #rss-btn span {
    background-position: right -80px;
}
.button-left #pinterest-btn span {
    background-position: 11px -177px;
}
.button-left #youtube-btn span {
    background-position: 11px -223px;
}
.button-right #facebook-btn span {
    background-position: 12px 10px;
}

.button-right #twitter-btn span {
    background-position: 11px -35px;
}
.button-right #google-btn span {
    background-position: 10px -127px;
}
.button-right #rss-btn span {

    background-position: 11px -80px;

}
.button-right #pinterest-btn span {
    background-position: 11px -177px;
}
.button-right #youtube-btn span {

    background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
    background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
    background-color: #62BDB2;

}
.social-buttons #google-btn:hover .social-icon {

    background-color: #DB4A39;

}
.social-buttons #rss-btn:hover .social-icon {
    background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
    background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {

    background-color: #C4302B;
} 
.social-buttons a:hover .social-text {
    display: block;
}

.button-left .social-icon { 
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}

.button-left .social-text {
    display: none;
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 11px 40px 11px 0px;
    white-space: nowrap;
}

.button-right .social-icon { 
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}

.button-right .social-text {
    display: none;
    float: left;
    font-size: 80%;
    font-weight: bold;
    margin: 11px 0 11px 40px;
    white-space: nowrap;
}
.social-buttons .social-text {
    color: #FFFFFF;
} 

• letakkan kode dibawah ini diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
    $(window).load(function(){
        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
            $(this).stop();
            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){}); 
        });
        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
            $(this).stop();
            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
    });
</script> 

• kemudian cari kode </body>  dan letakkan kode dibawah ini diatasnya

  <div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
<a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
<a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow via Pinterest</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>

script diatas juga dapat sobat letakkan pada widget html/javascript pada menu tata letak.Terserah mau diletakkan diatas </body> ataupun pada widget html/javascript.
Kemudian ganti tulisan yang berwarna biru dengan ID jejaring social anda.

Sekian Semoga tutorial Cara Membuat Floating Menu Keren Widget Social Media ini dapat bermanfaat.

Cara Membuat Widget Recent Comments With Thumbnail

Tutorial Belajar Blog - Cara Membuat widget Recent Comment With Thumbnail - Recent Comment kalau diartikan ke dalam bahasa Indonesia yaitu komentar terakhir, Maksud widget recent comment ini berfungsi agar sobat atau pengunjung blog sobat dapat melihat para readers yang berkomentar di blog sobat. Selain itu, widget ini juga bisa untuk meningkatkan pageview blog sobat. Karena setiap komentar yang telah di publish lalu diklik dan dilihat oleh seseorang.

Widget ini Dibuat oleh Way2Blogging. Kelebihan dari widget ini adalah Widget Yang Stylish dari pada versi sebelumnya, Memiliki Avatar yang dibingkai bulat dibandingkan dengan versi sebelumnya yang tidak memiliki avatar, Widget ini juga bisa diatur dengan anda seberapa anda ingin menampilkan Komentar, Anda juga bisa mengatur avatar, Dan Widget ini juga mudah dipasang. Untuk Itu saya akan menjelaskan kepada anda cara untuk membuatnya. Untuk itu berikut cara untuk membuatnya:

• Silahkan Login Ke Blogger Anda.
• Setelah itu, Klik Menu Tata Letak, --> Klik Tombol Add Gadget, Lalu Tambahkan Gadget HTML.
• Masukan kode berikut ini :

<style type="text/css">
    ul.asharexp_recent_comments{list-style:none;margin:0;padding:0;}
    .asharexp_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .asharexp_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .asharexp_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .asharexp_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 11px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 30,
 roundAvatar = true,
 characters  = 40,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
 maxfeeds=100,
 adminBlog='Oktri Darmadi';
//]]>
</script>
<script type="text/javascript" src="http://tutorialbelajarblogger.googlecode.com/files/Recent%20Comments%20thumbnail.js"></script>
<script type="text/javascript" src="http://tutorialbelajarblogger.blogspot.com/feeds/comments/default?alt=json&callback=asharexp_recent_comments&&max-results=100"></script>
<div style="text-align:center">
<span style="float:left;font:italic 10px Arial, Sans-Serif; color:#3D3D3D;"><a target="_blank" href="http://tutorialbelajarblogger.blogspot.com/2013/05/cara-membuat-widget-recent-comments.html">.:Get Widget:.</a></span>
</div>

Keterangan:

• numComments = 5 adalah jumlah komentar yang ditampilkan pada widget recent comment with thumbnailnya. Bisa ditambah atau dikurang sesuai keinginan
• characters = 40 adalah jumlah isi komentar yang ditampilkan. Bisa sobat tambahkan atau dikurang sesuai keinginan
• adminBlog='Oktri Darmadi' adalah nama admin yang ada di blog sobat. Silahkan ganti dengan nama author/admin yang ada di blog sobat
• Tulisan yang berwarna merah ganti dengan url blog sobat

Semua kode script itu tinggal sobat copy lalu sobat pasang di blog sobat. Lalu atur dari jumlah yang sobat tampilkan, isi komentar, admin blog, url blog dan lain lain, simpan widget lalu lihat hasilnya. Oke sob, sekian dulu untuk membuat widget recent comment with thumbnail. Sampai Jumpa ;)

Cara Membuat Notifikasi Blog Sederhana dengan CSS3

Tutorial Belajar Blog -  Cara Membuat Notifikasi Blog Sederhana dengan CSS3 ,Tutorial ini saya dapatkan dari master blog Johanes Djogan langsung saja bisa di kunjungin, Melanjutkan tutorial sebelumnya Cara Membuat Pesan Pemberitahuan Admin Blog, tidak berbeda jauh fungsi tutorial ini dengan sebelumnya yaitu memberi Pesan Pemberitahuan admin blog.

KLIK DISINI DEMO NOTIFIKASI BLOG

MEMASANG NOTIFIKASI KE BLOGSPOT
Tambahkan KODE CSS Notifikasi Blog Sederhana ]]></b:skin>

#notifo {
top: 10px;    /* posisi di paling atas    */ 
right: 10px; /* posisi di paling kanan */
width: 320px; /* lebar notif */
height: auto;          /* tinggi notif otomatis */
color: #eee;           /* warna background */
position: fixed;  /* posisi melayang */
z-index: 999999;
overflow: hidden;
border-radius: 5px; 
border: 1px solid #000;
background: rgba(0,0,0,0.7); 


-webkit-animation: fadeOutnotif 10s linear forwards; /* waktu notifikasi 10 detik */
-moz-animation: fadeOutnotif 10s linear forwards; /* waktu notifikasi 10 detik */
-o-animation: fadeOutnotif 10s linear forwards; /* waktu notifikasi 10 detik */
-ms-animation: fadeOutnotif 10s linear forwards; /* waktu notifikasi 10 detik */
animation: fadeOutnotif 10 linear forwards; /* waktu notifikasi 10 detik */
}
#notifo {
float: left;
display: block;
padding: 0 15px;
text-align: left;
}
#notifo h2 {
color: #d00;
font-size: 19px; 
line-height: 10px;
font-weight: bold;
text-align: center;
}
@-webkit-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -webkit-transform: translateY(0px)}
99% { opacity: 0; -webkit-transform: translateY(-30px)}
100% { opacity: 0;}
}
@-moz-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px)}
99% { opacity: 0; -moz-transform: translateY(-30px)}
100% { opacity: 0;}
}
@-o-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px)}
99% { opacity: 0; -moz-transform: translateY(-30px)}
100% { opacity: 0;}
}
@-ms-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px)}
99% { opacity: 0; -moz-transform: translateY(-30px)}
100% { opacity: 0;}
}
@keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px)}
99% { opacity: 0; -moz-transform: translateY(-30px)}
100% { opacity: 0;}
}

Note :

Rubahlah lamanya waktu tampil (7s) tepat di bawah tulisan /* waktu notifikasi 7 detik */Markup

Langkah terakhir, pasang Script dibawah ini diatas tag </body>

<div id='notifo'>

<h2>Notifikasi: </h2>

<p>Ganti dengan pesan yang ingin anda tampilkan</p>

<p>Ganti dengan pesan yang ingin anda tampilkan</p>

<p>Hello world.</p>

</div>

Sekian penjelasan repost ini mengenai Notifikasi blog sederhana dengan CSS3 Smoga bermanfaat
 <a href="https://plus.google.com/116573245674217957238?rel=author">Oktri Darmadi</a>

Cara Membuat Pesan Pemberitahuan Admin Blog

Contoh Pesan Pemberitahuan Admin Blog

Tutorial Belajar Blog - Cara Membuat Pesan Pemberitahuan Admin Blog , Maksud dari Tutorial Blog Pesan Pemberitahuan admin blog ekedar untuk pemberitahuan bahwa Blog kalian sedang dalam perbaikan, entah dalam pengembangan atau sedang menjalani hal-hal sibuk. Jadi kesimpulannya para pengunjung lebih paham mengapa Blog kalian sudah sangat jarang update.

Berikut Langkah - Langkah Untuk Membuat nya

? Letakkan di atas kode </body>

<style type='text/css'>
.notification{height:70px;width:480px;display:block;position:fixed;bottom:10px;left:10px;/*Border Radius*/border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;/*Box Shadow*/-moz-box-shadow:2px 2px 2px #cfcfcf;-webkit-box-shadow:2px 2px 4px #cfcfcf;box-shadow:2px 2px 2px #cfcfcf}
.notification span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtAD9xJf0C1JuWpeVTZ8TYgRnWLDowwePnDfn-mbiVUrun7pWMofVcnAXJ3rVjnJJ5Z-NSt2fEBKeEUQH0NbvOGMXZMJxK6SzY7nYywNcVNXaKxMiIRJNRLQbLujpCogw9y8zhCK2qgl8/) no-repeat right top;cursor:pointer;display:block;width:19px;height:19px;position:absolute;top:-9px;right:-8px}
.notification p{width:400px;font-family:Arial,Helvetica,sans-serif;color:#323232;font-size:14px;line-height:21px;text-align:left;float:right;margin:10px 15px 0 0;*margin-top:15px;/*for lt IE8*/padding:0;/* TEXT SHADOW */ text-shadow:0 0 1px #f9f9f9}
.warning{border-top:1px solid #fefbcd;border-bottom:1px solid #e6e837;/*Background Gradients*/background:#feffb1;background:-moz-linear-gradient(top,#feffb1,#f0f17f);background:-webkit-gradient(linear,left top,left bottom,from(#feffb1),to(#f0f17f))}
.warning:before{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_4QTS0JmVZ0r9UgtZ_vHpUW-PgGsiF4_TAeN4W6dqH14jB2bzEANef1OQIB-BrdJ7QhgDzv10XWvbQC-sRKg-DQoFUAzIrO1MPks-cXY-SLda2o9xucCDBXHPQsdK9AHjXwgcVc_hRgY/);float:left;margin:15px 15px 0 25px}
.warning strong{color:#e5ac00;margin-right:15px}
</style>

? Tambahkan kode di bawah ini (letakkan dibawah kode yang di atas tadi)

<script type='text/javascript'>
$(document).ready(function(){$(&#39;.notification&#39;).hover(function(){$(this).css(&#39;cursor&#39;,&#39;auto&#39;);});$(&#39;.notification span&#39;).click(function(){$(this).parent().fadeOut(800);});});</script>
<div class='notification warning'><span/>
<p><strong>Pesan Admin :</strong>Selamat Datang Di Tutorial Belajar BLog</p></div></b:if>

? Jangan lupa selimuti kode di atas.
1. Hanya muncul di halaman utama

<b:if cond='data:blog.url == data:blog.homepageUrl'>
KODE DI ATAS........
</b:if>

2. Muncul di halaman Posting

<b:if cond='data:blog.pageType == "item"'>
KODE DI ATAS........
</b:if>

DEmo Tutorial Belajar Blog

Note:

•  Tulisan bottom yang Berwarna kuning dan left tulisan berwarna merah bisa di ganti dengan keinginan
  
• Tulisan berwarna pink silahkan diganti dengan kata-kata kalian sendiri.

sumber : http://www.dte.web.id

Cara Membuat Double Klik Halaman Blog Untuk Back To Top

Tutorial Belajar Blog - Cara Membuat Double Klik Halaman Blog Kembali Keatas, Maksud dari tips blog ini adalah ketika kita selesai membaca artikel di blog, tanpa sadar kita sudah berada di bagian paling bawah blog. Untuk kembali ke atas harus gulung scrollbar ,maka dari itu dengan mudah kita double klik halaman langsung kembali keatas atau halaman paling atas.

Langsung aja deh, caranya gini nih:

1. Login Blogger.com
2. Pilih Template
3. PIlih Edit Html, Pasangkan kode berikut sebelum kode  </head>

<script language="JavaScript1.2">
function dblclick() {
window.scrollTo(0,0)
}
if (document.layers) {
document.captureEvents(Event.ONDBLCLICK);
}
document.ondblclick=dblclick;
</script>

4. Simpan
Selamat Mencoba...Semga Tips Blog Ini Dapat Bermanfaat. Terima kasih sudah mengunjungi Blog ini.

TEMPLATE BLOG SEO FRIENDLY TERBARU MEI 2013

Template blog seo friendly terbaru ini agak lambat dari jadwal. Soalnya belakangan ini saya jadi semakin sibuk dengan kerjaan di kantor, dan yang namanya template itu perlu dipelototi berjam-jam.




Jangankan buat template, menjawab komentar saja sudah sangat sulit sekali, ada ratusan komentar yang terbengkalai tanpa tanggapan saat ini. Mungkin saya akan memberikan juga tempat bagi teman