Cara Mengatur Template Blogku Mas Sugeng [UPDATED]

bingung mau mengatur tempate blogku karya mas sugeng ? mungkin sebagian dari kalian merasa bingun jika memang masih baru terjun dalam dunia blogging

baca juga cara mendapatkan uang dari ngeblog

disini saya akan memberitahukan bagai mana setting template blogku karya mas suggeng ini untuk kalian yang ingin customisasi sesua keingginan kalian

template blogku

Cara Mengatur Template Blogku Mas Sugeng

Gambar

disini saya akan menampilkan step by step yang saya lakukan untuk mengatur template blogku ini seperti punya mas sugeng yang pertama saya lakukan adalah sebagai berikut

Mengatur Heading Blogku Mas Sugeng

yang pertama saya lakukan adalah mengganti headingnya guys, headingnya yang menurut saya ketebalan saya kecilkan sesuai selera saya sendiri, berikut tata cara mengatur heading template blogku

1. buka blogger lalu pergi ke tema dan pencet menu edit html 

2. cari kode berikut #header dengan cara ctrl+f

3. setelah itu akan muncul seperti gambar seperti dibawah ini

Gambar

silahkan kalian edit sesuai selera kalian namun disini saya hanya mengganti ketebalan header dengan memperbesar font judul dalam blogku template karya mas sugeng ini

mengatur warna judul kalian bisa mengubah kode #fffffff dengan kode warna susuka kalian pada baris 395 pada gambar diatas

mengatur warna background kalian bisa edit pada kode #38424B, kode ini adalah warna bawaan blogku jika kalian ingin menggantinya silahkan hapus kode #38424B dan ganti susuka kalian pada kolom 372 pada gambar diatas

4. setelah semua sudah cocok saat di preview, kalian tinggal save

Mengatur Navbar Pada Header Template Blogku

disini saya hanya mengatur besar kecilnya sebuah font yang ada pada template blogku, karena menurut saya pribadi ukuran font yang diberikan pada blogku kurang besar

untuk mengatur navbar atas ini kalian bisa mulai dengan

1. buka blogger - tema - edit html

2. setelah itu kalian tinggal cari kode .tinynav1 { 

gambar

3. dibagian ini saya hanya mengatur pada bagian ukuran font, untuk mengaturnya kalian tinggal ubah 20px dengan ukuran yang kalian inginkan, disini saya mengatur 20px agar keliatan keliatan jelas

mengatur font yang digunakan kalian bisa merubah font-family pada contoh baris 334 pada gambar

merubah warna text navbar kalian bisa mengganti #585858 dengan kode warna yang kalian inginkan pada gambar di baris 324

merubah warna background navigasi kalian tinggal mengatur #ffffff  pada baris nomer 320 pada gambar

Menghilangkan Tumbnail Postingan di Template Blogku

untuk menghapus tumbnail postingan kalian ikuti langkah langkah pada postingan mas sugeng tentang menghapus tumbnail ikuti langkah 1 dan 2 setelah itu lanjutkan lagi disini

3. hapus kode berikut ini 

.post-box { margin-left: 163px;}

4. klik save selesai

Cara Mengubah Sidebar Blogku Template Mas Sugeng 

dalam cara ini saya sekali lagi hanya mengubah ukuran font pada sidebar di blogku, jika kalian ingin mengimprovisasi silahkan

mengatur ukuran judul pada sidebar kalian tinggal cari kode #sidebar h2 dan hasilnya akan tampak seperti di bawah ini

Gambar

disini kalian bisa merubah pada menu font-size untuk merubah ukuran font yang kalian inginkan, saya hanya mengatur ukuran saja

mengatur warna background pada sidebar blogku, untuk mengatur warna kalian tinggal mengatur pada menu background untuk warna yang kalian inginkan, 

mengatur font pada sidbar kalian tinggal merubah bagian font-family yang ada pada baris pada 574 di gambar diatas kalian bisa menemukannya pada website penyedia contoh font yang kalian inginkan

Menghapus Obeng dan Tang pada Blogku

memang sedikit ga penting banget menghapus beginian, namun memang kebanyakan kita merasa risih jika ada icon quick edit ini,

karena kemarin saya merasa terganggu dengan adanya icon ini maka saya menyembunyikannya, untuk caranya kalian tinggal cari kode ]]></b:skin> setelah itu pastekan kode .quickedit{display:none;} diatasnya 

ingat cara diatas hanya menyembunyikan, jika kalian ingin memunculkannya kalian tinggal hapus kode tadi guys 

Mengubah Footer Blogku Template

untuk mengatur footer template blogku ini kalian bisa mulai dengan 

Mengatur Tinggi Footer pada cara ini kalian bisa mengaturnya dengan cara cari kode #footer seperti gambar dibawah ini

