28 October 2014

Cara merubah nama font di halaman posting blog






Salam sejahtera sahabat Blogger semua... ketemu lagi dengan postingan saya kali ini dengan pembahasan Bagaimana cara merubah ukuran teks dalam postingan blog


kode untuk merubah nama dan jenis font

<div style="font-family:Oswald ;color:#062C6A ;font-size:20 px;">
font Oswald besar warna</div>
</div>


hasilnya seperti ini:

font Oswald besar warna




<div style="font-family:Oswald;color:#FF0000;font-size:20px;text-align:center;">
font Oswald besar berwarna di tengah</div>
</div>

hasilnya seperti ini:

font Oswald besar berwarna di tengah

catatan:
nama jenis font: Oswald
kode warna font/teks : FF0000
ukuran font/teks :20
posisi font/teks :center

ubah nama kode ukuran dan posisi teks sesukamu
berikut nama-nama font yang sering di gunakan para blogger
Arial
Courier
Georgia
Times New Roman
Trebuchet
Verdana
Oswald
Arimo
italic
Corsiva


untuk pilihan warna lihat
di sini




cukup sampai disini uraian saya tentang Cara merubah ukuran teks
ketemu lagi di postingan berikutnya dengan Topik dan pembahasan yang berbeda....





Membuat Menu Navigasi jadi responsive di Blog

Cara Membuat Menu Navigasi Unik di Blog Ala Template Evo Magz - Bagaimana sih cara membuat menu navigas kayak di tempplate evo magz itu ? Banyak sekali yang bertanya seperti kepada saya , sampai akhirnya saya mau memberikan tutorialnya kepada sobat . Tapi niat saya tidak ingin mengclone template premium evo magz tersebut , melainkan ingin berbagi pada menu navigasinya saja .

Sebenarnya dengan mengintip kode dari template evo magz itu sendiri , sobat bisa membuat menu navigasnya yang keren itu , asalkan sobat paham sedikit mengenai css dan html , tapi kalau sobat belom bisa mungkin tutorial membuat menu navigasi ala evo magz ini pilihan terbaik anda .

Bagi yang belom tahu seperti apakah menu navigasi keren dan evo magz ? sobat dapat mengetahuinya dengan melihat demonya di blognya langsung atau bisa juga melihat gambar berikut


:
  • 1- silahkan sobat masuk ke editor template terlebih dahulu
  • 2-Kemudian Pasang kode css berikut , tepat diatas kode ]]></b:skin>


  • 3-Untuk memanggil kode css diatas silahkan pasang htmlnya , caranya pasang kode dibawah ini tepat dibawah kode </head>

  • Jika sudah silahkan save template sobat
Membuat Menu Navigasi Evo Magz jadi responsive di Blog
Sebetulnya , cara diatas sudah cukup untuk membuat menu navigasi yang mirip evo magz , tapi jika sobat suka desaign template yang responsive , maka sobat perlu melakukan tutorial dibawah ini :
  • 1-Masih dalam halaman edit html
  • 2-Cari kode </body> , dan pasang kode dibawah ini diatas kode </body> tersebut

  • 3-Serta pasang Juga Media Queris responsivenya . caranya pasang kode css berikut diatas kode ]]></b:skin>

  • 4-oh ya saya hampir lupa , karena menu navigasi menggunakan font awesome , silahkan pasang javascript font awesome berikut diatas kode </head>

  • 5-Nah inilah yang ditunggu - tunggu , silahkan save template sobat dan lihat hasilnya
Tak terasa kini kita telah berhasil membuat menu navigasi ala evo magz, ternyata cukup capek juga ya membuat menu navigasi yang sekeren itu , hehhehehe tapi asalkan anda tahu lebih lelah yang menyajikan tutorialnya dari pada anda mempraktekan , hehehhe . ok sekian dari saya , silahkan mencobanya

27 October 2014

Cara membuat pos terkait versi seluler

Related Posts untuk seluler-Blogspot secara defauld artikel terkait tidak terdapat pada tampilan seluler atau mobile, jika anda bertanya bisakah pos terkait di tampilkan pada perangkat seluler atau mobile , jawabanya tentu sangat bisa yaitu dengan cara mengatur beberapa opsi dan tambahan kode script tertentu ke dalam template yang digunakan. Namun yang perlu diperhatikan di sini adalah di bagian mana script tersebut harus diletakkan. Untuk lebih jelasnya,ikuti langkah-langkah sebagai berikut:

