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

Membuat Widget Jumlah Postingan dan Komentar Blog

Menampilkan Jumlah Postingan dan Komentar di Blog ~ Kali ini saya akan tutorial tentang bagaimana menampilkan jumlah komentar dan postingan di blog. Artikel ini saya buat saat saya berkunjung ke blog tetangga, saya sangat tertarik dengan tutorial blog yang satu ini, jadi tidak ada salahnya kan jika saya berbagi pengetahuan dengan anda semua.




Cara menampilakan jumlah postingan dan komentar

FAKTOR-FAKTOR YANG DAPAT MENINGKATKAN PENGUNJUNG BLOG

Meningkatkan Pengunjung Blog adalah keinginan semua blogger, termasuk saya heheh. Apalagi blog yang masih baru seperti Tutorial Blog dan SEO Untuk Pemula ini. Untuk meningkatkan pengunjungnya tidaklah mudah, dan dalam melakukan optimasi onpage dan offpage dibutuhkan kesabaran yang tinggi untuk menghasilkan pengunjung yang maksimal.



Jika anda adalah blogger yang sedang mencari nilai rupiah

Cara Menghilangkan Widget Navbar dan Attribution Pada Blog

Cara Menghilangkan Widget Navbar dan Attribution Pada Blog~ Jika anda menggunakan template standar blogger, mungkin anda akan menemukan beberapa widget yang dirasa kurang nyaman dan menggangu. Widget yang saya maksud adalah Navbar blog dan attribution blog, kedua widget ini menurut saya fungsinya kurang maksimal dan tidak begitu terasa.




Jadi pada tutorial saya kali ini saya akan mencoba

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/

Dapatkan Backlink Berkualitas dan Gratis dari W3 Directory

Directories / Search engine directory Indonesia directory




Bagaimana Cara Mendapatkan Backlink dari W3 Directory ~ Setiap blogger pasti ingin mendapatkan backlink berkualitas agar artikel miliknya bisa naik peringkat di SERP Google dan Meningkatkan Page Rank Blog mliknya. Meskipun bukan backlink saja yang menjadi tunjangan naiknya Page Rank Blog, namun backlink yang berkualitas tetap saja

CARA MEMASANG WIDGET CCTV DI BLOG

Cara Memasang Widget CCTV di Blog ~ Mungkin anda semua sudah pernah mendengar dengan yang katanya CCTV, CCTV adalah kamera pengintai yang biasanya selalu berada di Mal-Mal atau pun tempat-tempat yang jarang di lalui orang. Namun berbeda dengan CCTV yang akan saya share kali ini, CCTV ini hanyalah sebuah widget yang biisa anda pasang pada blog saudara untuk mempercantik dan memperindah

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 WIDGET GOOGLE PLUS TERLIHAT CANTIK

Cara Membuat Widget Google Plus Terlihat Cantik ~ Google plus adalah situs jejaring sosial media yang dimiliki oleh raksasa internet yaitu GOOGLE. Mengapa Google membuat jejaring sosial baru? Hal ini tentu saja untuk menyaingi dominasi jejaring sosial facebook yang sangat berjaya di beberapa tahun terakhir ini.



Manfaat google plus tehadap sebuah web atau blog lebih terasa di banding dengan

TEMPLATE BLOG SEO FRIENDLY YANG MINIMALIS DAN RINGAN

Download Template Blog SEO Friendly Yang Minimalis dan Ringan - Template blog menurut sebagian blogger adalah salah satu hal penting yang harus diperhatikan. Karena blog dengan template yang keren belum tentu di sukai oleh pengunjung. Bisa saja template tersebut menggangu kenyaman pengunjung seperti loading blog yang terlalu lama karena terlalu banyaknya widget-widget keren yang memberatkan

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/AVvXsEj36IpkawnIOknSPw8EdKrTaY-PYdta_i7iXI4fjgB4hOzXPqVwDhzIDCfQy2bfwMeYxX1xjGW_0FOqOYjzRqyjvNcnN8u1RAWxVEAe3iszcnTgdttIdO-X5fbYWgetwXSFZx__B1M9wO4/) 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/AVvXsEgrqPbQJfxSNGUDJkODzTJmRPkWC0uZIrv7i9IhKHzlq7jlR32FwmrFaVLjCdXMiDB5ms-Yt4DGqRZHPb_TKGfMgGkX8w20QpAiYp8nYz05uHExMkCIBfQou8bBj_9ISvXHVsXw7KXHQsw/);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.

Membuat Meta Description dan Heading Tag Berbeda Tiap Artikel