Gambar

dalam menu footer-wrapper kalian bisa mengubah pada kode padding, jika ingin semakin tinggi kalian tinggal naikkan pixelnya jika ingin mengatur kecil kalian tinggal menguranginya

Mengatur background footer blogku untuk mengatur background kalian tinggal mengganti kode #38424B dengan kode warna yang kalian inginkan

Mengatur tulisan pada footer unruk mengatur tulisan kalian tinggal ikuti intruksi dibawah ini

1. cari kode  <!-- footer dibuka --!> seperti gambar dibawah ini

Gambar

2. setelah itu ganti dengan tulisan ini 

<div id='footer-box'>

<div class='footer-kiri'>

      Copyright &#169; 2017 <a expr:href='data:blog.homepageUrl' rel='copyright'>Trik Suhu</a> dibuat sepenuh &#9829;&#9829;&#9829;</div>

<div class='footer-kanan'>

&#8855;

<a href='http://triksuhu.blogspot.co.id/p/about.html' title='About'>About</a> &#8855;

<a href='http://triksuhu.blogspot.co.id/p/disclimer.html' title='Disclaimer'>Disclaimer</a> &#8855;

<a href='http://triksuhu.blogspot.co.id/p/contact-us.html' title='Contact'>Contact</a> &#8855;

<a href='http://triksuhu.blogspot.co.id/p/privacy-policy.html' title='Privacy Policy'>Privacy</a> &#8855;

<a href='http://triksuhu.blogspot.co.id/p/sitemap.html' title='Sitemap'>Sitemap</a> &#8855;

<a href='http://triksuhu.blogspot.co.id/p/partner.html' title='Sitemap'>Partner</a> &#8855;

    <a href='http://sugeng.id' title='Mas Sugeng'>Creator</a></div>

</div>

ganti huruf warna merah sesuka kalian guys nanti akan seperti gambar seperti dibawah ini

3. setelah itu save dan lihat hasilnya

Baca juga Cara cek skore seo blog

Cara menghapus kredit Mas Sugeng 

sebenarnya saya mengetahui bagaimana menghapusnya karna memang cukup mudah namun saya sarankan hargailah hasil karya mas Sugeng 

sebagai blogger yang baik sudah sepatutnya jika membiarkan credit tersebut tetap disana karna menurut saya sendiripun, 

malah saya merasa bangga jika menggunakan template buatan beliau, beliau sudah memberikan ijin kepada saya untuk mencicipi template keren yang sama dengan yang dia pakai sekarang ini

kalian bisa downloadnya di sugeng.id

atau hasil editan saya disini

Bonus 

baca juga cara mengetahui blog responsive atau tidak

Cara membuat kotak berlangganan ala Mas Sugeng

untuk membuat kotak berlangganan ini yang menurut saya kece parah maka tak ada salahnya berbagi apa yang sayaa pelajari

kalian pergi dahulu ke blogger - Tata Letak - add new widget - HTML/javascript setelah itu copy code di bawah ini

<div class='widget enews-widget' id='enews-ext-2'><div class='widget-wrap'><div class='enews'><h4 class='widget-title widgettitle'><center><b>BERLANGGANAN VIA EMAIL</b><center></center></center></h4><form action='https://feedburner.google.com/fb/a/mailverify' method='post' target='popupwindow' onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=triksuhu', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Dapatkan Artikel Terbaru Dari den Adit Melalui Email Anda.</p><input type='text' name='email' placeholder='Alamat Email'/><input type='hidden' value='DenAdit' name='uri'/><input type='hidden' name='loc' value='en_US'/><input type='submit' value='Lanjutkan'/></form></div></div></div><style type='text/css'>.enews-widget {background-color:#38424B;color:#FFF;padding:20px !important;margin-top:10px}.enews-widget h4 {font:17px/18px 'Oswald',Arial;margin:0 0 20px 0}.enews .screenread {height:1px;left:-1000em;overflow:hidden;position:absolute;top:-1000em;width:1px}.enews-widget input {font-size:15px;margin-bottom:15px;box-sizing:border-box;background-color:#FFF;border:2px solid #FFF;color:#333;padding:9px 11px;width:100%}.enews-widget input[type="submit"] {font:16px/20px "Oswald",Arial;background-color:#01AEFF;color:#FFF;margin:0;width:100%;border:none;cursor:pointer}.enews-widget input[type="submit"]:hover {background-color:#0173B2}</style>

silahkan kalian copas kode diatas lalu save dan lihat hasilnya kurang lebih akan seperti gambar dibawah ini

gimana guys masih kurang dengan bonus yang satu ini ? tenang saya masih ada bonus yang baru untuk kalian semua

Cara Menambah Fanpage Facebook di Blog