Pertama, Login ke akun blogger anda
-Dan selanjutnya pada menu ‘Template’ ubah sesuaikan konfigurasi pada template seluler .
-Pilih atau centang Ya untuk menampilkan versi seluler pada blog yang dimaksud,
-Kemudian pilih template seluler ‘Khusus’
-Selanjutnya klik tombol ‘Simpan’, seperti yang tampak pada gambar di bawah ini.

Baca juga: Cara Agar widget tampil di seluler

Kedua, pilih ‘Edit HTML’ untuk menambahkan script pada template yang digunakan,
Ketiga,letakkan code Css berikut di atas kode ]]</b:skin>
/* ==related-posts tanpa gambar== */
#related-posts .widget h2,#related-posts h2{font:normal 16px Oswald;color:#333;text-transform:none;margin:0 0 10px;padding:0}
#related-posts h2{border-bottom:3px solid #aaa}
#related-posts a{color:#995c00;font:14px Tahoma}
#related-posts li{background:url(http://2.bp.blogspot.com/-EcBIblBtYTQ/TqALuRS_IzI/AAAAAAAAAx0/E-vzWTTOgXs/s1600/bullet-list.gif) no-repeat 0 10px;text-indent:0;line-height:1.2em;border-bottom:1px dotted #B7B3B4;margin:0;padding:3px 0 3px 12px}
#related-posts a:hover{color:#006666;text-decoration:none}
#related-posts .widget{margin:0;padding:0}
#related-posts ul{list-style:none;margin:0;padding:0}


-Cari kode </head>
-Kemudian letakkan kode berikut ini persis diatas kode </head>


<script type='text/javascript'>
var relatedpoststitle=&quot;TERKAIT&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<relatedUrls.length;b++){if(relatedUrls[b]==a){relatedUrls.splice(b,1);relatedTitles.splice(b,1)}}var c=Math.floor((relatedTitles.length-1)*Math.random());var b=0;if(relatedTitles.length>1){document.write("<h2>"+relatedpoststitle+"</h2>")}document.write("<ul>");while(b<relatedTitles.length&&b<20&&b<maxresults){document.write('<li><a href="'+relatedUrls[c]+'">'+relatedTitles[c]+"</a></li>");if(c<relatedTitles.length-1){c++}else{c=0}b++}document.write("</ul>");relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length)};
//]]>
</script>

Keempat, lakukan pencarian untuk kode
<div class='post-footer-line post-footer-line-2'>
yang di bawahnya ada kode

<b:if cond='data:top.showMobileShare'>


Kelima, tepat di bawah kode
<div class='post-footer-line post-footer-line-2'>
dan di atas kode
<b:if cond='data:top.showMobileShare'>
masukkan kode di bawah ini.

<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=8&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=15;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>


Terakhir simpan
-Dan silahkan cek blog anda untuk mengetahui hasil pemasangan pos terkait khusus seluler
-Ingat...! ngeceknya harus lewat browsur seluler ya...!


cukup mudah dan simpelkan .oky sampai disini penjelasan tentang pembuatan daftar artikel terkait pada template untuk tampilan seluler

24 October 2014

Daftar isi blog

Tags




Memuat...




23 October 2014

Jasa pembuatan blog online

Anda ingin membuat blog untuk promosi iklan produk anda...?

anda berada di situs yang tepat social media com kami melayani jasa pembuatan blog

Desain dan variasi berbagai macam tema Blog

blog untuk promosi toko online

Blog pribadi

Blog arsif data perkantoran
blog untuk bisnis online
atau anda sudah mempunyai blog untuk di desain yang lebih bagus lagi..?

DESAIN PROFESIONAL HARGA BERSAHABAT MUDAH DI KELOLA

segera hubungi kami mas asnaji

no handpone : 085396433760


22 October 2014

Cara merubah ukuran teks






Salam sejahtera sahabat Blogger semua... ketemu lagi dengan postingan saya kali ini dengan pembahasan Bagaimana cara merubah ukuran teks dalam postingan blog