Membuat Meta Description dan Heading Tag Berbeda Tiap Artikel ~ Sekarang, memasang Meta description dan Heading tag yang berbeda pada tiap artikel jauh lebih muda dari pada sebelumnya. Pada tampilan lama blogger.com membuat heading tag dan meta description metodenya sangatlah merepotkan dan banyak blogger yang mengeluh dengan metode tersebut.



Namun sekarang blogger.com memperbaharui

Cara Cepat dan Ampuh Meningkatkan Page Rank Blog

Cara Cepat dan Ampuh Meningkatkan Page Rank Blog ~ Kebutuhan akan Pagerank Blog yang tinggi sudah menjadi hal mutlak bagi para Blogger tentunya. Tip kali ini tentang Cara Cepat Meningkatkan Pagerank Blog yang terbaru atau updated, bisa sangat membantu bagi Anda. Semakin tinggi pagerank
blog kita tentu saja blog kita bakalan semakin eksis dan punya banyak
pengunjung. Tip dan trik yang akan saya

Manfaat Menggunakan Template Blog SEO Friendly

Manfaat Menggunakan Template Blog SEO Friendly ~ Apakah anda menggunakan template blog SEO friendly? Anda tahu seperti apa template SEO friendly itu? dan Apakah manfaatnya? Saya sendiri sebenarnya belum paham betul apa yang di maksud dengan template SEO friendly. Namun saya akan sedikit berbagi hal-hal seputar template SEO friendly.



Template SEO friendly adalah template yang memiliki

Memasang Widget Jejaring Sosial Melayang di Blog

Membuat Widget Jejaring Sosial Melayang di Blog ~ Banyak blogger (termasuk saya) yang mempromosikan blognya di berbagai situs sosial media. Sebut saja Facebook dan twitter, ke dua sosial media ini memang sudah mendunia dan memiliki banyak peminatnya. Tetapi, tidak hanya itu saja jejaring sosial media yang ada di dunia. Masih banyak lagi sosial media yang ada dan bisa anda manfaatkan untuk

Cara Membuat Widget Page View di Setiap Postingan Blog

Membuat Widget Page View This Post ~ Mungkin anda semua akan bingung mendengar yang namanya Widget Page View This Post. Karena belum banyak pula blogger yang mengetahui dan memasang widget yang satu ini. Mungkin karena fungsi widget ini yang kurang bermanfaat atau pun kurang manarik, sehingga jarang blogger yang memasang widget page view post ini.

Apa Itu Widget Page View Post?
Untuk itu

Cara Mudah Memasang Kolom Scroll pada Arsip Blog

Cara Membuat Blog Archive dengan Scroll ~ Mungkin teman blogger semua masih bingung dengan tema artikel saya kali ini. Maksudnya kita akan  memberikan scrolling pada widget Arsip Blog yang saudara pasang. Apa manfaat memasang arsip blog dengan scroll? Ingin tahu kegunaannya, silahkan baca lebih lanjut.

Memasang Scroll Pada Arsip Blog

Memasang scroll pada arsip blog memang tidak ada

Bagaimana Cara Membuat dan Mengetahui Blog Dofollow?

Bagaimana Cara Membuat dan Mengetahui Blog Dofollow? ~ Anda pasti sudah mengetahui apa yang dimaksud dengan blog dofollow. Blog dofollow adalah blog yang memberikan kebebasan kepada mesin pencari untuk menelusuri link yang dirujuknya. Jadi jika anda berkomentar pada blog beraliran dofollow, maka anda dapat menghasilkan backlink dari blog tersebut, karena link komentar anda dapat di telusuri

Apa Kelebihan dan Kekurangan Blog Dofollow Nofollow

Apa Kelebihan dan Kekurangan Blog Dofollow Nofollow ~ Segala sesuatu itu mempunyai sisi negatif dan sisi positif. Begitu juga dalam dunia SEO khusunya tentang blog dofollow dan nofollow. Kedua kata ini, selain memiliki arti yang berlawanan, juga memiliki keunggulan dan kekurangan yang jauh berbeda.



Kalau anda di suruh memilih antara blog dofollow dan nofollow anda akan memilih yang mana?

Kriteria-Kriteria Template Blog SEO Friendly

Apa Saja Kriteria-Kriteria Template Blog Yang SEO Friendly Itu? Semua blogger pasti menginginkan  blog miliknya memenuhi kriteria-kriteria template yang SEO friendly. Tapi tahukah anda seperti apakah kriteria-kriteria template yang SEO Friendly itu? Kriteria-kriteria template yang disayangi google adalah template yang mudah ditelusuri oleh mesin pencari google dan kawan-kawannya. Jika anda

Membuat Dynamic Heading Pada Blogspot Sangatlah Mudah

