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 

Posted By: Unknown on Kamis, 30 Mei 2013

0

Read More

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

Posted By: Unknown on Selasa, 28 Mei 2013

0

Read More

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.  

Posted By: Unknown on Senin, 27 Mei 2013

0

Read More

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

Posted By: Unknown on Sabtu, 25 Mei 2013

0

Read More

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/

Posted By: Unknown on Minggu, 19 Mei 2013

0

Read More

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.

Posted By: Unknown on Kamis, 16 Mei 2013

0

Read More

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

Posted By: Unknown on

0

Read More

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>

Posted By: Unknown on

0

Read More

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/AVvXsEj-IfQ7i43FQwjWIEsyq_pHVt4GSc7MvDghYcO0hbL5nOgMQHUtdqhovmpcvLQ7tZ-uCCwBhwp0eml4Kxu6DKIPJlg8GumXGg2_o8rK8C-03tVI_nC1DAWQIHTFPBkAOc22Vw-27XVSfXY/) 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/AVvXsEgfaJgH1pHhlIGXWFPth_WzIrwgJzZVb6yWBq50YzfBmQraMocqrF30So6Un_VzyZLqtyViHja3258zLxedgzJD_7mQoBSCw7Jg7UOLLSnuGnHrWGcLiEERt47HPl3ebM302Mf69ZmyRpo/);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

Posted By: Unknown on Selasa, 14 Mei 2013

0

Read More

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.

Posted By: Unknown on

0

Read More

Menaikkan Pengunjung Blog Dengan Cepat

Menaikkan Pengunjung Blog Dengan Cepat - Banyan cara yang dilakukan oleh para pengelola blog agar blognya banyak dikunjungi oleh para pembaca yang baik dan budiman. Apapun dilakukan. Dengan tujuan blognya laris manis di datangi.

Tentunya anda pun punya cara jitu dan mantap agar blog anda di kunjungi. Dan saya percaya bahwa anda telah melakukannya.

Mau tahu cara itu? Tidak lain adalah PROMOSI.

Berpromosi merupakan cara paling ampuh untuk memperkenalkan sebuah produk dalam ilmu ekonomi. Demikian juga halnya dalam dunia blog. Jangan segan-segan untuk melakukan promosi blog anda kepada siapa pun. Teman, sodara, kerabat, baru kenalan semuanya harus diperkenalkan. Maksudnya jangan malu bahwa anda memiliki blog, dan harus memperkenalkannya.

Lakukanlah hal ini, baik promosi lewat media-media sosial, ataupun saling berbagi informasi sesama teman blogger. Maka blog anda akan dikunjungi dengan cepat.

Lebih lanjut nanti kita akan bahas Alat-alat promosi dalam Menaikkan Pengunjung Blog Dengan Cepat. Salam blogger. [Bos Tutorial]

Posted By: Unknown on Senin, 06 Mei 2013

0

Read More

Mencoba Mendaftar Google Adsense

Mencoba Mendaftar Google Adsense - Untuk kesempatan kali ini, Bos Tutorial Mencoba Mendaftar Google Adsense. Tujuannya cuma satu agar bisa menampilkan iklan yang diberikan oleh Google Sendiri.

Meskipun blog ini sudah pernah dipasang Google Adsense, tidak tahu dikarenakan apa tiba-tiba langsung di tutup. Maksudnya akun Google Adsense tidak berfungsi lagi alias modar.

Dengan hati yang besar dan berharap baik ke depan, pihak Google mau bermurah hati untuk menerima kembali permohohan pemasangan GA (Google Adsense).

Kita tahu bahwa disamping kita memberikan informasi seputar dunia maya, berharap juga mendapatkan penghasilan tambahan dari blog yang kita pasang. Salah satu pemberi penghasilan tersebut adalah google adsense itu sendiri yang mana dimiliki oleh si Mbah Google.

Oh iya, saya akan memaparkan bagaimana cara untuk mendaftar, mendapatkan GA. Kemudian hari akan kita bahas selanjutnya. Diterima atau tidak diterima permohonan saya kepada Google mengenai GA (meskipun berharap diterima), saya akan tetap memaparkannya kepada kawan-kawan.

Akhirkata, tulisan kecil ini hanyalah curahan hati belaka. Salam. [Bos Tutiroal]

Posted By: Unknown on

0

Read More