kode untuk merubah nama dan ukuran font

<div style="font-family:Oswald ;color:#062C6A ;font-size:20 px;">
font Oswald besar warna</div>


hasilnya seperti ini:

font Oswald besar warna




<div style="font-family:Oswald;color:#FF0000;font-size:20px;text-align:center;">
font Oswald besar berwarna di tengah</div>

hasilnya seperti ini:

font Oswald besar berwarna di tengah

catatan:
nama jenis font: Oswald
kode warna font/teks : FF0000
ukuran font/teks :20
posisi font/teks :center

ubah nama kode ukuran dan posisi teks sesukamu
berikut nama-nama font yang sering di gunakan para blogger
Arial
Courier
Georgia
Times New Roman
Trebuchet
Verdana
Oswald
Arimo
italic
Corsiva


untuk pilihan warna lihat
di sini




cukup sampai disini uraian saya tentang Cara merubah ukuran teks
ketemu lagi di postingan berikutnya dengan Topik dan pembahasan yang berbeda....


21 October 2014

Kode warna html

kode warna
Gambar: © social media com

Kode warna atau tool warna html adalah salah satu point untuk sarana mempercantik dan mendesain sebuah blog, dalam hal ini tentunya tidaklah sedikit cara yang di lakukan oleh pemilik blog (admin), Dengan adanya variasi warna Backgrond sebuah blog akan menambah pesona daya tarik dan terlihat elegan , nah posting kali ini Admin akan sedikit berbagi tipsBagaimana cara memberi dan mengambil sampel warna di blog?
lihat halaman pengambilan kode sampel warna di bawah !


Get This Tools

cara pengambilan kode sampel warna letakan dan gerakkan cursor tepat di halaman warna dan sesuaikan warna yang akan anda kehendaki . perhatinkan speed warna sebelah kanan turun naikkan untuk mempertajam warna atau warna yang lebih terang dan warna lebih gelap, dan hasil kode warna bisa anda lihat di bawahnya , copy kode tersebut untuk warna desain blog anda ,! jangan lupa mengikut sertakan tanda pagar (#) oky saya rasa sudah cukup jelas ketemu lagi posting berikutnya .



16 October 2014

Cara memasang breadcrumbs di blog

Dalam hal mempercantik dan mendesain sebuah blog tentunya tidaklah sedikit
cara yang di lakukan
oleh pemilik blog (admin) salah satu yang di lakukan adalah dengan memberi berbagai macam style dan widget misalnya.... dengan memasang Breadcrumb di Blog, nah posting kali ini Admin akan sedikit berbagi tips bagaimana cara memasang Breadcrumb di blog ikuti dan simak langkah langkah berikut..!

login ke akun Blogger anda
Masuk ke template anda dan pilih edit HTML.
Silahkan cari kode ]]></b:skin>

dan letakan kode berikut ini tepat di atas kode ]]></b:skin>
.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}


Sekarang silahkan Cari kode <b:includable id='main' var='top'>
hapus dan ganti dengan kode Berikut ini.

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'><b:if cond='data:blog.pageType == &quot;static_page&quot;'><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div><b:else/><b:if cond='data:blog.pageType == &quot;item&quot;'><!-- breadcrumb for the post page --><b:loop values='data:posts' var='post'><b:if cond='data:post.labels'><div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'><span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span><b:loop values='data:post.labels' var='label'>&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span></b:loop>&#187; <span><data:post.title/></span></div><b:else/><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div></b:if></b:loop><b:else/><b:if cond='data:blog.pageType == &quot;archive&quot;'><!-- breadcrumb for the label archive page and search pages.. --><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span></div><b:else/><b:if cond='data:blog.pageType == &quot;index&quot;'><div class='breadcrumbs'><b:if cond='data:blog.pageName == &quot;&quot;'><span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span><b:else/><span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span></b:if></div></b:if></b:if></b:if></b:if></b:if></b:includable><b:includable id='main' var='top'><b:include data='posts' name='breadcrumb'/>

Save template anda. Kemudian cek di salah satu postingan sobat untuk melihat perubahan yang anda lakukan tadi diatas.

oky saya rasa sudah cukup jelas ketemu lagi posting berikutnya .