Cara Cepat Mengubah Warna Template Blog

Cara Cepat Mengubah Warna Template Blog - Pada kesempatan kali ini saya akan memberikan trik cara cepat mengganti warna template dalam hitungan menit, Jika kalian merasa bosan melihat warna template yang kalian gunakan itu - itu aja kalian ngga usah bingung hehe, Saya akan memberikan sedikit tutorial untuk kalian agar warna template bisa terganti dengan cepat. Untuk kalian yang ini mengubah warna template nya bisa mengikuti tutorial yang saya berikan dibawah ini. Simak baik - baik tutorialnya. Cara Cepat Mengubah Warna Template Blog

1. Yang pertama kali harus kalian lakukan adalah login ke blog kalian terlebih dahulu, Lalu klik edit html pada bagian template.

2. Kedua kalian download software Colorpic dan instal seperti biasa, Colorpic fungsi nya adalah untuk melihat kode warna. COLORPIC

3. Lalu buka blog kalian dan pilih warna apa yang kalian ingin ganti, Contoh saya ingin mengganti warna hijau pada template saya menjadi warna kuning, Cara nya buka aplikasi Colorpic  lalu arahkan cursor kalian ke warna template yang ingin kalian ganti, Setelah itu pencet CTRL + G dan copy kode nya

4. Kembali ke edit html, Pencet CTRL + SHIFT + R dan pastekan kode yang tadi kalian copy

5. Setelah itu tekan enter, Pada bagian with kalian harus menempatkan kode warna baru kalian pilih warna apa yang ingin kalian gunakan pada template kalian, Misalnya saya ingin memilih warna kuning, Ulangi saja langkah no 3 tetapi dengan warna yang berbeda

6. Terakhir tekan enter dan Save template

Demikian tutorial Cara Cepat Mengubah Warna Template Blog, Semoga bermanfaat

Baca Juga : Cara Mengubah Tema Mozilla Firefox | Memasang Tema Di Firefox

Cara Memasang Iklan Adsense Di Tengah Post Blog

Cara Memasang Iklan Adsense Di Tengah Post Blog - Posisi penempatan iklan juga sangat berpengaruh terhadap penghasilan kita., Untuk menempatkan iklan di tengah post kalian harus mengikuti tutorial yang saya kasih dibawah ini, Tentang Cara Memasang Iklan Adsense Di Tengah Post Blog. Simak Tutorial dibawah ini.

Cara Menempatkan Iklan Adsense Di Tengah Post

1. Yang pertama kalian harus login ke blog terlebih dahulu

2. Dari Dashboard, Kalian klik template lalu Edit HTML

3. Sebelum menempatkan scipt iklan. Kalian harus parse kan terlebih dahulu script kalian, Dengan cara kunjugi www.freeformatter.com/html-escape lalu copy scipt iklan kalian ke situs tersebut, Kemudia klik escape

4. Kembali lagi ke Edit HTML, lalu cari kode <data:post.body/> 

5. Setelah ketemu, Ganti kode tersebut dengan kode dibawah ini, Setelah itu klik Save Template

    <div expr:id='&quot;post1&quot; + data:post.id'/>
    <div class='googlepublisherads' style='margin:20px 0'>
    <center>
    Paste Hasil Parse Kalian Disini
    </center>
    </div>
    <div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>
    var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
    var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
    var s=obj1.innerHTML;
    var t=s.substr(0,s.length/2);
    var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
    if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
    </script>

Demikian tutorial tentang Cara Memasang Iklan Adsense Di Tengah Post Blog semoga bermanfaat.

Baca Juga : Cara Memasang Breaking News Di Blog

Cara Memasang Breaking News Terbaru Di Blog

Memasang Breaking News Terbaru Di Blog - Pada kesempatan kali ini saya akan memberikan sedikit tutorial bagaimana Cara Memasang Breaking News Di Blog. Setelah pada  artikel sebelum nya saya sudah membahas bagaimana Menambahkan 2 Element Kolom Gadget Di Bawah Postingan, Dan kali ini sayang akan membahas tutorial memasang breaking news, Oke langsung saja ke tutorial nya.