untuk menambahkan fanpage facebook di blog ini kalian tinggal copas aja kode dibawah ini agar lebih gampangnya, namun sebagai catatan kalian sudah mempunyai fanpage terlebih dahulu

silahkan kalian menuju tata letak - add new gadged - html/javascript

setelah itu pastekan kode dibawah ini untuk lebih cepatnya

<div style="text-align: center;">

<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fdenaditcom&tabs&width=285&height=155&small_header=true&adapt_container_width=false&hide_cover=false&show_facepile=true&appId" width="285" height="155" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

</div>

silahkan ganti huruf warna merah dengan id fanpage kalian guys setelah itu save

kira kira akan seperti ini guys penampakannya

karna memang dari dulu saya belajar ngeblog dari mas sugeng jadi apa yang dia lakukan adalah merupakan keharusan bagi saya maka karna pada blognya terdapat kotak fanpage maka saya tambahkan 

semoga artikel yang ala kadarnya ini dapat bermanfaat bagi kalian semua saya hanyalah salah satu fans mas sugeng yang ingin sedikit berbagi

baca juga : grup whatsapp blogger indonesia

jika memang artikel ini berguna silahkan bagikan kepada yang membutuhkan , dan tolong sampaikan pada kolom komentar jika memang ada salah ataupun kurang, insyaallah akan saya balas 

Update 

• mengubah lebar keseluruhan kalian bisa cari #wrapper

#wrapper {

text-align: left;

max-width: 1000px;

margin: 0 auto;

padding: 0 30px;

ganti yang berwarna merah dengan ukuran lebar yang kalian inginkan 

• menghilangkan gambar yang blank saat dibuka lewat hp ketika tumbnail yang dihapus

ini yang banyak jadi masalah karena banyaknya pertanyaan melalui wa dan fb maka saya akan jelaskan tutorialnya

1. pertama kalian cari @media 768/640/480/320px 
2. scroll kebawah sampai kalian menemukan .img-tumbnail
3. tambahkan kode berikut ini dibawahnya }

.img-thumbnail,

.img-thumbnail