Membuat Dynamic Heading Pada Blogspot Sangatlah Mudah jika anda melakukanya dengan sungguh-sungguh. Dynamic heading adalah trik SEO yang mulai banyak di pakai oleh blogger-blogger indonesia maupun dunia. Mengapa? Karena memasang dynamic heading ini adalah salah satu dari beberapa ciri atau kriteria template blog yang SEO friendly sampai saat ini. Jadi saya akan berbagi dasar untuk mengubah

Cara Memasang Artikel Terkait Horizontal Dengan Thumbnail

Bagaimana Membuat Artikel Terkait Horizontal Dengan Thumbnail? ~ Membuat artikel terkait pada tiap postinga dapat memberikan manfaat yang besar kepada pengunjung blog. Mengapa? Karena dengan adanya artikel terkait, pengunjung blog akan membaca artikel yang berhubungan dengan yang sedang dia baca. sehingga pengunjung blog tersebut akan terasa terbantu dalam menyelesaikan masalah yang sedang

Cara Mudah Membuat Breadcrumbs Pada Blog

Cara Mudah Membuat Breadcrumbs Pada Postingan Blog ~ Sudah banyak blogger yang mulai memasang breadcrumbs pada blog miliknya. Hal ini karena ada yang mengatakan bahwa memasang breadcrumbs pada blog adalah salah satu teknik SEO yang  disenangi oleh mesin pencari. Lalu apa saja manfaat breadcrumbs yang dapat kita dan pengunjung blog rasakan.

Manfaat Memasang Breadcrumbs

Manfaat memasang

Bagaimana Cara Mengganti Template Pada Blog?

Bagaimana Cara Mengganti Template Pada Blogspot? ~ Banyak blogger yang sedang melakukan perubahan pada blognya, baik perubahan dalam segi Onpage maupun Offpage. Tentu saja hal ini agar blog mereka lebih SEO friendly dan lebih terlihat canggih atau modern. Biasanya para blogger indonesia kurang nyaman dengan template bawaan blogger yang standar-standar saja dan juga belum teroptimasi dalam

Template SEO Friendly Terbaru - Elesis Template

Download Template SEO Friendly Terbaru - Elesis Template ~ Template yang blog saya gunakan ini menggunakan template buatan teman blogger saya bernama Darmawan Saputra. Dia membuat template blog ini sendiri dan memberinya nama Elesis Template. Dia sangat yakin bahwa template yang dia buat itu SEO friendly karena memenuhi kriteria-kriteria template SEO friendly. Karena itu saya tidak lagu

Cara Membuat Artikel Terkait Dengan Atau Tanpa Scroll

Cara Membuat Artikel Terkait Dengan Atau Tanpa Scroll Pada Blogspot ~ Artikel terkait sudah banyak digunakan oleh banyak blogger, baik blogger yang masih baru maupun blogger yang sudah lama. Memasang artikel terkait di tujukan kepada pengunjung untuk membaca artikel-artikel yang berhubungan dengan yang dibaca oleh pengunjug. Tentu saja ini sangat menguntungkan karena dapat meningkat Pageview

Bagaimana Melakukan Optimasi Onpage Pada Blog?

Bagaimana Melakukan Optimasi Onpage Pada Blog? ~ Melakukan optimasi onpage pada blog adalah hal wajib bagi seorang blogger. Seorang blogger pasti akan melakukan optimasi terhadap blognya, baik itu optimasi Onpage maupun optimasi Offpage. Kedua optimasi tersebut harus dilakukan agar blog kita lebih cepat terindeks oleh google. Namun untuk pembahasan optimasi offpage akan saya jelaskan nanti

BAGAIMANA CARA MEMBUAT TEXT AREA PADA BLOG?

Bagaimana Membuat Text Area Pada Blog ~ Text Arae adalah suatu area atau tempat yang biasa digunakan untuk menyimpan suatu text atau kode HTML tertentu. Text area ini biasanya di tujukan ke pada pengunjung blog untuk lebih mudah mencopy atau menyalin data. Text Area ini bisa kita simpan di dalam postingan maupun di dalam widget HTML.




Untuk memudahkan anda memahami Text Area, berikut

Follow Tutorial Blog dan SEO Untuk Pemula

Follow Tutorial Blog dan SEO Untuk Pemula ~ Halaman ini sengaja saya buat untuk teman blogger semua atau pun pengunjung yang ingin saling follow memfollow blog dengan saya. Karena semakin banyak follower blog semakin banyak pula orang yang mengenal blog kita. Blog yang memiliki banyak pengikut juga akan terlihat lebih profesional dan meningkatkan tingkat kepercayaan pengunjung terhadap blog kita