1. Yang pertama harus kalian lakukan adalah login terlebih dahulu ke Blog kalian, Lalu masuk kebagian template dan klik Edit HTML

2. Setelah itu, Cari kode ]]></b:skin> setelah ketemu, Masukan kode dibawah ini tepat di atas kode ]]></b:skin>

/* CSS Breaking News */
#breakingnews {margin:15px 0 0 0;margin-right:15px;height:42px;line-height:29px;overflow:hidden;background:#fff;border:1px solid #e6e6e6;}
#breakingnews .breakhead {position:absolute;background:none repeat scroll 0 0 #363b40;color:#fff;display:block;float:left;font-family:inherit;font-size:16px;font-weight:400;text-transform:uppercase;padding:6.5px 22px;}
#adbreakingnews li a {font-family:inherit;font-weight:400;color:#666;margin-top:10px;transition:all 0.5s ease-in-out;}
#adbreakingnews li a:hover {color:#359bed;}
#adbreakingnews {float:left;margin-left:75px;margin-top:6px;}
#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0}

@media only screen and (max-width:640px){
#breakingnews {margin:20px 0 0 0;margin-right:0;}
#breakingnews .breakhead {padding:6.5px 14px;}
#adbreakingnews {margin-left:50px;}}

3. Lalu cari kode </body> dan masukan kode berikut di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="http://djonespg.blogspot.com",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#adbreakingnews li:first").slideUp(function(){$(this).appendTo($("#adbreakingnews ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#adbreakingnews").html(s),setInterval(function(){t()},5e3)}else $("#adbreakingnews").html("<span>No result!</span>")},error:function(){$("#adbreakingnews").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>

4. Kemudian letakan kode dibawah ini, diatas kode </body> dan Save template

<div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'/></span>
<div id='adbreakingnews'>Loading...</div></div>

 Catatan ganti http://djonespg.blogspot.com/ dengan url blog kalian

Sekian tutorial dari saya tentang Cara Memasang Breaking News Terbaru Di Blog, Semoga bermanfaat

Menambahkan 2 Element Kolom Gadget Di Bawah Postingan

Cara Menambahkan 2 Element Kolom Gadget Di Bawah Postingan - Bagi kalian yang bingung ingin memasang iklan lebih tetapi kurang kolom gadget pada template, kalian tidak usah bingung, Kali ini Djonespg akan memberikan sedikit tutorial Cara Menambahkan 2 Element Kolom Gadget Pada Blog. Untuk membuatnya Kalian hanya menambahkah kode CSS dan HTML dibawah ini kedalam template kalian. Oke untuk tutorial nya silahkan kalian simak dibawah ini.

Menambahkan 2 Element Kolom Gadget Di Bawah Postingan Blog

 

 

1. Yang pertama kalian lakukan adalah login ke blog terlebih dahulu, lalu kalian akan diarahkan ke dashboard kalian, Jika sudah, klik  Template  >> Edit HTML. Lalu copy kode dibawah ini tepat di atas kode ]]></b:skin>

#banner-add1 { width:48%; float:left; }
#banner-add2 { width:48%; float:right; }

 

2. Kedua, kalian cari kode yang mirip seperti ini

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog type='Blog'/>
</b:widget>
</b:section></div>

3. Lalu kalian copy kode dibawah ini, dan taruh kode tersebut setelah kode </b:section> atau sebelum kode </div>

  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:section class='banner-add1' id='banner-add1' showaddelement='yes'/>
    <b:section class='banner-add2' id='banner-add2' showaddelement='yes'/>
    <div style='clear: both;'/>
    </b:if>

 

Setelah itu klik Simpan Template, Dan jika sudah tersimpan buka tata letak dan lihat Hasilnya. Silahkan gunakan element tadi untuk memasang widget iklan atau yang lainya. Sekian pembahasan tentang Cara Menambahkan 2 Element Kolom Gadget Di Bawah Postingan semoga bermanfaat.