img{display:none

cara diatas di lakukan dalam semua media 768/640/480/320px semuanya ganti agar semuanya hilang tumbnail kosong tersebut

• Mengatur jenis font judul

untuk mengaturnya kalian terlebih dahulu mencari kode fontnya di font google silahkan googling sendiri

kodenya kurang lebih seperti dibawah ini

<link href="https://fonts.googleapis.com/css?family=Macondo" rel="stylesheet">

silahkan kalian pastekan diatasnya </head> setelah itu cari kode #header h1.title, #header p.title 

jika sudah ketemu dibawahnya akan tertulis font family sekarang kalian tinggal ganti dengan sesuai font yang telah kalian pilih sebelumnya 

contohnya saya sebelumnya menggunakan font lobster maka caranya seperti ini 

font-family:'Lobster', cursive;

saya ganti yang bertandan bold diatas dengan font yang saya pilih sebelumnya menjadi

font-family: 'Macondo', cursive;

mungkin sampai disini undate terbarunya jika ada pertanyaan akan saya jawab semampu saya semoga berhasil den.

• Untuk menambahkan banyaknya karakter deskripsi di post dalam homepage

untuk menambahan banyaknya jumlah karakter kalian bisa menambahkan skript dibawah ini

<script type='text/javascript'>

snippet_count = 300;

//<![CDATA[

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var snippet = strx.split("<");

for(var i=0;i<snippet.length;i++){

if(snippet[i].indexOf(">")!=-1){

snippet[i] = snippet[i].substring(snippet[i].indexOf(">")+1,snippet[i].length);

}

}

strx = snippet.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSnippet(pID){

var div = document.getElementById(pID);

var summ = snippet_count;

var summary = '<div class="snippets">' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

pastekan diatasnya </head> yang berwarna merah adalah banyaknya karakter 

Langkah beriktnya silahkan cari kode <data:post.snippet/> dan ganti semua kode tersebut dengan kode baru dibawah ini den.

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSnippet(&quot;summary<data:post.id/>&quot;);</script>

setelah itu save

• Menambahkan Kode Meta Tag

untuk menambahkan kode ini kalian terlebih dahulu hapus meta tag Facebook Open Graph nah jika sudah silahkan pastekan kode dibawah ini

<!-- Facebook Open Graph -->

<meta expr:content='data:blog.title' property='og:site_name'/>

<meta content='1818683691786472' property='fb:app_id'/>

<meta content='100003235276480' property='fb:admins'/>

<meta expr:content='data:blog.url' property='og:url'/>

<meta content='website' property='og:type'/>

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtAPDui9571MOJYNO35N0px57Gu-vmtEgBL5y_04pnBW1VWrLwprCD787tgfXTRNEND5jlKPd8lyJcEeE5IzWW6dqNpkpoLaXOPSaPGVFYk_y9B8s1Z6G9cO2GWiXQa9hSfbrTJBZM6IE/s1600/den-adit-blog.PNG' property='og:image'/>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:if cond='data:blog.postImageThumbnailUrl'>

<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>

<b:else/>

<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtAPDui9571MOJYNO35N0px57Gu-vmtEgBL5y_04pnBW1VWrLwprCD787tgfXTRNEND5jlKPd8lyJcEeE5IzWW6dqNpkpoLaXOPSaPGVFYk_y9B8s1Z6G9cO2GWiXQa9hSfbrTJBZM6IE/s1600/den-adit-blog.PNG' property='og:image'/>

</b:if>

</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<meta expr:content='data:blog.title' property='og:title'/>

<meta content='deskripsi blog aden.' property='og:description'/>

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<meta expr:content='data:blog.pageName' property='og:title'/>

<meta expr:content='data:blog.metaDescription' property='og:description'/>

</b:if>

</b:if>

<meta content='blablabla' name='google-site-verification'/>

<meta content='blablabla' name='yandex-verification'/>

<meta content='blablabla' name='msvalidate.01'/>

<meta expr:content='data:blog.pageName' name='subject'/>

<meta expr:content='data:blog.pageName' name='abstract'/>

<meta content='Indonesian' name='language'/>

<meta content='index,follow' name='robots'/>

<meta content='2 days' name='revisit-after'/>

<meta content='never' name='expires'/>

<meta content='All-Language' http-equiv='Content-Language'/>

<meta content='global' name='distribution'/>

<meta content='blogger' name='generator'/>

<meta content='general' name='rating'/>

<meta content='global' name='target'/>

<meta content='true' name='MSSmartTagsPreventParsing'/>

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>

<meta content='index, follow' name='googlebot'/>

<meta content='follow, all' name='Googlebot-Image'/>

<meta content='follow, all' name='msnbot'/>

<meta content='follow, all' name='Slurp'/>

<meta content='follow, all' name='ZyBorg'/>

<meta content='follow, all' name='Scooter'/>

<meta content='all' name='spiders'/>

<meta content='all' name='WEBCRAWLERS'/>

<link href='https://plus.google.com/117460256619106628833/about' rel='author'/>

<link href='https://plus.google.com/117460256619106628833/posts' rel='publisher'/>

<link href='https://plus.google.com/117460256619106628833' rel='me'/>

<link expr:href='data:blog.url' rel='canonical'/>

gantilah tulisan berwarna merah, jika semuanya sudah selesai kalian tinggal safe dan mulai menulis blog

bagi yang masih kesulitan menghilangkan tumbnail di mobile bisa menggunakan cara ini

cari kode di bawah ini

@media only screen and (max-width:480px){

#wrapper, #header-box, #footer-box {

padding: 0 14px;

}

#footer-wrapper .footer-kiri, #footer-wrapper .footer-kanan {

float: none;

text-align: center;

}

#header-wrapper, #footer-wrapper {

padding: 14px 0;

}

.post, #sidebar .widget-content, .breadcrumbs, #comments, .inline-ad {

padding: 14px;

}

.img-thumbnail {

top: 14px;

left: 14px;

}

.img-thumbnail, .img-thumbnail img {

width: 80px;

height: 80px;

}

.post-box {

margin-top: 110px;

margin-left: 0;

}

#sidebar h2, #bawah-header h2, #atas-footer h2 {

padding: 14px 14px 0px;

}

#bawah-header .widget {

margin-top: 14px;

}

#sidebar .widget-content, #atas-footer .widget, .post, .breadcrumbs {

margin-bottom: 14px;

}

#content-wrapper {

padding: 14px 0 0;

}

.kotak-posting {

margin: 0 0 0 0;

}

}

ganti dengan kode berikut

@media only screen and (max-width:480px){

#wrapper, #header-box, #footer-box {

padding: 0 14px

}#footer-wrapper .footer-kiri, #footer-wrapper .footer-kanan {

float:none;

text-align:center

}

#header-wrapper,#footer-wrapper{

padding:14px 0

}

.post,#sidebar .widget-content,.breadcrumbs,#comments,.inline-ad{

padding: 14px

}

.img-thumbnail{

top:14px;

left:14px

}

.img-thumbnail, 

.img-thumbnail 

img{display:none

}.post-box{

margin-top:0px;

margin-left:0

}

#sidebar h2,#bawah-header h2,#atas-footer h2{

padding:14px 14px 0

}

#bawah-header .widget{

margin-top:14px}

#sidebar .widget-content,#atas-footer .widget,.post,.breadcrumbs{

margin-bottom:14px

}#content-wrapper

{padding:14px 0 0

}.kotak-posting{

margin:0 0 0 0

}

}

save